fix(overlays): add multi-root modeling behavior

bpmn-io · Dec 17, 2021 · 26cfc93 · 26cfc93
1 parent e1a88be
commit 26cfc93
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 7 deletions.
diff --git 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
@@ -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('<div style="width: 40px; height: 40px">TEST<br/>TEST</div>'),
+          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('<div style="width: 40px; height: 40px">TEST<br/>TEST</div>'),
+          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';
+}