@joint/core 4.1.3 → 4.2.0-alpha.0

package/src/dia/ports.mjs

@@ -8,15 +8,28 @@ var PortData = function(data) {
 
     var clonedData = util.cloneDeep(data) || {};
     this.ports = [];
+    this.portsMap = {};
     this.groups = {};
     this.portLayoutNamespace = Port;
     this.portLabelLayoutNamespace = PortLabel;
+    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,7 +45,26 @@ PortData.prototype = {
         });
     },
 
-    getGroupPortsMetrics: function(groupName, elBBox) {
+    getGroupPortsMetrics: function(groupName, rect) {
+        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;
+        }
+        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;
+        return groupPortsMetrics;
+    },
+
+    resolveGroupPortsMetrics: function(groupName, elBBox) {
 
         var group = this.getGroup(groupName);
         var ports = this.getPortsByGroup(groupName);
@@ -52,21 +84,23 @@ PortData.prototype = {
 
         var accumulator = {
             ports: ports,
-            result: []
+            result: {}
         };
 
-        util.toArray(groupPortTransformations).reduce(function(res, portTransformation, index) {
-            var port = res.ports[index];
-            res.result.push({
-                portId: port.id,
+        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),
                 portAttrs: port.attrs,
                 portSize: port.size,
                 labelSize: port.label.size
-            });
+            };
             return res;
-        }.bind(this), accumulator);
+        }, accumulator);
 
         return accumulator.result;
     },
@@ -97,7 +131,9 @@ PortData.prototype = {
         // prepare ports
         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;
         }
     },
 
@@ -138,10 +174,18 @@ PortData.prototype = {
 
     _createPositionNode: function(group, port) {
 
-        return util.merge({
-            name: 'left',
-            args: {}
-        }, group.position, { args: port.args });
+        return util.merge(
+            {
+                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)
+            }
+        );
     },
 
     _getPosition: function(position, setDefault) {
@@ -240,8 +284,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 +293,7 @@ export const elementPortPrototype = {
      */
     hasPort: function(id) {
 
-        return this.getPortIndex(id) !== -1;
+        return this._portSettingsData.hasPort(id);
     },
 
     /**
@@ -274,10 +317,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 +331,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;
     },
 
     /**
@@ -822,15 +936,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 +996,3 @@ export const elementViewPortPrototype = {
         return label.markup || this.model.get('portLabelMarkup') || this.model.portLabelMarkup || this.portLabelMarkup;
     }
 };
-

package/src/env/index.mjs

@@ -36,7 +36,7 @@ export const env = {
 
         try {
             result = fn();
-        } catch (error) {
+        } catch {
             result = false;
         }
 

package/src/g/rect.mjs

@@ -369,6 +369,13 @@ Rect.prototype = {
         return this;
     },
 
+    moveAroundPoint: function(origin, angle) {
+        const newCenter = this.center().rotate(origin, angle);
+        this.x = newCenter.x - this.width / 2;
+        this.y = newCenter.y - this.height / 2;
+        return this;
+    },
+
     // Normalize the rectangle; i.e., make it so that it has a non-negative width and height.
     // If width < 0 the function swaps the left and right corners,
     // and it swaps the top and bottom corners if height < 0

package/src/highlighters/stroke.mjs

@@ -35,7 +35,7 @@ export const stroke = HighlighterView.extend({
                     d = d.substr(0, secondSubpathIndex);
                 }
             }
-        } catch (error) {
+        } catch {
             // Failed to get path data from magnet element.
             // Draw a rectangle around the node instead.
             const nodeBBox = cellView.getNodeBoundingRect(node);

package/src/linkAnchors/index.mjs

@@ -40,7 +40,7 @@ function _connectionClosest(view, _magnet, refPoint, _opt) {
 }
 
 export function resolveRef(fn) {
-    return function(view, magnet, ref, opt) {
+    return function(view, magnet, ref, opt, endType, linkView) {
         if (ref instanceof Element) {
             var refView = this.paper.findView(ref);
             var refPoint;
@@ -55,7 +55,7 @@ export function resolveRef(fn) {
                 // Something went wrong
                 refPoint = new Point();
             }
-            return fn.call(this, view, magnet, refPoint, opt);
+            return fn.call(this, view, magnet, refPoint, opt, endType, linkView);
         }
         return fn.apply(this, arguments);
     };

package/src/linkTools/Anchor.mjs

@@ -118,7 +118,7 @@ const Anchor = ToolView.extend({
             bbox = view.getNodeUnrotatedBBox(magnet);
             angle = model.angle();
             center = bbox.center();
-            if (angle) center.rotate(model.getBBox().center(), -angle);
+            if (angle) center.rotate(model.getCenter(), -angle);
             // TODO: get the link's magnet rotation into account
         }
         bbox.inflate(padding);
@@ -185,7 +185,7 @@ const Anchor = ToolView.extend({
                 // snap coords within node bbox
                 var bbox = view.getNodeUnrotatedBBox(magnet);
                 var angle = model.angle();
-                var origin = model.getBBox().center();
+                var origin = model.getCenter();
                 var rotatedCoords = coords.clone().rotate(origin, angle);
                 if (!bbox.containsPoint(rotatedCoords)) {
                     coords = bbox.pointNearestToPoint(rotatedCoords).rotate(origin, -angle);

package/src/linkTools/Vertices.mjs

@@ -221,18 +221,16 @@ export const Vertices = ToolView.extend({
     onHandleChanged: function(_handle, evt) {
         const { options, relatedView: linkView } = this;
         if (options.vertexAdding) this.updatePath();
-        if (!options.redundancyRemoval) {
-            linkView.checkMouseleave(util.normalizeEvent(evt));
-            return;
+        if (options.redundancyRemoval) {
+            const verticesRemoved = linkView.removeRedundantLinearVertices({ ui: true, tool: this.cid });
+            if (verticesRemoved) this.render();
         }
-        var verticesRemoved = linkView.removeRedundantLinearVertices({ ui: true, tool: this.cid });
-        if (verticesRemoved) this.render();
         this.blur();
         linkView.model.stopBatch('vertex-move', { ui: true, tool: this.cid });
         if (this.eventData(evt).vertexAdded) {
             linkView.model.stopBatch('vertex-add', { ui: true, tool: this.cid });
         }
-        var [normalizedEvt, x, y] = linkView.paper.getPointerArgs(evt);
+        const [normalizedEvt, x, y] = linkView.paper.getPointerArgs(evt);
         if (!options.stopPropagation) linkView.notifyPointerup(normalizedEvt, x, y);
         linkView.checkMouseleave(normalizedEvt);
     },

package/src/util/util.mjs

@@ -821,7 +821,7 @@ export const sanitizeHTML = function(html) {
             const value = node.getAttribute(name);
             // Remove attribute names that start with "on" (e.g. onload, onerror...).
             // Remove attribute values that start with "javascript:" pseudo protocol (e.g. `href="javascript:alert(1)"`).
-            if (name.startsWith('on') || value.startsWith('javascript:' || value.startsWith('data:') || value.startsWith('vbscript:'))) {
+            if (name.startsWith('on') || value.startsWith('javascript:') || value.startsWith('data:') || value.startsWith('vbscript:')) {
                 node.removeAttribute(name);
             }
         });

package/src/util/utilHelpers.mjs

@@ -105,6 +105,7 @@ const rsOrdUpper = '\\d*(?:1ST|2ND|3RD|(?![123])\\dTH)(?=\\b|[a-z_])';
 const rsSeq = rsOptVar + reOptMod + rsOptJoin;
 const rsEmoji = `(?:${[rsDingbat, rsRegional, rsSurrPair].join('|')})${rsSeq}`;
 
+// eslint-disable-next-line no-misleading-character-class
 const reUnicodeWords = RegExp([
     `${rsUpper}?${rsLower}+${rsOptContrLower}(?=${[rsBreak, rsUpper, '$'].join('|')})`,
     `${rsMiscUpper}+${rsOptContrUpper}(?=${[rsBreak, rsUpper + rsMiscLower, '$'].join('|')})`,
@@ -130,6 +131,7 @@ const rsNonAstralCombo = `${rsNonAstral}${rsCombo}?`;
 const rsSymbol = `(?:${[rsNonAstralCombo, rsCombo, rsRegional, rsSurrPair, rsAstral].join('|')})`;
 
 // Used to match [string symbols](https://mathiasbynens.be/notes/javascript-unicode)
+// eslint-disable-next-line no-misleading-character-class
 const reUnicode = RegExp(`${rsFitz}(?=${rsFitz})|${rsSymbol + rsSeq}`, 'g');
 
 const reIsDeepProp = /\.|\[(?:[^[\]]*|(["'])(?:(?!\1)[^\\]|\\.)*?\1)\]/;

package/types/geometry.d.ts

@@ -675,6 +675,8 @@ export namespace g {
 
         moveAndExpand(r: PlainRect): this;
 
+        moveAroundPoint(origin: PlainPoint | string, angle: number): this;
+
         normalize(): this;
 
         offset(dx?: number, dy?: number): this;

package/types/joint.d.ts

@@ -333,6 +333,7 @@ export namespace dia {
         interface GenericAttributes<T> {
             attrs?: T;
             z?: number;
+            layer?: string;
             [key: string]: any;
         }
 
@@ -521,6 +522,8 @@ export namespace dia {
 
         getBBox(): g.Rect;
 
+        getCenter(): g.Point;
+
         getPointFromConnectedLink(link: dia.Link, endType: dia.LinkEnd): g.Point;
 
         getPointRotatedAroundCenter(angle: number, x: number, y: number): g.Point;
@@ -573,6 +576,7 @@ export namespace dia {
             position?: PositionType;
             markup?: string | MarkupJSON;
             attrs?: Cell.Selectors;
+            size?: Size;
             label?: {
                 markup?: string | MarkupJSON;
                 position?: PositionType;
@@ -584,7 +588,11 @@ export namespace dia {
             markup?: string | MarkupJSON;
             group?: string;
             attrs?: Cell.Selectors;
+            position?: {
+                args?: { [key: string]: any };
+            };
             args?: { [key: string]: any };
+            size?: Size;
             label?: {
                 markup?: string | MarkupJSON;
                 position?: PositionType;
@@ -596,6 +604,10 @@ export namespace dia {
             angle: number;
         }
 
+        interface PortRect extends BBox {
+            angle: number;
+        }
+
         interface TranslateOptions extends Cell.Options {
             restrictedArea?: BBox | Paper.PointConstraintCallback;
             transition?: Cell.TransitionOptions;
@@ -610,9 +622,26 @@ export namespace dia {
             direction?: Direction;
         }
 
-        interface BBoxOptions extends Cell.EmbeddableOptions {
+        interface FitToChildrenOptions {
+            filter?: (cell: Cell) => boolean;
+            deep?: boolean;
+            padding?: Padding;
+            minRect?: g.Rect;
+            expandOnly?: boolean;
+            shrinkOnly?: boolean;
+        }
+
+        interface FitParentOptions extends FitToChildrenOptions {
+            terminator?: Cell | Cell.ID;
+        }
+
+        interface RotateOptions {
             rotate?: boolean;
         }
+
+        interface BBoxOptions extends Cell.EmbeddableOptions, RotateOptions {
+
+        }
     }
 
     class Element<A extends ObjectHash = Element.Attributes, S extends mvc.ModelSetOptions = dia.ModelSetOptions> extends Cell<A, S> {
@@ -634,10 +663,10 @@ export namespace dia {
 
         scale(scaleX: number, scaleY: number, origin?: Point, opt?: { [key: string]: any }): this;
 
-        fitEmbeds(opt?: { deep?: boolean, padding?: Padding, expandOnly?: boolean, shrinkOnly?: boolean }): this;
-        fitToChildren(opt?: { deep?: boolean, padding?: Padding, expandOnly?: boolean, shrinkOnly?: boolean }): this;
+        fitEmbeds(opt?: Element.FitToChildrenOptions): this;
+        fitToChildren(opt?: Element.FitToChildrenOptions): this;
 
-        fitParent(opt?: { deep?: boolean, padding?: Padding, expandOnly?: boolean, shrinkOnly?: boolean, terminator?: Cell | Cell.ID }): this;
+        fitParent(opt?: Element.FitParentOptions): this;
 
         getBBox(opt?: Element.BBoxOptions): g.Rect;
 
@@ -664,6 +693,14 @@ export namespace dia {
 
         getPortsPositions(groupName: string): { [id: string]: Element.PortPosition };
 
+        getPortRelativePosition(portId: string): Element.PortPosition;
+
+        getPortRelativeRect(portId: string): Element.PortRect;
+
+        getPortCenter(portId: string): g.Point;
+
+        getPortBBox(portId: string, opt?: Element.RotateOptions): g.Rect;
+
         getPortIndex(port: string | Element.Port): number;
 
         getPortGroupNames(): string[];
@@ -946,6 +983,10 @@ export namespace dia {
 
         isIntersecting(geometryShape: g.Shape, geometryData?: g.SegmentSubdivisionsOpt | null): boolean;
 
+        cleanNodesCache(): void;
+
+        cleanNodeCache(node: SVGElement): void
+
         protected isEnclosedIn(area: g.Rect): boolean;
 
         protected isInArea(area: g.Rect, options: g.StrictOpt): boolean;
@@ -1002,8 +1043,6 @@ export namespace dia {
 
         protected addLinkFromMagnet(magnet: SVGElement, x: number, y: number): LinkView;
 
-        protected cleanNodesCache(): void;
-
         protected nodeCache(magnet: SVGElement): CellView.NodeMetrics;
 
         protected getNodeData(magnet: SVGElement): CellView.NodeData;
@@ -1365,6 +1404,7 @@ export namespace dia {
         type RestrictTranslateCallback = (elementView: ElementView, x0: number, y0: number) => BBox | boolean | PointConstraintCallback;
         type FindParentByType = 'bbox' | 'pointer' | PositionName;
         type FindParentByCallback = ((this: dia.Graph, elementView: ElementView, evt: dia.Event, x: number, y: number) => Cell[]);
+        type MeasureNodeCallback = (node: SVGGraphicsElement, cellView: dia.CellView) => g.Rect;
 
         interface Options extends mvc.ViewOptions<Graph> {
             // appearance
@@ -1400,6 +1440,7 @@ export namespace dia {
             // views
             elementView?: typeof ElementView | ((element: Element) => typeof ElementView);
             linkView?: typeof LinkView | ((link: Link) => typeof LinkView);
+            measureNode?: MeasureNodeCallback;
             // embedding
             embeddingMode?: boolean;
             frontParentOnly?: boolean;
@@ -1751,7 +1792,7 @@ export namespace dia {
 
         getLayerNode(layerName: Paper.Layers | string): SVGGElement;
 
-        getLayerView(layerName: Paper.Layers | string): any;
+        getLayerView(layerName: Paper.Layers | string): PaperLayer;
 
         hasLayerView(layerName: Paper.Layers | string): boolean;
 
@@ -1761,6 +1802,18 @@ export namespace dia {
 
         protected resetLayers(): void;
 
+        addLayer(layerName: string, layerView: PaperLayer, options?: { insertBefore?: string }): void;
+
+        removeLayer(layer: string | PaperLayer): void;
+
+        moveLayer(layer: string | PaperLayer, insertBefore: string | PaperLayer | null): void;
+
+        hasLayer(layer: string | PaperLayer): boolean;
+
+        getLayerNames(): string[];
+
+        getLayers(): Array<PaperLayer>;
+
         // rendering
 
         freeze(opt?: Paper.FreezeOptions): void;
@@ -2624,20 +2677,22 @@ export namespace util {
     export function isPercentage(val: any): boolean;
 
     export function parseCssNumeric(val: any, restrictUnits: string | string[]): { value: number, unit?: string } | null;
-
+    
+    type BreakTextOptions = {
+        svgDocument?: SVGElement;
+        separator?: string | any;
+        eol?: string;
+        ellipsis?: boolean | string;
+        hyphen?: string | RegExp;
+        maxLineCount?: number;
+        preserveSpaces?: boolean;
+    }
+    
     type BreakTextFunction = (
         text: string,
         size: { width: number, height?: number },
         attrs?: attributes.NativeSVGAttributes,
-        opt?: {
-            svgDocument?: SVGElement;
-            separator?: string | any;
-            eol?: string;
-            ellipsis?: boolean | string;
-            hyphen?: string | RegExp;
-            maxLineCount?: number;
-            preserveSpaces?: boolean;
-        }
+        opt?: BreakTextOptions
     ) => string;
 
     export var breakText: BreakTextFunction;
@@ -3431,7 +3486,7 @@ export namespace mvc {
 
         /**
          * Events hash or a method returning the events hash that maps events/selectors to methods on your View.
-         * For assigning events as object hash, do it like this: this.events = <any>{ "event:selector": callback, ... };
+         * For assigning events as object hash, do it like this: `this.events = <any>{ "event:selector": callback, ... };`
          * That works only if you set it in the constructor or the initialize method.
          */
         events(): EventsHash;
@@ -3784,7 +3839,11 @@ export namespace connectors {
 
 export namespace anchors {
 
-    interface RotateAnchorArguments {
+    interface ElementAnchorArguments {
+        useModelGeometry?: boolean;
+    }
+
+    interface RotateAnchorArguments extends ElementAnchorArguments {
         rotate?: boolean;
     }
 
@@ -3793,7 +3852,7 @@ export namespace anchors {
         dy?: number | string;
     }
 
-    interface PaddingAnchorArguments {
+    interface PaddingAnchorArguments extends ElementAnchorArguments {
         padding?: number;
     }