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

package/src/dia/Cell.mjs

@@ -1,5 +1,4 @@
 import {
-    uniqueId,
     union,
     result,
     merge,
@@ -32,7 +31,8 @@ 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';
+import { CELL_MARKER } from './symbols.mjs';
 
 // Cell base model.
 // --------------------------
@@ -61,30 +61,21 @@ function removeEmptyAttributes(obj) {
 
 export const Cell = Model.extend({
 
-    // This is the same as mvc.Model with the only difference that is uses util.merge
-    // instead of just _.extend. The reason is that we want to mixin attributes set in upper classes.
-    constructor: function(attributes, options) {
-
-        var defaults;
-        var attrs = attributes || {};
-        if (typeof this.preinitialize === 'function') {
-            // Check to support an older version
-            this.preinitialize.apply(this, arguments);
-        }
-        this.cid = uniqueId('c');
-        this.attributes = {};
-        if (options && options.collection) this.collection = options.collection;
-        if (options && options.parse) attrs = this.parse(attrs, options) || {};
-        if ((defaults = result(this, 'defaults'))) {
-            //<custom code>
-            // Replaced the call to _.defaults with util.merge.
-            const customizer = (options && options.mergeArrays === true) ? false : attributesMerger;
-            attrs = merge({}, defaults, attrs, customizer);
-            //</custom code>
+    cidPrefix: 'c',
+
+    // Default attributes are merged deeply instead of shallowly.
+    _setDefaults: function(ctorAttributes, options) {
+        let attributes;
+        const attributeDefaults = result(this, 'defaults');
+        if (attributeDefaults) {
+            const customizer = (options && options.mergeArrays === true)
+                ? false
+                : config.cellDefaultsMergeStrategy || attributesMerger;
+            attributes = merge({}, attributeDefaults, ctorAttributes, customizer);
+        } else {
+            attributes = ctorAttributes;
         }
-        this.set(attrs, options);
-        this.changed = {};
-        this.initialize.apply(this, arguments);
+        this.set(attributes, options);
     },
 
     translate: function(dx, dy, opt) {
@@ -133,10 +124,10 @@ export const Cell = Model.extend({
         return finalAttributes;
     },
 
-    initialize: function(options) {
+    initialize: function(attributes) {
 
         const idAttribute = this.getIdAttribute();
-        if (!options || options[idAttribute] === undefined) {
+        if (!attributes || attributes[idAttribute] === undefined) {
             this.set(idAttribute, this.generateId(), { silent: true });
         }
 
@@ -212,42 +203,20 @@ export const Cell = Model.extend({
     },
 
     remove: function(opt = {}) {
-
-        // Store the graph in a variable because `this.graph` won't be accessible
-        // after `this.trigger('remove', ...)` down below.
         const { graph, collection } = this;
-        if (!graph) {
+        // If the cell is part of a graph, remove it using the graph API.
+        // To make sure the cell is removed in a batch operation.
+        if (graph) {
+            graph.removeCell(this, opt);
+        } else {
             // The collection is a common mvc collection (not the graph collection).
             if (collection) collection.remove(this, opt);
-            return this;
         }
-
-        graph.startBatch('remove');
-
-        // First, unembed this cell from its parent cell if there is one.
-        const parentCell = this.getParentCell();
-        if (parentCell) {
-            parentCell.unembed(this, opt);
-        }
-
-        // Remove also all the cells, which were embedded into this cell
-        const embeddedCells = this.getEmbeddedCells();
-        for (let i = 0, n = embeddedCells.length; i < n; i++) {
-            const embed = embeddedCells[i];
-            if (embed) {
-                embed.remove(opt);
-            }
-        }
-
-        this.trigger('remove', this, graph.attributes.cells, opt);
-
-        graph.stopBatch('remove');
-
         return this;
     },
 
     toFront: function(opt) {
-        var graph = this.graph;
+        const { graph } = this;
         if (graph) {
             opt = defaults(opt || {}, { foregroundEmbeds: true });
 
@@ -261,12 +230,14 @@ export const Cell = Model.extend({
 
             const sortedCells = opt.foregroundEmbeds ? cells : sortBy(cells, cell => cell.z());
 
-            const maxZ = graph.maxZIndex();
+            const layerId = graph.getCellLayerId(this);
+
+            const maxZ = graph.maxZIndex(layerId);
             let z = maxZ - cells.length + 1;
 
-            const collection = graph.get('cells');
+            const layerCells = graph.getLayer(layerId).cellCollection.toArray();
 
-            let shouldUpdate = (collection.toArray().indexOf(sortedCells[0]) !== (collection.length - cells.length));
+            let shouldUpdate = (layerCells.indexOf(sortedCells[0]) !== (layerCells.length - cells.length));
             if (!shouldUpdate) {
                 shouldUpdate = sortedCells.some(function(cell, index) {
                     return cell.z() !== z + index;
@@ -290,7 +261,7 @@ export const Cell = Model.extend({
     },
 
     toBack: function(opt) {
-        var graph = this.graph;
+        const { graph } = this;
         if (graph) {
             opt = defaults(opt || {}, { foregroundEmbeds: true });
 
@@ -304,11 +275,13 @@ export const Cell = Model.extend({
 
             const sortedCells = opt.foregroundEmbeds ? cells : sortBy(cells, cell => cell.z());
 
-            let z = graph.minZIndex();
+            const layerId = graph.getCellLayerId(this);
 
-            var collection = graph.get('cells');
+            let z = graph.minZIndex(layerId);
 
-            let shouldUpdate = (collection.toArray().indexOf(sortedCells[0]) !== 0);
+            const layerCells = graph.getLayer(layerId).cellCollection.toArray();
+
+            let shouldUpdate = (layerCells.indexOf(sortedCells[0]) !== 0);
             if (!shouldUpdate) {
                 shouldUpdate = sortedCells.some(function(cell, index) {
                     return cell.z() !== z + index;
@@ -543,7 +516,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 +534,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 +607,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 +630,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;
         }
 
@@ -738,6 +719,7 @@ export const Cell = Model.extend({
 
         var firstFrameTime = 0;
         var interpolatingFunction;
+        const transitionKey = Array.isArray(path) ? path.join(delim) : path;
 
         var setter = function(runtime) {
 
@@ -748,10 +730,10 @@ export const Cell = Model.extend({
             progress = runtime / opt.duration;
 
             if (progress < 1) {
-                this._transitionIds[path] = id = nextFrame(setter);
+                this._transitionIds[transitionKey] = id = nextFrame(setter);
             } else {
                 progress = 1;
-                delete this._transitionIds[path];
+                delete this._transitionIds[transitionKey];
             }
 
             propertyValue = interpolatingFunction(opt.timingFunction(progress));
@@ -760,7 +742,7 @@ export const Cell = Model.extend({
 
             this.prop(path, propertyValue, opt);
 
-            if (!id) this.trigger('transition:end', this, path);
+            if (!id) this.trigger('transition:end', this, transitionKey);
 
         }.bind(this);
 
@@ -769,10 +751,10 @@ export const Cell = Model.extend({
 
         var initiator = (callback) => {
 
-            if (_scheduledTransitionIds[path]) {
-                _scheduledTransitionIds[path] = without(_scheduledTransitionIds[path], initialId);
-                if (_scheduledTransitionIds[path].length === 0) {
-                    delete _scheduledTransitionIds[path];
+            if (_scheduledTransitionIds[transitionKey]) {
+                _scheduledTransitionIds[transitionKey] = without(_scheduledTransitionIds[transitionKey], initialId);
+                if (_scheduledTransitionIds[transitionKey].length === 0) {
+                    delete _scheduledTransitionIds[transitionKey];
                 }
             }
 
@@ -780,16 +762,16 @@ export const Cell = Model.extend({
 
             interpolatingFunction = opt.valueFunction(getByPath(this.attributes, path, delim), value);
 
-            this._transitionIds[path] = nextFrame(callback);
+            this._transitionIds[transitionKey] = nextFrame(callback);
 
-            this.trigger('transition:start', this, path);
+            this.trigger('transition:start', this, transitionKey);
 
         };
 
         initialId = setTimeout(initiator, opt.delay, setter);
 
-        _scheduledTransitionIds[path] || (_scheduledTransitionIds[path] = []);
-        _scheduledTransitionIds[path].push(initialId);
+        _scheduledTransitionIds[transitionKey] || (_scheduledTransitionIds[transitionKey] = []);
+        _scheduledTransitionIds[transitionKey].push(initialId);
 
         return initialId;
     },
@@ -805,7 +787,8 @@ export const Cell = Model.extend({
         const { _scheduledTransitionIds = {}} = this;
         let transitions = Object.keys(_scheduledTransitionIds);
         if (path) {
-            const pathArray = path.split(delim);
+            // Ensure all path segments are strings for `isEqual` comparison, since it strictly compares values
+            const pathArray = Array.isArray(path) ? path.map(item => String(item)) : path.split(delim);
             transitions = transitions.filter((key) => {
                 return isEqual(pathArray, key.split(delim).slice(0, pathArray.length));
             });
@@ -824,7 +807,8 @@ export const Cell = Model.extend({
         const { _transitionIds = {}} = this;
         let transitions = Object.keys(_transitionIds);
         if (path) {
-            const pathArray = path.split(delim);
+            // Ensure all path segments are strings for `isEqual` comparison, since it strictly compares values
+            const pathArray = Array.isArray(path) ? path.map(item => String(item)) : path.split(delim);
             transitions = transitions.filter((key) => {
                 return isEqual(pathArray, key.split(delim).slice(0, pathArray.length));
             });
@@ -844,7 +828,7 @@ export const Cell = Model.extend({
         return this;
     },
 
-    // A shorcut making it easy to create constructs like the following:
+    // A shortcut making it easy to create constructs like the following:
     // `var el = (new joint.shapes.standard.Rectangle()).addTo(graph)`.
     addTo: function(graph, opt) {
 
@@ -946,15 +930,41 @@ export const Cell = Model.extend({
             .getPointRotatedAroundCenter(this.angle(), x, y)
             // Transform the absolute position into relative
             .difference(this.position());
+    },
+
+    layer: function(layerId, opt) {
+        const layerAttribute = config.layerAttribute;
+
+        // Getter:
+
+        // If `undefined` return the current layer ID
+        if (layerId === undefined) {
+            return this.get(layerAttribute) || null;
+        }
+
+        // Setter:
+
+        // If strictly `null` unset the layer
+        if (layerId === null) {
+            return this.unset(layerAttribute, opt);
+        }
+
+        // Otherwise set the layer ID
+        if (!isString(layerId)) {
+            throw new Error('dia.Cell: Layer id must be a string.');
+        }
+
+        return this.set(layerAttribute, layerId, opt);
     }
 
 }, {
 
     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) {
@@ -974,3 +984,6 @@ export const Cell = Model.extend({
     }
 });
 
+Object.defineProperty(Cell.prototype, CELL_MARKER, {
+    value: true,
+});

package/src/dia/CellCollection.mjs

@@ -0,0 +1,136 @@
+import * as util from '../util/index.mjs';
+import { Collection } from '../mvc/Collection.mjs';
+import { CELL_MARKER, CELL_COLLECTION_MARKER } from './symbols.mjs';
+
+/**
+ * @class CellCollection
+ * @description A CellCollection is a collection of cells which supports z-index management.
+ * Additionally, it facilitates creating cell models from JSON using cellNamespace
+ * and stores a reference to the graph when the cell model has been added.
+ */
+export class CellCollection extends Collection {
+
+    [CELL_COLLECTION_MARKER] = true;
+
+    initialize(_models, opt) {
+        this.layer = opt.layer;
+    }
+
+    // Method for checking whether an object should be considered a model for
+    // the purposes of adding to the collection.
+    _isModel(model) {
+        return Boolean(model[CELL_MARKER]);
+    }
+
+    // Overriding the default `model` method to create cell models
+    // based on their `type` attribute and the `cellNamespace` option.
+    model(attrs, opt) {
+
+        const namespace = this.cellNamespace;
+
+        if (!namespace) {
+            throw new Error('dia.CellCollection: cellNamespace is required to instantiate a Cell from JSON.');
+        }
+
+        const { type } = attrs;
+
+        // Find the model class based on the `type` attribute in the cell namespace
+        const ModelClass = util.getByPath(namespace, type, '.');
+        if (!ModelClass) {
+            throw new Error(`dia.Graph: Could not find cell constructor for type: '${type}'. Make sure to add the constructor to 'cellNamespace'.`);
+        }
+
+        return new ModelClass(attrs, opt);
+    }
+
+    // Override to set graph reference
+    _addReference(model, options) {
+        super._addReference(model, options);
+
+        // 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.layer.graph;
+        }
+    }
+
+    // Override to remove graph reference
+    _removeReference(model, options) {
+        super._removeReference(model, options);
+
+        // If not in `dry` mode and the model has a reference to this exact graph,
+        // remove the reference.
+        // Note: graph reference is removed from the layer after the `remove` event is fired.
+        // Due to this, event handlers can still access the graph during the `remove` event.
+        if (!options.dry && model.graph === this.layer.graph) {
+            model.graph = null;
+        }
+    }
+
+    // remove graph reference additionally
+    _removeReferenceFast(model, options) {
+        model.off('all', this._onModelEvent, this);
+
+        if (!options.dry) {
+            // If not in `dry` mode and the model has a reference
+            // to this exact graph/collection, remove the reference.
+            if (this === model.collection) {
+                delete model.collection;
+            }
+
+            if (model.graph === this.layer.graph) {
+                model.graph = null;
+            }
+        }
+    }
+
+    // `comparator` makes it easy to sort cells based on their `z` index.
+    comparator(model) {
+        return model.get('z') || 0;
+    }
+
+    // This method overrides base mvc.Collection implementation
+    // in a way that improves performance of resetting large collections.
+    // For layers specifically, there is an option where we put references
+    // from the main collection in order to improve performance when
+    // there is only one layer
+    reset(models, options) {
+        options = util.assign({}, { add: true, remove: false, merge: false }, options);
+
+        for (let i = 0; i < this.models.length; i++) {
+            this._removeReferenceFast(this.models[i], options);
+        }
+        options.previousModels = this.models;
+        this._reset();
+
+        for (let i = 0; i < models.length; i++) {
+            const model = this._prepareModel(models[i], options);
+            if (model) {
+                this.models.push(model);
+                this._addReference(model, options);
+            }
+        }
+
+        this.length = this.models.length;
+
+        const sort = this.comparator && options.sort !== false;
+
+        if (sort) {
+            this.sort({ silent: true });
+        }
+
+        if (!options.silent) {
+            this.trigger('reset', this, options);
+        }
+
+        return this.models;
+    }
+
+    minZIndex() {
+        return (this.first()?.get('z') || 0);
+    }
+
+    maxZIndex() {
+        return (this.last()?.get('z') || 0);
+    }
+}

package/src/dia/CellView.mjs

@@ -21,6 +21,7 @@ import V from '../V/index.mjs';
 import $ from '../mvc/Dom/index.mjs';
 import { HighlighterView } from './HighlighterView.mjs';
 import { evalAttributes, evalAttribute } from './attributes/eval.mjs';
+import { CELL_VIEW_MARKER } from './symbols.mjs';
 
 const HighlightingTypes = {
     DEFAULT: 'default',
@@ -1393,4 +1394,9 @@ Object.defineProperty(CellView.prototype, 'useCSSSelectors', {
     }
 });
 
+// Internal tag to identify this object as a cell view instance.
+// Used instead of `instanceof` for performance and cross-frame safety.
 
+Object.defineProperty(CellView.prototype, CELL_VIEW_MARKER, {
+    value: true,
+});

package/src/dia/Element.mjs

@@ -14,9 +14,8 @@ export const Element = Cell.extend({
         angle: 0
     },
 
-    initialize: function() {
-
-        this._initializePorts();
+    initialize: function(attributes, options) {
+        this._initializePorts(options);
         Cell.prototype.initialize.apply(this, arguments);
     },
 
@@ -421,8 +420,10 @@ export const Element = Cell.extend({
 
         let minBBox = null;
         if (opt.minRect) {
-            // Coerce `opt.minRect` to g.Rect (missing properties = 0).
-            minBBox = new Rect(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);

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