✨ feat(upgrade): upgrade g6 to 3.3.6 and upgrade ts definitions

packages/graphin-components/package.json

@@ -48,7 +48,7 @@
     "webpack-cli": "^3.3.10"
   },
   "dependencies": {
-    "@antv/g6": "^3.3.5",
+    "@antv/g6": "^3.3.6",
     "@antv/graphin": "^1.0.0-beta.6"
   },
   "publishConfig": {

packages/graphin/package.json

@@ -41,7 +41,8 @@
   "author": "Ant Financial",
   "license": "MIT",
   "dependencies": {
-    "@antv/g6": "^3.3.5",
+    "@antv/g-canvas": "^0.3.28",
+    "@antv/g6": "^3.3.6",
     "deepmerge": "^4.0.0",
     "lodash": "^4.17.15",
     "react": "^16.8.6",

packages/graphin/src/Graphin.tsx

@@ -12,16 +12,7 @@ import apisController from './apis';
 import eventController from './events/index';
 
 /** types  */
-import {
-  GraphinProps,
-  GraphinState,
-  ExtendedGraphOptions,
-  GraphType,
-  ForceSimulation,
-  Data,
-  Layout,
-  ExtendLayout,
-} from './types';
+import { GraphinProps, GraphinState, ExtendedGraphOptions, GraphType, ForceSimulation, Data, Layout } from './types';
 
 /** utils */
 import shallowEqual from './utils/shallowEqual';

packages/graphin/src/apis/__tests__/search.test.ts

@@ -1,7 +1,9 @@
 import { Graph } from '@antv/g6';
 import search from '../search';
 
-const MockGraph = {
+// TODO: define mock graph type
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const MockGraph: any = {
   save: () => {
     return {
       nodes: [

packages/graphin/src/apis/getInfo.ts

@@ -1,8 +1,9 @@
-import { Graph, Node, Edge } from '@antv/g6';
+import { Graph } from '@antv/g6';
+import { INode, IEdge } from '@antv/g6/lib/interface/item';
 
 const getInfo = (graph: Graph) => () => {
-  const nodes = graph.get('nodes') as Node[];
-  const edges = graph.get('edges') as Edge[];
+  const nodes = graph.get('nodes') as INode[];
+  const edges = graph.get('edges') as IEdge[];
   return {
     count: {
       nodes: nodes.length,

packages/graphin/src/apis/highlight.ts

@@ -2,7 +2,7 @@ import { Graph } from '@antv/g6';
 
 const highlight = (graph: Graph) => (nodeIds: string[]) => {
   graph.getNodes().forEach(node => {
-    graph.clearItemStates(node, null);
+    graph.clearItemStates(node);
     if (nodeIds.indexOf(node.get('id')) !== -1) {
       graph.setItemState(node, 'highlight.light', false);
     } else {

packages/graphin/src/apis/search.ts

@@ -1,5 +1,6 @@
 import { Graph } from '@antv/g6';
 import { NodeData, Node, Data } from '../types';
+// import { GraphData } from '@antv/g6/lib/types';
 
 interface Property {
   value?: string;
@@ -10,7 +11,9 @@ const search = (graph: Graph) => (words = '') => {
   const wordsArray = words.trim().split(' ');
 
   // 目前先只支持node 的搜索
-  const { nodes } = graph.save() as Data;
+  // TODO: why graph export TreeData ?
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const { nodes } = (graph.save() as any) as Data;
 
   // 匹配方法
   const matchWord = (node: NodeData, word: string) => {

packages/graphin/src/behaviors/graphin-highlight.ts

@@ -1,5 +1,7 @@
-import { G6Event, G6KeyboardEvent } from '../types';
-import { Node, Edge } from '@antv/g6';
+import { G6Event, G6KeyboardEvent, EdgeData, NodeData } from '../types';
+import { IGraph } from '@antv/g6/lib/interface/graph';
+import { INode, IEdge } from '@antv/g6/lib/interface/item';
+// import { Node, Edge } from '@antv/g6';
 
 export default {
   getDefaultCfg() {
@@ -20,25 +22,26 @@ export default {
   clearStates() {
     // eslint-disable-next-line
     const { graph } = this as any;
-    graph.getNodes().forEach((node: Node) => {
+    graph.getNodes().forEach((node: NodeData) => {
       graph.clearItemStates(node);
     });
-    graph.getEdges().forEach((edge: Edge) => {
+    graph.getEdges().forEach((edge: EdgeData) => {
       graph.clearItemStates(edge);
     });
   },
   onCanvasClick() {
     this.clearStates();
   },
+  // TODO NEED TO redefine "this" type
   onEdgeClick(e: G6Event) {
     // eslint-disable-next-line
-    const { graph } = this as any;
+    const { graph }: { graph: IGraph } = this as any;
     const currentEdge = e.item;
     const sourceNode = currentEdge.get('source');
     const targetNode = currentEdge.get('target');
     this.clearStates();
     currentEdge.toFront();
-    graph.getNodes().forEach((node: Node) => {
+    graph.getNodes().forEach((node: INode) => {
       const id = node.get('id');
       if (id === sourceNode.get('id') || id === targetNode.get('id')) {
         graph.setItemState(sourceNode, 'highlight.source', true);
@@ -52,19 +55,20 @@ export default {
       }
     });
   },
-  process(node: Node) {
+  // TODO NEED TO redefine "this" type
+  process(node: INode) {
     // eslint-disable-next-line
-    const { graph } = this as any;
+    const { graph }: { graph: IGraph } = this as any;
     /** process Edges */
     const allEdges = graph.getEdges();
 
     const relativeEdges = node.getEdges();
-    const relativeEdgesIds = relativeEdges.map((edge: Edge) => edge.get('id'));
-    const unRelativeEdges: Edge[] = [];
+    const relativeEdgesIds = relativeEdges.map((edge: IEdge) => edge.get('id'));
+    const unRelativeEdges: IEdge[] = [];
 
     const relativeNodeSet = new Set([node]);
 
-    allEdges.forEach((edge: Edge) => {
+    allEdges.forEach((edge: IEdge) => {
       const id = edge.get('id');
       const source = edge.get('source');
       const target = edge.get('target');
@@ -81,7 +85,7 @@ export default {
     const relativeNodes = [...relativeNodeSet];
     const relativeNodesIds = relativeNodes.map(item => item.get('id'));
 
-    const unRelativeNodes = allNodes.filter((item: Node) => {
+    const unRelativeNodes = allNodes.filter((item: INode) => {
       return relativeNodesIds.indexOf(item.get('id')) === -1;
     });
     return {
@@ -91,39 +95,41 @@ export default {
       unRelativeNodes,
     };
   },
+  // TODO NEED TO redefine "this" type
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   onClick(e: G6Event) {
-    const { keydown, graph } = this as any; // eslint-disable-line
+    const { keydown, graph }: { keydown: string; graph: IGraph } = this as any; // eslint-disable-line
     const currentNode = e.item;
-    const { relativeEdges, unRelativeEdges, relativeNodes, unRelativeNodes } = this.process(currentNode);
+    const { relativeEdges, unRelativeEdges, relativeNodes, unRelativeNodes } = this.process(currentNode as INode);
     // 单选
     if (!keydown) {
       this.clearStates();
 
-      relativeNodes.forEach((node: Node) => {
+      relativeNodes.forEach((node: INode) => {
         if (currentNode.get('id') === node.get('id')) {
           graph.setItemState(currentNode, 'selected', true);
         } else {
           graph.setItemState(node, 'highlight.dark', false);
           graph.setItemState(node, 'highlight.light', true);
         }
       });
-      unRelativeNodes.forEach((node: Node) => {
+      unRelativeNodes.forEach((node: INode) => {
         graph.setItemState(node, 'highlight.light', false);
         graph.setItemState(node, 'highlight.dark', true);
       });
-      relativeEdges.forEach((edge: Edge) => {
+      relativeEdges.forEach((edge: IEdge) => {
         edge.toFront();
         graph.setItemState(edge, 'highlight.dark', false);
         graph.setItemState(edge, 'highlight.light', true);
       });
-      unRelativeEdges.forEach(edge => {
+      unRelativeEdges.forEach((edge: IEdge) => {
         edge.toBack();
         graph.setItemState(edge, 'highlight.light', false);
         graph.setItemState(edge, 'highlight.dark', true);
       });
     } else {
       //  按住ctrl 多选
-      relativeEdges.forEach((edge: Edge) => {
+      relativeEdges.forEach((edge: IEdge) => {
         graph.setItemState(edge, 'highlight.dark', false);
         graph.setItemState(edge, 'highlight.light', true);
       });

packages/graphin/src/controller/init.ts

@@ -41,7 +41,7 @@ const initGraph = (props: GraphinProps, graphDOM: HTMLDivElement, behaviorsMode:
     // rendering options:
     animate: true,
     animateCfg: {
-      onFrame: null,
+      onFrame: undefined,
       duration: 500,
       easing: 'easeLinear',
     },
@@ -65,7 +65,6 @@ const initGraph = (props: GraphinProps, graphDOM: HTMLDivElement, behaviorsMode:
     autoPaint,
     fitView,
     fitViewPadding,
-    pixelRatio,
     minZoom,
     maxZoom,
     disableZoom, // 禁用画布缩放
@@ -99,14 +98,13 @@ const initGraph = (props: GraphinProps, graphDOM: HTMLDivElement, behaviorsMode:
 
   const instance: GraphType = new G6.Graph({
     container: graphDOM,
-    renderer: 'canvas',
-
+    // TODO >=g6@3.3 does not support svg engine yet,
+    // renderer: 'canvas',
     width,
     height,
     fitView,
     fitViewPadding,
     autoPaint,
-    pixelRatio,
     animate,
     animateCfg,
     minZoom,

packages/graphin/src/controller/register.ts

@@ -31,7 +31,9 @@ const defaultRegister = {
         mode: 'default',
         options: {},
         register: () => {
-          G6.registerBehavior('graphin-highlight', graphinHighlight);
+          // TODO better support for registerBehavior
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          G6.registerBehavior('graphin-highlight', graphinHighlight as any);
         },
       },
     ];

packages/graphin/src/events/change-zoom.ts

@@ -1,14 +1,14 @@
 import { optimizeDrawing } from '../perf/optimizeDrawing';
 import Graphin from '../Graphin';
-import { ExtendedGraph, G6Event } from '../types';
+import { G6Event } from '../types';
 
 interface ExtendedG6Event extends G6Event {
   action: string;
 }
 
 const changeZoom = (graphin: Graphin) => {
   const { graph, state, g6Options } = graphin;
-  const { forceSimulation } = state;
+  // const { forceSimulation } = state;
 
   const {
     isZoomOptimize = () => {
@@ -17,8 +17,6 @@ const changeZoom = (graphin: Graphin) => {
     keyShapeZoom = 0.6,
   } = g6Options!;
 
-  const extendedGraph = graph as ExtendedGraph;
-
   /** 缩放的时候隐藏IMAGE/TEXT */
   let timer: NodeJS.Timeout | null = null;
   graph!.on('viewportchange', (evt: ExtendedG6Event) => {
@@ -28,17 +26,17 @@ const changeZoom = (graphin: Graphin) => {
         try {
           if (graphin.state.forceSimulation) {
             /** 如果存在力导，那么缩放结束且力导未结束前，只展示keyShape */
-            if (graphin.state.forceSimulation.done) optimizeDrawing(extendedGraph, false);
+            if (graphin.state.forceSimulation.done) optimizeDrawing(graph, false);
           }
           /** 只有缩放比率大于keyShapeZoom，才展示所有的，否则只展示keyshape */
           if (graph!.getZoom() > keyShapeZoom) {
-            optimizeDrawing(extendedGraph, false);
+            optimizeDrawing(graph, false);
           }
         } catch (error) {
-          optimizeDrawing(extendedGraph, false);
+          optimizeDrawing(graph, false);
         }
       }, 200);
-      optimizeDrawing(extendedGraph, true);
+      optimizeDrawing(graph, true);
     }
   });
 };

packages/graphin/src/events/window-resize.ts

@@ -1,5 +1,4 @@
 import Graphin from '../Graphin';
-import { ExtendedGraph } from '../types';
 
 const getContainerSize = (el: HTMLDivElement) => {
   const { clientWidth, clientHeight } = el;
@@ -17,7 +16,7 @@ const handleResize = (graphin: Graphin) => {
   const canvas = graph!.get('canvas');
   if (canvas) {
     canvas.changeSize(width, height);
-    (graph as ExtendedGraph).autoPaint();
+    graph.autoPaint();
     graphin.setState({
       width,
       height,

packages/graphin/src/icons/marker.ts

@@ -1,6 +1,6 @@
 import svg2marker from 'svg2marker';
-import G6 from '@antv/g6';
 import DEFAULT_ICONS from './inner';
+import G from '@antv/g-canvas';
 
 export interface IconType {
   name: string;
@@ -24,6 +24,7 @@ export default (customIcons: IconType[]) => {
     }, {});
   const icons = { ...DEFAULT_ICONS, ...CUSTOM_ICONS };
   Object.keys(icons).forEach(key => {
-    G6.G.Marker.Symbols[key] = svg2marker(icons[key].path);
+    // TODO deprecated hack function
+    G.Shape.Marker.Symbols[key as 'circle'] = svg2marker(icons[key].path);
   });
 };

packages/graphin/src/index.ts

@@ -1,20 +1,15 @@
-import G6 from '@antv/g6';
 import Graphin from './Graphin';
 import Utils from './utils';
 import Layout from './layout';
+import { Item } from '@antv/g6/lib/types';
 
 export default Graphin;
 export { Utils, Layout };
 
 export * from './types';
 
-/** export types  */
-export type Graph = G6.Graph;
-export type GraphNode = G6.Node;
-export type GraphEdge = G6.Edge;
-
 export interface GraphEvent extends MouseEvent {
-  item: G6.Node & G6.Edge;
+  item: Item;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   target: any;
 }

packages/graphin/src/layout/basic/concentric.ts

@@ -7,7 +7,7 @@
 
 import { getDegree } from '../utils/graph';
 import { LayoutOptionBase, Node } from '../../types';
-import { Edge } from '../../layout/force/Elements';
+// import { Edge } from '../../layout/force/Elements';
 
 export interface BBox {
   x1: number;

packages/graphin/src/layout/basic/force.ts

@@ -4,7 +4,7 @@ import { optimizeDrawing, optimizeDrawingByNode } from '../../perf/optimizeDrawi
 import randomLayout, { RandomLayoutOptions } from './random';
 import ConcentricLayout from './concentric';
 import TweakLayout from './tweak';
-import { LayoutOptionBase, Data, Node, ForceSimulation, ExtendedGraph, Graph } from '../../types';
+import { LayoutOptionBase, Data, Node, ForceSimulation, Graph } from '../../types';
 
 export interface ForceLayoutOptions extends LayoutOptionBase {
   /** 前置布局 */
@@ -99,7 +99,7 @@ const forceLayout = (options: ForceLayoutOptions): Return => {
     animation: animation !== undefined ? animation : true,
     done: () => {
       if (isOptimization) {
-        optimizeDrawing(graph as ExtendedGraph, false);
+        optimizeDrawing(graph, false);
       }
       done(graph);
     },

packages/graphin/src/layout/basic/tweak.ts

@@ -15,7 +15,9 @@ const tweak = (data: Data, options: ForceLayoutOptions) => {
   const { graph, width, height } = options;
 
   const { nodes: currNodes, edges: currEdges } = data;
-  const { nodes: preNodes } = graph.save();
+  // TODO: Graph Type export TreeData
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const { nodes: preNodes } = graph.save() as any;
 
   /** 将图上之前节点的位置信息存储在positionMap中 */
   const positionMap = new Map();