feat: don't hide overlays on canvas move

CHANGELOG.md

@@ -6,6 +6,12 @@ All notable changes to [diagram-js](https://github.com/bpmn-io/diagram-js) are d
 
 _**Note:** Yet to be released changes appear here._
 
+* `FEAT`: don't hide overlays on canvas move by default ([#798](https://github.com/bpmn-io/diagram-js/issues/798))
+
+### Breaking Changes
+
+* The config option `canvas.deferUpdate` defaults to `false`.
+
 ## 12.2.0
 
 * `FEAT`: allow to provide html for popup menu entries icons ([#790](https://github.com/bpmn-io/diagram-js/pull/790))

lib/core/Canvas.js

@@ -227,9 +227,9 @@ Canvas.prototype._init = function(config) {
 
   const viewport = this._viewport = createGroup(svg, 'viewport');
 
-  // debounce canvas.viewbox.changed events
-  // for smoother diagram interaction
-  if (config.deferUpdate !== false) {
+  // debounce canvas.viewbox.changed events when deferUpdate is set
+  // to help with potential performance issues
+  if (config.deferUpdate) {
     this._viewboxChanged = debounce(bind(this._viewboxChanged, this), 300);
   }
 

test/spec/core/CanvasSpec.js

@@ -1106,71 +1106,108 @@ describe('Canvas', function() {
 
   describe('viewbox - debounce', function() {
 
-    var clock;
+    describe('deferUpdate: true', function() {
 
-    beforeEach(function() {
-      container = TestContainer.get(this);
+      var clock;
 
-      clock = sinon.useFakeTimers();
-    });
+      beforeEach(function() {
+        container = TestContainer.get(this);
 
-    afterEach(function() {
-      clock.restore();
-    });
+        clock = sinon.useFakeTimers();
+      });
 
+      afterEach(function() {
+        clock.restore();
+      });
 
-    beforeEach(createDiagram({
-      canvas: {
-        width: 300,
-        height: 300,
-        deferUpdate: true
-      }
-    }));
 
+      beforeEach(createDiagram({
+        canvas: {
+          width: 300,
+          height: 300,
+          deferUpdate: true
+        }
+      }));
 
-    // NOTE(nikku): this relies on fake timers properly set up
-    // to work with lodash (see TestHelper)
 
-    it('should debounce viewbox update', inject(function(eventBus, canvas) {
+      // NOTE(nikku): this relies on fake timers properly set up
+      // to work with lodash (see TestHelper)
 
-      // given
-      var changedListener = sinon.spy(function(event) {
-        var viewbox = event.viewbox;
+      it('should debounce viewbox update', inject(function(eventBus, canvas) {
 
-        expect(viewbox).to.exist;
-        expect(viewbox.scale).to.eql(0.5);
-      });
+        // given
+        var changedListener = sinon.spy(function(event) {
+          var viewbox = event.viewbox;
 
-      eventBus.on('canvas.viewbox.changed', changedListener);
+          expect(viewbox).to.exist;
+          expect(viewbox.scale).to.eql(0.5);
+        });
 
-      // when
-      canvas.zoom(0.5);
+        eventBus.on('canvas.viewbox.changed', changedListener);
 
-      // then
-      expect(changedListener).not.to.have.been.called;
+        // when
+        canvas.zoom(0.5);
 
-      // but when...
-      // letting the viewbox changed timeout of 300ms kick in
-      clock.tick(300);
+        // then
+        expect(changedListener).not.to.have.been.called;
 
-      // then
-      expect(changedListener).to.have.been.called;
-    }));
+        // but when...
+        // letting the viewbox changed timeout of 300ms kick in
+        clock.tick(300);
 
+        // then
+        expect(changedListener).to.have.been.called;
+      }));
 
-    it('should provide new viewbox immediately via getter', inject(function(canvas) {
 
-      // given
-      canvas.zoom();
+      it('should provide new viewbox immediately via getter', inject(function(canvas) {
 
-      // when
-      canvas.zoom(0.5);
+        // given
+        canvas.zoom();
 
-      // then
-      var newZoom = canvas.zoom();
+        // when
+        canvas.zoom(0.5);
 
-      expect(newZoom).to.eql(0.5);
-    }));
+        // then
+        var newZoom = canvas.zoom();
+
+        expect(newZoom).to.eql(0.5);
+      }));
+
+    });
+
+
+    describe('default', function() {
+
+      beforeEach(createDiagram({
+        canvas: {
+          width: 300,
+          height: 300,
+          deferUpdate: null
+        }
+      }));
+
+
+      it('should not debounce viewbox update', inject(function(eventBus, canvas) {
+
+        // given
+        var changedListener = sinon.spy(function(event) {
+          var viewbox = event.viewbox;
+
+          expect(viewbox).to.exist;
+          expect(viewbox.scale).to.eql(0.5);
+        });
+
+        eventBus.on('canvas.viewbox.changed', changedListener);
+
+        // when
+        canvas.zoom(0.5);
+
+        // then
+        expect(changedListener).to.have.been.called;
+      }));
+
+    });
 
   });