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

frontend/src/components/main/NodeItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="row justify-center" :style="{ marginLeft: node.inputPoint !== '' ? '240px' : '' }" >
+  <div class="row justify-center no-wrap" >
     <div class="row">
       <q-card class="action-node" :class="nodeStyle" :square="false" @click="onNodeClick" >
         <q-toolbar class="col" >
@@ -29,7 +29,7 @@
           </q-btn>
         </q-toolbar>
         <q-separator />
-        <q-card-section>
+        <q-card-section class="action-title">
           <div class="row">
           <span class="text-h7">{{ node.title }}</span>
           <q-space></q-space>
@@ -48,23 +48,34 @@
     </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>
+    <node-line :action-node="node"  @addNode="addNode" :left-columns="leftColumns" :right-columns="rightColumns"></node-line>
+    <div class="row justify-center no-wrap" >
+      <div v-for="(point, index) in node.outputPoints" :key="index" class="column" style="min-width: 300px;">
+        <div class="justify-center" >
+          <node-item v-if="nextNode(point)!==undefined" :key="nextNode(point).id" :isSelected="nextNode(point) === store.activeNode"
+            :actionNode="nextNode(point)" @addNode="addNodeFromItem" @nodeSelected="onNodeSelected" @nodeEdit="onNodeEdit"
+            @deleteNode="onDeleteNodeFromItem" @deleteAllNextNodes="onDeleteAllNextNodes" ></node-item>
+        </div>
       </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 class="row justify-center no-wrap" >
+      <node-line :action-node="node"  @addNode="addNode" ></node-line>
+    </div>
+    <div>
+    <node-item v-if="nextNode('')!==undefined" :key="nextNode('').id" :isSelected="nextNode('') === store.activeNode"
+            :actionNode="nextNode('')" @addNode="addNodeFromItem" @nodeSelected="onNodeSelected" @nodeEdit="onNodeEdit"
+            @deleteNode="onDeleteNodeFromItem" @deleteAllNextNodes="onDeleteAllNextNodes" ></node-item>
     </div>
   </template>
 </template>
 
 <script lang="ts">
 import { defineComponent, computed, ref } from 'vue';
-import { IActionNode } from '../../types/ActionTypes';
+import { IActionNode, IActionProperty } from '../../types/ActionTypes';
 import NodeLine, { Direction } from '../main/NodeLine.vue';
+import { useFlowEditorStore } from 'stores/flowEditor';
 export default defineComponent({
   name: 'NodeItem',
   components: {
@@ -88,6 +99,7 @@ export default defineComponent({
     "copyFlow"
   ],
   setup(props, context) {
+    const store = useFlowEditorStore();
     const hasBranch = computed(() => props.actionNode.outputPoints.length > 0);
     const nodeStyle = computed(() => {
       return {
@@ -96,23 +108,11 @@ export default defineComponent({
         'selected': props.isSelected && !props.actionNode.isRoot
       };
     });
-    const getMode = (point: string) => {
-      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 nextNode=(point:string)=>{
+        const nextId= props.actionNode.nextNodeIds.get(point);
+        if(!nextId) return undefined;
+        return store.currentFlow?.findNodeById(nextId);
     }
     /**
      * アクションノード追加イベントを
@@ -121,6 +121,38 @@ export default defineComponent({
     const addNode = (point: string) => {
       context.emit('addNode', props.actionNode, point);
     }
+    /**
+     * アクションノード追加イベントを
+     * @param point 入力ポイント
+     */
+     const addNodeFromItem = (node:IActionNode,point: string) => {
+      context.emit('addNode', node, point);
+    }
+
+    const leftColumns=computed(()=>{
+      if(!props.actionNode.outputPoints || props.actionNode.outputPoints.length<2){
+          return 1;
+      }
+      const leftNode = nextNode(props.actionNode.outputPoints[0]);
+      if(leftNode){
+        return store.currentFlow?.getColumns(leftNode);
+      }else{
+        return 1;
+      }
+    });
+
+    const rightColumns=computed(()=>{
+      if(!props.actionNode.outputPoints || props.actionNode.outputPoints.length<2){
+          return 1;
+      }
+      const rightNode = nextNode(props.actionNode.outputPoints[1]);
+      if(rightNode){
+        return store.currentFlow?.getColumns(rightNode);
+      }else{
+        return 1;
+      }
+    });
+
     /**
      * ノード選択状態
      */
@@ -128,9 +160,20 @@ export default defineComponent({
       context.emit('nodeSelected', props.actionNode);
     }
 
+
+    const onNodeSelected = (node: IActionNode) => {
+      context.emit('nodeSelected', node);
+    }
+
     const onEditNode=()=>{
       context.emit('nodeEdit', props.actionNode);
     }
+
+    const onNodeEdit=(node:IActionNode)=>{
+      context.emit('nodeEdit', node);
+    }
+
+
     /**
      * ノードを削除する
      */
@@ -138,12 +181,25 @@ export default defineComponent({
       context.emit('deleteNode', props.actionNode);
     }
 
+      /**
+     * ノードを削除する
+     */
+     const onDeleteNodeFromItem=(node:IActionNode)=>{
+      context.emit('deleteNode', node);
+    }
     /**
      * ノードの以下すべて削除する
      */
      const onDeleteAllNode=()=>{
       context.emit('deleteAllNextNodes', props.actionNode);
     };
+
+    /**
+     * ノードの以下すべて削除する
+     */
+     const onDeleteAllNextNodes=(node:IActionNode)=>{
+      context.emit('deleteAllNextNodes', node);
+    };
     /**
      * 変数名取得
      */
@@ -155,25 +211,38 @@ export default defineComponent({
       context.emit('copyFlow', props.actionNode);
     }
     return {
+      store,
       node: props.actionNode,
+      nextNode,
       isRoot: props.actionNode.isRoot,
       hasBranch,
       nodeStyle,
-      getMode,
+      // getMode,
       addNode,
+      addNodeFromItem,
       onNodeClick,
+      onNodeSelected,
       onEditNode,
+      onNodeEdit,
       onDeleteNode,
+      onDeleteNodeFromItem,
       onDeleteAllNode,
+      onDeleteAllNextNodes,
       copyFlow,
-      varName
+      varName,
+      leftColumns,
+      rightColumns
     }
   }
 });
 </script>
 <style lang="scss">
 .action-node {
-  min-width: 300px !important;
+  min-width: 280px !important;
+}
+.action-title{
+  max-width: 280px !important;
+  overflow-wrap: anywhere;
 }
 
 .line {