feat(linkTools.Button): allow distance to be defined via callback (#2743

)
clientIO · Aug 26, 2024 · 5168a3a · 5168a3a
1 parent ae95768
commit 5168a3a
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 3 deletions.
diff --git a/packages/joint-core/src/linkTools/Button.mjs b/packages/joint-core/src/linkTools/Button.mjs
@@ -57,7 +57,10 @@ export const Button = ToolView.extend({
     },
     getLinkMatrix() {
         const { relatedView: view, options } = this;
-        const { offset = 0, distance = 0, rotate, scale } = options;
+        const { offset = 0, distance: distanceOpt = 0, rotate, scale } = options;
+        const distance = (typeof distanceOpt === 'function')
+            ? distanceOpt.call(this, view, this)
+            : distanceOpt;
         let tangent, position, angle;
         if (util.isPercentage(distance)) {
             tangent = view.getTangentAtRatio(parseFloat(distance) / 100);

diff --git a/packages/joint-core/test/jointjs/dia/linkTools.js b/packages/joint-core/test/jointjs/dia/linkTools.js
@@ -402,4 +402,32 @@ QUnit.module('linkTools', function(hooks) {
         });
     });
 
+    QUnit.module('Button', function() {
+
+        QUnit.test('distance as number', function(assert) {
+            const targetX = 333;
+            const distance = -17;
+            const button = new joint.linkTools.Button({ distance });
+            linkView.addTools(new joint.dia.ToolsView({ tools: [button] }));
+            // move the target cell to the right, to make the link horizontal
+            link.getTargetCell().position(targetX, link.getSourceCell().position().x);
+            assert.equal(button.el.getCTM().e, targetX + distance);
+        });
+
+        QUnit.test('distance as function', function(assert) {
+            const targetX = 333;
+            const distance = -17;
+            const distanceSpy = sinon.spy(() => distance);
+            const button = new joint.linkTools.Button({ distance: distanceSpy });
+            linkView.addTools(new joint.dia.ToolsView({ tools: [button] }));
+            assert.ok(distanceSpy.calledOnce);
+            assert.ok(distanceSpy.calledWithExactly(linkView, button));
+            assert.ok(distanceSpy.calledOn(button));
+            // move the target cell to the right, to make the link horizontal
+            link.getTargetCell().position(targetX, link.getSourceCell().position().x);
+            assert.ok(distanceSpy.calledTwice);
+            assert.equal(button.el.getCTM().e, targetX + distance);
+        });
+    });
+
 });
diff --git a/packages/joint-core/test/ts/toolsView.test.ts b/packages/joint-core/test/ts/toolsView.test.ts
@@ -54,3 +54,7 @@ new elementTools.HoverConnect({
     trackWidth: 10,
     trackPath: (view) => view.model.attr(['body', 'd']),
 });
+
+new linkTools.Button({
+    distance: (view) => view.getConnectionLength() < 100 ? 20 : '50%'
+});
diff --git a/packages/joint-core/types/joint.d.ts b/packages/joint-core/types/joint.d.ts
@@ -4390,10 +4390,14 @@ export namespace linkTools {
 
     namespace Button {
 
-        type ActionCallback = (evt: dia.Event, view: dia.LinkView, tool: dia.ToolView) => void;
+        type ActionCallback = (evt: dia.Event, view: dia.LinkView, tool: Button) => void;
+
+        type Distance = number | string;
+
+        type DistanceCallback = (this: Button, view: dia.LinkView, tool: Button) => Distance;
 
         interface Options extends dia.ToolView.Options {
-            distance?: number | string;
+            distance?: Distance | DistanceCallback;
             offset?: number;
             rotate?: boolean;
             action?: ActionCallback;