refactor: adjust type definition (#5545)

* refactor: adjust type definition * fix: fix graphlib type define
antvis · Mar 15, 2024 · 87621a4 · 87621a4
1 parent 5dcbb5e
commit 87621a4
Show file tree

Hide file tree

Showing 88 changed files with 432 additions and 485 deletions.
diff --git a/packages/g6/__tests__/demo/animation/animation-breathe.ts b/packages/g6/__tests__/demo/animation/animation-breathe.ts
@@ -8,14 +8,14 @@ import type { AnimationTestCase } from '../types';
 type ShapeStyleProps = BaseShapeStyleProps & { size: number; color: string; outline: number; outlineOpacity: number };
 
 class Shape extends BaseShape<ShapeStyleProps> {
-  private getKeyStyle({ size, color }: any = this.attributes) {
+  private getKeyStyle({ size, color } = this.attributes) {
     return {
       r: size / 2,
       fill: color,
     };
   }
 
-  private getHaloStyle({ size, color, outline, outlineOpacity }: any = this.attributes) {
+  private getHaloStyle({ size, color, outline, outlineOpacity } = this.attributes) {
     return {
       r: size / 2,
       fill: 'transparent',

diff --git a/packages/g6/__tests__/demo/animation/animation-fade-in.ts b/packages/g6/__tests__/demo/animation/animation-fade-in.ts
@@ -8,14 +8,14 @@ import type { AnimationTestCase } from '../types';
 type ShapeStyleProps = BaseShapeStyleProps & { size: number; color: string };
 
 class Shape extends BaseShape<ShapeStyleProps> {
-  private getKeyStyle({ size, color }: any = this.attributes) {
+  private getKeyStyle({ size, color } = this.attributes) {
     return {
       r: size / 2,
       fill: color,
     };
   }
 
-  private getHaloStyle({ size, color }: any = this.attributes) {
+  private getHaloStyle({ size, color } = this.attributes) {
     return {
       r: size / 2 + 2,
       fill: 'transparent',

diff --git a/packages/g6/__tests__/demo/animation/animation-translate.ts b/packages/g6/__tests__/demo/animation/animation-translate.ts
@@ -8,14 +8,14 @@ import type { AnimationTestCase } from '../types';
 type ShapeStyleProps = BaseShapeStyleProps & { size: number; color: string };
 
 class Shape extends BaseShape<ShapeStyleProps> {
-  private getKeyStyle({ size, color }: any = this.attributes) {
+  private getKeyStyle({ size, color } = this.attributes) {
     return {
       r: size / 2,
       fill: color,
     };
   }
 
-  private getHaloStyle({ size, color }: any = this.attributes) {
+  private getHaloStyle({ size, color } = this.attributes) {
     return {
       r: size / 2 + 2,
       fill: 'transparent',

diff --git a/packages/g6/__tests__/demo/animation/animation-wave.ts b/packages/g6/__tests__/demo/animation/animation-wave.ts
@@ -8,23 +8,23 @@ import type { AnimationTestCase } from '../types';
 type ShapeStyleProps = BaseShapeStyleProps & { size: number; color: string };
 
 class Shape extends BaseShape<ShapeStyleProps> {
-  private getInnerStyle({ size, color, opacity }: any = this.attributes) {
+  private getInnerStyle({ size, color, opacity } = this.attributes) {
     return {
       r: size / 2,
       fill: color,
       opacity,
     };
   }
 
-  private getMiddleStyle({ size, color, opacity }: any = this.attributes) {
+  private getMiddleStyle({ size, color, opacity } = this.attributes) {
     return {
       r: size / 2,
       fill: color,
       opacity,
     };
   }
 
-  private getOuterStyle({ size, color, opacity }: any = this.attributes) {
+  private getOuterStyle({ size, color, opacity } = this.attributes) {
     return {
       r: size / 2,
       fill: color,

diff --git a/packages/g6/__tests__/demo/animation/animation-zoom-in.ts b/packages/g6/__tests__/demo/animation/animation-zoom-in.ts
@@ -8,14 +8,14 @@ import type { AnimationTestCase } from '../types';
 type ShapeStyleProps = BaseShapeStyleProps & { size: number; color: string; outline: number; outlineOpacity: number };
 
 class Shape extends BaseShape<ShapeStyleProps> {
-  private getKeyStyle({ size, color }: any = this.attributes) {
+  private getKeyStyle({ size, color } = this.attributes) {
     return {
       r: size / 2,
       fill: color,
     };
   }
 
-  private getHaloStyle({ size, color, outline, outlineOpacity }: any = this.attributes) {
+  private getHaloStyle({ size, color, outline, outlineOpacity } = this.attributes) {
     return {
       r: size / 2,
       fill: 'transparent',

diff --git a/packages/g6/__tests__/demo/case/combo.ts b/packages/g6/__tests__/demo/case/combo.ts
@@ -31,12 +31,12 @@ export const combo: STDTestCase = async (context) => {
     data,
     node: {
       style: {
-        labelText: (d: any) => d.id,
+        labelText: (d) => d.id,
       },
     },
     combo: {
       style: {
-        labelText: (d: any) => d.id,
+        labelText: (d) => d.id,
         lineDash: 0,
         collapsedLineDash: [5, 5],
       },
@@ -60,14 +60,13 @@ export const combo: STDTestCase = async (context) => {
   const COLLAPSED_MARKER_TYPE = ['child-count', 'descendant-count', 'node-count', 'custom'];
 
   combo.form = (panel) => {
-    const config = {
+    const config: Record<string, any> = {
       combo2Type: 'circle',
       collapsedOrigin: 'top',
       collapsedMarker: true,
       collapsedMarkerType: 'child-count',
       collapseCombo1: () => {
-        graph.updateComboData((data) => [
-          ...data,
+        graph.updateComboData([
           {
             id: 'combo-1',
             style: {
@@ -76,16 +75,15 @@ export const combo: STDTestCase = async (context) => {
               collapsedMarker: config.collapsedMarker,
               collapsedMarkerType:
                 config.collapsedMarkerType === 'custom'
-                  ? (children: any) => children.length.toString() + 'nodes'
+                  ? (children) => children.length.toString() + 'nodes'
                   : config.collapsedMarkerType,
             },
           },
         ]);
         graph.render();
       },
       expandCombo1: () => {
-        graph.updateComboData((data) => [
-          ...data,
+        graph.updateComboData([
           {
             id: 'combo-1',
             style: {
@@ -108,16 +106,15 @@ export const combo: STDTestCase = async (context) => {
               collapsedMarker: config.collapsedMarker,
               collapsedMarkerType:
                 config.collapsedMarkerType === 'custom'
-                  ? (children: any) => children.length.toString() + 'nodes'
+                  ? (children) => children.length.toString() + 'nodes'
                   : config.collapsedMarkerType,
             },
           },
         ]);
         graph.render();
       },
       expandCombo2: () => {
-        graph.updateComboData((data) => [
-          ...data,
+        graph.updateComboData([
           {
             id: 'combo-2',
             style: {
@@ -151,21 +148,12 @@ export const combo: STDTestCase = async (context) => {
       panel.add(config, 'combo2Type', COMBO_TYPE).onChange((type: string) => {
         config.combo2Type = type;
         const combo2Data = graph.getComboData('combo-2');
-        graph.updateComboData((data) => [
-          ...data,
-          { ...combo2Data, style: { ...combo2Data.style, type: config.combo2Type } },
-        ]);
+        graph.updateComboData([{ ...combo2Data, style: { ...combo2Data.style, type: config.combo2Type } }]);
         graph.render();
       }),
-      panel.add(config, 'collapsedOrigin', COLLAPSED_ORIGIN).onChange((collapsedOrigin: string) => {
-        config.collapsedOrigin = collapsedOrigin;
-      }),
-      panel.add(config, 'collapsedMarker').onChange((collapsedMarker: boolean) => {
-        config.collapsedMarker = collapsedMarker;
-      }),
-      panel.add(config, 'collapsedMarkerType', COLLAPSED_MARKER_TYPE).onChange((collapsedMarkerType: string) => {
-        config.collapsedMarkerType = collapsedMarkerType;
-      }),
+      panel.add(config, 'collapsedOrigin', COLLAPSED_ORIGIN),
+      panel.add(config, 'collapsedMarker'),
+      panel.add(config, 'collapsedMarkerType', COLLAPSED_MARKER_TYPE),
       panel.add(config, 'collapseCombo1'),
       panel.add(config, 'expandCombo1'),
       panel.add(config, 'collapseCombo2'),

diff --git a/packages/g6/__tests__/demo/case/common-graph.ts b/packages/g6/__tests__/demo/case/common-graph.ts
@@ -8,7 +8,7 @@ export const commonGraph: STDTestCase = async (context) => {
     data,
     node: {
       style: {
-        fill: (d: any) => (d.id === '33' ? '#d4414c' : '#2f363d'),
+        fill: (d) => (d.id === '33' ? '#d4414c' : '#2f363d'),
       },
     },
     layout: { type: 'd3force' },

diff --git a/packages/g6/__tests__/demo/case/element-port.ts b/packages/g6/__tests__/demo/case/element-port.ts
@@ -1,4 +1,5 @@
 import { Graph } from '@/src';
+import { idOf } from '@/src/utils/id';
 import type { STDTestCase } from '../types';
 
 export const elementPort: STDTestCase = async (context) => {
@@ -25,10 +26,10 @@ export const elementPort: STDTestCase = async (context) => {
     },
     node: {
       style: {
-        type: (d: any) => (d.id === 'node-1' ? 'circle' : 'rect'),
-        size: (d: any) => (d.id === 'node-1' ? 30 : [50, 150]),
+        type: (d) => (d.id === 'node-1' ? 'circle' : 'rect'),
+        size: (d) => (d.id === 'node-1' ? 30 : [50, 150]),
         port: true,
-        ports: (d: any) =>
+        ports: (d) =>
           d.id === 'node-2'
             ? [
                 { key: 'port-1', placement: [0, 0.15] },
@@ -41,7 +42,7 @@ export const elementPort: STDTestCase = async (context) => {
     edge: {
       style: {
         endArrow: true,
-        targetPort: (d: any) => `port-${d.id.split('-')[1]}`,
+        targetPort: (d) => `port-${idOf(d).toString().split('-')[1]}`,
       },
     },
   });

diff --git a/packages/g6/__tests__/demo/case/element-visibility.ts b/packages/g6/__tests__/demo/case/element-visibility.ts
@@ -18,8 +18,8 @@ export const elementVisibility: STDTestCase = async (context) => {
       ],
     },
     theme: 'light',
-    node: { style: { size: 20, labelText: (d: any) => d.id.at(-1) } },
-    edge: { style: { endArrow: true, labelText: (d: any) => d.id } },
+    node: { style: { size: 20, labelText: (d) => d.id!.toString().at(-1)! } },
+    edge: { style: { endArrow: true, labelText: (d) => d.id! } },
   });
 
   await graph.render();

diff --git a/packages/g6/__tests__/demo/case/layout-circular-degree.ts b/packages/g6/__tests__/demo/case/layout-circular-degree.ts
@@ -9,7 +9,7 @@ export const layoutCircularDegree: STDTestCase = async (context) => {
     data,
     node: {
       style: {
-        labelText: (d: { id: string }) => d.id,
+        labelText: (d) => d.id,
       },
     },
     edge: {

diff --git a/packages/g6/__tests__/demo/case/layout-circular-division.ts b/packages/g6/__tests__/demo/case/layout-circular-division.ts
@@ -9,7 +9,7 @@ export const layoutCircularDivision: STDTestCase = async (context) => {
     data,
     node: {
       style: {
-        labelText: (d: { id: string }) => d.id,
+        labelText: (d) => d.id,
       },
     },
     edge: {

diff --git a/packages/g6/__tests__/demo/case/layout-circular-spiral.ts b/packages/g6/__tests__/demo/case/layout-circular-spiral.ts
@@ -9,7 +9,7 @@ export const layoutCircularSpiral: STDTestCase = async (context) => {
     data,
     node: {
       style: {
-        labelText: (d: { id: string }) => d.id,
+        labelText: (d) => d.id,
       },
     },
     edge: {

diff --git a/packages/g6/__tests__/demo/case/layout-combo-combined.ts b/packages/g6/__tests__/demo/case/layout-combo-combined.ts
@@ -2,14 +2,6 @@ import { Graph } from '@/src';
 import data from '@@/dataset/combo.json';
 import type { STDTestCase } from '../types';
 
-type Item = {
-  id: string;
-  data: {
-    size?: number;
-    color?: string;
-  };
-};
-
 export const layoutComboCombined: STDTestCase = async (context) => {
   const graph = new Graph({
     ...context,
@@ -21,13 +13,12 @@ export const layoutComboCombined: STDTestCase = async (context) => {
     node: {
       style: {
         size: 20,
-        labelText: (d: Item) => d.id,
+        labelText: (d) => d.id,
       },
     },
     edge: {
-      // @ts-expect-error
-      style: (model: Item) => {
-        const { size, color } = model.data;
+      style: (model) => {
+        const { size, color } = model.data as { size: number; color: string };
         return { stroke: color || '#99ADD1', lineWidth: size || 1 };
       },
     },

diff --git a/packages/g6/__tests__/demo/case/layout-dagre-flow-combo.ts b/packages/g6/__tests__/demo/case/layout-dagre-flow-combo.ts
@@ -2,13 +2,6 @@ import { Graph } from '@/src';
 import data from '@@/dataset/dagre-combo.json';
 import type { STDTestCase } from '../types';
 
-type Item = {
-  id: string;
-  style: {
-    parentId: string;
-  };
-};
-
 export const layoutDagreFlowCombo: STDTestCase = async (context) => {
   const graph = new Graph({
     ...context,
@@ -19,11 +12,11 @@ export const layoutDagreFlowCombo: STDTestCase = async (context) => {
         type: 'rect',
         size: [60, 30],
         radius: 8,
-        labelText: (d: Item) => d.id,
+        labelText: (d) => d.id,
         labelPlacement: 'center',
       },
       palette: {
-        field: (d: any) => d.style?.parentId,
+        field: (d) => d.style?.parentId,
       },
     },
     edge: {
@@ -36,7 +29,7 @@ export const layoutDagreFlowCombo: STDTestCase = async (context) => {
       style: {
         type: 'rect',
         radius: 8,
-        labelText: (d: Item) => d.id,
+        labelText: (d) => d.id,
         lineDash: 0,
         collapsedLineDash: [5, 5],
       },

diff --git a/packages/g6/__tests__/demo/case/layout-dagre-flow.ts b/packages/g6/__tests__/demo/case/layout-dagre-flow.ts
@@ -13,7 +13,7 @@ export const layoutDagreFlow: STDTestCase = async (context) => {
         size: [60, 30],
         radius: 8,
         labelPlacement: 'center',
-        labelText: (d: { id: string }) => d.id,
+        labelText: (d) => d.id,
       },
     },
     edge: {

diff --git a/packages/g6/__tests__/demo/case/layout-force.ts b/packages/g6/__tests__/demo/case/layout-force.ts
@@ -14,7 +14,7 @@ export const layoutForce: STDTestCase = async (context) => {
     },
     node: {
       style: {
-        labelText: (d: any) => d.id,
+        labelText: (d) => d.id,
         labelMaxWidth: '300%',
       },
       palette: {

diff --git a/packages/g6/__tests__/demo/case/layout-fruchterman-basic.ts b/packages/g6/__tests__/demo/case/layout-fruchterman-basic.ts
@@ -9,7 +9,7 @@ export const layoutFruchtermanBasic: STDTestCase = async (context) => {
     node: {
       style: {
         labelPlacement: 'center',
-        labelText: (d: any) => d.id,
+        labelText: (d) => d.id,
       },
     },
     layout: {

diff --git a/packages/g6/__tests__/demo/case/layout-fruchterman-cluster.ts b/packages/g6/__tests__/demo/case/layout-fruchterman-cluster.ts
@@ -9,7 +9,7 @@ export const layoutFruchtermanCluster: STDTestCase = async (context) => {
     node: {
       style: {
         labelPlacement: 'center',
-        labelText: (d: any) => d.id,
+        labelText: (d) => d.id,
       },
       palette: {
         field: 'cluster',

diff --git a/packages/g6/__tests__/demo/case/layout-grid.ts b/packages/g6/__tests__/demo/case/layout-grid.ts
@@ -8,7 +8,7 @@ export const layoutGrid: STDTestCase = async (context) => {
     data,
     node: {
       style: {
-        labelText: (d: any) => d.id,
+        labelText: (d) => d.id,
       },
     },
     layout: {

diff --git a/packages/g6/__tests__/demo/case/layout-mds.ts b/packages/g6/__tests__/demo/case/layout-mds.ts
@@ -10,7 +10,7 @@ export const layoutMDS: STDTestCase = async (context) => {
     data,
     node: {
       style: {
-        labelText: (d: any) => d.id,
+        labelText: (d) => d.id,
         labelPlacement: 'center',
       },
     },

diff --git a/packages/g6/__tests__/demo/case/layout-radial-basic.ts b/packages/g6/__tests__/demo/case/layout-radial-basic.ts
@@ -8,7 +8,7 @@ export const layoutRadialBasic: STDTestCase = async (context) => {
     data,
     node: {
       style: {
-        labelText: (d: { id: string }) => d.id,
+        labelText: (d) => d.id,
         labelPlacement: 'center',
       },
     },