diff --git a/lib/features/overlays/Overlays.js b/lib/features/overlays/Overlays.js index d0753918c..f71aed8ec 100644 --- a/lib/features/overlays/Overlays.js +++ b/lib/features/overlays/Overlays.js @@ -373,6 +373,7 @@ Overlays.prototype._updateOverlay = function(overlay) { } setPosition(htmlContainer, left || 0, top || 0); + this._updateOverlayVisibilty(overlay, this._canvas.viewbox()); }; @@ -459,8 +460,6 @@ Overlays.prototype._addOverlay = function(overlay) { var elementRoot = this._canvas.findRoot(element); var activeRoot = this._canvas.getRootElement(); - overlay.rootElement = elementRoot; - setVisible(htmlContainer, elementRoot === activeRoot); overlay.htmlContainer = htmlContainer; @@ -477,7 +476,7 @@ Overlays.prototype._addOverlay = function(overlay) { Overlays.prototype._updateOverlayVisibilty = function(overlay, viewbox) { var show = overlay.show, - rootElement = overlay.rootElement, + rootElement = this._canvas.findRoot(overlay.element), minZoom = show && show.minZoom, maxZoom = show && show.maxZoom, htmlContainer = overlay.htmlContainer, @@ -620,10 +619,8 @@ Overlays.prototype._init = function() { }); - eventBus.on('root.set', function(event) { - forEach(self._overlays, function(el) { - setVisible(el.htmlContainer, el.rootElement === event.element); - }); + eventBus.on('root.set', function() { + self._updateOverlaysVisibilty(); }); // clear overlays with diagram diff --git a/test/spec/features/overlays/OverlaysIntegrationSpec.js b/test/spec/features/overlays/OverlaysIntegrationSpec.js index 9429dd49b..45dc63928 100755 --- a/test/spec/features/overlays/OverlaysIntegrationSpec.js +++ b/test/spec/features/overlays/OverlaysIntegrationSpec.js @@ -9,6 +9,7 @@ import { import { classes as domClasses, + domify, query as domQuery } from 'min-dom'; @@ -173,6 +174,72 @@ describe('features/overlay - integration', function() { expect(parseInt(html.style.left)).to.equal(50); })); + + describe('changing root elements', function() { + + it('should hide on move to hidden root', inject(function(modeling, canvas, overlays) { + + // given + var root1 = canvas.setRootElement({ id: '1', children: [] }); + var root2 = canvas.addRootElement({ id: '2', children: [] }); + var shape = canvas.addShape({ + id: 'test', + x: 50, + y: 50, + width: 100, + height: 100 + }, root1); + + // add overlay to a single shape (or connection) + var overlayId = overlays.add(shape, { + html: domify('
TEST
TEST
'), + position: { + top: 0, + left: 0 + } + }); + + // when + modeling.moveShape(shape, { x: 0, y: 0 }, root2); + + // then + var html = overlays.get(overlayId).html; + expect(isVisible(html)).to.be.false; + })); + + + it('should show on move to active root', inject(function(modeling, canvas, overlays) { + + // given + var root1 = canvas.setRootElement({ id: '1', children: [] }); + var root2 = canvas.addRootElement({ id: '2', children: [] }); + var shape = canvas.addShape({ + id: 'test', + x: 50, + y: 50, + width: 100, + height: 100 + }, root2); + + // add overlay to a single shape (or connection) + var overlayId = overlays.add(shape, { + html: domify('
TEST
TEST
'), + position: { + top: 0, + left: 0 + } + }); + + // when + modeling.moveShape(shape, { x: 0, y: 0 }, root1); + + // then + var html = overlays.get(overlayId).html; + expect(isVisible(html)).to.be.true; + })); + + }); + }); @@ -328,3 +395,8 @@ describe('features/overlay - integration', function() { }); }); + + +function isVisible(element) { + return element.parentNode.style.display !== 'none'; +}