feat: add flowChart Component (#488)

package.json

@@ -33,6 +33,8 @@
   },
   "dependencies": {
     "@iconify/iconify": "^2.0.0-rc.6",
+    "@logicflow/core": "^0.3.0",
+    "@logicflow/extension": "^0.3.0",
     "@vueuse/core": "^4.8.1",
     "@zxcvbn-ts/core": "^0.3.0",
     "ant-design-vue": "^2.1.2",
@@ -52,6 +54,7 @@
     "vditor": "^3.8.4",
     "vue": "3.0.11",
     "vue-i18n": "9.0.0",
+    "vue-json-pretty": "^2.0.2",
     "vue-router": "^4.0.6",
     "vue-types": "^3.0.2",
     "xlsx": "^0.16.9"

src/components/FlowChart/index.ts

@@ -0,0 +1,22 @@
+import { App } from 'vue';
+import control from './src/Control.vue';
+import nodePanel from './src/NodePanel.vue';
+import dataDialog from './src/DataDialog.vue';
+
+export const Control = Object.assign(control, {
+  install(app: App) {
+    app.component(control.name, control);
+  },
+});
+
+export const NodePanel = Object.assign(nodePanel, {
+  install(app: App) {
+    app.component(nodePanel.name, nodePanel);
+  },
+});
+
+export const DataDialog = Object.assign(dataDialog, {
+  install(app: App) {
+    app.component(dataDialog.name, dataDialog);
+  },
+});

src/components/FlowChart/src/Control.vue

@@ -0,0 +1,150 @@
+<template>
+  <div class="control-container">
+    <!-- 功能按钮 -->
+    <ul>
+      <li
+        v-for="(item, key) in titleLists"
+        :key="key"
+        :title="item.text"
+        @mouseenter.prevent="onEnter(key)"
+        @mouseleave.prevent="focusIndex = -1"
+      >
+        <a-button
+          :disabled="item.disabled"
+          :style="{ cursor: item.disabled === false ? 'pointer' : 'not-allowed' }"
+          @click="onControl(item, key)"
+        >
+          <span :class="'iconfont ' + item.icon"></span>
+          <p>{{ item.text }}</p>
+        </a-button>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script lang="ts">
+  import { defineComponent, ref, unref, onMounted } from 'vue';
+
+  export default defineComponent({
+    name: 'Control',
+    props: {
+      lf: Object || String,
+      catTurboData: Boolean,
+    },
+    emits: ['catData'],
+    setup(props, { emit }) {
+      let focusIndex = ref(-1);
+      let titleLists = ref([
+        {
+          icon: 'icon-zoom-out-hs',
+          text: '缩小',
+          disabled: false,
+        },
+        {
+          icon: 'icon-enlarge-hs',
+          text: '放大',
+          disabled: false,
+        },
+        {
+          icon: 'icon-full-screen-hs',
+          text: '适应',
+          disabled: false,
+        },
+        {
+          icon: 'icon-previous-hs',
+          text: '上一步',
+          disabled: true,
+        },
+        {
+          icon: 'icon-next-step-hs',
+          text: '下一步',
+          disabled: true,
+        },
+        {
+          icon: 'icon-download-hs',
+          text: '下载图片',
+          disabled: false,
+        },
+        {
+          icon: 'icon-watch-hs',
+          text: '查看数据',
+          disabled: false,
+        },
+      ]);
+
+      const onControl = (item, key) => {
+        ['zoom', 'zoom', 'resetZoom', 'undo', 'redo', 'getSnapshot'].forEach((v, i) => {
+          let domControl = props.lf;
+          if (key === 1) {
+            domControl.zoom(true);
+          }
+          if (key === 6) {
+            emit('catData');
+          }
+          if (key === i) {
+            domControl[v]();
+          }
+        });
+      };
+
+      const onEnter = (key) => {
+        focusIndex.value = key;
+      };
+
+      onMounted(() => {
+        props.lf.on('history:change', ({ data: { undoAble, redoAble } }) => {
+          unref(titleLists)[3].disabled = !undoAble;
+          unref(titleLists)[4].disabled = !redoAble;
+        });
+      });
+
+      return {
+        focusIndex,
+        titleLists,
+        onControl,
+        onEnter,
+      };
+    },
+  });
+</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%);
+  }
+
+  .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;
+  }
+
+  .control-container ul li button {
+    width: 100%;
+    height: 60px;
+    padding: 0;
+    background-color: transparent;
+    border: none;
+    outline: none;
+  }
+</style>

src/components/FlowChart/src/DataDialog.vue

@@ -0,0 +1,18 @@
+<template>
+  <vue-json-pretty :path="'res'" :deep="3" :showLength="true" :data="graphData" />
+</template>
+
+<script lang="ts">
+  import VueJsonPretty from 'vue-json-pretty';
+  import 'vue-json-pretty/lib/styles.css';
+  import { defineComponent } from 'vue';
+  export default defineComponent({
+    name: 'DataDialog',
+    components: {
+      VueJsonPretty,
+    },
+    props: {
+      graphData: Object,
+    },
+  });
+</script>

src/components/FlowChart/src/NodePanel.vue

@@ -0,0 +1,145 @@
+<template>
+  <!-- 左侧bpmn元素选择器 -->
+  <div class="node-panel">
+    <div
+      class="node-item"
+      v-for="item in nodeList"
+      :key="item.text"
+      @mousedown="nodeDragNode(item)"
+    >
+      <div class="node-item-icon" :class="item.class">
+        <div v-if="item.type === 'user' || item.type === 'time'" class="shape"></div>
+      </div>
+      <span class="node-label">{{ item.text }}</span>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+  import { defineComponent, ref, unref } from 'vue';
+  export default defineComponent({
+    name: 'NodePanel',
+    props: {
+      lf: Object,
+      nodeList: Array,
+    },
+    setup(props) {
+      let node = ref({
+        type: 'rect',
+        property: {
+          a: 'efrwe',
+          b: 'wewe',
+        },
+      });
+      let properties = ref({
+        a: 'efrwe',
+        b: 'wewe',
+      });
+
+      const nodeDragNode = (item) => {
+        props.lf.dnd.startDrag({
+          type: item.type,
+          properties: unref(properties),
+        });
+      };
+
+      return {
+        node,
+        properties,
+        nodeDragNode,
+      };
+    },
+  });
+</script>
+
+<style scoped>
+  .node-panel {
+    position: absolute;
+    top: 100px;
+    left: 50px;
+    z-index: 101;
+    width: 70px;
+    padding: 20px 10px;
+    text-align: center;
+    background-color: white;
+    border-radius: 6px;
+    box-shadow: 0 0 10px 1px rgb(228, 224, 219);
+  }
+
+  .node-item {
+    margin-bottom: 20px;
+  }
+
+  .node-item-icon {
+    display: flex;
+    height: 30px;
+    background-size: cover;
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+
+  .node-label {
+    margin-top: 5px;
+    font-size: 12px;
+    user-select: none;
+  }
+
+  .node-start {
+    background: url('./background/start.png') no-repeat;
+    background-size: cover;
+  }
+
+  .node-rect {
+    border: 1px solid black;
+  }
+
+  .node-user {
+    background: url('./background/user.png') no-repeat;
+    background-size: cover;
+  }
+
+  .node-time {
+    background: url('./background/time.png') no-repeat;
+    background-size: cover;
+  }
+
+  .node-push {
+    background: url('./background/push.png') no-repeat;
+    background-size: cover;
+  }
+
+  .node-download {
+    background: url('./background/download.png') no-repeat;
+    background-size: cover;
+  }
+
+  .node-click {
+    background: url('./background/click.png') no-repeat;
+    background-size: cover;
+  }
+
+  .node-end {
+    background: url('./background/end.png') no-repeat;
+    background-size: cover;
+  }
+
+  .bpmn-start {
+    cursor: grab;
+    background: url('./assets/background/bpmn-start.png') center center no-repeat;
+  }
+
+  .bpmn-end {
+    cursor: grab;
+    background: url('./assets/background/bpmn-end.png') center center no-repeat;
+  }
+
+  .bpmn-user {
+    cursor: grab;
+    background: url('./assets/background/bpmn-user.png') center center no-repeat;
+  }
+
+  .bpmn-exclusiveGateway {
+    cursor: grab;
+    background: url('./assets/background/bpmn-exclusiveGateway.png') center center no-repeat;
+  }
+</style>