feat: update graphin

antvis · Oct 8, 2023 · a2d22cd · a2d22cd
1 parent fa44760
commit a2d22cd
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 34 deletions.
diff --git a/packages/graphin/.umirc.ts b/packages/graphin/.umirc.ts
@@ -10,7 +10,7 @@ export default {
   scripts: [
     'https://gw.alipayobjects.com/os/lib/react/17.0.2/umd/react.development.js',
     'https://gw.alipayobjects.com/os/lib/react-dom/17.0.2/umd/react-dom.development.js',
-    'https://gw.alipayobjects.com/os/lib/antv/g6/5.0.0-beta.5/dist/g6.min.js',
+    'https://gw.alipayobjects.com/os/lib/antv/g6/5.0.0-beta.11/dist/g6.min.js',
     'https://gw.alipayobjects.com/os/lib/antd/4.24.14/dist/antd.min.js',
   ],
 };
diff --git a/packages/graphin/demo/components/useGraphin.tsx b/packages/graphin/demo/components/useGraphin.tsx
@@ -7,8 +7,9 @@ interface ComponentDemosProps {}
 
 const MyComponent = () => {
   const { graph, isReady } = useGraphin();
-  console.log(graph, isReady);
-  return <div> My Component</div>;
+  const nodeCount = graph.getAllNodesData().length;
+  console.log(graph, isReady, nodeCount);
+  return <div> My Component,NodeCount: {nodeCount}</div>;
 };
 const ComponentDemos: React.FunctionComponent<ComponentDemosProps> = props => {
   return (

diff --git a/packages/graphin/src/Graphin.tsx b/packages/graphin/src/Graphin.tsx
@@ -1,5 +1,5 @@
 import { IGraph, Specification } from '@antv/g6';
-import React, { forwardRef, memo, useEffect, useImperativeHandle, useState } from 'react';
+import React, { forwardRef, memo, useEffect, useRef, useState } from 'react';
 import ExtendGraph from './ExtendGraph';
 import Compatible from './compatible';
 import { edgeStyleTransform } from './styling/edge-style-transform';
@@ -29,15 +29,38 @@ const Graphin: React.FunctionComponent<GraphinProps> = forwardRef((props, ref) =
     ...options
   } = props;
 
+  const dataRef = useRef(data);
+  const layoutRef = useRef(layout);
+  // console.log('dataRef', dataRef, layoutRef);
+
   const [state, setState] = useState<{
     isReady: boolean;
     graph: null | IGraph;
+    data: any;
+    layout: any;
   }>({
     isReady: false,
     graph: null,
+    data,
+    layout,
   });
   const { isReady, graph } = state;
 
+  if (state.data !== data) {
+    console.log('%c GRAPHIN DATA CHANGE....', 'color:rgba(48,86,227,0.8)');
+    console.time('COST_CHANGE_DATA');
+    //@ts-ignore
+    graph && graph.changeData(data, 'replace');
+    console.timeEnd('COST_CHANGE_DATA');
+  }
+  if (state.layout !== layout) {
+    console.log('%c GRAPHIN LAYOUT CHANGE....', 'color:rgba(48,86,227,0.8)');
+    console.time('COST_CHANGE_LAYOUT');
+    //@ts-ignore
+    graph && graph.layout(layout);
+    console.timeEnd('COST_CHANGE_LAYOUT');
+  }
+
   useEffect(() => {
     let {
       width,
@@ -48,7 +71,6 @@ const Graphin: React.FunctionComponent<GraphinProps> = forwardRef((props, ref) =
       modes = { default: ['zoom-canvas', 'drag-canvas', 'drag-node'] },
     } = options;
     const ContainerDOM = document.getElementById(container);
-    console.log('init ...', edge);
 
     const { clientWidth, clientHeight } = ContainerDOM as HTMLDivElement;
     width = Number(width) || clientWidth || 500;
@@ -67,9 +89,15 @@ const Graphin: React.FunctionComponent<GraphinProps> = forwardRef((props, ref) =
       layout,
       transforms: ['transform-graphin-data'],
     });
+    console.log('init ...', instance, ref);
 
     /** @ts-ignore 做兼容性处理 */
     Compatible.graph(instance);
+    //@ts-ignore
+    if (ref && ref.current) {
+      //@ts-ignore
+      ref.current = instance;
+    }
 
     onInit && onInit(instance);
 
@@ -87,33 +115,6 @@ const Graphin: React.FunctionComponent<GraphinProps> = forwardRef((props, ref) =
     };
   }, []);
 
-  useImperativeHandle(
-    ref,
-    () => {
-      return {
-        get graph() {
-          return graph;
-        },
-      };
-    },
-    [isReady],
-  );
-
-  useEffect(() => {
-    if (graph) {
-      console.log('%c GRAPHIN DATA CHANGE....', 'color:rgba(48,86,227,0.8)');
-      //@ts-ignore
-      graph.changeData(data, 'replace');
-    }
-  }, [data]);
-  useEffect(() => {
-    if (graph) {
-      console.log('%c GRAPHIN LAYOUT CHANGE....', 'color:rgba(48,86,227,0.8)');
-      //@ts-ignore
-      graph.layout(layout);
-    }
-  }, [layout]);
-
   const containerStyle: React.CSSProperties = {
     height: '100%',
     width: '100%',

diff --git a/packages/graphin/src/styling/edge-style-transform.ts b/packages/graphin/src/styling/edge-style-transform.ts
@@ -31,7 +31,7 @@ const transGraphinStyle = style => {
 export const edgeStyleTransform = edge => {
   const { style, type, id, data, source, target } = edge;
   const IS_GRAPHIN = (style && type === 'graphin-line') || !type;
-  console.log('edge', edge);
+  // console.log('edge', edge);
   if (IS_GRAPHIN) {
     return {
       source,

diff --git a/packages/graphin/src/styling/node-style-transform.ts b/packages/graphin/src/styling/node-style-transform.ts
@@ -9,6 +9,9 @@ const transGraphinStyle = style => {
     },
     keyShape: {
       r: keyshape.size || 10,
+      fill: keyshape.fill || 'red',
+      stroke: keyshape.stroke || 'red',
+      strokeOpacity: keyshape.strokeOpacity || 1,
     },
     animates: {
       update: [
@@ -32,7 +35,7 @@ const transGraphinStyle = style => {
 export const nodeStyleTransform = node => {
   const { style, type, id, data } = node;
   const IS_GRAPHIN = (style && type === 'graphin-circle') || !type;
-  console.log('node', node);
+  // console.log('node', node);
   if (IS_GRAPHIN) {
     return {
       id,