イベントに削除関数を追加し、即座に適用する

frontend/src/components/left/EventTree.vue

@@ -1,48 +1,55 @@
 <template>
   <!-- <div class="q-pa-md q-gutter-sm"> -->
-    <q-tree
+  <q-tree :nodes="store.eventTree.screens" node-key="eventId" children-key="events" no-connectors
-      :nodes="store.eventTree.screens"
+    v-model:expanded="store.expandedScreen" :dense="true" :ref="tree">
-      node-key="eventId"
+    <template v-slot:header-EVENT="prop">
-      children-key="events"
+      <div :ref="prop.node.eventId" class="row col items-center no-wrap event-node">
-      no-connectors
+        <q-icon v-if="prop.node.eventId" name="play_circle" :color="prop.node.hasFlow ? 'green' : 'grey'" size="16px"
-      v-model:expanded="store.expandedScreen"
+          class="q-mr-sm">
-      :dense="true"
+        </q-icon>
-      :ref="tree"
+        <div class="no-wrap" @click="onSelected(prop.node)"
-    >
+          :class="selectedEvent && prop.node.eventId === selectedEvent.eventId ? 'selected-node' : ''">{{
-      <template v-slot:header-EVENT="prop">
+            prop.node.label }}</div>
-        <div class="row col items-start no-wrap event-node" @click="onSelected(prop.node)">
+        <q-space></q-space>
-          <q-icon v-if="prop.node.eventId"
+        <!-- <q-icon v-if="prop.node.hasFlow" name="delete" color="negative" size="16px" class="q-mr-sm"></q-icon> -->
-                  name="play_circle"
+      </div>
-                  :color="prop.node.hasFlow?'green':'grey'"
+    </template>
-                  size="16px" class="q-mr-sm">
+    <template v-slot:header-CHANGE="prop">
-                  </q-icon>
+      <div class="row col items-center no-wrap event-node">
-          <div class="no-wrap" :class="selectedEvent && prop.node.eventId===selectedEvent.eventId?'selected-node':''">{{ prop.node.label }}</div>
+        <div class="no-wrap">{{ prop.node.label }}</div>
-          <q-space></q-space>
+        <q-space></q-space>
-          <!-- <q-icon v-if="prop.node.hasFlow" name="delete" color="negative" size="16px" class="q-mr-sm"></q-icon> -->
+        <q-icon name="add_circle" color="primary" size="16px" class="q-mr-sm"
+          @click="addChangeEvent(prop.node)"></q-icon>
+      </div>
+    </template>
+    <template v-slot:header-DELETABLE="prop">
+      <div class="row col items-center event-node">
+        <div class="row col items-center" @click="onSelected(prop.node)">
+          <q-icon v-if="prop.node.eventId" name="play_circle" :color="prop.node.hasFlow ? 'green' : 'grey'" size="16px"
+            class="q-mr-sm">
+          </q-icon>
+          <div>{{ prop.node.label }}</div>
         </div>
-      </template>
+        <div>
-      <template v-slot:header-CHANGE="prop" >
+          <q-btn class="q-mr-sm delete-btn" flat fab-mini icon="delete_forever" padding="none" color="negative"
-        <div class="row col items-start no-wrap event-node" >
+            @click="deleteEvent(prop.node)"></q-btn>
-          <div class="no-wrap">{{ prop.node.label }}</div>
-          <q-space></q-space>
-          <q-icon name="add_circle" color="primary" size="16px" class="q-mr-sm" @click="addChangeEvent(prop.node)"></q-icon>
         </div>
-      </template>
+      </div>
-    </q-tree>
+    </template>
-    <show-dialog v-model:visible="showDialog" name="フィールド選択" @close="closeDg" widht="400px">
+  </q-tree>
-      <field-select ref="appDg" name="フィールド" type="single" :appId="store.appInfo?.appId"></field-select>
+  <show-dialog v-model:visible="showDialog" name="フィールド選択" @close="closeDg">
-    </show-dialog>
+    <field-select ref="appDg" name="フィールド" type="single" :appId="store.appInfo?.appId"></field-select>
+  </show-dialog>
 </template>
 
 <script lang="ts">
-import { defineComponent, computed, ref } from 'vue';
+import { QTree, useQuasar } from 'quasar';
-import { IKintoneEvent ,IKintoneEventGroup, IKintoneEventNode, kintoneEvent} from '../../types/KintoneEvents';
+import { ActionFlow, RootAction } from 'src/types/ActionTypes';
-import { storeToRefs } from 'pinia';
 import { useFlowEditorStore } from 'stores/flowEditor';
-import { ActionFlow, ActionNode, RootAction } from 'src/types/ActionTypes';
+import { defineComponent, ref } from 'vue';
-import ShowDialog from '../ShowDialog.vue';
+import { IKintoneEvent, IKintoneEventGroup, IKintoneEventNode } from '../../types/KintoneEvents';
 import FieldSelect from '../FieldSelect.vue';
-import { QTree } from 'quasar';
+import ShowDialog from '../ShowDialog.vue';
 export default defineComponent({
   name: 'EventTree',
   components: {
@@ -50,6 +57,7 @@ export default defineComponent({
     FieldSelect,
   },
   setup(props, context) {
+    const $q = useQuasar();
     const appDg = ref();
     const store = useFlowEditorStore();
     const showDialog = ref(false);
@@ -58,62 +66,79 @@ export default defineComponent({
     // const selectedFlow = store.currentFlow;
 
     // const expanded=ref();
-    const selectedEvent = ref<IKintoneEvent|null>(null);
+    const selectedEvent = ref<IKintoneEvent | null>(null);
-    const selectedChangeEvent=ref<IKintoneEventGroup|null>(null);
+    const selectedChangeEvent = ref<IKintoneEventGroup | null>(null);
-    const isFieldChange = (node:IKintoneEventNode)=>{
+    const isFieldChange = (node: IKintoneEventNode) => {
-      return node.header=='EVENT' && node.eventId.indexOf(".change.")>-1;
+      return node.header == 'EVENT' && node.eventId.indexOf(".change.") > -1;
     }
     //フィールド値変更イベント追加
-    const closeDg = (val:string) => {
+    const closeDg = (val: string) => {
       if (val == 'OK') {
-        if(!selectedChangeEvent.value){return;}
+        if (!selectedChangeEvent.value) { return; }
         const field = appDg.value.selected[0];
         const eventid = `${selectedChangeEvent.value.eventId}.${field.code}`;
-        if(store.eventTree.findEventById(eventid)){
+        if (store.eventTree.findEventById(eventid)) {
           return;
         }
-        selectedChangeEvent.value?.events.push(
+        selectedChangeEvent.value?.events.push({
-          new kintoneEvent(
+          eventId: eventid,
-            field.label,
+          label: field.name,
-            eventid,
+          parentId: selectedChangeEvent.value.eventId,
-            selectedChangeEvent.value.eventId)
+          header: 'DELETABLE'
-        );
+        });
         tree.value?.expanded?.push(selectedChangeEvent.value.eventId);
         tree.value?.expandAll();
       }
     };
-    const addChangeEvent=(node:IKintoneEventGroup)=>{
+    const addChangeEvent = (node: IKintoneEventGroup) => {
-      if(store.appInfo===undefined){
+      if (store.appInfo === undefined) {
-          return;
+        return;
       }
-      selectedChangeEvent.value=node;
+      selectedChangeEvent.value = node;
-      showDialog.value=true;
+      showDialog.value = true;
     }
-    const onSelected=(node:IKintoneEvent)=>{
+
-        if(!node.eventId){
+    const deleteEvent = (node: IKintoneEvent) => {
-          return;
+      if (!node.eventId) {
-        }
+        return;
-        selectedEvent.value=node;
+      }
-        if(store.appInfo===undefined){
+      store.deleteEvent(node);
-          return;
+      store.selectFlow(undefined)
-        }
+
-        const screen = store.eventTree.findEventById(node.parentId);
+      $q.notify({
-        let flow =store.findFlowByEventId(node.eventId);
+        type: 'positive',
-        let screenName=screen!==null?screen.label:"";
+        caption: "通知",
-        let nodeLabel = node.label;
+        message: `イベント ${node.label} 削除`
-        // if(isFieldChange(node)){
+      })
-        //   screenName=nodeLabel;
+    }
-        //   nodeLabel=`${node.label}の値を変更したとき`;
+
-        // }
+    const onSelected = (node: IKintoneEvent) => {
-        if(flow!==undefined && flow!==null ){
+      if (!node.eventId) {
-          store.selectFlow(flow);
+        return;
-        }else{
+      }
-          const root = new RootAction(node.eventId,screenName,nodeLabel)
+      selectedEvent.value = node;
-            const flow =new ActionFlow(root);
+      if (store.appInfo === undefined) {
-            store.flows?.push(flow);
+        return;
-            store.selectFlow(flow);
+      }
-            selectedEvent.value.flowData=flow;
+      const screen = store.eventTree.findEventById(node.parentId);
-        }
+
+      let flow = store.findFlowByEventId(node.eventId);
+      let screenName = screen !== null ? screen.label : "";
+      let nodeLabel = node.label;
+      // if(isFieldChange(node)){
+      //   screenName=nodeLabel;
+      //   nodeLabel=`${node.label}の値を変更したとき`;
+      // }
+
+      if (flow !== undefined && flow !== null) {
+        store.selectFlow(flow);
+      } else {
+        const root = new RootAction(node.eventId, screenName, nodeLabel)
+        const flow = new ActionFlow(root);
+        store.flows?.push(flow);
+        store.selectFlow(flow);
+        selectedEvent.value.flowData = flow;
+      }
     };
     return {
       // eventTree,
@@ -125,6 +150,7 @@ export default defineComponent({
       onSelected,
       selectedEvent,
       addChangeEvent,
+      deleteEvent,
       closeDg,
       store
     }
@@ -132,20 +158,25 @@ export default defineComponent({
 });
 </script>
 <style lang="scss">
-.nowrap{
+.nowrap {
-  flex-wrap:nowarp;
+  flex-wrap: nowarp;
-  text-wrap:nowarp;
+  text-wrap: nowarp;
 }
-.event-node{
+
-  cursor:pointer;
+.event-node {
+  cursor: pointer;
 }
-.selected-node{
+
+.selected-node {
   color: $primary;
   font-weight: bolder;
 }
-.event-node:hover{
+
+.event-node:hover {
   background-color: $light-blue-1;
 }
 
+.delete-btn {
+  margin-right: 5px;
+}
 </style>
-

frontend/src/control/flowctrl.ts

@@ -1,44 +1,49 @@
 import { api } from 'boot/axios';
 import { ActionFlow } from 'src/types/ActionTypes';
 
-export class FlowCtrl
+export class FlowCtrl {
-{
+  async getFlows(appId: string): Promise<ActionFlow[]> {
-
+    const flows: ActionFlow[] = [];
-  async getFlows(appId:string):Promise<ActionFlow[]>
+    try {
-  {
+      const result = await api.get(`api/flows/${appId}`);
-      const flows:ActionFlow[]=[];
+      //console.info(result.data);
-      try{
+      if (!result.data || !Array.isArray(result.data)) {
-        const result = await api.get(`api/flows/${appId}`);
+        return [];
-        //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;
       }
+
+      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>
+  async SaveFlow(jsonData: any): Promise<boolean> {
-  {
+    const result = await api.post('api/flow', jsonData);
-       const result = await api.post('api/flow',jsonData);
+    console.info(result.data);
-       console.info(result.data)
+    return true;
-       return true;
   }
   /**
    * フローを更新する
    * @param jsonData
    * @returns
    */
-  async  UpdateFlow(jsonData:any):Promise<boolean>
+  async UpdateFlow(jsonData: any): Promise<boolean> {
-  {
+    const result = await api.put('api/flow/' + jsonData.flowid, jsonData);
-    const result = await api.put('api/flow/' + jsonData.flowid,jsonData);
+    console.info(result.data);
-    console.info(result.data)
+    return true;
+  }
+  /**
+   * フローを消去する
+   * @param flowId
+   * @returns
+   */
+  async DeleteFlow(flowId: string): Promise<boolean> {
+    const result = await api.delete('api/flow/' + flowId);
+    console.info(result.data);
     return true;
   }
   /**
@@ -46,12 +51,9 @@ export class FlowCtrl
    * @param appid
    * @returns
    */
-  async depoly(appid:string):Promise<boolean>
+  async depoly(appid: string): Promise<boolean> {
-  {
     const result = await api.post(`api/v1/createjstokintone?app=${appid}`);
     console.info(result.data);
     return true;
   }
-
 }
-

frontend/src/stores/flowEditor.ts

@@ -1,118 +1,142 @@
 import { defineStore } from 'pinia';
-import { AppInfo ,IActionFlow, IActionNode} from 'src/types/ActionTypes';
+import { AppInfo, IActionFlow, IActionNode } from 'src/types/ActionTypes';
-import { IKintoneEvent,KintoneEventManager } from 'src/types/KintoneEvents';
+import { IKintoneEvent, KintoneEventManager } from 'src/types/KintoneEvents';
-import {FlowCtrl } from '../control/flowctrl';
+import { FlowCtrl } from '../control/flowctrl';
 
-export interface FlowEditorState{
+export interface FlowEditorState {
-  flowNames1:string;
+  flowNames1: string;
-  appInfo?:AppInfo;
+  appInfo?: AppInfo;
-  flows?:IActionFlow[];
+  flows?: IActionFlow[];
-  selectedFlow?:IActionFlow|undefined;
+  selectedFlow?: IActionFlow | undefined;
-  activeNode:IActionNode|undefined;
+  activeNode: IActionNode | undefined;
-  eventTree:KintoneEventManager;
+  eventTree: KintoneEventManager;
-  selectedEvent:IKintoneEvent|undefined;
+  selectedEvent: IKintoneEvent | undefined;
-  expandedScreen:any[];
+  expandedScreen: any[];
 }
-const flowCtrl=new FlowCtrl();
+const flowCtrl = new FlowCtrl();
 const eventTree = new KintoneEventManager();
-export const useFlowEditorStore = defineStore("flowEditor",{
+export const useFlowEditorStore = defineStore('flowEditor', {
-  state: ():FlowEditorState =>  ({
+  state: (): FlowEditorState => ({
-      flowNames1: '',
+    flowNames1: '',
-      appInfo:undefined,
+    appInfo: undefined,
-      flows:[],
+    flows: [],
-      selectedFlow:undefined,
+    selectedFlow: undefined,
-      activeNode:undefined,
+    activeNode: undefined,
-      eventTree:eventTree,
+    eventTree: eventTree,
-      selectedEvent:undefined,
+    selectedEvent: undefined,
-      expandedScreen:[]
+    expandedScreen: [],
-    }),
+  }),
   getters: {
     /**
      *
      * @returns 現在編集しているフロー
      */
-    currentFlow():IActionFlow|undefined{
+    currentFlow(): IActionFlow | undefined {
-        return this.selectedFlow;
+      return this.selectedFlow;
     },
     /**
      * KintoneイベントIDから、バンドしているフローを検索する
      * @param state
      * @returns
      */
-    findFlowByEventId(state){
+    findFlowByEventId(state) {
-      return (eventId:string)=>{
+      return (eventId: string) => {
-          return state.flows?.find((flow)=>{
+        return state.flows?.find((flow) => {
-              const root=flow.getRoot();
+          const root = flow.getRoot();
-              return root?.name===eventId
+          return root?.name === eventId;
-          });
+        });
-      }
+      };
-    }
+    },
+
+    findEventById(state) {
+      return (eventId: string) => {
+        return state.eventTree.findEventById(eventId);
+      };
+    },
+
   },
 
   actions: {
-    setFlows(flows:IActionFlow[]){
+    setFlows(flows: IActionFlow[]) {
-      this.flows=flows;
+      this.flows = flows;
     },
-    selectFlow(flow:IActionFlow){
+    selectFlow(flow: IActionFlow | undefined) {
-      this.selectedFlow=flow;
+      this.selectedFlow = flow;
     },
-    setActiveNode(node:IActionNode){
+    setActiveNode(node: IActionNode) {
-      this.activeNode=node;
+      this.activeNode = node;
     },
-    setApp(app:AppInfo){
+    setApp(app: AppInfo) {
-      this.appInfo=app;
+      this.appInfo = app;
     },
     /**
      * DBからフルーを保存する
      * @returns
      */
-    async loadFlow(){
+    async loadFlow() {
-        if(this.appInfo===undefined) return;
+      if (this.appInfo === undefined) return;
-        const actionFlows = await flowCtrl.getFlows(this.appInfo?.appId);
+      const actionFlows = await flowCtrl.getFlows(this.appInfo?.appId);
-        //eventTreeにバンドする
+      //eventTreeにバンドする
-        this.eventTree.bindFlows(actionFlows);
+      this.eventTree.bindFlows(actionFlows);
-        if(actionFlows===undefined || actionFlows.length===0){
+      if (actionFlows === undefined || actionFlows.length === 0) {
-          this.flows=[];
+        this.flows = [];
-          this.selectedFlow=undefined;
+        this.selectedFlow = undefined;
-          return;
+        return;
-        }
+      }
-        this.setFlows(actionFlows);
+      this.setFlows(actionFlows);
-        if(actionFlows && actionFlows.length>0){
+      if (actionFlows && actionFlows.length > 0) {
-          this.selectFlow(actionFlows[0]);
+        this.selectFlow(actionFlows[0]);
-        }
+      }
-        const expandNames = actionFlows.map(flow=>flow.getRoot()?.title);
+      const expandNames = actionFlows.map((flow) => flow.getRoot()?.title);
-        // const expandName =actionFlows[0].getRoot()?.title;
+      // const expandName =actionFlows[0].getRoot()?.title;
-        this.expandedScreen=expandNames;
+      this.expandedScreen = expandNames;
     },
     /**
      * フローをDBに保存及び更新する
      */
-    async saveFlow(flow:IActionFlow){
+    async saveFlow(flow: IActionFlow) {
-      const root=flow.getRoot();
+      const root = flow.getRoot();
-      const isNew = flow.id==='';
+      const isNew = flow.id === '';
-      const jsonData={
+      const jsonData = {
-        flowid: isNew ? flow.createNewId():flow.id,
+        flowid: isNew ? flow.createNewId() : flow.id,
         appid: this.appInfo?.appId,
         eventid: root?.name,
         name: root?.subTitle,
-        content: JSON.stringify(flow)
+        content: JSON.stringify(flow),
-      }
+      };
 
-      if(isNew){
+      if (isNew) {
         return await flowCtrl.SaveFlow(jsonData);
-      }else{
+      } else {
         return await flowCtrl.UpdateFlow(jsonData);
       }
     },
+
+
+    deleteEvent(event: IKintoneEvent) {
+      const store = useFlowEditorStore();
+      if (event.flowData) {
+        const flow = event.flowData;
+        if (flow.id === '') {
+          return;
+        }
+        flowCtrl.DeleteFlow(flow.id)
+        eventTree.deleteEvent(event, store);
+        if(this.flows){
+          this.flows = this.flows.filter((f) => f.id !== flow.id);
+        }
+      } else {
+        eventTree.deleteEvent(event, store);
+      }
+    },
     /**
      * デプロイする
      */
-    async deploy():Promise<boolean>{
+    async deploy(): Promise<boolean> {
-      if(this.appInfo===undefined){
+      if (this.appInfo === undefined) {
         return false;
       }
       return await flowCtrl.depoly(this.appInfo?.appId);
-   }
+    },
-
+  },
-  }
 });

frontend/src/types/KintoneEvents.ts

@@ -1,9 +1,10 @@
-import {IActionFlow} from './ActionTypes';
+import { useFlowEditorStore } from 'src/stores/flowEditor';
+import { IActionFlow } from './ActionTypes';
 export interface IKintoneEventNode {
   label: string;
-  header:string;
+  header: string;
-  eventId:string;
+  eventId: string;
-  parentId:string;
+  parentId: string;
 }
 
 export interface IKintoneEvent extends IKintoneEventNode {
@@ -15,60 +16,64 @@ export interface IKintoneEventGroup extends IKintoneEventNode {
   events: IKintoneEventNode[];
 }
 
-
+export class kintoneEvent implements IKintoneEvent {
-export class kintoneEvent implements IKintoneEvent{
   eventId: string;
-  parentId:string;
+  parentId: string;
-   get hasFlow(): boolean{
+  get hasFlow(): boolean {
-    return this.flowData!==undefined && this.flowData.actionNodes.length>1
+    return this.flowData !== undefined && this.flowData.actionNodes.length > 1;
-  };
+  }
   flowData?: IActionFlow | undefined;
   label: string;
-  get header():string{
+  header = 'EVENT';
-    return "EVENT";
+  constructor(label: string, eventId: string, parentId: string) {
-  }
+    this.eventId = eventId;
-  constructor(label:string,eventId:string,parentId:string){
+    this.label = label;
-    this.eventId=eventId;
+    this.parentId = parentId;
-    this.label=label;
-    this.parentId=parentId;
   }
 }
 
-export class kintoneEventGroup implements IKintoneEventGroup{
+export class kintoneEventGroup implements IKintoneEventGroup {
   eventId: string;
-  parentId:string;
+  parentId: string;
   label: string;
   events: IKintoneEventNode[];
-  get header():string{
+  get header(): string {
-    return "EVENTGROUP";
+    return 'EVENTGROUP';
   }
-  constructor(eventId:string,label:string,events:IKintoneEventNode[],parentId:string){
+  constructor(
-    this.eventId=eventId;
+    eventId: string,
-    this.label=label;
+    label: string,
-    this.events=events;
+    events: IKintoneEventNode[],
-    this.parentId=parentId;
+    parentId: string
+  ) {
+    this.eventId = eventId;
+    this.label = label;
+    this.events = events;
+    this.parentId = parentId;
   }
 }
 
-
+export class kintoneEventForChange implements IKintoneEventGroup {
-export class kintoneEventForChange implements IKintoneEventGroup{
   eventId: string;
-  parentId:string;
+  parentId: string;
   label: string;
   events: IKintoneEventNode[];
-  get header():string{
+  get header(): string {
-    return "CHANGE";
+    return 'CHANGE';
   }
-  constructor(eventId:string,label:string,events:IKintoneEventNode[],parentId:string){
+  constructor(
-    this.eventId=eventId;
+    eventId: string,
-    this.label=label;
+    label: string,
-    this.events=events;
+    events: IKintoneEventNode[],
-    this.parentId=parentId;
+    parentId: string
+  ) {
+    this.eventId = eventId;
+    this.label = label;
+    this.events = events;
+    this.parentId = parentId;
   }
 }
 
-
-
 export class KintoneEventManager {
   public screens: IKintoneEventGroup[];
 
@@ -76,28 +81,35 @@ export class KintoneEventManager {
     this.screens = this.getKintoneEvents();
   }
 
-  public bindFlows(flows:IActionFlow[]){
+  public bindFlows(flows: IActionFlow[]) {
-    this.screens=this.getKintoneEvents();
+    this.screens = this.getKintoneEvents();
-    for (const flow of flows){
+    for (const flow of flows) {
-      const eventId =flow.getRoot()?.name;
+      const eventId = flow.getRoot()?.name;
-      if(eventId!==undefined){
+      if (eventId !== undefined) {
         const eventNode = this.findEventById(eventId);
-        if(eventNode!==null && eventNode.header==="EVENT"){
+        if (eventNode !== null && eventNode.header === 'EVENT') {
-          const event =eventNode as kintoneEvent;
+          const event = eventNode as kintoneEvent;
-          event.flowData=flow;
+          event.flowData = flow;
-        }else{
+        } else {
           //EventGroupのIDを取得
-          const lastIndex = eventId.lastIndexOf(".");
+          const lastIndex = eventId.lastIndexOf('.');
-          const groupId=eventId.substring(0,lastIndex);
+          const groupId = eventId.substring(0, lastIndex);
           const eventNode = this.findEventById(groupId);
-          if(eventNode && (eventNode.header==="EVENTGROUP" || eventNode.header==="CHANGE")){
+          if (
-            const groupEvent=eventNode as kintoneEventGroup;
+            eventNode &&
-            const newEvent =new kintoneEvent(
+            (eventNode.header === 'EVENTGROUP' || eventNode.header === 'CHANGE')
-              flow.getRoot()?.subTitle || "",
+          ) {
-              eventId,
+            const groupEvent = eventNode as kintoneEventGroup;
-              groupEvent.parentId
+
-            );
+            const newEvent = {
-            newEvent.flowData=flow;
+              label: flow.getRoot()?.subTitle || '',
+              eventId: eventId,
+              parentId: groupId,
+              header: 'DELETABLE',
+              hasFlow: true,
+              flowData: flow,
+            };
+
             groupEvent.events.push(newEvent);
           }
         }
@@ -106,61 +118,193 @@ export class KintoneEventManager {
   }
 
   public findEventById(eventId: string): IKintoneEventNode | null {
-    const screen=this.findScreen(eventId);
+    const screen = this.findScreen(eventId);
-    if(screen) {return screen;}
+    if (screen) {
+      return screen;
+    }
     for (const screen of this.screens) {
       for (const event of screen.events) {
-          if (event.eventId === eventId) {
+        if (event.eventId === eventId) {
-            return event;
+          return event;
-          }
+        }
-          if(event.header==="EVENTGROUP"||event.header==="CHANGE"){
+        if (event.header === 'EVENTGROUP' || event.header === 'CHANGE') {
-            const eventGroup = event as IKintoneEventGroup;
+          const eventGroup = event as IKintoneEventGroup;
-            const targetEvent = eventGroup.events.find((ev)=>{
+          const targetEvent = eventGroup.events.find((ev) => {
-              return ev.eventId===eventId;
+            return ev.eventId === eventId;
-            })
+          });
-            if(targetEvent){
+          if (targetEvent) {
-              return targetEvent;
+            return targetEvent;
-            }
           }
+        }
       }
     }
     return null;
   }
 
-  public findScreen(eventId:string):IKintoneEventGroup|undefined{
+  public findScreen(eventId: string): IKintoneEventGroup | undefined {
-    return this.screens.find(screen=>screen.eventId==eventId);
+    return this.screens.find((screen) => screen.eventId == eventId);
   }
 
-  public getKintoneEvents():IKintoneEventGroup[]{
+  public deleteEvent(
+    event: kintoneEvent,
+    store: ReturnType<typeof useFlowEditorStore>
+  ) {
+    if (event.header !== 'DELETABLE') {
+      return;
+    }
+
+    const parent = store.findEventById(event.parentId);
+    if (parent?.header !== 'CHANGE' && parent?.header !== 'EVENTGROUP') {
+      return;
+    }
+    const realParent = parent as kintoneEventForChange;
+
+    const index = realParent.events.findIndex(
+      (e) => e.eventId === event.eventId
+    );
+
+    if (index !== -1) {
+      realParent.events.splice(index, 1);
+    }
+  }
+
+  public getKintoneEvents(): IKintoneEventGroup[] {
     return [
-        new kintoneEventGroup("app.record.create","レコード追加画面",[
+      new kintoneEventGroup(
-          new kintoneEvent('レコード追加画面を表示した後','app.record.create.show',"app.record.create"),
+        'app.record.create',
-          new kintoneEvent('保存をクリックしたとき','app.record.create.submit',"app.record.create"),
+        'レコード追加画面',
-          new kintoneEvent('保存が成功したとき','app.record.create.submit.success',"app.record.create"),
+        [
-          new kintoneEventForChange('app.record.create.change','フィールドの値を変更したとき',[],"app.record.create"),
+          new kintoneEvent(
-          new kintoneEventGroup('app.record.create.show.customButtonClick','ボタンをクリックした時',[],"app.record.create")
+            'レコード追加画面を表示した後',
-        ],""),
+            'app.record.create.show',
-        new kintoneEventGroup("app.record.detail","レコード詳細画面",[
+            'app.record.create'
-          new kintoneEvent('レコード詳細画面を表示した後','app.record.detail.show',"app.record.detail"),
+          ),
-          new kintoneEvent('レコードを削除するとき','app.record.detail.delete.submit',"app.record.detail"),
+          new kintoneEvent(
-          new kintoneEvent('プロセス管理のアクションを実行したとき','app.record.detail.process.proceed',"app.record.detail"),
+            '保存をクリックしたとき',
-          new kintoneEventGroup('app.record.detail.show.customButtonClick','ボタンをクリックした時',[],"app.record.detail"),
+            'app.record.create.submit',
-        ],""),
+            'app.record.create'
-        new kintoneEventGroup("app.record.edit","レコード編集画面",[
+          ),
-          new kintoneEvent('レコード編集画面を表示した後','app.record.edit.show',"app.record.edit"),
+          new kintoneEvent(
-          new kintoneEvent('保存をクリックしたとき','app.record.edit.submit',"app.record.edit"),
+            '保存が成功したとき',
-          new kintoneEvent('保存が成功したとき','app.record.edit.submit.success',"app.record.edit"),
+            'app.record.create.submit.success',
-          new kintoneEventForChange('app.record.edit.change','フィールドの値を変更したとき',[],"app.record.edit"),
+            'app.record.create'
-          new kintoneEventGroup('app.record.edit.show.customButtonClick','ボタンをクリックした時',[],"app.record.edit"),
+          ),
-        ],""),
+          new kintoneEventForChange(
-        new kintoneEventGroup("app.record.index","レコード一覧画面",[
+            'app.record.create.change',
-          new kintoneEvent('一覧画面を表示した後', 'app.record.index.show',"app.record.index"),
+            'フィールドの値を変更したとき',
-          new kintoneEvent('インライン編集を開始したとき','app.record.index.edit.show',"app.record.index"),
+            [],
-          new kintoneEvent('インライン編集の【保存】をクリックしたとき','app.record.index.edit.submit',"app.record.index"),
+            'app.record.create'
-          new kintoneEvent('インライン編集の保存が成功したとき', 'app.record.index.edit.submit.success',"app.record.index"),
+          ),
-          new kintoneEventForChange('app.record.index.edit.change','インライン編集のフィールド値を変更したとき' ,[],"app.record.index"),
+          new kintoneEventGroup(
-          new kintoneEventGroup('app.record.detail.show.customButtonClick','ボタンをクリックした時',[],"app.record.index"),
+            'app.record.create.show.customButtonClick',
-        ],"")
+            'ボタンをクリックした時',
+            [],
+            'app.record.create'
+          ),
+        ],
+        ''
+      ),
+      new kintoneEventGroup(
+        'app.record.detail',
+        'レコード詳細画面',
+        [
+          new kintoneEvent(
+            'レコード詳細画面を表示した後',
+            'app.record.detail.show',
+            'app.record.detail'
+          ),
+          new kintoneEvent(
+            'レコードを削除するとき',
+            'app.record.detail.delete.submit',
+            'app.record.detail'
+          ),
+          new kintoneEvent(
+            'プロセス管理のアクションを実行したとき',
+            'app.record.detail.process.proceed',
+            'app.record.detail'
+          ),
+          new kintoneEventGroup(
+            'app.record.detail.show.customButtonClick',
+            'ボタンをクリックした時',
+            [],
+            'app.record.detail'
+          ),
+        ],
+        ''
+      ),
+      new kintoneEventGroup(
+        'app.record.edit',
+        'レコード編集画面',
+        [
+          new kintoneEvent(
+            'レコード編集画面を表示した後',
+            'app.record.edit.show',
+            'app.record.edit'
+          ),
+          new kintoneEvent(
+            '保存をクリックしたとき',
+            'app.record.edit.submit',
+            'app.record.edit'
+          ),
+          new kintoneEvent(
+            '保存が成功したとき',
+            'app.record.edit.submit.success',
+            'app.record.edit'
+          ),
+          new kintoneEventForChange(
+            'app.record.edit.change',
+            'フィールドの値を変更したとき',
+            [],
+            'app.record.edit'
+          ),
+          new kintoneEventGroup(
+            'app.record.edit.show.customButtonClick',
+            'ボタンをクリックした時',
+            [],
+            'app.record.edit'
+          ),
+        ],
+        ''
+      ),
+      new kintoneEventGroup(
+        'app.record.index',
+        'レコード一覧画面',
+        [
+          new kintoneEvent(
+            '一覧画面を表示した後',
+            'app.record.index.show',
+            'app.record.index'
+          ),
+          new kintoneEvent(
+            'インライン編集を開始したとき',
+            'app.record.index.edit.show',
+            'app.record.index'
+          ),
+          new kintoneEvent(
+            'インライン編集の【保存】をクリックしたとき',
+            'app.record.index.edit.submit',
+            'app.record.index'
+          ),
+          new kintoneEvent(
+            'インライン編集の保存が成功したとき',
+            'app.record.index.edit.submit.success',
+            'app.record.index'
+          ),
+          new kintoneEventForChange(
+            'app.record.index.edit.change',
+            'インライン編集のフィールド値を変更したとき',
+            [],
+            'app.record.index'
+          ),
+          new kintoneEventGroup(
+            'app.record.detail.show.customButtonClick',
+            'ボタンをクリックした時',
+            [],
+            'app.record.index'
+          ),
+        ],
+        ''
+      ),
     ];
   }
 }