style: format code for all

src/components/ReFlowChart/index.ts

@@ -6,17 +6,17 @@ 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/ReFlowChart/src/Control.vue

@@ -3,18 +3,20 @@
     <!-- 功能按钮 -->
     <ul>
       <li
-        v-for="(item,key) in titleLists"
+        v-for="(item, key) in titleLists"
         :key="key"
         :title="item.text"
-        :style="{background: focusIndex === key ? '#ccc' : ''}"
+        :style="{ background: focusIndex === key ? '#ccc' : '' }"
         @mouseenter.prevent="onEnter(key)"
         @mouseleave.prevent="focusIndex = -1"
       >
         <button
           :ref="'controlButton' + key"
           :disabled="item.disabled"
-          :style="{cursor: item.disabled === false ? 'pointer' : 'not-allowed'}"
-          @click="onControl(item,key)"
+          :style="{
+            cursor: item.disabled === false ? 'pointer' : 'not-allowed'
+          }"
+          @click="onControl(item, key)"
         >
           <span :class="'iconfont ' + item.icon"></span>
           <p>{{ item.text }}</p>
@@ -24,14 +26,14 @@
   </div>
 </template>
 
-<script lang='ts'>
-import { defineComponent, ref, unref, onMounted, onUnmounted } from "vue";
+<script lang="ts">
+import { defineComponent, ref, unref, onMounted } from "vue";
 import { templateRef } from "@vueuse/core";
 
 export default defineComponent({
   name: "Control",
   props: {
-    lf: <ElRef>Object,
+    lf: null,
     catTurboData: Boolean
   },
   emits: ["catData"],
@@ -107,12 +109,10 @@ export default defineComponent({
 
     onMounted(() => {
       props.lf.on("history:change", ({ data: { undoAble, redoAble } }) => {
-        unref(titleLists)[3].disabled = unref(
-          controlButton3
-        ).disabled = !undoAble;
-        unref(titleLists)[4].disabled = unref(
-          controlButton4
-        ).disabled = !redoAble;
+        unref(titleLists)[3].disabled = unref(controlButton3).disabled =
+          !undoAble;
+        unref(titleLists)[4].disabled = unref(controlButton4).disabled =
+          !redoAble;
       });
     });
 
@@ -126,14 +126,13 @@ export default defineComponent({
 });
 </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%);
+  box-shadow: 0 1px 4px rgb(0 0 0);
 }
 .iconfont {
   font-size: 25px;
@@ -157,4 +156,4 @@ export default defineComponent({
   background-color: transparent;
   outline: none;
 }
-</style>
+</style>

src/components/ReFlowChart/src/DataDialog.vue

@@ -1,8 +1,13 @@
 <template>
-  <vue-json-pretty :path="'res'" :deep="3" :showLength="true" :data="graphData"></vue-json-pretty>
+  <vue-json-pretty
+    :path="'res'"
+    :deep="3"
+    :showLength="true"
+    :data="graphData"
+  ></vue-json-pretty>
 </template>
 
-<script lang='ts'>
+<script lang="ts">
 import VueJsonPretty from "vue-json-pretty";
 import "vue-json-pretty/lib/styles.css";
 import { defineComponent } from "vue";
@@ -15,4 +20,4 @@ export default defineComponent({
     VueJsonPretty
   }
 });
-</script>
+</script>

src/components/ReFlowChart/src/NodePanel.vue

@@ -8,14 +8,17 @@
       @mousedown="nodeDragNode(item)"
     >
       <div class="node-item-icon" :class="item.class">
-        <div v-if="item.type === 'user' || item.type === 'time'" class="shape"></div>
+        <div
+          v-if="item.type === 'user' || item.type === 'time'"
+          class="shape"
+        ></div>
       </div>
-      <span class="node-label">{{item.text}}</span>
+      <span class="node-label">{{ item.text }}</span>
     </div>
   </div>
 </template>
 
-<script lang='ts'>
+<script lang="ts">
 import { defineComponent, ref, unref } from "vue";
 export default defineComponent({
   name: "NodePanel",
@@ -52,7 +55,6 @@ export default defineComponent({
 });
 </script>
 
-
 <style scoped>
 .node-panel {
   position: absolute;

src/components/ReFlowChart/src/adpterForTurbo.ts

@@ -1,34 +1,33 @@
-
 const TurboType = {
   SEQUENCE_FLOW: 1,
   START_EVENT: 2,
   END_EVENT: 3,
   USER_TASK: 4,
   SERVICE_TASK: 5,
-  EXCLUSIVE_GATEWAY: 6,
-}
+  EXCLUSIVE_GATEWAY: 6
+};
 
 function getTurboType(type) {
   switch (type) {
-    case 'bpmn:sequenceFlow':
-      return TurboType.SEQUENCE_FLOW
-    case 'bpmn:startEvent':
-      return TurboType.START_EVENT
-    case 'bpmn:endEvent':
-      return TurboType.END_EVENT
-    case 'bpmn:userTask':
-      return TurboType.USER_TASK
-    case 'bpmn:serviceTask':
-      return TurboType.SERVICE_TASK
-    case 'bpmn:exclusiveGateway':
-      return TurboType.EXCLUSIVE_GATEWAY
+    case "bpmn:sequenceFlow":
+      return TurboType.SEQUENCE_FLOW;
+    case "bpmn:startEvent":
+      return TurboType.START_EVENT;
+    case "bpmn:endEvent":
+      return TurboType.END_EVENT;
+    case "bpmn:userTask":
+      return TurboType.USER_TASK;
+    case "bpmn:serviceTask":
+      return TurboType.SERVICE_TASK;
+    case "bpmn:exclusiveGateway":
+      return TurboType.EXCLUSIVE_GATEWAY;
     default:
-      return type
+      return type;
   }
 }
 
 function convertNodeToTurboElement(node) {
-  const { id, type, x, y, text = '', properties } = node
+  const { id, type, x, y, text = "", properties } = node;
   return {
     incoming: [],
     outgoing: [],
@@ -36,14 +35,14 @@ function convertNodeToTurboElement(node) {
     type: getTurboType(node.type),
     properties: {
       ...properties,
-      name: text && text.value || '',
+      name: (text && text.value) || "",
       x: x,
       y: y,
       text,
-      logicFlowType: type,
+      logicFlowType: type
     },
-    key: id,
-  }
+    key: id
+  };
 }
 
 function convertEdgeToTurboElement(edge) {
@@ -55,8 +54,9 @@ function convertEdgeToTurboElement(edge) {
     startPoint,
     endPoint,
     pointsList,
-    text = '',
-    properties } = edge
+    text = "",
+    properties
+  } = edge;
   return {
     incoming: [sourceNodeId],
     outgoing: [targetNodeId],
@@ -64,48 +64,41 @@ function convertEdgeToTurboElement(edge) {
     dockers: [],
     properties: {
       ...properties,
-      name: text && text.value || '',
+      name: (text && text.value) || "",
       text,
       startPoint,
       endPoint,
       pointsList,
-      logicFlowType: type,
+      logicFlowType: type
     },
-    key: id,
-  }
+    key: id
+  };
 }
 
 export function toTurboData(data) {
-  const nodeMap = new Map()
+  const nodeMap = new Map();
   const turboData = {
-    flowElementList: [],
-  }
-  data.nodes.forEach((node) => {
-    const flowElement = convertNodeToTurboElement(node)
-    turboData.flowElementList.push(flowElement)
-    nodeMap.set(node.id, flowElement)
-  })
-  data.edges.forEach((edge) => {
-    const flowElement = convertEdgeToTurboElement(edge)
-    const sourceElement = nodeMap.get(edge.sourceNodeId)
-    sourceElement.outgoing.push(flowElement.key)
-    const targetElement = nodeMap.get(edge.targetNodeId)
-    targetElement.incoming.push(flowElement.key)
-    turboData.flowElementList.push(flowElement)
-  })
-  return turboData
+    flowElementList: []
+  };
+  data.nodes.forEach(node => {
+    const flowElement = convertNodeToTurboElement(node);
+    turboData.flowElementList.push(flowElement);
+    nodeMap.set(node.id, flowElement);
+  });
+  data.edges.forEach(edge => {
+    const flowElement = convertEdgeToTurboElement(edge);
+    const sourceElement = nodeMap.get(edge.sourceNodeId);
+    sourceElement.outgoing.push(flowElement.key);
+    const targetElement = nodeMap.get(edge.targetNodeId);
+    targetElement.incoming.push(flowElement.key);
+    turboData.flowElementList.push(flowElement);
+  });
+  return turboData;
 }
 
-
 function convertFlowElementToEdge(element) {
-  const { incoming, outgoing, properties, key } = element
-  const {
-    text,
-    startPoint,
-    endPoint,
-    pointsList,
-    logicFlowType
-  } = properties
+  const { incoming, outgoing, properties, key } = element;
+  const { text, startPoint, endPoint, pointsList, logicFlowType } = properties;
   const edge = {
     id: key,
     type: logicFlowType,
@@ -116,19 +109,25 @@ function convertFlowElementToEdge(element) {
     endPoint,
     pointsList,
     properties: {}
-  }
-  const excludeProperties = ['startPoint', 'endPoint', 'pointsList', 'text', 'logicFlowType']
+  };
+  const excludeProperties = [
+    "startPoint",
+    "endPoint",
+    "pointsList",
+    "text",
+    "logicFlowType"
+  ];
   Object.keys(element.properties).forEach(property => {
     if (excludeProperties.indexOf(property) === -1) {
-      edge.properties[property] = element.properties[property]
+      edge.properties[property] = element.properties[property];
     }
-  })
-  return edge
+  });
+  return edge;
 }
 
 function convertFlowElementToNode(element) {
-  const { properties, key } = element
-  const { x, y, text, logicFlowType } = properties
+  const { properties, key } = element;
+  const { x, y, text, logicFlowType } = properties;
   const node = {
     id: key,
     type: logicFlowType,
@@ -136,31 +135,32 @@ function convertFlowElementToNode(element) {
     y,
     text,
     properties: {}
-  }
-  const excludeProperties = ['x', 'y', 'text', 'logicFlowType']
+  };
+  const excludeProperties = ["x", "y", "text", "logicFlowType"];
   Object.keys(element.properties).forEach(property => {
     if (excludeProperties.indexOf(property) === -1) {
-      node.properties[property] = element.properties[property]
+      node.properties[property] = element.properties[property];
     }
-  })
-  return node
-
+  });
+  return node;
 }
 
 export function toLogicflowData(data) {
   const lfData = {
     nodes: [],
-    edges: [],
-  }
-  const list = data.flowElementList
-  list && list.length > 0 && list.forEach(element => {
-    if (element.type === TurboType.SEQUENCE_FLOW) {
-      const edge = convertFlowElementToEdge(element)
-      lfData.edges.push(edge)
-    } else {
-      const node = convertFlowElementToNode(element)
-      lfData.nodes.push(node)
-    }
-  })
-  return lfData
-}
+    edges: []
+  };
+  const list = data.flowElementList;
+  list &&
+    list.length > 0 &&
+    list.forEach(element => {
+      if (element.type === TurboType.SEQUENCE_FLOW) {
+        const edge = convertFlowElementToEdge(element);
+        lfData.edges.push(edge);
+      } else {
+        const node = convertFlowElementToNode(element);
+        lfData.nodes.push(node);
+      }
+    });
+  return lfData;
+}

src/components/ReFlowChart/src/config.ts

@@ -1,55 +1,55 @@
 export const nodeList = [
   {
-    text: '开始',
-    type: 'start',
-    class: 'node-start'
+    text: "开始",
+    type: "start",
+    class: "node-start"
   },
   {
-    text: '矩形',
-    type: 'rect',
-    class: 'node-rect'
+    text: "矩形",
+    type: "rect",
+    class: "node-rect"
   },
   {
-    type: 'user',
-    text: '用户',
-    class: 'node-user'
+    type: "user",
+    text: "用户",
+    class: "node-user"
   },
   {
-    type: 'push',
-    text: '推送',
-    class: 'node-push'
+    type: "push",
+    text: "推送",
+    class: "node-push"
   },
   {
-    type: 'download',
-    text: '位置',
-    class: 'node-download'
+    type: "download",
+    text: "位置",
+    class: "node-download"
   },
   {
-    type: 'end',
-    text: '结束',
-    class: 'node-end'
-  },
-]
+    type: "end",
+    text: "结束",
+    class: "node-end"
+  }
+];
 
 export const BpmnNode = [
   {
-    type: 'bpmn:startEvent',
-    text: '开始',
-    class: 'bpmn-start'
+    type: "bpmn:startEvent",
+    text: "开始",
+    class: "bpmn-start"
   },
   {
-    type: 'bpmn:endEvent',
-    text: '结束',
-    class: 'bpmn-end'
+    type: "bpmn:endEvent",
+    text: "结束",
+    class: "bpmn-end"
   },
   {
-    type: 'bpmn:exclusiveGateway',
-    text: '网关',
-    class: 'bpmn-exclusiveGateway'
+    type: "bpmn:exclusiveGateway",
+    text: "网关",
+    class: "bpmn-exclusiveGateway"
   },
   {
-    type: 'bpmn:userTask',
-    text: '用户',
-    class: 'bpmn-user'
-  },
-]
+    type: "bpmn:userTask",
+    text: "用户",
+    class: "bpmn-user"
+  }
+];