节点点击,缩放

src/views/chartFrame_manage/common/event.js

@@ -2,11 +2,19 @@
 export const myEvents = (graph)=>{
     //右键节点/边
     graph.on('cell:contextmenu',({cell,e})=>{
-        console.log('context')
+        if(window.location.pathname.startsWith('/chartframe')) return 
         graph.select(cell)
         const dom = $('#context-menu-wrapper')[0];
         dom.style.left = e.clientX-3 + 'px';
         dom.style.top = e.clientY-3 + 'px';
     })
 
+    /* graph.on('node:click',({node,e})=>{
+        if(window.location.pathname.startsWith('/editframe')) return 
+        if(node.data&&node.data.myETAId){
+            graph.showDialog = true
+            console.log('now',graph)
+        }
+    }) */
+
 }

src/views/chartFrame_manage/common/gragh.js

@@ -2,13 +2,17 @@ import {
     Graph,
 } from '@antv/x6';
 import { myEvents } from './event';
-
 export function myGraph(wrapper) {
     const graph = new Graph({
         container: document.getElementById(wrapper),
         background: {
             color: '#fff',
         },
+        selecting:{
+            enabled: true,
+            showNodeSelectionBox: false,
+            multiple: false
+        },
         snapline: true,
         scroller: {
             enabled: true,
@@ -16,14 +20,19 @@ export function myGraph(wrapper) {
             minVisibleWidth: 50,
             minVisibleHeight: 50,
         },
-        resizing: {
+        //节点是否允许缩放
+        /* resizing: {
             enabled: true,
             orthogonal: false,
-        },
+        }, */
         scaling: {
             min: 0.5,
             max: 2
         },
+        mousewheel:{
+            enabled: true,
+            modifiers:['ctrl','meta']
+        },
         minimap: {
             enabled: true,
             container: document.getElementById("frameMinimap"),

src/views/chartFrame_manage/components/frameContainer.vue

@@ -5,7 +5,7 @@
         <!-- 缩略图 -->
         <div class="minimap" id="frameMinimap"></div>
         <!-- 右键菜单 -->
-        <div id="context-menu-wrapper">
+        <div id="context-menu-wrapper" @mouseleave="hideContextMenu">
             <el-dropdown-menu size="medium">
                 <el-dropdown-item v-for="menu in contextMenu" :key="menu.key" @click.native="handleContext(menu.key)">
                     <i :class="menu.icon" v-if="menu.icon"/> 
@@ -39,7 +39,16 @@ export default {
     methods: {
         init(){
             this.graph = new myGraph('frameContainer');
+            const tempThis = this
+            //需要调用vue实例的事件添加在这里
+            this.graph.on('node:click',({node,e})=>{
+                if(window.location.pathname.startsWith('/editframe')) return 
+                if(node.data&&node.data.myETAId){
+                    tempThis.$emit('showDialog',node.data.myETAId)
+                }
+            })
             const rect = this.graph.addNode({
+                shape:'rect',
                 x: 40,
                 y: 40,
                 width: 120,
@@ -85,8 +94,15 @@ export default {
                     nodeName:node.label,
                     nodeLink:node.data.myETAId
                 })
+            //清除选区
+            this.graph.cleanSelection()
         },
         deleteNode(){},
+        hideContextMenu(){
+            const dom = $('#context-menu-wrapper')[0];
+            dom.style.left = '-9999px';
+            dom.style.top = '-9999px';
+        }
     },
     mounted(){
         this.init()

src/views/chartFrame_manage/index.vue

@@ -154,7 +154,10 @@
                                 v-if="frameType==='my'">删除</el-button>
                         </div>
                     </div>
-                    <div class="frame-wrap"></div>
+                    <div class="frame-wrap">
+                        <FrameContainer 
+                            @showDialog="showDialog"/>
+                    </div>
                 </div>
             </template>
         </div>
@@ -185,8 +188,9 @@
 
 <script>
 import draggable from 'vuedraggable';
+import FrameContainer from './components/frameContainer.vue';
 export default {
-    components:{draggable},
+    components:{ draggable, FrameContainer },
     directives: {
         drag(el, bindings) {
             el.onmousedown = function (e) {
@@ -329,6 +333,9 @@ export default {
             this.isRenameDialogShow = false
             this.getPublicList()
             this.getMyList()
+        },
+        showDialog(id){
+            console.log('aaa',id)
         }
     },
     mounted(){