节点连线,连线删除,详情页禁止编辑节点

src/views/chartFrame_manage/common/config.js

@@ -0,0 +1,60 @@
+/* ports 样式 */
+const portStyle = {
+    attrs: {
+        circle: {
+            r: 5,
+            magnet: true,
+            stroke: '#333',
+            strokeWidth: 1,
+            fill: '#fff'
+        }
+    }
+    }
+//基础节点
+export const baseNode = {
+    shape:'rect',
+    width: 120,
+    height: 50,
+    attrs:{
+        text:{ //文字换行
+            textWrap: {
+                width: -10,
+                ellipsis: true,
+            }
+        }
+    },
+    ports: {
+        items: [
+            { group: 'port-top', id: 'p_top' },
+            { group: 'port-bottom', id: 'p_bottom' },
+            { group: 'port-left', id: 'p_left' },
+            { group: 'port-right', id: 'p_right' },
+        ],
+        groups: {
+            "port-top": {
+                    position: 'top',
+                    zIndex: 20,
+                    ...portStyle
+            },
+            "port-bottom": {
+                    position: 'bottom',
+                    zIndex: 20,
+                    ...portStyle
+            },
+            "port-left": {
+                    position: 'left',
+                    zIndex: 20,
+                    ...portStyle
+            },
+            "port-right": {
+                    position: 'right',
+                    zIndex: 20,
+                    ...portStyle
+            },
+        }
+    },
+}
+//基础线条
+export const baseEdge = {
+
+}

src/views/chartFrame_manage/common/event.js

@@ -17,4 +17,37 @@ export const myEvents = (graph)=>{
         }
     }) */
 
+    /* 鼠标移入移出控制连接桩 */
+    graph.on('node:mouseenter', ({ node, e }) => {
+        if(window.location.pathname.startsWith('/chartframe')) return 
+        for(let i of document.querySelectorAll(`g[data-cell-id="${node.id}"] .x6-port-body`)) {
+            i.style.display = 'block'
+        }
+    })
+
+    graph.on('node:mouseleave', ({ node, e }) => {
+        if(window.location.pathname.startsWith('/chartframe')) return 
+        for(let i of document.querySelectorAll(`g[data-cell-id="${node.id}"] .x6-port-body`)) {
+            i.style.display = 'none'
+        }
+    })
+
+    /* 鼠标移入移出边 */
+    graph.on('edge:mouseenter', ({ edge }) => {
+        edge.addTools([
+          'source-arrowhead',
+          'target-arrowhead',
+          {
+            name: 'button-remove',
+            args: {
+              distance: -30,
+            },
+          },
+        ])
+      })
+      
+      graph.on('edge:mouseleave', ({ edge }) => {
+        edge.removeTools()
+      })
+
 }

src/views/chartFrame_manage/common/gragh.js

@@ -1,9 +1,25 @@
 import {
-    Graph,
+    Graph,Shape
 } from '@antv/x6';
 import { myEvents } from './event';
+//非编辑页的配置
+const viewConfig = {
+    resizing:false,//不允许节点缩放
+    translating:{
+        restrict:true,//节点移动时无法超出画布
+    },
+    interacting:function (cellView){ //禁止节点移动
+        /* if(cellView.cell.getData().disableMove){
+            return false
+        } */
+        return false
+    },
+    highlighting:{},
+    connecting:{},
+}
 export function myGraph(wrapper) {
-    const graph = new Graph({
+    const otherConfig = window.location.pathname.startsWith('/editframe')?{}:viewConfig
+    const graph = new Graph({...{
         container: document.getElementById(wrapper),
         background: {
             color: '#fff',
@@ -21,10 +37,10 @@ export function myGraph(wrapper) {
             minVisibleHeight: 50,
         },
         //节点是否允许缩放
-        /* resizing: {
+        resizing: {
             enabled: true,
             orthogonal: false,
-        }, */
+        },
         scaling: {
             min: 0.5,
             max: 2
@@ -33,11 +49,72 @@ export function myGraph(wrapper) {
             enabled: true,
             modifiers:['ctrl','meta']
         },
+        highlighting: {
+            //当链接桩可以被链接时，在链接桩外围渲染一个 2px 宽的红色矩形框
+            magnetAvailable: {
+                name: "stroke",
+                args: {
+                    padding: 0.8,
+                    attrs: {
+                            "stroke-width": 2,
+                            stroke: "skyblue",
+                    },
+                },
+            },
+            //连线过程中，自动吸附到链接桩时被使用
+            magnetAdsorbed: {
+                name: "stroke",
+                args: {
+                    padding: 0.8,
+                    attrs: {
+                            "stroke-width": 4,
+                            stroke: "skyblue",
+                    },
+                },
+            },
+        },
+        connecting: {
+            snap: true,
+            highlight: true,
+            allowLoop:false,
+            allowNode:false,
+            connector: {
+                name: 'normal',
+                args: {
+                    padding:1
+                }
+            },
+            connectionPoint: 'anchor',
+            router: "manhattan",
+            /*
+            router: {
+                name: 'er',
+                args: {
+                    direction: 'V',
+                },
+            },
+             */
+            // 定义边样式
+            createEdge() {
+                return new Shape.Edge({
+                    attrs: {
+                        line: {
+                            stroke: '#333',
+                            strokeWidth: 1,
+                            strokeDasharray: "",//虚线间隔
+                            sourceMarker: false,//起始箭头 
+                            targetMarker: 'classic',//终止箭头
+                        },
+                    },
+                    zIndex: 0,
+                })
+            },
+        },//连线
         minimap: {
             enabled: true,
             container: document.getElementById("frameMinimap"),
         }
-    })
-    myEvents(graph);
+    },...otherConfig})
+    myEvents(graph)
     return graph
 }

src/views/chartFrame_manage/components/frameContainer.vue

@@ -19,6 +19,7 @@
 <script>
 import { ElDropdownMenu } from 'element-ui';
 import { myGraph } from '../common/gragh';
+import { baseNode } from '../common/config';
 export default {
     components:{ElDropdownMenu},
     data() {
@@ -47,23 +48,20 @@ export default {
                     tempThis.$emit('showDialog',node.data.myETAId)
                 }
             })
-            const rect = this.graph.addNode({
-                shape:'rect',
-                x: 40,
-                y: 40,
-                width: 120,
-                height: 50,
-                data:{
-                    myETAId:652
-                },
-                label:'test'
-                })
+            //mock
+            this.graph.addNode({
+                ...baseNode,
+                ...{
+                    data:{myETAId:652},
+                    label:'text'
+                }})
             //如果有内容
-            //graph.centerContent()
             this.graph.scrollToContent({ animation: { duration: 600 }})
+            //如果是非编辑页,加载完成画布内容后冻结画布
+            !window.location.pathname.startsWith('/editframe')&&this.graph.freeze()
         },
         editNode(node){
-            //在视口范围内添加一个
+            //获取视口范围
             const position = this.graph.getContentArea()
             const nodes = this.graph.getNodes()
             const currentNode = nodes.find(item=>item.id===node.nodeId)
@@ -71,29 +69,38 @@ export default {
                 currentNode.data.myETAId=node.nodeLink
                 currentNode.label=node.nodeName
             }else{
+                //在视口范围内添加节点
                 this.graph.addNode({
-                    x:100,
-                    y:100,
+                    ...baseNode,
+                    ...{
+                    x:position.x+position.width/2,
+                    y:position.y+position.height/2,
                     width:120,
                     height:50,
                     data:{
                         myETAId:node.nodeLink,//存储节点对应的myETA分类id
                     },
                     label:node.nodeName||''
-                })
+                }})
             }
         },
         handleContext(key){
-            //编辑test
             const select_cell = this.graph.getSelectedCells()
             if(!select_cell.length) return 
-            const {id} = select_cell[0]
-            const node = this.graph.getNodes().find(item=>item.id===id)
-            this.$emit('editNode',{
-                    nodeId:node.id,
-                    nodeName:node.label,
-                    nodeLink:node.data.myETAId
-                })
+
+            if(key==='edit'){
+                const {id} = select_cell[0]
+                const node = this.graph.getNodes().find(item=>item.id===id)
+                this.$emit('editNode',{
+                        nodeId:node.id,
+                        nodeName:node.label,
+                        nodeLink:node.data.myETAId
+                    })
+            }
+            if(key==='del'){
+                this.graph.removeCells(select_cell)
+                this.hideContextMenu()
+            }
             //清除选区
             this.graph.cleanSelection()
         },