From a2d22cdf32d44d3cd815809671f1b20ebfd80e23 Mon Sep 17 00:00:00 2001 From: pomelo-nwu <czynwu@outlook.com> Date: Sun, 8 Oct 2023 22:09:44 +0800 Subject: [PATCH] feat: update graphin --- packages/graphin/.umirc.ts | 2 +- .../graphin/demo/components/useGraphin.tsx | 5 +- packages/graphin/src/Graphin.tsx | 59 ++++++++++--------- .../src/styling/edge-style-transform.ts | 2 +- .../src/styling/node-style-transform.ts | 5 +- 5 files changed, 39 insertions(+), 34 deletions(-) diff --git a/packages/graphin/.umirc.ts b/packages/graphin/.umirc.ts index b691b56b3..fc256d8ac 100644 --- 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 index 261846587..fb4c120bf 100644 --- 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 index 218b6e595..e80ea5b63 100644 --- 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 index a8bb5f213..9bb39b697 100644 --- 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 index f337b4226..3becc1937 100644 --- 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,