@joint/core 4.1.3 → 4.2.0-alpha.1

package/src/connectionStrategies/index.mjs

@@ -21,7 +21,7 @@ function pinnedElementEnd(relative, end, view, magnet, coords) {
 
     var angle = view.model.angle();
     var bbox = view.getNodeUnrotatedBBox(magnet);
-    var origin = view.model.getBBox().center();
+    var origin = view.model.getCenter();
     coords.rotate(origin, angle);
     var dx = coords.x - bbox.x;
     var dy = coords.y - bbox.y;

package/src/connectors/jumpover.mjs

@@ -337,7 +337,7 @@ function buildRoundedSegment(offset, path, curr, prev, next) {
  * @property {number} size optional size of a jump arc
  * @return {string} created `D` attribute of SVG path
  */
-export const jumpover = function(sourcePoint, targetPoint, route, opt) { // eslint-disable-line max-params
+export const jumpover = function(sourcePoint, targetPoint, route, opt) {
 
     setupUpdating(this);
 

package/src/dia/Cell.mjs

@@ -32,14 +32,14 @@ import { Model } from '../mvc/Model.mjs';
 import { cloneCells } from '../util/cloneCells.mjs';
 import { attributes } from './attributes/index.mjs';
 import * as g from '../g/index.mjs';
-
+import { config } from '../config/index.mjs';
 
 // Cell base model.
 // --------------------------
 
 const attributesMerger = function(a, b) {
     if (Array.isArray(a)) {
-        return b;
+        return cloneDeep(b);
     }
 };
 
@@ -78,12 +78,20 @@ export const Cell = Model.extend({
         if ((defaults = result(this, 'defaults'))) {
             //<custom code>
             // Replaced the call to _.defaults with util.merge.
-            const customizer = (options && options.mergeArrays === true) ? false : attributesMerger;
+            const customizer = (options && options.mergeArrays === true)
+                ? false
+                : config.cellDefaultsMergeStrategy || attributesMerger;
             attrs = merge({}, defaults, attrs, customizer);
             //</custom code>
         }
         this.set(attrs, options);
         this.changed = {};
+        if (options && options.portLayoutNamespace) {
+            this.portLayoutNamespace = options.portLayoutNamespace;
+        }
+        if (options && options.portLabelLayoutNamespace) {
+            this.portLabelLayoutNamespace = options.portLabelLayoutNamespace;
+        }
         this.initialize.apply(this, arguments);
     },
 
@@ -543,7 +551,11 @@ export const Cell = Model.extend({
         if (!opt.deep) {
             // Shallow cloning.
 
-            var clone = Model.prototype.clone.apply(this, arguments);
+            // Preserve the original's `portLayoutNamespace` and `portLabelLayoutNamespace`.
+            const clone = new this.constructor(this.attributes, {
+                portLayoutNamespace: this.portLayoutNamespace,
+                portLabelLayoutNamespace: this.portLabelLayoutNamespace
+            });
             // We don't want the clone to have the same ID as the original.
             clone.set(this.getIdAttribute(), this.generateId());
             // A shallow cloned element does not carry over the original embeds.
@@ -557,7 +569,7 @@ export const Cell = Model.extend({
         } else {
             // Deep cloning.
 
-            // For a deep clone, simply call `graph.cloneCells()` with the cell and all its embedded cells.
+            // For a deep clone, simply call `util.cloneCells()` with the cell and all its embedded cells.
             return toArray(cloneCells([this].concat(this.getEmbeddedCells({ deep: true }))));
         }
     },
@@ -630,7 +642,7 @@ export const Cell = Model.extend({
                 options.rewrite && unsetByPath(baseAttributes, path, '/');
 
                 // Merge update with the model attributes.
-                var attributes = merge(baseAttributes, update);
+                var attributes = merge(baseAttributes, update, config.cellMergeStrategy);
                 // Finally, set the property to the updated attributes.
                 return this.set(property, attributes[property], options);
 
@@ -653,7 +665,11 @@ export const Cell = Model.extend({
         const changedAttributes = {};
         for (const key in props) {
             // Merging the values of changed attributes with the current ones.
-            const { changedValue } = merge({}, { changedValue: this.attributes[key] }, { changedValue: props[key] });
+            const { changedValue } = merge(
+                merge({}, { changedValue: this.attributes[key] }),
+                { changedValue: props[key] },
+                config.cellMergeStrategy
+            );
             changedAttributes[key] = changedValue;
         }
 
@@ -921,9 +937,13 @@ export const Cell = Model.extend({
         return new g.Rect(0, 0, 0, 0);
     },
 
+    getCenter: function() {
+        return this.getBBox().center();
+    },
+
     getPointRotatedAroundCenter(angle, x, y) {
         const point = new g.Point(x, y);
-        if (angle) point.rotate(this.getBBox().center(), angle);
+        if (angle) point.rotate(this.getCenter(), angle);
         return point;
     },
 
@@ -948,9 +968,10 @@ export const Cell = Model.extend({
 
     getAttributeDefinition: function(attrName) {
 
-        var defNS = this.attributes;
-        var globalDefNS = attributes;
-        return (defNS && defNS[attrName]) || globalDefNS[attrName];
+        const defNS = this.attributes;
+        const globalDefNS = attributes;
+        const definition = (defNS && defNS[attrName]) || globalDefNS[attrName];
+        return definition !== undefined ? definition : null;
     },
 
     define: function(type, defaults, protoProps, staticProps) {
@@ -969,4 +990,3 @@ export const Cell = Model.extend({
         return Cell;
     }
 });
-

package/src/dia/CellView.mjs

@@ -795,7 +795,15 @@ export const CellView = View.extend({
     getNodeBoundingRect: function(magnet) {
 
         var metrics = this.nodeCache(magnet);
-        if (metrics.boundingRect === undefined) metrics.boundingRect = V(magnet).getBBox();
+        if (metrics.boundingRect === undefined) {
+            const { measureNode } = this.paper.options;
+            if (typeof measureNode === 'function') {
+                // Measure the node bounding box using the paper's measureNode method.
+                metrics.boundingRect = measureNode(magnet, this);
+            } else {
+                metrics.boundingRect = V(magnet).getBBox();
+            }
+        }
         return new Rect(metrics.boundingRect);
     },
 
@@ -810,7 +818,12 @@ export const CellView = View.extend({
             } else {
                 target = el;
             }
-            metrics.magnetMatrix = V(magnet).getTransformToElement(target);
+            metrics.magnetMatrix = V(magnet).getTransformToElement(target, {
+                // We use `safe` mode if the magnet is not visible (not in the DOM render tree).
+                // The browser would not be able to calculate the transformation matrix
+                // using `getScreenCTM()` method.
+                safe: !magnet.checkVisibility()
+            });
         }
         return V.createSVGMatrix(metrics.magnetMatrix);
     },
@@ -994,33 +1007,38 @@ export const CellView = View.extend({
             const refNodeId = refNode ? V.ensureId(refNode) : '';
             let refBBox = bboxCache[refNodeId];
             if (!refBBox) {
-                // Get the bounding box of the reference element using to the common ancestor
-                // transformation space.
-                //
-                // @example 1
-                // <g transform="translate(11, 13)">
-                //     <rect @selector="b" x="1" y="2" width="3" height="4"/>
-                //     <rect @selector="a"/>
-                // </g>
-                //
-                // In this case, the reference bounding box can not be affected
-                // by the `transform` attribute of the `<g>` element,
-                // because the exact transformation will be applied to the `a` element
-                // as well as to the `b` element.
-                //
-                // @example 2
-                // <g transform="translate(11, 13)">
-                //     <rect @selector="b" x="1" y="2" width="3" height="4"/>
-                // </g>
-                // <rect @selector="a"/>
-                //
-                // In this case, the reference bounding box have to be affected by the
-                // `transform` attribute of the `<g>` element, because the `a` element
-                // is not descendant of the `<g>` element and will not be affected
-                // by the transformation.
-                refBBox = bboxCache[refNodeId] = (refNode)
-                    ? V(refNode).getBBox({ target: getCommonAncestorNode(node, refNode) })
-                    : opt.rootBBox;
+                if (refNode) {
+                    // Get the bounding box of the reference element using to the common ancestor
+                    // transformation space.
+                    //
+                    // @example 1
+                    // <g transform="translate(11, 13)">
+                    //     <rect @selector="b" x="1" y="2" width="3" height="4"/>
+                    //     <rect @selector="a"/>
+                    // </g>
+                    //
+                    // In this case, the reference bounding box can not be affected
+                    // by the `transform` attribute of the `<g>` element,
+                    // because the exact transformation will be applied to the `a` element
+                    // as well as to the `b` element.
+                    //
+                    // @example 2
+                    // <g transform="translate(11, 13)">
+                    //     <rect @selector="b" x="1" y="2" width="3" height="4"/>
+                    // </g>
+                    // <rect @selector="a"/>
+                    //
+                    // In this case, the reference bounding box have to be affected by the
+                    // `transform` attribute of the `<g>` element, because the `a` element
+                    // is not descendant of the `<g>` element and will not be affected
+                    // by the transformation.
+                    const refRect = this.getNodeBoundingRect(refNode);
+                    const refTMatrix = V(refNode).getTransformToElement(V.getCommonAncestor(node, refNode));
+                    refBBox = V.transformRect(refRect, refTMatrix);
+                } else {
+                    refBBox = opt.rootBBox;
+                }
+                bboxCache[refNodeId] = refBBox;
             }
 
             if (roAttrs) {
@@ -1375,14 +1393,11 @@ Object.defineProperty(CellView.prototype, 'useCSSSelectors', {
     }
 });
 
-// TODO: Move to Vectorizer library.
-function getCommonAncestorNode(node1, node2) {
-    let parent = node1;
-    do {
-        if (parent.contains(node2)) return parent;
-        parent = parent.parentNode;
-    } while (parent);
-    return null;
-}
+// Internal tag to identify this object as a cell view instance.
+// Used instead of `instanceof` for performance and cross-frame safety.
 
+export const CELL_VIEW_MARKER = Symbol('joint.cellViewMarker');
 
+Object.defineProperty(CellView.prototype, CELL_VIEW_MARKER, {
+    value: true,
+});

package/src/dia/Element.mjs

@@ -1,6 +1,6 @@
 import { Cell } from './Cell.mjs';
 import { Point, toRad, normalizeAngle, Rect } from '../g/index.mjs';
-import { isNumber, isObject, interpolate, assign, invoke, normalizeSides } from '../util/index.mjs';
+import { isNumber, isObject, interpolate, assign, invoke, normalizeSides, omit } from '../util/index.mjs';
 import { elementPortPrototype } from './ports.mjs';
 
 // Element base model.
@@ -344,22 +344,24 @@ export const Element = Cell.extend({
         const { graph } = this;
         if (!graph) throw new Error('Element must be part of a graph.');
 
-        const childElements = this.getEmbeddedCells().filter(cell => cell.isElement());
-        if (childElements.length === 0) return this;
+        // Get element children, optionally filtered according to `opt.filter`.
+        const filteredChildElements = this._getFilteredChildElements(opt.filter);
 
         this.startBatch('fit-embeds', opt);
 
         if (opt.deep) {
             // `opt.deep = true` means "fit to all descendants".
             // As the first action of the fitting algorithm, recursively apply `fitToChildren()` on all descendants.
-            // - i.e. the algorithm is applied in reverse-depth order - start from deepest descendant, then go up (= this element).
-            invoke(childElements, 'fitToChildren', opt);
+            // - i.e. the algorithm is applied in reverse-depth order - start from deepest descendant, then go up (= this element)
+            // - omit `opt.minRect` - it only makes sense for the first level of recursion if there are no filtered children, but in this case we do have filtered children
+            invoke(filteredChildElements, 'fitToChildren', omit(opt, 'minRect'));
         }
 
         // Set new size and position of this element, based on:
-        // - union of bboxes of all children
+        // - union of bboxes of filtered element children
         // - inflated by given `opt.padding`
-        this._fitToElements(Object.assign({ elements: childElements }, opt));
+        // - containing at least `opt.minRect` (if this is the first level of recursion and there are no filtered children)
+        this._fitToElements(Object.assign({ elements: filteredChildElements }, opt));
 
         this.stopBatch('fit-embeds');
 
@@ -375,25 +377,27 @@ export const Element = Cell.extend({
         // If the current element is `opt.terminator`, it means that this element has already been processed as parent so we can exit now.
         if (opt.deep && opt.terminator && ((opt.terminator === this) || (opt.terminator === this.id))) return this;
 
+        // If this element has no parent, there is nothing for us to do.
         const parentElement = this.getParentCell();
         if (!parentElement || !parentElement.isElement()) return this;
 
-        // Get all children of parent element (i.e. this element + any sibling elements).
-        const siblingElements = parentElement.getEmbeddedCells().filter(cell => cell.isElement());
-        if (siblingElements.length === 0) return this;
+        // Get element children of parent element (i.e. this element + any sibling elements), optionally filtered according to `opt.filter`.
+        const filteredSiblingElements = parentElement._getFilteredChildElements(opt.filter);
 
         this.startBatch('fit-parent', opt);
 
         // Set new size and position of parent element, based on:
-        // - union of bboxes of all children of parent element (i.e. this element + any sibling elements)
+        // - union of bboxes of filtered element children of parent element (i.e. this element + any sibling elements)
         // - inflated by given `opt.padding`
-        parentElement._fitToElements(Object.assign({ elements: siblingElements }, opt));
+        // - containing at least `opt.minRect` (if this is the first level of recursion and there are no filtered siblings)
+        parentElement._fitToElements(Object.assign({ elements: filteredSiblingElements }, opt));
 
         if (opt.deep) {
             // `opt.deep = true` means "fit all ancestors to their respective children".
             // As the last action of the fitting algorithm, recursively apply `fitParent()` on all ancestors.
-            // - i.e. the algorithm is applied in reverse-depth order - start from deepest descendant (= this element), then go up.
-            parentElement.fitParent(opt);
+            // - i.e. the algorithm is applied in reverse-depth order - start from deepest descendant (= this element), then go up
+            // - omit `opt.minRect` - `minRect` is not relevant for the parent of parent element (and upwards)
+            parentElement.fitParent(omit(opt, 'minRect'));
         }
 
         this.stopBatch('fit-parent');
@@ -401,45 +405,87 @@ export const Element = Cell.extend({
         return this;
     },
 
+    _getFilteredChildElements: function(filter) {
+
+        let filterFn;
+        if (typeof filter === 'function') {
+            filterFn = (cell) => (cell.isElement() && filter(cell));
+        } else {
+            filterFn = (cell) => (cell.isElement());
+        }
+        return this.getEmbeddedCells().filter(filterFn);
+    },
+
     // Assumption: This element is part of a graph.
     _fitToElements: function(opt = {}) {
 
+        let minBBox = null;
+        if (opt.minRect) {
+            // Coerce `opt.minRect` to g.Rect
+            // (missing properties are taken from this element's current bbox).
+            const minRect = assign(this.getBBox(), opt.minRect);
+            minBBox = new Rect(minRect);
+        }
+
         const elementsBBox = this.graph.getCellsBBox(opt.elements);
-        // If no `opt.elements` were provided, do nothing.
-        if (!elementsBBox) return;
+        // If no `opt.elements` were provided, do nothing (but if `opt.minRect` was provided, set that as this element's bbox instead).
+        if (!elementsBBox) {
+            this._setBBox(minBBox, opt);
+            return;
+        }
 
         const { expandOnly, shrinkOnly } = opt;
-        // This combination is meaningless, do nothing.
-        if (expandOnly && shrinkOnly) return;
+        // This combination is meaningless, do nothing (but if `opt.minRect` was provided, set that as this element's bbox instead).
+        if (expandOnly && shrinkOnly) {
+            this._setBBox(minBBox, opt);
+            return;
+        }
 
         // Calculate new size and position of this element based on:
         // - union of bboxes of `opt.elements`
-        // - inflated by `opt.padding` (if not provided, all four properties = 0)
+        // - inflated by normalized `opt.padding` (missing sides = 0)
         let { x, y, width, height } = elementsBBox;
         const { left, right, top, bottom } = normalizeSides(opt.padding);
         x -= left;
         y -= top;
         width += left + right;
         height += bottom + top;
-        let resultBBox = new Rect(x, y, width, height);
+        let contentBBox = new Rect(x, y, width, height);
 
         if (expandOnly) {
             // Non-shrinking is enforced by taking union of this element's current bbox with bbox calculated from `opt.elements`.
-            resultBBox = this.getBBox().union(resultBBox);
+            contentBBox = this.getBBox().union(contentBBox);
 
         } else if (shrinkOnly) {
             // Non-expansion is enforced by taking intersection of this element's current bbox with bbox calculated from `opt.elements`.
-            const intersectionBBox = this.getBBox().intersect(resultBBox);
-            // If all children are outside this element's current bbox, then `intersectionBBox` is `null` - does not make sense, do nothing.
-            if (!intersectionBBox) return;
+            const intersectionBBox = this.getBBox().intersect(contentBBox);
+            // If all children are outside this element's current bbox, then `intersectionBBox` is `null`.
+            // That does not make sense, do nothing (but if `opt.minRect` was provided, set that as this element's bbox instead).
+            if (!intersectionBBox) {
+                this._setBBox(minBBox, opt);
+                return;
+            }
 
-            resultBBox =  intersectionBBox;
+            contentBBox = intersectionBBox;
         }
 
         // Set the new size and position of this element.
+        // - if `opt.minRect` was provided, add it via union to calculated bbox
+        let resultBBox = contentBBox;
+        if (minBBox) {
+            resultBBox = resultBBox.union(minBBox);
+        }
+        this._setBBox(resultBBox, opt);
+    },
+
+    _setBBox: function(bbox, opt) {
+
+        if (!bbox) return;
+
+        const { x, y, width, height } = bbox;
         this.set({
-            position: { x: resultBBox.x, y: resultBBox.y },
-            size: { width: resultBBox.width, height: resultBBox.height }
+            position: { x, y },
+            size: { width, height }
         }, opt);
     },
 
@@ -451,7 +497,7 @@ export const Element = Cell.extend({
 
         if (origin) {
 
-            var center = this.getBBox().center();
+            var center = this.getCenter();
             var size = this.get('size');
             var position = this.get('position');
             center.rotate(origin, this.get('angle') - angle);
@@ -497,6 +543,11 @@ export const Element = Cell.extend({
         return bbox;
     },
 
+    getCenter: function() {
+        const { position: { x, y }, size: { width, height }} = this.attributes;
+        return new Point(x + width / 2, y + height / 2);
+    },
+
     getPointFromConnectedLink: function(link, endType) {
         // Center of the model
         var bbox = this.getBBox();
@@ -506,14 +557,9 @@ export const Element = Cell.extend({
         if (!endDef) return center;
         var portId = endDef.port;
         if (!portId || !this.hasPort(portId)) return center;
-        var portGroup = this.portProp(portId, ['group']);
-        var portsPositions = this.getPortsPositions(portGroup);
-        var portCenter = new Point(portsPositions[portId]).offset(bbox.origin());
-        var angle = this.angle();
-        if (angle) portCenter.rotate(center, -angle);
-        return portCenter;
+        return this.getPortCenter(portId);
     }
+
 });
 
 assign(Element.prototype, elementPortPrototype);
-

package/src/dia/ElementView.mjs

@@ -389,7 +389,8 @@ export const ElementView = CellView.extend({
             parent.unembed(element, { ui: true });
             data.initialParentId = parentId;
         } else {
-            data.initialParentId = null;
+            // `data.initialParentId` can be explicitly set to a dummy value to enable validation of unembedding.
+            data.initialParentId = data.initialParentId || null;
         }
     },
 

package/src/dia/HighlighterView.mjs

@@ -1,6 +1,6 @@
 import * as mvc from '../mvc/index.mjs';
 import V from '../V/index.mjs';
-import { isPlainObject, result } from '../util/util.mjs';
+import { isNumber, isPlainObject, result } from '../util/util.mjs';
 
 function toArray(obj) {
     if (!obj) return [];
@@ -71,7 +71,7 @@ export const HighlighterView = mvc.View.extend({
             }
         } else if (nodeSelector) {
             el = V.toNode(nodeSelector);
-            if (!(el instanceof SVGElement)) el = null;
+            if (!(el instanceof SVGElement) || !cellView.el.contains(el)) el = null;
         }
         return el ? el : null;
     },
@@ -106,8 +106,8 @@ export const HighlighterView = mvc.View.extend({
             this.transform();
             return;
         }
-        const { vel: cellViewRoot, paper } = cellView;
-        const { layer: layerName } = options;
+        const { paper } = cellView;
+        const { layer: layerName, z } = options;
         if (layerName) {
             let vGroup;
             if (detachedTransformGroup) {
@@ -117,20 +117,41 @@ export const HighlighterView = mvc.View.extend({
                 vGroup = V('g').addClass('highlight-transform').append(el);
             }
             this.transformGroup = vGroup;
-            paper.getLayerView(layerName).insertSortedNode(vGroup.node, options.z);
+            paper.getLayerView(layerName).insertSortedNode(vGroup.node, z);
         } else {
-            // TODO: prepend vs append
-            if (!el.parentNode || el.nextSibling) {
-                // Not appended yet or not the last child
-                cellViewRoot.append(el);
+            const children = cellView.el.children;
+
+            const index = Math.max(z, 0);
+            const beforeChild = children[index];
+
+            // If the provided `z` is a number and there is an element on the index,
+            // we need to insert the highlighter before the element on the index.
+            // Otherwise, the highlighter will be appended as the last child.
+            const toBeInserted = isNumber(z) && beforeChild;
+            const isElementAtTargetPosition = toBeInserted
+                // If the element is being inserted, check if it is not already at the correct position.
+                ? el === beforeChild
+                // If the element is being appended, check if it is not already last child.
+                : !el.nextElementSibling;
+
+            // If the element is already mounted and does not require repositioning, do nothing.
+            if (el.parentNode && isElementAtTargetPosition) return;
+
+            if (toBeInserted) {
+                cellView.el.insertBefore(el, beforeChild);
+            } else {
+                cellView.el.appendChild(el);
             }
         }
     },
 
     unmount() {
-        const { MOUNTABLE, transformGroup, vel } = this;
+        const { MOUNTABLE, transformGroup, vel, options } = this;
         if (!MOUNTABLE) return;
-        if (transformGroup) {
+        if (options.layer) {
+            if (!transformGroup) return;
+            // else: if `transformGroup` is not null, it means the highlighter
+            // has not been mounted yet
             this.transformGroup = null;
             this.detachedTransformGroup = transformGroup;
             transformGroup.remove();
@@ -241,6 +262,28 @@ export const HighlighterView = mvc.View.extend({
         }
     },
 
+    // Check if the cellView has a highlighter with the given `id`.
+    // If no `id` is provided, it checks if the cellView has any highlighter.
+    has(cellView, id = null) {
+        const { cid } = cellView;
+        const { _views } = this;
+        const refs = _views[cid];
+        if (!refs) return false;
+        if (id === null) {
+            // any highlighter
+            for (let hid in refs) {
+                if (refs[hid] instanceof this) return true;
+            }
+            return false;
+        } else {
+            // single highlighter
+            if (id in refs) {
+                if (refs[id] instanceof this) return true;
+            }
+            return false;
+        }
+    },
+
     add(cellView, nodeSelector, id, opt = {}) {
         if (!id) throw new Error('dia.HighlighterView: An ID required.');
         // Search the existing view amongst all the highlighters