fix(dia.HighlighterView): prevent highlighter mounting to unmounted c…

…ell views (#2165)
clientIO · May 4, 2023 · a7a49df · a7a49df
1 parent 2e9cac2
commit a7a49df
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 11 deletions.
diff --git a/src/dia/HighlighterView.mjs b/src/dia/HighlighterView.mjs
@@ -24,6 +24,7 @@ export const HighlighterView = mvc.View.extend({
     nodeSelector: null,
     node: null,
     updateRequested: false,
+    postponedUpdate: false,
     transformGroup: null,
     detachedTransformGroup: null,
 
@@ -41,6 +42,10 @@ export const HighlighterView = mvc.View.extend({
         // The cellView is now rendered/updated since it has a higher update priority.
         this.updateRequested = false;
         const { cellView, nodeSelector } = this;
+        if (!cellView.isMounted()) {
+            this.postponedUpdate = true;
+            return 0;
+        }
         this.update(cellView, nodeSelector);
         this.mount();
         this.transform();
@@ -92,8 +97,15 @@ export const HighlighterView = mvc.View.extend({
     },
 
     mount() {
-        const { MOUNTABLE, cellView, el, options, transformGroup, detachedTransformGroup } = this;
+        const { MOUNTABLE, cellView, el, options, transformGroup, detachedTransformGroup, postponedUpdate, nodeSelector } = this;
         if (!MOUNTABLE || transformGroup) return;
+        if (postponedUpdate) {
+            // The cellView was not mounted when the update was requested.
+            // The update was postponed until the cellView is mounted.
+            this.update(cellView, nodeSelector);
+            this.transform();
+            return;
+        }
         const { vel: cellViewRoot, paper } = cellView;
         const { layer: layerName } = options;
         if (layerName) {
@@ -139,6 +151,7 @@ export const HighlighterView = mvc.View.extend({
     update() {
         const { node: prevNode, cellView, nodeSelector, updateRequested, id } = this;
         if (updateRequested) return;
+        this.postponedUpdate = false;
         const node = this.node = this.findNode(cellView, nodeSelector);
         if (prevNode) {
             this.unhighlight(cellView, prevNode);

diff --git a/src/dia/ToolsView.mjs b/src/dia/ToolsView.mjs
@@ -123,10 +123,6 @@ export const ToolsView = mvc.View.extend({
             }
         }
         return this;
-    },
-
-    isMounted: function() {
-        return this.el.parentNode !== null;
     }
 
 });
diff --git a/test/jointjs/dia/HighlighterView.js b/test/jointjs/dia/HighlighterView.js
@@ -264,6 +264,30 @@ QUnit.module('HighlighterView', function(hooks) {
                 });
             });
 
+            QUnit.test('are not mounted to an unmounted element view', function(assert) {
+                ['back', null].forEach(layer => {
+                    const id = 'highlighter-id';
+                    paper.dumpViews({ viewport: () => false });
+                    const highlighter = joint.dia.HighlighterView.add(elementView, 'root', id, { layer });
+                    assert.notOk(highlighter.el.isConnected);
+                    if (layer) {
+                        assert.notOk(highlighter.transformGroup);
+                        assert.notOk(highlighter.detachedTransformGroup);
+                    }
+                    paper.dumpViews({ viewport: () => true });
+                    assert.ok(highlighter.el.isConnected);
+                    if (layer) {
+                        assert.ok(highlighter.transformGroup);
+                        const { tx, ty } = highlighter.transformGroup.translate();
+                        const { x, y } = element.position();
+                        assert.equal(tx, x);
+                        assert.equal(ty, y);
+                        assert.notOk(highlighter.detachedTransformGroup);
+                    }
+                    joint.dia.HighlighterView.remove(elementView, id);
+                });
+            });
+
             QUnit.test('are mounted and unmounted with the link view', function(assert) {
                 ['back', null].forEach(layer => {
                     const id = 'highlighter-id';

diff --git a/types/joint.d.ts b/types/joint.d.ts
@@ -1796,10 +1796,6 @@ export namespace dia {
 
         mount(): this;
 
-        unmount(): this;
-
-        isMounted(): boolean;
-
         protected simulateRelatedView(el: SVGElement): void;
     }
 
@@ -1868,9 +1864,9 @@ export namespace dia {
         nodeSelector: HighlighterView.NodeSelector | null;
         node: SVGElement | null;
         updateRequested: boolean;
+        postponedUpdate: boolean;
         transformGroup: Vectorizer | null;
-
-        public unmount(): void;
+        detachedTransformGroup: Vectorizer | null;
 
         protected findNode(cellView: dia.CellView, nodeSelector: HighlighterView.NodeSelector): SVGElement | null;
 
@@ -3397,6 +3393,8 @@ export namespace mvc {
 
         unmount(): void;
 
+        isMounted(): boolean;
+
         protected init(): void;
 
         protected onRender(): void;