From c3b375572cf9f82a52f146dabc7acdb5ae2a45cb Mon Sep 17 00:00:00 2001
From: "20932067@zju.edu.cn" <Clay>
Date: Sat, 22 May 2021 22:43:45 +0800
Subject: [PATCH] 11

---
 src/views/Index.vue                    |   2 +-
 src/views/behavior/dice-er-scroll.js   | 133 ++++++++++++------
 src/views/node/dice-er-box.js          |  71 ++++++----
 src/views/theme/dark-style.js          | 177 ++++++++++++++++++++++++
 src/views/theme/default-style.js       | 180 +++++++++++++++++++++++++
 src/views/theme/index.js               |  15 +++
 src/views/theme/office-style.js        | 177 ++++++++++++++++++++++++
 src/views/utils/anchor/er-draw-left.js |  45 +++++++
 src/views/utils/anchor/index.js        |  13 ++
 src/views/utils/anchor/set-state.js    |  29 ++++
 src/views/utils/edge/index.js          |  11 ++
 src/views/utils/edge/set-state.js      |  26 ++++
 src/views/utils/index.js               |  63 +++++++++
 src/views/utils/node/index.js          |  11 ++
 src/views/utils/node/set-state.js      |  30 +++++
 15 files changed, 919 insertions(+), 64 deletions(-)
 create mode 100644 src/views/theme/dark-style.js
 create mode 100644 src/views/theme/default-style.js
 create mode 100644 src/views/theme/index.js
 create mode 100644 src/views/theme/office-style.js
 create mode 100644 src/views/utils/anchor/er-draw-left.js
 create mode 100644 src/views/utils/anchor/index.js
 create mode 100644 src/views/utils/anchor/set-state.js
 create mode 100644 src/views/utils/edge/index.js
 create mode 100644 src/views/utils/edge/set-state.js
 create mode 100644 src/views/utils/index.js
 create mode 100644 src/views/utils/node/index.js
 create mode 100644 src/views/utils/node/set-state.js

diff --git a/src/views/Index.vue b/src/views/Index.vue
index 301b1cc..41169c6 100644
--- a/src/views/Index.vue
+++ b/src/views/Index.vue
@@ -4,7 +4,7 @@
 </template>
 
 <script>
-import {renderMap} from "@/views/create";
+import {renderMap} from "./create/index";
 import G6 from "@antv/g6";
 //注册监听事件,线条,已经节点
 import Behavior from './behavior'
diff --git a/src/views/behavior/dice-er-scroll.js b/src/views/behavior/dice-er-scroll.js
index d36b097..a9646ff 100644
--- a/src/views/behavior/dice-er-scroll.js
+++ b/src/views/behavior/dice-er-scroll.js
@@ -4,6 +4,7 @@
  * @email: clay@hchyun.com
  * @description: node
  */
+// import utils from '../utils'
 const isInBBox = (point, bbox) => {
     const {
         x,
@@ -75,51 +76,105 @@ export default {
 
         },
         click(e) {
-            console.log(789)
-            const {
-                graph
-            } = this;
-            const {
+            try {
+                console.log(e.shape.get("name"))
+                const {
+                    graph
+                } = this;
+                const {
+                    // eslint-disable-next-line no-unused-vars
+                    y
+                } = e;
+                const item = e.item;
+                const shape = e.shape;
+                if (!item) {
+                    return;
+                }
                 // eslint-disable-next-line no-unused-vars
-                y
-            } = e;
-            const item = e.item;
-            const shape = e.shape;
-            if (!item) {
-                return;
-            }
-            // eslint-disable-next-line no-unused-vars
-            const model = item.getModel();
+                const model = item.getModel();
 
-            if (shape.get("name") === "collapse") {
-                graph.updateItem(item, {
-                    collapsed: true,
-                    size: [300, 50],
-                });
-                setTimeout(() => graph.layout(), 100);
-            } else if (shape.get("name") === "expand") {
-                graph.updateItem(item, {
-                    collapsed: false,
-                    size: [300, 500],
-                });
-                setTimeout(() => graph.layout(), 100);
+                if (shape.get("name") === "collapse") {
+                    graph.updateItem(item, {
+                        collapsed: true,
+                        size: [300, 50],
+                    });
+                    setTimeout(() => graph.layout(), 100);
+                } else if (shape.get("name") === "expand") {
+                    graph.updateItem(item, {
+                        collapsed: false,
+                        size: [300, 500],
+                    });
+                    setTimeout(() => graph.layout(), 100);
+                }
+            }catch (ee){
+                console.log(ee)
             }
         },
         moves(e) {
-            const name = e.shape.get("name");
-            console.log(name)
-            const item = e.item;
-            console.log(name)
-
-            if (name && name.startsWith("item")) {
-                this.graph.updateItem(item, {
-                    selectedIndex: Number(name.split("-")[1]),
-                });
-            } else {
-                this.graph.updateItem(item, {
-                    selectedIndex: NaN,
-                });
+            try {
+                // console.log(eventName);
+                // const {
+                //     graph
+                // } = this;
+                const name = e.shape.get("name");
+                const item = e.item;
+                // if (name ==="marker-shape"){
+                //
+                //     utils.anchor.setState("hover",true,e.shape)
+                //     this.graph.updateItem(item,{
+                //         stroke:"#0d1a26",
+                //         style: {
+                //             background: {
+                //                 fill: '#ffffff',
+                //                 stroke: '#000000',
+                //                 padding: [2, 2, 2, 2],
+                //                 radius: 2,
+                //             },
+                //         },
+                //         labelCfg: {
+                //             style: {
+                //                 fill: '#fff',
+                //                 fontSize: 12,
+                //             },
+                //         },
+                //
+                //     })
+                //     console.log(789);
+                // }else if(name ==="markerBg-shape"){
+                //
+                //     console.log(456);
+                //     let steat = this.graph.update(item,{
+                //         stroke:"#0d1a26",
+                //         style: {
+                //             background: {
+                //                 fill: '#ffffff',
+                //                 stroke: '#000000',
+                //                 padding: [2, 2, 2, 2],
+                //                 radius: 2,
+                //             },
+                //         },
+                //         labelCfg: {
+                //             style: {
+                //                 fill: '#fff',
+                //                 fontSize: 12,
+                //             },
+                //         },
+                //     })
+                //     console.log(steat)
+                // }
+                if (name && name.startsWith("item")) {
+                    this.graph.updateItem(item, {
+                        selectedIndex: Number(name.split("-")[1]),
+                    });
+                } else {
+                    this.graph.updateItem(item, {
+                        selectedIndex: NaN,
+                    });
+                }
+            }catch (ee){
+                console.log(ee)
             }
+
         },
     }
 }
diff --git a/src/views/node/dice-er-box.js b/src/views/node/dice-er-box.js
index 7a87e46..c72996f 100644
--- a/src/views/node/dice-er-box.js
+++ b/src/views/node/dice-er-box.js
@@ -4,11 +4,20 @@
  * @email: clay@hchyun.com
  * @description: node
  */
+import utils from '../utils/index'
 
 const itemHeight = 30;
 export default {
     name: 'dice-er-box',
     options: {
+        setState(name, value, item,group) {
+            // 设置节点状态
+            utils.node.setState(name, value, item,group);
+            // 设置锚点状态
+            utils.anchor.setState(name, value, item);
+            // //设置收缩状态
+            // utils.collapse.setState(item)
+        },
         draw(cfg, group) {
             const width = 250;
             const height = 316;
@@ -197,30 +206,44 @@ export default {
                     });
 
                     if (!cfg.hideDot) {
-                        listContainer.addShape("circle", {
-                            attrs: {
-                                x: 0,
-                                y: i * itemHeight + offsetY,
-                                r: 3,
-                                stroke: boxStyle.stroke,
-                                fill: "white",
-                                radius: 2,
-                                lineWidth: 1,
-                                cursor: "pointer",
-                            },
-                        });
-                        listContainer.addShape("circle", {
-                            attrs: {
-                                x: width,
-                                y: i * itemHeight + offsetY,
-                                r: 3,
-                                stroke: boxStyle.stroke,
-                                fill: "white",
-                                radius: 2,
-                                lineWidth: 1,
-                                cursor: "pointer",
-                            },
-                        });
+                        utils.anchor.erDrawLeft(listContainer,label,0,i * itemHeight + offsetY)
+                        utils.anchor.erDrawLeft(listContainer,label,width,i * itemHeight + offsetY)
+
+
+                        // listContainer.addShape("circle", {
+                        //     attrs: {
+                        //         x: 0,
+                        //         y: i * itemHeight + offsetY,
+                        //         r: 3,
+                        //         stroke: boxStyle.stroke,
+                        //         fill: "white",
+                        //         radius: 2,
+                        //         lineWidth: 1,
+                        //         cursor: "pointer",
+                        //     },
+                        //     name: 'markerBg-shape'
+                        // });
+                        // listContainer.addShape("circle", {
+                        //     attrs: {
+                        //         x: width,
+                        //         y: i * itemHeight + offsetY,
+                        //         r: 3,
+                        //         stroke: boxStyle.stroke,
+                        //         fill: "white",
+                        //         radius: 2,
+                        //         lineWidth: 1,
+                        //         cursor: "pointer",
+                        //     },
+                        //     name: 'markerBg-shape'
+                        // });
+
+
+
+
+
+
+
+
                     }
 
                     listContainer.addShape("text", {
diff --git a/src/views/theme/dark-style.js b/src/views/theme/dark-style.js
new file mode 100644
index 0000000..b7c1832
--- /dev/null
+++ b/src/views/theme/dark-style.js
@@ -0,0 +1,177 @@
+/**
+ * @author: clay
+ * @data: 2019/11/20
+ * @description: dark style
+ */
+
+export default {
+  // 节点样式
+  nodeStyle: {
+    default: {
+      stroke: '#CED4D9',
+      fill: 'transparent',
+      shadowOffsetX: 0,
+      shadowOffsetY: 4,
+      shadowBlur: 10,
+      shadowColor: 'rgba(13, 26, 38, 0.08)',
+      lineWidth: 1,
+      radius: 4,
+      strokeOpacity: 0.7
+    },
+    selected: {
+      shadowColor: '#ff240b',
+      shadowBlur: 4,
+      shadowOffsetX: 0,
+      shadowOffsetY: 0
+      // shadowColor: '#626262',
+      // shadowBlur: 8,
+      // shadowOffsetX: -1,
+      // shadowOffsetY: 3
+    },
+    unselected: {
+      shadowColor: ''
+    }
+  },
+  // 节点标签样式
+  nodeLabelCfg: {
+    positions: 'center',
+    style: {
+      fill: '#FFF'
+    }
+  },
+  // 连线样式
+  edgeStyle: {
+    default: {
+      stroke: '#53da3a',
+      lineWidth: 2,
+      strokeOpacity: 0.92,
+      lineAppendWidth: 10
+      // endArrow: true
+    },
+    active: {
+      shadowColor: 'red',
+      shadowBlur: 4,
+      shadowOffsetX: 0,
+      shadowOffsetY: 0
+    },
+    inactive: {
+      shadowColor: ''
+    },
+    selected: {
+      shadowColor: '#ff240b',
+      shadowBlur: 4,
+      shadowOffsetX: 0,
+      shadowOffsetY: 0
+    },
+    unselected: {
+      shadowColor: ''
+    }
+  },
+  // 锚点样式
+  anchorStyle: {
+    default: {
+      radius: 3,
+      symbol: 'circle',
+      fill: '#FFFFFF',
+      fillOpacity: 0,
+      stroke: '#1890FF',
+      strokeOpacity: 0,
+      cursor: 'crosshair'
+    },
+    hover: {
+      fillOpacity: 1,
+      strokeOpacity: 1
+    },
+    unhover: {
+      fillOpacity: 0,
+      strokeOpacity: 0
+    },
+    active: {
+      fillOpacity: 1,
+      strokeOpacity: 1
+    },
+    inactive: {
+      fillOpacity: 0,
+      strokeOpacity: 0
+    }
+  },
+  // 锚点背景样式
+  anchorBgStyle: {
+    default: {
+      radius: 10,
+      symbol: 'circle',
+      fill: '#1890FF',
+      fillOpacity: 0,
+      stroke: '#1890FF',
+      strokeOpacity: 0,
+      cursor: 'crosshair'
+    },
+    hover: {
+      fillOpacity: 1,
+      strokeOpacity: 1
+    },
+    unhover: {
+      fillOpacity: 0,
+      strokeOpacity: 0
+    },
+    active: {
+      fillOpacity: 0.3,
+      strokeOpacity: 0.5
+    },
+    inactive: {
+      fillOpacity: 0,
+      strokeOpacity: 0
+    }
+  },
+
+
+  nodeActivedOutterStyle: { lineWidth: 0 },
+  groupSelectedOutterStyle: { stroke: '#E0F0FF', lineWidth: 2 },
+  nodeSelectedOutterStyle: { stroke: '#E0F0FF', lineWidth: 2 },
+  edgeActivedStyle: { stroke: '#1890FF', strokeOpacity: .92 },
+  nodeActivedStyle: { fill: '#F3F9FF', stroke: '#1890FF' },
+  groupActivedStyle: { stroke: '#1890FF' },
+  edgeSelectedStyle: { lineWidth: 2, strokeOpacity: .92, stroke: '#A3B1BF' },
+  nodeSelectedStyle: { fill: '#F3F9FF', stroke: '#1890FF', fillOpacity: .4 },
+  groupSelectedStyle: { stroke: '#1890FF', fillOpacity: .92 },
+
+  groupBackgroundPadding: [40, 10, 10, 10],
+  groupLabelOffsetX: 10,
+  groupLabelOffsetY: 10,
+  edgeLabelStyle: { fill: '#666', textAlign: 'center', textBaseline: 'middle' },
+  edgeLabelRectPadding: 4,
+  edgeLabelRectStyle: { fill: 'white' },
+  nodeLabelStyle: { fill: '#666', textAlign: 'center', textBaseline: 'middle' },
+  groupStyle: { stroke: '#CED4D9', radius: 4 },
+  groupLabelStyle: { fill: '#666', textAlign: 'left', textBaseline: 'top' },
+  multiSelectRectStyle: { fill: '#1890FF', fillOpacity: .08, stroke: '#1890FF', opacity: .1 },
+  dragNodeHoverToGroupStyle: { stroke: '#1890FF', lineWidth: 2 },
+  dragNodeLeaveFromGroupStyle: { stroke: '#BAE7FF', lineWidth: 2 },
+  anchorPointStyle: { radius: 3.5, fill: '#fff', stroke: '#1890FF', lineAppendWidth: 12 },
+  anchorHotsoptStyle: { radius: 12, fill: '#1890FF', fillOpacity: .25 },
+  anchorHotsoptActivedStyle: { radius: 14 },
+  anchorPointHoverStyle: { radius: 4, fill: '#1890FF', fillOpacity: 1, stroke: '#1890FF' },
+  nodeControlPointStyle: { radius: 4, fill: '#fff', shadowBlur: 4, shadowColor: '#666' },
+  edgeControlPointStyle: { radius: 6, symbol: 'square', lineAppendWidth: 6, fillOpacity: 0, strokeOpacity: 0 },
+  nodeSelectedBoxStyle: { stroke: '#C2C2C2' },
+  cursor: {
+    panningCanvas: '-webkit-grabbing',
+    beforePanCanvas: '-webkit-grab',
+    hoverNode: 'move',
+    hoverEffectiveAnchor: 'crosshair',
+    hoverEdge: 'default',
+    hoverGroup: 'move',
+    hoverUnEffectiveAnchor: 'default',
+    hoverEdgeControllPoint: 'crosshair',
+    multiSelect: 'crosshair'
+  },
+  nodeDelegationStyle: {
+    stroke: '#1890FF',
+    fill: '#1890FF',
+    fillOpacity: .08,
+    lineDash: [4, 4],
+    radius: 4,
+    lineWidth: 1
+  },
+  edgeDelegationStyle: { stroke: '#1890FF', lineDash: [4, 4], lineWidth: 1 }
+}
diff --git a/src/views/theme/default-style.js b/src/views/theme/default-style.js
new file mode 100644
index 0000000..82727ec
--- /dev/null
+++ b/src/views/theme/default-style.js
@@ -0,0 +1,180 @@
+/**
+ * @author: clay
+ * @data: 2019/08/15
+ * @description: default style
+ */
+
+export default {
+  // 节点样式
+  nodeStyle: {
+    default: {
+      stroke: '#CED4D9',
+      fill: 'transparent',
+      // shadowOffsetX: 0,
+      // shadowOffsetY: 4,
+      shadowBlur: 10,
+      shadowColor: 'rgba(13, 26, 38, 0.08)',
+      lineWidth: 1,
+      radius: 4,
+      strokeOpacity: 0.7
+    },
+    selected: {
+      shadowColor: '#ff240b',
+      shadowBlur: 2,
+      // shadowOffsetX: 0,
+      // shadowOffsetY: 0,
+      // fontSize:'50'
+      // shadowColor: '#626262',
+      // shadowBlur: 8,
+      // shadowOffsetX: -1,
+      // shadowOffsetY: 3
+    },
+    unselected: {
+      shadowColor: ''
+    }
+  },
+  // 节点标签样式
+  nodeLabelCfg: {
+    positions: 'center',
+    style: {
+      fill: '#000'
+    }
+  },
+  // 连线样式
+  edgeStyle: {
+    default: {
+      stroke: '#A3B1BF',
+      lineWidth: 2,
+      strokeOpacity: 0.92,
+      lineAppendWidth: 10
+      // endArrow: true
+    },
+    active: {
+      shadowColor: 'red',
+      shadowBlur: 4,
+      shadowOffsetX: 0,
+      shadowOffsetY: 0
+    },
+    inactive: {
+      shadowColor: ''
+    },
+    selected: {
+      shadowColor: '#ff240b',
+      shadowBlur: 4,
+      shadowOffsetX: 0,
+      shadowOffsetY: 0
+    },
+    unselected: {
+      shadowColor: ''
+    }
+  },
+  // 锚点样式
+  anchorStyle: {
+    default: {
+      r: 3,
+      symbol: 'circle',
+      fill: '#FFFFFF',
+      stroke: '#1890FF',
+      fillOpacity: 1,
+      strokeOpacity: 1,
+      cursor: 'crosshair'
+    },
+    hover: {
+
+      stroke: '#1890FF',
+      fillOpacity: 1,
+      strokeOpacity: 1
+    },
+    unhover: {
+      fillOpacity: 0,
+      strokeOpacity: 0
+    },
+    active: {
+      fillOpacity: 1,
+      strokeOpacity: 1
+    },
+    inactive: {
+      fillOpacity: 0,
+      strokeOpacity: 0
+    }
+  },
+  // 锚点背景样式
+  anchorBgStyle: {
+    default: {
+      r: 10,
+      symbol: 'circle',
+      fill: '#1890FF',
+      fillOpacity: 0,
+      stroke: '#1890FF',
+      strokeOpacity: 0,
+      cursor: 'crosshair'
+    },
+    hover: {
+      fillOpacity: 1,
+      strokeOpacity: 1
+    },
+    unhover: {
+      fillOpacity: 0,
+      strokeOpacity: 0
+    },
+    active: {
+      fillOpacity: 0.3,
+      strokeOpacity: 0.5
+    },
+    inactive: {
+      fillOpacity: 0,
+      strokeOpacity: 0
+    }
+  },
+
+
+  nodeActivedOutterStyle: { lineWidth: 0 },
+  groupSelectedOutterStyle: { stroke: '#E0F0FF', lineWidth: 2 },
+  nodeSelectedOutterStyle: { stroke: '#E0F0FF', lineWidth: 2 },
+  edgeActivedStyle: { stroke: '#1890FF', strokeOpacity: .92 },
+  nodeActivedStyle: { fill: '#F3F9FF', stroke: '#1890FF' },
+  groupActivedStyle: { stroke: '#1890FF' },
+  edgeSelectedStyle: { lineWidth: 2, strokeOpacity: .92, stroke: '#A3B1BF' },
+  nodeSelectedStyle: { fill: '#F3F9FF', stroke: '#1890FF', fillOpacity: .4 },
+  groupSelectedStyle: { stroke: '#1890FF', fillOpacity: .92 },
+
+  groupBackgroundPadding: [40, 10, 10, 10],
+  groupLabelOffsetX: 10,
+  groupLabelOffsetY: 10,
+  edgeLabelStyle: { fill: '#666', textAlign: 'center', textBaseline: 'middle' },
+  edgeLabelRectPadding: 4,
+  edgeLabelRectStyle: { fill: 'white' },
+  nodeLabelStyle: { fill: '#666', textAlign: 'center', textBaseline: 'middle' },
+  groupStyle: { stroke: '#CED4D9', radius: 4 },
+  groupLabelStyle: { fill: '#666', textAlign: 'left', textBaseline: 'top' },
+  multiSelectRectStyle: { fill: '#1890FF', fillOpacity: .08, stroke: '#1890FF', opacity: .1 },
+  dragNodeHoverToGroupStyle: { stroke: '#1890FF', lineWidth: 2 },
+  dragNodeLeaveFromGroupStyle: { stroke: '#BAE7FF', lineWidth: 2 },
+  anchorPointStyle: { radius: 3.5, fill: '#fff', stroke: '#1890FF', lineAppendWidth: 12 },
+  anchorHotsoptStyle: { radius: 12, fill: '#1890FF', fillOpacity: .25 },
+  anchorHotsoptActivedStyle: { radius: 14 },
+  anchorPointHoverStyle: { radius: 4, fill: '#1890FF', fillOpacity: 1, stroke: '#1890FF' },
+  nodeControlPointStyle: { radius: 4, fill: '#fff', shadowBlur: 4, shadowColor: '#666' },
+  edgeControlPointStyle: { radius: 6, symbol: 'square', lineAppendWidth: 6, fillOpacity: 0, strokeOpacity: 0 },
+  nodeSelectedBoxStyle: { stroke: '#C2C2C2' },
+  cursor: {
+    panningCanvas: '-webkit-grabbing',
+    beforePanCanvas: '-webkit-grab',
+    hoverNode: 'move',
+    hoverEffectiveAnchor: 'crosshair',
+    hoverEdge: 'default',
+    hoverGroup: 'move',
+    hoverUnEffectiveAnchor: 'default',
+    hoverEdgeControllPoint: 'crosshair',
+    multiSelect: 'crosshair'
+  },
+  nodeDelegationStyle: {
+    stroke: '#1890FF',
+    fill: '#1890FF',
+    fillOpacity: .08,
+    lineDash: [4, 4],
+    radius: 4,
+    lineWidth: 1
+  },
+  edgeDelegationStyle: { stroke: '#1890FF', lineDash: [4, 4], lineWidth: 1 }
+}
diff --git a/src/views/theme/index.js b/src/views/theme/index.js
new file mode 100644
index 0000000..02e514a
--- /dev/null
+++ b/src/views/theme/index.js
@@ -0,0 +1,15 @@
+/**
+ * @author: clay
+ * @data: 2019/08/15
+ * @description: 编辑器主题样式 - 节点、连线的预设样式
+ */
+
+import defaultStyle from './default-style'
+import darkStyle from './dark-style'
+import officeStyle from './office-style'
+
+export default {
+  defaultStyle,
+  darkStyle,
+  officeStyle
+}
diff --git a/src/views/theme/office-style.js b/src/views/theme/office-style.js
new file mode 100644
index 0000000..ebd4d55
--- /dev/null
+++ b/src/views/theme/office-style.js
@@ -0,0 +1,177 @@
+/**
+ * @author: clay
+ * @data: 2019/11/21
+ * @description: office style
+ */
+
+export default {
+  // 节点样式
+  nodeStyle: {
+    default: {
+      stroke: '#CED4D9',
+      fill: '#FFFFFF',
+      shadowOffsetX: 0,
+      shadowOffsetY: 4,
+      shadowBlur: 10,
+      shadowColor: 'rgba(13, 26, 38, 0.08)',
+      lineWidth: 1,
+      radius: 4,
+      strokeOpacity: 0.7
+    },
+    selected: {
+      shadowColor: '#ff240b',
+      shadowBlur: 4,
+      shadowOffsetX: 0,
+      shadowOffsetY: 0
+      // shadowColor: '#626262',
+      // shadowBlur: 8,
+      // shadowOffsetX: -1,
+      // shadowOffsetY: 3
+    },
+    unselected: {
+      shadowColor: ''
+    }
+  },
+  // 节点标签样式
+  nodeLabelCfg: {
+    positions: 'center',
+    style: {
+      fill: '#000'
+    }
+  },
+  // 连线样式
+  edgeStyle: {
+    default: {
+      stroke: '#41c23a',
+      lineWidth: 2,
+      strokeOpacity: 0.92,
+      lineAppendWidth: 10
+      // endArrow: true
+    },
+    active: {
+      shadowColor: 'red',
+      shadowBlur: 4,
+      shadowOffsetX: 0,
+      shadowOffsetY: 0
+    },
+    inactive: {
+      shadowColor: ''
+    },
+    selected: {
+      shadowColor: '#ff240b',
+      shadowBlur: 4,
+      shadowOffsetX: 0,
+      shadowOffsetY: 0
+    },
+    unselected: {
+      shadowColor: ''
+    }
+  },
+  // 锚点样式
+  anchorStyle: {
+    default: {
+      radius: 3,
+      symbol: 'circle',
+      fill: '#FFFFFF',
+      fillOpacity: 0,
+      stroke: '#1890FF',
+      strokeOpacity: 0,
+      cursor: 'crosshair'
+    },
+    hover: {
+      fillOpacity: 1,
+      strokeOpacity: 1
+    },
+    unhover: {
+      fillOpacity: 0,
+      strokeOpacity: 0
+    },
+    active: {
+      fillOpacity: 1,
+      strokeOpacity: 1
+    },
+    inactive: {
+      fillOpacity: 0,
+      strokeOpacity: 0
+    }
+  },
+  // 锚点背景样式
+  anchorBgStyle: {
+    default: {
+      radius: 10,
+      symbol: 'circle',
+      fill: '#1890FF',
+      fillOpacity: 0,
+      stroke: '#1890FF',
+      strokeOpacity: 0,
+      cursor: 'crosshair'
+    },
+    hover: {
+      fillOpacity: 1,
+      strokeOpacity: 1
+    },
+    unhover: {
+      fillOpacity: 0,
+      strokeOpacity: 0
+    },
+    active: {
+      fillOpacity: 0.3,
+      strokeOpacity: 0.5
+    },
+    inactive: {
+      fillOpacity: 0,
+      strokeOpacity: 0
+    }
+  },
+
+
+  nodeActivedOutterStyle: { lineWidth: 0 },
+  groupSelectedOutterStyle: { stroke: '#E0F0FF', lineWidth: 2 },
+  nodeSelectedOutterStyle: { stroke: '#E0F0FF', lineWidth: 2 },
+  edgeActivedStyle: { stroke: '#1890FF', strokeOpacity: .92 },
+  nodeActivedStyle: { fill: '#F3F9FF', stroke: '#1890FF' },
+  groupActivedStyle: { stroke: '#1890FF' },
+  edgeSelectedStyle: { lineWidth: 2, strokeOpacity: .92, stroke: '#A3B1BF' },
+  nodeSelectedStyle: { fill: '#F3F9FF', stroke: '#1890FF', fillOpacity: .4 },
+  groupSelectedStyle: { stroke: '#1890FF', fillOpacity: .92 },
+
+  groupBackgroundPadding: [40, 10, 10, 10],
+  groupLabelOffsetX: 10,
+  groupLabelOffsetY: 10,
+  edgeLabelStyle: { fill: '#666', textAlign: 'center', textBaseline: 'middle' },
+  edgeLabelRectPadding: 4,
+  edgeLabelRectStyle: { fill: 'white' },
+  nodeLabelStyle: { fill: '#666', textAlign: 'center', textBaseline: 'middle' },
+  groupStyle: { stroke: '#CED4D9', radius: 4 },
+  groupLabelStyle: { fill: '#666', textAlign: 'left', textBaseline: 'top' },
+  multiSelectRectStyle: { fill: '#1890FF', fillOpacity: .08, stroke: '#1890FF', opacity: .1 },
+  dragNodeHoverToGroupStyle: { stroke: '#1890FF', lineWidth: 2 },
+  dragNodeLeaveFromGroupStyle: { stroke: '#BAE7FF', lineWidth: 2 },
+  anchorPointStyle: { radius: 3.5, fill: '#fff', stroke: '#1890FF', lineAppendWidth: 12 },
+  anchorHotsoptStyle: { radius: 12, fill: '#1890FF', fillOpacity: .25 },
+  anchorHotsoptActivedStyle: { radius: 14 },
+  anchorPointHoverStyle: { radius: 4, fill: '#1890FF', fillOpacity: 1, stroke: '#1890FF' },
+  nodeControlPointStyle: { radius: 4, fill: '#fff', shadowBlur: 4, shadowColor: '#666' },
+  edgeControlPointStyle: { radius: 6, symbol: 'square', lineAppendWidth: 6, fillOpacity: 0, strokeOpacity: 0 },
+  nodeSelectedBoxStyle: { stroke: '#C2C2C2' },
+  cursor: {
+    panningCanvas: '-webkit-grabbing',
+    beforePanCanvas: '-webkit-grab',
+    hoverNode: 'move',
+    hoverEffectiveAnchor: 'crosshair',
+    hoverEdge: 'default',
+    hoverGroup: 'move',
+    hoverUnEffectiveAnchor: 'default',
+    hoverEdgeControllPoint: 'crosshair',
+    multiSelect: 'crosshair'
+  },
+  nodeDelegationStyle: {
+    stroke: '#1890FF',
+    fill: '#1890FF',
+    fillOpacity: .08,
+    lineDash: [4, 4],
+    radius: 4,
+    lineWidth: 1
+  },
+  edgeDelegationStyle: { stroke: '#1890FF', lineDash: [4, 4], lineWidth: 1 }
+}
diff --git a/src/views/utils/anchor/er-draw-left.js b/src/views/utils/anchor/er-draw-left.js
new file mode 100644
index 0000000..57f5a65
--- /dev/null
+++ b/src/views/utils/anchor/er-draw-left.js
@@ -0,0 +1,45 @@
+import theme from '../../theme'
+
+// const boxStyle = {
+//     stroke: "#096DD9",
+//     radius: 4,
+// };
+export default function (group, label, x, y, i) {
+    const themeStyle = theme.defaultStyle // todo...先使用默认主题，后期可能增加其它风格的主体
+    let anchorBgShape = group.addShape('marker', {
+        id: label + '_anchor_bg_lift_' + i,
+        attrs: {
+            name: 'anchorBg',
+            x: x,
+            y: y,
+            ...themeStyle.anchorStyle.default
+        },
+        draggable: false,
+        name: 'marker-shape'
+    })
+
+    let anchorShape = group.addShape('marker', {
+        id: label + '_anchor_bg_lift_' + i,
+        attrs: {
+            name: 'anchor',
+            x: x,
+            y: y,
+            ...themeStyle.anchorBgStyle.default
+        },
+        draggable: false,
+        name: 'markerBg-shape'
+    })
+
+    anchorShape.on('mouseenter', function () {
+        anchorBgShape.attr({
+            ...themeStyle.anchorBgStyle.active
+        })
+    })
+    anchorShape.on('mouseleave', function () {
+        anchorBgShape.attr({
+            ...themeStyle.anchorBgStyle.inactive
+        })
+    })
+
+
+}
diff --git a/src/views/utils/anchor/index.js b/src/views/utils/anchor/index.js
new file mode 100644
index 0000000..a030998
--- /dev/null
+++ b/src/views/utils/anchor/index.js
@@ -0,0 +1,13 @@
+/**
+ * @author: clay
+ * @data: 2021/5/16 21:08
+ * @email: clay@hchyun.com
+ * @description: node
+ */
+import erDrawLeft from './er-draw-left'
+import setState from './set-state'
+
+export default {
+    erDrawLeft,
+    setState
+}
diff --git a/src/views/utils/anchor/set-state.js b/src/views/utils/anchor/set-state.js
new file mode 100644
index 0000000..8b115ad
--- /dev/null
+++ b/src/views/utils/anchor/set-state.js
@@ -0,0 +1,29 @@
+/**
+ * @author: clay
+ * @data: 2019/08/15
+ * @description: set anchor state
+ */
+
+import theme from '../../theme'
+
+export default function(name, value, item) {
+  const themeStyle = theme.defaultStyle // todo...先使用默认主题，后期可能增加其它风格的主体
+  if (name === 'hover') {
+    item.get();
+    let group = item.getContainer()
+    let children = group.get('children')
+    console.log(children,"children");
+    for (let i = 0, len = children.length; i < len; i++) {
+      let child = children[i]
+      console.log(child)
+      // 处理锚点状态
+      if (child.attrs.name === 'anchor') {
+        if (value) {
+          group.attr(themeStyle.anchorStyle.hover)
+        } else {
+          group.attr(themeStyle.anchorStyle.unhover)
+        }
+      }
+    }
+  }
+}
diff --git a/src/views/utils/edge/index.js b/src/views/utils/edge/index.js
new file mode 100644
index 0000000..8002373
--- /dev/null
+++ b/src/views/utils/edge/index.js
@@ -0,0 +1,11 @@
+/**
+ * @author: clay
+ * @data: 2019/08/15
+ * @description: edge
+ */
+
+import setState from './set-state'
+
+export default {
+  setState
+}
diff --git a/src/views/utils/edge/set-state.js b/src/views/utils/edge/set-state.js
new file mode 100644
index 0000000..9090426
--- /dev/null
+++ b/src/views/utils/edge/set-state.js
@@ -0,0 +1,26 @@
+/**
+ * @author: clay
+ * @data: 2019/08/15
+ * @description: set edge state
+ */
+
+import theme from '../../theme'
+
+export default function(name, value, item) {
+  const group = item.getContainer()
+  const shape = group.get('children')[0] // 顺序根据 draw 时确定
+  const themeStyle = theme.defaultStyle // todo...先使用默认主题，后期可能增加其它风格的主体
+  if (name === 'active') {
+    if (value) {
+      shape.attr(themeStyle.edgeStyle.active)
+    } else {
+      shape.attr(themeStyle.edgeStyle.inactive)
+    }
+  } else if (name === 'selected') {
+    if (value) {
+      shape.attr(themeStyle.edgeStyle.selected)
+    } else {
+      shape.attr(themeStyle.edgeStyle.unselected)
+    }
+  }
+}
diff --git a/src/views/utils/index.js b/src/views/utils/index.js
new file mode 100644
index 0000000..0a0a78a
--- /dev/null
+++ b/src/views/utils/index.js
@@ -0,0 +1,63 @@
+/**
+ * @author: clay
+ * @data: 2021/5/16 21:01
+ * @email: clay@hchyun.com
+ * @description: node
+ * 比较两个对象的内容是否相同（两个对象的键值都相同）
+ * @param obj1
+ * @param obj2
+ * @returns {*}
+ */
+
+// import node from './node'
+import anchor from './anchor'
+import edge from './edge'
+
+const isObjectValueEqual = function(obj1, obj2) {
+    let o1 = obj1 instanceof Object
+    let o2 = obj2 instanceof Object
+    // 不是对象的情况
+    if (!o1 || !o2) {
+        return obj1 === obj2
+    }
+    // 对象的属性（key值）个数不相等
+    if (Object.keys(obj1).length !== Object.keys(obj2).length) {
+        return false
+    }
+    // 判断每个属性（如果属性值也是对象则需要递归）
+    for (let attr in obj1) {
+        let t1 = obj1[attr] instanceof Object
+        let t2 = obj2[attr] instanceof Object
+        if (t1 && t2) {
+            return isObjectValueEqual(obj1[attr], obj2[attr])
+        } else if (obj1[attr] !== obj2[attr]) {
+            return false
+        }
+    }
+    return true
+}
+
+
+/**
+ * 生成uuid算法,碰撞率低于1/2^^122
+ * @returns {string}
+ */
+const generateUUID = function() {
+    let d = new Date().getTime()
+    //  x 是 0-9 或 a-f 范围内的一个32位十六进制数
+    let uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+        let r = (d + Math.random() * 16) % 16 | 0
+        d = Math.floor(d / 16)
+        return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16)
+    })
+    return uuid
+}
+
+export default {
+    anchor,
+    // node,
+    edge,
+    // 通用工具类函数
+    isObjectValueEqual,
+    generateUUID
+}
diff --git a/src/views/utils/node/index.js b/src/views/utils/node/index.js
new file mode 100644
index 0000000..61e5741
--- /dev/null
+++ b/src/views/utils/node/index.js
@@ -0,0 +1,11 @@
+/**
+ * @author: clay
+ * @data: 2019/08/15
+ * @description: node
+ */
+
+import setState from './set-state'
+
+export default {
+  setState
+}
diff --git a/src/views/utils/node/set-state.js b/src/views/utils/node/set-state.js
new file mode 100644
index 0000000..e135236
--- /dev/null
+++ b/src/views/utils/node/set-state.js
@@ -0,0 +1,30 @@
+/**
+ * @author: clay
+ * @data: 2019/08/15
+ * @description: set node state
+ */
+
+import theme from '../../theme'
+
+export default function(name, value, item) {
+  console.log(item)
+  item.get(name);
+  const group = item.getContainer()
+  const shape = group.get('children')[0] // 顺序根据 draw 时确定
+  console.log(shape)
+  const themeStyle = theme.defaultStyle // todo...先使用默认主题，后期可能增加其它风格的主体
+  if (name === 'active') {
+    if (value) {
+      shape.attr(themeStyle.nodeStyle.active)
+    } else {
+      shape.attr(themeStyle.nodeStyle.inactive)
+    }
+  } else if (name === 'selected') {
+    if (value) {
+      group.attr(themeStyle.nodeStyle.selected)
+    } else {
+      group.attr(themeStyle.nodeStyle.default)
+    }
+  }
+
+}