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

package/src/dia/Cell.mjs

@@ -1,5 +1,4 @@
 import {
-    uniqueId,
     union,
     result,
     merge,
@@ -33,6 +32,7 @@ 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,38 +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.
+    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;
-            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;
+            attributes = merge({}, attributeDefaults, ctorAttributes, customizer);
+        } else {
+            attributes = ctorAttributes;
         }
-        this.initialize.apply(this, arguments);
+        this.set(attributes, options);
     },
 
     translate: function(dx, dy, opt) {
@@ -141,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 });
         }
 
@@ -220,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 });
 
@@ -269,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;
@@ -298,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 });
 
@@ -312,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;
@@ -754,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) {
 
@@ -764,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));
@@ -776,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);
 
@@ -785,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];
                 }
             }
 
@@ -796,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;
     },
@@ -821,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));
             });
@@ -840,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));
             });
@@ -860,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) {
 
@@ -962,6 +930,31 @@ 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);
     }
 
 }, {
@@ -990,3 +983,7 @@ export const Cell = Model.extend({
         return Cell;
     }
 });
+
+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',
@@ -1396,8 +1397,6 @@ 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.
 
-export const CELL_VIEW_MARKER = Symbol('joint.cellViewMarker');
-
 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);
     },