fix: 🐛 add keepId for node clone (#1254)

packages/x6/src/model/cell.ts

@@ -1377,7 +1377,9 @@ export class Cell<
   ): this extends Node ? Node : this extends Edge ? Edge : Cell {
     if (!options.deep) {
       const data = { ...this.store.get() }
-      delete data.id
+      if (!options.keepId) {
+        delete data.id
+      }
       delete data.parent
       delete data.children
       const ctor = this.constructor as typeof Cell
@@ -1557,6 +1559,7 @@ export namespace Cell {
 
   export interface CloneOptions {
     deep?: boolean
+    keepId?: boolean
   }
 }
 

sites/x6-sites/docs/tutorial/basic/dnd.en.md

@@ -93,14 +93,10 @@ const dnd = new Addon.Dnd({
 
 ```ts
 const dnd = new Addon.Dnd({
-  getDropNode(node) {
-    const n = node.clone();
-    // 需要设置下面两个地方
-    n.id = "customId";
-    n.prop("id", "customId");
-    return n;
-  }
+  getDragNode: (node) => node.clone({ keepId: true }),
+  getDropNode: (node) => node.clone({ keepId: true }),
 })
+```
 
 ## Stencil
 

sites/x6-sites/docs/tutorial/basic/dnd.zh.md

@@ -93,13 +93,8 @@ const dnd = new Addon.Dnd({
 
 ```ts
 const dnd = new Addon.Dnd({
-  getDropNode(node) {
-    const n = node.clone();
-    // 需要设置下面两个地方
-    n.id = "customId";
-    n.prop("id", "customId");
-    return n;
-  }
+  getDragNode: (node) => node.clone({ keepId: true }),
+  getDropNode: (node) => node.clone({ keepId: true }),
 })
 ```
 

sites/x6-sites/docs/tutorial/epilog.en.md

@@ -10,7 +10,6 @@ redirect_from:
     1. [X6 与 G6 的区别](#x6-与-g6-的区别)
     2. [X6 支持 Vue 吗](#x6-支持-vue-吗)
     3. [X6 浏览器兼容性](#浏览器兼容性)
-    4. [怎么自定义节点的 ID](#自定义节点-id)
     4. [怎么解决 angular 项目类型报错](#怎么解决-angular-项目类型报错)
 2.	节点相关
     1. [怎么禁止节点移动](#怎么禁止节点移动)
@@ -38,11 +37,6 @@ X6 的核心能力和框架无关，在 X6 的基础上我们有 [x6-react-shape
 
 现代浏览器（Chrome、Firefox 、Safari 较新版本，IE11 部分功能不支持）
 
-
-#### 自定义节点 ID
-
-X6 不支持自定义节点的 ID，这是出于用户自维护节点 ID 容易出错的考虑。业务中的唯一标识可以放在节点的 `data` 属性中。
-
 #### 怎么解决 angular 项目类型报错
 
 可以在 `tsconfig.app.json` 中增加以下配置：

sites/x6-sites/docs/tutorial/epilog.zh.md

@@ -10,8 +10,7 @@ redirect_from:
     1. [X6 与 G6 的区别](#x6-与-g6-的区别)
     2. [X6 支持 Vue 吗](#x6-支持-vue-吗)
     3. [X6 浏览器兼容性](#浏览器兼容性)
-    4. [怎么自定义节点的 ID](#自定义节点-id)
-    5. [怎么解决 angular 项目类型报错](#怎么解决-angular-项目类型报错)
+    4. [怎么解决 angular 项目类型报错](#怎么解决-angular-项目类型报错)
 2.	节点相关
     1. [怎么禁止节点移动](#怎么禁止节点移动)
     2. [怎么支持特定节点的放大缩小](#怎么支持特定节点的放大缩小)
@@ -38,10 +37,6 @@ X6 的核心能力和框架无关，在 X6 的基础上我们有 [x6-react-shape
 
 现代浏览器（Chrome、Firefox 、Safari 较新版本，IE11 部分功能不支持）
 
-#### 自定义节点 ID
-
-X6 不支持自定义节点的 ID，这是出于用户自维护节点 ID 容易出错的考虑。业务中的唯一标识可以放在节点的 `data` 属性中。
-
 #### 怎么解决 angular 项目类型报错
 
 可以在 `tsconfig.app.json` 中增加以下配置：