feat(graphin):remove update method in compiler

antvis · Nov 17, 2019 · ec7bac6 · ec7bac6
1 parent b0a23b8
commit ec7bac6
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 25 deletions.
diff --git a/packages/graphin-site/site/pages/index.zh.tsx b/packages/graphin-site/site/pages/index.zh.tsx
@@ -64,7 +64,7 @@ const IndexPage = () => {
     const bannerButtons = [
         {
             text: t('继续了解'),
-            link: `/${i18n.language}/examples/tree/compactBox`,
+            link: `/${i18n.language}/docs/manual/introduction`,
             type: 'primary',
         },
         {

diff --git a/packages/graphin-studio/src/Core/Styling/NodeColorPicker.tsx b/packages/graphin-studio/src/Core/Styling/NodeColorPicker.tsx
@@ -51,19 +51,34 @@ const NodeColorPicker: React.FC<StylingProps> = props => {
         storage.set('bizTypes', newBizTypes);
         const matchBizType = newBizTypes.find(item => item.type === type);
 
-        /** 调用G6的API实现刷新 */
-        const { graph } = props;
-        const graphNodes = graph.get('nodes') as GraphNode[];
-
-        graphNodes.forEach(node => {
-            const nodeType = node.get('model').data.type;
-            if (type === nodeType) {
-                /**  只更新需要更新的节点类型 */
-                graph.update(node, {
-                    style: matchBizType.style,
-                });
-            }
+        const { graph, dispatch } = props;
+        const preData = graph.save();
+        const newNodes = preData.nodes.map(node => {
+            return {
+                ...node,
+                style: node.data.type === type ? matchBizType.style : node.style,
+            };
         });
+        const newData = {
+            nodes: newNodes,
+            edges: preData.edges,
+        };
+        dispatch({
+            type: 'graph/changeData',
+            payload: newData,
+        });
+
+        /** 调用G6的API实现刷新 */
+        // const graphNodes = graph.get('nodes') as GraphNode[];
+        // graphNodes.forEach(node => {
+        //     const nodeType = node.get('model').data.type;
+        //     if (type === nodeType) {
+        //         /**  只更新需要更新的节点类型 */
+        //         graph.update(node, {
+        //             style: matchBizType.style,
+        //         });
+        //     }
+        // });
         /** end */
     };
 

diff --git a/packages/graphin-studio/src/Graph.tsx b/packages/graphin-studio/src/Graph.tsx
@@ -27,7 +27,6 @@ const Graphene = (props: GraphProps) => {
         // 将graph实例传给全局
     }, []);
     // eslint-disable-next-line no-console
-    console.log('graphin-studio..render...', props);
 
     return (
         <Graphin data={data} layout={layout} ref={graphRef} extend={extend}>

diff --git a/packages/graphin/src/shape/render/compiler.ts b/packages/graphin/src/shape/render/compiler.ts
@@ -24,6 +24,7 @@ const compiler = (extendNodeShape: ExendNodeShape) => {
         /** 自定义Shape */
         draw(inputCfg: any, group: any) {
             /** 得到用户返回的shapeComponents，然后拼装 */
+
             const { shapeComponents, state: RenderState, update } = renderNodeShape(inputCfg);
             /** 每次draw后的shape就是初始化shape，这个在节点update后，用于setstate的reset */
             initShapeComponentMap[inputCfg.data.id] = shapeComponents;
@@ -40,17 +41,6 @@ const compiler = (extendNodeShape: ExendNodeShape) => {
             });
             return g6Shapes[keyshapeIndex];
         },
-        /**
-         * TODO UNSATE！compiler.update method
-         * 用户调用graph.updateItem的时候会触发update方法，对于数据驱动的graphin,不建议使用，未来会移除这个方法
-         */
-        update(cfg: any, node: any) {
-            const { id } = node.get('model').data;
-            const initUpdate = initUpdateMap[id];
-            if (initUpdate) {
-                initUpdate(cfg, node);
-            }
-        },
         /** 设置各种交互状态 */
         setState(name: any, value: any, node: any) {
             const { id } = node.get('model').data;