@joint/core 4.2.0-alpha.0 → 4.2.0-alpha.1

package/src/dia/LinkView.mjs

@@ -34,6 +34,8 @@ export const LinkView = CellView.extend({
     _labelCache: null,
     _labelSelectors: null,
     _V: null,
+    _sourceMagnet: null,
+    _targetMagnet: null,
     _dragData: null, // deprecated
 
     metrics: null,
@@ -75,23 +77,31 @@ export const LinkView = CellView.extend({
     UPDATE_PRIORITY: 1,
     EPSILON: 1e-6,
 
-    confirmUpdate: function(flags, opt) {
+    confirmUpdate: function(flags, opt = {}) {
 
-        opt || (opt = {});
+        const { paper, model } = this;
+        const { attributes } = model;
+        const { source: { id: sourceId }, target: { id: targetId }} = attributes;
 
         if (this.hasFlag(flags, Flags.SOURCE)) {
-            if (!this.updateEndProperties('source')) return flags;
+            this._sourceMagnet = null; // reset cached source magnet
+            this.checkEndModel('source', sourceId);
             flags = this.removeFlag(flags, Flags.SOURCE);
         }
 
         if (this.hasFlag(flags, Flags.TARGET)) {
-            if (!this.updateEndProperties('target')) return flags;
+            this._targetMagnet = null; // reset cached target magnet
+            this.checkEndModel('target', targetId);
             flags = this.removeFlag(flags, Flags.TARGET);
         }
 
-        const { paper, sourceView, targetView } = this;
-        if (paper && ((sourceView && !paper.isViewMounted(sourceView)) || (targetView && !paper.isViewMounted(targetView)))) {
-            // Wait for the sourceView and targetView to be rendered
+        if (
+            paper && (
+                (sourceId && !paper.isCellVisible(sourceId)) ||
+                (targetId && !paper.isCellVisible(targetId))
+            )
+        ) {
+            // Wait for the source and target views to be rendered
             return flags;
         }
 
@@ -101,8 +111,8 @@ export const LinkView = CellView.extend({
             this.updateTools(opt);
             flags = this.removeFlag(flags, [Flags.RENDER, Flags.UPDATE, Flags.LABELS, Flags.TOOLS, Flags.CONNECTOR]);
 
-            if (env.test('isSafari')) {
-                this.__fixSafariBug268376();
+            if (env.test('isAppleWebKit')) {
+                this.__fixWebKitBug268376();
             }
 
             return flags;
@@ -110,8 +120,6 @@ export const LinkView = CellView.extend({
 
         let updateHighlighters = false;
 
-        const { model } = this;
-        const { attributes } = model;
         let updateLabels = this.hasFlag(flags, Flags.LABELS);
 
         if (updateLabels) {
@@ -157,8 +165,8 @@ export const LinkView = CellView.extend({
         return flags;
     },
 
-    __fixSafariBug268376: function() {
-        // Safari has a bug where any change after the first render is not reflected in the DOM.
+    __fixWebKitBug268376: function() {
+        // WebKit has a bug where any change after the first render is not reflected in the DOM.
         // https://bugs.webkit.org/show_bug.cgi?id=268376
         const { el } = this;
         const childNodes = Array.from(el.childNodes);
@@ -931,44 +939,11 @@ export const LinkView = CellView.extend({
         }
     },
 
-    updateEndProperties: function(endType) {
-
-        const { model, paper } = this;
-        const endViewProperty = `${endType}View`;
-        const endDef = model.get(endType);
-        const endId = endDef && endDef.id;
-
-        if (!endId) {
-            // the link end is a point ~ rect 0x0
-            this[endViewProperty] = null;
-            this.updateEndMagnet(endType);
-            return true;
-        }
-
-        const endModel = paper.getModelById(endId);
-        if (!endModel) throw new Error('LinkView: invalid ' + endType + ' cell.');
-
-        const endView = endModel.findView(paper);
-        if (!endView) {
-            // A view for a model should always exist
-            return false;
-        }
-
-        this[endViewProperty] = endView;
-        this.updateEndMagnet(endType);
-        return true;
-    },
-
-    updateEndMagnet: function(endType) {
-
-        const endMagnetProperty = `${endType}Magnet`;
-        const endView = this.getEndView(endType);
-        if (endView) {
-            let connectedMagnet = endView.getMagnetFromLinkEnd(this.model.get(endType));
-            if (connectedMagnet === endView.el) connectedMagnet = null;
-            this[endMagnetProperty] = connectedMagnet;
-        } else {
-            this[endMagnetProperty] = null;
+    checkEndModel: function(endType, endId) {
+        if (!endId) return;
+        const endModel = this.paper.getModelById(endId);
+        if (!endModel) {
+            throw new Error(`LinkView: invalid ${endType} cell.`);
         }
     },
 
@@ -1858,56 +1833,30 @@ export const LinkView = CellView.extend({
         let isSnapped = false;
         // checking view in close area of the pointer
 
-        var r = snapLinks.radius || 50;
-        var viewsInArea = paper.findElementViewsInArea(
-            { x: x - r, y: y - r, width: 2 * r, height: 2 * r },
-            snapLinks.findInAreaOptions
-        );
+        const radius = snapLinks.radius || 50;
+        const findInAreaOptions = snapLinks.findInAreaOptions;
 
-        var prevClosestView = data.closestView || null;
-        var prevClosestMagnet = data.closestMagnet || null;
-        var prevMagnetProxy = data.magnetProxy || null;
+        const prevClosestView = data.closestView || null;
+        const prevClosestMagnet = data.closestMagnet || null;
+        const prevMagnetProxy = data.magnetProxy || null;
 
         data.closestView = data.closestMagnet = data.magnetProxy = null;
 
-        var minDistance = Number.MAX_VALUE;
-        var pointer = new Point(x, y);
-
-        viewsInArea.forEach(function(view) {
-            const candidates = [];
-            // skip connecting to the element in case '.': { magnet: false } attribute present
-            if (view.el.getAttribute('magnet') !== 'false') {
-                candidates.push({
-                    bbox: view.model.getBBox(),
-                    magnet: view.el
-                });
+        const isValidCandidate = (view, magnet) => {
+            // Do not snap to the current view
+            if (view === this) {
+                return false;
             }
 
-            view.$('[magnet]').toArray().forEach(magnet => {
-                candidates.push({
-                    bbox: view.getNodeBBox(magnet),
-                    magnet
-                });
-            });
-
-            candidates.forEach(candidate => {
-                const { magnet, bbox } = candidate;
-                // find distance from the center of the model to pointer coordinates
-                const distance = bbox.center().squaredDistance(pointer);
-                // the connection is looked up in a circle area by `distance < r`
-                if (distance < minDistance) {
-                    const isAlreadyValidated = prevClosestMagnet === magnet;
-                    if (isAlreadyValidated || paper.options.validateConnection.apply(
-                        paper, data.validateConnectionArgs(view, (view.el === magnet) ? null : magnet)
-                    )) {
-                        minDistance = distance;
-                        data.closestView = view;
-                        data.closestMagnet = magnet;
-                    }
-                }
-            });
+            const isAlreadyValidated = prevClosestMagnet === magnet;
+            return isAlreadyValidated || paper.options.validateConnection.apply(
+                paper, data.validateConnectionArgs(view, (view.el === magnet) ? null : magnet)
+            );
+        };
 
-        }, this);
+        const closest = paper.findClosestMagnetToPoint({ x, y }, { radius, findInAreaOptions, filter: isValidCandidate });
+        data.closestView = closest ? closest.view : null;
+        data.closestMagnet = closest ? closest.magnet : null;
 
         var end;
         var magnetProxy = null;
@@ -2225,8 +2174,82 @@ export const LinkView = CellView.extend({
     Flags: Flags,
 });
 
-Object.defineProperty(LinkView.prototype, 'sourceBBox', {
+Object.defineProperty(LinkView.prototype, 'sourceView', {
+    enumerable: true,
+
+    get: function() {
+        const source = this.model.attributes.source;
+        if (source.id && this.paper) {
+            return this.paper.findViewByModel(source.id);
+        }
+        return null;
+    }
+
+});
+
+Object.defineProperty(LinkView.prototype, 'targetView', {
+    enumerable: true,
+
+    get: function() {
+        const target = this.model.attributes.target;
+        if (target.id && this.paper) {
+            return this.paper.findViewByModel(target.id);
+        }
+        return null;
+    }
+});
+
+Object.defineProperty(LinkView.prototype, 'sourceMagnet', {
+    enumerable: true,
+
+    get: function() {
+        const sourceView = this.sourceView;
+        if (!sourceView) return null;
+        let sourceMagnet = null;
+        // Check if the magnet is already found and cached.
+        // We need to check if the cached magnet is still part of the source view.
+        // The source view might have been disposed and recreated, or the magnet might have been changed.
+        const cachedSourceMagnet = this._sourceMagnet;
+        if (cachedSourceMagnet && sourceView.el.contains(cachedSourceMagnet)) {
+            sourceMagnet = cachedSourceMagnet;
+        } else {
+            // If the cached magnet is not valid, we need to find the magnet.
+            sourceMagnet = sourceView.getMagnetFromLinkEnd(this.model.attributes.source);
+        }
+        this._sourceMagnet = sourceMagnet;
+        if (sourceMagnet === sourceView.el) {
+            // If the source magnet is the element itself, we treat it as no magnet.
+            return null;
+        }
+        return sourceMagnet;
+    }
+});
 
+Object.defineProperty(LinkView.prototype, 'targetMagnet', {
+    enumerable: true,
+
+    get: function() {
+        const targetView = this.targetView;
+        if (!targetView) return null;
+        let targetMagnet = null;
+        // Check if the magnet is already found and cached (See `sourceMagnet` for explanation).
+        const cachedTargetMagnet = this._targetMagnet;
+        if (cachedTargetMagnet && targetView.el.contains(cachedTargetMagnet)) {
+            targetMagnet = cachedTargetMagnet;
+        } else {
+            // If the cached magnet is not valid, we need to find the magnet.
+            targetMagnet = targetView.getMagnetFromLinkEnd(this.model.attributes.target);
+        }
+        this._targetMagnet = targetMagnet;
+        if (targetMagnet === targetView.el) {
+            // If the target magnet is the element itself, we treat it as no magnet.
+            return null;
+        }
+        return targetMagnet;
+    }
+});
+
+Object.defineProperty(LinkView.prototype, 'sourceBBox', {
     enumerable: true,
 
     get: function() {
@@ -2241,11 +2264,9 @@ Object.defineProperty(LinkView.prototype, 'sourceBBox', {
         }
         return sourceView.getNodeBBox(sourceMagnet || sourceView.el);
     }
-
 });
 
 Object.defineProperty(LinkView.prototype, 'targetBBox', {
-
     enumerable: true,
 
     get: function() {
@@ -2261,4 +2282,3 @@ Object.defineProperty(LinkView.prototype, 'targetBBox', {
         return targetView.getNodeBBox(targetMagnet || targetView.el);
     }
 });
-