feat: add update-node demos

antvis · Jan 28, 2021 · a404154 · a404154
1 parent 850199f
commit a404154
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 115 deletions.
diff --git a/packages/graphin/docs/render/index.md b/packages/graphin/docs/render/index.md
diff --git a/packages/graphin/docs/render/update/index.md b/packages/graphin/docs/render/update/index.md
@@ -8,4 +8,6 @@ nav:
   order: 1
 ---
 
+## 节点更新
+
 <code src='./node.tsx'>
diff --git a/packages/graphin/docs/render/update/node.tsx b/packages/graphin/docs/render/update/node.tsx
@@ -1,36 +1,72 @@
 import React from 'react';
-import Graphin, { Utils, Behaviors, GraphinContext } from '@antv/graphin';
+import Graphin, { Utils, GraphinContext } from '@antv/graphin';
 import { ContextMenu } from '@antv/graphin-components';
+import iconLoader from '@antv/graphin-icons';
+
+const icons = Graphin.registerFontFamily(iconLoader);
 
-const { FitView } = Behaviors;
 const { Menu } = ContextMenu;
 
-const data = Utils.mock(5).circle().graphin();
+const data = Utils.mock(4).circle().graphin();
 const layout = {
-  type: 'concentric',
-  minNodeSpacing: 50,
+  type: 'graphin-force',
+  preset: {
+    type: 'random',
+  },
 };
 
 const UpdateNode = () => {
   const { graph } = React.useContext(GraphinContext);
   const handleChange = (option, item) => {
     console.log(option, item);
     // 方法一：直接更新，不持久化到数据中
-    graph.updateItem(item.id, {
-      style: {
-        // @ts-ignore
-        label: {
-          value: 'rename',
+    if (item.id === 'node-0') {
+      graph.updateItem(item.id, {
+        style: {
+          // @ts-ignore
+          label: {
+            value: 'node-0: update keyshape size,fill,stroke',
+          },
+          keyshape: {
+            size: 80,
+            stroke: '#ff9f0f',
+            fill: '#ff9f0ea6',
+          },
+        },
+      });
+    }
+    if (item.id === 'node-1') {
+      graph.updateItem(item.id, {
+        style: {
+          // @ts-ignore
+          label: {
+            value: 'update label offset/ color',
+            offset: [100, 0],
+            position: 'right',
+            fill: 'red',
+          },
         },
-        keyshape: {
-          size: 80,
+      });
+    }
+    if (item.id === 'node-2') {
+      graph.updateItem(item.id, {
+        style: {
+          // @ts-ignore
+          label: {
+            value: 'update icon to home',
+          },
+          icon: {
+            type: 'font',
+            fontFamily: 'graphin',
+            value: icons.home,
+          },
         },
-      },
-    });
+      });
+    }
   };
   return (
     <ContextMenu bindType="node">
-      <Menu bindType="node" options={[{ name: 'RENAME' }]} onChange={handleChange} />
+      <Menu bindType="node" options={[{ name: 'update' }]} onChange={handleChange} />
     </ContextMenu>
   );
 };
@@ -39,7 +75,6 @@ export default () => {
   return (
     <div>
       <Graphin data={data} layout={layout}>
-        <FitView />
         <UpdateNode />
       </Graphin>
     </div>