up

clientIO · Geliogabalus · Feb 19, 2025 · Feb 21, 2025 · Feb 23, 2025 · Feb 23, 2025
commit 1a208bc967cb44fe4e8c86b98de0e10517deacc2
diff --git a/packages/joint-core/src/dia/Graph.mjs b/packages/joint-core/src/dia/Graph.mjs
@@ -71,6 +71,7 @@ export const Graph = Model.extend({
         opt = opt || {};
 
         this.defaultLayerName = LayersNames.CELLS;
+        this.activeLayerName = this.defaultLayerName;
 
         const defaultLayer = new Layer({
             name: this.defaultLayerName,
@@ -150,7 +151,7 @@ export const Graph = Model.extend({
             this._nodes[cell.id] = true;
         }
 
-        const layerName = cell.layer() || this.defaultLayerName;
+        const layerName = cell.layer() || this.activeLayerName;
         const layer = this.get('layers')[layerName];
 
         if (!cell.has('z')) {
@@ -175,6 +176,7 @@ export const Graph = Model.extend({
             delete this._nodes[cell.id];
         }
 
+        // should be defined at any time ideally
         const layerName = cell.layer() || this.defaultLayerName;
 
         const layers = this.get('layers');
@@ -188,7 +190,7 @@ export const Graph = Model.extend({
             const embeddingLayer = embeddingLayers[cell.id];
             const cells = embeddingLayer.get('cells').models;
             cells.forEach((cell) => {
-                layers[this.defaultLayerName].add(cell);
+                layers[this.activeLayerName].add(cell);
             });
 
             this.trigger('embeddingLayer:remove', embeddingLayer, {});
@@ -259,7 +261,7 @@ export const Graph = Model.extend({
                 this.trigger('embeddingLayer:insert', embeddingLayers[parentId], {});
             }
 
-            const targetLayer = embeddingLayers[parentId] || layers[this.defaultLayerName];
+            const targetLayer = embeddingLayers[parentId] || layers[this.activeLayerName];
 
             targetLayer.add(cell);
         }
@@ -500,10 +502,41 @@ export const Graph = Model.extend({
         this.stopBatch(batchName);
     },
 
+    getActiveLayer() {
+        return this.get('layers')[this.activeLayerName];
+    },
+
+    addLayer(layer, opt) {
+        const layers = this.get('layers');
+        if (layers[layer.name]) {
+            throw new Exception(`dia.Graph: Layer with name '${layer.name}' already exists.`);
+        }
+
+        layers[layer.name] = layer;
+    },
+
+    removeLayer(layerName, opt) {
+        const layers = this.get('layers');
+        if (!layers[layerName]) {
+            throw new Exception(`dia.Graph: Layer with name '${layerName}' does not exist.`);
+        }
+
+        delete layers[layerName];
+    },
+
     getLayers() {
         return Object.values(this.get('layers'));
     },
 
+    setActiveLayer(layerName) {
+        const layers = this.get('layers');
+        if (!layers[layerName]) {
+            throw new Exception(`dia.Graph: Layer with name '${layerName}' does not exist.`);
+        }
+
+        this.activeLayerName = layerName;
+    },
+
     // Get a cell by `id`.
     getCell: function(id) {
 

diff --git a/packages/joint-core/src/dia/Paper.mjs b/packages/joint-core/src/dia/Paper.mjs
@@ -473,6 +473,9 @@ export const Paper = View.extend({
         this.listenTo(model, 'embeddingLayer:insert', this.onEmbeddingLayerInsert);
         this.listenTo(model, 'embeddingLayer:remove', this.onEmbeddingLayerRemove);
 
+        this.listenTo(model, 'layer:insert', this.onLayerInsert);
+        this.listenTo(model, 'layer:remove', this.onLayerRemove);
+
         this.on('cell:highlight', this.onCellHighlight)
             .on('cell:unhighlight', this.onCellUnhighlight)
             .on('transform', this.update);
@@ -554,6 +557,16 @@ export const Paper = View.extend({
         layerView.remove();
     },
 
+    onLayerInsert: function(layer, opt) {
+        const layerView = this.createLayer({ name: layer.get('name'), model: layer });
+        this.addLayer(layer.get('name'), layerView, { insertBefore: LayersNames.LABELS });
+    },
+
+    onLayerRemove: function(layerName, opt) {
+        const { viewsMap } = this._layers;
+        this.removeLayer(viewsMap[layerName]);
+    },
+
     cloneOptions: function() {
 
         const { options } = this;
@@ -675,13 +688,12 @@ export const Paper = View.extend({
         viewsMap[layerName] = layerView;
     },
 
-    _getLayerView(layer) {
+    _getLayerView(layerName) {
         const { _layers: { viewsMap }} = this;
-        if (layer in viewsMap) return viewsMap[layer];
+        if (layerName in viewsMap) return viewsMap[layerName];
         return null;
     },
 
-
     _requireLayerView(layer) {
         const layerView = this._getLayerView(layer);
         if (!layerView) {