fix(linkTools.Anchor): fix area bounding box when the link is connect…

…ed to a link (#1941)
clientIO · Dec 13, 2022 · 659ca7c · 659ca7c
1 parent f91c544
commit 659ca7c
Show file tree

Hide file tree

Showing 2 changed files with 93 additions and 2 deletions.
diff --git a/src/linkTools/Anchor.mjs b/src/linkTools/Anchor.mjs
@@ -111,7 +111,7 @@ const Anchor = ToolView.extend({
         if (!isFinite(padding)) padding = 0;
         var bbox, angle, center;
         if (view.isNodeConnection(magnet)) {
-            bbox = view.getBBox();
+            bbox = view.getNodeBBox(magnet);
             angle = 0;
             center = bbox.center();
         } else {
@@ -129,7 +129,11 @@ const Anchor = ToolView.extend({
         areaNode.setAttribute('transform', 'translate(' + center.x + ',' + center.y + ') rotate(' + angle + ')');
     },
     toggleArea: function(visible) {
-        this.childNodes.area.style.display = (visible) ? '' : 'none';
+        var childNodes = this.childNodes;
+        if (!childNodes) return;
+        var areaNode = childNodes.area;
+        if (!areaNode) return;
+        areaNode.style.display = (visible) ? '' : 'none';
     },
     onPointerDown: function(evt) {
         if (this.guard(evt)) return;

diff --git a/test/jointjs/dia/linkTools.js b/test/jointjs/dia/linkTools.js
@@ -64,6 +64,67 @@ QUnit.module('linkTools', function(hooks) {
                 assert.deepEqual(link.prop(['target', 'anchor']), testCase.resultAnchor);
             });
         });
+
+        QUnit.test('No area', function(assert) {
+            const CustomAnchor = joint.linkTools.TargetAnchor.extend({
+                children: [{
+                    tagName: 'circle',
+                    selector: 'anchor',
+                    attributes: {
+                        'cursor': 'pointer'
+                    }
+                }]
+            });
+            const anchor = new CustomAnchor();
+            linkView.addTools(new joint.dia.ToolsView({ tools: [anchor] }));
+            assert.ok(true, 'The anchor tool does not require an area node.');
+        });
+
+        QUnit.test('No anchor', function(assert) {
+            const CustomAnchor = joint.linkTools.TargetAnchor.extend({
+                children: [{
+                    tagName: 'rect',
+                    selector: 'area',
+                    attributes: {
+                        'pointer-events': 'none',
+                        'fill': 'none',
+                        'stroke': '#33334F',
+                        'stroke-dasharray': '2,4',
+                        'rx': 5,
+                        'ry': 5
+                    }
+                }]
+            });
+            const anchor = new CustomAnchor();
+            linkView.addTools(new joint.dia.ToolsView({ tools: [anchor] }));
+            assert.ok(true, 'The anchor tool does not require an anchor node.');
+        });
+
+        QUnit.test('Element area bounding box', function(assert) {
+            paper.translate(11, 13);
+            const areaPadding = 7;
+            const anchor = new joint.linkTools.TargetAnchor({ areaPadding });
+            linkView.addTools(new joint.dia.ToolsView({ tools: [anchor] }));
+            anchor.toggleArea(true);
+            const areaBBox = V(anchor.childNodes.area).getBBox({ target: paper.viewport });
+            assert.checkBboxApproximately(1e-6, areaBBox, link.getTargetCell().getBBox().inflate(areaPadding));
+        });
+
+        QUnit.test('Link area bounding box', function(assert) {
+            const link2 = new joint.shapes.standard.Link({
+                source: { x: 100, y: 100 },
+                target: { x: 200, y: 200 }
+            });
+            graph.addCell(link2);
+            link.target(link2);
+            paper.translate(11, 13);
+            const areaPadding = 7;
+            const anchor = new joint.linkTools.TargetAnchor({ areaPadding });
+            linkView.addTools(new joint.dia.ToolsView({ tools: [anchor] }));
+            anchor.toggleArea(true);
+            const areaBBox = V(anchor.childNodes.area).getBBox({ target: paper.viewport });
+            assert.checkBboxApproximately(1e-6, areaBBox, link.getTargetCell().getBBox().inflate(areaPadding));
+        });
     });
 
     QUnit.module('SourceAnchor', function() {
@@ -85,6 +146,32 @@ QUnit.module('linkTools', function(hooks) {
                 assert.deepEqual(link.prop(['source', 'anchor']), testCase.resultAnchor);
             });
         });
+
+        QUnit.test('Element area bounding box', function(assert) {
+            paper.translate(11, 13);
+            const areaPadding = 7;
+            const anchor = new joint.linkTools.SourceAnchor({ areaPadding });
+            linkView.addTools(new joint.dia.ToolsView({ tools: [anchor] }));
+            anchor.toggleArea(true);
+            const areaBBox = V(anchor.childNodes.area).getBBox({ target: paper.viewport });
+            assert.checkBboxApproximately(1e-6, areaBBox, link.getSourceCell().getBBox().inflate(areaPadding));
+        });
+
+        QUnit.test('Link area bounding box', function(assert) {
+            const link2 = new joint.shapes.standard.Link({
+                source: { x: 100, y: 100 },
+                target: { x: 200, y: 200 }
+            });
+            graph.addCell(link2);
+            link.source(link2);
+            paper.translate(11, 13);
+            const areaPadding = 7;
+            const anchor = new joint.linkTools.SourceAnchor({ areaPadding });
+            linkView.addTools(new joint.dia.ToolsView({ tools: [anchor] }));
+            anchor.toggleArea(true);
+            const areaBBox = V(anchor.childNodes.area).getBBox({ target: paper.viewport });
+            assert.checkBboxApproximately(1e-6, areaBBox, link.getSourceCell().getBBox().inflate(areaPadding));
+        });
     });
 
     QUnit.module('Connect', function() {