fix(dia.Paper): custom events on link label (#2381)

clientIO · Nov 6, 2023 · 8d3a09f · 8d3a09f
1 parent d033ff4
commit 8d3a09f
Show file tree

Hide file tree

Showing 3 changed files with 100 additions and 19 deletions.
diff --git a/src/dia/Paper.mjs b/src/dia/Paper.mjs
@@ -2201,22 +2201,12 @@ export const Paper = View.extend({
                 view.preventDefaultInteraction(evt);
             }
 
-            const rootViewEl = view.el;
-
             // Custom event
-            const eventNode = target.closest('[event]');
-            if (eventNode && rootViewEl !== eventNode && view.el.contains(eventNode)) {
-                const eventEvt = normalizeEvent($.Event(evt.originalEvent, {
-                    data: evt.data,
-                    // Originally the event listener was attached to the event element.
-                    currentTarget: eventNode
-                }));
-                this.onevent(eventEvt);
-                if (eventEvt.isDefaultPrevented()) {
-                    evt.preventDefault();
-                }
-                // `onevent` can stop propagation
+            const eventEvt = this.customEventTrigger(evt, view);
+            if (eventEvt) {
+            // `onevent` could have stopped propagation
                 if (eventEvt.isPropagationStopped()) return;
+
                 evt.data = eventEvt.data;
             }
 
@@ -2548,15 +2538,24 @@ export const Paper = View.extend({
     onlabel: function(evt) {
 
         var labelNode = evt.currentTarget;
+
         var view = this.findView(labelNode);
-        if (view) {
+        if (!view) return;
 
-            evt = normalizeEvent(evt);
-            if (this.guard(evt, view)) return;
+        evt = normalizeEvent(evt);
+        if (this.guard(evt, view)) return;
 
-            var localPoint = this.snapToGrid(evt.clientX, evt.clientY);
-            view.onlabel(evt, localPoint.x, localPoint.y);
+        // Custom event
+        const eventEvt = this.customEventTrigger(evt, view, labelNode);
+        if (eventEvt) {
+            // `onevent` could have stopped propagation
+            if (eventEvt.isPropagationStopped()) return;
+
+            evt.data = eventEvt.data;
         }
+
+        var localPoint = this.snapToGrid(evt.clientX, evt.clientY);
+        view.onlabel(evt, localPoint.x, localPoint.y);
     },
 
     getPointerArgs(evt) {
@@ -3082,6 +3081,29 @@ export const Paper = View.extend({
         markerContentVEl.appendTo(markerVEl);
         markerVEl.appendTo(defs);
         return id;
+    },
+
+    customEventTrigger: function(evt, view, rootNode = view.el) {
+
+        const eventNode = evt.target.closest('[event]');
+
+        if (eventNode && rootNode !== eventNode && view.el.contains(eventNode)) {
+            const eventEvt = normalizeEvent($.Event(evt.originalEvent, {
+                data: evt.data,
+                // Originally the event listener was attached to the event element.
+                currentTarget: eventNode
+            }));
+
+            this.onevent(eventEvt);
+
+            if (eventEvt.isDefaultPrevented()) {
+                evt.preventDefault();
+            }
+
+            return eventEvt;
+        }
+
+        return null;
     }
 
 }, {

diff --git a/test/jointjs/paper.js b/test/jointjs/paper.js
@@ -2940,4 +2940,61 @@ QUnit.module('paper', function(hooks) {
             });
         });
     });
+
+    QUnit.test('custom event with label link', function(assert) {
+
+        const event = 'link:label:pointerdown';
+
+        const link = new joint.shapes.standard.Link({
+            source: { x: 50, y: 50 },
+            target: { x: 300, y: 70 },
+            labels: [{
+                markup: [
+                    {
+                        tagName: 'rect',
+                        selector: 'labelBody'
+                    }, {
+                        tagName: 'text',
+                        selector: 'labelText'
+                    }
+                ],
+                attrs: {
+                    labelText: {
+                        text: 'Label',
+                        pointerEvents: 'none',
+                    },
+                    labelBody: {
+                        ref: 'text',
+                        width: 'calc(w)',
+                        height: 'calc(h)',
+                        fill: '#ffffff',
+                        stroke: 'black',
+                        event,
+                    }
+                },
+            }]
+        });
+
+        const { paper, graph } = this;
+
+        graph.addCell(link);
+
+        const spy = sinon.spy();
+        paper.on('all', spy);
+
+        const linkView = link.findView(paper);
+        const labelBody = linkView.el.querySelector('rect');
+
+        simulate.mousedown({ el: labelBody, clientX: 10, clientY: 10 });
+
+        var localPoint = paper.snapToGrid(10, 10);
+        assert.ok(spy.calledThrice);
+        assert.ok(spy.calledWithExactly(
+            event,
+            linkView,
+            sinon.match.instanceOf($.Event),
+            localPoint.x,
+            localPoint.y
+        ));
+    });
 });
diff --git a/types/joint.d.ts b/types/joint.d.ts
@@ -1757,6 +1757,8 @@ export namespace dia {
         protected insertView(cellView: CellView, isInitialInsert: boolean): void;
 
         protected detachView(cellView: CellView): void;
+
+        protected customEventTrigger(event: dia.Event, view: CellView, rootNode?: SVGElement): dia.Event | null;
     }
 
     namespace PaperLayer {