feat:adjust graphin docs

antvis · Feb 2, 2021 · 67b6792 · 67b6792
1 parent 5482bf0
commit 67b6792
Show file tree

Hide file tree

Showing 9 changed files with 33 additions and 34 deletions.
diff --git a/packages/graphin/docs/quick-start/components.md b/packages/graphin/docs/quick-start/components.md
diff --git a/packages/graphin/docs/quick-start/demos/node.tsx b/packages/graphin/docs/quick-start/demos/node.tsx
@@ -4,7 +4,7 @@ import iconLoader from '@antv/graphin-icons';
 import { Row, Col, Card } from 'antd';
 
 const icons = Graphin.registerFontFamily(iconLoader);
-
+const parimaryColor = '#ff6a00';
 const data = {
   nodes: [
     {
@@ -19,9 +19,11 @@ const data = {
           /** 节点的大小 */
           size: 80,
           /** 包围边颜色 */
-          stroke: '#FF6A00',
+          stroke: parimaryColor,
           /** 填充色 */
-          fill: Utils.hexToRgbaToHex('#FF6A00', 0.2),
+          fill: parimaryColor,
+          /** 填充色的透明度 */
+          fillOpacity: 0.2,
           /** 透明度 */
           opacity: 1,
           /** 鼠标样式 */
@@ -51,7 +53,7 @@ const data = {
           /** 图标大小 */
           size: 40,
           /** 字体图标的填充色 */
-          fill: '#FF6A00',
+          fill: parimaryColor,
           /** 字体Family */
           fontFamily: 'graphin',
         },
@@ -66,7 +68,7 @@ const data = {
             // type = image 时生效，表示图片的宽度和高度
             size: [25, 25],
             /** 徽标填充色 */
-            fill: '#FF6A00',
+            fill: parimaryColor,
             /** 徽标描边色 */
             stroke: '',
             /** 徽标内文本的颜色 */
@@ -87,7 +89,7 @@ const data = {
             // type = image 时生效，表示图片的宽度和高度
             size: [25, 25],
             /** 徽标填充色 */
-            fill: Utils.hexToRgbaToHex('#FF6A00', 1),
+            fill: Utils.hexToRgbaToHex(parimaryColor, 1),
             /** 徽标描边色 */
             stroke: '',
             /** 徽标内文本的颜色 */
@@ -103,7 +105,7 @@ const data = {
         // // 节点的光环，在节点交互过程中（hover，selected，disabled，active）等，可以打开光环，默认是隐藏的，也可以自定义
         halo: {
           /** 光晕 */
-          fill: Utils.hexToRgbaToHex('#FF6A00', 0.2),
+          fill: Utils.hexToRgbaToHex(parimaryColor, 0.2),
           /** 透明度 */
           opacity: 1,
           /** 是否展示 */
@@ -157,9 +159,9 @@ export default () => {
           /** 节点的大小 */
           size: 80,
           /** 包围边颜色 */
-          stroke: '#FF6A00',
+          stroke: parimaryColor,
           /** 填充色 */
-          fill: Utils.hexToRgbaToHex('#FF6A00', 0.2),
+          fill: Utils.hexToRgbaToHex(parimaryColor, 0.2),
           /** 透明度 */
           opacity: 1,
           /** 鼠标样式 */
@@ -189,7 +191,7 @@ export default () => {
           /** 图标大小 */
           size: 40,
           /** 字体图标的填充色 */
-          fill: '#FF6A00',
+          fill: parimaryColor,
           /** 字体Family */
           fontFamily: 'graphin',
         },
@@ -204,7 +206,7 @@ export default () => {
             // type = image 时生效，表示图片的宽度和高度
             size: [25, 25],
             /** 徽标填充色 */
-            fill: Utils.hexToRgbaToHex('#FF6A00', 1),
+            fill: Utils.hexToRgbaToHex(parimaryColor, 1),
             /** 徽标描边色 */
             stroke: '',
             /** 徽标内文本的颜色 */
@@ -225,7 +227,7 @@ export default () => {
             // type = image 时生效，表示图片的宽度和高度
             size: [25, 25],
             /** 徽标填充色 */
-            fill: Utils.hexToRgbaToHex('#FF6A00', 1),
+            fill: Utils.hexToRgbaToHex(parimaryColor, 1),
             /** 徽标描边色 */
             stroke: '',
             /** 徽标内文本的颜色 */
@@ -241,7 +243,7 @@ export default () => {
         // 节点的光环，在节点交互过程中（hover，selected，disabled，active）等，可以打开光环，默认是隐藏的，也可以自定义
         halo: {
           /** 光晕 */
-          fill: Utils.hexToRgbaToHex('#FF6A00', 0.2),
+          fill: Utils.hexToRgbaToHex(parimaryColor, 0.2),
           /** 透明度 */
           opacity: 1,
           /** 是否展示 */

diff --git a/packages/graphin/docs/quick-start/demos/style.tsx b/packages/graphin/docs/quick-start/demos/style.tsx
@@ -1,8 +1,7 @@
 import React from 'react';
-import Graphin, { Behaviors, Utils } from '@antv/graphin';
+import Graphin, { Behaviors, GraphinData } from '@antv/graphin';
 import { Row, Col, Card } from 'antd';
 import iconLoader from '@antv/graphin-icons';
-import { GraphinData } from '../../../dist/typings/type';
 
 const icons = Graphin.registerFontFamily(iconLoader);
 const Color = {
@@ -70,7 +69,9 @@ data.nodes.forEach(node => {
     keyshape: {
       size: count ? (count / 10) * 2 : 30,
       stroke: Color[type],
-      fill: Utils.hexToRgbaToHex(Color[type], 0.2),
+      fill: Color[type],
+      fillOpacity: 0.2,
+      strokeOpacity: 1,
     },
     icon: {
       type: 'font',

diff --git a/packages/graphin/docs/quick-start/index.md b/packages/graphin/docs/quick-start/index.md
@@ -2,7 +2,7 @@
 title: 快速开始
 order: 0
 group:
-  path: /a/quick-start
+  path: /quick-start
   title: 快速开始
   order: 0
 nav:

diff --git a/packages/graphin/docs/render/data/Network.tsx b/packages/graphin/docs/render/data/Network.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react';
 import Graphin, { Utils, Behaviors, GraphinContext } from '@antv/graphin';
 
-const { FitView } = Behaviors;
+const { FitView, DragCanvas } = Behaviors;
 
 const data = Utils.mock(10).circle().graphin();
 const layout = {
@@ -19,14 +19,17 @@ const FocusItem = () => {
 };
 
 console.log('network', data);
-
+const shouldBegin = () => {
+  return true;
+};
 export default () => {
   return (
     <div>
       <Graphin data={data} layout={layout}>
         <FitView />
         {/* <ZoomCanvas disabled /> */}
         <FocusItem />
+        <DragCanvas shouldBegin={shouldBegin} />
       </Graphin>
     </div>
   );

diff --git a/packages/graphin/docs/render/element/edge.md b/packages/graphin/docs/render/element/edge.md
@@ -1,5 +1,5 @@
 ---
-title: 边 Edge
+title: 边的样式
 group:
   path: /render
 nav:

diff --git a/packages/graphin/docs/render/element/node.md b/packages/graphin/docs/render/element/node.md
@@ -1,5 +1,5 @@
 ---
-title: 节点 Node
+title: 节点样式
 group:
   path: /render
 nav:

diff --git a/packages/graphin/docs/render/update/index.md b/packages/graphin/docs/render/update/index.md
@@ -1,5 +1,5 @@
 ---
-title: 更新元素
+title: 更新样式
 group:
   path: /render
 nav:

diff --git a/packages/graphin/src/theme/index.ts b/packages/graphin/src/theme/index.ts
@@ -19,22 +19,27 @@ export interface ThemeType {
   mode: 'light' | 'dark';
   /**
    * @description 画布背景色
+   * @default #fff
    */
   background: string;
   /**
    * @description 节点大小
+   * @default 26
    */
   nodeSize: number;
   /**
    * @description 节点主要颜色
+   * @default #269a99
    */
   primaryColor: string;
   /**
    * @description 边的大小
+   * @default 1
    */
   edgeSize: number;
   /**
    * @description 边的主要颜色
+   * @default #ddd
    */
   primaryEdgeColor: string;
 }