From 0b414fbfbe6cf9c31fc14bfc58fbb0ef6a9ba579 Mon Sep 17 00:00:00 2001
From: "maxiaozhe@alicorns.co.jp" <maxiaozhe@alicorns.co.jp>
Date: Mon, 16 Oct 2023 13:38:51 +0900
Subject: [PATCH] =?UTF-8?q?=E3=83=95=E3=83=AD=E3=83=BC=E4=BF=9D=E5=AD=98?=
 =?UTF-8?q?=E3=81=AE=E5=AE=9F=E8=A3=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend/Temp/日報設計書.xlsx                 | Bin 12040 -> 12267 bytes
 frontend/src/components/left/AppSelector.vue |  28 +-
 frontend/src/components/left/EventTree.vue   |  12 +-
 frontend/src/components/right/DatePicker.vue |   6 +-
 frontend/src/components/right/FieldInput.vue |  12 +-
 frontend/src/components/right/InputText.vue  |   6 +-
 frontend/src/components/right/SelectBox.vue  |   6 +-
 frontend/src/control/flowctrl.ts             |  26 +-
 frontend/src/pages/FlowChart.vue             |  65 +++-
 frontend/src/stores/flowEditor.ts            |  41 +-
 frontend/src/types/ActionTypes.ts            | 384 ++++++++++---------
 sample.json                                  | 156 +-------
 12 files changed, 357 insertions(+), 385 deletions(-)

diff --git a/backend/Temp/日報設計書.xlsx b/backend/Temp/日報設計書.xlsx
index 7898c31fdd9f702617466791098fc6faea4e99e7..583571b8a4566e98635ccee6e5c4e12efb6487c2 100644
GIT binary patch
delta 5849
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
Og<0jj2O&fK3;QpPqOaQk

delta 5591
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

diff --git a/frontend/src/components/left/AppSelector.vue b/frontend/src/components/left/AppSelector.vue
index 79c9385..217ae14 100644
--- a/frontend/src/components/left/AppSelector.vue
+++ b/frontend/src/components/left/AppSelector.vue
@@ -1,11 +1,5 @@
 <template>
-  <div
-    class="row"
-    style="
-      border-radius: 2px;
-      box-shadow: rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset,
-        rgba(0, 0, 0, 0.3) 0px 0px 0px 1px;
-    ">
+  <div class="row app-box">
     <q-icon
       class="self-center q-ma-sm"
       name="widgets"
@@ -13,7 +7,7 @@
       style="font-size: 2em"
     />
     <div class="col-7 self-center ellipsis">
-      {{ selectedApp.name }}
+      {{ store.appInfo?.name }}
     </div>
     <div class="self-center">
       <q-btn
@@ -51,22 +45,19 @@ export default defineComponent({
     const store = useFlowEditorStore();
     const appDg = ref();
     const showSelectApp=ref(false);
-    const selectedApp =ref<AppInfo>({
-      appId:"",
-      name:"",
-    });
+
     const closeDg=(val :any)=>{
       showSelectApp.value=false;
       console.log("Dialog closed->",val);
       if (val == 'OK') {
           const data  = appDg.value.selected[0];
           console.log(data);
-          selectedApp.value={
+          const appInfo={
             appId:data.id ,
             name:data.name
           };
-          store.setApp(selectedApp.value);
-          store.setFlow();
+          store.setApp(appInfo);
+          store.loadFlow();
       }
     }
     const showAppDialog=()=>{
@@ -74,7 +65,6 @@ export default defineComponent({
     }
     return {
       store,
-      selectedApp,
       showSelectApp,
       showAppDialog,
       closeDg,
@@ -83,3 +73,9 @@ export default defineComponent({
   }
 });
 </script>
+<style lang="scss">
+  .app-box{
+    border-radius: 2px;
+    box-shadow: rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset,rgba(0, 0, 0, 0.3) 0px 0px 0px 1px;
+  }
+</style>
diff --git a/frontend/src/components/left/EventTree.vue b/frontend/src/components/left/EventTree.vue
index f460c0e..077e03c 100644
--- a/frontend/src/components/left/EventTree.vue
+++ b/frontend/src/components/left/EventTree.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="q-pa-md q-gutter-sm">
+  <!-- <div class="q-pa-md q-gutter-sm"> -->
     <q-tree
       :nodes="store.eventTree.screens"
       node-key="label"
       children-key="events"
       no-connectors
-      v-model:expanded="expanded"
+      v-model:expanded="store.expandedScreen"
       :dense="true"
     >
       <template v-slot:default-header="prop">
@@ -19,7 +19,7 @@
         </div>
       </template>
     </q-tree>
-  </div>
+  <!-- </div> -->
 </template>
 
 <script lang="ts">
@@ -36,9 +36,7 @@ export default defineComponent({
     // const eventTree=ref(kintoneEvents);
     // const selectedFlow = store.currentFlow;
 
-    const expanded=ref([
-        store.currentFlow?.getRoot()?.title
-    ]);
+    // const expanded=ref();
     const selectedEvent = ref<IKintoneEvent|null>(null);
     const onSelected=(node:IKintoneEvent)=>{
         if(!node.eventId){
@@ -63,7 +61,7 @@ export default defineComponent({
     }
     return {
       // eventTree,
-      expanded,
+      // expanded,
       onSelected,
       selectedEvent,
       store
diff --git a/frontend/src/components/right/DatePicker.vue b/frontend/src/components/right/DatePicker.vue
index 6f6b146..9aec626 100644
--- a/frontend/src/components/right/DatePicker.vue
+++ b/frontend/src/components/right/DatePicker.vue
@@ -1,6 +1,6 @@
 <template>
 
-  <q-input v-model="selectedDate" :label="placeholder" mask="date" :rules="['date']">
+  <q-input v-model="selectedDate" :label="displayName" :placeholder="placeholder" mask="date" :rules="['date']">
     <template v-slot:append>
       <q-icon name="event" class="cursor-pointer">
         <q-popup-proxy cover transition-show="scale" transition-hide="scale">
@@ -21,6 +21,10 @@ import { defineComponent, ref ,watchEffect} from 'vue';
 export default defineComponent({
   name: 'DatePicker',
   props: {
+    displayName:{
+      type: String,
+      default: '',
+    },
     placeholder: {
       type: String,
       default: '',
diff --git a/frontend/src/components/right/FieldInput.vue b/frontend/src/components/right/FieldInput.vue
index 650c28e..15f2bb3 100644
--- a/frontend/src/components/right/FieldInput.vue
+++ b/frontend/src/components/right/FieldInput.vue
@@ -1,8 +1,8 @@
 <template>
-<q-input v-model="selectedField" :label="placeholder">
-        <template v-slot:append>
-          <q-icon name="search" class="cursor-pointer"  @click="showDg"/>
-        </template>
+<q-input v-model="selectedField" :label="displayName" :placeholder="placeholder" >
+<template v-slot:append>
+  <q-icon name="search" class="cursor-pointer"  @click="showDg"/>
+</template>
 </q-input>
 <show-dialog v-model:visible="show" name="フィールド一覧" @close="closeDg">
   <field-select ref="appDg" name="フィールド" type="single" :appId="store.appInfo?.appId"></field-select>
@@ -21,6 +21,10 @@ export default defineComponent({
     FieldSelect,
   },
   props: {
+    displayName:{
+      type: String,
+      default: '',
+    },
     placeholder: {
       type: String,
       default: '',
diff --git a/frontend/src/components/right/InputText.vue b/frontend/src/components/right/InputText.vue
index b548966..ecbd114 100644
--- a/frontend/src/components/right/InputText.vue
+++ b/frontend/src/components/right/InputText.vue
@@ -1,5 +1,5 @@
 <template>
-  <q-input :label="placeholder"  v-model="inputValue"/>
+  <q-input :label="displayName" :placeholder="placeholder"  v-model="inputValue"/>
 </template>
 
 <script lang="ts">
@@ -8,6 +8,10 @@ import { defineComponent,ref,watchEffect } from 'vue';
 export default defineComponent({
   name: 'InputText',
   props: {
+    displayName:{
+      type: String,
+      default: '',
+    },
     placeholder: {
       type: String,
       default: '',
diff --git a/frontend/src/components/right/SelectBox.vue b/frontend/src/components/right/SelectBox.vue
index f8a34c1..c014842 100644
--- a/frontend/src/components/right/SelectBox.vue
+++ b/frontend/src/components/right/SelectBox.vue
@@ -1,5 +1,5 @@
 <template>
-  <q-select v-model="selectedValue" :label="placeholder" :options="options"/>
+  <q-select v-model="selectedValue" :label="displayName" :options="options"/>
 </template>
 
 <script lang="ts">
@@ -8,6 +8,10 @@ import { defineComponent,ref,watchEffect } from 'vue';
 export default defineComponent({
   name: 'SelectBox',
   props: {
+    displayName:{
+      type: String,
+      default: '',
+    },
     placeholder: {
       type: String,
       default: '',
diff --git a/frontend/src/control/flowctrl.ts b/frontend/src/control/flowctrl.ts
index 81e7d67..541acf5 100644
--- a/frontend/src/control/flowctrl.ts
+++ b/frontend/src/control/flowctrl.ts
@@ -6,16 +6,22 @@ export class FlowCtrl
 
   async getFlows(appId:string):Promise<ActionFlow[]>
   {
-       const result = await api.get(`http://127.0.0.1:8000/api/flows/${appId}`);
-       //console.info(result.data);
-        if(!result.data || !Array.isArray(result.data)){
-          return [];
-        }
-        const flows:ActionFlow[]=[];
-        for(const flow of result.data){
-            flows.push(ActionFlow.fromJSON(flow.content));
-        }
-       return flows;
+      const flows:ActionFlow[]=[];
+      try{
+        const result = await api.get(`http://127.0.0.1:8000/api/flows/${appId}`);
+        //console.info(result.data);
+         if(!result.data || !Array.isArray(result.data)){
+           return [];
+         }
+
+         for(const flow of result.data){
+             flows.push(ActionFlow.fromJSON(flow.content));
+         }
+        return flows;
+      }catch(error){
+        console.error(error);
+        return flows;
+      }
   }
 
   async SaveFlow(jsonData:any):Promise<boolean>
diff --git a/frontend/src/pages/FlowChart.vue b/frontend/src/pages/FlowChart.vue
index c641210..4caf245 100644
--- a/frontend/src/pages/FlowChart.vue
+++ b/frontend/src/pages/FlowChart.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="q-pa-md q-gutter-sm event-tree">
+    <div class="q-pa-md q-gutter-sm event-tree ">
       <q-drawer
       side="left"
       overlay
@@ -8,21 +8,23 @@
       :show-if-above="false"
       elevated
       >
-      <!-- <q-card class="column full-height" style="width: 300px">
-        <q-card-section> -->
-
-          <div class="flex-center fixd-top" >
+        <q-card class="column full-height" >
+          <q-card-section>
+            <div class="flex-center " >
               <AppSelector  />
             </div>
-
-          <!-- </q-card-section> -->
-        <q-separator />
-          <!-- <q-card-section> -->
+          <!-- </q-card-section>
+          <q-card-section> -->
             <div class="flex-center">
             <EventTree />
             </div>
-          <!-- </q-card-section> -->
-        <!-- </q-card> -->
+          </q-card-section>
+        </q-card>
+        <div class="flex-center fixed-bottom bg-grey-3 q-pa-md row ">
+          <q-btn color="deep-orange" glossy label="デプロイ"  @click="onDeploy" icon="sync"/>
+          <q-space></q-space>
+          <q-btn color="primary" label="保存" @click="onSaveFlow" icon="save" />
+      </div>
       </q-drawer>
     </div>
 
@@ -59,8 +61,9 @@ import PropertyPanel from 'components/right/PropertyPanel.vue';
 import AppSelector from 'components/left/AppSelector.vue';
 import EventTree from 'components/left/EventTree.vue';
 import {FlowCtrl } from '../control/flowctrl';
+import { useQuasar } from 'quasar';
 const drawerLeft = ref(true);
-
+const $q=useQuasar();
 const store = useFlowEditorStore();
 // ref関数を使ってtemplateとバインド
 const state=reactive({
@@ -73,7 +76,7 @@ const prevNodeIfo=ref({
   prevNode:{} as IActionNode,
   inputPoint:""
 });
-const refFlow = ref<ActionFlow|null>(null);
+// const refFlow = ref<ActionFlow|null>(null);
 const showAddAction=ref(false);
 const drawerRight=ref(false);
 const model=ref("");
@@ -120,7 +123,38 @@ const closeDg=(val :any)=>{
   }
 }
 
-const fetchData= async ()=>{
+const onDeploy=()=>{
+  return;
+}
+
+const onSaveFlow = async ()=>{
+  const targetFlow = store.selectedFlow;
+  if(targetFlow===undefined){
+    $q.notify({
+      type: 'negative',
+      caption:"エラー",
+      message: `編集中のフローがありません。`
+    });
+    return;
+  }
+  try{
+    await store.saveFlow(targetFlow);
+    $q.notify({
+      type: 'positive',
+      caption:"通知",
+      message: `${targetFlow.getRoot()?.subTitle}のフロー設定を保存しました。`
+    });
+  }catch(error){
+    $q.notify({
+      type: 'negative',
+      caption:"エラー",
+      message: `${targetFlow.getRoot()?.subTitle}のフローの設定の保存が失敗しました。`
+    })
+  }
+
+}
+
+const fetchData = async ()=>{
   const flowCtrl = new FlowCtrl();
   if(store.appInfo===undefined) return;
   const actionFlows = await flowCtrl.getFlows(store.appInfo?.appId);
@@ -130,8 +164,7 @@ const fetchData= async ()=>{
   if(actionFlows && actionFlows.length==1){
     store.selectFlow(actionFlows[0]);
   }
-  refFlow.value=actionFlows[0];
-  const root =refFlow.value.getRoot();
+  const root =actionFlows[0].getRoot();
   if(root){
     state.activeNode=root;
   }
diff --git a/frontend/src/stores/flowEditor.ts b/frontend/src/stores/flowEditor.ts
index 9f412b7..e166298 100644
--- a/frontend/src/stores/flowEditor.ts
+++ b/frontend/src/stores/flowEditor.ts
@@ -10,6 +10,7 @@ export interface FlowEditorState{
   selectedFlow?:IActionFlow|undefined;
   eventTree:KintoneEventManager;
   selectedEvent:IKintoneEvent|undefined;
+  expandedScreen:any[];
 }
 const flowCtrl=new FlowCtrl();
 export const useFlowEditorStore = defineStore("flowEditor",{
@@ -19,7 +20,8 @@ export const useFlowEditorStore = defineStore("flowEditor",{
       flows:[],
       selectedFlow:undefined,
       eventTree:kintoneEvents,
-      selectedEvent:undefined
+      selectedEvent:undefined,
+      expandedScreen:[]
     }),
   getters: {
     /**
@@ -54,17 +56,46 @@ export const useFlowEditorStore = defineStore("flowEditor",{
     setApp(app:AppInfo){
       this.appInfo=app;
     },
-    async setFlow(){
+    /**
+     * DBからフルーを保存する
+     * @returns
+     */
+    async loadFlow(){
         if(this.appInfo===undefined) return;
         const actionFlows = await flowCtrl.getFlows(this.appInfo?.appId);
         //eventTreeにバンドする
         this.eventTree.bindFlows(actionFlows);
-        if(actionFlows && actionFlows.length>0){
-          this.setFlows(actionFlows);
+        if(actionFlows===undefined || actionFlows.length===0){
+          this.flows=[];
+          this.selectedFlow=undefined;
+          return;
         }
-        if(actionFlows && actionFlows.length==1){
+        this.setFlows(actionFlows);
+        if(actionFlows && actionFlows.length>0){
           this.selectFlow(actionFlows[0]);
         }
+        const expandName =actionFlows[0].getRoot()?.title;
+        this.expandedScreen=[expandName];
+    },
+    /**
+     * フローをDBに保存及び更新する
+     */
+    async saveFlow(flow:IActionFlow){
+      const root=flow.getRoot();
+      const isNew = flow.id==='';
+      const jsonData={
+        flowid: isNew ? flow.createNewId():flow.id,
+        appid: this.appInfo?.appId,
+        eventid: root?.name,
+        name: root?.subTitle,
+        content: JSON.stringify(flow)
+      }
+
+      if(isNew){
+        return await flowCtrl.SaveFlow(jsonData);
+      }else{
+        return await flowCtrl.UpdateFlow(jsonData);
+      }
     }
 
   }
diff --git a/frontend/src/types/ActionTypes.ts b/frontend/src/types/ActionTypes.ts
index 46e4738..4f2a6c5 100644
--- a/frontend/src/types/ActionTypes.ts
+++ b/frontend/src/types/ActionTypes.ts
@@ -3,10 +3,10 @@ import { v4 as uuidv4 } from 'uuid';
  * アプリ情報
  */
 export interface AppInfo {
-  appId:string;
-  code?:string;
-  name:string;
-  description?:string;
+  appId: string;
+  code?: string;
+  name: string;
+  description?: string;
 }
 
 /**
@@ -18,7 +18,7 @@ export interface IActionProperty {
     //プロパティ名
     name: string;
     //プロパティ表示名
-    displayName:string;
+    displayName: string;
     placeholder: string;
     //プロパティ設定値
     modelValue: any;
@@ -27,21 +27,21 @@ export interface IActionProperty {
 /**
  * アクションタイプ定義
  */
-export interface IActionNode{
-  id:string;
+export interface IActionNode {
+  id: string;
   //アクション名
-  name:string;
-  title:string;
-  subTitle:string;
-  inputPoint:string;
+  name: string;
+  title: string;
+  subTitle: string;
+  inputPoint: string;
   //出力ポイント（条件分岐以外未使用）
-  outputPoints:Array<string>;
+  outputPoints: Array<string>;
   //ルートアクション（Kintone event）
-  isRoot:boolean;
+  isRoot: boolean;
   //アクションのプロパティ定義
-  actionProps:Array<IActionProperty>;
+  actionProps: Array<IActionProperty>;
   //アクションのプロパティ設定値抽出
-  ActionValue:object
+  ActionValue: object
   prevNodeId?: string;
   nextNodeIds: Map<string, string>;
 }
@@ -49,9 +49,10 @@ export interface IActionNode{
  * アクションフローの定義
  */
 export interface IActionFlow {
-  id:string;
-  actionNodes:Array<IActionNode>;
-  getRoot():IActionNode|undefined;
+  id: string;
+  actionNodes: Array<IActionNode>;
+  getRoot(): IActionNode | undefined;
+  createNewId():string;
 }
 
 /**
@@ -69,8 +70,8 @@ class ActionProperty implements IActionProperty {
     modelValue: any;
   };
 
-  static defaultProperty():IActionProperty{
-    return new ActionProperty('InputText','displayName','表示名','表示を入力してください','');
+  static defaultProperty(): IActionProperty {
+    return new ActionProperty('InputText', 'displayName', '表示名', '表示を入力してください', '');
   };
 
   constructor(
@@ -95,23 +96,26 @@ class ActionProperty implements IActionProperty {
  * IActionNodeの実装、RootActionNode以外のアクション定義
  */
 export class ActionNode implements IActionNode {
-  id:string;
+  id: string;
   name: string;
-  title:string;
-  get subTitle():string{
+  get title(): string {
+    const prop = this.actionProps.find((prop) => prop.props.name === "displayName");
+    return prop?.props.modelValue;
+  };
+  get subTitle(): string {
     return this.name;
   };
-  inputPoint:string;
+  inputPoint: string;
   //出力ポイント（条件分岐以外未使用）
-  outputPoints:Array<string>;
+  outputPoints: Array<string>;
   actionProps: Array<IActionProperty>;
-  get isRoot(): boolean{
+  get isRoot(): boolean {
     return false;
   };
-  get ActionValue():object{
-    const propValue:any={};
-    this.actionProps.forEach((value)=>{
-      propValue[value.props.name]=value.props.modelValue
+  get ActionValue(): object {
+    const propValue: any = {};
+    this.actionProps.forEach((value) => {
+      propValue[value.props.name] = value.props.modelValue
     });
     return propValue;
   };
@@ -119,24 +123,23 @@ export class ActionNode implements IActionNode {
   nextNodeIds: Map<string, string>;
   constructor(
     name: string,
-    title:string,
-    inputPoint:string,
+    title: string,
+    inputPoint: string,
     outputPoint: Array<string> = [],
-    actionProps: Array<IActionProperty> =[ActionProperty.defaultProperty()],
+    actionProps: Array<IActionProperty> = [ActionProperty.defaultProperty()],
   ) {
-    this.id=uuidv4();
+    this.id = uuidv4();
     this.name = name;
-    this.title=title;
-    this.inputPoint=inputPoint;
+    this.inputPoint = inputPoint;
     this.outputPoints = outputPoint;
-    const defProp =ActionProperty.defaultProperty();
-    defProp.props.displayName=title;
-    this.actionProps =actionProps;
-    const prop = this.actionProps.find((prop)=>prop.props.name===defProp.props.name);
-    if(prop===undefined){
+    const defProp = ActionProperty.defaultProperty();
+    defProp.props.modelValue = title;
+    this.actionProps = actionProps;
+    const prop = this.actionProps.find((prop) => prop.props.name === defProp.props.name);
+    if (prop === undefined) {
       this.actionProps.unshift(defProp);
     }
-    this.nextNodeIds=new Map<string,string>();
+    this.nextNodeIds = new Map<string, string>();
   }
 
 }
@@ -144,33 +147,33 @@ export class ActionNode implements IActionNode {
  * ルートアクション定義
  */
 export class RootAction implements IActionNode {
-  id:string;
+  id: string;
   name: string;
-  title:string;
-  subTitle:string;
-  inputPoint:string;
+  title: string;
+  subTitle: string;
+  inputPoint: string;
   //出力ポイント（条件分岐以外未使用）
-  outputPoints:Array<string>;
+  outputPoints: Array<string>;
   isRoot: boolean;
   actionProps: Array<IActionProperty>;
-  ActionValue:object;
+  ActionValue: object;
   prevNodeId?: string = undefined;
   nextNodeIds: Map<string, string>;
   constructor(
     name: string,
-    title:string,
-    subTitle:string,
+    title: string,
+    subTitle: string,
   ) {
-    this.id=uuidv4();
+    this.id = uuidv4();
     this.name = name;
-    this.title=title;
-    this.subTitle=subTitle;
-    this.inputPoint='';
+    this.title = title;
+    this.subTitle = subTitle;
+    this.inputPoint = '';
     this.outputPoints = [];
     this.isRoot = true;
-    this.actionProps=[];
-    this.ActionValue={};
-    this.nextNodeIds=new Map<string,string>();
+    this.actionProps = [];
+    this.ActionValue = {};
+    this.nextNodeIds = new Map<string, string>();
   }
 }
 
@@ -178,15 +181,16 @@ export class RootAction implements IActionNode {
  * アクションフローの定義
  */
 export class ActionFlow implements IActionFlow {
-  id:string;
-  actionNodes:Array<IActionNode>;
-  constructor(actionNodes:Array<IActionNode>|RootAction){
-    if(actionNodes instanceof Array){
-      this.actionNodes=actionNodes;
-    }else{
-      this.actionNodes=[actionNodes];
+  id: string;
+  actionNodes: Array<IActionNode>;
+  constructor(actionNodes: Array<IActionNode> | RootAction) {
+    if (actionNodes instanceof Array) {
+      this.actionNodes = actionNodes;
+    } else {
+      this.actionNodes = [actionNodes];
     }
-    this.id=uuidv4();
+    this.id = '';
+    //this.id = uuidv4();
   }
   /**
    * ノードを追加する
@@ -198,23 +202,22 @@ export class ActionFlow implements IActionFlow {
    * @returns 追加されたノード
    */
   addNode(
-      newNode:IActionNode,
-      prevNode?:IActionNode,
-      inputPoint?:string):IActionNode
-  {
-    if(inputPoint!==undefined){
-      newNode.inputPoint=inputPoint;
+    newNode: IActionNode,
+    prevNode?: IActionNode,
+    inputPoint?: string): IActionNode {
+    if (inputPoint !== undefined) {
+      newNode.inputPoint = inputPoint;
     }
-    if(prevNode!==undefined){
-      this.connectNodes(prevNode,newNode,inputPoint||'');
-    }else{
-      prevNode=this.actionNodes[this.actionNodes.length-1];
-      this.connectNodes(prevNode,newNode,inputPoint||'');
+    if (prevNode !== undefined) {
+      this.connectNodes(prevNode, newNode, inputPoint || '');
+    } else {
+      prevNode = this.actionNodes[this.actionNodes.length - 1];
+      this.connectNodes(prevNode, newNode, inputPoint || '');
     }
-    const index=this.actionNodes.findIndex(node=>node.id===prevNode?.id)
-    if(index>=0){
-      this.actionNodes.splice(index+1,0,newNode);
-    }else{
+    const index = this.actionNodes.findIndex(node => node.id === prevNode?.id)
+    if (index >= 0) {
+      this.actionNodes.splice(index + 1, 0, newNode);
+    } else {
       this.actionNodes.push(newNode);
     }
     return newNode;
@@ -223,124 +226,128 @@ export class ActionFlow implements IActionFlow {
    * ノードを削除する
    * @param delNode
    */
-  removeNode(targetNode :IActionNode):boolean{
-    if (!targetNode ) {
+  removeNode(targetNode: IActionNode): boolean {
+    if (!targetNode) {
       return false;
     }
-    if(targetNode.isRoot){
+    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;
+  /***
+   * 目標ノードの次のノードを全部削除する
+   */
+  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);
+    }
   }
-  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);
+  // 断开与前一个节点的连接
+  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);
+          }
         }
       }
     }
   }
-}
 
-// 从 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){
-    const nextNode = this.findNodeById(nextid);
-    if(!nextNode) return;
-    if(!this.connectNodes(prevNode,nextNode,point)){
-      this.removeAllNext(nextid);
-      this.removeFromActionNodes(nextid);
+  // actionNodes からノードを削除する
+  private removeFromActionNodes(targetNodeId: string): void {
+    const index = this.actionNodes.findIndex(node => node.id === targetNodeId);
+    if (index > -1) {
+      this.actionNodes.splice(index, 1);
     }
   }
-}
 
-/**
- * 二つノードを接続する
- * @param prevNode
- * @param nextNodeId
- * @param point
- * @returns
- */
-  connectNodes(prevNode:IActionNode,nextNode:IActionNode,point:string):boolean{
-      if(!prevNode || !nextNode){
-        return false;
+  /**
+   * ノード削除時、前のノードと次のノードを接続する
+   * @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) {
+      const nextNode = this.findNodeById(nextid);
+      if (!nextNode) return;
+      if (!this.connectNodes(prevNode, nextNode, point)) {
+        this.removeAllNext(nextid);
+        this.removeFromActionNodes(nextid);
       }
-       if(!nextNode) return false;
-      prevNode.nextNodeIds.set(point,nextNode.id);
-      nextNode.prevNodeId=prevNode.id;
-      nextNode.inputPoint=point;
-      return true;
+    }
   }
 
+  /**
+   * 二つノードを接続する
+   * @param prevNode
+   * @param nextNodeId
+   * @param point
+   * @returns
+   */
+  connectNodes(prevNode: IActionNode, nextNode: IActionNode, point: string): boolean {
+    if (!prevNode || !nextNode) {
+      return false;
+    }
+    if (!nextNode) return false;
+    prevNode.nextNodeIds.set(point, nextNode.id);
+    nextNode.prevNodeId = prevNode.id;
+    nextNode.inputPoint = point;
+    return true;
+  }
+
+  /**
+   *
+   * @param prevNode ノードの接続をリセットする
+   * @param newNode
+   * @param inputPoint
+   */
   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);
-
+    this.setNewNodeNextId(newNode, originalNextNodeId, inputPoint);
   }
 
   /**
@@ -350,13 +357,13 @@ reconnectOrRemoveNextNodes(targetNode: IActionNode): void {
    * @param inputPoint
    */
   private setNewNodeNextId(newNode: IActionNode, originalNextNodeId: string | undefined, inputPoint?: string) {
-    // 如果原先的后节点存在
+    // 元の接続ノードが存在する
     if (originalNextNodeId) {
-      // 检查新节点的 outputPoints 是否包含该 inputPoint
+      // 新しいノードの outputPoints に該当 inputPointが存在するか場合をチェックする
       if (newNode.outputPoints.includes(inputPoint || '')) {
         newNode.nextNodeIds.set(inputPoint || '', originalNextNodeId);
       } else {
-        // 如果不包含，选择新节点的一个 outputPoint
+        //  inputPointが存在しない場合、outputPointのポイントの任意ポートを選択する
         const alternativeOutputPoint = newNode.outputPoints.length > 0 ? newNode.outputPoints[0] : '';
         newNode.nextNodeIds.set(alternativeOutputPoint, originalNextNodeId);
       }
@@ -370,9 +377,9 @@ reconnectOrRemoveNextNodes(targetNode: IActionNode): void {
     return this.actionNodes.find((node) => node.id === id);
   }
 
-   toJSON() {
+  toJSON() {
     return {
-      id:this.id,
+      id: this.id,
       actionNodes: this.actionNodes.map(node => {
         const { nextNodeIds, ...rest } = node;
         return {
@@ -383,26 +390,29 @@ reconnectOrRemoveNextNodes(targetNode: IActionNode): void {
     };
   }
 
-  getRoot():IActionNode|undefined{
-    return this.actionNodes.find(node=>node.isRoot)
+  getRoot(): IActionNode | undefined {
+    return this.actionNodes.find(node => node.isRoot)
+  }
+
+  createNewId():string{
+    this.id=uuidv4();
+    return this.id;
   }
 
   static fromJSON(json: string): ActionFlow {
     const parsedObject = JSON.parse(json);
 
     const actionNodes = parsedObject.actionNodes.map((node: any) => {
-      const nodeClass = !node.isRoot? new ActionNode(node.name,node.title,node.inputPoint,node.outputPoint,node.actionProps)
-                                      :new RootAction(node.name,node.title,node.subTitle);
-      nodeClass.nextNodeIds=new Map(node.nextNodeIds);
-      nodeClass.prevNodeId=node.prevNodeId;
-      nodeClass.id=node.id;
+      const nodeClass = !node.isRoot ? new ActionNode(node.name, node.title, node.inputPoint, node.outputPoint, node.actionProps)
+        : new RootAction(node.name, node.title, node.subTitle);
+      nodeClass.nextNodeIds = new Map(node.nextNodeIds);
+      nodeClass.prevNodeId = node.prevNodeId;
+      nodeClass.id = node.id;
       return nodeClass;
     });
     const actionFlow = new ActionFlow(actionNodes);
-    actionFlow.id=parsedObject.id;
+    actionFlow.id = parsedObject.id;
     return actionFlow;
   }
-
-
 }
 
diff --git a/sample.json b/sample.json
index 6321e1b..e32d692 100644
--- a/sample.json
+++ b/sample.json
@@ -1,138 +1,20 @@
-{
-    "id": "681ecde3-4439-4210-9fdf-424c6af98f09",
-    "actionNodes": [
-        {
-            "id": "34dfd32e-ba1a-440f-bb46-a8a1999109cd",
-            "name": "app.record.create.submit",
-            "title": "レコード追加画面",
-            "subTitle": "保存するとき",
-            "inputPoint": "",
-            "outputPoints": [],
-            "isRoot": true,
-            "actionProps": [],
-            "ActionValue": {},
-            "nextNodeIds": [
-                [
-                    "",
-                    "ce07775d-9729-4516-a88c-78ee8f2f851e"
-                ]
-            ]
-        },
-        {
-            "id": "ce07775d-9729-4516-a88c-78ee8f2f851e",
-            "name": "自動採番",
-            "title": "文書番号を自動採番する",
-            "inputPoint": "",
-            "outputPoints": [],
-            "actionProps": [
-                {
-                    "component": "InputText",
-                    "props": {
-                        "name": "displayName",
-                        "displayName": "文書番号を自動採番する",
-                        "placeholder": "表示を入力してください",
-                        "modelValue": ""
-                    }
-                },
-                {
-                    "component": "InputText",
-                    "props": {
-                        "displayName": "フォーマット",
-                        "modelValue": "",
-                        "name": "format",
-                        "placeholder": "フォーマットを入力してください"
-                    }
-                },
-                {
-                    "component": "FieldInput",
-                    "props": {
-                        "displayName": "採番項目",
-                        "modelValue": "",
-                        "name": "field",
-                        "placeholder": "採番項目を選択してください"
-                    }
-                }
-            ],
-            "prevNodeId": "34dfd32e-ba1a-440f-bb46-a8a1999109cd",
-            "nextNodeIds": [
-                [
-                    "",
-                    "0d18c3c9-abee-44e5-83eb-82074316219b"
-                ]
-            ]
-        },
-        {
-            "id": "0d18c3c9-abee-44e5-83eb-82074316219b",
-            "name": "入力データ取得",
-            "title": "電話番号を取得する",
-            "inputPoint": "",
-            "outputPoints": [],
-            "actionProps": [
-                {
-                    "component": "InputText",
-                    "props": {
-                        "name": "displayName",
-                        "displayName": "表示名",
-                        "placeholder": "表示を入力してください",
-                        "modelValue": ""
-                    }
-                }
-            ],
-            "prevNodeId": "ce07775d-9729-4516-a88c-78ee8f2f851e",
-            "nextNodeIds": [
-                [
-                    "",
-                    "399d7c04-5345-4bf6-8da3-d745df554524"
-                ]
-            ]
-        },
-        {
-            "id": "399d7c04-5345-4bf6-8da3-d745df554524",
-            "name": "条件分岐",
-            "title": "電話番号入力形式チャック",
-            "inputPoint": "",
-            "outputPoints": [
-                "はい",
-                "いいえ"
-            ],
-            "actionProps": [
-                {
-                    "component": "InputText",
-                    "props": {
-                        "name": "displayName",
-                        "displayName": "表示名",
-                        "placeholder": "表示を入力してください",
-                        "modelValue": ""
-                    }
-                }
-            ],
-            "prevNodeId": "0d18c3c9-abee-44e5-83eb-82074316219b",
-            "nextNodeIds": [
-                [
-                    "いいえ",
-                    "8173e6bc-3fa2-4403-b973-9368884e2dfa"
-                ]
-            ]
-        },
-        {
-            "id": "8173e6bc-3fa2-4403-b973-9368884e2dfa",
-            "name": "エラー表示",
-            "title": "エラー表示して保存しない",
-            "inputPoint": "いいえ",
-            "outputPoints": [],
-            "actionProps": [
-                {
-                    "component": "InputText",
-                    "props": {
-                        "name": "displayName",
-                        "displayName": "表示名",
-                        "placeholder": "表示を入力してください",
-                        "modelValue": ""
-                    }
-                }
-            ],
-            "prevNodeId": "399d7c04-5345-4bf6-8da3-d745df554524",
-            "nextNodeIds": []
+[
+    {
+        "component": "FieldInput",
+        "props": {
+            "displayName": "フィールド",
+            "modelValue": "",
+            "name": "field",
+            "placeholder": "必須項目を選択してください"
         }
-    ]
-}
\ No newline at end of file
+    },
+    {
+        "component": "InputText",
+        "props": {
+            "displayName": "エラーメッセージ",
+            "modelValue": "",
+            "name": "format",
+            "placeholder": "エラーメッセージを入力してください"
+        }
+    }
+]
\ No newline at end of file