chore(canvas): handle rootElement on plane operations

- add rootElement on createPlane - remove rootElement on removePlane, but keep rootElement as part of planeDescriptor
bpmn-io · Dec 8, 2021 · f4aa05b · f4aa05b
1 parent ae86c62
commit f4aa05b
Show file tree

Hide file tree

Showing 2 changed files with 88 additions and 42 deletions.
diff --git a/lib/core/Canvas.js b/lib/core/Canvas.js
@@ -395,16 +395,15 @@ Canvas.prototype.createPlane = function(plane, rootElement) {
   }
 
   if (!plane.rootElement) {
-    rootElement = rootElement || {
+    plane.rootElement = rootElement || {
       id: '__implicitroot' + plane.name,
       children: [],
       isImplicit: true
     };
-
-
-    this.setRootElementForPlane(rootElement, plane);
   }
 
+  this._addRoot(plane.rootElement, plane);
+
   this._planes[plane.name] = plane;
 
   return plane;
@@ -522,6 +521,8 @@ Canvas.prototype.removePlane = function(plane) {
 
   delete this._planes[plane.name];
 
+  this._removeRoot(plane.rootElement);
+
   if (plane === this._activePlane) {
     this._activePlane = null;
   }
@@ -739,41 +740,55 @@ Canvas.prototype.setRootElementForPlane = function(element, plane, override) {
     this._ensureValid('root', element);
   }
 
-  var currentRoot = plane.rootElement,
-      elementRegistry = this._elementRegistry,
-      eventBus = this._eventBus;
+  var currentRoot = plane.rootElement;
 
   if (currentRoot) {
     if (!override) {
       throw new Error('rootElement already set, need to specify override');
     }
 
-    // simulate element remove event sequence
-    eventBus.fire('root.remove', { element: currentRoot });
-    eventBus.fire('root.removed', { element: currentRoot });
-
-    elementRegistry.remove(currentRoot);
+    this._removeRoot(currentRoot);
   }
 
   if (element) {
-    var gfx = plane.layer;
+    this._addRoot(element, plane);
+  }
 
-    // resemble element add event sequence
-    eventBus.fire('root.add', { element: element });
+  plane.rootElement = element;
 
-    elementRegistry.add(element, gfx);
+  return element;
+};
 
-    eventBus.fire('root.added', { element: element, gfx: gfx });
 
-    // associate SVG with root element when active
-    if (plane === this._activePlane) {
-      this._elementRegistry.updateGraphics(element, this._svg, true);
-    }
-  }
+Canvas.prototype._removeRoot = function(element) {
+  var elementRegistry = this._elementRegistry,
+      eventBus = this._eventBus;
 
-  plane.rootElement = element;
+  // simulate element remove event sequence
+  eventBus.fire('root.remove', { element: element });
+  eventBus.fire('root.removed', { element: element });
 
-  return element;
+  elementRegistry.remove(element);
+};
+
+
+Canvas.prototype._addRoot = function(element, plane) {
+  var elementRegistry = this._elementRegistry,
+      eventBus = this._eventBus;
+
+  var gfx = plane.layer;
+
+  // resemble element add event sequence
+  eventBus.fire('root.add', { element: element });
+
+  elementRegistry.add(element, gfx);
+
+  eventBus.fire('root.added', { element: element, gfx: gfx });
+
+  // associate SVG with root element when active
+  if (plane === this._activePlane) {
+    this._elementRegistry.updateGraphics(element, this._svg, true);
+  }
 };
 
 // add functionality //////////////////////

diff --git a/test/spec/core/CanvasSpec.js b/test/spec/core/CanvasSpec.js
@@ -2242,6 +2242,25 @@ describe('Canvas', function() {
       }));
 
 
+      it('should accept a plane descriptor', inject(function(canvas, elementRegistry) {
+
+        // given
+        var plane = {
+          name: 'a',
+          rootElement: { id: 'root' },
+          layer: canvas.getLayer('a')
+        };
+
+        // when
+        canvas.createPlane(plane);
+
+        // then
+        expect(canvas.getPlane('a')).to.exist;
+        expect(canvas.getPlane('a')).to.equal(plane);
+        expect(elementRegistry.get('root')).to.exist;
+      }));
+
+
       it('should fail when adding a plane twice', inject(function(canvas) {
 
         expect(function() {
@@ -2389,6 +2408,36 @@ describe('Canvas', function() {
         expect(canvas.getActivePlane().name).to.equal('base');
       }));
 
+
+      it('should remove root element', inject(function(canvas, elementRegistry) {
+
+        // given
+        var rootElement = { id: 'root' };
+        canvas.createPlane('a', rootElement);
+
+        // when
+        canvas.removePlane('a');
+
+        // then
+        expect(elementRegistry.get('root')).not.to.exist;
+      }));
+
+
+      it('should return valid plane descriptor', inject(function(canvas) {
+
+        // given
+        var rootElement = { id: 'root' };
+        canvas.createPlane('a', rootElement);
+
+        // when
+        var plane = canvas.removePlane('a');
+        canvas.createPlane(plane);
+
+        // then
+        expect(canvas.getPlane('a')).to.exist;
+        expect(canvas.getPlane('a').rootElement).to.eql(rootElement);
+      }));
+
     });
 
 
@@ -2417,24 +2466,6 @@ describe('Canvas', function() {
       }));
 
 
-      it('should accept a plane descriptor', inject(function(canvas) {
-
-        // given
-        var plane = {
-          name: 'a',
-          rootElement: { id: 'root' },
-          layer: canvas.getLayer('a')
-        };
-
-        // when
-        canvas.createPlane(plane);
-
-        // then
-        expect(canvas.getPlane('a')).to.exist;
-        expect(canvas.getPlane('a')).to.equal(plane);
-      }));
-
-
       it('should fill missing plane attributes', inject(function(canvas) {
 
         // given