docs(graphin):add some demos

packages/graphin/docs/layout/node-expand/index.md

@@ -19,4 +19,4 @@ nav:
 
 ## gForce
 
-<!-- <code src='./demos/g-force.tsx'> -->
+<code src='./demos/g-force.tsx'>

packages/graphin/docs/quick-start/index.md

@@ -11,7 +11,6 @@ nav:
   order: 0
 ---
 
-渲染方案，包含
+当你需要做一个关系图的时候，也许可以来试试 graphin
 
-- 根据不同的 数据类型，渲染不同的图
-- 根据不同的
+Graphin 提供一个 Mock 函数，帮助我们快速生成一些图数据，让我们试试看吧：

packages/graphin/docs/render/data/Network.tsx

@@ -2,18 +2,21 @@ import React from 'react';
 import Graphin, { Utils, Behaviors } from '@antv/graphin';
 
 const { ZoomCanvas } = Behaviors;
-const data = Utils.mock(10)
+const data = Utils.mock(4)
   .circle()
   .graphin();
 const layout = {
-  type: 'circular',
+  type: 'concentric',
+  minNodeSpacing: 50,
 };
+data;
+console.log('network', data);
 
 export default () => {
   return (
     <div>
       <Graphin data={data} layout={layout}>
-        <ZoomCanvas disabled={true} />
+        <ZoomCanvas disabled />
       </Graphin>
     </div>
   );

packages/graphin/docs/render/data/index.md

@@ -18,7 +18,7 @@ nav:
 
 ### 树图渲染
 
-<code src='./CompactBox.tsx'>
+<!-- <code src='./CompactBox.tsx'> -->
 
 ### 网图渲染
 

packages/graphin/docs/render/element/demos/node.tsx

@@ -6,25 +6,18 @@ const icons = Graphin.registerFontFamily(IconLoader);
 
 const { ZoomCanvas, Hoverable } = 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);
-    });
-  }, []);
-
-  return null;
-};
 const data = Utils.mock(5)
   .circle()
   .graphin();
 
 data.edges = [];
 
+data.nodes[0].style = {
+  keyshape: {
+    size: [20, 20],
+  },
+};
+
 console.log(data);
 
 const layout = {
@@ -37,7 +30,6 @@ export default () => {
       <Graphin data={data} layout={layout}>
         <ZoomCanvas disabled />
         <Hoverable bindType="node" />
-        {/* <EventCenter /> */}
       </Graphin>
     </div>
   );

packages/graphin/docs/render/index.md

@@ -3,15 +3,97 @@ title: 基本介绍
 order: 0
 group:
   path: /render
-  title: 渲染方案
+  title: 元素渲染
   order: 0
 nav:
   title: Graphin
   path: /graphin
   order: 0
 ---
 
-渲染方案，包含
+Graphin 2.x 支持 树图 和 网图 两种关系的渲染，在内部通过 data 的数据类型进行判断执行。Graphin2.x 支持 G6 节点和边的 内置类型和自定义类型。Graphin 内置了`graphin-circle` 和 `graphin-edge` 两种类型，和其他 G6 的自定义类型不同的是，Graphin 内置的点/边类型最大的特点是规范化，解构了节点和边的诸多元素组合，通过一份配置文件来描述组合。
 
-- 根据不同的 数据类型，渲染不同的图
-- 根据不同的
+### 树图渲染
+
+> 根据数据类型不一样，渲染不同的图类型。实现的[Github 源码逻辑](https://github.com/antvis/Graphin/blob/master/packages/graphin/src/Graphin.tsx#L236) 感兴趣的同学可以自行查看
+
+<code src='./data/CompactBox.tsx'>
+
+### 网图渲染
+
+<code src='./data/Network.tsx'>
+
+<!-- <API src='../../src/typings/type.ts' exports='["NodeStyle"]'> -->
+
+### 节点样式
+
+```jsx | pure
+export interface NodeStyle {
+  /** 节点的主要容器 */
+  keyshape: {
+    /** 节点的大小 */
+    size: number | [number] | [number, number],
+    /** 填充色 */
+    fill: string,
+    /** 包围边颜色 */
+    stroke: string,
+    /** 边框的宽度 */
+    lineWidth: number,
+  };
+  /** 节点的文本 */
+  label: NodeStyleLabel;
+  /** 节点的中间位置图标区域 */
+  icon: NodeStyleIcon;
+  /** 节点的徽标 */
+  badges: NodeStyleBadge[];
+  /** 光环 */
+  halo: any;
+}
+
+export type NodeStyleLabel = Partial<{
+  /** label的名称 */
+  value: string,
+  /** 展示位置 */
+  position: 'top' | 'bottom' | 'left' | 'right' | 'center',
+  /** 文本填充色 */
+  fill: string,
+  /** 文本大小 */
+  fontSize: number,
+  /** 文本在各自方向上的偏移量，主要为了便于调整文本位置 */
+  offset: number,
+}>;
+
+export type NodeStyleIcon = Partial<{
+  /** 类型可以为字体图标，可以为网络图片，可以为纯文本 */
+  type: 'font' | 'image' | 'text',
+  /** 根据类型，填写对应的值 */
+  value: string,
+  /** 图标大小 */
+  size: number | number[],
+  /** 图标填充颜色 / 文本填充色 / 图片此属性无效 */
+  fill: string,
+  fontFamily: string,
+}>;
+
+export type NodeStyleBadge = Partial<{
+  /** 放置的位置，ef：LT（left top）左上角 */
+  position: 'LT' | 'RT' | 'RB' | 'LB',
+  /** 类型可以为字体图标，可以为网络图片，可以为纯文本 */
+  type: 'font' | 'image' | 'text',
+  value: number | string,
+  // type = image 时生效，表示图片的宽度和高度
+  size: [number, number] | [number],
+  /** 徽标填充色 */
+  fill: string,
+  /** 徽标描边色 */
+  stroke: string,
+  /** 徽标内文本的颜色 */
+  color: string,
+  fontSize: number,
+  fontFamily: string,
+  // badge 中文本距离四周的偏移量
+  padding: number,
+  // badge 在 x 和 y 方向上的偏移量
+  offset: [number, number],
+}>;
+```

packages/graphin/docs/render/theme/dark.tsx

@@ -1,10 +1,25 @@
 import React from 'react';
 import Graphin, { Utils, Behaviors } from '@antv/graphin';
+import iconLoader from '@antv/graphin-icons';
 
 const { ZoomCanvas } = Behaviors;
 const data = Utils.mock(4)
   .circle()
   .graphin();
+
+const icons = Graphin.registerFontFamily(iconLoader);
+
+data.nodes.forEach(node => {
+  node.style = {
+    ...node.style,
+    icon: {
+      type: 'font',
+      fontFamily: 'graphin',
+      value: icons.user,
+    },
+  };
+});
+
 const layout = {
   type: 'concentric',
 };

packages/graphin/docs/render/theme/index.md

@@ -1,17 +1,17 @@
 ---
-title: 设置主题
+title: 主题设置
 order: 0
 group:
   path: /render
-  title: 设置主题
+  title: 元素渲染
   order: 0
 nav:
   title: Graphin
   path: /graphin
   order: 0
 ---
 
-Graphin 根据《图可视分析设计指引》，内置了 Theme
+Graphin 根据《图可视分析设计指引》，内置了 Theme，Theme
 
 ### Light
 
@@ -21,4 +21,4 @@ Graphin 根据《图可视分析设计指引》，内置了 Theme
 
 <code src='./dark.tsx'>
 
-<API src='../../../src/consts.ts' exports='["getDefaultStyleByTheme"]'>
+<!-- <API src='../../../src/consts.ts' exports='["getDefaultStyleByTheme"]'> -->

packages/graphin/docs/render/theme/light.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import Graphin, { Utils, Behaviors } from '@antv/graphin';
+import iconLoader from '@antv/graphin-icons';
 
 const { ZoomCanvas } = Behaviors;
 const data = Utils.mock(4)
@@ -9,6 +10,19 @@ const layout = {
   type: 'concentric',
 };
 
+const icons = Graphin.registerFontFamily(iconLoader);
+
+data.nodes.forEach(node => {
+  node.style = {
+    ...node.style,
+    icon: {
+      type: 'font',
+      fontFamily: 'graphin',
+      value: icons.user,
+    },
+  };
+});
+
 export default () => {
   return (
     <div>