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

package/src/dia/ToolView.mjs

@@ -69,6 +69,10 @@ export const ToolView = mvc.View.extend({
         return !!this._visible;
     },
 
+    isOverlay: function() {
+        return !!this.parentView && this.parentView.hasLayer();
+    },
+
     focus: function() {
         var opacity = this.options.focusOpacity;
         if (isFinite(opacity)) this.el.style.opacity = opacity;

package/src/dia/ToolsView.mjs

@@ -138,12 +138,21 @@ export const ToolsView = mvc.View.extend({
         this.tools = null;
     },
 
+    getLayer() {
+        const { layer = LayersNames.TOOLS } = this.options;
+        return layer;
+    },
+
+    hasLayer() {
+        return !!this.getLayer();
+    },
+
     mount: function() {
         const { options, el } = this;
-        const { relatedView, layer = LayersNames.TOOLS, z } = options;
+        const { relatedView, z } = options;
         if (relatedView) {
-            if (layer) {
-                relatedView.paper.getLayerView(layer).insertSortedNode(el, z);
+            if (this.hasLayer()) {
+                relatedView.paper.getLayerView(this.getLayer()).insertSortedNode(el, z);
             } else {
                 relatedView.el.appendChild(el);
             }

package/src/dia/attributes/text.mjs

@@ -54,9 +54,10 @@ const textAttributesNS = {
             const eol = attrs.eol;
             const x = attrs.x;
             let textPath = attrs['text-path'];
+            const useNoBreakSpace = attrs['use-no-break-space'] === true;
             // Update the text only if there was a change in the string
             // or any of its attributes.
-            const textHash = JSON.stringify([text, lineHeight, annotations, textVerticalAnchor, eol, displayEmpty, textPath, x, fontSize]);
+            const textHash = JSON.stringify([text, lineHeight, annotations, textVerticalAnchor, eol, displayEmpty, textPath, x, fontSize, useNoBreakSpace]);
             if (cache === undefined || cache !== textHash) {
                 // Chrome bug:
                 // <tspan> positions defined as `em` are not updated
@@ -79,7 +80,8 @@ const textAttributesNS = {
                     x,
                     textVerticalAnchor,
                     eol,
-                    displayEmpty
+                    displayEmpty,
+                    useNoBreakSpace
                 });
                 $.data.set(node, cacheName, textHash);
             }

package/src/dia/ports.mjs

@@ -4,14 +4,20 @@ 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;
 
@@ -45,7 +51,10 @@ PortData.prototype = {
         });
     },
 
+    // 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) {
+
         const { x = 0, y = 0, width = 0, height = 0 } = rect;
         const metricsKey = `${x}:${y}:${width}:${height}`;
         if (this.metricsKey !== metricsKey) {
@@ -53,11 +62,13 @@ PortData.prototype = {
             this.metrics = {};
             this.metricsKey = metricsKey;
         }
+
         let groupPortsMetrics = this.metrics[groupName];
         if (groupPortsMetrics) {
             // Return cached metrics
             return groupPortsMetrics;
         }
+
         // Calculate the metrics
         groupPortsMetrics = this.resolveGroupPortsMetrics(groupName, new Rect(x, y, width, height));
         this.metrics[groupName] = groupPortsMetrics;
@@ -66,27 +77,33 @@ PortData.prototype = {
 
     resolveGroupPortsMetrics: function(groupName, elBBox) {
 
-        var group = this.getGroup(groupName);
-        var ports = this.getPortsByGroup(groupName);
+        // `groupName` of `undefined` (= not a string) means "the group of ports which do not have the `group` property".
+        const isNoGroup = (groupName === undefined);
 
-        var groupPosition = group.position || {};
-        var groupPositionName = groupPosition.name;
-        var namespace = this.portLayoutNamespace;
-        if (!namespace[groupPositionName]) {
-            groupPositionName = 'left';
-        }
+        const group = this.getGroup(groupName);
+        const ports = this.getPortsByGroup(groupName);
 
-        var groupArgs = groupPosition.args || {};
-        var portsArgs = ports.map(function(port) {
+        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: {}
         };
 
+        // 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;
@@ -94,7 +111,7 @@ PortData.prototype = {
                 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
@@ -105,13 +122,21 @@ PortData.prototype = {
         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);
+    },
+
+    _getPortLabelTransformation: function(port, portPosition, elBBox) {
 
-        if (namespace[labelPosition]) {
-            return namespace[labelPosition](portPosition, elBBox, port.label.position.args);
+        const portLabelPosition = port.label.position || {};
+        const portLabelPositionArgs = portLabelPosition.args || {};
+        const portLabelPositionLayoutCallback = portLabelPosition.layoutCallback;
+        if (portLabelPositionLayoutCallback) {
+            return portLabelPositionLayoutCallback(portPosition, elBBox, portLabelPositionArgs);
         }
 
         return null;
@@ -119,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++) {
@@ -128,7 +154,8 @@ 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++) {
             const resolvedPort = this._evaluatePort(ports[j]);
@@ -139,92 +166,185 @@ PortData.prototype = {
 
     _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 };
 
-    _getZIndex: function(group, port) {
+        } 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] }};
 
-        if (util.isNumber(port.z)) {
-            return port.z;
-        }
-        if (util.isNumber(group.z) || group.z === 'auto') {
-            return group.z;
+        } else {
+            throw new Error('dia.Element: Provided port group position value has an invalid type.');
         }
-        return 'auto';
     },
 
-    _createPositionNode: function(group, port) {
+    _evaluateGroupLabelProperty: function(group) {
+
+        const groupLabel = group.label;
+        if (!groupLabel) {
+            return {
+                position: this._evaluateGroupLabelPositionProperty({})
+            };
+        }
 
         return util.merge(
+            {},
+            groupLabel,
             {
-                name: 'left',
-                args: {}
-            },
-            group.position,
-            {
-                // TODO: remove `port.args` backwards compatibility
-                // NOTE: `x != null` is equivalent to `x !== null && x !== undefined`
-                args: (((port.position != null) && (port.position.args != null)) ? port.position.args : port.args)
+                position: this._evaluateGroupLabelPositionProperty(groupLabel)
             }
         );
     },
 
-    _getPosition: function(position, setDefault) {
+    _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 };
 
-        var args = {};
-        var positionName;
+        } else if (util.isFunction(groupLabelPosition)) {
+            return { layoutCallback: groupLabelPosition };
 
-        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);
+        }  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.');
         }
+    },
+
+    _evaluatePort: function(port) {
 
-        var result = { args: args };
+        const group = this.getGroup(port.group);
 
-        if (positionName) {
-            result.name = positionName;
+        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;
+    },
+
+    _evaluatePortPositionProperty: function(group, port) {
+
+        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))
+        };
+    },
+
+    _evaluatePortLabelProperty: function(group, port) {
+
+        const groupLabel = group.label;
+        const portLabel = port.label;
+        if (!portLabel) {
+            return util.assign(
+                {},
+                groupLabel
+            );
         }
-        return result;
+
+        return util.merge(
+            {},
+            groupLabel,
+            util.merge(
+                {},
+                portLabel,
+                {
+                    position: this._evaluatePortLabelPositionProperty(portLabel)
+                }
+            )
+        );
     },
 
-    _getLabel: function(item, setDefaults) {
+    _evaluatePortLabelPositionProperty: function(portLabel) {
+
+        const namespace = this.portLabelLayoutNamespace;
+        const portLabelPosition = portLabel.position;
+        if (portLabelPosition === undefined) {
+            return {};
+
+        } else if (util.isFunction(portLabelPosition)) {
+            return { layoutCallback: portLabelPosition };
+
+        }  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 };
+            }
 
-        var label = item.label || {};
+        } else {
+            throw new Error('dia.Element: Provided port label position value has an invalid type.');
+        }
+    },
 
-        var ret = label;
-        ret.position = this._getPosition(label.position, setDefaults);
+    _evaluatePortZProperty: function(group, port) {
 
-        return ret;
+        if (util.isNumber(port.z)) {
+            return port.z;
+        }
+        if (util.isNumber(group.z) || group.z === 'auto') {
+            return group.z;
+        }
+        return 'auto';
+    },
+
+    _resolveLayoutCallbackOrThrow: function(namespace, name, errorSubstring) {
+        const layoutCallback = namespace[name];
+        if (!layoutCallback) {
+            throw new Error(`dia.Element: ${errorSubstring} layout name is not recognized.`);
+        }
+        return layoutCallback;
     }
 };
 
@@ -613,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();
 

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;
         }
     },
 

package/src/layout/ports/port.mjs

@@ -1,6 +1,28 @@
 import * as g from '../../g/index.mjs';
 import * as util from '../../util/index.mjs';
 
+function parseCoordinate(coordinate, dimension, bbox, value) {
+
+    if (util.isPercentage(value)) {
+        return parseFloat(value) / 100 * bbox[dimension];
+    }
+
+    if (util.isCalcExpression(value)) {
+        return Number(util.evalCalcExpression(value, bbox));
+    }
+
+    if (typeof value === 'string') {
+        const num = Number(value);
+        if (isNaN(num)) {
+            throw new TypeError(
+                `Cannot convert port coordinate ${coordinate}: "${value}" to a number`
+            );
+        }
+        return num;
+    }
+    return value;
+}
+
 function portTransformAttrs(point, angle, opt) {
 
     var trans = point.toJSON();
@@ -52,20 +74,14 @@ function ellipseLayout(ports, elBBox, startAngle, stepFn) {
     });
 }
 
-
 function argTransform(bbox, args) {
     let { x, y, angle } = args;
-    if (util.isPercentage(x)) {
-        x = parseFloat(x) / 100 * bbox.width;
-    } else if (util.isCalcExpression(x)) {
-        x = Number(util.evalCalcExpression(x, bbox));
-    }
-    if (util.isPercentage(y)) {
-        y = parseFloat(y) / 100 * bbox.height;
-    } else if (util.isCalcExpression(y)) {
-        y = Number(util.evalCalcExpression(y, bbox));
-    }
-    return { x, y, angle };
+
+    return {
+        x: parseCoordinate('x', 'width', bbox, x),
+        y: parseCoordinate('y', 'height', bbox, y),
+        angle
+    };
 }
 
 // Creates a point stored in arguments
@@ -74,14 +90,13 @@ function argPoint(bbox, args) {
     return new g.Point(x || 0, y || 0);
 }
 
-
 /**
  * @param {Array<Object>} ports
  * @param {g.Rect} elBBox
  * @param {Object=} opt opt Group options
  * @returns {Array<g.Point>}
  */
-export const absolute = function(ports, elBBox) {
+export const absolute = function(ports, elBBox, opt) {
     return ports.map(port => {
         const transformation = argPoint(elBBox, port).round().toJSON();
         transformation.angle = port.angle || 0;
@@ -90,6 +105,7 @@ export const absolute = function(ports, elBBox) {
 };
 
 /**
+ * @deprecated
  * @param {Array<Object>} ports
  * @param {g.Rect} elBBox
  * @param {Object=} opt opt Group options
@@ -184,4 +200,3 @@ export const ellipse = function(ports, elBBox, opt) {
         return (index + 0.5 - count / 2) * stepAngle;
     });
 };
-

package/src/layout/ports/portLabel.mjs

@@ -167,7 +167,7 @@ function radialLayout(portCenterOffset, autoOrient, opt) {
     });
 }
 
-export const manual = function(_portPosition, _elBBox, opt) {
+export const manual = function(portPosition, elBBox, opt) {
     return labelAttributes(opt);
 };
 

package/src/mvc/View.mjs

@@ -18,8 +18,12 @@ export const View = ViewBase.extend({
 
     DETACHABLE: true,
     UPDATE_PRIORITY: 2,
+
+    /** @deprecated is no longer used (moved to Paper) */
     FLAG_INSERT: 1<<30,
+    /** @deprecated is no longer used */
     FLAG_REMOVE: 1<<29,
+    /** @deprecated is no longer used */
     FLAG_INIT: 1<<28,
 
     constructor: function(options) {

package/src/mvc/ViewBase.mjs

@@ -24,7 +24,7 @@ import {
 // Creating a ViewBase creates its initial element outside of the DOM,
 // if an existing element is not provided...
 export var ViewBase = function(options) {
-    this.cid = uniqueId('view');
+    this.cid = (options && options.cid) || uniqueId('view');
     this.preinitialize.apply(this, arguments);
     assign(this, pick(options, viewOptions));
     this._ensureElement();