docs: add docs of custom data tramsformer and theme; format docs of i…

…tems api (#5169) * docs: add Custom Theme Extension * docs: add custom transform tutorial * docs: format docs of items (nodes, edges, combos) --------- Co-authored-by: yvonneyx <[email protected]>
antvis · Nov 21, 2023 · 15d41fb · 15d41fb
1 parent 3468c0d
commit 15d41fb
Show file tree

Hide file tree

Showing 64 changed files with 2,555 additions and 859 deletions.
diff --git a/packages/site/docs/apis/item/combo/CircleCombo.en.md b/packages/site/docs/apis/item/combo/CircleCombo.en.md
@@ -9,7 +9,11 @@ This article demonstrates the configuration options for Circle Combo. [Circle Co
 
 ## keyShape
 
-- **Type**: `KeyShapeStyle`
+**Type**: `KeyShapeStyle`
+
+<details>
+
+<summary style="color: #873bf4; cursor: pointer">KeyShapeStyle</summary>
 
 ```typescript
 type KeyShapeStyle = StyleProps & {
@@ -20,14 +24,20 @@ type KeyShapeStyle = StyleProps & {
 
 The related circle style can be referred to in [`CircleStyleProps`](../shape/CircleStyleProps.en.md).
 
-- **Default**:
+</details>
+
+**Default**:`object`
+
+<details>
+
+<summary style="color: #873bf4; cursor: pointer">object</summary>
 
 ```json
 {
   "r": 16
 }
 ```
 
-- **Required**: No
+</details>
 
 <embed src="../../../common/ComboShapeStyles.en.md"></embed>
diff --git a/packages/site/docs/apis/item/combo/CircleCombo.zh.md b/packages/site/docs/apis/item/combo/CircleCombo.zh.md
@@ -9,7 +9,11 @@ order: 1
 
 ## keyShape
 
-- **类型**：`KeyShapeStyle`
+**类型**：`KeyShapeStyle`
+
+<details>
+
+<summary style="color: #873bf4; cursor: pointer">KeyShapeStyle</summary>
 
 ```typescript
 type KeyShapeStyle = StyleProps & {
@@ -20,14 +24,22 @@ type KeyShapeStyle = StyleProps & {
 
 其中，相关的图形样式参考 [Circle 图形样式](../shape/CircleStyleProps.zh.md)。
 
-- **默认值**：
+</details>
+
+**默认值**：`object`
+
+<details>
+
+<summary style="color: #873bf4; cursor: pointer">object</summary>
 
 ```json
 {
   "r": 16
 }
 ```
 
-- **是否必须**：否
+</details>
+
+关键图形
 
 <embed src="../../../common/ComboShapeStyles.zh.md"></embed>
diff --git a/packages/site/docs/apis/item/combo/CustomCombo.en.md b/packages/site/docs/apis/item/combo/CustomCombo.en.md
@@ -7,16 +7,16 @@ In G6, if a built-in Combo does not meet a specific need, you can create a custo
 
 Custom Combo can be created by inheriting from built-in Combo such as CircleCombo. See [ComboType](/en/manual/customize/extension-cats#3-combos) for a graphical representation of what can be inherited.
 
-```ts
+```typescript
 import { Graph, Extensions, extend } from '@antv/g6';
 
 /**
  * Create custom edges, inheriting from CircleCombo
  */
 class CustomCombo extends Extensions.CircleCombo {
   /**
- * Override member method to customize the drawing logic.
- */
+   * Override member method to customize the drawing logic.
+   */
 }
 
 /**
@@ -33,15 +33,16 @@ const ExtGraph = extend(Graph, {
  */
 const graph = new ExtGraph({
   /**
- * ... Other configuration items
- */
+   * ... Other configuration items
+   */
   combo: {
-    type: 'custom-combo', /**
- * Specify custom Combo
- */
     /**
- * ... See Combo-specific configuration for additional configuration items
- */
+     * Specify custom Combo
+     */
+    type: 'custom-combo',
+    /**
+     * ... See Combo-specific configuration for additional configuration items
+     */
   },
 });
 ```
@@ -50,9 +51,13 @@ const graph = new ExtGraph({
 
 ### draw
 
-**Type**:
+**Type**: `draw`
+
+<details>
 
-```ts
+<summary style="color: #873bf4; cursor: pointer">draw</summary>
+
+```typescript
 type draw = (
   displayModel: ComboDisplayModel,
   diffData?: { previous: ComboUserModelData; current: ComboUserModelData },
@@ -67,75 +72,111 @@ type draw = (
 };
 ```
 
-**Description**: Draw all shapes associated with a Combo.
+</details>
+
+Draw all shapes associated with a Combo.
 
 ### drawKeyShape
 
-**Type**:
+**Type**: `drawKeyShape`
+
+<details>
 
-```ts
+<summary style="color: #873bf4; cursor: pointer">drawKeyShape</summary>
+
+```typescript
 type drawKeyShape = (model: ComboDisplayModel, shapeMap: CombohapeMap) => DisplayObject;
 ```
 
-**Description**: Draw the key shape
+</details>
+
+Draw the key shape
 
 ### drawLabelShape
 
-**类型**：
+**Type**: `drawLabelShape`
 
-```ts
+<details>
+
+<summary style="color: #873bf4; cursor: pointer">drawLabelShape</summary>
+
+```typescript
 type drawLabelShape = (
   model: ComboDisplayModel | ComboDisplayModel,
   shapeMap: CombohapeMap | CombohapeMap,
 ) => DisplayObject;
 ```
 
-**说明**：Draw the label shape of Combo.
+</details>
+
+Draw the label shape of Combo.
 
 ### drawLabelBackgroundShape
 
-**类型**：
+**Type**: `drawLabelBackgroundShape`
+
+<details>
+
+<summary style="color: #873bf4; cursor: pointer">drawLabelBackgroundShape</summary>
 
-```ts
+```typescript
 type drawLabelBackgroundShape = (
   model: ComboDisplayModel | ComboDisplayModel,
   shapeMap: CombohapeMap | CombohapeMap,
 ) => DisplayObject;
 ```
 
-**说明**：Draw the label background shape of Combo.
+</details>
+
+Draw the label background shape of Combo.
 
 ### drawIconShape
 
-**类型**：
+**Type**: `drawIconShape`
+
+<details>
+
+<summary style="color: #873bf4; cursor: pointer">drawIconShape</summary>
 
-```ts
+```typescript
 type drawIconShape = (
   model: ComboDisplayModel | ComboDisplayModel,
   shapeMap: CombohapeMap | CombohapeMap,
 ) => DisplayObject;
 ```
 
-**说明**：Draw the icon shape of Combo.
+</details>
+
+Draw the icon shape of Combo.
 
 ### drawHaloShape
 
-**类型**：
+**Type**: `drawHaloShape`
+
+<details>
 
-```ts
+<summary style="color: #873bf4; cursor: pointer">drawHaloShape</summary>
+
+```typescript
 type drawHaloShape = (
   model: ComboDisplayModel | ComboDisplayModel,
   shapeMap: CombohapeMap | CombohapeMap,
 ) => DisplayObject;
 ```
 
-**说明**：Draw the halo shape of Combo.
+</details>
+
+Draw the halo shape of Combo.
 
 ### drawAnchorShapes
 
-**类型**：
+**Type**: `drawAnchorShapes`
+
+<details>
 
-```ts
+<summary style="color: #873bf4; cursor: pointer">drawAnchorShapes</summary>
+
+```typescript
 type drawAnchorShapes = (
   model: ComboDisplayModel | ComboDisplayModel,
   shapeMap: CombohapeMap | CombohapeMap,
@@ -144,13 +185,19 @@ type drawAnchorShapes = (
 };
 ```
 
-**说明**：Draw the anchors shape of Combo.
+</details>
+
+Draw the anchors shape of Combo.
 
 ### drawBadgeShapes
 
-**类型**：
+**Type**: `drawBadgeShapes`
 
-```ts
+<details>
+
+<summary style="color: #873bf4; cursor: pointer">drawBadgeShapes</summary>
+
+```typescript
 type drawBadgeShapes = (
   model: ComboDisplayModel | ComboDisplayModel,
   shapeMap: CombohapeMap | CombohapeMap,
@@ -159,54 +206,78 @@ type drawBadgeShapes = (
 };
 ```
 
-**说明**：Draw the badges shape of Combo.
+</details>
+
+Draw the badges shape of Combo.
 
 ### drawOtherShapes
 
-**类型**：
+**Type**: `drawOtherShapes`
+
+<details>
+
+<summary style="color: #873bf4; cursor: pointer">drawOtherShapes</summary>
 
-```ts
+```typescript
 type drawOtherShapes = (
   model: ComboDisplayModel | ComboDisplayModel,
   shapeMap: CombohapeMap | CombohapeMap,
 ) => { [id: string]: DisplayObject };
 ```
 
-**说明**：Draw other shapes(such as preRect,stateIcon) of Combo.
+</details>
+
+Draw other shapes(such as preRect,stateIcon) of Combo.
 
 ### afterDraw
 
-**类型**：
+**Type**: `afterDraw`
+
+<details>
+
+<summary style="color: #873bf4; cursor: pointer">afterDraw</summary>
 
-```ts
+```typescript
 type afterDraw = (
   model: EdgeDisplayModel,
   shapeMap: { [shapeId: string]: DisplayObject },
   shapesChanged?: string[],
 ) => { [otherShapeId: string]: DisplayObject };
 ```
 
-**说明**：Perform additional drawing operations or add custom shapes after drawing Combo.
+</details>
+
+Perform additional drawing operations or add custom shapes after drawing Combo.
 
 ### getMergedStyles
 
-**类型**：
+**Type**: `getMergedStyles`
+
+<details>
 
-```ts
+<summary style="color: #873bf4; cursor: pointer">getMergedStyles</summary>
+
+```typescript
 type getMergedStyles = (model: EdgeDisplayModel) => EdgeDisplayModel;
 ```
 
-**说明**：Merge style.
+</details>
+
+Merge style.
 
 ## Member Methods
 
 Inherited shapes provide the following method calls
 
 ### upsertShape
 
-**Type**:
+**Type**: `upsertShape`
+
+<details>
 
-```ts
+<summary style="color: #873bf4; cursor: pointer">upsertShape</summary>
+
+```typescript
 type upsertShape = (
   type: SHAPE_TYPE | SHAPE_TYPE_3D,
   id: string,
@@ -216,4 +287,6 @@ type upsertShape = (
 ) => DisplayObject;
 ```
 
-**Description**: Create (if not existing in shapeMap) or update a shape based on configuration.
+</details>
+
+Create (if not existing in shapeMap) or update a shape based on configuration.