diff --git a/CHANGELOG.md b/CHANGELOG.md index 63dfb4ee8..612aaa477 100644 --- a/CHANGELOG.md +++ b/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)) diff --git a/lib/core/Canvas.js b/lib/core/Canvas.js index bec9bddf7..52fd685d7 100644 --- a/lib/core/Canvas.js +++ b/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); } diff --git a/test/spec/core/CanvasSpec.js b/test/spec/core/CanvasSpec.js index 9c8121e9b..0450f965e 100644 --- a/test/spec/core/CanvasSpec.js +++ b/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; + })); + + }); });