revert: add Menu in LogicFlow

src/components/FlowChart/src/Control.vue

@@ -25,84 +25,96 @@
 </template>
 
 <script lang='ts'>
-import { defineComponent ,ref, unref, onMounted } from "vue";
+import { defineComponent, ref, unref, onMounted } from "vue";
-import { templateRef } from '@vueuse/core'
+import { templateRef } from "@vueuse/core";
 
 export default defineComponent({
   name: "Control",
   props: {
     lf: Object || String,
-    catTurboData: Boolean,
+    catTurboData: Boolean
   },
   emits: ["catData"],
-  setup(props,{emit}) {
+  setup(props, { emit }) {
-    const controlButton3 = templateRef<HTMLElement | null>('controlButton3', null)
+    const controlButton3 = templateRef<HTMLElement | null>(
-    const controlButton4 = templateRef<HTMLElement | null>('controlButton4', null)
+      "controlButton3",
+      null
+    );
+    const controlButton4 = templateRef<HTMLElement | null>(
+      "controlButton4",
+      null
+    );
 
-    let focusIndex = ref(-1)
+    let focusIndex = ref(-1);
     let titleLists = ref([
-        {
+      {
-          icon: "icon-zoom-out-hs",
+        icon: "icon-zoom-out-hs",
-          text: "缩小",
+        text: "缩小",
-          disabled: false
+        disabled: false
-        },
+      },
-        {
+      {
-          icon: "icon-enlarge-hs",
+        icon: "icon-enlarge-hs",
-          text: "放大",
+        text: "放大",
-          disabled: false
+        disabled: false
-        },
+      },
-        {
+      {
-          icon: "icon-full-screen-hs",
+        icon: "icon-full-screen-hs",
-          text: "适应",
+        text: "适应",
-          disabled: false
+        disabled: false
-        },
+      },
-        {
+      {
-          icon: "icon-previous-hs",
+        icon: "icon-previous-hs",
-          text: "上一步",
+        text: "上一步",
-          disabled: true
+        disabled: true
-        },
+      },
-        {
+      {
-          icon: "icon-next-step-hs",
+        icon: "icon-next-step-hs",
-          text: "下一步",
+        text: "下一步",
-          disabled: true
+        disabled: true
-        },
+      },
-        {
+      {
-          icon: "icon-download-hs",
+        icon: "icon-download-hs",
-          text: "下载图片",
+        text: "下载图片",
-          disabled: false
+        disabled: false
-        },
+      },
-        {
+      {
-          icon: "icon-watch-hs",
+        icon: "icon-watch-hs",
-          text: "查看数据",
+        text: "查看数据",
-          disabled: false
+        disabled: false
-        },
+      }
-      ])
+    ]);
 
     const onControl = (item, key) => {
-      ["zoom", "zoom", "resetZoom", "undo", "redo", "getSnapshot"].forEach((v, i) => {
+      ["zoom", "zoom", "resetZoom", "undo", "redo", "getSnapshot"].forEach(
-        let domControl = props.lf
+        (v, i) => {
-        if (key === 1) {
+          let domControl = props.lf;
-          domControl.zoom(true)
+          if (key === 1) {
+            domControl.zoom(true);
+          }
+          if (key === 6) {
+            emit("catData");
+          }
+          if (key === i) {
+            domControl[v]();
+          }
         }
-        if (key === 6) {
+      );
-          emit("catData")
+    };
-        }
-        if (key === i) {
-          domControl[v]()
-        }
-      })
-    }
 
-    const onEnter = (key) => {
+    const onEnter = key => {
-      focusIndex.value = key
+      focusIndex.value = key;
-    }
+    };
 
-    onMounted(()=>{
+    onMounted(() => {
       props.lf.on("history:change", ({ data: { undoAble, redoAble } }) => {
-        unref(titleLists)[3].disabled = unref(controlButton3).disabled = !undoAble
+        unref(titleLists)[3].disabled = unref(
-        unref(titleLists)[4].disabled = unref(controlButton4).disabled = !redoAble
+          controlButton3
-      })
+        ).disabled = !undoAble;
-    })
+        unref(titleLists)[4].disabled = unref(
+          controlButton4
+        ).disabled = !redoAble;
+      });
+    });
 
     return {
       focusIndex,
@@ -110,7 +122,7 @@ export default defineComponent({
       onControl,
       onEnter
     };
-  },
+  }
 });
 </script>
 

src/views/flow-chart/index.vue

@@ -1,13 +1,7 @@
 <template>
   <div class="logic-flow-view">
     <!-- 辅助工具栏 -->
-    <Control
+    <Control class="demo-control" v-if="lf" :lf="lf" :catTurboData="false" @catData="catData"></Control>
-      class="demo-control"
-      v-if="lf"
-      :lf="lf"
-      :catTurboData="false"
-      @catData="catData"
-    ></Control>
     <!-- 节点面板 -->
     <NodePanel :lf="lf" :nodeList="nodeList"></NodePanel>
     <!-- 画布 -->
@@ -20,59 +14,67 @@
 </template>
 
 <script lang='ts'>
-import { ref, unref, onMounted, nextTick } from "vue"
+import { ref, unref, onMounted, nextTick } from "vue";
-import LogicFlow from '@logicflow/core'
+import LogicFlow from "@logicflow/core";
-import { Snapshot, BpmnElement } from '@logicflow/extension'
+import { Snapshot, BpmnElement, Menu } from "@logicflow/extension";
-import '@logicflow/core/dist/style/index.css'
+import "@logicflow/core/dist/style/index.css";
-import '@logicflow/extension/lib/style/index.css'
+import "@logicflow/extension/lib/style/index.css";
-import { Control, NodePanel, DataDialog } from '/@/components/FlowChart'
+import { Control, NodePanel, DataDialog } from "/@/components/FlowChart";
 
-import { toTurboData, toLogicflowData } from '/@/components/FlowChart/src/adpterForTurbo'
+import {
-import { BpmnNode } from '/@/components/FlowChart/src/config'
+  toTurboData,
-import demoData from './dataTurbo.json'
+  toLogicflowData
+} from "/@/components/FlowChart/src/adpterForTurbo";
+import { BpmnNode } from "/@/components/FlowChart/src/config";
+import demoData from "./dataTurbo.json";
 export default {
   components: { NodePanel, Control, DataDialog },
   setup() {
-    let lf = ref(null) 
+    let lf = ref(null);
-    let graphData =ref(null)
+    let graphData = ref(null);
-    let dataVisible = ref(false)
+    let dataVisible = ref(false);
     let config = ref({
-        grid: true,
+      grid: true,
-        background: {
+      background: {
-          color: '#f7f9ff'
+        color: "#f7f9ff"
-        },
+      },
-        keyboard: {
+      keyboard: {
-          enabled: true
+        enabled: true
-        },
+      }
-      })
+    });
-    let nodeList= BpmnNode
+    let nodeList = BpmnNode;
 
     function initLf() {
       // 画布配置
-      LogicFlow.use(Snapshot)
+      LogicFlow.use(Snapshot);
       // 使用bpmn插件，引入bpmn元素，这些元素可以在turbo中转换后使用
-      LogicFlow.use(BpmnElement)
+      LogicFlow.use(BpmnElement);
-      const domLf = new LogicFlow({ ...unref(config), container: document.querySelector('#LF-Turbo') })
+      // 启动右键菜单
-      lf.value = domLf
+      LogicFlow.use(Menu);
+      const domLf = new LogicFlow({
+        ...unref(config),
+        container: document.querySelector("#LF-Turbo")
+      });
+      lf.value = domLf;
       // 设置边类型bpmn:sequenceFlow为默认类型
-      unref(lf).setDefaultEdgeType('bpmn:sequenceFlow')
+      unref(lf).setDefaultEdgeType("bpmn:sequenceFlow");
-      onRender()
+      onRender();
     }
 
     function onRender() {
       // Turbo数据转换为LogicFlow内部识别的数据结构
-      const lFData = toLogicflowData(demoData)
+      const lFData = toLogicflowData(demoData);
-      lf.value.render(lFData)
+      lf.value.render(lFData);
     }
 
     function catData() {
-      graphData.value = unref(lf).getGraphData()
+      graphData.value = unref(lf).getGraphData();
-      dataVisible.value = true
+      dataVisible.value = true;
     }
 
-    onMounted(()=>{
+    onMounted(() => {
-      initLf()
+      initLf();
-    })
+    });
 
     return {
       lf,
@@ -82,7 +84,7 @@ export default {
       nodeList,
       catData
     };
-  },
+  }
 };
 </script>