style(graphin):adjust demos

antvis · Jan 12, 2021 · 5f9eabf · 5f9eabf
1 parent 0893f59
commit 5f9eabf
Show file tree

Hide file tree

Showing 7 changed files with 88 additions and 124 deletions.
diff --git a/packages/graphin/docs/render/element/demos/edge.tsx b/packages/graphin/docs/render/element/demos/edge.tsx
@@ -0,0 +1,59 @@
+import React, { useEffect } from 'react';
+import Graphin, { Utils, Behaviors, GraphinContext } from '@antv/graphin';
+
+const { ZoomCanvas } = Behaviors;
+
+const EventCenter = () => {
+  const { graph } = React.useContext(GraphinContext);
+  useEffect(() => {
+    graph.on('node:mouseenter', evt => {
+      graph.setItemState(evt.item, 'hover', true);
+    });
+
+    graph.on('node:mouseleave', evt => {
+      graph.setItemState(evt.item, 'hover', false);
+    });
+
+    graph.on('edge:mouseenter', evt => {
+      graph.setItemState(evt.item, 'selected', true);
+    });
+
+    graph.on('edge:mouseleave', evt => {
+      graph.setItemState(evt.item, 'selected', false);
+    });
+  }, []);
+
+  return null;
+};
+
+const data = Utils.mock(10)
+  .circle()
+  .graphin();
+const layout = {
+  type: 'circular',
+};
+
+const defaultEdge = {
+  style: {
+    stroke: '#000',
+  },
+  status: {
+    selected: {
+      stroke: 'red',
+      animation: {
+        repeat: true,
+      },
+    },
+  },
+};
+
+export default () => {
+  return (
+    <div>
+      <Graphin data={data} layout={layout} defaultEdge={defaultEdge}>
+        <ZoomCanvas />
+        <EventCenter />
+      </Graphin>
+    </div>
+  );
+};
diff --git a/packages/graphin/docs/render/element/demos/graphin-circle.tsx b/packages/graphin/docs/render/element/demos/graphin-circle.tsx
diff --git a/...in/docs/render/element/graphin-circle.tsx → ...aphin/docs/render/element/demos/index.tsx b/...in/docs/render/element/graphin-circle.tsx → ...aphin/docs/render/element/demos/index.tsx
@@ -134,7 +134,7 @@ export default () => {
   return (
     <div>
       <Graphin data={data} layout={layout} defaultEdge={defaultEdge}>
-        <ZoomCanvas disabled={true} />
+        <ZoomCanvas />
         <EventCenter />
       </Graphin>
     </div>

diff --git a/...hin/docs/render/element/demos/default.tsx → ...raphin/docs/render/element/demos/node.tsx b/...hin/docs/render/element/demos/default.tsx → ...raphin/docs/render/element/demos/node.tsx
diff --git a/packages/graphin/docs/render/element/edge.md b/packages/graphin/docs/render/element/edge.md
@@ -0,0 +1,13 @@
+---
+title: 内置边
+group:
+  path: /render
+nav:
+  title: Graphin
+  path: /graphin
+  order: 1
+---
+
+## 基本介绍
+
+<code src='./demos/edge.tsx'>
diff --git a/packages/graphin/docs/render/element/index.md b/packages/graphin/docs/render/element/index.md
@@ -18,8 +18,8 @@ nav:
 
 ### Graphin Circle
 
-<code src='./demos/default.tsx'>
+<!-- <code src='./demos/default.tsx'> -->
 
 ### Graphin Circle
 
-<!-- <code src='./demos/graphin-circle.tsx'> -->
+<code src='./demos/index.tsx'>
diff --git a/packages/graphin/docs/render/element/node.md b/packages/graphin/docs/render/element/node.md
@@ -0,0 +1,13 @@
+---
+title: 节点元素
+group:
+  path: /render
+nav:
+  title: Graphin
+  path: /graphin
+  order: 1
+---
+
+## 基本介绍
+
+<code src='./demos/node.tsx'>