@joint/core 4.1.3 → 4.2.0-alpha.1

package/src/dia/ports.mjs

@@ -4,19 +4,38 @@ import { Rect, Point } from '../g/index.mjs';
 import * as Port from '../layout/ports/port.mjs';
 import * as PortLabel from '../layout/ports/portLabel.mjs';
 
-var PortData = function(data) {
+const DEFAULT_PORT_POSITION_NAME = 'left';
+const DEFAULT_ABSOLUTE_PORT_POSITION_NAME = 'absolute';
+const DEFAULT_PORT_LABEL_POSITION_NAME = 'left';
 
-    var clonedData = util.cloneDeep(data) || {};
+const PortData = function(model) {
+
+    const { portLayoutNamespace = Port, portLabelLayoutNamespace = PortLabel } = model;
+
+    const clonedData = util.cloneDeep(model.get('ports')) || {};
     this.ports = [];
+    this.portsMap = {};
     this.groups = {};
-    this.portLayoutNamespace = Port;
-    this.portLabelLayoutNamespace = PortLabel;
+    this.portLayoutNamespace = portLayoutNamespace;
+    this.portLabelLayoutNamespace = portLabelLayoutNamespace;
+    this.metrics = {};
+    this.metricsKey = null;
 
     this._init(clonedData);
 };
 
 PortData.prototype = {
 
+    hasPort: function(id) {
+        return id in this.portsMap;
+    },
+
+    getPort: function(id) {
+        const port = this.portsMap[id];
+        if (port) return port;
+        throw new Error('Element: unable to find port with id ' + id);
+    },
+
     getPorts: function() {
         return this.ports;
     },
@@ -32,52 +51,92 @@ PortData.prototype = {
         });
     },
 
-    getGroupPortsMetrics: function(groupName, elBBox) {
+    // Calculate SVG transformations based on evaluated group + port data
+    // NOTE: This function is also called for ports without a group (groupName = undefined)
+    getGroupPortsMetrics: function(groupName, rect) {
 
-        var group = this.getGroup(groupName);
-        var ports = this.getPortsByGroup(groupName);
+        const { x = 0, y = 0, width = 0, height = 0 } = rect;
+        const metricsKey = `${x}:${y}:${width}:${height}`;
+        if (this.metricsKey !== metricsKey) {
+            // Clear the cache (the element size has changed)
+            this.metrics = {};
+            this.metricsKey = metricsKey;
+        }
 
-        var groupPosition = group.position || {};
-        var groupPositionName = groupPosition.name;
-        var namespace = this.portLayoutNamespace;
-        if (!namespace[groupPositionName]) {
-            groupPositionName = 'left';
+        let groupPortsMetrics = this.metrics[groupName];
+        if (groupPortsMetrics) {
+            // Return cached metrics
+            return groupPortsMetrics;
         }
 
-        var groupArgs = groupPosition.args || {};
-        var portsArgs = ports.map(function(port) {
+        // Calculate the metrics
+        groupPortsMetrics = this.resolveGroupPortsMetrics(groupName, new Rect(x, y, width, height));
+        this.metrics[groupName] = groupPortsMetrics;
+        return groupPortsMetrics;
+    },
+
+    resolveGroupPortsMetrics: function(groupName, elBBox) {
+
+        // `groupName` of `undefined` (= not a string) means "the group of ports which do not have the `group` property".
+        const isNoGroup = (groupName === undefined);
+
+        const group = this.getGroup(groupName);
+        const ports = this.getPortsByGroup(groupName);
+
+        const portsArgs = ports.map(function(port) {
             return port && port.position && port.position.args;
         });
-        var groupPortTransformations = namespace[groupPositionName](portsArgs, elBBox, groupArgs);
 
-        var accumulator = {
+        // Get an array of transformations of individual ports according to the group's port layout function:
+        let groupPortTransformations;
+        if (isNoGroup) {
+            // Apply default port layout function to the set of ports without `group` property.
+            const noGroup = this._evaluateGroup({});
+            groupPortTransformations = this._getGroupPortTransformations(noGroup, portsArgs, elBBox);
+
+        } else {
+            groupPortTransformations = this._getGroupPortTransformations(group, portsArgs, elBBox);
+        }
+
+        let accumulator = {
             ports: ports,
-            result: []
+            result: {}
         };
 
-        util.toArray(groupPortTransformations).reduce(function(res, portTransformation, index) {
-            var port = res.ports[index];
-            res.result.push({
-                portId: port.id,
+        // For each individual port transformation, find the information necessary to calculate SVG transformations:
+        util.toArray(groupPortTransformations).reduce((res, portTransformation, index) => {
+            const port = res.ports[index];
+            const portId = port.id;
+            res.result[portId] = {
+                index,
+                portId,
                 portTransformation: portTransformation,
-                labelTransformation: this._getPortLabelLayout(port, Point(portTransformation), elBBox),
+                labelTransformation: this._getPortLabelTransformation(port, Point(portTransformation), elBBox),
                 portAttrs: port.attrs,
                 portSize: port.size,
                 labelSize: port.label.size
-            });
+            };
             return res;
-        }.bind(this), accumulator);
+        }, accumulator);
 
         return accumulator.result;
     },
 
-    _getPortLabelLayout: function(port, portPosition, elBBox) {
+    _getGroupPortTransformations: function(group, portsArgs, elBBox) {
 
-        var namespace = this.portLabelLayoutNamespace;
-        var labelPosition = port.label.position.name || 'left';
+        const groupPosition = group.position || {};
+        const groupPositionArgs = groupPosition.args || {};
+        const groupPositionLayoutCallback = groupPosition.layoutCallback;
+        return groupPositionLayoutCallback(portsArgs, elBBox, groupPositionArgs);
+    },
 
-        if (namespace[labelPosition]) {
-            return namespace[labelPosition](portPosition, elBBox, port.label.position.args);
+    _getPortLabelTransformation: function(port, portPosition, elBBox) {
+
+        const portLabelPosition = port.label.position || {};
+        const portLabelPositionArgs = portLabelPosition.args || {};
+        const portLabelPositionLayoutCallback = portLabelPosition.layoutCallback;
+        if (portLabelPositionLayoutCallback) {
+            return portLabelPositionLayoutCallback(portPosition, elBBox, portLabelPositionArgs);
         }
 
         return null;
@@ -85,7 +144,8 @@ PortData.prototype = {
 
     _init: function(data) {
 
-        // prepare groups
+        // Prepare groups:
+        // NOTE: This overwrites passed group properties with evaluated group properties.
         if (util.isObject(data.groups)) {
             var groups = Object.keys(data.groups);
             for (var i = 0, n = groups.length; i < n; i++) {
@@ -94,93 +154,197 @@ PortData.prototype = {
             }
         }
 
-        // prepare ports
+        // Prepare ports:
+        // NOTE: This overwrites passed port properties with evaluated port properties, plus mixed-in evaluated group properties (see above).
         var ports = util.toArray(data.items);
         for (var j = 0, m = ports.length; j < m; j++) {
-            this.ports.push(this._evaluatePort(ports[j]));
+            const resolvedPort = this._evaluatePort(ports[j]);
+            this.ports.push(resolvedPort);
+            this.portsMap[resolvedPort.id] = resolvedPort;
         }
     },
 
     _evaluateGroup: function(group) {
 
-        return util.merge(group, {
-            position: this._getPosition(group.position, true),
-            label: this._getLabel(group, true)
-        });
+        return util.merge(
+            {},
+            group,
+            {
+                position: this._evaluateGroupPositionProperty(group),
+                label: this._evaluateGroupLabelProperty(group)
+            }
+        );
     },
 
-    _evaluatePort: function(port) {
+    _evaluateGroupPositionProperty: function(group) {
 
-        var evaluated = util.assign({}, port);
+        const namespace = this.portLayoutNamespace;
+        const groupPosition = group.position;
+        if (groupPosition === undefined) {
+            const layoutCallback = this._resolveLayoutCallbackOrThrow(namespace, DEFAULT_PORT_POSITION_NAME, 'Default port group');
+            return { layoutCallback };
 
-        var group = this.getGroup(port.group);
+        } else if (util.isFunction(groupPosition)) {
+            return { layoutCallback: groupPosition };
 
-        evaluated.markup = evaluated.markup || group.markup;
-        evaluated.attrs = util.merge({}, group.attrs, evaluated.attrs);
-        evaluated.position = this._createPositionNode(group, evaluated);
-        evaluated.label = util.merge({}, group.label, this._getLabel(evaluated));
-        evaluated.z = this._getZIndex(group, evaluated);
-        evaluated.size = util.assign({}, group.size, evaluated.size);
+        } else if (util.isObject(groupPosition)) {
+            if (groupPosition.name) {
+                const layoutCallback = this._resolveLayoutCallbackOrThrow(namespace, groupPosition.name, 'Provided port group');
+                return { layoutCallback, args: groupPosition.args };
+            } else {
+                const layoutCallback = this._resolveLayoutCallbackOrThrow(namespace, DEFAULT_PORT_POSITION_NAME, 'Default port group');
+                return { layoutCallback, args: groupPosition.args };
+            }
 
-        return evaluated;
+        } else if (util.isString(groupPosition)) {
+            // TODO: Remove legacy signature (see `this._evaluateGroupLabelPositionProperty()`).
+            const layoutCallback = this._resolveLayoutCallbackOrThrow(namespace, groupPosition, 'Provided port group');
+            return { layoutCallback };
+
+        } else if (Array.isArray(groupPosition)) {
+            // TODO: Remove legacy signature (see `this._evaluateGroupLabelPositionProperty()`).
+            const layoutCallback = this._resolveLayoutCallbackOrThrow(namespace, DEFAULT_ABSOLUTE_PORT_POSITION_NAME, 'Default absolute port group');
+            return { layoutCallback, args: { x: groupPosition[0], y: groupPosition[1] }};
+
+        } else {
+            throw new Error('dia.Element: Provided port group position value has an invalid type.');
+        }
     },
 
-    _getZIndex: function(group, port) {
+    _evaluateGroupLabelProperty: function(group) {
 
-        if (util.isNumber(port.z)) {
-            return port.z;
+        const groupLabel = group.label;
+        if (!groupLabel) {
+            return {
+                position: this._evaluateGroupLabelPositionProperty({})
+            };
         }
-        if (util.isNumber(group.z) || group.z === 'auto') {
-            return group.z;
+
+        return util.merge(
+            {},
+            groupLabel,
+            {
+                position: this._evaluateGroupLabelPositionProperty(groupLabel)
+            }
+        );
+    },
+
+    _evaluateGroupLabelPositionProperty: function(groupLabel) {
+
+        const namespace = this.portLabelLayoutNamespace;
+        const groupLabelPosition = groupLabel.position;
+        if (groupLabelPosition === undefined) {
+            const layoutCallback = this._resolveLayoutCallbackOrThrow(namespace, DEFAULT_PORT_LABEL_POSITION_NAME, 'Default port group label');
+            return { layoutCallback };
+
+        } else if (util.isFunction(groupLabelPosition)) {
+            return { layoutCallback: groupLabelPosition };
+
+        }  else if (util.isObject(groupLabelPosition)) {
+            if (groupLabelPosition.name) {
+                const layoutCallback = this._resolveLayoutCallbackOrThrow(namespace, groupLabelPosition.name, 'Provided port group label');
+                return { layoutCallback, args: groupLabelPosition.args };
+            } else {
+                const layoutCallback = this._resolveLayoutCallbackOrThrow(namespace, DEFAULT_PORT_LABEL_POSITION_NAME, 'Default port group label');
+                return { layoutCallback, args: groupLabelPosition.args };
+            }
+
+        } else {
+            throw new Error('dia.Element: Provided port group label position value has an invalid type.');
         }
-        return 'auto';
     },
 
-    _createPositionNode: function(group, port) {
+    _evaluatePort: function(port) {
 
-        return util.merge({
-            name: 'left',
-            args: {}
-        }, group.position, { args: port.args });
+        const group = this.getGroup(port.group);
+
+        const evaluated = util.assign({}, port);
+        evaluated.markup = evaluated.markup || group.markup;
+        evaluated.attrs = util.merge({}, group.attrs, evaluated.attrs);
+        evaluated.position = this._evaluatePortPositionProperty(group, evaluated);
+        evaluated.label = this._evaluatePortLabelProperty(group, evaluated);
+        evaluated.z = this._evaluatePortZProperty(group, evaluated);
+        evaluated.size = util.assign({}, group.size, evaluated.size);
+        return evaluated;
     },
 
-    _getPosition: function(position, setDefault) {
+    _evaluatePortPositionProperty: function(group, port) {
 
-        var args = {};
-        var positionName;
+        return {
+            args: util.merge(
+                {},
+                // NOTE: `x != null` is equivalent to `x !== null && x !== undefined`.
+                (group.position != null) ? group.position.args : {},
+                // Port can overwrite `group.position.args` via `port.position.args` or `port.args`.
+                // TODO: Remove `port.args` backwards compatibility.
+                (((port.position != null) && (port.position.args != null)) ? port.position.args : port.args))
+        };
+    },
 
-        if (util.isFunction(position)) {
-            positionName = 'fn';
-            args.fn = position;
-        } else if (util.isString(position)) {
-            positionName = position;
-        } else if (position === undefined) {
-            positionName = setDefault ? 'left' : null;
-        } else if (Array.isArray(position)) {
-            positionName = 'absolute';
-            args.x = position[0];
-            args.y = position[1];
-        } else if (util.isObject(position)) {
-            positionName = position.name;
-            util.assign(args, position.args);
+    _evaluatePortLabelProperty: function(group, port) {
+
+        const groupLabel = group.label;
+        const portLabel = port.label;
+        if (!portLabel) {
+            return util.assign(
+                {},
+                groupLabel
+            );
         }
 
-        var result = { args: args };
+        return util.merge(
+            {},
+            groupLabel,
+            util.merge(
+                {},
+                portLabel,
+                {
+                    position: this._evaluatePortLabelPositionProperty(portLabel)
+                }
+            )
+        );
+    },
+
+    _evaluatePortLabelPositionProperty: function(portLabel) {
+
+        const namespace = this.portLabelLayoutNamespace;
+        const portLabelPosition = portLabel.position;
+        if (portLabelPosition === undefined) {
+            return {};
+
+        } else if (util.isFunction(portLabelPosition)) {
+            return { layoutCallback: portLabelPosition };
 
-        if (positionName) {
-            result.name = positionName;
+        }  else if (util.isObject(portLabelPosition)) {
+            if (portLabelPosition.name) {
+                const layoutCallback = this._resolveLayoutCallbackOrThrow(namespace, portLabelPosition.name, 'Provided port label');
+                return { layoutCallback, args: portLabelPosition.args };
+            } else {
+                return { args: portLabelPosition.args };
+            }
+
+        } else {
+            throw new Error('dia.Element: Provided port label position value has an invalid type.');
         }
-        return result;
     },
 
-    _getLabel: function(item, setDefaults) {
+    _evaluatePortZProperty: function(group, port) {
 
-        var label = item.label || {};
-
-        var ret = label;
-        ret.position = this._getPosition(label.position, setDefaults);
+        if (util.isNumber(port.z)) {
+            return port.z;
+        }
+        if (util.isNumber(group.z) || group.z === 'auto') {
+            return group.z;
+        }
+        return 'auto';
+    },
 
-        return ret;
+    _resolveLayoutCallbackOrThrow: function(namespace, name, errorSubstring) {
+        const layoutCallback = namespace[name];
+        if (!layoutCallback) {
+            throw new Error(`dia.Element: ${errorSubstring} layout name is not recognized.`);
+        }
+        return layoutCallback;
     }
 };
 
@@ -240,8 +404,7 @@ export const elementPortPrototype = {
      */
     hasPorts: function() {
 
-        var ports = this.prop('ports/items');
-        return Array.isArray(ports) && ports.length > 0;
+        return this._portSettingsData.getPorts().length > 0;
     },
 
     /**
@@ -250,7 +413,7 @@ export const elementPortPrototype = {
      */
     hasPort: function(id) {
 
-        return this.getPortIndex(id) !== -1;
+        return this._portSettingsData.hasPort(id);
     },
 
     /**
@@ -274,10 +437,8 @@ export const elementPortPrototype = {
      * @returns {object}
      */
     getPort: function(id) {
-
-        return util.cloneDeep(util.toArray(this.prop('ports/items')).find(function(port) {
-            return port.id && port.id === id;
-        }));
+        const port = util.toArray(this.prop('ports/items')).find(port => port.id && port.id === id);
+        return util.cloneDeep(port);
     },
 
     getPortGroupNames: function() {
@@ -290,17 +451,90 @@ export const elementPortPrototype = {
      */
     getPortsPositions: function(groupName) {
 
-        var portsMetrics = this._portSettingsData.getGroupPortsMetrics(groupName, Rect(this.size()));
-
-        return portsMetrics.reduce(function(positions, metrics) {
-            var transformation = metrics.portTransformation;
-            positions[metrics.portId] = {
-                x: transformation.x,
-                y: transformation.y,
-                angle: transformation.angle
+        const portsMetrics = this.getGroupPortsMetrics(groupName);
+        const portsPosition = {};
+        for (const portId in portsMetrics) {
+            const {
+                portTransformation: { x, y, angle },
+            } = portsMetrics[portId];
+            portsPosition[portId] = {
+                x: x,
+                y: y,
+                angle
             };
-            return positions;
-        }, {});
+        }
+        return portsPosition;
+    },
+
+    getPortMetrics: function(portId) {
+        const port = this._portSettingsData.getPort(portId);
+        return this.getGroupPortsMetrics(port.group)[portId];
+    },
+
+    getGroupPortsMetrics: function(groupName) {
+        return this._portSettingsData.getGroupPortsMetrics(groupName, this.size());
+    },
+
+    getPortRelativePosition: function(portId) {
+        const { portTransformation: { x, y, angle }} = this.getPortMetrics(portId);
+        return { x, y, angle };
+    },
+
+    getPortRelativeRect(portId) {
+        const {
+            portTransformation: { x, y, angle },
+            portSize: { width, height }
+        } = this.getPortMetrics(portId);
+        const portRect = {
+            x: x - width / 2,
+            y: y - height / 2,
+            width,
+            height,
+            angle
+        };
+        return portRect;
+    },
+
+    /**
+     * @param {string} portId
+     * @returns {Point}
+     * @description Returns the port center in the graph coordinate system.
+     * The port center is in the graph coordinate system, and the position
+     * already takes into account the element rotation.
+     **/
+    getPortCenter(portId) {
+        const elementBBox = this.getBBox();
+        const portPosition = this.getPortRelativePosition(portId);
+        const portCenter = new Point(portPosition).offset(elementBBox.x, elementBBox.y);
+        const angle = this.angle();
+        if (angle) portCenter.rotate(elementBBox.center(), -angle);
+        return portCenter;
+    },
+
+    /**
+     * @param {string} portId
+     * @param {object} [opt]
+     * @param {boolean} [opt.rotate] - If true, the port bounding box is rotated
+     * around the port center.
+     * @returns {Rect}
+     * @description Returns the bounding box of the port in the graph coordinate system.
+     * The port center is rotated around the element center, but the port bounding box
+     * is not rotated (unless `opt.rotate` is set to true).
+     */
+    getPortBBox: function(portId, opt) {
+        const portRect = this.getPortRelativeRect(portId);
+        const elementBBox = this.getBBox();
+        // Note: the `angle` property of the `port` is ignore here for now
+        const portBBox = new Rect(portRect);
+        portBBox.offset(elementBBox.x, elementBBox.y);
+        const angle = this.angle();
+        if (angle) {
+            portBBox.moveAroundPoint(elementBBox.center(), -angle);
+        }
+        if (opt && opt.rotate) {
+            portBBox.rotateAroundCenter(angle);
+        }
+        return portBBox;
     },
 
     /**
@@ -499,7 +733,7 @@ export const elementPortPrototype = {
             prevPortData = this._portSettingsData.getPorts();
         }
 
-        this._portSettingsData = new PortData(this.get('ports'));
+        this._portSettingsData = new PortData(this);
 
         var curPortData = this._portSettingsData.getPorts();
 
@@ -822,15 +1056,15 @@ export const elementViewPortPrototype = {
      */
     _updatePortGroup: function(groupName) {
 
-        var elementBBox = Rect(this.model.size());
-        var portsMetrics = this.model._portSettingsData.getGroupPortsMetrics(groupName, elementBBox);
+        const portsMetrics = this.model.getGroupPortsMetrics(groupName);
+        const portsIds = Object.keys(portsMetrics);
 
-        for (var i = 0, n = portsMetrics.length; i < n; i++) {
-            var metrics = portsMetrics[i];
-            var portId = metrics.portId;
-            var cached = this._portElementsCache[portId] || {};
-            var portTransformation = metrics.portTransformation;
-            var labelTransformation = metrics.labelTransformation;
+        for (let i = 0, n = portsIds.length; i < n; i++) {
+            const portId = portsIds[i];
+            const metrics = portsMetrics[portId];
+            const cached = this._portElementsCache[portId] || {};
+            const portTransformation = metrics.portTransformation;
+            const labelTransformation = metrics.labelTransformation;
             if (labelTransformation && cached.portLabelElement) {
                 this.updateDOMSubtreeAttributes(cached.portLabelElement.node, labelTransformation.attrs, {
                     rootBBox: new Rect(metrics.labelSize),
@@ -882,4 +1116,3 @@ export const elementViewPortPrototype = {
         return label.markup || this.model.get('portLabelMarkup') || this.model.portLabelMarkup || this.portLabelMarkup;
     }
 };
-

package/src/elementTools/HoverConnect.mjs

@@ -2,30 +2,36 @@ import { HoverConnect as LinkHoverConnect } from '../cellTools/HoverConnect.mjs'
 import V from '../V/index.mjs';
 import * as g from '../g/index.mjs';
 import { isCalcExpression, evalCalcExpression } from '../util/calc.mjs';
-import { getViewBBox } from '../cellTools/helpers.mjs';
+import { getToolOptions, getViewBBox } from '../cellTools/helpers.mjs';
 
 export const HoverConnect = LinkHoverConnect.extend({
 
     getTrackPath() {
-        const { relatedView: view, options } = this;
+        const { relatedView: view } = this;
         let {
             useModelGeometry,
-            trackPath =  'M 0 0 H calc(w) V calc(h) H 0 Z'
-        } = options;
+            relative,
+            trackPath = 'M 0 0 H calc(w) V calc(h) H 0 Z'
+        } = getToolOptions(this);
         if (typeof trackPath === 'function') {
             trackPath = trackPath.call(this, view);
         }
         if (isCalcExpression(trackPath)) {
-            const bbox = getViewBBox(view, useModelGeometry);
+            const bbox = getViewBBox(view, { useModelGeometry, relative });
             trackPath = evalCalcExpression(trackPath, bbox);
         }
         return new g.Path(V.normalizePathData(trackPath));
     },
 
     getTrackMatrix() {
-        const { relatedView: view, options } = this;
-        let { useModelGeometry, rotate } = options;
-        let bbox = getViewBBox(view, useModelGeometry);
+        if (this.isOverlay()) return this.getTrackMatrixAbsolute();
+        return V.createSVGMatrix();
+    },
+
+    getTrackMatrixAbsolute() {
+        const { relatedView: view } = this;
+        let { useModelGeometry, rotate } = getToolOptions(this);
+        let bbox = getViewBBox(view, { useModelGeometry });
         const angle = view.model.angle();
         if (!rotate) bbox = bbox.bbox(angle);
         let matrix = V.createSVGMatrix().translate(bbox.x + bbox.width / 2, bbox.y + bbox.height / 2);

package/src/env/index.mjs

@@ -9,9 +9,12 @@ export const env = {
                 /SVGForeignObject/.test(({}).toString.call(document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject')));
         },
 
-        // works for iOS browsers too
-        isSafari: function() {
-            return /Safari/.test(navigator.userAgent) && /Apple Computer/.test(navigator.vendor);
+        // works for: (1) macOS Safari, (2) any WKWebView, (3) any iOS browser (including Safari, CriOS, EdgiOS, OPR, FxiOS)
+        isAppleWebKit: function() {
+            const userAgent = navigator.userAgent;
+            const isAppleWebKit = /applewebkit/i.test(userAgent);
+            const isChromium = /chrome/i.test(userAgent); // e.g. Chrome, Edge, Opera, SamsungBrowser
+            return isAppleWebKit && !isChromium;
         }
     },
 
@@ -36,7 +39,7 @@ export const env = {
 
         try {
             result = fn();
-        } catch (error) {
+        } catch {
             result = false;
         }