refactor: update some

README.md

@@ -51,7 +51,7 @@ npm install
 - run
 
 ```bash
-yarn serve
+npm run serve
 ```
 
 - build

README.zh-CN.md

@@ -51,7 +51,7 @@ npm install
 - 运行
 
 ```bash
-yarn serve
+npm run serve
 ```
 
 - 打包

src/components/FlowChart/src/AddPanel.vue

@@ -1,115 +0,0 @@
-<template>
-  <el-tabs tab-position="left">
-    <el-tab-pane label="添加动作">
-      <div v-for="item in nodeList" :key="item.type">
-        <el-button
-          class="add-node-btn"
-          type="primary"
-          size="mini"
-          @click="$_addNode(item)"
-        >{{item.label}}</el-button>
-      </div>
-    </el-tab-pane>
-    <el-tab-pane label="添加组">
-      <el-button class="add-node-btn" type="primary" size="mini" @click="$_addTempalte">模板</el-button>
-    </el-tab-pane>
-  </el-tabs>
-</template>
-
-<script>
-export default {
-  name: 'AddPanel',
-  props: {
-    nodeData: Object,
-    lf: Object || String
-  },
-  data() {
-    return {
-      nodeList: [
-        {
-          type: 'user',
-          label: '用户'
-        },
-        {
-          type: 'push',
-          label: '推送'
-        }
-      ]
-    }
-  },
-  methods: {
-    $_addNode(item) {
-      const { lf, nodeData } = this.$props
-      const { id, x, y } = nodeData
-      const nextNode = lf.addNode({
-        type: item.type,
-        x: x + 150,
-        y: y + 150
-      })
-      const nextId = nextNode.id
-      lf.createEdge({ sourceNodeId: id, targetNodeId: nextId })
-      this.$emit('addNodeFinish')
-    },
-    $_addTempalte() {
-      const { lf, nodeData } = this.$props
-      const { id, x, y } = nodeData
-      const timeNode = lf.addNode({
-        type: 'download',
-        x,
-        y: y + 150
-      })
-      const userNode = lf.addNode({
-        type: 'user',
-        x: x + 150,
-        y: y + 150
-      })
-      const pushNode = lf.addNode({
-        type: 'push',
-        x: x + 150,
-        y: y + 300,
-        properties: {}
-      })
-      const endNode = lf.addNode({
-        type: 'end',
-        x: x + 300,
-        y: y + 150
-      })
-      const endNode2 = lf.addNode({
-        type: 'end',
-        x: x + 300,
-        y: y + 300
-      })
-      lf.createEdge({ sourceNodeId: id, targetNodeId: timeNode.id })
-      lf.createEdge({ sourceNodeId: timeNode.id, targetNodeId: userNode.id })
-      lf.createEdge({
-        sourceNodeId: userNode.id,
-        targetNodeId: endNode.id,
-        endPoint: { x: x + 280, y: y + 150 },
-        text: {
-          value: 'Y',
-          x: x + 230,
-          y: y + 140
-        }
-      })
-      lf.createEdge({
-        sourceNodeId: userNode.id,
-        targetNodeId: pushNode.id,
-        text: {
-          value: 'N',
-          x: x + 160,
-          y: y + 230
-        }
-      })
-      lf.createEdge({ sourceNodeId: pushNode.id, targetNodeId: endNode2.id, endPoint: { x: x + 280, y: y + 300 } })
-      this.$emit('addNodeFinish')
-    }
-  }
-}
-</script>
-
-<style scoped>
-.add-node-btn {
-  margin-bottom: 10px;
-  margin-right: 20px;
-}
-</style>

src/components/FlowChart/src/Control.vue

@@ -1,7 +1,21 @@
 <template>
-  <div>
-    <el-button-group>
-      <el-button size="small" @click="$_zoomIn">放大</el-button>
+  <div class="control-container">
+    <ul>
+      <li
+        v-for="(item,key) in titleLists"
+        :key="key"
+        :title="item.text"
+        :style="{background: focusIndex === key ? '#ccc' : ''}"
+        @mouseenter.prevent="onEnter(key)"
+        @mouseleave.prevent="focusIndex = -1"
+      >
+        <button ref="controlButton" @click="onControl(item,key)">
+          <span :class="'iconfont ' + item.icon"></span>
+          <p>{{ item.text }}</p>
+        </button>
+      </li>
+    </ul>
+    <!-- <el-button size="small" @click="$_zoomIn">放大</el-button>
       <el-button size="small" @click="$_zoomOut">缩小</el-button>
       <el-button size="small" @click="$_zoomReset">大小适应</el-button>
       <el-button size="small" @click="$_translateRest">定位还原</el-button>
@@ -10,65 +24,128 @@
       <el-button size="small" @click="$_redo" :disabled="redoDisable">下一步(ctrl+y)</el-button>
       <el-button size="small" @click="$_download">下载图片</el-button>
       <el-button size="small" @click="$_catData">查看数据</el-button>
-      <el-button v-if="catTurboData" size="small" @click="$_catTurboData">查看turbo数据</el-button>
-    </el-button-group>
+    <el-button v-if="catTurboData" size="small" @click="$_catTurboData">查看turbo数据</el-button>-->
   </div>
 </template>
 
 <script>
 export default {
-  name: 'Control',
+  name: "Control",
   props: {
     lf: Object || String,
-    catTurboData: Boolean
+    catTurboData: Boolean,
   },
   data() {
     return {
       undoDisable: true,
       redoDisable: true,
-    }
+      focusIndex: -1,
+      titleLists: [
+        {
+          icon: "icon-zoom-out-hs",
+          text: "缩小",
+        },
+        {
+          icon: "icon-enlarge-hs",
+          text: "放大",
+        },
+        {
+          icon: "icon-full-screen-hs",
+          text: "适应",
+        },
+        {
+          icon: "icon-previous-hs",
+          text: "上一步",
+        },
+        {
+          icon: "icon-next-step-hs",
+          text: "下一步",
+        },
+      ],
+    };
   },
   mounted() {
-    this.$props.lf.on('history:change', ({ data: { undoAble, redoAble } }) => {
-      this.$data.undoDisable = !undoAble
-      this.$data.redoDisable = !redoAble
-    })
+    this.$props.lf.on("history:change", ({ data: { undoAble, redoAble } }) => {
+      this.$data.undoDisable = !undoAble;
+      this.$data.redoDisable = !redoAble;
+    });
   },
   methods: {
+    onControl(item, key) {
+      ["zoom", "zoom", "resetZoom", "undo", "redo"].forEach((v, i) => {
+        let domControl = this.$props.lf;
+        if (key === 1) {
+          domControl.zoom(true);
+        }
+        if (key === i) {
+          domControl[v]();
+        }
+      });
+    },
+    onEnter(key) {
+      this.focusIndex = key;
+    },
     $_zoomIn() {
-      this.$props.lf.zoom(true)
+      this.$props.lf.zoom(true);
     },
     $_zoomOut() {
-      this.$props.lf.zoom(false)
+      this.$props.lf.zoom(false);
     },
     $_zoomReset() {
-      this.$props.lf.resetZoom()
+      this.$props.lf.resetZoom();
     },
     $_translateRest() {
-      this.$props.lf.resetTranslate()
+      this.$props.lf.resetTranslate();
     },
     $_reset() {
-      this.$props.lf.resetZoom()
-      this.$props.lf.resetTranslate()
+      this.$props.lf.resetZoom();
+      this.$props.lf.resetTranslate();
     },
     $_undo() {
-      this.$props.lf.undo()
+      this.$props.lf.undo();
     },
     $_redo() {
-      this.$props.lf.redo()
+      this.$props.lf.redo();
     },
     $_download() {
-      this.$props.lf.getSnapshot()
+      this.$props.lf.getSnapshot();
     },
     $_catData() {
-      this.$emit('catData')
+      this.$emit("catData");
     },
     $_catTurboData() {
-      this.$emit('catTurboData')
-    }
-  }
-}
+      this.$emit("catTurboData");
+    },
+  },
+};
 </script>
 
 <style scoped>
+@import "./assets/iconfont/iconfont.css";
+.control-container {
+  position: absolute;
+  right: 20px;
+  background: hsla(0, 0%, 100%, 0.8);
+  box-shadow: 0 1px 4px rgb(0 0 0 / 30%);
+  border-radius: 5px;
+}
+.iconfont {
+  font-size: 25px;
+}
+.control-container p {
+  margin: 0;
+  font-size: 12px;
+}
+.control-container ul {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  margin: 2px;
+}
+.control-container ul li {
+  width: 60px;
+  text-align: center;
+  cursor: pointer;
+  /* pointer-events: none; */
+}
 </style>

src/components/FlowChart/src/assets/iconfont/iconfont.json

@@ -0,0 +1,58 @@
+{
+  "id": "2491438",
+  "name": "liu'c'tu",
+  "font_family": "iconfont",
+  "css_prefix_text": "icon-",
+  "description": "",
+  "glyphs": [
+    {
+      "icon_id": "755619",
+      "name": "自适应图标",
+      "font_class": "full-screen-hs",
+      "unicode": "e656",
+      "unicode_decimal": 58966
+    },
+    {
+      "icon_id": "14445801",
+      "name": "查看",
+      "font_class": "watch-hs",
+      "unicode": "e766",
+      "unicode_decimal": 59238
+    },
+    {
+      "icon_id": "9712640",
+      "name": "下载",
+      "font_class": "download-hs",
+      "unicode": "e6af",
+      "unicode_decimal": 59055
+    },
+    {
+      "icon_id": "1029099",
+      "name": "放大",
+      "font_class": "enlarge-hs",
+      "unicode": "e765",
+      "unicode_decimal": 59237
+    },
+    {
+      "icon_id": "20017362",
+      "name": "上一步",
+      "font_class": "previous-hs",
+      "unicode": "e84c",
+      "unicode_decimal": 59468
+    },
+    {
+      "icon_id": "1010015",
+      "name": "缩小",
+      "font_class": "zoom-out-hs",
+      "unicode": "e744",
+      "unicode_decimal": 59204
+    },
+    {
+      "icon_id": "20017363",
+      "name": "下一步",
+      "font_class": "next-step-hs",
+      "unicode": "e84b",
+      "unicode_decimal": 59467
+    }
+  ]
+}

src/utils/operate/index.ts

@@ -3,7 +3,7 @@ export const hasClass = (ele: Element, cls: string): any => {
 }
 
 export const addClass = (ele: Element, cls: string, extracls?: string): any => {
-  if (!hasClass(ele, cls)) ele.className += ' ' + cls
+  if (!hasClass(ele, cls)) ele.className += (' ' + cls).trim()
   if (extracls) {
     if (!hasClass(ele, extracls)) ele.className += ' ' + extracls
   }

src/views/flow-chart/index.vue

@@ -94,7 +94,7 @@ export default {
 </script>
 <style>
 .logic-flow-view {
-  height: 100vh;
+  height: 100%;
   position: relative;
 }
 .demo-title {
@@ -103,15 +103,14 @@ export default {
 }
 .demo-control {
   position: absolute;
-  top: 50px;
-  right: 100px;
+  top: 10px;
+  right: 20px;
   z-index: 2;
 }
 #LF-Turbo {
   width: 100vw;
   height: 85%;
   outline: none;
-  margin: 10px 0 0 10px;
 }
 .time-plus {
   cursor: pointer;