@joint/core 4.2.0-alpha.0 → 4.2.0-beta.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

@@ -1,7 +1,7 @@
 import * as mvc from '../mvc/index.mjs';
 import * as util from '../util/index.mjs';
 import { CellView } from './CellView.mjs';
-import { LayersNames } from './PaperLayer.mjs';
+import { Paper } from './Paper.mjs';
 import { ToolView } from './ToolView.mjs';
 
 export const ToolsView = mvc.View.extend({
@@ -14,7 +14,7 @@ export const ToolsView = mvc.View.extend({
         tools: null,
         relatedView: null,
         name: null,
-        // layer?: LayersNames.TOOLS
+        // layer?: Paper.Layers.TOOLS
         // z?: number
     },
 
@@ -138,12 +138,21 @@ export const ToolsView = mvc.View.extend({
         this.tools = null;
     },
 
+    getLayer() {
+        const { layer = Paper.Layers.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/index.mjs

@@ -1,6 +1,5 @@
 export * from './Graph.mjs';
 export * from './attributes/index.mjs';
-export * from './PaperLayer.mjs';
 export * from './Cell.mjs';
 export * from './CellView.mjs';
 export * from './Element.mjs';
@@ -11,3 +10,9 @@ export * from './Paper.mjs';
 export * from './ToolView.mjs';
 export * from './ToolsView.mjs';
 export * from './HighlighterView.mjs';
+export * from './GraphLayerView.mjs';
+export * from './LayerView.mjs';
+export * from './GridLayerView.mjs';
+export * from './GraphLayer.mjs';
+export * from './GraphLayerCollection.mjs';
+export * from './CellCollection.mjs';

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);
+    },
 
-        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;
@@ -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,99 +166,201 @@ 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) {
 
-        var args = {};
-        var positionName;
+        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 };
 
-        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.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.');
         }
+    },
+
+    _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 {};
 
-        var label = item.label || {};
+        } else if (util.isFunction(portLabelPosition)) {
+            return { layoutCallback: portLabelPosition };
 
-        var ret = label;
-        ret.position = this._getPosition(label.position, setDefaults);
+        }  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 };
+            }
 
-        return ret;
+        } else {
+            throw new Error('dia.Element: Provided port label position value has an invalid type.');
+        }
+    },
+
+    _evaluatePortZProperty: function(group, port) {
+
+        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;
     }
 };
 
 export const elementPortPrototype = {
 
-    _initializePorts: function() {
-
+    _initializePorts: function(options) {
+        if (options) {
+            // Override port layout namespaces if provided in options
+            if (options.portLayoutNamespace) {
+                this.portLayoutNamespace = options.portLayoutNamespace;
+            }
+            // Override port label layout namespaces if provided in options
+            if (options.portLabelLayoutNamespace) {
+                this.portLabelLayoutNamespace = options.portLabelLayoutNamespace;
+            }
+        }
         this._createPortData();
         this.on('change:ports', function() {
 
@@ -613,7 +742,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/dia/symbols.mjs

@@ -0,0 +1,24 @@
+// Internal tags to identify objects as specific JointJS types.
+// Used instead of `instanceof` for performance and cross-frame safety.
+
+// dia.Cell
+export const CELL_MARKER = Symbol('joint.cellMarker');
+
+// dia.CellCollection
+export const CELL_COLLECTION_MARKER = Symbol('joint.cellCollectionMarker');
+
+// dia.GraphLayer
+export const GRAPH_LAYER_MARKER = Symbol('joint.graphLayerMarker');
+
+// dia.GraphLayerCollection
+export const GRAPH_LAYER_COLLECTION_MARKER = Symbol('joint.graphLayerCollectionMarker');
+
+// dia.CellView
+export const CELL_VIEW_MARKER = Symbol('joint.cellViewMarker');
+
+// dia.LayerView
+export const LAYER_VIEW_MARKER = Symbol('joint.layerViewMarker');
+
+// dia.GraphLayerView
+export const GRAPH_LAYER_VIEW_MARKER = Symbol('joint.graphLayerViewMarker');
+

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