@joint/core 4.0.4 → 4.1.0

package/src/{linkTools → cellTools}/Button.mjs

@@ -1,4 +1,3 @@
-import { evalCalcAttribute, isCalcAttribute } from '../dia/attributes/calc.mjs';
 import { ToolView } from '../dia/ToolView.mjs';
 import { getViewBBox } from './helpers.mjs';
 import * as util from '../util/index.mjs';
@@ -41,13 +40,13 @@ export const Button = ToolView.extend({
         const { x: offsetX = 0, y: offsetY = 0 } = offset;
         if (util.isPercentage(x)) {
             x = parseFloat(x) / 100 * bbox.width;
-        } else if (isCalcAttribute(x)) {
-            x = Number(evalCalcAttribute(x, bbox));
+        } else if (util.isCalcExpression(x)) {
+            x = Number(util.evalCalcExpression(x, bbox));
         }
         if (util.isPercentage(y)) {
             y = parseFloat(y) / 100 * bbox.height;
-        } else if (isCalcAttribute(y)) {
-            y = Number(evalCalcAttribute(y, bbox));
+        } else if (util.isCalcExpression(y)) {
+            y = Number(util.evalCalcExpression(y, bbox));
         }
         let matrix = V.createSVGMatrix().translate(bbox.x + bbox.width / 2, bbox.y + bbox.height / 2);
         if (rotate) matrix = matrix.rotate(angle);
@@ -57,7 +56,10 @@ export const Button = ToolView.extend({
     },
     getLinkMatrix() {
         const { relatedView: view, options } = this;
-        const { offset = 0, distance = 0, rotate, scale } = options;
+        const { offset = 0, distance: distanceOpt = 0, rotate, scale } = options;
+        const distance = (typeof distanceOpt === 'function')
+            ? distanceOpt.call(this, view, this)
+            : distanceOpt;
         let tangent, position, angle;
         if (util.isPercentage(distance)) {
             tangent = view.getTangentAtRatio(parseFloat(distance) / 100);

package/src/{elementTools → cellTools}/Control.mjs

@@ -133,7 +133,7 @@ export const Control = ToolView.extend({
         const { clientX, clientY } = util.normalizeEvent(evt);
         const coords = paper.clientToLocalPoint(clientX, clientY);
         const relativeCoords = model.getRelativePointFromAbsolute(coords);
-        this.setPosition(relatedView, relativeCoords, this);
+        this.setPosition(relatedView, relativeCoords, evt);
         this.update();
     },
     onPointerUp: function(_evt) {
@@ -144,9 +144,9 @@ export const Control = ToolView.extend({
         this.toggleExtras(false);
         relatedView.model.stopBatch('control-move', { ui: true, tool: this.cid });
     },
-    onPointerDblClick: function() {
+    onPointerDblClick: function(evt) {
         const { relatedView } = this;
-        this.resetPosition(relatedView, this);
+        this.resetPosition(relatedView, evt);
         this.update();
     }
 

package/src/{linkTools → cellTools}/HoverConnect.mjs

@@ -1,4 +1,4 @@
-import { Connect } from '../linkTools/Connect.mjs';
+import { Connect } from './Connect.mjs';
 import V from '../V/index.mjs';
 import $ from '../mvc/Dom/index.mjs';
 import * as util from '../util/index.mjs';

package/src/dia/Cell.mjs

@@ -25,7 +25,8 @@ import {
     defaultsDeep,
     has,
     sortBy,
-    defaults
+    defaults,
+    objectDifference
 } from '../util/util.mjs';
 import { Model } from '../mvc/Model.mjs';
 import { cloneCells } from '../util/cloneCells.mjs';
@@ -42,6 +43,22 @@ const attributesMerger = function(a, b) {
     }
 };
 
+function removeEmptyAttributes(obj) {
+
+    // Remove toplevel empty attributes
+    for (const key in obj) {
+
+        const objValue = obj[key];
+        const isRealObject = isObject(objValue) && !Array.isArray(objValue);
+
+        if (!isRealObject) continue;
+
+        if (isEmpty(objValue)) {
+            delete obj[key];
+        }
+    }
+}
+
 export const Cell = Model.extend({
 
     // This is the same as mvc.Model with the only difference that is uses util.merge
@@ -75,48 +92,45 @@ export const Cell = Model.extend({
         throw new Error('Must define a translate() method.');
     },
 
-    toJSON: function() {
+    toJSON: function(opt) {
 
+        const { ignoreDefaults, ignoreEmptyAttributes = false } = opt || {};
         const defaults = result(this.constructor.prototype, 'defaults');
-        const defaultAttrs = defaults.attrs || {};
-        const attrs = this.attributes.attrs;
-        const finalAttrs = {};
-
-        // Loop through all the attributes and
-        // omit the default attributes as they are implicitly reconstructible by the cell 'type'.
-        forIn(attrs, function(attr, selector) {
 
-            const defaultAttr = defaultAttrs[selector];
+        if (ignoreDefaults === false) {
+            // Return all attributes without omitting the defaults
+            const finalAttributes = cloneDeep(this.attributes);
 
-            forIn(attr, function(value, name) {
+            if (!ignoreEmptyAttributes) return finalAttributes;
 
-                // attr is mainly flat though it might have one more level (consider the `style` attribute).
-                // Check if the `value` is object and if yes, go one level deep.
-                if (isObject(value) && !Array.isArray(value)) {
+            removeEmptyAttributes(finalAttributes);
 
-                    forIn(value, function(value2, name2) {
-
-                        if (!defaultAttr || !defaultAttr[name] || !isEqual(defaultAttr[name][name2], value2)) {
+            return finalAttributes;
+        }
 
-                            finalAttrs[selector] = finalAttrs[selector] || {};
-                            (finalAttrs[selector][name] || (finalAttrs[selector][name] = {}))[name2] = value2;
-                        }
-                    });
+        let defaultAttributes = {};
+        let attributes = cloneDeep(this.attributes);
 
-                } else if (!defaultAttr || !isEqual(defaultAttr[name], value)) {
-                    // `value` is not an object, default attribute for such a selector does not exist
-                    // or it is different than the attribute value set on the model.
+        if (ignoreDefaults === true) {
+            // Compare all attributes with the defaults
+            defaultAttributes = defaults;
+        } else {
+            // Compare only the specified attributes with the defaults, use `attrs` as a default if not specified
+            const differentiateKeys = Array.isArray(ignoreDefaults) ? ignoreDefaults : ['attrs'];
 
-                    finalAttrs[selector] = finalAttrs[selector] || {};
-                    finalAttrs[selector][name] = value;
-                }
+            differentiateKeys.forEach((key) => {
+                defaultAttributes[key] = defaults[key] || {};
             });
-        });
+        }
+
+        // Omit `id` and `type` attribute from the defaults since it should be always present
+        const finalAttributes = objectDifference(attributes, omit(defaultAttributes, 'id', 'type'), { maxDepth: 4 });
 
-        const attributes = cloneDeep(omit(this.attributes, 'attrs'));
-        attributes.attrs = finalAttrs;
+        if (ignoreEmptyAttributes) {
+            removeEmptyAttributes(finalAttributes);
+        }
 
-        return attributes;
+        return finalAttributes;
     },
 
     initialize: function(options) {
@@ -325,12 +339,25 @@ export const Cell = Model.extend({
         return this.set('parent', parent, opt);
     },
 
-    embed: function(cell, opt) {
+    embed: function(cell, opt = {}) {
         const cells = Array.isArray(cell) ? cell : [cell];
         if (!this.canEmbed(cells)) {
             throw new Error('Recursive embedding not allowed.');
         }
-        if (cells.some(c => c.isEmbedded() && this.id !== c.parent())) {
+        if (opt.reparent) {
+            const parents = uniq(cells.map(c => c.getParentCell()));
+
+            // Unembed cells from their current parents.
+            parents.forEach((parent) => {
+                // Cell doesn't have to be embedded.
+                if (!parent) return;
+
+                // Pass all the `cells` since the `dia.Cell._unembedCells` method can handle cases
+                // where not all elements of `cells` are embedded in the same parent.
+                parent._unembedCells(cells, opt);
+            });
+
+        } else if (cells.some(c => c.isEmbedded() && this.id !== c.parent())) {
             throw new Error('Embedding of already embedded cells is not allowed.');
         }
         this._embedCells(cells, opt);

package/src/dia/CellView.mjs

@@ -16,7 +16,7 @@ import {
     merge,
     uniq
 } from '../util/index.mjs';
-import { Point, Rect } from '../g/index.mjs';
+import { Point, Rect, intersection } from '../g/index.mjs';
 import V from '../V/index.mjs';
 import $ from '../mvc/Dom/index.mjs';
 import { HighlighterView } from './HighlighterView.mjs';
@@ -559,13 +559,54 @@ export const CellView = View.extend({
             if (!rawAttrs.hasOwnProperty(attrName)) continue;
             attrVal = rawAttrs[attrName];
             def = this.getAttributeDefinition(attrName);
-            if (def && (!isFunction(def.qualify) || def.qualify.call(this, attrVal, node, rawAttrs, this))) {
-                if (isString(def.set)) {
-                    normalAttrs || (normalAttrs = {});
-                    normalAttrs[def.set] = attrVal;
-                }
-                if (attrVal !== null) {
-                    relatives.push(attrName, def);
+            if (def) {
+                if (attrVal === null) {
+                    // Assign the unset attribute name.
+                    let unsetAttrName;
+                    if (isFunction(def.unset)) {
+                        unsetAttrName = def.unset.call(this, node, rawAttrs, this);
+                    } else {
+                        unsetAttrName = def.unset;
+                    }
+                    if (!unsetAttrName && isString(def.set)) {
+                        // We unset an alias attribute.
+                        unsetAttrName = def.set;
+                    }
+                    if (!unsetAttrName) {
+                        // There is no alias for the attribute. We unset the attribute itself.
+                        unsetAttrName = attrName;
+                    }
+                    // Unset the attribute.
+                    if (isString(unsetAttrName) && unsetAttrName) {
+                        // Unset a single attribute.
+                        normalAttrs || (normalAttrs = {});
+                        // values takes precedence over unset values
+                        if (unsetAttrName in normalAttrs) continue;
+                        normalAttrs[unsetAttrName] = attrVal;
+                    } else if (Array.isArray(unsetAttrName) && unsetAttrName.length > 0) {
+                        // Unset multiple attributes.
+                        normalAttrs || (normalAttrs = {});
+                        for (i = 0, n = unsetAttrName.length; i < n; i++) {
+                            const attrName = unsetAttrName[i];
+                            // values takes precedence over unset values
+                            if (attrName in normalAttrs) continue;
+                            normalAttrs[attrName] = attrVal;
+                        }
+                    }
+                    // The unset value is neither a string nor an array.
+                    // The attribute is not unset.
+                } else {
+                    if (!isFunction(def.qualify) || def.qualify.call(this, attrVal, node, rawAttrs, this)) {
+                        if (isString(def.set)) {
+                            // An alias e.g 'xlink:href' -> 'href'
+                            normalAttrs || (normalAttrs = {});
+                            normalAttrs[def.set] = attrVal;
+                        }
+                        relatives.push(attrName, def);
+                    } else {
+                        normalAttrs || (normalAttrs = {});
+                        normalAttrs[attrName] = attrVal;
+                    }
                 }
             } else {
                 normalAttrs || (normalAttrs = {});
@@ -727,6 +768,12 @@ export const CellView = View.extend({
         this.metrics = {};
     },
 
+    cleanNodeCache: function(node) {
+        const id = node.id;
+        if (!id) return;
+        delete this.metrics[id];
+    },
+
     nodeCache: function(magnet) {
 
         var metrics = this.metrics;
@@ -1279,7 +1326,27 @@ export const CellView = View.extend({
     setInteractivity: function(value) {
 
         this.options.interactive = value;
+    },
+
+    isIntersecting: function(geometryShape, geometryData) {
+        return intersection.exists(geometryShape, this.getNodeBBox(this.el), geometryData);
+    },
+
+    isEnclosedIn: function(geometryRect) {
+        return geometryRect.containsRect(this.getNodeBBox(this.el));
+    },
+
+    isInArea: function(geometryRect, options = {}) {
+        if (options.strict) {
+            return this.isEnclosedIn(geometryRect);
+        }
+        return this.isIntersecting(geometryRect);
+    },
+
+    isAtPoint: function(point, options) {
+        return this.getNodeBBox(this.el).containsPoint(point, options);
     }
+
 }, {
 
     Flags,

package/src/dia/ElementView.mjs

@@ -265,16 +265,16 @@ export const ElementView = CellView.extend({
 
     getTranslateString: function() {
 
-        var position = this.model.attributes.position;
-        return 'translate(' + position.x + ',' + position.y + ')';
+        const { x, y } = this.model.position();
+        return `translate(${x},${y})`;
     },
 
     getRotateString: function() {
-        var attributes = this.model.attributes;
-        var angle = attributes.angle;
+
+        const angle = this.model.angle();
         if (!angle) return null;
-        var size = attributes.size;
-        return 'rotate(' + angle + ',' + (size.width / 2) + ',' + (size.height / 2) + ')';
+        const { width, height } = this.model.size();
+        return `rotate(${angle},${width / 2},${height / 2})`;
     },
 
     // Rotatable & Scalable Group
@@ -404,9 +404,9 @@ export const ElementView = CellView.extend({
         if (isFunction(findParentBy)) {
             candidates = toArray(findParentBy.call(graph, this, evt, x, y));
         } else if (findParentBy === 'pointer') {
-            candidates = toArray(graph.findModelsFromPoint({ x, y }));
+            candidates = graph.findElementsAtPoint({ x, y });
         } else {
-            candidates = graph.findModelsUnderElement(model, { searchBy: findParentBy });
+            candidates = graph.findElementsUnderElement(model, { searchBy: findParentBy });
         }
 
         candidates = candidates.filter((el) => {
@@ -540,6 +540,11 @@ export const ElementView = CellView.extend({
         }
     },
 
+    getTargetParentView: function(evt) {
+        const { candidateEmbedView = null } = this.eventData(evt);
+        return candidateEmbedView;
+    },
+
     getDelegatedView: function() {
 
         var view = this;

package/src/dia/Graph.mjs

@@ -35,14 +35,25 @@ const GraphCells = Collection.extend({
             throw new Error(`dia.Graph: Could not find cell constructor for type: '${type}'. Make sure to add the constructor to 'cellNamespace'.`);
         }
 
-        const cell = new ModelClass(attrs, opt);
-        // Add a reference to the graph. It is necessary to do this here because this is the earliest place
-        // where a new model is created from a plain JS object. For other objects, see `joint.dia.Graph>>_prepareCell()`.
-        if (!opt.dry) {
-            cell.graph = collection.graph;
+        return new ModelClass(attrs, opt);
+    },
+
+    _addReference: function(model, options) {
+        Collection.prototype._addReference.apply(this, arguments);
+        // If not in `dry` mode and the model does not have a graph reference yet,
+        // set the reference.
+        if (!options.dry && !model.graph) {
+            model.graph = this.graph;
         }
+    },
 
-        return cell;
+    _removeReference: function(model, options) {
+        Collection.prototype._removeReference.apply(this, arguments);
+        // If not in `dry` mode and the model has a reference to this exact graph,
+        // remove the reference.
+        if (!options.dry && model.graph === this.graph) {
+            model.graph = null;
+        }
     },
 
     // `comparator` makes it easy to sort cells based on their `z` index.
@@ -197,12 +208,12 @@ export const Graph = Model.extend({
         return (this._in && this._in[node]) || {};
     },
 
-    toJSON: function() {
+    toJSON: function(opt = {}) {
 
         // JointJS does not recursively call `toJSON()` on attributes that are themselves models/collections.
         // It just clones the attributes. Therefore, we must call `toJSON()` on the cells collection explicitly.
         var json = Model.prototype.toJSON.apply(this, arguments);
-        json.cells = this.get('cells').toJSON();
+        json.cells = this.get('cells').toJSON(opt.cellAttributes);
         return json;
     },
 
@@ -268,20 +279,12 @@ export const Graph = Model.extend({
         return this;
     },
 
-    _prepareCell: function(cell, opt) {
+    _prepareCell: function(cell) {
 
-        var attrs;
+        let attrs;
         if (cell instanceof Model) {
             attrs = cell.attributes;
-            if (!cell.graph && (!opt || !opt.dry)) {
-                // An element can not be member of more than one graph.
-                // A cell stops being the member of the graph after it's explicitly removed.
-                cell.graph = this;
-            }
         } else {
-            // In case we're dealing with a plain JS object, we have to set the reference
-            // to the `graph` right after the actual model is created. This happens in the `model()` function
-            // of `joint.dia.GraphCells`.
             attrs = cell;
         }
 
@@ -391,11 +394,39 @@ export const Graph = Model.extend({
         // then propagated to the graph model. If we didn't remove the cell silently, two `remove` events
         // would be triggered on the graph model.
         this.get('cells').remove(cell, { silent: true });
+    },
 
-        if (cell.graph === this) {
-            // Remove the element graph reference only if the cell is the member of this graph.
-            cell.graph = null;
-        }
+    transferCellEmbeds: function(sourceCell, targetCell, opt = {}) {
+
+        const batchName = 'transfer-embeds';
+        this.startBatch(batchName);
+
+        // Embed children of the source cell in the target cell.
+        const children = sourceCell.getEmbeddedCells();
+        targetCell.embed(children, { ...opt, reparent: true });
+
+        this.stopBatch(batchName);
+    },
+
+    transferCellConnectedLinks: function(sourceCell, targetCell, opt = {}) {
+
+        const batchName = 'transfer-connected-links';
+        this.startBatch(batchName);
+
+        // Reconnect all the links connected to the old cell to the new cell.
+        const connectedLinks = this.getConnectedLinks(sourceCell, opt);
+        connectedLinks.forEach((link) => {
+
+            if (link.getSourceCell() === sourceCell) {
+                link.prop(['source', 'id'], targetCell.id, opt);
+            }
+
+            if (link.getTargetCell() === sourceCell) {
+                link.prop(['target', 'id'], targetCell.id, opt);
+            }
+        });
+
+        this.stopBatch(batchName);
     },
 
     // Get a cell by `id`.
@@ -961,28 +992,105 @@ export const Graph = Model.extend({
         util.invoke(this.getConnectedLinks(model), 'remove', opt);
     },
 
-    // Find all elements at given point
-    findModelsFromPoint: function(p) {
-        return this.getElements().filter(el => el.getBBox({ rotate: true }).containsPoint(p));
+    // Find all cells at given point
+
+    findElementsAtPoint: function(point, opt) {
+        return this._filterAtPoint(this.getElements(), point, opt);
+    },
+
+    findLinksAtPoint: function(point, opt) {
+        return this._filterAtPoint(this.getLinks(), point, opt);
+    },
+
+    findCellsAtPoint: function(point, opt) {
+        return this._filterAtPoint(this.getCells(), point, opt);
+    },
+
+    _filterAtPoint: function(cells, point, opt = {}) {
+        return cells.filter(el => el.getBBox({ rotate: true }).containsPoint(point, opt));
+    },
+
+    // Find all cells in given area
+
+    findElementsInArea: function(area, opt = {}) {
+        return this._filterInArea(this.getElements(), area, opt);
+    },
+
+    findLinksInArea: function(area, opt = {}) {
+        return this._filterInArea(this.getLinks(), area, opt);
     },
 
-    // Find all elements in given area
-    findModelsInArea: function(rect, opt = {}) {
-        const r = new g.Rect(rect);
+    findCellsInArea: function(area, opt = {}) {
+        return this._filterInArea(this.getCells(), area, opt);
+    },
+
+    _filterInArea: function(cells, area, opt = {}) {
+        const r = new g.Rect(area);
         const { strict = false } = opt;
         const method = strict ? 'containsRect' : 'intersect';
-        return this.getElements().filter(el => r[method](el.getBBox({ rotate: true })));
-    },
-
-    // Find all elements under the given element.
-    findModelsUnderElement: function(element, opt = {}) {
-        const { searchBy = 'bbox' } = opt;
-        const bbox = element.getBBox().rotateAroundCenter(element.angle());
-        const elements = (searchBy === 'bbox')
-            ? this.findModelsInArea(bbox)
-            : this.findModelsFromPoint(util.getRectPoint(bbox, searchBy));
-        // don't account element itself or any of its descendants
-        return elements.filter(el => element.id !== el.id && !el.isEmbeddedIn(element));
+        return cells.filter(el => r[method](el.getBBox({ rotate: true })));
+    },
+
+    // Find all cells under the given element.
+
+    findElementsUnderElement: function(element, opt) {
+        return this._filterCellsUnderElement(this.getElements(), element, opt);
+    },
+
+    findLinksUnderElement: function(element, opt) {
+        return this._filterCellsUnderElement(this.getLinks(), element, opt);
+    },
+
+    findCellsUnderElement: function(element, opt) {
+        return this._filterCellsUnderElement(this.getCells(), element, opt);
+    },
+
+    _isValidElementUnderElement: function(el1, el2) {
+        return el1.id !== el2.id && !el1.isEmbeddedIn(el2);
+    },
+
+    _isValidLinkUnderElement: function(link, el) {
+        return (
+            link.source().id !== el.id &&
+            link.target().id !== el.id &&
+            !link.isEmbeddedIn(el)
+        );
+    },
+
+    _validateCellsUnderElement: function(cells, element) {
+        return cells.filter(cell => {
+            return cell.isLink()
+                ? this._isValidLinkUnderElement(cell, element)
+                : this._isValidElementUnderElement(cell, element);
+        });
+    },
+
+    _getFindUnderElementGeometry: function(element, searchBy = 'bbox') {
+        const bbox = element.getBBox({ rotate: true });
+        return (searchBy !== 'bbox') ? util.getRectPoint(bbox, searchBy) : bbox;
+    },
+
+    _filterCellsUnderElement: function(cells, element, opt = {}) {
+        const geometry = this._getFindUnderElementGeometry(element, opt.searchBy);
+        const filteredCells = (geometry.type === g.types.Point)
+            ? this._filterAtPoint(cells, geometry)
+            : this._filterInArea(cells, geometry, opt);
+        return this._validateCellsUnderElement(filteredCells, element);
+    },
+
+    // @deprecated use `findElementsInArea` instead
+    findModelsInArea: function(area, opt) {
+        return this.findElementsInArea(area, opt);
+    },
+
+    // @deprecated use `findElementsAtPoint` instead
+    findModelsFromPoint: function(point) {
+        return this.findElementsAtPoint(point);
+    },
+
+    // @deprecated use `findModelsUnderElement` instead
+    findModelsUnderElement: function(element, opt) {
+        return this.findElementsUnderElement(element, opt);
     },
 
     // Return bounding box of all elements.

package/src/dia/HighlighterView.mjs

@@ -278,18 +278,22 @@ export const HighlighterView = mvc.View.extend({
         });
     },
 
-    removeAll(paper, id = null) {
+    getAll(paper, id = null) {
+        const views = [];
         const { _views } = this;
-
         for (let cid in _views) {
             for (let hid in _views[cid]) {
                 const view = _views[cid][hid];
-
                 if (view.cellView.paper === paper && view instanceof this && (id === null || hid === id)) {
-                    view.remove();
+                    views.push(view);
                 }
             }
         }
+        return views;
+    },
+
+    removeAll(paper, id = null) {
+        this.getAll(paper, id).forEach(view => view.remove());
     },
 
     update(cellView, id = null, dirty = false) {