flowChart初期実装

frontend/src/components/main/NodeItem.vue

@@ -0,0 +1,107 @@
+<template>
+  <div class="row justify-center" :style="{marginLeft:node.inputPoint!==''?'240px':''}">
+    <div class="row">
+      <q-card class="action-node" :class="{'root-node':node.isRoot,'text-white':node.isRoot}" :square="false">
+        <q-card-section>
+          <div class="text-h6">{{ node.title }}</div>
+          <div class="text-subtitle2">{{ node.subTitle }}</div>
+        </q-card-section>
+        <template v-if="hasBranch">
+            <q-separator />
+            <q-card-actions align="around">
+              <q-btn flat v-for="(point,index) in node.outputPoints" :key="index">
+                {{ point }}
+              </q-btn>
+            </q-card-actions>
+        </template>
+      </q-card>
+    </div>
+  </div>
+  <template v-if="hasBranch">
+    <div class="row justify-center" :style="{marginLeft:node.inputPoint!==''?'240px':''}">
+      <div v-for="(point,index) in node.outputPoints" :key="index">
+        <node-line :action-node="node" :mode="getMode(point)" @addNode="addNode" :input-point="point" ></node-line>
+      </div>
+    </div>
+  </template>
+  <template v-if="!hasBranch">
+    <div class="row justify-center" :style="{marginLeft:node.inputPoint!==''?'240px':''}">
+      <node-line :action-node="node" :mode="getMode('')" @addNode="addNode" input-point=""></node-line>
+    </div>
+  </template>
+
+</template>
+
+<script lang="ts">
+import {defineComponent,computed} from 'vue';
+import {IActionNode } from '../../types/ActionTypes';
+import NodeLine,{Direction} from '../main/NodeLine.vue';
+    export default defineComponent({
+      name: 'NodeItem',
+      components: {
+        NodeLine
+      },
+      props: {
+        actionNode:{
+          type:Object as ()=>IActionNode,
+          required:true
+        }
+      },
+      emits: [
+        'addNode'
+      ],
+      setup(props,context){
+        const hasBranch = computed(() => props.actionNode.outputPoints.length > 0);
+        const getMode =(point:string)=>{
+            if(point==='' || props.actionNode.outputPoints.length===0){
+              return Direction.Default;
+            }
+            if(point===props.actionNode.outputPoints[0]){
+              if(props.actionNode.nextNodes.get(point)){
+                return Direction.Left;
+              }else{
+                return Direction.LeftNotNext;
+              }
+            }else{
+              if(props.actionNode.nextNodes.get(point)){
+                return Direction.Right;
+              }else{
+                return Direction.RightNotNext;
+              }
+            }
+        }
+        const addNode=(point:string)=>{
+          context.emit('addNode',props.actionNode,point);
+        }
+        return {
+          node:props.actionNode,
+          hasBranch,
+          isRoot:props.actionNode.isRoot,
+          getMode,
+          addNode
+        }
+      }
+    });
+</script>
+<style lang="scss">
+.action-node{
+  min-width:250px !important;
+}
+.line{
+  height:20px;
+}
+.line:after{
+  content:'';
+  background-color:$blue-7;
+  display:block;
+  width:3px;
+}
+.add-icon{
+  font-size: 2em;
+  color:$blue-7;
+}
+.root-node{
+  background-color:$blue-7;
+  border-radius: 20px;
+}
+</style>

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>

frontend/src/components/models.ts

@@ -32,4 +32,3 @@ export interface AppInfo {
   creator?:User;
   modifier?:User;
 }
-