feat: add plane-node for v5 (#5189)

* feat: add planeNode --------- Co-authored-by: TT <[email protected]>
antvis · Dec 4, 2023 · 91844fd · 91844fd
1 parent 0b89bf7
commit 91844fd
Show file tree

Hide file tree

Showing 8 changed files with 775 additions and 14 deletions.
diff --git a/packages/g6/src/stdlib/index.ts b/packages/g6/src/stdlib/index.ts
@@ -34,6 +34,7 @@ const {
   ModelRectNode,
   ImageNode,
   CubeNode,
+  PlaneNode,
   BaseNode,
   BaseNode3D,
 } = Nodes;
@@ -255,6 +256,7 @@ const Extensions = {
   EllipseNode,
   ModelRectNode,
   CubeNode,
+  PlaneNode,
   BaseNode,
   BaseNode3D,
   // edges

diff --git a/packages/g6/src/stdlib/item/node/index.ts b/packages/g6/src/stdlib/item/node/index.ts
@@ -10,5 +10,6 @@ export * from './diamond';
 export * from './modelRect';
 export * from './image';
 export * from './cube';
+export * from './plane';
 export * from './base';
 export * from './base3d';
diff --git a/packages/g6/src/stdlib/item/node/plane.ts b/packages/g6/src/stdlib/item/node/plane.ts
@@ -0,0 +1,105 @@
+import { DisplayObject } from '@antv/g';
+import { NodeDisplayModel } from '../../../types';
+import { State } from '../../../types/item';
+import {
+  NodeModelData,
+  NodeShapeMap,
+  NodeShapeStyles,
+} from '../../../types/node';
+import { BaseNode3D } from './base3d';
+
+export class PlaneNode extends BaseNode3D {
+  override defaultStyles = {
+    keyShape: {
+      width: 100,
+      depth: 100,
+      materialType: 'basic',
+      materialProps: {
+        wireframe: false,
+        wireframeColor: 'black',
+        cullMode: 0,
+      },
+      x: 0,
+      y: 0,
+      z: 0,
+    },
+  };
+  mergedStyles: NodeShapeStyles;
+  constructor(props) {
+    super(props);
+  }
+  public draw(
+    model: NodeDisplayModel,
+    shapeMap: NodeShapeMap,
+    diffData?: { previous: NodeModelData; current: NodeModelData },
+    diffState?: { previous: State[]; current: State[] },
+  ): NodeShapeMap {
+    const { data = {} } = model;
+
+    let shapes: NodeShapeMap = { keyShape: undefined };
+
+    // keyShape
+    shapes.keyShape = this.drawKeyShape(model, shapeMap, diffData);
+
+    // haloShape
+    if (data.haloShape && this.drawHaloShape) {
+      shapes.haloShape = this.drawHaloShape(model, shapeMap, diffData);
+    }
+
+    // labelShape
+    if (data.labelShape) {
+      shapes.labelShape = this.drawLabelShape(model, shapeMap, diffData);
+    }
+
+    // labelBackgroundShape
+    if (data.labelBackgroundShape) {
+      shapes.labelBackgroundShape = this.drawLabelBackgroundShape(
+        model,
+        shapeMap,
+        diffData,
+      );
+    }
+
+    // iconShape
+    if (data.iconShape) {
+      shapes.iconShape = this.drawIconShape(model, shapeMap, diffData);
+    }
+
+    // badgeShape
+    if (data.badgeShapes) {
+      const badgeShapes = this.drawBadgeShapes(
+        model,
+        shapeMap,
+        diffData,
+        diffState,
+      );
+      shapes = {
+        ...shapes,
+        ...badgeShapes,
+      };
+    }
+
+    // otherShapes
+    if (data.otherShapes && this.drawOtherShapes) {
+      shapes = {
+        ...shapes,
+        ...this.drawOtherShapes(model, shapeMap, diffData),
+      };
+    }
+    return shapes;
+  }
+
+  public drawKeyShape(
+    model: NodeDisplayModel,
+    shapeMap: NodeShapeMap,
+    diffData?: { previous: NodeModelData; current: NodeModelData },
+    diffState?: { previous: State[]; current: State[] },
+  ): DisplayObject {
+    return this.upsertShape(
+      'plane',
+      'keyShape',
+      this.mergedStyles.keyShape,
+      shapeMap,
+    );
+  }
+}
diff --git a/packages/g6/src/util/shape3d.ts b/packages/g6/src/util/shape3d.ts
@@ -33,7 +33,7 @@ export const createShape3D = (
   }
 
   // materialType: 'lambert' | 'phong' | 'basic', TODO: type
-  const { materialType = 'lambert', ...otherStyles } = style as any;
+  const { materialType = 'lambert', materialProps = {}, ...otherStyles } = style as any;
   if (!device.GeometryCache) {
     device.GeometryCache = {};
   }
@@ -59,21 +59,23 @@ export const createShape3D = (
       case 'basic':
         device.MaterialCache[materialType as string] = new MeshBasicMaterial(
           device,
+          materialProps
         );
         break;
       case 'phong': {
-        const materialProps = {
-          shininess: 30,
-        };
         device.MaterialCache[materialType as string] = new MeshPhongMaterial(
           device,
-          materialProps,
+            {
+              shininess: 30,
+              ...materialProps
+            }
         );
       }
       case 'lambert':
       default: {
         device.MaterialCache[materialType as string] = new MeshLambertMaterial(
           device,
+          materialProps
         );
         break;
       }
@@ -104,7 +106,7 @@ export const createShape3D = (
       ]);
       break;
     case 'plane':
-      shape.scale([style.width / GEOMETRY_SIZE, style.depth / GEOMETRY_SIZE]);
+      shape.scale(style.width / GEOMETRY_SIZE, 1, style.depth / GEOMETRY_SIZE);
       break;
     case 'sphere':
     default: {

diff --git a/packages/site/docs/apis/shape/PlaneGeometryProps.en.md b/packages/site/docs/apis/shape/PlaneGeometryProps.en.md
@@ -11,30 +11,72 @@ Plane geometry, default lying on the XZ plane
 
 **Type**: `number`
 
-**Default**: `0`
+**Default**: `100`
 
 width
 
 ## depth
 
 **Type**: `number`
 
-**Default**: `0`
+**Default**: `100`
 
 depth
 
 ## widthSegments
 
 **Type**: `number`
 
-**Default**: `1`
+**Default**: `5`
 
 width segments
 
 ## depthSegments
 
 **Type**: `number`
 
-**Default**: `1`
+**Default**: `5`
 
 depth segments
+
+## materialType
+
+**Type**：`'basic' | 'phong' | 'lambert'`
+
+**Default**：`basic`
+
+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
diff --git a/packages/site/docs/apis/shape/PlaneGeometryProps.zh.md b/packages/site/docs/apis/shape/PlaneGeometryProps.zh.md
@@ -11,30 +11,73 @@ order: 11
 
 **类型**：`number`
 
-**默认值**：`0`
+**默认值**：`100`
 
 宽度
 
 ## depth
 
 **类型**：`number`
 
-**默认值**：`0`
+**默认值**：`100`
 
 深度
 
 ## widthSegments
 
 **类型**：`number`
 
-**默认值**：`1`
+**默认值**：`5`
 
 宽度分段数
 
 ## depthSegments
 
 **类型**：`number`
 
-**默认值**：`1`
+**默认值**：`5`
 
 深度分段数
+
+## materialType
+
+**类型**：`'basic' | 'phong' | 'lambert'`
+
+**默认值**：`basic`
+
+材质类型
+
+## materialProps 材质相关属性
+
+### wireframe
+
+**类型**：`boolean`
+
+**默认值**：`false`
+
+是否绘制 wireframe，常用于直观展示三角面
+
+### wireframeColor
+
+**类型**：`string`
+
+**默认值**：`black`
+
+开启 wireframe 后可指定颜色，默认为 'black'
+
+### wireframeLineWidth
+
+**类型**：`number`
+
+**默认值**：`1`
+
+开启 wireframe 后可指定线宽，默认为 1
+
+### cullMode
+
+**类型**：`number`
+
+**默认值**：`0`
+
+开启 面剔除，默认为 0，即不剔除，1 为正面剔除，2 为背面剔除, 3 为正背面剔除
+