floweditorの動き修正

frontend/src/components/left/EventTree.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="q-pa-md q-gutter-sm">
     <q-tree
-      :nodes="eventTree.screens"
+      :nodes="store.eventTree.screens"
       node-key="label"
       children-key="events"
       no-connectors
@@ -24,28 +24,45 @@
 
 <script lang="ts">
 import { defineComponent, computed, ref } from 'vue';
-import { kintoneEvents,KintoneEvent } from '../../types/KintoneEvents';
+import { IKintoneEvent } from '../../types/KintoneEvents';
 import { storeToRefs } from 'pinia';
 import { useFlowEditorStore } from 'stores/flowEditor';
+import { ActionFlow, ActionNode, RootAction } from 'src/types/ActionTypes';
+import { S } from 'app/dist/spa/assets/QTable.50486f7c';
 export default defineComponent({
   name: 'EventTree',
   setup(props, context) {
     const store = useFlowEditorStore();
-    const eventTree=ref(kintoneEvents);
+    // const eventTree=ref(kintoneEvents);
-    const selectedFlow = store.currentFlow;
+    // const selectedFlow = store.currentFlow;
 
     const expanded=ref([
-      selectedFlow?.getRoot()?.title
+        store.currentFlow?.getRoot()?.title
     ]);
-    const selectedEvent = ref<KintoneEvent|null>(null);
+    const selectedEvent = ref<IKintoneEvent|null>(null);
-    const onSelected=(node:KintoneEvent)=>{
+    const onSelected=(node:IKintoneEvent)=>{
         if(!node.eventId){
           return;
         }
         selectedEvent.value=node;
+        if(store.appInfo===undefined){
+          return;
+        }
+        const screen = store.eventTree.findScreen(node.eventId);
+        let flow =store.findFlowByEventId(node.eventId);
+        const screenName=screen!==null?screen.label:"";
+        if(flow!==undefined && flow!==null ){
+          store.selectFlow(flow);
+        }else{
+          const root = new RootAction(node.eventId,screenName,node.label)
+            const flow =new ActionFlow(root);
+            store.flows?.push(flow);
+            store.selectFlow(flow);
+            selectedEvent.value.flowData=flow;
+        }
     }
     return {
-      eventTree,
+      // eventTree,
       expanded,
       onSelected,
       selectedEvent,

frontend/src/stores/flowEditor.ts

@@ -1,32 +1,54 @@
 import { defineStore } from 'pinia';
-import { ActionFlow,AppInfo } from 'src/types/ActionTypes';
+import { AppInfo ,IActionFlow} from 'src/types/ActionTypes';
-import {FlowCtrl } from '../control/flowCtrl';
+import { kintoneEvents,IKintoneEvent,KintoneEventManager } from 'src/types/KintoneEvents';
+import {FlowCtrl } from '../control/flowctrl';
 
 export interface FlowEditorState{
   flowNames1:string;
   appInfo?:AppInfo;
-  flows?:ActionFlow[];
+  flows?:IActionFlow[];
-  selectedFlow?:ActionFlow|undefined;
+  selectedFlow?:IActionFlow|undefined;
+  eventTree:KintoneEventManager;
+  selectedEvent:IKintoneEvent|undefined;
 }
 const flowCtrl=new FlowCtrl();
 export const useFlowEditorStore = defineStore("flowEditor",{
   state: ():FlowEditorState =>  ({
       flowNames1: '',
       appInfo:undefined,
-      flows:undefined,
+      flows:[],
-      selectedFlow:undefined
+      selectedFlow:undefined,
+      eventTree:kintoneEvents,
+      selectedEvent:undefined
     }),
   getters: {
-    currentFlow():ActionFlow|undefined{
+    /**
+     *
+     * @returns 現在編集しているフロー
+     */
+    currentFlow():IActionFlow|undefined{
         return this.selectedFlow;
+    },
+    /**
+     * KintoneイベントIDから、バンドしているフローを検索する
+     * @param state
+     * @returns
+     */
+    findFlowByEventId(state){
+      return (eventId:string)=>{
+          return state.flows?.find((flow)=>{
+              const root=flow.getRoot();
+              return root?.name===eventId
+          });
+      }
     }
   },
 
   actions: {
-    setFlows(flows:ActionFlow[]){
+    setFlows(flows:IActionFlow[]){
       this.flows=flows;
     },
-    selectFlow(flow:ActionFlow){
+    selectFlow(flow:IActionFlow){
       this.selectedFlow=flow;
     },
     setApp(app:AppInfo){
@@ -35,6 +57,8 @@ export const useFlowEditorStore = defineStore("flowEditor",{
     async setFlow(){
         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);
         }

frontend/src/types/ActionTypes.ts

@@ -50,7 +50,8 @@ export interface IActionNode{
  */
 export interface IActionFlow {
   id:string;
-  actionNodes:Array<IActionNode>
+  actionNodes:Array<IActionNode>;
+  getRoot():IActionNode|undefined;
 }
 
 /**
@@ -394,6 +395,7 @@ reconnectOrRemoveNextNodes(targetNode: IActionNode): void {
                                       :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);

frontend/src/types/KintoneEvents.ts

@@ -1,28 +1,58 @@
+import { publicDecrypt } from 'crypto';
 import {IActionFlow} from './ActionTypes';
 export interface TreeNode {
   label: string;
 }
 
-export interface KintoneEvent extends TreeNode {
+export interface IKintoneEvent extends TreeNode {
   eventId: string;
   hasFlow: boolean;
   flowData?: IActionFlow;
 }
 
-export interface KintoneScreen extends TreeNode {
+export interface IKintoneScreen extends TreeNode {
   label: string;
-  events: KintoneEvent[];
+  events: IKintoneEvent[];
 }
 
+export class kintoneEvent implements IKintoneEvent{
+  eventId: string;
+  get hasFlow(): boolean{
+    return this.flowData!==undefined && this.flowData.actionNodes.length>1
+  };
+  flowData?: IActionFlow | undefined;
+  label: string;
+  constructor({eventId,label}:{eventId:string,label:string}){
+    this.eventId=eventId;
+    this.label=label;
+
+  }
+
+}
 
 export class KintoneEventManager {
-  public screens: KintoneScreen[];
+  public screens: IKintoneScreen[];
 
-  constructor(screens: KintoneScreen[]) {
+  constructor(screens: IKintoneScreen[]) {
     this.screens = screens;
   }
 
-  public findEventById(eventId: string): KintoneEvent | null {
+  public bindFlows(flows:IActionFlow[]){
+    for (const screen of this.screens) {
+      screen.events.forEach((ev)=>ev.flowData=undefined);
+    }
+    for (const flow of flows){
+      const eventId =flow.getRoot()?.name;
+      if(eventId!==undefined){
+        const event = this.findEventById(eventId);
+        if(event!==null){
+          event.flowData=flow;
+        }
+      }
+    }
+  }
+
+  public findEventById(eventId: string): IKintoneEvent | null {
     for (const screen of this.screens) {
       for (const event of screen.events) {
         if (event.eventId === eventId) {
@@ -32,107 +62,51 @@ export class KintoneEventManager {
     }
     return null;
   }
+
+  public findScreen(eventId:string):IKintoneScreen|null{
+    for (const screen of this.screens) {
+      if(screen.events.some((ev:IKintoneEvent)=>ev.eventId===eventId)){
+        return screen;
+      }
+    }
+    return null;
+  }
 }
 
 export const kintoneEvents:KintoneEventManager = new KintoneEventManager([
   {
     label:"レコード追加画面",
     events:[
-      {
+      new kintoneEvent({label:"レコード追加画面を表示した後",eventId:"app.record.create.show"}),
-        label:"レコード追加画面を表示した後",
+      new kintoneEvent({label:"保存をクリックしたとき",eventId:"app.record.create.submit"}),
-        eventId:"app.record.create.show",
+      new kintoneEvent({label:"保存が成功したとき",eventId:"app.record.create.submit.success"}),
-        hasFlow:false
+      new kintoneEvent({label:"フィールドの値を変更したとき",eventId:"app.record.create.change"}),
-      },
-      {
-        label:"保存をクリックしたとき",
-        eventId:"app.record.create.submit",
-        hasFlow:true
-      },
-      {
-        label:"保存が成功したとき",
-        eventId:"app.record.create.submit.success	",
-        hasFlow:false
-      },
-      {
-        label:"フィールドの値を変更したとき",
-        eventId:"app.record.create.change",
-        hasFlow:false
-      },
     ]
   },
   {
     label:"レコード詳細画面",
     events:[
-      {
+      new kintoneEvent({label:"レコード詳細画面を表示した後",eventId:"app.record.detail.show"}),
-        label:"レコード詳細画面を表示した後",
+      new kintoneEvent({label:"レコードを削除するとき",eventId:"app.record.detail.delete.submit"}),
-        eventId:"app.record.detail.show",
+      new kintoneEvent({label:"プロセス管理のアクションを実行したとき",eventId:"app.record.detail.process.proceed"}),
-        hasFlow:false
-      },
-      {
-        label:"レコードを削除するとき",
-        eventId:"app.record.detail.delete.submit",
-        hasFlow:false
-      },
-      {
-        label:"プロセス管理のアクションを実行したとき",
-        eventId:"app.record.detail.process.proceed",
-        hasFlow:false
-      },
     ]
   },
   {
     label:"レコード編集画面",
-    events:[
+    events:[new kintoneEvent({label:"レコード編集画面を表示した後",eventId:"app.record.edit.show"}),
-      {
+      new kintoneEvent({label:"保存をクリックしたとき",eventId:"app.record.edit.submit"}),
-        label:"レコード編集画面を表示した後",
+      new kintoneEvent({label:"保存が成功したとき",eventId:"app.record.edit.submit.success"}),
-        eventId:"app.record.edit.show",
+      new kintoneEvent({label:"フィールドの値を変更したとき",eventId:"app.record.edit.change"}),
-        hasFlow:false
-      },
-      {
-        label:"保存をクリックしたとき",
-        eventId:"app.record.edit.submit",
-        hasFlow:false
-      },
-      {
-        label:"保存が成功したとき",
-        eventId:"app.record.edit.submit.success",
-        hasFlow:false
-      },
-      {
-        label:"フィールドの値を変更したとき",
-        eventId:"app.record.edit.change",
-        hasFlow:false
-      },
     ]
   },
   {
     label:"レコード一覧画面",
     events:[
-      {
+      new kintoneEvent({label:"一覧画面を表示した後", eventId:"app.record.index.show"}),
-        label:"一覧画面を表示した後",
+      new kintoneEvent({label:"インライン編集を開始したとき",eventId:"app.record.index.edit.show"}),
-        eventId:"app.record.index.show",
+      new kintoneEvent({label:"インライン編集のフィールド値を変更したとき", eventId:"app.record.index.edit.change"}),
-        hasFlow:false
+      new kintoneEvent({label:"インライン編集の【保存】をクリックしたとき",eventId:"app.record.index.edit.submit"}),
-      },
+      new kintoneEvent({label:"インライン編集の保存が成功したとき", eventId:"app.record.index.edit.submit.success"}),
-      {
-        label:"インライン編集を開始したとき",
-        eventId:"app.record.index.edit.show",
-        hasFlow:false
-      },
-      {
-        label:"インライン編集のフィールド値を変更したとき",
-        eventId:"app.record.index.edit.change",
-        hasFlow:false
-      },
-      {
-        label:"インライン編集の【保存】をクリックしたとき",
-        eventId:"app.record.index.edit.submit",
-        hasFlow:false
-      },
-      {
-        label:"インライン編集の保存が成功したとき",
-        eventId:"app.record.index.edit.submit.success",
-        hasFlow:false
-      },
     ]
   }
 ]);