@joint/core 4.0.4 → 4.1.0

package/src/dia/LinkView.mjs

@@ -2,7 +2,7 @@ import { CellView } from './CellView.mjs';
 import { Link } from './Link.mjs';
 import V from '../V/index.mjs';
 import { addClassNamePrefix, merge, assign, isObject, isFunction, clone, isPercentage, result, isEqual } from '../util/index.mjs';
-import { Point, Line, Path, normalizeAngle, Rect, Polyline } from '../g/index.mjs';
+import { Point, Line, Path, normalizeAngle, Rect, Polyline, intersection } from '../g/index.mjs';
 import * as routers from '../routers/index.mjs';
 import * as connectors from '../connectors/index.mjs';
 import { env } from '../env/index.mjs';
@@ -63,7 +63,7 @@ export const LinkView = CellView.extend({
         attrs: [Flags.UPDATE],
         router: [Flags.UPDATE],
         connector: [Flags.CONNECTOR],
-        labels: [Flags.LABELS],
+        labels: [Flags.LABELS, Flags.TOOLS],
         labelMarkup: [Flags.LABELS],
         vertices: [Flags.UPDATE],
         source: [Flags.SOURCE, Flags.UPDATE],
@@ -73,6 +73,7 @@ export const LinkView = CellView.extend({
     initFlag: [Flags.RENDER, Flags.SOURCE, Flags.TARGET, Flags.TOOLS],
 
     UPDATE_PRIORITY: 1,
+    EPSILON: 1e-6,
 
     confirmUpdate: function(flags, opt) {
 
@@ -461,6 +462,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');
@@ -816,6 +824,34 @@ export const LinkView = CellView.extend({
         return connectionPoint.round(this.decimalsRounding);
     },
 
+    isIntersecting: function(geometryShape, geometryData) {
+        const connection = this.getConnection();
+        if (!connection) return false;
+        return intersection.exists(
+            geometryShape,
+            connection,
+            geometryData,
+            { segmentSubdivisions: this.getConnectionSubdivisions() },
+        );
+    },
+
+    isEnclosedIn: function(geometryRect) {
+        const connection = this.getConnection();
+        if (!connection) return false;
+        const bbox = connection.bbox();
+        if (!bbox) return false;
+        return geometryRect.containsRect(bbox);
+    },
+
+    isAtPoint: function(point /*, options */) {
+        // Note: `strict` option is not applicable for links.
+        // There is currently no method to determine if a path contains a point.
+        const area = new Rect(point);
+        // Intersection with a zero-size area is not possible.
+        area.inflate(this.EPSILON);
+        return this.isIntersecting(area);
+    },
+
     // combine default label position with built-in default label position
     _getDefaultLabelPositionProperty: function() {
 
@@ -1823,7 +1859,10 @@ export const LinkView = CellView.extend({
         // checking view in close area of the pointer
 
         var r = snapLinks.radius || 50;
-        var viewsInArea = paper.findViewsInArea({ x: x - r, y: y - r, width: 2 * r, height: 2 * r });
+        var viewsInArea = paper.findElementViewsInArea(
+            { x: x - r, y: y - r, width: 2 * r, height: 2 * r },
+            snapLinks.findInAreaOptions
+        );
 
         var prevClosestView = data.closestView || null;
         var prevClosestMagnet = data.closestMagnet || null;

package/src/dia/Paper.mjs

@@ -382,6 +382,11 @@ export const Paper = View.extend({
     ],
     MIN_SCALE: 1e-6,
 
+    // Default find buffer for the findViewsInArea and findViewsAtPoint methods.
+    // The find buffer is used to extend the area of the search
+    // to mitigate the differences between the model and view geometry.
+    DEFAULT_FIND_BUFFER: 200,
+
     init: function() {
 
         const { options } = this;
@@ -1858,6 +1863,85 @@ export const Paper = View.extend({
         }, this);
     },
 
+    findElementViewsInArea(plainArea, opt) {
+        return this._filterViewsInArea(
+            plainArea,
+            (extArea, findOpt) => this.model.findElementsInArea(extArea, findOpt),
+            opt
+        );
+    },
+
+    findLinkViewsInArea: function(plainArea, opt) {
+        return this._filterViewsInArea(
+            plainArea,
+            (extArea, findOpt) => this.model.findLinksInArea(extArea, findOpt),
+            opt
+        );
+    },
+
+    findCellViewsInArea: function(plainArea, opt) {
+        return this._filterViewsInArea(
+            plainArea,
+            (extArea, findOpt) => this.model.findCellsInArea(extArea, findOpt),
+            opt
+        );
+    },
+
+    findElementViewsAtPoint: function(plainPoint, opt) {
+        return this._filterViewsAtPoint(
+            plainPoint,
+            (extArea) => this.model.findElementsInArea(extArea),
+            opt
+        );
+    },
+
+    findLinkViewsAtPoint: function(plainPoint, opt) {
+        return this._filterViewsAtPoint(
+            plainPoint,
+            (extArea) => this.model.findLinksInArea(extArea),
+            opt,
+        );
+    },
+
+    findCellViewsAtPoint: function(plainPoint, opt) {
+        return this._filterViewsAtPoint(
+            plainPoint,
+            // Note: we do not want to pass `opt` to `findCellsInArea`
+            // because the `strict` option works differently for querying at a point
+            (extArea) => this.model.findCellsInArea(extArea),
+            opt
+        );
+    },
+
+    _findInExtendedArea: function(area, findCellsFn, opt = {}) {
+        const {
+            buffer = this.DEFAULT_FIND_BUFFER,
+        } = opt;
+        const extendedArea = (new Rect(area)).inflate(buffer);
+        const cellsInExtendedArea = findCellsFn(extendedArea, opt);
+        return cellsInExtendedArea.map(element => this.findViewByModel(element));
+    },
+
+    _filterViewsInArea: function(plainArea, findCells, opt = {}) {
+        const area = new Rect(plainArea);
+        const viewsInExtendedArea = this._findInExtendedArea(area, findCells, opt);
+        const viewsInArea = viewsInExtendedArea.filter(view => {
+            if (!view) return false;
+            return view.isInArea(area, opt);
+        });
+        return viewsInArea;
+    },
+
+    _filterViewsAtPoint: function(plainPoint, findCells, opt = {}) {
+        const area = new Rect(plainPoint); // zero-size area
+        const viewsInExtendedArea = this._findInExtendedArea(area, findCells, opt);
+        const viewsAtPoint = viewsInExtendedArea.filter(view => {
+            if (!view) return false;
+            return view.isAtPoint(plainPoint, opt);
+        });
+        return viewsAtPoint;
+    },
+
     removeTools: function() {
         this.dispatchToolsEvent('remove');
         return this;

package/src/dia/ToolView.mjs

@@ -6,6 +6,7 @@ export const ToolView = mvc.View.extend({
     className: 'tool',
     svgElement: true,
     _visible: true,
+    _visibleExplicit: true,
 
     init: function() {
         var name = this.name;
@@ -30,16 +31,40 @@ export const ToolView = mvc.View.extend({
         return this.name;
     },
 
+    // Evaluate the visibility of the tool and update the `display` CSS property
+    updateVisibility: function() {
+        const isVisible = this.computeVisibility();
+        this.el.style.display = isVisible ? '' : 'none';
+        this._visible = isVisible;
+    },
+
+    // Evaluate the visibility of the tool. The method returns `true` if the tool
+    // should be visible in the DOM.
+    computeVisibility() {
+        if (!this.isExplicitlyVisible()) return false;
+        const { visibility } = this.options;
+        if (typeof visibility !== 'function') return true;
+        return !!visibility.call(this, this.relatedView, this);
+    },
+
     show: function() {
-        this.el.style.display = '';
-        this._visible = true;
+        this._visibleExplicit = true;
+        this.updateVisibility();
     },
 
     hide: function() {
-        this.el.style.display = 'none';
-        this._visible = false;
+        this._visibleExplicit = false;
+        this.updateVisibility();
+    },
+
+    // The method returns `false` if the `hide()` method was called on the tool.
+    isExplicitlyVisible: function() {
+        return !!this._visibleExplicit;
     },
 
+    // The method returns `false` if the tool is not visible (it has `display: none`).
+    // This can happen if the `hide()` method was called or the tool is not visible
+    // because of the `visibility` option was evaluated to `false`.
     isVisible: function() {
         return !!this._visible;
     },

package/src/dia/ToolsView.mjs

@@ -44,25 +44,37 @@ export const ToolsView = mvc.View.extend({
     update: function(opt) {
 
         opt || (opt = {});
-        var tools = this.tools;
+        const tools = this.tools;
         if (!tools) return this;
-        var isRendered = this.isRendered;
-        for (var i = 0, n = tools.length; i < n; i++) {
-            var tool = tools[i];
-            if (!isRendered) {
+        const n = tools.length;
+        const wasRendered = this.isRendered;
+        for (let i = 0; i < n; i++) {
+            const tool = tools[i];
+            tool.updateVisibility();
+            if (!tool.isVisible()) continue;
+            if (!this.isRendered) {
+                // There is at least one visible tool
+                this.isRendered = Array(n).fill(false);
+            }
+            if (!this.isRendered[i]) {
                 // First update executes render()
                 tool.render();
-            } else if (opt.tool !== tool.cid && tool.isVisible()) {
+                this.isRendered[i] = true;
+            } else if (opt.tool !== tool.cid) {
                 tool.update();
             }
         }
+        if (!this.isRendered && n > 0) {
+            // None of the tools is visible
+            // Note: ToolsView with no tools are always mounted
+            return this;
+        }
         if (!this.isMounted()) {
             this.mount();
         }
-        if (!isRendered) {
+        if (!wasRendered) {
             // Make sure tools are visible (if they were hidden and the tool removed)
             this.blurTool();
-            this.isRendered = true;
         }
         return this;
     },
@@ -87,9 +99,12 @@ export const ToolsView = mvc.View.extend({
         if (!tools) return this;
         for (var i = 0, n = tools.length; i < n; i++) {
             var tool = tools[i];
-            if (tool !== blurredTool && !tool.isVisible()) {
+            if (tool !== blurredTool && !tool.isExplicitlyVisible()) {
                 tool.show();
-                tool.update();
+                // Check if the tool is conditionally visible too
+                if (tool.isVisible()) {
+                    tool.update();
+                }
             }
         }
         return this;

package/src/dia/attributes/connection.mjs

@@ -25,6 +25,7 @@ const connectionAttributesNS = {
 
     'connection': {
         qualify: isLinkView,
+        unset: 'd',
         set: function({ stubs = 0 }) {
             let d;
             if (isFinite(stubs) && stubs !== 0) {
@@ -49,21 +50,25 @@ const connectionAttributesNS = {
 
     'at-connection-length-keep-gradient': {
         qualify: isLinkView,
+        unset: 'transform',
         set: atConnectionWrapper('getTangentAtLength', { rotate: true })
     },
 
     'at-connection-length-ignore-gradient': {
         qualify: isLinkView,
+        unset: 'transform',
         set: atConnectionWrapper('getTangentAtLength', { rotate: false })
     },
 
     'at-connection-ratio-keep-gradient': {
         qualify: isLinkView,
+        unset: 'transform',
         set: atConnectionWrapper('getTangentAtRatio', { rotate: true })
     },
 
     'at-connection-ratio-ignore-gradient': {
         qualify: isLinkView,
+        unset: 'transform',
         set: atConnectionWrapper('getTangentAtRatio', { rotate: false })
     }
 

package/src/dia/attributes/defs.mjs

@@ -33,6 +33,7 @@ const defsAttributesNS = {
 
     'source-marker': {
         qualify: isPlainObject,
+        unset: 'marker-start',
         set: function(marker, refBBox, node, attrs) {
             marker = assign(contextMarker(attrs), marker);
             return { 'marker-start': 'url(#' + this.paper.defineMarker(marker) + ')' };
@@ -41,6 +42,7 @@ const defsAttributesNS = {
 
     'target-marker': {
         qualify: isPlainObject,
+        unset: 'marker-end',
         set: function(marker, refBBox, node, attrs) {
             marker = assign(contextMarker(attrs), { 'transform': 'rotate(180)' }, marker);
             return { 'marker-end': 'url(#' + this.paper.defineMarker(marker) + ')' };
@@ -49,6 +51,7 @@ const defsAttributesNS = {
 
     'vertex-marker': {
         qualify: isPlainObject,
+        unset: 'marker-mid',
         set: function(marker, refBBox, node, attrs) {
             marker = assign(contextMarker(attrs), marker);
             return { 'marker-mid': 'url(#' + this.paper.defineMarker(marker) + ')' };

package/src/dia/attributes/eval.mjs

@@ -1,4 +1,4 @@
-import { isCalcAttribute, evalCalcAttribute } from './calc.mjs';
+import { isCalcExpression, evalCalcExpression } from '../../util/calc.mjs';
 
 const calcAttributesList = [
     'transform',
@@ -53,8 +53,8 @@ export function evalAttributes(attrs, refBBox) {
 }
 
 export function evalAttribute(attrName, attrValue, refBBox) {
-    if (attrName in calcAttributes && isCalcAttribute(attrValue)) {
-        let evalAttrValue = evalCalcAttribute(attrValue, refBBox);
+    if (attrName in calcAttributes && isCalcExpression(attrValue)) {
+        let evalAttrValue = evalCalcExpression(attrValue, refBBox);
         if (attrName in positiveValueAttributes) {
             evalAttrValue = Math.max(0, evalAttrValue);
         }

package/src/dia/attributes/index.mjs

@@ -49,6 +49,9 @@ const attributesNS = {
     },
 
     'html': {
+        unset: function(node) {
+            $(node).empty();
+        },
         set: function(html, refBBox, node) {
             $(node).html(html + '');
         }

package/src/dia/attributes/shape.mjs

@@ -69,18 +69,22 @@ function pointsWrapper(opt) {
 const shapeAttributesNS = {
 
     'ref-d-reset-offset': {
+        unset: 'd',
         set: dWrapper({ resetOffset: true })
     },
 
     'ref-d-keep-offset': {
+        unset: 'd',
         set: dWrapper({ resetOffset: false })
     },
 
     'ref-points-reset-offset': {
+        unset: 'points',
         set: pointsWrapper({ resetOffset: true })
     },
 
     'ref-points-keep-offset': {
+        unset: 'points',
         set: pointsWrapper({ resetOffset: false })
     },
 };

package/src/dia/attributes/text.mjs

@@ -1,5 +1,5 @@
 import { assign, isPlainObject, isObject, isPercentage, breakText } from '../../util/util.mjs';
-import { isCalcAttribute, evalCalcAttribute } from './calc.mjs';
+import { isCalcExpression, evalCalcExpression } from '../../util/calc.mjs';
 import $ from '../../mvc/Dom/index.mjs';
 import V from '../../V/index.mjs';
 
@@ -40,6 +40,9 @@ const textAttributesNS = {
             const textWrap = attrs['text-wrap'];
             return !textWrap || !isPlainObject(textWrap);
         },
+        unset: function(node) {
+            node.textContent = '';
+        },
         set: function(text, refBBox, node, attrs) {
             const cacheName = 'joint-text';
             const cache = $.data.get(node, cacheName);
@@ -91,8 +94,8 @@ const textAttributesNS = {
             var width = value.width || 0;
             if (isPercentage(width)) {
                 size.width = refBBox.width * parseFloat(width) / 100;
-            } else if (isCalcAttribute(width)) {
-                size.width = Number(evalCalcAttribute(width, refBBox));
+            } else if (isCalcExpression(width)) {
+                size.width = Number(evalCalcExpression(width, refBBox));
             } else {
                 if (value.width === null) {
                     // breakText() requires width to be specified.
@@ -107,8 +110,8 @@ const textAttributesNS = {
             var height = value.height || 0;
             if (isPercentage(height)) {
                 size.height = refBBox.height * parseFloat(height) / 100;
-            } else if (isCalcAttribute(height)) {
-                size.height = Number(evalCalcAttribute(height, refBBox));
+            } else if (isCalcExpression(height)) {
+                size.height = Number(evalCalcExpression(height, refBBox));
             } else {
                 if (value.height === null) {
                     // if height is not specified breakText() does not
@@ -171,6 +174,13 @@ const textAttributesNS = {
             // HTMLElement title is specified via an attribute (i.e. not an element)
             return node instanceof SVGElement;
         },
+        unset: function(node) {
+            $.data.remove(node, 'joint-title');
+            const titleNode = node.firstElementChild;
+            if (titleNode) {
+                titleNode.remove();
+            }
+        },
         set: function(title, refBBox, node) {
             var cacheName = 'joint-title';
             var cache = $.data.get(node, cacheName);

package/src/dia/ports.mjs

@@ -280,6 +280,10 @@ export const elementPortPrototype = {
         }));
     },
 
+    getPortGroupNames: function() {
+        return Object.keys(this._portSettingsData.groups);
+    },
+
     /**
      * @param {string} groupName
      * @returns {Object<portId, {x: number, y: number, angle: number}>}

package/src/elementTools/HoverConnect.mjs

@@ -1,8 +1,8 @@
-import { HoverConnect as LinkHoverConnect } from '../linkTools/HoverConnect.mjs';
+import { HoverConnect as LinkHoverConnect } from '../cellTools/HoverConnect.mjs';
 import V from '../V/index.mjs';
 import * as g from '../g/index.mjs';
-import { getViewBBox } from '../linkTools/helpers.mjs';
-import { isCalcAttribute, evalCalcAttribute } from '../dia/attributes/calc.mjs';
+import { isCalcExpression, evalCalcExpression } from '../util/calc.mjs';
+import { getViewBBox } from '../cellTools/helpers.mjs';
 
 export const HoverConnect = LinkHoverConnect.extend({
 
@@ -15,9 +15,9 @@ export const HoverConnect = LinkHoverConnect.extend({
         if (typeof trackPath === 'function') {
             trackPath = trackPath.call(this, view);
         }
-        if (isCalcAttribute(trackPath)) {
+        if (isCalcExpression(trackPath)) {
             const bbox = getViewBBox(view, useModelGeometry);
-            trackPath = evalCalcAttribute(trackPath, bbox);
+            trackPath = evalCalcExpression(trackPath, bbox);
         }
         return new g.Path(V.normalizePathData(trackPath));
     },

package/src/elementTools/index.mjs

@@ -1,5 +1,6 @@
-export * from './Control.mjs';
-export { Button, Remove } from '../linkTools/Button.mjs';
-export { Connect } from '../linkTools/Connect.mjs';
-export { Boundary } from '../linkTools/Boundary.mjs';
 export { HoverConnect } from './HoverConnect.mjs';
+
+export { Button, Remove } from '../cellTools/Button.mjs';
+export { Connect } from '../cellTools/Connect.mjs';
+export { Boundary } from '../cellTools/Boundary.mjs';
+export { Control } from '../cellTools/Control.mjs';

package/src/g/rect.mjs

@@ -138,12 +138,20 @@ Rect.prototype = {
     },
 
     // @return {bool} true if point p is inside me.
-    containsPoint: function(p) {
-        
-        if (!(p instanceof Point)) {
-            p = new Point(p);
+    // @param {bool} strict If true, the point has to be strictly inside (not on the border).
+    containsPoint: function(p, opt) {
+        let x, y;
+        if (!p || (typeof p === 'string')) {
+            // Backwards compatibility: if the point is not provided,
+            // the point is considered to be the origin [0, 0].
+            ({ x, y } = new Point(p));
+        } else {
+            // Do not create a new Point object if the point is already a Point-like object.
+            ({ x = 0, y = 0 } = p);
         }
-        return p.x >= this.x && p.x <= this.x + this.width && p.y >= this.y && p.y <= this.y + this.height;
+        return opt && opt.strict
+            ? (x > this.x && x < this.x + this.width && y > this.y && y < this.y + this.height)
+            : x >= this.x && x <= this.x + this.width && y >= this.y && y <= this.y + this.height;
     },
 
     // @return {bool} true if rectangle `r` is inside me.

package/src/layout/ports/port.mjs

@@ -1,4 +1,3 @@
-import { evalCalcAttribute, isCalcAttribute } from '../../dia/attributes/calc.mjs';
 import * as g from '../../g/index.mjs';
 import * as util from '../../util/index.mjs';
 
@@ -58,13 +57,13 @@ function argTransform(bbox, args) {
     let { x, y, angle } = args;
     if (util.isPercentage(x)) {
         x = parseFloat(x) / 100 * bbox.width;
-    } else if (isCalcAttribute(x)) {
-        x = Number(evalCalcAttribute(x, bbox));
+    } else if (util.isCalcExpression(x)) {
+        x = Number(util.evalCalcExpression(x, bbox));
     }
     if (util.isPercentage(y)) {
         y = parseFloat(y) / 100 * bbox.height;
-    } else if (isCalcAttribute(y)) {
-        y = Number(evalCalcAttribute(y, bbox));
+    } else if (util.isCalcExpression(y)) {
+        y = Number(util.evalCalcExpression(y, bbox));
     }
     return { x, y, angle };
 }

package/src/linkTools/Anchor.mjs

@@ -1,7 +1,7 @@
 import * as g from '../g/index.mjs';
 import * as util from '../util/index.mjs';
 import { ToolView } from '../dia/ToolView.mjs';
-import { getAnchor, snapAnchor } from './helpers.mjs';
+import { getAnchor, snapAnchor } from '../cellTools/helpers.mjs';
 
 const Anchor = ToolView.extend({
     tagName: 'g',

package/src/linkTools/Arrowhead.mjs

@@ -51,7 +51,8 @@ const Arrowhead = ToolView.extend({
         var paper = relatedView.paper;
         relatedView.model.startBatch('arrowhead-move', { ui: true, tool: this.cid });
         relatedView.startArrowheadMove(this.arrowheadType);
-        this.delegateDocumentEvents();
+        const data = evt.data || (evt.data = {});
+        this.delegateDocumentEvents(null, data);
         paper.undelegateEvents();
         this.focus();
         this.el.style.pointerEvents = 'none';