fix: 🐛 optimize cell remove method

examples/x6-example-features/src/pages/group/data.json

@@ -0,0 +1,110 @@
+{
+  "cells": [
+    {
+      "position": {
+        "x": 80,
+        "y": 80
+      },
+      "size": {
+        "width": 160,
+        "height": 60
+      },
+      "attrs": {
+        "text": {
+          "text": "parent"
+        }
+      },
+      "shape": "rect",
+      "portMarkup": [
+        {
+          "tagName": "circle",
+          "selector": "portBody",
+          "attrs": {
+            "r": 6,
+            "magnet": "true",
+            "stroke": "#000",
+            "fill": "#fff",
+            "strokeWidth": 2,
+            "stroke-width": 2
+          }
+        }
+      ],
+      "ports": {
+        "groups": {
+          "in": {
+            "position": {
+              "name": "top"
+            }
+          },
+          "out": {
+            "position": {
+              "name": "bottom"
+            }
+          }
+        },
+        "items": []
+      },
+      "id": "1",
+      "children": ["2"],
+      "zIndex": 1
+    },
+    {
+      "position": {
+        "x": 320,
+        "y": 320
+      },
+      "size": {
+        "width": 160,
+        "height": 60
+      },
+      "attrs": {
+        "text": {
+          "text": "child"
+        }
+      },
+      "shape": "rect",
+      "portMarkup": [
+        {
+          "tagName": "circle",
+          "selector": "portBody",
+          "attrs": {
+            "r": 6,
+            "magnet": "true",
+            "stroke": "#000",
+            "fill": "#fff",
+            "strokeWidth": 2,
+            "stroke-width": 2
+          }
+        }
+      ],
+      "ports": {
+        "groups": {
+          "in": {
+            "position": {
+              "name": "top"
+            }
+          },
+          "out": {
+            "position": {
+              "name": "bottom"
+            }
+          }
+        },
+        "items": []
+      },
+      "id": "2",
+      "zIndex": 2
+    },
+    {
+      "shape": "edge",
+      "id": "8a15dd65-7dc1-4f89-b0b8-1e621dbc4cfd",
+      "source": {
+        "cell": "1"
+      },
+      "target": {
+        "cell": "2"
+      },
+      "zIndex": 3
+    }
+  ]
+}

examples/x6-example-features/src/pages/group/index.tsx

@@ -0,0 +1,66 @@
+import React from 'react'
+import { Graph } from '@antv/x6'
+import '../index.less'
+
+export default class Example extends React.Component {
+  private container: HTMLDivElement
+
+  componentDidMount() {
+    const graph = new Graph({
+      container: this.container,
+      width: 800,
+      height: 600,
+      grid: true,
+    })
+
+    const parent = graph.addNode({
+      id: '1',
+      shape: 'rect',
+      x: 80,
+      y: 80,
+      width: 160,
+      height: 60,
+      label: 'parent',
+    })
+    const child1 = graph.addNode({
+      id: '2',
+      shape: 'rect',
+      x: 320,
+      y: 320,
+      width: 160,
+      height: 60,
+      label: 'child1',
+    })
+
+    const child2 = graph.addNode({
+      id: '3',
+      shape: 'rect',
+      x: 520,
+      y: 320,
+      width: 160,
+      height: 60,
+      label: 'child2',
+    })
+
+    parent.addChild(child1)
+    child1.addChild(child2)
+
+    console.log(graph.toJSON())
+
+    graph.fromJSON(graph.toJSON())
+
+    graph.removeNode('1')
+  }
+
+  refContainer = (container: HTMLDivElement) => {
+    this.container = container
+  }
+
+  render() {
+    return (
+      <div className="x6-graph-wrap">
+        <div ref={this.refContainer} className="x6-graph" />
+      </div>
+    )
+  }
+}

packages/x6/src/model/cell.ts

@@ -17,7 +17,7 @@ import { Node } from './node'
 import { Edge } from './edge'
 
 export class Cell<
-  Properties extends Cell.Properties = Cell.Properties,
+  Properties extends Cell.Properties = Cell.Properties
 > extends Basecoat<Cell.EventArgs> {
   // #region static
 
@@ -750,33 +750,29 @@ export class Cell<
   }
 
   getParent() {
-    let parent = this._parent
-    if (parent == null && this.store) {
-      const parentId = this.getParentId()
-      if (parentId != null && this.model) {
-        parent = this.model.getCell(parentId)
-        this._parent = parent
-      }
+    const parentId = this.getParentId()
+    if (parentId && this.model) {
+      const parent = this.model.getCell(parentId)
+      this._parent = parent
+      return parent
     }
-    return parent
+    return null
   }
 
   getParentId() {
     return this.store.get('parent')
   }
 
   getChildren() {
-    let children = this._children
-    if (children == null) {
-      const childrenIds = this.store.get('children')
-      if (childrenIds && childrenIds.length && this.model) {
-        children = childrenIds
-          .map((id) => this.model?.getCell(id))
-          .filter((cell) => cell != null) as Cell[]
-        this._children = children
-      }
+    const childrenIds = this.store.get('children')
+    if (childrenIds && childrenIds.length && this.model) {
+      const children = childrenIds
+        .map((id) => this.model?.getCell(id))
+        .filter((cell) => cell != null) as Cell[]
+      this._children = children
+      return [...children]
     }
-    return children ? [...children] : null
+    return null
   }
 
   hasParent() {
@@ -1055,20 +1051,20 @@ export class Cell<
   }
 
   remove(options: Cell.RemoveOptions = {}) {
-    const parent = this.getParent()
-    if (parent) {
-      parent.removeChild(this, options)
-    } else {
-      this.batchUpdate('remove', () => {
-        if (options.deep !== false) {
-          this.eachChild((child) => child.remove(options))
-        }
+    this.batchUpdate('remove', () => {
+      const parent = this.getParent()
+      if (parent) {
+        parent.removeChild(this, options)
+      }
 
-        if (this.model) {
-          this.model.removeCell(this, options)
-        }
-      })
-    }
+      if (options.deep !== false) {
+        this.eachChild((child) => child.remove(options))
+      }
+
+      if (this.model) {
+        this.model.removeCell(this, options)
+      }
+    })
     return this
   }