feat: add demo of logicflow-engine

Logic-Flow · Nov 30, 2023 · 762943e · 762943e · vercel · Nov 30, 2023
1 parent a1a0794
commit 762943e
Show file tree

Hide file tree

Showing 134 changed files with 7,007 additions and 6 deletions.
diff --git a/demo/bpmn-and-engine/.gitignore b/demo/bpmn-and-engine/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/demo/bpmn-and-engine/.vscode/extensions.json b/demo/bpmn-and-engine/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
+}
diff --git a/demo/bpmn-and-engine/README.md b/demo/bpmn-and-engine/README.md
@@ -0,0 +1,18 @@
+# Vue 3 + TypeScript + Vite
+
+This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+## Recommended IDE Setup
+
+- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
+
+## Type Support For `.vue` Imports in TS
+
+TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
+
+If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
+
+1. Disable the built-in TypeScript Extension
+   1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette
+   2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
+2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
diff --git a/demo/bpmn-and-engine/index.html b/demo/bpmn-and-engine/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Vue + TS</title>
+    <link
+      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
+      crossorigin="anonymous"
+    />
+    <script
+      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
+      integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
+      crossorigin="anonymous"
+    ></script>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/demo/bpmn-and-engine/package.json b/demo/bpmn-and-engine/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "bpmn-and-engine",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@logicflow/core": "^1.2.17",
+    "@logicflow/engine": "^0.0.10",
+    "@logicflow/extension": "^1.2.18",
+    "fast-glob": "^3.3.1",
+    "vue": "^3.3.4"
+  },
+  "devDependencies": {
+    "@preact/preset-vite": "^2.6.0",
+    "@vitejs/plugin-vue": "^4.2.3",
+    "less": "^4.2.0",
+    "typescript": "^5.0.2",
+    "vite": "^4.4.5",
+    "vite-plugin-svg-icons": "^2.0.1",
+    "vue-tsc": "^1.8.5"
+  }
+}
diff --git a/demo/bpmn-and-engine/public/vite.svg b/demo/bpmn-and-engine/public/vite.svg
diff --git a/demo/bpmn-and-engine/src/App.vue b/demo/bpmn-and-engine/src/App.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import App from './pages/index.vue'
+</script>
+
+<template>
+  <App />
+</template>
+
+<style scoped>
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.vue:hover {
+  filter: drop-shadow(0 0 2em #42b883aa);
+}
+</style>
diff --git a/demo/bpmn-and-engine/src/assets/vue.svg b/demo/bpmn-and-engine/src/assets/vue.svg
diff --git a/demo/bpmn-and-engine/src/components/FlowController.vue b/demo/bpmn-and-engine/src/components/FlowController.vue
@@ -0,0 +1,91 @@
+<template>
+  <div class="flow-controller">
+    <div v-for="item in config" :key="item.id">
+      <SvgIcon
+        :iconClass="item.class"
+        @mousedown.native="item.onClick"
+        style="width: 20px"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onBeforeUnmount, ref } from "vue";
+import SvgIcon from "./SvgIcon.vue";
+const props = defineProps({
+  engine: Object,
+  lf: Object,
+});
+
+const path = ref([]);
+
+function findExecutePath(records: any[]) {
+  records.forEach((record: any) => {
+    const { outgoing } = record;
+    outgoing.forEach((item) => {
+      const p = records.find((r: any) => r.nodeId === item.target);
+      if (p) {
+        path.value.push(item);
+      }
+    });
+  });
+  path.value.forEach((item) => {
+    props.lf.openEdgeAnimation(item.id);
+  });
+}
+
+onBeforeUnmount(() => {
+  path.value.forEach((item) => {
+    props.lf.closeEdgeAnimation(item.id);
+  });
+});
+
+const config = [
+  {
+    text: "执行",
+    class: "flow-control-play",
+    onClick: async () => {
+      if (path.value.length) {
+        path.value.forEach((item) => {
+          props.lf.getEdgeModelById(item.id) &&
+            props.lf.closeEdgeAnimation(item.id);
+        });
+      }
+      const data = props.lf.getGraphRawData();
+      const flowData = props.engine.load({
+        graphData: data,
+        startNodeType: "bpmn:startEvent",
+      });
+      const result = await props.engine.execute();
+      const records = await props.engine.getExecutionRecord(result.executionId);
+      findExecutePath(records);
+    },
+  },
+  {
+    text: "重置",
+    class: "flow-control-refresh",
+    onClick: () => {
+      path.value.forEach((item) => {
+        props.lf.getEdgeModelById(item.id) &&
+          props.lf.closeEdgeAnimation(item.id);
+      });
+      path.value = [];
+    },
+  },
+];
+</script>
+<style lang="less" scoped>
+.flow-controller {
+  display: flex;
+  background: #ebebeb;
+  position: fixed;
+  top: 5px;
+  right: 50%;
+  border-radius: 5px;
+  box-shadow: 0px 1px 4px 0px #a6a6a6;
+}
+.svg-icon {
+  margin: 0px 5px;
+}
+</style>
diff --git a/demo/bpmn-and-engine/src/components/Panels/components/condition.vue b/demo/bpmn-and-engine/src/components/Panels/components/condition.vue
@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <p class="form-label">条件</p>
+    <input
+      autocomplete="off"
+      style="margin: 6px 0px"
+      :value="target.properties.conditionExpression"
+      id="name-input"
+      type="text"
+      class="form-control"
+      @input="onConditionInput"
+    />
+  </div>
+</template>
+<script setup lang="ts">
+import { inject, ref } from "vue";
+
+const target: any = inject("target");
+
+function onConditionInput(e: any) {
+  target.value.setProperties({
+    conditionExpression: e.currentTarget.value,
+  });
+}
+</script>
diff --git a/demo/bpmn-and-engine/src/components/Panels/components/index.ts b/demo/bpmn-and-engine/src/components/Panels/components/index.ts
@@ -0,0 +1,13 @@
+import { reactive, markRaw, defineAsyncComponent } from 'vue';
+
+const components: any = reactive({
+  normal: markRaw(defineAsyncComponent(() => import('./normal.vue'))),
+  timerDefinition: markRaw(
+    defineAsyncComponent(() => import('./timerDefinition.vue')),
+  ),
+  condition: markRaw(defineAsyncComponent(() => import('./condition.vue'))),
+  variable: markRaw(defineAsyncComponent(() => import('./variable.vue'))),
+  processRef: markRaw(defineAsyncComponent(() => import('./processRef.vue'))),
+});
+
+export default components;
diff --git a/demo/bpmn-and-engine/src/components/Panels/components/normal.vue b/demo/bpmn-and-engine/src/components/Panels/components/normal.vue
@@ -0,0 +1,45 @@
+<template>
+  <strong class="form-label">NORMAL</strong>
+  <div>
+    <p class="form-label">Id</p>
+    <input
+      autocomplete="off"
+      style="margin: 6px 0px"
+      :value="target.id"
+      id="name-input"
+      type="text"
+      class="form-control"
+      @input="onIdInput"
+    />
+    <p class="form-label">Name</p>
+    <input
+      autocomplete="off"
+      style="margin: 6px 0px"
+      :value="target.text.value"
+      id="name-input"
+      type="text"
+      class="form-control"
+      @input="onNameInput"
+    />
+  </div>
+</template>
+<script setup lang="ts">
+import { inject } from 'vue';
+
+const lf: any = inject('lf');
+
+const target: any = inject('target');
+const targetType: string = inject("selectedType");
+
+function onIdInput(e: any) {
+  if (targetType === "node") {
+    lf.changeNodeId(target.value.id, e.currentTarget.value);
+  } else {
+    lf.changeEdgeId(target.value.id, e.currentTarget.value);
+  }
+}
+
+function onNameInput(e: any) {
+  target.value.updateText(e.currentTarget.value);
+}
+</script>
diff --git a/demo/bpmn-and-engine/src/components/Panels/components/panels.vue b/demo/bpmn-and-engine/src/components/Panels/components/panels.vue
@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <div v-for="item in panels" :key="item">
+      <component :is="components[item]"></component>
+    </div>
+
+    <div v-for="item in target.properties.panels" :key="item.key">
+      <component :is="components[item]"></component>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { watchEffect, inject, provide, ref } from "vue";
+import components from ".";
+
+
+const lf: any = inject("lf");
+const selectedOne: any = inject("selectedOne");
+const selectedType: any = inject("selectedType");
+
+const panels = ref([]);
+
+const target: any = ref({});
+
+watchEffect(() => {
+  target.value =
+    selectedType.value === "node"
+      ? lf.getNodeModelById(selectedOne.value)
+      : lf.getEdgeModelById(selectedOne.value);
+  panels.value =
+    selectedType.value === "node" ? ["normal"] : ["normal", "condition"];
+});
+
+provide("target", target);
+</script>
diff --git a/demo/bpmn-and-engine/src/components/Panels/components/processRef.vue b/demo/bpmn-and-engine/src/components/Panels/components/processRef.vue
@@ -0,0 +1,29 @@
+<template>
+  <strong class="form-label">PROCCESSREF</strong>
+  <div>
+    <p class="form-label">processRef</p>
+    <select
+      name="processRef"
+      class="form-select"
+      style="margin: 6px 0px"
+      :value="target.properties.processRef"
+      @change="onProcessRefTypeChange"
+    >
+      <option value="">none</option>
+      <!-- <option value="parallel">parallel</option>
+      <option value="sequential">sequential</option> -->
+      <!-- <option value="loop">loop</option> -->
+    </select>
+  </div>
+</template>
+<script setup lang="ts">
+import { inject } from 'vue';
+
+const target: any = inject('target');
+
+function onProcessRefTypeChange(e: any) {
+  target.value.setProperties({
+    processRef: e.target.value,
+  });
+}
+</script>