feat: supprot grid service

example/index.jsx

@@ -24,6 +24,16 @@ const config = {
     },
   },
 
+  // 网格布局
+  gridMode: {
+    theme: {
+      shapeType: 'circle',     // 展示的类型，支持line & circle
+      gap: 20,                 // 网格间隙
+      circleRadiu: 1.5,        // 圆点半径
+      circleColor: 'rgba(255, 255, 255, 0.08)',    // 圆点颜色
+    }
+  },
+
   // 键盘事件
   allowKeyboard: true,
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-visual-modeling",
-  "version": "1.0.28",
+  "version": "1.0.29",
   "description": "一个基于React的数据可视化建模的DAG图，适用于UML，数据库建模，数据仓库建设等业务",
   "main": "dist/index.js",
   "pack": "pack/index.js",

src/index.tsx

@@ -50,6 +50,17 @@ interface config {
       nodeColor: any
     }
   },
+  gridMode: {
+    isAdsorb: boolean,
+    theme: {
+      shapeType: string,                          // 展示的类型，支持line & circle
+      gap: number,                                // 网格间隙
+      lineWidth: 1,                               // 线段粗细
+      lineColor: string,                          // 线段颜色
+      circleRadiu: number,                        // 圆点半径
+      circleColor: string                         // 圆点颜色
+    }
+  },
   butterfly: any;                                 // 小蝴蝶的画布配置，参考：https://github.com/alibaba/butterfly/blob/dev/v4/docs/zh-CN/canvas.md
 }
 
@@ -143,7 +154,6 @@ export default class TableBuilding extends React.Component<ComProps, any> {
     });
 
     this.canvasData = result;
-    console.log(this.props);
     this.canvas = new Canvas(
       _.merge(
         {},
@@ -191,6 +201,10 @@ export default class TableBuilding extends React.Component<ComProps, any> {
         })
       }
 
+      if (_.get(this, 'props.config.gridMode')) {
+        this.canvas.setGridMode(true, _.assign({}, _.get(this, 'props.config.gridMode', {})))
+      }
+
       this.forceUpdate();
     });