feat: layer api

packages/x6/src/graph/base-graph.ts

@@ -49,6 +49,7 @@ import { EditingManager } from './editing-manager'
 import { MovingManager } from './moving-manager'
 import { ZoomManager } from './zoom-manager'
 import { PanningManager } from './panning-manager'
+import { LayerManager } from './layer-manager'
 
 export class BaseGraph extends Disablable<EventArgs>
   implements GraphProperties, CompositeOptions {
@@ -78,6 +79,7 @@ export class BaseGraph extends Disablable<EventArgs>
   public editingManager: EditingManager
   public movingManager: MovingManager
   public panningManager: PanningManager
+  public layerManager: LayerManager
 
   public tooltipHandler: TooltipHandler
   public cursorHandler: CursorHandler
@@ -124,6 +126,7 @@ export class BaseGraph extends Disablable<EventArgs>
     this.editingManager = new EditingManager(this as any)
     this.movingManager = new MovingManager(this as any)
     this.panningManager = new PanningManager(this as any)
+    this.layerManager = new LayerManager(this as any)
   }
 
   protected createHandlers() {

packages/x6/src/graph/graph.ts

@@ -25,6 +25,7 @@ import { PanningAccessor } from './panning-accessor'
 import { SelectionAccessor } from './selection-accessor'
 import { CreationAccessor } from './creation-accessor'
 import { GroupAccessor } from './group-accessor'
+import { LayerAccessor } from './layer-accessor'
 import { ValidationAccessor } from './validation-accessor'
 import { StyleAccessor } from './style-accessor'
 import { EventLoopAccessor } from './eventloop-accessor'
@@ -99,6 +100,7 @@ export interface Graph
     GridAccessor,
     GuideAccessor,
     GroupAccessor,
+    LayerAccessor,
     StyleAccessor,
     ChangeAccessor,
     MovingAccessor,
@@ -129,6 +131,7 @@ util.applyMixins(
   GridAccessor,
   GuideAccessor,
   GroupAccessor,
+  LayerAccessor,
   StyleAccessor,
   ChangeAccessor,
   MovingAccessor,

packages/x6/src/graph/layer-accessor.ts

@@ -0,0 +1,19 @@
+import { BaseGraph } from './base-graph'
+
+export class LayerAccessor extends BaseGraph {
+  getLayerCount() {
+    return this.layerManager.getLayerCount()
+  }
+
+  addLayer(data?: any) {
+    return this.layerManager.addLayer(data)
+  }
+
+  removeLayer(layerIndex: number) {
+    this.layerManager.removeLayer(layerIndex)
+  }
+
+  copyLayer(layerIndex: number) {
+    return this.layerManager.copyLayer(layerIndex)
+  }
+}

packages/x6/src/graph/layer-manager.ts

@@ -0,0 +1,60 @@
+import { Cell } from '../core/cell'
+import { BaseManager } from './base-manager'
+
+export class LayerManager extends BaseManager {
+  getLayerCount() {
+    return this.model.getChildCount(this.model.getRoot())
+  }
+
+  addLayer(data?: any) {
+    return this.graph.batchUpdate(() => {
+      const cell = new Cell(data)
+      const root = this.model.getRoot()
+
+      this.graph.addCell(cell, root)
+      this.graph.setDefaultParent(cell)
+
+      return cell
+    })
+  }
+
+  removeLayer(index: number) {
+    return this.graph.batchUpdate(() => {
+      const root = this.model.getRoot()
+      const layer = this.model.getChildAt(root, index)
+      if (layer != null) {
+        this.graph.removeCells([layer], false)
+        const count = this.getLayerCount()
+        if (count === 0) {
+          this.addLayer()
+          this.graph.setDefaultParent(null)
+        } else if (index > 0 && index <= count) {
+          this.graph.setDefaultParent(this.model.getChildAt(root, index - 1))
+        } else {
+          this.graph.setDefaultParent(null)
+        }
+      }
+      return layer
+    })
+  }
+
+  copyLayer(index: number) {
+    const root = this.model.getRoot()
+    const layer = this.model.getChildAt(root, index)
+    const cloned = layer != null ? this.graph.cloneCell(layer) : null
+
+    if (cloned != null) {
+      this.graph.batchUpdate(() => {
+        cloned.setVisible(true)
+        this.graph.addCell(cloned, root)
+        this.graph.setDefaultParent(cloned)
+      })
+
+      if (!this.graph.isCellLocked(cloned)) {
+        this.graph.selectAll(cloned)
+      }
+    }
+
+    return cloned
+  }
+}