新增预览画布交互；优化工具项控制逻辑。

skyyouare · Sep 27, 2019 · 9bface6 · 9bface6
1 parent a2e81c0
commit 9bface6
Show file tree

Hide file tree

Showing 5 changed files with 183 additions and 59 deletions.
diff --git a/src/components/Editor/Index.vue b/src/components/Editor/Index.vue
@@ -109,13 +109,28 @@
               'click-select',
               {
                 type: 'node-control',
-                updateEdge: true,
-                enableNodeLabel: true,
-                enableEdgeLabel: true
+                config: {
+                  // 是否在拖拽节点时更新所有与之相连的边
+                  updateEdge: true,
+                  // 是否支持在节点上添加文本
+                  nodeLabel: true,
+                  // 是否支持在边上添加文本
+                  edgeLabel: true,
+                  // tooltip 是否启用
+                  tooltip: {
+                    shapeControl: true,
+                    dragNode: true,
+                    dragEdge: true
+                  }
+                }
               }
             ],
             // 只读，
-            preview: ['drag-canvas', 'zoom-canvas']
+            preview: [
+              'zoom-canvas',
+              'drag-canvas',
+              'preview-canvas'
+            ]
           },
           // 节点样式
           nodeStyle: {
@@ -354,17 +369,16 @@
       },
       doSetMode (name) {
         let _t = this
-        console.log('mode', name)
         _t.mode = name
         _t.editor.setMode(name)
         // 更新toolList
         let toolList
         toolList = _t.toolList.map(item => {
-          if (item.hasOwnProperty('mode') && Array.isArray(item.mode)) {
-            item.disabled = !item.mode.includes(name)
-            if (['edit', 'preview'].includes(item.name)) {
-              item.enable = item.mode.includes(name)
-            }
+          if (item.hasOwnProperty('enableMode') && Array.isArray(item.enableMode)) {
+            item.enable = item.enableMode.includes(name)
+          }
+          if (item.hasOwnProperty('disabledMode') && Array.isArray(item.disabledMode)) {
+            item.disabled = !item.disabledMode.includes(name)
           }
           return item
         })

diff --git a/src/global/g6/behavior/index.js b/src/global/g6/behavior/index.js
@@ -4,21 +4,14 @@
  * 注册交互
  */
 
-// 单独画线交互
-// import drawLine from './drawLine'
-// 单独拖拽节点到编辑器交互
-// import dragNodeToEditor from './dragNodeToEditor'
-// 单独图形控制交互
-// import shapeControl from './shapeControl'
-
 // 综合节点控制交互
 import nodeControl from './nodeControl'
+// 预览画布交互
+import previewCanvas from './previewCanvas'
 
 const obj = {
-  // drawLine,
-  // dragNodeToEditor,
-  // shapeControl,
-  nodeControl
+  nodeControl,
+  previewCanvas
 }
 
 export default function (G6) {

diff --git a/src/global/g6/behavior/nodeControl.js b/src/global/g6/behavior/nodeControl.js
@@ -23,7 +23,8 @@ export default {
           // tooltip 是否启用
           tooltip: {
             shapeControl: true,
-            dragNode: true
+            dragNode: true,
+            dragEdge: false
           }
         }
       }
@@ -226,6 +227,12 @@ export default {
           startArrow: _t.graph.$X.startArrow || false,
           endArrow: _t.graph.$X.endArrow || false
         })
+        if (_t.config.tooltip.dragEdge) {
+          _t.toolTip.create.call(_t, {
+            left: event.canvasX,
+            top: event.canvasY + 10
+          }, `X: ${event.x.toFixed(2)} Y: ${event.y.toFixed(2)}`)
+        }
         _t.drawLine.isMoving = true
       },
       move (event) {
@@ -237,6 +244,12 @@ export default {
               y: event.y
             }
           })
+          if (_t.config.tooltip.dragEdge) {
+            _t.toolTip.update.call(_t, {
+              left: event.canvasX,
+              top: event.canvasY + 10
+            }, `X: ${event.x.toFixed(2)} Y: ${event.y.toFixed(2)}`)
+          }
         }
       },
       stop (event) {
@@ -268,6 +281,9 @@ export default {
             })
           }
         }
+        if (_t.config.tooltip.dragEdge) {
+          _t.toolTip.destroy.call(_t)
+        }
         _t.drawLine.currentLine = null
         _t.drawLine.isMoving = false
         _t.info = null

diff --git a/src/global/g6/behavior/previewCanvas.js b/src/global/g6/behavior/previewCanvas.js
@@ -0,0 +1,53 @@
+/**
+ * Created by OXOYO on 2019/9/27.
+ *
+ * 预览画布交互
+ */
+
+export default {
+  name: 'preview-canvas',
+  options: {
+    getDefaultCfg () {
+      return {
+        config: {}
+      }
+    },
+    getEvents () {
+      return {
+        'node:contextmenu': 'onNodeContextmenu',
+        'canvas:contextmenu': 'onCanvasContextmenu',
+        'edge:contextmenu': 'onEdgeContextmenu'
+      }
+    },
+    onNodeContextmenu (event) {
+      let _t = this
+      _t.graph.emit('editor:contextmenu', {
+        type: 'node',
+        x: event.clientX,
+        y: event.clientY,
+        canvasX: event.canvasX,
+        canvasY: event.canvasY
+      })
+    },
+    onCanvasContextmenu (event) {
+      let _t = this
+      _t.graph.emit('editor:contextmenu', {
+        type: 'canvas',
+        x: event.clientX,
+        y: event.clientY,
+        canvasX: event.canvasX,
+        canvasY: event.canvasY
+      })
+    },
+    onEdgeContextmenu (event) {
+      let _t = this
+      _t.graph.emit('editor:contextmenu', {
+        type: 'edge',
+        x: event.clientX,
+        y: event.clientY,
+        canvasX: event.canvasX,
+        canvasY: event.canvasY
+      })
+    }
+  }
+}