flowChart初期実装

2023-09-08 13:31:41 +09:00
parent cccff1d16d
commit 973ba159b4
6 changed files with 507 additions and 19 deletions
--- a/frontend/src/components/main/NodeLine.vue
+++ b/frontend/src/components/main/NodeLine.vue
@@ -0,0 +1,99 @@
+<template>
+    <div>
+      <svg class="node-line">
+        <polyline :points="points.linePoints" class="line" ></polyline>
+        <text class="add-icon" @click="addNode(node)" :x="points.iconPoint.x" :y="points.iconPoint.y" font-family="Arial" font-size="25" text-anchor="middle" dy=".3em" style="cursor: pointer;" >
+          ⊕
+        </text>
+      </svg>
+    </div>
+</template>
+
+<script lang="ts">
+import { ref, defineComponent, computed, PropType } from 'vue';
+import { IActionNode, ActionNode, ActionFlow, RootAction } from '../../types/ActionTypes';
+export enum Direction {
+  Default = "None",
+  Left = "LEFT",
+  Right = "RIGHT",
+  LeftNotNext = "LEFTNOTNEXT",
+  RightNotNext = "RIGHTNOTNEXT",
+}
+export default defineComponent({
+  name: 'NodeLine',
+  props: {
+    actionNode: {
+      type: Object as PropType<IActionNode>,
+      required: true
+    },
+    mode: {
+      type: String as PropType<Direction>,
+      required: true
+    },
+    inputPoint:{
+      type:String
+    }
+  },
+  emits: ['addNode'],
+  setup(props,context) {
+    const hasBranch = computed(() => props.actionNode.outputPoints.length > 0);
+    const points = computed(() => {
+      switch (props.mode) {
+        case Direction.Left:
+          return {
+            linePoints: '180, 0, 180, 40, 120, 40, 120, 60',
+            iconPoint: { x: 180, y: 20 }
+          };
+        case Direction.Right:
+          return {
+            linePoints: '60, 0, 60, 40, 120, 40, 120, 60',
+            iconPoint: { x: 60, y: 20 }
+          };
+        case Direction.LeftNotNext:
+          return {
+            linePoints: '180, 0, 180, 40',
+            iconPoint: { x: 180, y: 20 }
+          };
+        case Direction.RightNotNext:
+          return {
+            linePoints: '60, 0, 60, 40',
+            iconPoint: { x: 60, y: 30 }
+          };
+        default:
+          return {
+            linePoints: '120, 0, 120, 60',
+            iconPoint: { x: 120, y: 30 }
+          };
+      }
+    });
+    const addNode=(prveNode:IActionNode)=>{
+      context.emit('addNode',props.inputPoint);
+    }
+    return {
+      node: props.actionNode,
+      hasBranch,
+      points,
+      addNode
+    }
+  }
+});
+</script>
+<style lang="scss">
+.node-line {
+  height: 60px;
+  width: 240px;
+}
+
+.line {
+  stroke: $blue-7;
+  fill: none;
+  stroke-width: 2;
+}
+
+.add-icon {
+  stroke: $blue-7;
+  fill: $blue-7;
+  font-family: Arial;
+  pointer-events: all;
+}
+</style>