refactor: refactor for plane node demo and docs

antvis · Dec 4, 2023 · 186ca6b · 186ca6b
1 parent 91844fd
commit 186ca6b
Show file tree

Hide file tree

Showing 5 changed files with 220 additions and 611 deletions.
diff --git a/packages/g6/src/stdlib/item/node/plane.ts b/packages/g6/src/stdlib/item/node/plane.ts
@@ -39,16 +39,26 @@ export class PlaneNode extends BaseNode3D {
     let shapes: NodeShapeMap = { keyShape: undefined };
 
     // keyShape
-    shapes.keyShape = this.drawKeyShape(model, shapeMap, diffData);
+    shapes.keyShape = this.drawKeyShape(model, shapeMap, diffData, diffState);
 
     // haloShape
     if (data.haloShape && this.drawHaloShape) {
-      shapes.haloShape = this.drawHaloShape(model, shapeMap, diffData);
+      shapes.haloShape = this.drawHaloShape(
+        model,
+        shapeMap,
+        diffData,
+        diffState,
+      );
     }
 
     // labelShape
     if (data.labelShape) {
-      shapes.labelShape = this.drawLabelShape(model, shapeMap, diffData);
+      shapes.labelShape = this.drawLabelShape(
+        model,
+        shapeMap,
+        diffData,
+        diffState,
+      );
     }
 
     // labelBackgroundShape
@@ -57,12 +67,18 @@ export class PlaneNode extends BaseNode3D {
         model,
         shapeMap,
         diffData,
+        diffState,
       );
     }
 
     // iconShape
     if (data.iconShape) {
-      shapes.iconShape = this.drawIconShape(model, shapeMap, diffData);
+      shapes.iconShape = this.drawIconShape(
+        model,
+        shapeMap,
+        diffData,
+        diffState,
+      );
     }
 
     // badgeShape
@@ -83,7 +99,7 @@ export class PlaneNode extends BaseNode3D {
     if (data.otherShapes && this.drawOtherShapes) {
       shapes = {
         ...shapes,
-        ...this.drawOtherShapes(model, shapeMap, diffData),
+        ...this.drawOtherShapes(model, shapeMap, diffData, diffState),
       };
     }
     return shapes;
@@ -95,11 +111,11 @@ export class PlaneNode extends BaseNode3D {
     diffData?: { previous: NodeModelData; current: NodeModelData },
     diffState?: { previous: State[]; current: State[] },
   ): DisplayObject {
-    return this.upsertShape(
-      'plane',
-      'keyShape',
-      this.mergedStyles.keyShape,
+    return this.upsertShape('plane', 'keyShape', this.mergedStyles.keyShape, {
       shapeMap,
-    );
+      model,
+      diffData,
+      diffState,
+    });
   }
 }
diff --git a/packages/site/docs/apis/shape/PlaneGeometryProps.en.md b/packages/site/docs/apis/shape/PlaneGeometryProps.en.md
@@ -47,36 +47,52 @@ depth segments
 
 material type
 
-## materialProps material-related parameters
-
-### wireframe
-
-**Type**：`boolean`
-
-**Default**：`false`
-
-Enable wireframe，Commonly used to visually display triangular surfaces
-
-### wireframeColor
-
-**Type**：`string`
-
-**Default**：`black`
-
-After enabling wireframe, you can specify a color, which defaults to 'black'
-
-### wireframeLineWidth
-
-**Type**：`number`
-
-**Default**：`1`
-
-After enabling wireframe, you can specify the line width, which defaults to 1
-
-### cullMode
-
-**Type**：`number`
-
-**Default**：`0`
-
-Turn on face removal, default to 0, which means no removal. 1 is front removal, 2 is back removal, and 3 is front and back removal
+## materialProps
+
+**Type**: `MaterialProps`
+
+<details>
+  <summary style="color: #873bf4; cursor: pointer;">
+    MaterialProps
+  </summary>
+
+```ts
+type MaterialProps = {
+  /** Whether to enable wireframe mode, which is often used to intuitively display triangles */
+  wireframe?: boolean;
+  /** Specify the color after opening wireframe */
+  wireframeColor?: string;
+  /** Specify the line width after opening wireframe */
+  wireframeLineWidth?: number;
+  /**
+   * Specify the cull mode
+   * 0: no culling
+   * 1: cull front
+   * 2: cull back
+   * 3: cull front and back
+   */
+  cullMode?: number;
+};
+```
+
+</details>
+
+**Default**: `object`
+
+<details>
+  <summary style="color: #873bf4; cursor: pointer;">
+    object
+  </summary>
+
+```json
+{
+  "wireframe": false,
+  "wireframeColor": "black",
+  "wireframeLineWidth": 1,
+  "cullMode": 0
+}
+```
+
+</details>
+
+material-related properties
diff --git a/packages/site/docs/apis/shape/PlaneGeometryProps.zh.md b/packages/site/docs/apis/shape/PlaneGeometryProps.zh.md
@@ -47,37 +47,52 @@ order: 11
 
 材质类型
 
-## materialProps 材质相关属性
-
-### wireframe
-
-**类型**：`boolean`
-
-**默认值**：`false`
-
-是否绘制 wireframe，常用于直观展示三角面
-
-### wireframeColor
-
-**类型**：`string`
-
-**默认值**：`black`
-
-开启 wireframe 后可指定颜色，默认为 'black'
-
-### wireframeLineWidth
-
-**类型**：`number`
-
-**默认值**：`1`
-
-开启 wireframe 后可指定线宽，默认为 1
-
-### cullMode
-
-**类型**：`number`
-
-**默认值**：`0`
-
-开启 面剔除，默认为 0，即不剔除，1 为正面剔除，2 为背面剔除, 3 为正背面剔除
-
+## materialProps
+
+**类型**：`MaterialProps`
+
+<details>
+  <summary style="color: #873bf4; cursor: pointer;">
+    MaterialProps
+  </summary>
+
+```ts
+type MaterialProps = {
+  /** 是否绘制 wireframe，常用于直观展示三角面 */
+  wireframe?: boolean;
+  /** 开启 wireframe 后可指定颜色，默认为 'black' */
+  wireframeColor?: string;
+  /** 开启 wireframe 后可指定线宽，默认为 1 */
+  wireframeLineWidth?: number;
+  /**
+   * 开启 面剔除
+   * 0：不剔除
+   * 1：正面剔除
+   * 2：背面剔除
+   * 3：正背面剔除
+   */
+  cullMode?: number;
+};
+```
+
+</details>
+
+**默认值**：`object`
+
+<details>
+  <summary style="color: #873bf4; cursor: pointer;">
+    object
+  </summary>
+
+```json
+{
+  "wireframe": false,
+  "wireframeColor": "black",
+  "wireframeLineWidth": 1,
+  "cullMode": 0
+}
+```
+
+</details>
+
+材质相关属性