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

package/src/dia/GraphTopologyIndex.mjs

@@ -0,0 +1,222 @@
+import { isEmpty } from '../util/index.mjs';
+import { Listener } from '../mvc/Listener.mjs';
+
+/**
+ * @class GraphTopologyIndex
+ * @description Maintains an index of the graph topology (adjacency list)
+ * for fast graph queries.
+ */
+export class GraphTopologyIndex extends Listener {
+
+    constructor(options) {
+        super(options);
+
+        // Make sure there are no arguments passed to the callbacks.
+        // See the `mvc.Listener` documentation for more details.
+        this.callbackArguments = [];
+
+        this.layerCollection = options.layerCollection;
+        if (!this.layerCollection) {
+            throw new Error('GraphTopologyIndex: "layerCollection" option is required.');
+        }
+
+        this.initializeIndex();
+        this.startListening();
+    }
+
+    /**
+     * @public
+     * @description Start listening to graph and layer collection events
+     * to maintain the topology index.
+     */
+    startListening() {
+        this.listenTo(this.layerCollection.graph, {
+            'add': this._restructureOnAdd,
+            'remove': this._restructureOnRemove,
+            'reset': this._restructureOnReset
+        });
+        // Listening to the collection instead of the graph
+        // to avoid reacting to graph attribute change events
+        // e.g. graph.set('source', ...);
+        this.listenTo(this.layerCollection, {
+            'change:source': this._restructureOnChangeSource,
+            'change:target': this._restructureOnChangeTarget
+        });
+    }
+
+    /**
+     * @protected
+     * @description Initialize the internal data structures.
+     */
+    initializeIndex() {
+        // Outgoing edges per node. Note that we use a hash-table for the list
+        // of outgoing edges for a faster lookup.
+        // [nodeId] -> Object [edgeId] -> true
+        this._out = {};
+        // Ingoing edges per node.
+        // [nodeId] -> Object [edgeId] -> true
+        this._in = {};
+        // `_nodes` is useful for quick lookup of all the elements in the graph, without
+        // having to go through the whole cells array.
+        // [node ID] -> true
+        this._nodes = {};
+        // `_edges` is useful for quick lookup of all the links in the graph, without
+        // having to go through the whole cells array.
+        // [edgeId] -> true
+        this._edges = {};
+    }
+
+    /**
+     * @protected
+     * @description Restructure the topology index on graph reset.
+     * E.g. when fromJSON or resetCells is called.
+     */
+    _restructureOnReset() {
+        this.initializeIndex();
+        this.layerCollection.getCells().forEach(this._restructureOnAdd, this);
+    }
+
+    /**
+     * @protected
+     * @description Restructure the topology index on cell addition.
+     * @param {dia.Cell} cell - The cell being added.
+     */
+    _restructureOnAdd(cell) {
+        if (cell.isLink()) {
+            this._edges[cell.id] = true;
+            const { source, target } = cell.attributes;
+            if (source.id) {
+                (this._out[source.id] || (this._out[source.id] = {}))[cell.id] = true;
+            }
+            if (target.id) {
+                (this._in[target.id] || (this._in[target.id] = {}))[cell.id] = true;
+            }
+        } else {
+            this._nodes[cell.id] = true;
+        }
+    }
+
+    /**
+     * @protected
+     * @description Restructure the topology index on cell removal.
+     * @param {dia.Cell} cell - The cell being removed.
+     */
+    _restructureOnRemove(cell) {
+        if (cell.isLink()) {
+            delete this._edges[cell.id];
+            const { source, target } = cell.attributes;
+            if (source.id && this._out[source.id] && this._out[source.id][cell.id]) {
+                delete this._out[source.id][cell.id];
+            }
+            if (target.id && this._in[target.id] && this._in[target.id][cell.id]) {
+                delete this._in[target.id][cell.id];
+            }
+        } else {
+            delete this._nodes[cell.id];
+        }
+    }
+
+    /**
+     * @protected
+     * @description Restructure the topology index on link source change.
+     * @param {dia.Link} link - The link being changed.
+     */
+    _restructureOnChangeSource(link) {
+
+        const prevSource = link.previous('source');
+        if (prevSource.id && this._out[prevSource.id]) {
+            delete this._out[prevSource.id][link.id];
+        }
+        const source = link.attributes.source;
+        if (source.id) {
+            (this._out[source.id] || (this._out[source.id] = {}))[link.id] = true;
+        }
+    }
+
+    /**
+     * @protected
+     * @description Restructure the topology index on link target change.
+     * @param {dia.Link} link - The link being changed.
+     */
+    _restructureOnChangeTarget(link) {
+
+        const prevTarget = link.previous('target');
+        if (prevTarget.id && this._in[prevTarget.id]) {
+            delete this._in[prevTarget.id][link.id];
+        }
+        const target = link.get('target');
+        if (target.id) {
+            (this._in[target.id] || (this._in[target.id] = {}))[link.id] = true;
+        }
+    }
+
+    /**
+     * @public
+     * @description Get all outbound edges for the node. Time complexity: O(1).
+     * @param {string} nodeId - The id of the node.
+     * @returns {Object} - An object of the form: [edgeId] -> true.
+     */
+    getOutboundEdges(nodeId) {
+        return this._out[nodeId] || {};
+    }
+
+    /**
+     * @public
+     * @description Get all inbound edges for the node. Time complexity: O(1).
+     * @param {string} nodeId - The id of the node.
+     * @returns {Object} - An object of the form: [edgeId] -> true.
+     */
+    getInboundEdges(nodeId) {
+        return this._in[nodeId] || {};
+    }
+
+    /**
+     * @public
+     * @description Get all sink nodes (leafs) in the graph. Time complexity: O(|V|).
+     * @returns {string[]} - Array of node ids.
+     */
+    getSinkNodes() {
+        const sinks = [];
+        for (const nodeId in this._nodes) {
+            if (!this._out[nodeId] || isEmpty(this._out[nodeId])) {
+                sinks.push(nodeId);
+            }
+        }
+        return sinks;
+    }
+
+    /**
+     * @public
+     * @description Get all source nodes (roots) in the graph. Time complexity: O(|V|).
+     * @returns {string[]} - Array of node ids.
+     */
+    getSourceNodes() {
+        const sources = [];
+        for (const nodeId in this._nodes) {
+            if (!this._in[nodeId] || isEmpty(this._in[nodeId])) {
+                sources.push(nodeId);
+            }
+        }
+        return sources;
+    }
+
+    /**
+     * @public
+     * @description Return `true` if `nodeId` is a source node (root). Time complexity: O(1).
+     * @param {string} nodeId - The id of the node to check.
+     * @returns {boolean}
+     */
+    isSourceNode(nodeId) {
+        return !this._in[nodeId] || isEmpty(this._in[nodeId]);
+    }
+
+    /**
+     * @public
+     * @description Return `true` if `nodeId` is a sink node (leaf). Time complexity: O(1).
+     * @param {string} nodeId - The id of the node to check.
+     * @returns {boolean}
+     */
+    isSinkNode(nodeId) {
+        return !this._out[nodeId] || isEmpty(this._out[nodeId]);
+    }
+}

package/src/dia/{layers/GridLayer.mjs → GridLayerView.mjs}

@@ -1,4 +1,4 @@
-import { PaperLayer } from '../PaperLayer.mjs';
+import { LayerView } from './LayerView.mjs';
 import {
     isFunction,
     isString,
@@ -6,10 +6,10 @@ import {
     omit,
     assign,
     merge,
-} from '../../util/index.mjs';
-import V from '../../V/index.mjs';
+} from '../util/index.mjs';
+import V from '../V/index.mjs';
 
-export const GridLayer = PaperLayer.extend({
+export const GridLayerView = LayerView.extend({
 
     style: {
         'pointer-events': 'none'
@@ -19,13 +19,20 @@ export const GridLayer = PaperLayer.extend({
     _gridSettings: null,
 
     init() {
-        PaperLayer.prototype.init.apply(this, arguments);
-        const { options: { paper }} = this;
+        LayerView.prototype.init.apply(this, arguments);
+        this.paper = this.options.paper;
         this._gridCache = null;
         this._gridSettings = [];
+    },
+
+    afterPaperReferenceSet(paper) {
         this.listenTo(paper, 'transform resize', this.updateGrid);
     },
 
+    beforePaperReferenceUnset(paper) {
+        this.stopListening(paper);
+    },
+
     setGrid(drawGrid) {
         this._gridSettings = this.getGridSettings(drawGrid);
         this.renderGrid();
@@ -51,7 +58,7 @@ export const GridLayer = PaperLayer.extend({
 
     renderGrid() {
 
-        const { options: { paper }} = this;
+        const { paper } = this;
         const { _gridSettings: gridSettings } = this;
 
         this.removeGrid();
@@ -96,7 +103,7 @@ export const GridLayer = PaperLayer.extend({
 
     updateGrid() {
 
-        const { _gridCache: grid, _gridSettings: gridSettings, options: { paper }} = this;
+        const { _gridCache: grid, _gridSettings: gridSettings, paper } = this;
         if (!grid) return;
         const { root: vSvg, patterns } = grid;
         const { x, y, width, height } = paper.getArea();
@@ -114,7 +121,7 @@ export const GridLayer = PaperLayer.extend({
     },
 
     _getPatternId(index) {
-        return `pattern_${this.options.paper.cid}_${index}`;
+        return `pattern_${this.paper.cid}_${index}`;
     },
 
     _getGridRefs() {
@@ -143,30 +150,30 @@ export const GridLayer = PaperLayer.extend({
 
     _resolveDrawGridOption(opt) {
 
-        var namespace = this.options.patterns;
+        const namespace = this.options.patterns;
         if (isString(opt) && Array.isArray(namespace[opt])) {
             return namespace[opt].map(function(item) {
                 return assign({}, item);
             });
         }
 
-        var options = opt || { args: [{}] };
-        var isArray = Array.isArray(options);
-        var name = options.name;
+        const options = opt || { args: [{}] };
+        const isArray = Array.isArray(options);
+        let name = options.name;
 
         if (!isArray && !name && !options.markup) {
             name = 'dot';
         }
 
         if (name && Array.isArray(namespace[name])) {
-            var pattern = namespace[name].map(function(item) {
+            const pattern = namespace[name].map(function(item) {
                 return assign({}, item);
             });
 
-            var args = Array.isArray(options.args) ? options.args : [options.args || {}];
+            const args = Array.isArray(options.args) ? options.args : [options.args || {}];
 
             defaults(args[0], omit(opt, 'args'));
-            for (var i = 0; i < args.length; i++) {
+            for (let i = 0; i < args.length; i++) {
                 if (pattern[i]) {
                     assign(pattern[i], args[i]);
                 }

package/src/dia/{PaperLayer.mjs → LayerView.mjs}

@@ -1,34 +1,62 @@
 import { View } from '../mvc/index.mjs';
-import { addClassNamePrefix } from '../util/util.mjs';
+import { addClassNamePrefix, clone } from '../util/util.mjs';
+import { LAYER_VIEW_MARKER } from './symbols.mjs';
 
-export const LayersNames = {
-    GRID: 'grid',
-    CELLS: 'cells',
-    BACK: 'back',
-    FRONT: 'front',
-    TOOLS: 'tools',
-    LABELS: 'labels'
-};
-
-export const PaperLayer = View.extend({
+export const LayerView = View.extend({
 
     tagName: 'g',
     svgElement: true,
     pivotNodes: null,
     defaultTheme: null,
 
+    UPDATE_PRIORITY: 4,
+
     options: {
-        name: ''
+        id: ''
     },
 
-    className: function() {
-        const { name } = this.options;
-        if (!name) return null;
-        return addClassNamePrefix(`${name}-layer`);
-    },
+    paper: null,
 
     init: function() {
         this.pivotNodes = {};
+        this.id = this.options.id || this.cid;
+    },
+
+    setPaperReference: function(paper) {
+        this.paper = paper;
+        this.afterPaperReferenceSet(paper);
+    },
+
+    unsetPaperReference: function() {
+        this.beforePaperReferenceUnset();
+        this.paper = null;
+    },
+
+    assertPaperReference() {
+        if (!this.paper) {
+            throw new Error('LayerView: paper reference is not set.');
+        }
+    },
+
+    afterPaperReferenceSet: function() {
+        // Can be overridden in subclasses.
+    },
+
+    beforePaperReferenceUnset: function() {
+        // Can be overridden in subclasses.
+    },
+
+    // prevents id to be set on the DOM element
+    _setAttributes: function(attrs) {
+        const newAttrs = clone(attrs);
+        delete newAttrs.id;
+
+        View.prototype._setAttributes.call(this, newAttrs);
+    },
+
+    className: function() {
+        const { id } = this.options;
+        return addClassNamePrefix(`${id}-layer`);
     },
 
     insertSortedNode: function(node, z) {
@@ -79,4 +107,11 @@ export const PaperLayer = View.extend({
         return this.el.children.length === 0;
     },
 
+    reset: function() {
+        this.removePivots();
+    }
+});
+
+Object.defineProperty(LayerView.prototype, LAYER_VIEW_MARKER, {
+    value: true,
 });

package/src/dia/LegacyGraphLayerView.mjs

@@ -0,0 +1,14 @@
+import { GraphLayerView } from './GraphLayerView.mjs';
+import { addClassNamePrefix } from '../util/util.mjs';
+
+/**
+ * @class LegacyGraphLayerView
+ * @description A legacy GraphLayerView with an additional class name for backward compatibility.
+ */
+export const LegacyGraphLayerView = GraphLayerView.extend({
+
+    className: function() {
+        const className = GraphLayerView.prototype.className.apply(this, arguments);
+        return className + ' ' + addClassNamePrefix('viewport');
+    }
+});