From 142cdcda3832d7a13f4c36f210a0859c856a50d7 Mon Sep 17 00:00:00 2001
From: "maxiaozhe@alicorns.co.jp" <maxiaozhe@alicorns.co.jp>
Date: Sun, 10 Sep 2023 01:15:40 +0900
Subject: [PATCH] =?UTF-8?q?=E3=83=97=E3=83=AD=E3=83=91=E3=83=86=E3=82=A3?=
 =?UTF-8?q?=E5=B1=9E=E6=80=A7=E8=A8=AD=E5=AE=9A=E9=80=A3=E5=8B=95=E5=AE=9F?=
 =?UTF-8?q?=E8=A3=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/package-lock.json                    |  19 +-
 frontend/package.json                         |   2 +
 frontend/src/components/Rules.ts              |   9 -
 frontend/src/components/main/NodeItem.vue     |  51 ++++-
 .../src/components/right/PropertyList.vue     |  45 ++++
 .../src/components/right/PropertyPanel.vue    |  80 +++++++
 frontend/src/pages/FlowChartTest.vue          |  60 ++++-
 frontend/src/types/ActionTypes.ts             | 213 +++++++++++++-----
 frontend/yarn.lock                            |  10 +
 9 files changed, 407 insertions(+), 82 deletions(-)
 delete mode 100644 frontend/src/components/Rules.ts
 create mode 100644 frontend/src/components/right/PropertyList.vue
 create mode 100644 frontend/src/components/right/PropertyPanel.vue

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 82d6da2..c594e10 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -11,12 +11,14 @@
         "@quasar/extras": "^1.16.4",
         "axios": "^1.4.0",
         "quasar": "^2.6.0",
+        "uuid": "^9.0.0",
         "vue": "^3.0.0",
         "vue-router": "^4.0.0"
       },
       "devDependencies": {
         "@quasar/app-vite": "^1.3.0",
         "@types/node": "^12.20.21",
+        "@types/uuid": "^9.0.3",
         "@typescript-eslint/eslint-plugin": "^5.10.0",
         "@typescript-eslint/parser": "^5.10.0",
         "autoprefixer": "^10.4.2",
@@ -28,8 +30,9 @@
         "typescript": "^4.5.4"
       },
       "engines": {
-        "node": "^18 || ^16 || ^14.19",
+        "node": "^20 ||^18 || ^16 || ^14.19",
         "npm": ">= 6.13.4",
+        "pnpm": ">=8.6.0",
         "yarn": ">= 1.21.1"
       }
     },
@@ -544,6 +547,12 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/uuid": {
+      "version": "9.0.3",
+      "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.3.tgz",
+      "integrity": "sha512-taHQQH/3ZyI3zP8M/puluDEIEvtQHVYcC6y3N8ijFtAd28+Ey/G4sg1u2gB01S8MwybLOKAp9/yCMu/uR5l3Ug==",
+      "dev": true
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "5.61.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.61.0.tgz",
@@ -5045,6 +5054,14 @@
         "node": ">= 0.4.0"
       }
     },
+    "node_modules/uuid": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.0.tgz",
+      "integrity": "sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg==",
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 8fddf22..79f5df7 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -16,12 +16,14 @@
     "@quasar/extras": "^1.16.4",
     "axios": "^1.4.0",
     "quasar": "^2.6.0",
+    "uuid": "^9.0.0",
     "vue": "^3.0.0",
     "vue-router": "^4.0.0"
   },
   "devDependencies": {
     "@quasar/app-vite": "^1.3.0",
     "@types/node": "^12.20.21",
+    "@types/uuid": "^9.0.3",
     "@typescript-eslint/eslint-plugin": "^5.10.0",
     "@typescript-eslint/parser": "^5.10.0",
     "autoprefixer": "^10.4.2",
diff --git a/frontend/src/components/Rules.ts b/frontend/src/components/Rules.ts
deleted file mode 100644
index 78173c1..0000000
--- a/frontend/src/components/Rules.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export interface Rule{
-  id:number;
-  name:string;
-  condtion:CondtionTree
-}
-
-export interface CondtionTree{
-  
-}
\ No newline at end of file
diff --git a/frontend/src/components/main/NodeItem.vue b/frontend/src/components/main/NodeItem.vue
index 6bd3a5e..3a98a8f 100644
--- a/frontend/src/components/main/NodeItem.vue
+++ b/frontend/src/components/main/NodeItem.vue
@@ -1,18 +1,24 @@
 <template>
-  <div class="row justify-center" :style="{ marginLeft: node.inputPoint !== '' ? '240px' : '' }" @click="onNodeClick">
+  <div class="row justify-center" :style="{ marginLeft: node.inputPoint !== '' ? '240px' : '' }" >
     <div class="row">
-      <q-card class="action-node" :class="nodeStyle" :square="false" >
+      <q-card class="action-node" :class="nodeStyle" :square="false" @click="onNodeClick" >
         <q-toolbar class="col" >
           <div class="text-subtitle2">{{ node.subTitle }}</div>
           <q-space></q-space>
-          <q-btn flat round dense icon="more_horiz" >
+          <q-btn flat round dense icon="more_horiz" size="sm" >
             <q-menu  auto-close anchor="top right">
                 <q-list>
-                  <q-item clickable v-if="!isRoot">
+                  <q-item clickable v-if="!isRoot" @click="onEditNode">
+                    <q-item-section avatar><q-icon name="edit" ></q-icon></q-item-section>
+                    <q-item-section >編集する</q-item-section>
+                  </q-item>
+                  <q-item clickable v-if="!isRoot"  @click="onDeleteNode">
+                    <q-item-section avatar><q-icon name="delete" ></q-icon></q-item-section>
                     <q-item-section>削除する</q-item-section>
                   </q-item>
-                  <q-item clickable>
-                    <q-item-section>以下すべて削除する</q-item-section>
+                  <q-item clickable @click="onDeleteAllNode">
+                    <q-item-section avatar><q-icon name="delete_sweep" ></q-icon></q-item-section>
+                    <q-item-section >以下すべて削除する</q-item-section>
                   </q-item>
                 </q-list>
               </q-menu>
@@ -67,7 +73,10 @@ export default defineComponent({
   },
   emits: [
     'addNode',
-    "nodeSelected"
+    "nodeSelected",
+    "nodeEdit",
+    "deleteNode",
+    "deleteAllNextNodes",
   ],
   setup(props, context) {
     const hasBranch = computed(() => props.actionNode.outputPoints.length > 0);
@@ -83,13 +92,13 @@ export default defineComponent({
         return Direction.Default;
       }
       if (point === props.actionNode.outputPoints[0]) {
-        if (props.actionNode.nextNodes.get(point)) {
+        if (props.actionNode.nextNodeIds.get(point)) {
           return Direction.Left;
         } else {
           return Direction.LeftNotNext;
         }
       } else {
-        if (props.actionNode.nextNodes.get(point)) {
+        if (props.actionNode.nextNodeIds.get(point)) {
           return Direction.Right;
         } else {
           return Direction.RightNotNext;
@@ -109,6 +118,23 @@ export default defineComponent({
     const onNodeClick = () => {
       context.emit('nodeSelected', props.actionNode);
     }
+
+    const onEditNode=()=>{
+      context.emit('nodeEdit', props.actionNode);
+    }
+    /**
+     * ノードを削除する
+     */
+    const onDeleteNode=()=>{
+      context.emit('deleteNode', props.actionNode);
+    }
+
+    /**
+     * ノードの以下すべて削除する
+     */
+     const onDeleteAllNode=()=>{
+      context.emit('deleteAllNextNodes', props.actionNode);
+    }
     return {
       node: props.actionNode,
       isRoot: props.actionNode.isRoot,
@@ -116,7 +142,10 @@ export default defineComponent({
       nodeStyle,
       getMode,
       addNode,
-      onNodeClick
+      onNodeClick,
+      onEditNode,
+      onDeleteNode,
+      onDeleteAllNode
     }
   }
 });
@@ -152,6 +181,6 @@ export default defineComponent({
 }
 
 .selected{
-  background-color: $light-blue-1;
+  background-color: $yellow-1;
 }
 </style>
diff --git a/frontend/src/components/right/PropertyList.vue b/frontend/src/components/right/PropertyList.vue
new file mode 100644
index 0000000..7a5a68a
--- /dev/null
+++ b/frontend/src/components/right/PropertyList.vue
@@ -0,0 +1,45 @@
+<template>
+  <div>
+    <div v-for="(item, index) in properties" :key="index">
+      <component :is="item.component" v-bind="item.props" v-model="item.props.modelValue"></component>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+/**
+ * プロパティ属性設定生成する
+ */
+import { PropType, defineComponent,ref } from 'vue';
+import InputText from '../right/InputText.vue';
+import SelectBox from '../right/SelectBox.vue';
+import DatePicker from '../right/DatePicker.vue';
+import FieldInput from '../right/FieldInput.vue';
+import { IActionNode,IActionProperty } from 'src/types/ActionTypes';
+
+export default defineComponent({
+  name: 'PropertyList',
+  components: {
+    InputText,
+    SelectBox,
+    DatePicker,
+    FieldInput
+  },
+  props: {
+    nodeProps: {
+      type: Object as PropType<Array<IActionProperty>>,
+      required: true,
+    },
+    jsonValue:{
+      type: Object,
+      required: false,
+    }
+  },
+  setup(props, context) {
+    const properties=ref(props.nodeProps)
+    return {
+      properties
+    }
+  }
+});
+</script>
diff --git a/frontend/src/components/right/PropertyPanel.vue b/frontend/src/components/right/PropertyPanel.vue
new file mode 100644
index 0000000..bd459ea
--- /dev/null
+++ b/frontend/src/components/right/PropertyPanel.vue
@@ -0,0 +1,80 @@
+<template>
+  <div class="q-pa-md q-gutter-sm">
+    <q-drawer
+         side="right"
+         :show-if-above="false"
+         bordered
+         :width="301"
+         :breakpoint="500"
+         class="bg-grey-3"
+         :model-value="showPanel"
+         elevated
+         overlay
+       >
+        <q-card class="column full-height" style="width: 300px">
+         <q-card-section>
+           <div class="text-h6">プロパティ</div>
+         </q-card-section>
+         <q-card-section class="col q-pt-none">
+           <property-list :node-props="actionProps" v-if="showPanel" ></property-list>
+         </q-card-section>
+
+         <q-card-actions align="right" class="bg-white text-teal">
+           <q-btn flat label="Save"  @click="save"/>
+           <q-btn flat label="Cancel" @click="cancel" />
+         </q-card-actions>
+       </q-card>
+   </q-drawer>
+   </div>
+ </template>
+ <script lang="ts">
+ import { reactive, ref,defineComponent, defineProps,PropType ,watchEffect} from 'vue'
+ import PropertyList from 'components/right/PropertyList.vue';
+import { IActionNode } from 'src/types/ActionTypes';
+ export default defineComponent({
+  name: 'PropertyPanel',
+  components: {
+    PropertyList
+  },
+  props: {
+    actionNode:{
+      type:Object as PropType<IActionNode>,
+      required:true
+    },
+    drawerRight:{
+      type:Boolean,
+      required:true
+    }
+  },
+  emits: [
+    "update:drawerRight"
+  ],
+  setup(props,{emit}) {
+    const showPanel =ref(props.drawerRight);
+    const actionProps =ref(props.actionNode.actionProps);
+    watchEffect(() => {
+      showPanel.value = props.drawerRight;
+      actionProps.value= props.actionNode.actionProps;
+    });
+
+    const cancel = async() =>{
+      showPanel.value = false;
+      emit("update:drawerRight",false )
+    }
+
+    const save = async () =>{
+      showPanel.value=false;
+      emit("update:drawerRight",false )
+    }
+
+    return {
+      cancel,
+      save,
+      actionProps,
+      showPanel
+    }
+  }
+});
+ </script>
+ <style lang="scss">
+</style>
diff --git a/frontend/src/pages/FlowChartTest.vue b/frontend/src/pages/FlowChartTest.vue
index da19598..cd533d7 100644
--- a/frontend/src/pages/FlowChartTest.vue
+++ b/frontend/src/pages/FlowChartTest.vue
@@ -1,34 +1,66 @@
 <template>
   <q-page>
       <div class="flowchart">
-        <node-item v-for="(node,index) in refFlow.actionNodes" :key="index"
-         :isSelected="node===activeNode" :actionNode="node"
-         @addNode="addNode" @nodeSelected="onNodeSelected"></node-item>
+        <node-item v-for="(node,) in refFlow.actionNodes" :key="node.id"
+         :isSelected="node===state.activeNode" :actionNode="node"
+         @addNode="addNode"
+         @nodeSelected="onNodeSelected"
+         @nodeEdit="onNodeEdit"
+         @deleteNode="onDeleteNode"
+         @deleteAllNextNodes="onDeleteAllNextNodes"
+         ></node-item>
       </div>
   </q-page>
+  <PropertyPanel :actionNode="state.activeNode" v-model:drawerRight="drawerRight"></PropertyPanel>
   <show-dialog v-model:visible="showAddAction" name="アクション" @close="closeDg">
       <action-select ref="appDg" name="アクション" type="single"></action-select>
   </show-dialog>
 </template>
 
 <script setup lang="ts">
-import {ref} from 'vue';
-import {IActionNode, ActionNode, IActionFlow, ActionFlow,RootAction } from 'src/types/ActionTypes';
+import {ref,reactive,computed} from 'vue';
+import {IActionNode, ActionNode, IActionFlow, ActionFlow,RootAction, IActionProperty } from 'src/types/ActionTypes';
 import NodeItem from 'src/components/main/NodeItem.vue';
 import ShowDialog from 'components/ShowDialog.vue';
 import ActionSelect from 'components/ActionSelect.vue';
+import PropertyPanel from 'components/right/PropertyPanel.vue';
+
 
 const rootNode:RootAction =new RootAction("app.record.create.submit","レコード追加画面","保存するとき");
 const actionFlow: ActionFlow = new ActionFlow(rootNode);
-actionFlow.addNode(new ActionNode('自動採番','文書番号を自動採番する',''));
+const saibanProps:[IActionProperty]=[{
+  component:"InputText",
+  props:{
+    displayName:"フォーマット",
+    modelValue:"",
+    name:"format",
+    placeholder:"フォーマットを入力してください",
+  }
+},{
+  component:"FieldInput",
+  props:{
+    displayName:"採番項目",
+    modelValue:"",
+    name:"filed",
+    placeholder:"採番項目を選択してください",
+  }
+}];
+
+
+actionFlow.addNode(new ActionNode('自動採番','文書番号を自動採番する','',[],saibanProps));
 actionFlow.addNode(new ActionNode('入力データ取得','電話番号を取得する',''));
 const branchNode = actionFlow.addNode(new ActionNode('条件分岐','電話番号入力形式チャック','',['はい','いいえ'] ));
+actionFlow.addNode(new ActionNode('入力データ取得','住所を取得する',''),branchNode,'はい');
 actionFlow.addNode(new ActionNode('エラー表示','エラー表示して保存しない',''),branchNode,'いいえ' );
 
 // ref関数を使ってtemplateとバインド
+const state=reactive({
+  activeNode:rootNode,
+})
+
 const refFlow = ref(actionFlow);
 const showAddAction=ref(false);
-const activeNode =ref(rootNode);
+const drawerRight=ref(false);
 
 const addActionNode=(action:IActionNode)=>{
   refFlow.value.actionNodes.push(action);
@@ -39,9 +71,21 @@ const addNode=(node:IActionNode,inputPoint:string)=>{
 }
 
 const onNodeSelected=(node:IActionNode)=>{
-  activeNode.value=node;
+  state.activeNode = node;
 }
 
+const onNodeEdit=(node:IActionNode)=>{
+  state.activeNode = node;
+  drawerRight.value=true;
+}
+
+const onDeleteNode=(node:IActionNode)=>{
+  refFlow.value.removeNode(node);
+}
+
+const onDeleteAllNextNodes=(node:IActionNode)=>{
+  refFlow.value.removeNode(node);
+}
 const closeDg=(val :any)=>{
   console.log("Dialog closed->",val);
 }
diff --git a/frontend/src/types/ActionTypes.ts b/frontend/src/types/ActionTypes.ts
index eaecb6a..6fae667 100644
--- a/frontend/src/types/ActionTypes.ts
+++ b/frontend/src/types/ActionTypes.ts
@@ -1,7 +1,10 @@
+import { v4 as uuidv4 } from 'uuid';
+
+
 /**
- * アクションのプロパティ定義
+* アクションのプロパティ定義
  */
-interface IActionProperty {
+export interface IActionProperty {
   component: string;
   props: {
     //プロパティ名
@@ -31,8 +34,8 @@ export interface IActionNode{
   actionProps:Array<IActionProperty>;
   //アクションのプロパティ設定値抽出
   ActionValue:object
-  prevNode?: IActionNode;
-  nextNodes:Map<string,IActionNode>;
+  prevNodeId?: string;
+  nextNodeIds: Map<string, string>;
 }
 /**
  * アクションフローの定義
@@ -57,7 +60,7 @@ class ActionProperty implements IActionProperty {
   };
 
   static defaultProperty():IActionProperty{
-    return new ActionProperty("InputText","displayName","表示名","表示を入力してください","");
+    return new ActionProperty('InputText','displayName','表示名','表示を入力してください','');
   };
 
   constructor(
@@ -104,8 +107,8 @@ export class ActionNode implements IActionNode {
     });
     return propValue;
   };
-  prevNode?: IActionNode;
-  nextNodes:Map<string,IActionNode>;
+  prevNodeId?: string;
+  nextNodeIds: Map<string, string>;
   constructor(
     name: string,
     title:string,
@@ -113,7 +116,7 @@ export class ActionNode implements IActionNode {
     outputPoint: Array<string> = [],
     actionProps: Array<IActionProperty> =[ActionProperty.defaultProperty()]
   ) {
-    this.id='';
+    this.id=uuidv4();
     this.name = name;
     this.title=title;
     this.inputPoint=inputPoint;
@@ -125,7 +128,7 @@ export class ActionNode implements IActionNode {
     if(prop===undefined){
       this.actionProps.unshift(defProp);
     }
-    this.nextNodes=new Map();
+    this.nextNodeIds=new Map<string,string>();
   }
 
 }
@@ -143,14 +146,14 @@ export class RootAction implements IActionNode {
   isRoot: boolean;
   actionProps: Array<IActionProperty>;
   ActionValue:object;
-  prevNode?: IActionNode=undefined;
-  nextNodes:Map<string,IActionNode>;
+  prevNodeId?: string = undefined;
+  nextNodeIds: Map<string, string>;
   constructor(
     name: string,
     title:string,
     subTitle:string,
   ) {
-    this.id='';
+    this.id=uuidv4();
     this.name = name;
     this.title=title;
     this.subTitle=subTitle;
@@ -159,7 +162,7 @@ export class RootAction implements IActionNode {
     this.isRoot = true;
     this.actionProps=[];
     this.ActionValue={};
-    this.nextNodes=new Map();
+    this.nextNodeIds=new Map<string,string>();
   }
 }
 
@@ -167,11 +170,8 @@ export class RootAction implements IActionNode {
  * アクションフローの定義
  */
 export class ActionFlow implements IActionFlow {
-  nextId:number;
-  actionNodes:Array<IActionNode>;
+   actionNodes:Array<IActionNode>;
   constructor(actionNodes:Array<IActionNode>|RootAction){
-    this.nextId=0;
-
     if(actionNodes instanceof Array){
       this.actionNodes=actionNodes;
     }else{
@@ -192,32 +192,14 @@ export class ActionFlow implements IActionFlow {
       prevNode?:IActionNode,
       inputPoint?:string):IActionNode
   {
-    newNode.id = this.generateId();
     if(inputPoint!==undefined){
       newNode.inputPoint=inputPoint;
     }
-    if(prevNode!==undefined){
-      newNode.prevNode=prevNode;
-      const nextNodes = prevNode.nextNodes;
-      if(nextNodes!==undefined && nextNodes.size>0){
-        const nextNode=inputPoint!==undefined?nextNodes.get(inputPoint):nextNodes.get('');
-        if(nextNode ){
-          nextNode.prevNode=newNode;
-          if(newNode.outputPoints.length>0){
-            if(!newNode.outputPoints.some((point)=>point==nextNode.inputPoint)){
-              nextNode.inputPoint=newNode.outputPoints[0];
-            }
-          }else{
-            nextNode.inputPoint='';
-          }
-          newNode.nextNodes.set(nextNode.inputPoint,nextNode);
-        }
-      }
-      prevNode.nextNodes.set(inputPoint?inputPoint:'',newNode);
+    if(prevNode){
+      this.resetNodeRelation(prevNode,newNode,inputPoint);
     }else{
       prevNode=this.actionNodes[this.actionNodes.length-1];
-      prevNode.nextNodes.set(inputPoint?inputPoint:'',newNode);
-      newNode.prevNode=prevNode;
+      this.resetNodeRelation(prevNode,newNode,inputPoint);
     }
     this.actionNodes.push(newNode);
     return newNode;
@@ -226,25 +208,150 @@ export class ActionFlow implements IActionFlow {
    * ノードを削除する
    * @param delNode
    */
-  removeNode(delNode:IActionNode){
-    const prevNode = delNode;
-    const nextNode = this.findNextNode(delNode);
-    if(nextNode!==undefined){
-      nextNode.prevNode=prevNode;
-      nextNode.inputPoint=delNode.inputPoint;
+  removeNode(targetNode :IActionNode):boolean{
+    if (!targetNode ) {
+      return false;
+    }
+    if(targetNode.isRoot){
+      return false;
+    }
+    this.disconnectFromPrevNode(targetNode);
+    this.reconnectOrRemoveNextNodes(targetNode);
+    this.removeFromActionNodes(targetNode.id);
+    return true;
+}
+/***
+ * 目標ノードの次のノードを全部削除する
+ */
+removeAllNext(targetNodeId :string){
+  if (!targetNodeId || targetNodeId==='') {
+    return false;
+  }
+  const targetNode=this.findNodeById(targetNodeId);
+  if(!targetNode){
+    return false;
+  }
+  if(targetNode.nextNodeIds.size==0){
+    return false;
+  }
+  for (const [, id] of targetNode.nextNodeIds) {
+    this.removeAllNext(id);
+    this.removeFromActionNodes(id);
+  }
+}
+
+// 断开与前一个节点的连接
+disconnectFromPrevNode(targetNode: IActionNode): void {
+  const prevNodeId = targetNode.prevNodeId;
+  if (prevNodeId) {
+    const prevNode = this.findNodeById(prevNodeId);
+    if (prevNode) {
+      for (const [key, value] of prevNode.nextNodeIds) {
+        if (value === targetNode.id) {
+          prevNode.nextNodeIds.delete(key);
+        }
+      }
     }
   }
-  /**
-   * 次のノードを探す
-   * @param delNode
-   */
-  findNextNode(targetNode: IActionNode):ActionNode|undefined {
-    return this.actionNodes.find((node)=>node.prevNode===targetNode);
+}
+
+// 从 actionNodes 数组中移除节点
+private removeFromActionNodes(targetNodeId: string): void {
+  const index = this.actionNodes.findIndex(node => node.id === targetNodeId);
+  if (index > -1) {
+    this.actionNodes.splice(index, 1);
+  }
+}
+
+/**
+ * ノード削除時、前のノードと次のノードを接続する
+ * @param targetNode
+ */
+reconnectOrRemoveNextNodes(targetNode: IActionNode): void {
+  if(!targetNode || !targetNode.prevNodeId ){
+    return;
+  }
+  //前のノードを取得
+  const prevNode = this.findNodeById(targetNode.prevNodeId);
+  if(!prevNode) return;
+  //次のノード取得
+  const nextNodeIds = targetNode.nextNodeIds;
+  if(nextNodeIds.size==0){
+    return;
+  }
+  //次のノード一つの場合
+  if(nextNodeIds.size==1){
+    const nextNodeId = nextNodeIds.get('');
+    if(!nextNodeId) return;
+    const nextNode = this.findNodeById(nextNodeId) ;
+    if(!nextNode) return;
+    nextNode.prevNodeId=prevNode.id;
+    prevNode.nextNodeIds.set(targetNode.inputPoint||'',nextNodeId);
+    return;
+  }
+  //二つ以上の場合
+  for(const [point,nextid] of nextNodeIds){
+    if(!this.connectNodes(prevNode,nextid,point)){
+      this.removeAllNext(nextid);
+      this.removeFromActionNodes(nextid);
+    }
+  }
+}
+
+/**
+ * 二つノードを接続する
+ * @param prevNode
+ * @param nextNodeId
+ * @param point
+ * @returns
+ */
+  connectNodes(prevNode:IActionNode,nextNodeId:string,point:string):boolean{
+      if(!prevNode || !nextNodeId){
+        return false;
+      }
+      const nextNode = this.findNodeById(nextNodeId);
+      if(!nextNode) return false;
+      prevNode.nextNodeIds.set(point,nextNodeId);
+      nextNode.prevNodeId=prevNode.id;
+      nextNode.inputPoint=point;
+      return true;
   }
 
-  generateId():string{
-    const no = this.nextId++;
-    return no.toString().padStart(10,'0');
+  resetNodeRelation(prevNode: IActionNode, newNode: IActionNode, inputPoint?: string) {
+    // 设置新节点和前节点的关联
+    prevNode.nextNodeIds.set(inputPoint || '', newNode.id);
+    newNode.prevNodeId = prevNode.id;
+    // 保存前节点原有的后节点ID
+    const originalNextNodeId = prevNode.nextNodeIds.get(inputPoint || '');
+    this.setNewNodeNextId(newNode,originalNextNodeId,inputPoint);
+
+  }
+
+  /**
+   * 後ノードと新ノードの関連付け
+   * @param newNode
+   * @param originalNextNodeId
+   * @param inputPoint
+   */
+  private setNewNodeNextId(newNode: IActionNode, originalNextNodeId: string | undefined, inputPoint?: string) {
+    // 如果原先的后节点存在
+    if (originalNextNodeId) {
+      // 检查新节点的 outputPoints 是否包含该 inputPoint
+      if (newNode.outputPoints.includes(inputPoint || '')) {
+        newNode.nextNodeIds.set(inputPoint || '', originalNextNodeId);
+      } else {
+        // 如果不包含，选择新节点的一个 outputPoint
+        const alternativeOutputPoint = newNode.outputPoints.length > 0 ? newNode.outputPoints[0] : '';
+        newNode.nextNodeIds.set(alternativeOutputPoint, originalNextNodeId);
+      }
+    }
+  }
+
+  /***
+   * IDでActionNodeを取得する
+   */
+  findNodeById(id: string): IActionNode | undefined {
+    return this.actionNodes.find((node) => node.id === id);
   }
 
 }
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index df4c7cc..6b45ab6 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -278,6 +278,11 @@
     "@types/mime" "*"
     "@types/node" "*"
 
+"@types/uuid@^9.0.3":
+  version "9.0.3"
+  resolved "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.3.tgz"
+  integrity sha512-taHQQH/3ZyI3zP8M/puluDEIEvtQHVYcC6y3N8ijFtAd28+Ey/G4sg1u2gB01S8MwybLOKAp9/yCMu/uR5l3Ug==
+
 "@typescript-eslint/eslint-plugin@^5.10.0":
   version "5.61.0"
   resolved "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.61.0.tgz"
@@ -2707,6 +2712,11 @@ utils-merge@1.0.1:
   resolved "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz"
   integrity sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==
 
+uuid@^9.0.0:
+  version "9.0.0"
+  resolved "https://registry.npmjs.org/uuid/-/uuid-9.0.0.tgz"
+  integrity sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg==
+
 vary@~1.1.2:
   version "1.1.2"
   resolved "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz"