feat(layers): Graph and Paper embedding layers implementation

packages/joint-core/src/dia/Cell.mjs

@@ -247,7 +247,7 @@ export const Cell = Model.extend({
     },
 
     toFront: function(opt) {
-        var graph = this.graph;
+        const { graph } = this;
         if (graph) {
             opt = defaults(opt || {}, { foregroundEmbeds: true });
 
@@ -261,10 +261,12 @@ export const Cell = Model.extend({
 
             const sortedCells = opt.foregroundEmbeds ? cells : sortBy(cells, cell => cell.z());
 
-            const maxZ = graph.maxZIndex();
+            const layerName = this.layer();
+
+            const maxZ = graph.maxZIndex(layerName);
             let z = maxZ - cells.length + 1;
 
-            const collection = graph.get('cells');
+            const collection = graph.getLayerCells(layerName);
 
             let shouldUpdate = (collection.toArray().indexOf(sortedCells[0]) !== (collection.length - cells.length));
             if (!shouldUpdate) {
@@ -290,7 +292,7 @@ export const Cell = Model.extend({
     },
 
     toBack: function(opt) {
-        var graph = this.graph;
+        const { graph } = this;
         if (graph) {
             opt = defaults(opt || {}, { foregroundEmbeds: true });
 
@@ -304,9 +306,11 @@ export const Cell = Model.extend({
 
             const sortedCells = opt.foregroundEmbeds ? cells : sortBy(cells, cell => cell.z());
 
-            let z = graph.minZIndex();
+            const layerName = this.layer();
+
+            let z = graph.minZIndex(layerName);
 
-            var collection = graph.get('cells');
+            const  collection = graph.getLayerCells(layerName);
 
             let shouldUpdate = (collection.toArray().indexOf(sortedCells[0]) !== 0);
             if (!shouldUpdate) {
@@ -942,6 +946,26 @@ export const Cell = Model.extend({
             .getPointRotatedAroundCenter(this.angle(), x, y)
             // Transform the absolute position into relative
             .difference(this.position());
+    },
+
+    setLayer(layerName) {
+        if (layerName) {
+            this.set('layer', layerName);
+        }
+    },
+
+    unsetLayer() {
+        this.unset('layer');
+    },
+
+    layer() {
+        let layer = this.get('layer') || null;
+        if (layer == null && this.graph) {
+            // If the cell is part of a graph, use the graph's default layer.
+            layer = this.graph.getDefaultLayer().name;
+        }
+
+        return layer;
     }
 
 }, {

packages/joint-core/src/dia/Graph.mjs

@@ -1,10 +1,12 @@
 import * as util from '../util/index.mjs';
 import * as g from '../g/index.mjs';
 
+import { GraphLayer } from './layers/GraphLayer.mjs';
 import { Model } from '../mvc/Model.mjs';
 import { Collection } from '../mvc/Collection.mjs';
 import { wrappers, wrapWith } from '../util/wrappers.mjs';
 import { cloneCells } from '../util/index.mjs';
+import { GraphLayersController } from './controllers/GraphLayersController.mjs';
 
 const GraphCells = Collection.extend({
 
@@ -19,7 +21,6 @@ const GraphCells = Collection.extend({
             /* eslint-enable no-undef */
         }
 
-
         this.graph = opt.graph;
     },
 
@@ -70,6 +71,17 @@ export const Graph = Model.extend({
 
         opt = opt || {};
 
+        this.enableCellLayers = opt.enableCellLayers || false;
+
+        this.defaultLayerName = 'cells';
+
+        const defaultLayer = new GraphLayer({
+            name: this.defaultLayerName
+        });
+
+        this.layersController = new GraphLayersController({ graph: this });
+        this.layersController.addLayer(defaultLayer);
+
         // Passing `cellModel` function in the options object to graph allows for
         // setting models based on attribute objects. This is especially handy
         // when processing JSON graphs that are in a different than JointJS format.
@@ -84,10 +96,6 @@ export const Graph = Model.extend({
         // to the outside world.
         cells.on('all', this.trigger, this);
 
-        // JointJS automatically doesn't trigger re-sort if models attributes are changed later when
-        // they're already in the collection. Therefore, we're triggering sort manually here.
-        this.on('change:z', this._sortOnChangeZ, this);
-
         // `joint.dia.Graph` keeps an internal data structure (an adjacency list)
         // for fast graph queries. All changes that affect the structure of the graph
         // must be reflected in the `al` object. This object provides fast answers to
@@ -120,11 +128,6 @@ export const Graph = Model.extend({
         cells.on('remove', this._removeCell, this);
     },
 
-    _sortOnChangeZ: function() {
-
-        this.get('cells').sort();
-    },
-
     _restructureOnAdd: function(cell) {
 
         if (cell.isLink()) {
@@ -157,10 +160,10 @@ export const Graph = Model.extend({
         }
     },
 
-    _restructureOnReset: function(cells) {
+    _restructureOnReset: function(collection) {
 
-        // Normalize into an array of cells. The original `cells` is GraphCells mvc collection.
-        cells = cells.models;
+        // Normalize into an array of cells. The original `collection` is GraphCells mvc collection.
+        const cells = collection.models;
 
         this._out = {};
         this._in = {};
@@ -295,16 +298,16 @@ export const Graph = Model.extend({
         return cell;
     },
 
-    minZIndex: function() {
-
-        var firstCell = this.get('cells').first();
-        return firstCell ? (firstCell.get('z') || 0) : 0;
+    minZIndex: function(layerName) {
+        return this.layersController.minZIndex(layerName);
     },
 
-    maxZIndex: function() {
+    maxZIndex: function(layerName) {
+        return this.layersController.maxZIndex(layerName);
+    },
 
-        var lastCell = this.get('cells').last();
-        return lastCell ? (lastCell.get('z') || 0) : 0;
+    addToLayer: function(cell, layer) {
+        this.layersController.addToLayer(cell, layer);
     },
 
     addCell: function(cell, opt) {
@@ -314,17 +317,6 @@ export const Graph = Model.extend({
             return this.addCells(cell, opt);
         }
 
-        if (cell instanceof Model) {
-
-            if (!cell.has('z')) {
-                cell.set('z', this.maxZIndex() + 1);
-            }
-
-        } else if (cell.z === undefined) {
-
-            cell.z = this.maxZIndex() + 1;
-        }
-
         this.get('cells').add(this._prepareCell(cell, opt), opt || {});
 
         return this;
@@ -338,10 +330,10 @@ export const Graph = Model.extend({
         opt.maxPosition = opt.position = cells.length - 1;
 
         this.startBatch('add', opt);
-        cells.forEach(function(cell) {
+        cells.forEach((cell) => {
             this.addCell(cell, opt);
             opt.position--;
-        }, this);
+        });
         this.stopBatch('add', opt);
 
         return this;
@@ -352,11 +344,16 @@ export const Graph = Model.extend({
     // Useful for bulk operations and optimizations.
     resetCells: function(cells, opt) {
 
+        this.startBatch('reset', opt);
+
         var preparedCells = util.toArray(cells).map(function(cell) {
             return this._prepareCell(cell, opt);
         }, this);
+
         this.get('cells').reset(preparedCells, opt);
 
+        this.stopBatch('reset', opt);
+
         return this;
     },
 
@@ -429,35 +426,63 @@ export const Graph = Model.extend({
         this.stopBatch(batchName);
     },
 
+    addLayer(layer, opt) {
+        this.layersController.addLayer(layer, opt);
+    },
+
+    removeLayer(layer, opt) {
+        this.layersController.removeLayer(layer.name, opt);
+    },
+
+    getDefaultLayer() {
+        return this.layersController.getDefaultLayer();
+    },
+
+    getLayer(name) {
+        return this.layersController.getLayer(name);
+    },
+
+    hasLayer(name) {
+        return this.layersController.hasLayer(name);
+    },
+
+    getLayers() {
+        return this.layersController.getLayers();
+    },
+
+    getLayerCells(layerName) {
+        return this.layersController.getLayerCells(layerName);
+    },
+
     // Get a cell by `id`.
     getCell: function(id) {
 
         return this.get('cells').get(id);
     },
 
     getCells: function() {
-
-        return this.get('cells').toArray();
+        // Preserve old order without layers
+        return this.layersController.getCells();
     },
 
     getElements: function() {
 
-        return this.get('cells').toArray().filter(cell => cell.isElement());
+        return this.getCells().filter(cell => cell.isElement());
     },
 
     getLinks: function() {
 
-        return this.get('cells').toArray().filter(cell => cell.isLink());
+        return this.getCells().filter(cell => cell.isLink());
     },
 
     getFirstCell: function() {
 
-        return this.get('cells').first();
+        return this.getCells().first();
     },
 
     getLastCell: function() {
 
-        return this.get('cells').last();
+        return this.getCells().last();
     },
 
     // Get all inbound and outbound links connected to the cell `model`.

packages/joint-core/src/dia/HighlighterView.mjs

@@ -117,7 +117,7 @@ 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.getLayer(layerName).insertSortedNode(vGroup.node, options.z);
         } else {
             // TODO: prepend vs append
             if (!el.parentNode || el.nextSibling) {

packages/joint-core/src/dia/LinkView.mjs

@@ -391,7 +391,7 @@ export const LinkView = CellView.extend({
         if (!vLabels || !model.hasLabels()) return;
         const { node } = vLabels;
         if (options.labelsLayer) {
-            paper.getLayerView(options.labelsLayer).insertSortedNode(node, model.get('z'));
+            paper.getLayer(options.labelsLayer).insertSortedNode(node, model.get('z'));
         } else {
             if (node.parentNode !== el) {
                 el.appendChild(node);