fix(dia.LinkView): invalidate the root node cache when labels change (#…

…2758)
clientIO · Sep 18, 2024 · 6d12e65 · 6d12e65
1 parent f5df2d1
commit 6d12e65
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 0 deletions.
diff --git a/packages/joint-core/src/dia/CellView.mjs b/packages/joint-core/src/dia/CellView.mjs
@@ -768,6 +768,12 @@ export const CellView = View.extend({
         this.metrics = {};
     },
 
+    cleanNodeCache: function(node) {
+        const id = node.id;
+        if (!id) return;
+        delete this.metrics[id];
+    },
+
     nodeCache: function(magnet) {
 
         var metrics = this.metrics;

diff --git a/packages/joint-core/src/dia/LinkView.mjs b/packages/joint-core/src/dia/LinkView.mjs
@@ -461,6 +461,13 @@ export const LinkView = CellView.extend({
 
         if (!this._V.labels) return this;
 
+        if (!this.paper.options.labelLayer) {
+            // If there is no label layer, the cache needs to be cleared
+            // of the root node because the labels are attached
+            // to it and could affect the bounding box.
+            this.cleanNodeCache(this.el);
+        }
+
         var model = this.model;
         var labels = model.get('labels') || [];
         var canLabelMove = this.can('labelMove');

diff --git a/packages/joint-core/test/jointjs/linkView.js b/packages/joint-core/test/jointjs/linkView.js
@@ -91,6 +91,26 @@ QUnit.module('linkView', function(hooks) {
             assert.equal(group[0], circleNode);
             assert.equal(group[1], rectNode);
         });
+
+        QUnit.test('change label position', function(assert) {
+
+            link.labels([{
+                position: { distance: 0.5, offset: 0 },
+                attrs: { rect: { x: -10, y: -10, width: 20, height: 20 }}
+            }]);
+
+            const Y = 3;
+
+            const linkBBoxBefore = linkView.getNodeBBox(linkView.el);
+            assert.deepEqual(linkBBoxBefore.toJSON(), { x: 100, y: 90, width: 100, height: 20 });
+
+            link.label(0, { position: { distance: 0.5, offset: Y }});
+
+            const linkBBoxAfter = linkView.getNodeBBox(linkView.el);
+            assert.deepEqual(linkBBoxAfter.toJSON(), { x: 100, y: 90 + Y, width: 100, height: 20 });
+
+            assert.notOk(linkBBoxBefore.equals(linkBBoxAfter));
+        });
     });
 
     QUnit.module('addLabel', function(hooks) {