アクションフローの不具合改修

frontend/src/components/main/NodeLine.vue

@@ -1,11 +1,28 @@
 <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>
+    <div class="row justify-center">
+      <svg class="node-line" style="width:100%" :viewBox="viewBox()">
+        <template v-if="!node.outputPoints || node.outputPoints.length===0" >
+          <polyline :points="points(getMode('')).linePoints" class="line" ></polyline>
+          <text class="add-icon"
+          @click="addNode(node,'')"
+          :x="points(getMode('')).iconPoint.x"
+          :y="points(getMode('')).iconPoint.y"
+          font-family="Arial" font-size="25"
+          text-anchor="middle" dy=".3em" style="cursor: pointer;" >
+            ⊕
+          </text>
+        </template>
+        <template v-for="(point, index) in node.outputPoints" :key="index" >
+          <polyline :points="points(getMode(point)).linePoints" class="line" ></polyline>
+          <text class="add-icon"
+          @click="addNode(node,point)"
+          :x="points(getMode(point)).iconPoint.x"
+          :y="points(getMode(point)).iconPoint.y"
+          font-family="Arial" font-size="25"
+          text-anchor="middle" dy=".3em" style="cursor: pointer;" >
+            ⊕
+          </text>
+        </template>
       </svg>
     </div>
 </template>
@@ -27,55 +44,97 @@ export default defineComponent({
       type: Object as PropType<IActionNode>,
       required: true
     },
-    mode: {
-      type: String as PropType<Direction>,
-      required: true
+    leftColumns:{
+      type:Number,
+      required:false
     },
-    inputPoint:{
-      type:String
+    rightColumns:{
+      type:Number,
+      required:false
     }
   },
   emits: ['addNode'],
   setup(props,context) {
     const hasBranch = computed(() => props.actionNode.outputPoints.length > 0);
-    const points = computed(() => {
-      switch (props.mode) {
-        case Direction.Left:
+    const getMode = (point: string):Direction => {
+      if (point === '' || props.actionNode.outputPoints.length === 0) {
+        return Direction.Default;
+      }
+      if (point === props.actionNode.outputPoints[0]) {
+        if (props.actionNode.nextNodeIds.get(point)) {
+          return Direction.Left;
+        } else {
+          return Direction.LeftNotNext;
+        }
+      } else {
+        if (props.actionNode.nextNodeIds.get(point)) {
+          return Direction.Right;
+        } else {
+          return Direction.RightNotNext;
+        }
+      }
+    }
+
+    const points = (mode:Direction) => {
+      let startX ,endX;
+      const leftColumn=props.leftColumns?props.leftColumns:1;
+      const rightColumn=props.rightColumns?props.rightColumns:1;
+
+      switch (mode) {
+         case Direction.Left:
+          startX = leftColumn*300/2.0;
+          endX = ((leftColumn+rightColumn)/2.0 - 0.25)*300;
           return {
-            linePoints: '180, 0, 180, 40, 120, 40, 120, 60',
-            iconPoint: { x: 180, y: 20 }
+            linePoints: `${startX}, 60, ${startX}, 40, ${endX}, 40, ${endX}, 0`,
+            iconPoint: { x: endX, y: 20 }
           };
         case Direction.Right:
+          startX = ((leftColumn+rightColumn)/2.0 + 0.25)*300;
+          endX = (leftColumn+(rightColumn/2.0))*300;
           return {
-            linePoints: '60, 0, 60, 40, 120, 40, 120, 60',
-            iconPoint: { x: 60, y: 20 }
+            linePoints: `${startX}, 0, ${startX}, 40, ${endX}, 40, ${endX}, 60`,
+            iconPoint: { x: startX, y: 20 }
           };
         case Direction.LeftNotNext:
+          startX = ((leftColumn+rightColumn)/2.0 - 0.25)*300;
           return {
-            linePoints: '180, 0, 180, 40',
-            iconPoint: { x: 180, y: 20 }
+            linePoints: `${startX}, 0, ${startX}, 40`,
+            iconPoint: { x: startX, y: 20 }
           };
         case Direction.RightNotNext:
+          startX = ((leftColumn+rightColumn)/2.0 + 0.25)*300;
           return {
-            linePoints: '60, 0, 60, 40',
-            iconPoint: { x: 60, y: 30 }
+            linePoints: `${startX}, 0, ${startX}, 40`,
+            iconPoint: { x: startX, y: 20 }
           };
         default:
           return {
-            linePoints: '120, 0, 120, 60',
-            iconPoint: { x: 120, y: 30 }
+            linePoints: '150, 0, 150, 60',
+            iconPoint: { x: 150, y: 30 }
           };
       }
-    });
-    const addNode=(prveNode:IActionNode)=>{
-      context.emit('addNode',props.inputPoint);
+    };
+
+    const addNode=(prveNode:IActionNode,point:string)=>{
+      context.emit('addNode',point);
     }
 
+    const viewBox=()=>{
+      let columns=0;
+      if(props.leftColumns!==undefined) columns+=props.leftColumns;
+      if(props.rightColumns!==undefined) columns+=props.rightColumns;
+      if(columns===0) columns=1;
+      const width= columns*300;
+      return `0 0 ${width} 60`;
+    };
+
     return {
       node: props.actionNode,
+      getMode,
       hasBranch,
       points,
-      addNode
+      addNode,
+      viewBox
     }
   }
 });