工具栏：撤销/恢复，箭头样式；快捷键配置

src/views/chartFrame_manage/common/event.js

@@ -72,4 +72,44 @@ export const myEvents = (graph,tempThis=null)=>{
         tempThis.currentCell = baseNode
     })
 
+    /* 历史记录改变 */
+    graph.history.on('change',()=>{
+        tempThis.canRedo = graph.history.canRedo()
+        tempThis.canUndo = graph.history.canUndo()
+    })
+
+}
+//监听键盘绑定事件
+export const bindKey = (graph,tempThis=null)=>{
+    //delete 删除选中元素
+    graph.bindKey(['delete'],()=>{
+        const selectCells = graph.getSelectedCells()
+        if(selectCells.length){
+            // 移除工具
+            selectCells.forEach(item => item.removeTools());
+            graph.removeCells(selectCells)
+            //重置工具栏
+            tempThis.isSelectEdge = false
+            tempThis.isSelectNode = false
+            tempThis.cleanSelect = true
+            tempThis.currentCell = baseNode
+        }
+    },'keydown')
+    //ctrl+c复制选择元素
+    graph.bindKey('ctrl+c',()=>{
+        const selectCells = graph.getSelectedCells()
+        if(selectCells.length){
+            graph.copy(selectCells)
+        }
+    })
+    //ctrl+v粘贴元素
+    graph.bindKey('ctrl+v', () => {
+        if (!graph.isClipboardEmpty()) {
+            console.log('aaa')
+            const selectCell = graph.paste({ offset: 30 })
+            graph.cleanSelection()
+            graph.select(selectCell)
+        }
+        return false
+    });
 }

src/views/chartFrame_manage/common/graph.js

@@ -1,7 +1,7 @@
 import {
     Graph,Shape
 } from '@antv/x6';
-import { myEvents } from './event';
+import { myEvents,bindKey } from './event';
 //非编辑页的配置
 const viewConfig = {
     resizing:false,//不允许节点缩放
@@ -17,6 +17,8 @@ const viewConfig = {
     highlighting:{},
     connecting:{},
     history:false,//关闭画布撤销/重做能力。
+    keyboard:false,
+    clipboard: false,
 }
 export function myGraph(wrapper,tempThis) {
     const otherConfig = window.location.pathname.startsWith('/editframe')?{}:viewConfig
@@ -26,6 +28,11 @@ export function myGraph(wrapper,tempThis) {
             color: '#fff',
         },
         history:true,
+        keyboard:{
+            enabled:true,
+            global:true
+        },
+        clipboard: true,
         selecting:{
             enabled: true,
             showNodeSelectionBox: false,
@@ -87,7 +94,11 @@ export function myGraph(wrapper,tempThis) {
                 }
             },
             connectionPoint: 'anchor',
-            router: "manhattan",
+            router:{
+                name:'manhattan',
+                args:{
+                }
+            },
             /*
             router: {
                 name: 'er',
@@ -118,5 +129,7 @@ export function myGraph(wrapper,tempThis) {
         }
     },...otherConfig})
     myEvents(graph,tempThis)
+
+    bindKey(graph,tempThis)
     return graph
 }

src/views/chartFrame_manage/components/frameContainer.vue

@@ -2,9 +2,12 @@
     <!-- 沙盘图区域 -->
     <div class="frame-container-wrap">
         <!-- 工具栏 -->
-        <FrameToolBar v-if="$route.path==='/editframe'"
+        <FrameToolBar v-if="$route.path==='/editframe'&&graph"
             :is-select-edge="isSelectEdge"
             :is-select-node="isSelectNode"
+            :canUndo="canUndo"
+            :canRedo="canRedo"
+            :graph="graph"
             :current-cell="currentCell||baseNode"
         ></FrameToolBar>
         <div class="frame-container" id="frameContainer"></div>
@@ -46,6 +49,8 @@ export default {
             isSelectEdge:false,
             isSelectNode:false,
             currentCell:null,
+            canRedo:false,
+            canUndo:false
         };
     },
     watch:{
@@ -86,6 +91,8 @@ export default {
             this.graph.scrollToContent({ animation: { duration: 600 }})
             //如果是非编辑页,加载完成画布内容后冻结画布
             !window.location.pathname.startsWith('/editframe')&&this.graph.freeze()
+            //如果是编辑页，加载完成后清楚历史数据
+            window.location.pathname.startsWith('/editframe')&&this.graph.cleanHistory()
         },
         editNode(node){
             //获取视口范围

src/views/chartFrame_manage/components/frameToolBar.vue

@@ -4,17 +4,19 @@
         <div class="cell-style">
             <!-- 撤销 -->
             <ToolItem tooltip="撤销" toolkey="undo">
-                <span class="tool-item">
+                <el-button type="text" class="tool-item" 
+                    :disabled="!canUndo"
+                    @click="handleGraphHistory('undo')">
                     <i class="el-icon-arrow-left"></i>
-                    <span class="disabled"></span>
-                </span>
+                </el-button>
             </ToolItem>
             <!-- 恢复 -->
             <ToolItem tooltip="恢复" toolkey="undo">
-                <span class="tool-item">
+                <el-button type="text" class="tool-item" 
+                    :disabled="!canRedo"
+                    @click="handleGraphHistory('redo')">
                     <i class="el-icon-arrow-right"></i>
-                    <span class="disabled"></span>
-                </span>
+                </el-button>
             </ToolItem>
             <!-- 字体 暂定-->
             <!-- 字号 -->
@@ -30,7 +32,6 @@
                     </el-dropdown-menu>
                     <span class="disabled" v-if="!isSelectNode"></span>
                 </el-dropdown>
-                
             </ToolItem>
             <!-- 加粗 -->
             <ToolItem tooltip="加粗" toolkey="fontWeight">
@@ -75,6 +76,7 @@
                     <input type="color" id="body/fill" style="width: 0;height: 0;visibility: hidden;"
                         :value="nodeStyle.fill"
                         @input="valueChange"/>
+                    <span class="disabled" v-if="!isSelectNode"></span>
                 </span>
             </ToolItem>
             <!-- 节点/线条边框颜色 -->
@@ -84,6 +86,7 @@
                     <input type="color" id="storke" style="width: 0;height: 0;visibility: hidden;" 
                         :value="cellStyle.stroke"
                         @input="valueChange"/>
+                    <span class="disabled" v-if="!isSelectNode&&!isSelectEdge"></span>
                 </span>
             </ToolItem>
             <!-- 节点/线条边框宽度 -->
@@ -119,27 +122,42 @@
                 </el-dropdown>
             </ToolItem>
             <!-- 开始箭头 -->
-            <!-- <el-dropdown trigger="click" @command="setGraphStyle">
-                <div class="el-dropdown-link">
-                    <img src="~@/assets/icons/arrow.svg" width="20" height="20" style="vertical-align: middle;">
-                    <i class="el-icon-arrow-down" style="font-size:12px;"></i>
-                </div>
-                <el-dropdown-menu slot="dropdown">
-                    <el-dropdown-item :command="{attr:'',val: 'classic' , key:'end'}">
-                        <i class="iconfont icon-arrow-right" style="color:'#000';fontSize:24px"></i>
-                    </el-dropdown-item>
-                    <el-dropdown-item :command="{attr:'',val: 'classic' , key:'start'}">
+            <ToolItem tooltip="开始箭头" toolkey="stokeWidth">
+                <el-dropdown trigger="click" @command="changeStyle" class="tool-item">
+                    <div class="el-dropdown-link">
+                        <i class="iconfont icon-arrow-left" style="color:'#000';fontSize:24px"></i>
+                        <i class="el-icon-arrow-down" style="font-size:12px;"></i>
+                    </div>
+                    <el-dropdown-menu slot="dropdown">
+                        <el-dropdown-item :command="{attr:'line/sourceMarker',value: 'classic'}">
                             <i class="iconfont icon-arrow-left" style="color:'#000';fontSize:24px"></i>
-                    </el-dropdown-item>
-                    <el-dropdown-item :command="{attr:'',val: 'classic' , key:'both'}">
-                            <i class="iconfont icon-arrow-both" style="color:'#000';fontSize:30px"></i>
-                    </el-dropdown-item>
-                    <el-dropdown-item :command="{attr:'',val: '' , key:'none'}">
+                        </el-dropdown-item>
+                        <el-dropdown-item :command="{attr:'line/sourceMarker',value: ''}">
                             <i class="iconfont icon--shixian" style="color:'#000';fontSize:32px"></i>
-                    </el-dropdown-item>
-                </el-dropdown-menu>
-            </el-dropdown> -->
+                        </el-dropdown-item>
+                    </el-dropdown-menu>
+                    <span class="disabled" v-if="!isSelectNode&&!isSelectEdge"></span>
+                </el-dropdown>
+            </ToolItem>
+            
             <!-- 结束箭头 -->
+            <ToolItem tooltip="结束箭头" toolkey="stokeWidth">
+                <el-dropdown trigger="click" @command="changeStyle" class="tool-item">
+                    <div class="el-dropdown-link">
+                        <i class="iconfont icon-arrow-right" style="color:'#000';fontSize:24px"></i>
+                        <i class="el-icon-arrow-down" style="font-size:12px;"></i>
+                    </div>
+                    <el-dropdown-menu slot="dropdown">
+                        <el-dropdown-item :command="{attr:'line/targetMarker',value: 'classic'}">
+                            <i class="iconfont icon-arrow-right" style="color:'#000';fontSize:24px"></i>
+                        </el-dropdown-item>
+                        <el-dropdown-item :command="{attr:'line/targetMarker',value: ''}">
+                            <i class="iconfont icon--shixian" style="color:'#000';fontSize:32px"></i>
+                        </el-dropdown-item>
+                    </el-dropdown-menu>
+                    <span class="disabled" v-if="!isSelectNode&&!isSelectEdge"></span>
+                </el-dropdown>
+            </ToolItem>
         </div>
         
     </div>
@@ -163,6 +181,15 @@ export default {
         currentCell:{//当前传入的元素,Node/Edge
             type:Object,
         },
+        graph:{ //当前画布
+            type:Object,
+        },
+        canRedo:{
+            type:Boolean
+        },
+        canUndo:{
+            type:Boolean
+        }
     },
     data() {
         this.sizeOptions=sizeOptions
@@ -216,7 +243,7 @@ export default {
                 }
 
             }
-        }
+        },
     },
     methods: {
         changeStyleToggle(attr){
@@ -232,6 +259,7 @@ export default {
                 :valueMap[attr][0]})
         },
         changeStyle({attr,value}){
+            console.log('arrr value',attr,value)
             this.currentCell.attr(attr,value)
             if(attr==='label/fontSize'){
                 this.nodeStyle.fontSize = value
@@ -251,12 +279,14 @@ export default {
                 if(styleMap[id]){
                     attr = this.isSelectNode?styleMap[id][0]:styleMap[id][1]
                 } 
-                console.log('attr value',attr,value)
                 this.currentCell.attr(attr,value)
             }
         },
         changeCellStyle({attr,value}){
             this.valueChange({target:{id:attr,value}})
+        },
+        handleGraphHistory(type){
+            this.graph.history[type]()
         }
     },
     mounted(){
@@ -275,6 +305,9 @@ export default {
             }
         }
     }
+    .el-button{
+        padding:0;
+    }
 }
 </style>
 <style scoped lang="scss">