From 5f9eabf1384de4954683e63c14c5bbdb83bd3bf4 Mon Sep 17 00:00:00 2001
From: pomelo-nwu <czynwu@outlook.com>
Date: Tue, 12 Jan 2021 19:11:40 +0800
Subject: [PATCH] style(graphin):adjust demos

---
 .../docs/render/element/demos/edge.tsx        |  59 +++++++++
 .../render/element/demos/graphin-circle.tsx   | 121 ------------------
 .../{graphin-circle.tsx => demos/index.tsx}   |   2 +-
 .../element/demos/{default.tsx => node.tsx}   |   0
 packages/graphin/docs/render/element/edge.md  |  13 ++
 packages/graphin/docs/render/element/index.md |   4 +-
 packages/graphin/docs/render/element/node.md  |  13 ++
 7 files changed, 88 insertions(+), 124 deletions(-)
 create mode 100644 packages/graphin/docs/render/element/demos/edge.tsx
 delete mode 100644 packages/graphin/docs/render/element/demos/graphin-circle.tsx
 rename packages/graphin/docs/render/element/{graphin-circle.tsx => demos/index.tsx} (98%)
 rename packages/graphin/docs/render/element/demos/{default.tsx => node.tsx} (100%)
 create mode 100644 packages/graphin/docs/render/element/edge.md
 create mode 100644 packages/graphin/docs/render/element/node.md

diff --git a/packages/graphin/docs/render/element/demos/edge.tsx b/packages/graphin/docs/render/element/demos/edge.tsx
new file mode 100644
index 000000000..3a0ca2eaf
--- /dev/null
+++ 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
deleted file mode 100644
index cae93969e..000000000
--- a/packages/graphin/docs/render/element/demos/graphin-circle.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-import React, { useEffect } from 'react';
-import Graphin, { Utils, Behaviors, GraphinContext } from '@antv/graphin';
-import IconLoader from '@antv/graphin-icons';
-
-const iconLoader = Graphin.registerFontFamily(IconLoader);
-const iconValue = iconLoader.home;
-const { ZoomCanvas } = Behaviors;
-
-const defaultIcon = {
-  type: 'font',
-  /** 根据类型，填写对应的值 */
-  value: iconValue,
-  /** 图标大小 */
-  size: 12,
-  /** 图标填充颜色 / 文本填充色 / 图片此属性无效 */
-  fill: 'green',
-  fontFamily: 'graphin',
-};
-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);
-    });
-  }, []);
-
-  return null;
-};
-
-const defaultBadge = [
-  {
-    /** 放置的位置，ef：LT（left top）左上角 */
-    position: 'RT',
-    /** 类型可以为字体图标，可以为网络图片，可以为纯文本 */
-    type: 'font',
-    value: iconValue,
-    // type = image 时表示图片的宽度和高度
-    size: [20, 10],
-    /** 徽标填充色 */
-    fill: 'pink',
-    /** 徽标描边色 */
-    stroke: 'green',
-    /** 徽标内文本的颜色 */
-    color: '#000',
-    fontSize: 12,
-    padding: 2,
-    offset: [0, 0],
-  },
-  {
-    /** 放置的位置，ef：LT（left top）左上角 */
-    position: 'LB',
-    /** 类型可以为字体图标，可以为网络图片，可以为纯文本 */
-    type: 'text',
-    value: '12',
-    // type = image 时表示图片的宽度和高度
-    size: 20,
-    /** 徽标填充色 */
-    fill: 'pink',
-    /** 徽标描边色 */
-    stroke: 'green',
-    /** 徽标内文本的颜色 */
-    color: '#000',
-    fontSize: 12,
-    padding: 0,
-    offset: [0, 0],
-  },
-  {
-    /** 放置的位置，ef：LT（left top）左上角 */
-    position: 'RB',
-    /** 类型可以为字体图标，可以为网络图片，可以为纯文本 */
-    type: 'image',
-    value: 'https://gw.alipayobjects.com/os/s/prod/antv/assets/image/logo-with-text-73b8a.svg',
-    // type = image 时表示图片的宽度和高度
-    size: 10,
-    /** 徽标填充色 */
-    fill: 'pink',
-    /** 徽标描边色 */
-    stroke: 'green',
-    padding: 5,
-    offset: [0, 0],
-  },
-  {
-    /** 放置的位置，ef：LT（left top）左上角 */
-    position: 'LT',
-    /** 类型可以为字体图标，可以为网络图片，可以为纯文本 */
-    type: 'text',
-    value: '999+',
-    // type = image 时表示图片的宽度和高度
-    size: [25, 15],
-    /** 徽标填充色 */
-    fill: 'pink',
-    color: '#000',
-    /** 徽标描边色 */
-    stroke: 'green',
-    padding: 5,
-    offset: [3, 3],
-  },
-];
-
-const data = Utils.mock(10)
-  .circle()
-  .graphinMock(null, defaultIcon as any);
-
-const layout = {
-  type: 'circular',
-};
-
-export default () => {
-  return (
-    <div>
-      <Graphin data={data} layout={layout}>
-        <ZoomCanvas />
-        <EventCenter />
-      </Graphin>
-    </div>
-  );
-};
diff --git a/packages/graphin/docs/render/element/graphin-circle.tsx b/packages/graphin/docs/render/element/demos/index.tsx
similarity index 98%
rename from packages/graphin/docs/render/element/graphin-circle.tsx
rename to packages/graphin/docs/render/element/demos/index.tsx
index 2f5fcff27..a1a088c0c 100644
--- a/packages/graphin/docs/render/element/graphin-circle.tsx
+++ b/packages/graphin/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/packages/graphin/docs/render/element/demos/default.tsx b/packages/graphin/docs/render/element/demos/node.tsx
similarity index 100%
rename from packages/graphin/docs/render/element/demos/default.tsx
rename to packages/graphin/docs/render/element/demos/node.tsx
diff --git a/packages/graphin/docs/render/element/edge.md b/packages/graphin/docs/render/element/edge.md
new file mode 100644
index 000000000..06a9092b5
--- /dev/null
+++ 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
index 14bff9d40..42fa52056 100644
--- 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
new file mode 100644
index 000000000..2ab356192
--- /dev/null
+++ 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'>