chore:adjust behaviors demos

antvis · Feb 10, 2021 · 6c2aa98 · 6c2aa98
1 parent 7347d5a
commit 6c2aa98
Show file tree

Hide file tree

Showing 9 changed files with 46 additions and 80 deletions.
diff --git a/packages/graphin/docs/behaviros/canvas.md b/packages/graphin/docs/behaviros/canvas.md
@@ -6,7 +6,6 @@ group:
   title: 交互行为
   order: 3
 nav:
-  title: Graphin
   path: /graphin
   order: 1
 ---

diff --git a/packages/graphin/docs/behaviros/demo.tsx b/packages/graphin/docs/behaviros/demo.tsx
@@ -1,22 +1,23 @@
 import React from 'react';
-import Graphin, { Utils, Behaviors } from '@antv/graphin';
+import Graphin, { Utils, Behaviors, GraphinContext } from '@antv/graphin';
 
-const data = Utils.mock(10)
-  .circle()
-  .graphin();
+const data = Utils.mock(100).random().graphin();
 const layout = {
-  type: 'concentric',
+  type: 'graphin-force',
+  preset: {
+    type: 'concentric',
+  },
 };
 
 const { DragCanvas, ZoomCanvas, DragNode, ActivateRelations } = Behaviors;
+
 export default () => {
   return (
     <div>
       <Graphin data={data} layout={layout}>
-        <DragCanvas direction="x" />
         <ZoomCanvas enableOptimize />
         <DragNode />
-        <ActivateRelations />
+        <ActivateRelations trigger="click" />
       </Graphin>
     </div>
   );

diff --git a/packages/graphin/docs/behaviros/demos/custom.tsx b/packages/graphin/docs/behaviros/demos/custom.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import Graphin, { Utils, Behaviors } from '@antv/graphin';
+
+const data = Utils.mock(5).circle().graphin();
+const layout = {
+  type: 'concentric',
+};
+
+const { ZoomCanvas } = Behaviors;
+export default () => {
+  return (
+    <div>
+      <Graphin data={data} layout={layout}>
+        <ZoomCanvas enableOptimize />
+      </Graphin>
+    </div>
+  );
+};
diff --git a/packages/graphin/docs/behaviros/demos/index.tsx b/packages/graphin/docs/behaviros/demos/index.tsx
diff --git a/packages/graphin/docs/behaviros/index.md b/packages/graphin/docs/behaviros/index.md
@@ -6,7 +6,6 @@ group:
   title: 交互行为
   order: 3
 nav:
-  title: Graphin
   path: /graphin
   order: 1
 ---
@@ -21,12 +20,29 @@ Graphin 中的交互行为都是可组合的，例如内置了 DragCavans,ZoomCa
 
 ![](https://gw.alipayobjects.com/mdn/rms_402c1a/afts/img/A*xpoaRpOGme4AAAAAAAAAAAAAARQnAQ)
 
-## 在线示例
+## 内置交互行为
 
-### 通过组件的 Props，修改原先的交互设置
+> Graphin 内置了 9 个交互行为，这些交互行为，我们认为是图分析产品基本的交互需求，因此选择内置
+
+```jsx | pure
+<>
+  {/* 拖拽画布 */}<DragCanvas />
+  {/* 缩放画布 */}<ZoomCanvas />
+  {/* 拖拽节点 */}<DragNode />
+  {/* 点击节点 */}<DragCombo />
+  {/* 点击节点 */}<ClickSelect />
+  {/* 圈选节点 */}<BrushSelect />
+  {/** resize 画布 */}<ResizeCanvas graphDOM={this.graphDOM as HTMLDivElement} />
+  {/** 节点悬停 **/}<Hoverable bindType="node" />
+</>
+```
 
 <code src='./demo.tsx'>
 
+## 可选交互行为
+
+> Graphin 还提供了
+
 ### 通过 disabled 来禁用该交互行为
 
-<code src='../render/data/Network.tsx'>
+<!-- <code src='../render/data/Network.tsx'> -->
diff --git a/packages/graphin/docs/behaviros/node.md b/packages/graphin/docs/behaviros/node.md
@@ -6,7 +6,6 @@ group:
   title: 交互行为
   order: 3
 nav:
-  title: Graphin
   path: /graphin
   order: 1
 ---

diff --git a/packages/graphin/docs/events/index.md b/packages/graphin/docs/events/index.md
diff --git a/packages/graphin/docs/events/select/Select.tsx b/packages/graphin/docs/events/select/Select.tsx
diff --git a/packages/graphin/docs/events/select/index.md b/packages/graphin/docs/events/select/index.md