保存ボタンクリック時にイベントを一括削除

feat: numInput属性UI追加
inputText,numInputにrules設定追加、入力ルール設定可能
2024-05-13 00:53:24 +09:00 · 2024-05-09 10:49:05 +09:00 · 2024-05-07 11:56:20 +09:00 · 2024-05-06 20:58:06 +09:00
18 changed files with 1001 additions and 635 deletions
--- a/frontend/src/components/left/EventTree.vue
+++ b/frontend/src/components/left/EventTree.vue
@@ -1,48 +1,55 @@
 <template>
  <!-- <div class="q-pa-md q-gutter-sm"> -->
-    <q-tree
-      :nodes="store.eventTree.screens"
-      node-key="eventId"
-      children-key="events"
-      no-connectors
-      v-model:expanded="store.expandedScreen"
-      :dense="true"
-      :ref="tree"
-    >
-      <template v-slot:header-EVENT="prop">
-        <div class="row col items-start no-wrap event-node" @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 class="no-wrap" :class="selectedEvent && prop.node.eventId===selectedEvent.eventId?'selected-node':''">{{ prop.node.label }}</div>
-          <q-space></q-space>
-          <!-- <q-icon v-if="prop.node.hasFlow" name="delete" color="negative" size="16px" class="q-mr-sm"></q-icon> -->
+  <q-tree :nodes="store.eventTree.screens" node-key="eventId" children-key="events" no-connectors
+    v-model:expanded="store.expandedScreen" :dense="true" :ref="tree">
+    <template v-slot:header-EVENT="prop">
+      <div :ref="prop.node.eventId" class="row col items-center no-wrap event-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 class="no-wrap" @click="onSelected(prop.node)"
+          :class="selectedEvent && prop.node.eventId === selectedEvent.eventId ? 'selected-node' : ''">{{
+            prop.node.label }}</div>
+        <q-space></q-space>
+        <!-- <q-icon v-if="prop.node.hasFlow" name="delete" color="negative" size="16px" class="q-mr-sm"></q-icon> -->
+      </div>
+    </template>
+    <template v-slot:header-CHANGE="prop">
+      <div class="row col items-center no-wrap event-node">
+        <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>
+    <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>
-      <template v-slot:header-CHANGE="prop" >
-        <div class="row col items-start no-wrap event-node" >
-          <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>
+          <q-btn class="q-mr-sm delete-btn" flat fab-mini icon="delete_forever" padding="none" color="negative"
+            @click="deleteEvent(prop.node)"></q-btn>
        </div>
-      </template>
-    </q-tree>
-    <show-dialog v-model:visible="showDialog" name="フィールド選択" @close="closeDg" widht="400px">
-      <field-select ref="appDg" name="フィールド" type="single" :appId="store.appInfo?.appId"></field-select>
-    </show-dialog>
+      </div>
+    </template>
+  </q-tree>
+  <show-dialog v-model:visible="showDialog" name="フィールド選択" @close="closeDg">
+    <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 { IKintoneEvent ,IKintoneEventGroup, IKintoneEventNode, kintoneEvent} from '../../types/KintoneEvents';
-import { storeToRefs } from 'pinia';
-import { useFlowEditorStore } from 'stores/flowEditor';
-import { ActionFlow, ActionNode, RootAction } from 'src/types/ActionTypes';
-import ShowDialog from '../ShowDialog.vue';
-import FieldSelect from '../FieldSelect.vue';
 import { QTree } from 'quasar';
+import { ActionFlow, RootAction } from 'src/types/ActionTypes';
+import { useFlowEditorStore } from 'stores/flowEditor';
+import { defineComponent, ref } from 'vue';
+import { IKintoneEvent, IKintoneEventGroup, IKintoneEventNode } from '../../types/KintoneEvents';
+import FieldSelect from '../FieldSelect.vue';
+import ShowDialog from '../ShowDialog.vue';
 export default defineComponent({
  name: 'EventTree',
  components: {
@@ -58,62 +65,75 @@ export default defineComponent({
    // const selectedFlow = store.currentFlow;

    // const expanded=ref();
-    const selectedEvent = ref<IKintoneEvent|null>(null);
-    const selectedChangeEvent=ref<IKintoneEventGroup|null>(null);
-    const isFieldChange = (node:IKintoneEventNode)=>{
-      return node.header=='EVENT' && node.eventId.indexOf(".change.")>-1;
+    const selectedEvent = ref<IKintoneEvent | null>(null);
+    const selectedChangeEvent = ref<IKintoneEventGroup | null>(null);
+    const isFieldChange = (node: IKintoneEventNode) => {
+      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(
-          new kintoneEvent(
-            field.label,
-            eventid,
-            selectedChangeEvent.value.eventId)
-        );
+        selectedChangeEvent.value?.events.push({
+          eventId: eventid,
+          label: field.name,
+          parentId: selectedChangeEvent.value.eventId,
+          header: 'DELETABLE'
+        });
        tree.value?.expanded?.push(selectedChangeEvent.value.eventId);
        tree.value?.expandAll();
      }
    };
-    const addChangeEvent=(node:IKintoneEventGroup)=>{
-      if(store.appInfo===undefined){
-          return;
+    const addChangeEvent = (node: IKintoneEventGroup) => {
+      if (store.appInfo === undefined) {
+        return;
      }
-      selectedChangeEvent.value=node;
-      showDialog.value=true;
+      selectedChangeEvent.value = node;
+      showDialog.value = true;
    }
-    const onSelected=(node:IKintoneEvent)=>{
-        if(!node.eventId){
-          return;
-        }
-        selectedEvent.value=node;
-        if(store.appInfo===undefined){
-          return;
-        }
-        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;
-        }
+
+    const deleteEvent = (node: IKintoneEvent) => {
+      if (!node.eventId) {
+        return;
+      }
+      store.deleteStoreEventAndFlow(node);
+      store.selectFlow(undefined)
+      console.log(store.selectedFlow);
+      
+    }
+
+    const onSelected = (node: IKintoneEvent) => {
+      if (!node.eventId) {
+        return;
+      }
+      selectedEvent.value = node;
+      if (store.appInfo === undefined) {
+        return;
+      }
+      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 +145,7 @@ export default defineComponent({
      onSelected,
      selectedEvent,
      addChangeEvent,
+      deleteEvent,
      closeDg,
      store
    }
@@ -132,20 +153,25 @@ export default defineComponent({
 });
 </script>
 <style lang="scss">
-.nowrap{
-  flex-wrap:nowarp;
-  text-wrap:nowarp;
+.nowrap {
+  flex-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>
-
--- a/frontend/src/components/right/AppFieldSelect.vue
+++ b/frontend/src/components/right/AppFieldSelect.vue
@@ -1,6 +1,5 @@
 <template>
-
-    <div class="q-my-md">
+    <div class="q-my-md" v-bind="$attrs">
        <q-card flat>
            <q-card-section class="q-pa-none q-my-sm q-mr-md">
                <!-- <div class=" q-my-none ">App Field Select</div> -->
@@ -128,6 +127,7 @@ interface IAppFields{
 }

 export default defineComponent({
+    inheritAttrs:false,
    name: 'FieldInput',
    components: {
        ShowDialog,
--- a/frontend/src/components/right/ColorPicker.vue
+++ b/frontend/src/components/right/ColorPicker.vue
@@ -0,0 +1,74 @@
+<template>
+    <div class="" v-bind="$attrs">
+        <q-field v-model="color" :label="displayName" labelColor="primary"  :clearable="isSelected" stack-label :bottom-slots="!isSelected" >
+            <template v-slot:control>
+                <q-chip text-color="black" color="white" v-if="isSelected">
+                    <div class="row">
+                        <div class="col-4">
+                            <q-avatar class="shadow-1" :style="{ background: color }" size="xs"></q-avatar>
+                        </div>
+                        <div class="col">
+                            {{ color }}
+                        </div>
+                    </div>
+                </q-chip>
+            </template>
+            <template v-slot:append>
+                <q-icon name="colorize" class="cursor-pointer" color="primary" >
+                    <q-popup-proxy cover transition-show="scale" transition-hide="scale">
+                        <q-color no-header default-view="palette" v-model="color" />
+                    </q-popup-proxy>
+                </q-icon>
+            </template>
+            <template v-slot:hint>
+                {{ placeholder }}
+            </template>
+        </q-field>
+
+
+    </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref,watchEffect } from 'vue';
+export default defineComponent({
+    inheritAttrs:false,
+    name: 'ColorPicker',
+    components: {
+    },
+    props: {
+        displayName: {
+            type: String,
+            default: '',
+        },
+        name: {
+            type: String,
+            default: '',
+        },
+        placeholder: {
+            type: String,
+            default: '',
+        },
+        hint: {
+            type: String,
+            default: '',
+        },
+        modelValue: {
+            type: String,
+            default: null
+        },
+    },
+
+    setup(props, { emit }) {
+        const color = ref(props.modelValue??"");
+        const isSelected = computed(()=>props.modelValue && props.modelValue!=="");
+        watchEffect(()=>{
+          emit('update:modelValue', color.value);
+        });
+        return {
+            color,
+            isSelected
+        };
+    }
+});
+</script>
--- a/frontend/src/components/right/ConditionInput.vue
+++ b/frontend/src/components/right/ConditionInput.vue
@@ -1,18 +1,20 @@
 <template>
-  <q-field v-model="tree" :label="displayName" labelColor="primary" stack-label >
-    <template v-slot:control >
-      <q-card flat class="full-width">
-        <q-card-actions vertical>
-          <q-btn color="grey-3" text-color="black" @click="showDg()">クリックで設定：{{ isSetted?'設定済み':'未設定' }}</q-btn>
-        </q-card-actions>
-        <q-card-section class="text-caption" >
-          <div v-if="!isSetted">{{ placeholder }}</div>
-          <div v-else>{{ conditionString }}</div>
-        </q-card-section>
-      </q-card>
-    </template>
-  </q-field>
-  <condition-editor v-model:show="show" v-model:conditionTree="tree" @closed="onClosed"></condition-editor>
+  <div v-bind="$attrs">
+    <q-field v-model="tree" :label="displayName" labelColor="primary" stack-label >
+      <template v-slot:control >
+        <q-card flat class="full-width">
+          <q-card-actions vertical>
+            <q-btn color="grey-3" text-color="black" @click="showDg()">クリックで設定：{{ isSetted?'設定済み':'未設定' }}</q-btn>
+          </q-card-actions>
+          <q-card-section class="text-caption" >
+            <div v-if="!isSetted">{{ placeholder }}</div>
+            <div v-else>{{ conditionString }}</div>
+          </q-card-section>
+        </q-card>
+      </template>
+    </q-field>
+    <condition-editor v-model:show="show" v-model:conditionTree="tree" @closed="onClosed"></condition-editor>
+  </div>
 </template>

  <script lang="ts">
@@ -21,6 +23,7 @@
  import ConditionEditor from '../ConditionEditor/ConditionEditor.vue'
  export default defineComponent({
    name: 'FieldInput',
+    inheritAttrs:false,
    components: {
      ConditionEditor
    },
--- a/frontend/src/components/right/DatePicker.vue
+++ b/frontend/src/components/right/DatePicker.vue
@@ -1,18 +1,19 @@
 <template>
-
-  <q-input v-model="selectedDate" :label="displayName" :placeholder="placeholder" label-color="primary" mask="date" :rules="['date']" stack-label>
-    <template v-slot:append>
-      <q-icon name="event" class="cursor-pointer">
-        <q-popup-proxy cover transition-show="scale" transition-hide="scale">
-          <q-date v-model="selectedDate">
-            <div class="row items-center justify-end">
-              <q-btn v-close-popup label="Close" color="primary" flat />
-            </div>
-          </q-date>
-        </q-popup-proxy>
-      </q-icon>
-    </template>
-  </q-input>
+  <div v-bind="$attrs">
+    <q-input v-model="selectedDate" :label="displayName" :placeholder="placeholder" label-color="primary" mask="date" :rules="['date']" stack-label>
+      <template v-slot:append>
+        <q-icon name="event" class="cursor-pointer">
+          <q-popup-proxy cover transition-show="scale" transition-hide="scale">
+            <q-date v-model="selectedDate">
+              <div class="row items-center justify-end">
+                <q-btn v-close-popup label="Close" color="primary" flat />
+              </div>
+            </q-date>
+          </q-popup-proxy>
+        </q-icon>
+      </template>
+    </q-input>
+  </div>
 </template>

 <script lang="ts">
@@ -20,6 +21,7 @@ import { defineComponent, ref ,watchEffect} from 'vue';

 export default defineComponent({
  name: 'DatePicker',
+  inheritAttrs:false,
  props: {
    displayName:{
      type: String,
--- a/frontend/src/components/right/EventSetter.vue
+++ b/frontend/src/components/right/EventSetter.vue
@@ -1,9 +1,11 @@
 <template>
-  <q-input :label="displayName" v-model="inputValue" label-color="primary" :placeholder="placeholder" stack-label>
-    <template v-slot:append>
-      <q-btn round dense flat icon="add" @click="addButtonEvent()" />
-    </template>
-  </q-input>
+  <div v-bind="$attrs">
+    <q-input :label="displayName" v-model="inputValue" label-color="primary" :placeholder="placeholder" stack-label>
+      <template v-slot:append>
+        <q-btn round dense flat icon="add" @click="addButtonEvent()" />
+      </template>
+    </q-input>
+  </div>
 </template>

 <script lang="ts">
@@ -13,6 +15,7 @@ import { IKintoneEventGroup,kintoneEvent } from 'src/types/KintoneEvents';

 export default defineComponent({
  name: 'EventSetter',
+  inheritAttrs:false,
  props: {
    displayName:{
      type: String,
--- a/frontend/src/components/right/FieldInput.vue
+++ b/frontend/src/components/right/FieldInput.vue
@@ -1,8 +1,9 @@
 <template>
-    <q-field v-model="selectedField" :label="displayName" labelColor="primary"
-            :clearable="isSelected" stack-label :bottom-slots="!isSelected" >
-      <template v-slot:control >
-        <q-chip  color="primary" text-color="white"  v-if="isSelected">
+  <div v-bind="$attrs">
+    <q-field v-model="selectedField" :label="displayName" labelColor="primary" :clearable="isSelected" stack-label
+      :bottom-slots="!isSelected">
+      <template v-slot:control>
+        <q-chip color="primary" text-color="white" v-if="isSelected">
          {{ selectedField.name }}
        </q-chip>
      </template>
@@ -14,85 +15,87 @@
      </template>

      <template v-slot:append>
-      <q-icon name="search" class="cursor-pointer" color="primary" @click="showDg"/>
+        <q-icon name="search" class="cursor-pointer" color="primary" @click="showDg" />
      </template>
    </q-field>
    <show-dialog v-model:visible="show" name="フィールド一覧" @close="closeDg" widht="400px">
      <field-select ref="appDg" name="フィールド" type="single" :appId="store.appInfo?.appId"></field-select>
    </show-dialog>
-    </template>
+  </div>
+</template>

-    <script lang="ts">
-    import { defineComponent, ref ,watchEffect,computed} from 'vue';
-    import ShowDialog from '../ShowDialog.vue';
-    import FieldSelect from '../FieldSelect.vue';
-    import { useFlowEditorStore } from 'stores/flowEditor';
-    interface IField{
-      name:string,
-      code:string,
-      type:string
-    }
-    export default defineComponent({
-      name: 'FieldInput',
-      components: {
-        ShowDialog,
-        FieldSelect,
-      },
-      props: {
-        displayName:{
-          type: String,
-          default: '',
-        },
-        name:{
-          type: String,
-          default: '',
-        },
-        placeholder: {
-          type: String,
-          default: '',
-        },
-        hint:{
-          type: String,
-          default: '',
-        },
-        modelValue: {
-          type: Object,
-          default: null
-        },
-      },
+<script lang="ts">
+import { defineComponent, ref, watchEffect, computed } from 'vue';
+import ShowDialog from '../ShowDialog.vue';
+import FieldSelect from '../FieldSelect.vue';
+import { useFlowEditorStore } from 'stores/flowEditor';
+interface IField {
+  name: string,
+  code: string,
+  type: string
+}
+export default defineComponent({
+  name: 'FieldInput',
+  inheritAttrs:false,
+  components: {
+    ShowDialog,
+    FieldSelect,
+  },
+  props: {
+    displayName: {
+      type: String,
+      default: '',
+    },
+    name: {
+      type: String,
+      default: '',
+    },
+    placeholder: {
+      type: String,
+      default: '',
+    },
+    hint: {
+      type: String,
+      default: '',
+    },
+    modelValue: {
+      type: Object,
+      default: null
+    },
+  },

-      setup(props, { emit }) {
-        const appDg = ref();
-        const show = ref(false);
-        const selectedField = ref(props.modelValue);
-        const store = useFlowEditorStore();
-        const isSelected = computed(()=>{
-          return selectedField.value!==null && typeof selectedField.value === 'object' && ('name' in selectedField.value)
-        });
-
-        const showDg = () => {
-          show.value = true;
-        };
-
-        const closeDg = (val:string) => {
-          if (val == 'OK') {
-            selectedField.value = appDg.value.selected[0];
-          }
-        };
-
-        watchEffect(() => {
-          emit('update:modelValue', selectedField.value);
-        });
-
-        return {
-          store,
-          appDg,
-          show,
-          showDg,
-          closeDg,
-          selectedField,
-          isSelected
-        };
-      }
+  setup(props, { emit }) {
+    const appDg = ref();
+    const show = ref(false);
+    const selectedField = ref(props.modelValue);
+    const store = useFlowEditorStore();
+    const isSelected = computed(() => {
+      return selectedField.value !== null && typeof selectedField.value === 'object' && ('name' in selectedField.value)
    });
-    </script>
+
+    const showDg = () => {
+      show.value = true;
+    };
+
+    const closeDg = (val: string) => {
+      if (val == 'OK') {
+        selectedField.value = appDg.value.selected[0];
+      }
+    };
+
+    watchEffect(() => {
+      emit('update:modelValue', selectedField.value);
+    });
+
+    return {
+      store,
+      appDg,
+      show,
+      showDg,
+      closeDg,
+      selectedField,
+      isSelected
+    };
+  }
+});
+</script>
--- a/frontend/src/components/right/InputText.vue
+++ b/frontend/src/components/right/InputText.vue
@@ -1,24 +1,34 @@
 <template>
-  <q-input :label="displayName" v-model="inputValue" label-color="primary" :placeholder="placeholder" stack-label>
-  <template v-slot:append v-if="hint!==''">
-    <q-icon name="help" size="22px" color="blue-8">
-      <q-tooltip class="bg-yellow-2 text-black shadow-4" anchor="bottom right"><div class="hint-text" v-html="hint"/></q-tooltip>
-    </q-icon>
-  </template>
-  </q-input>
+  <div v-bind="$attrs">
+    <q-input :label="displayName" v-model="inputValue" label-color="primary"
+    :placeholder="placeholder" stack-label
+    :rules="rulesExp"
+    :maxlength="maxLength"
+    >
+      <template v-slot:append v-if="hint !== ''">
+        <q-icon name="help" size="22px" color="blue-8">
+          <q-tooltip class="bg-yellow-2 text-black shadow-4" anchor="bottom right">
+            <div class="hint-text" v-html="hint" />
+          </q-tooltip>
+        </q-icon>
+      </template>
+    </q-input>
+  </div>
 </template>

 <script lang="ts">
-import { defineComponent,ref,watchEffect } from 'vue';
+import { kMaxLength } from 'buffer';
+import { defineComponent, ref, watchEffect } from 'vue';

 export default defineComponent({
  name: 'InputText',
+  inheritAttrs: false,
  props: {
-    displayName:{
+    displayName: {
      type: String,
      default: '',
    },
-    name:{
+    name: {
      type: String,
      default: '',
    },
@@ -26,33 +36,43 @@ export default defineComponent({
      type: String,
      default: '',
    },
-    hint:{
+    hint: {
      type: String,
      default: '',
    },
+    maxLength:{
+      type: Number,
+      default:undefined
+    },
+    //例：[val=>!!val ||'入力してください']
+    rules:{
+      type:String,
+      default:undefined
+    },
    modelValue: {
      type: String,
      default: '',
    },
  },

-  setup(props , { emit }) {
+  setup(props, { emit }) {
    const inputValue = ref(props.modelValue);
-
+    const rulesExp = props.rules===undefined?null : eval(props.rules);
    watchEffect(() => {
      emit('update:modelValue', inputValue.value);
    });

    return {
      inputValue,
-      showhint:ref(false)
+      showhint: ref(false),
+      rulesExp
    };
  },
 });
 </script>
 <style lang="scss">
-.hint-text{
-  white-space : always;
+.hint-text {
+  white-space: always;
  max-width: 450px;
  font-size: 1.2em;
 }
--- a/frontend/src/components/right/MuiltInputText.vue
+++ b/frontend/src/components/right/MuiltInputText.vue
@@ -1,18 +1,22 @@
 <template>
-  <q-input :label="displayName"   label-color="primary" v-model="inputValue" :placeholder="placeholder" autogrow stack-label/>
+  <div v-bind="$attrs">
+    <q-input :label="displayName" label-color="primary" v-model="inputValue" :placeholder="placeholder" autogrow
+      stack-label />
+  </div>
 </template>

 <script lang="ts">
-import { defineComponent,ref,watchEffect } from 'vue';
+import { defineComponent, ref, watchEffect } from 'vue';

 export default defineComponent({
  name: 'MuiltInputText',
+  inheritAttrs: false,
  props: {
-    displayName:{
+    displayName: {
      type: String,
      default: '',
    },
-    name:{
+    name: {
      type: String,
      default: '',
    },
@@ -20,7 +24,7 @@ export default defineComponent({
      type: String,
      default: '',
    },
-    hint:{
+    hint: {
      type: String,
      default: '',
    },
--- a/frontend/src/components/right/NumInput.vue
+++ b/frontend/src/components/right/NumInput.vue
@@ -0,0 +1,87 @@
+<template>
+  <div class="" v-bind="$attrs">
+    <q-input v-model.number="numValue" type="number" :label="displayName" label-color="primary" stack-label bottom-slots
+     :min="min"
+     :max="max"
+     :rules="rulesExp"
+     >
+      <template v-slot:hint>
+        {{ placeholder }}
+      </template>
+    </q-input>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref, watchEffect } from 'vue';
+export default defineComponent({
+  name: 'NumInput',
+  inheritAttrs:false,
+  components: {
+  },
+  props: {
+    displayName: {
+      type: String,
+      default: '',
+    },
+    name: {
+      type: String,
+      default: '',
+    },
+    placeholder: {
+      type: String,
+      default: '',
+    },
+    hint: {
+      type: String,
+      default: '',
+    },
+    min:{
+      type:Number,
+      default:undefined
+    },
+    max:{
+      type:Number,
+      default:undefined
+    },
+    //[val=>!!val ||'数値を入力してください',val=>val<=100 && val>=1 || '1-100の範囲内の数値を入力してください']
+    rules:{
+      type:String,
+      default:undefined
+    },
+    modelValue: {
+      type: [Number , String],
+      default: undefined
+    },
+  },
+
+  setup(props, { emit }) {
+    const numValue = ref(props.modelValue);
+    const rulesExp = props.rules===undefined?null : eval(props.rules);
+    const isError = computed(()=>{
+      const val = numValue.value;
+      if (val === undefined) {
+        return false;
+      }
+      const numVal = typeof val === "string" ? parseInt(val) : val;
+      // Ensure parsed value is a valid number
+      if (isNaN(numVal)) {
+        return true;
+      }
+      // Check against min and max boundaries, if defined
+      if ((props.min !== undefined && numVal < props.min) || (props.max !== undefined && numVal > props.max)) {
+        return true;
+      }
+      return false;
+    });
+
+    watchEffect(()=>{
+      emit("update:modelValue",numValue.value);
+    });
+    return {
+      numValue,
+      rulesExp
+    };
+  }
+});
+</script>
--- a/frontend/src/components/right/PropertyList.vue
+++ b/frontend/src/components/right/PropertyList.vue
@@ -1,7 +1,7 @@
 <template>
  <div>
    <div v-for="(item, index) in properties" :key="index" >
-      <component :is="item.component" v-bind="item.props" :connectProps="connectProps(item.props)" v-model="item.props.modelValue"></component>
+      <component :is="item.component" v-bind="item.props"  :connectProps="connectProps(item.props)" v-model="item.props.modelValue"></component>
    </div>
  </div>
 </template>
@@ -19,6 +19,8 @@ import AppFieldSelect from './AppFieldSelect.vue';
 import MuiltInputText from '../right/MuiltInputText.vue';
 import ConditionInput from '../right/ConditionInput.vue';
 import EventSetter from '../right/EventSetter.vue';
+import ColorPicker from './ColorPicker.vue';
+import NumInput from './NumInput.vue';
 import { IActionNode,IActionProperty,IProp } from 'src/types/ActionTypes';

 export default defineComponent({
@@ -31,7 +33,9 @@ export default defineComponent({
    AppFieldSelect,
    MuiltInputText,
    ConditionInput,
-    EventSetter
+    EventSetter,
+    ColorPicker,
+    NumInput
  },
  props: {
    nodeProps: {
--- a/frontend/src/components/right/SelectBox.vue
+++ b/frontend/src/components/right/SelectBox.vue
@@ -1,5 +1,7 @@
 <template>
+  <div v-bind="$attrs">
  <q-select v-model="selectedValue" :label="displayName" :options="options"/>
+</div>
 </template>

 <script lang="ts">
@@ -7,6 +9,7 @@ import { defineComponent,ref,watchEffect } from 'vue';

 export default defineComponent({
  name: 'SelectBox',
+  inheritAttrs:false,
  props: {
    displayName:{
      type: String,
--- a/frontend/src/control/flowctrl.ts
+++ b/frontend/src/control/flowctrl.ts
@@ -1,44 +1,49 @@
 import { api } from 'boot/axios';
 import { ActionFlow } from 'src/types/ActionTypes';

-export class FlowCtrl
-{
-
-  async getFlows(appId:string):Promise<ActionFlow[]>
-  {
-      const flows:ActionFlow[]=[];
-      try{
-        const result = await api.get(`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;
+export class FlowCtrl {
+  async getFlows(appId: string): Promise<ActionFlow[]> {
+    const flows: ActionFlow[] = [];
+    try {
+      const result = await api.get(`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>
-  {
-       const result = await api.post('api/flow',jsonData);
-       console.info(result.data)
-       return true;
+  async SaveFlow(jsonData: any): Promise<boolean> {
+    const result = await api.post('api/flow', jsonData);
+    console.info(result.data);
+    return true;
  }
  /**
   * フローを更新する
   * @param jsonData
   * @returns
   */
-  async  UpdateFlow(jsonData:any):Promise<boolean>
-  {
-    const result = await api.put('api/flow/' + jsonData.flowid,jsonData);
-    console.info(result.data)
+  async UpdateFlow(jsonData: any): Promise<boolean> {
+    const result = await api.put('api/flow/' + jsonData.flowid, jsonData);
+    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;
  }
-
 }
-
--- a/frontend/src/pages/FlowChart.vue
+++ b/frontend/src/pages/FlowChart.vue
@@ -20,13 +20,12 @@
          </div>
        </q-drawer>
      </div>
-      <q-btn flat dense round
-              :icon="drawerLeft?'keyboard_double_arrow_left':'keyboard_double_arrow_right'"
-              :style="[drawerLeft?{'left':'300px'}:{'left':'0px'}]"
-              @click="drawerLeft=!drawerLeft" class="expand" />
-      <div class="q-pa-md q-gutter-sm" :style="{minWidth: minPanelWidth}">
-        <div class="flowchart" v-if="store.currentFlow" :style="[drawerLeft?{paddingLeft:'300px'}:{}]">
-          <node-item v-if="rootNode!==undefined" :key="rootNode.id" :isSelected="rootNode === store.activeNode"
+      <q-btn flat dense round :icon="drawerLeft ? 'keyboard_double_arrow_left' : 'keyboard_double_arrow_right'"
+        :style="[drawerLeft ? { 'left': '300px' } : { 'left': '0px' }]" @click="drawerLeft = !drawerLeft"
+        class="expand" />
+      <div class="q-pa-md q-gutter-sm" :style="{ minWidth: minPanelWidth }">
+        <div class="flowchart" v-if="store.currentFlow" :style="[drawerLeft ? { paddingLeft: '300px' } : {}]">
+          <node-item v-if="rootNode !== undefined" :key="rootNode.id" :isSelected="rootNode === store.activeNode"
            :actionNode="rootNode" @addNode="addNode" @nodeSelected="onNodeSelected" @nodeEdit="onNodeEdit"
            @deleteNode="onDeleteNode" @deleteAllNextNodes="onDeleteAllNextNodes" @copyFlow="onCopyFlow"></node-item>
        </div>
@@ -35,13 +34,13 @@
    </q-layout>
    <ShowDialog v-model:visible="showAddAction" name="アクション" @close="closeDg" min-width="500px" min-height="500px">
      <template v-slot:toolbar>
-        <q-input  dense debounce="200" v-model="filter" placeholder="検索" clearable>
+        <q-input dense debounce="200" v-model="filter" placeholder="検索" clearable>
          <template v-slot:before>
            <q-icon name="search" />
          </template>
        </q-input>
      </template>
-      <action-select ref="appDg" name="model" :filter="filter"  type="single"></action-select>
+      <action-select ref="appDg" name="model" :filter="filter" type="single"></action-select>
    </ShowDialog>

  </q-page>
@@ -77,20 +76,20 @@ const prevNodeIfo = ref({
 // const refFlow = ref<ActionFlow|null>(null);
 const showAddAction = ref(false);
 const drawerRight = ref(false);
-const filter=ref("");
+const filter = ref("");
 const model = ref("");
 const addActionNode = (action: IActionNode) => {
  // refFlow.value?.actionNodes.push(action);
  store.currentFlow?.actionNodes.push(action);
 }
-const rootNode = computed(()=>{
+const rootNode = computed(() => {
  return store.currentFlow?.getRoot();
 });
-const minPanelWidth=computed(()=>{
+const minPanelWidth = computed(() => {
  const root = store.currentFlow?.getRoot();
-  if(store.currentFlow && root){
+  if (store.currentFlow && root) {
    return store.currentFlow?.getColumns(root) * 300 + 'px';
-  }else{
+  } else {
    return "300px";
  }
 });
@@ -149,7 +148,7 @@ const closeDg = (val: any) => {
 */
 const onCopyFlow = () => {
  if (navigator.clipboard) {
-    const jsonData =JSON.stringify(store.currentFlow) ;
+    const jsonData = JSON.stringify(store.currentFlow);
    navigator.clipboard.writeText(jsonData).then(() => {
      console.log('Text successfully copied to clipboard');
    },
@@ -195,7 +194,22 @@ const onDeploy = async () => {

 const onSaveFlow = async () => {
  const targetFlow = store.selectedFlow;
+
+  const deleteFlows = () => {
+    $q.notify({
+      type: 'positive',
+      caption: "通知",
+      message: `削除 ${store.deleteFlowIds.length} イベント`
+    });
+    store.deletebackendFlow();
+  }
+
  if (targetFlow === undefined) {
+    if (store.deleteFlowIds.length > 0) {
+      deleteFlows();
+      return;
+    }
+
    $q.notify({
      type: 'negative',
      caption: "エラー",
@@ -204,6 +218,9 @@ const onSaveFlow = async () => {
    return;
  }
  try {
+    if (store.deleteFlowIds.length > 0) {
+      deleteFlows();
+    }
    saveLoading.value = true;
    await store.saveFlow(targetFlow);
    saveLoading.value = false;
@@ -265,7 +282,8 @@ onMounted(() => {
  top: 50px;
  z-index: 999;
 }
-.expand{
+
+.expand {
  position: fixed;
  left: 0px;
  top: 50%;
--- a/frontend/src/stores/flowEditor.ts
+++ b/frontend/src/stores/flowEditor.ts
@@ -1,118 +1,164 @@
 import { defineStore } from 'pinia';
-import { AppInfo ,IActionFlow, IActionNode} from 'src/types/ActionTypes';
-import { IKintoneEvent,KintoneEventManager } from 'src/types/KintoneEvents';
-import {FlowCtrl } from '../control/flowctrl';
+import { AppInfo, IActionFlow, IActionNode } from 'src/types/ActionTypes';
+import { IKintoneEvent, KintoneEventManager } from 'src/types/KintoneEvents';
+import { FlowCtrl } from '../control/flowctrl';

-export interface FlowEditorState{
-  flowNames1:string;
-  appInfo?:AppInfo;
-  flows?:IActionFlow[];
-  selectedFlow?:IActionFlow|undefined;
-  activeNode:IActionNode|undefined;
-  eventTree:KintoneEventManager;
-  selectedEvent:IKintoneEvent|undefined;
-  expandedScreen:any[];
+export interface FlowEditorState {
+  flowNames1: string;
+  appInfo?: AppInfo;
+  flows?: IActionFlow[];
+  selectedFlow?: IActionFlow | undefined;
+  activeNode: IActionNode | undefined;
+  eventTree: KintoneEventManager;
+  selectedEvent: IKintoneEvent | undefined;
+  expandedScreen: any[];
+  deleteFlowIds: string[];
 }
-const flowCtrl=new FlowCtrl();
+const flowCtrl = new FlowCtrl();
 const eventTree = new KintoneEventManager();
-export const useFlowEditorStore = defineStore("flowEditor",{
-  state: ():FlowEditorState =>  ({
-      flowNames1: '',
-      appInfo:undefined,
-      flows:[],
-      selectedFlow:undefined,
-      activeNode:undefined,
-      eventTree:eventTree,
-      selectedEvent:undefined,
-      expandedScreen:[]
-    }),
+export const useFlowEditorStore = defineStore('flowEditor', {
+  state: (): FlowEditorState => ({
+    flowNames1: '',
+    appInfo: undefined,
+    flows: [],
+    selectedFlow: undefined,
+    activeNode: undefined,
+    eventTree: eventTree,
+    selectedEvent: undefined,
+    expandedScreen: [],
+    deleteFlowIds: [],
+  }),
  getters: {
    /**
     *
     * @returns 現在編集しているフロー
     */
-    currentFlow():IActionFlow|undefined{
-        return this.selectedFlow;
+    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
-          });
-      }
-    }
+    findFlowByEventId(state) {
+      return (eventId: string) => {
+        return state.flows?.find((flow) => {
+          const root = flow.getRoot();
+          return root?.name === eventId;
+        });
+      };
+    },
+
+    findEventById(state) {
+      return (eventId: string) => {
+        return state.eventTree.findEventById(eventId);
+      };
+    },
+
+    findEventFrist(state) {
+      return () => {
+        return state.eventTree.findEventFrist();
+      };
+    },
  },

  actions: {
-    setFlows(flows:IActionFlow[]){
-      this.flows=flows;
+    setFlows(flows: IActionFlow[]) {
+      this.flows = flows;
    },
-    selectFlow(flow:IActionFlow){
-      this.selectedFlow=flow;
+    selectFlow(flow: IActionFlow | undefined) {
+      this.selectedFlow = flow;
    },
-    setActiveNode(node:IActionNode){
-      this.activeNode=node;
+    setActiveNode(node: IActionNode) {
+      this.activeNode = node;
    },
-    setApp(app:AppInfo){
-      this.appInfo=app;
+    setApp(app: AppInfo) {
+      this.appInfo = app;
+    },
+    addDeleteFlowId(flowId: string) {
+      this.deleteFlowIds.push(flowId);
+    },
+    clearDeleteFlowIds() {
+      this.deleteFlowIds = [];
    },
    /**
     * DBからフルーを保存する
     * @returns
     */
-    async loadFlow(){
-        if(this.appInfo===undefined) return;
-        const actionFlows = await flowCtrl.getFlows(this.appInfo?.appId);
-        //eventTreeにバンドする
-        this.eventTree.bindFlows(actionFlows);
-        if(actionFlows===undefined || actionFlows.length===0){
-          this.flows=[];
-          this.selectedFlow=undefined;
-          return;
-        }
-        this.setFlows(actionFlows);
-        if(actionFlows && actionFlows.length>0){
-          this.selectFlow(actionFlows[0]);
-        }
-        const expandNames = actionFlows.map(flow=>flow.getRoot()?.title);
-        // const expandName =actionFlows[0].getRoot()?.title;
-        this.expandedScreen=expandNames;
+    async loadFlow() {
+      if (this.appInfo === undefined) return;
+      const actionFlows = await flowCtrl.getFlows(this.appInfo?.appId);
+      //eventTreeにバンドする
+      this.eventTree.bindFlows(actionFlows);
+      if (actionFlows === undefined || actionFlows.length === 0) {
+        this.flows = [];
+        this.selectedFlow = undefined;
+        return;
+      }
+      this.setFlows(actionFlows);
+      if (actionFlows && actionFlows.length > 0) {
+        this.selectFlow(actionFlows[0]);
+      }
+      const expandNames = actionFlows.map((flow) => flow.getRoot()?.title);
+      // const expandName =actionFlows[0].getRoot()?.title;
+      this.expandedScreen = expandNames;
    },
    /**
     * フローをDBに保存及び更新する
     */
-    async saveFlow(flow:IActionFlow){
-      const root=flow.getRoot();
-      const isNew = flow.id==='';
-      const jsonData={
-        flowid: isNew ? flow.createNewId():flow.id,
+    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)
-      }
+        content: JSON.stringify(flow),
+      };

-      if(isNew){
+      if (isNew) {
        return await flowCtrl.SaveFlow(jsonData);
-      }else{
+      } else {
        return await flowCtrl.UpdateFlow(jsonData);
      }
    },
+
+    async deletebackendFlow() {
+      const deletePromises = Object.values(this.deleteFlowIds).map((flowId) =>
+        flowCtrl.DeleteFlow(flowId)
+      );
+      await Promise.all(deletePromises);
+      this.clearDeleteFlowIds();
+    },
+
+    deleteStoreEventAndFlow(event: IKintoneEvent) {
+      const store = useFlowEditorStore();
+      if (event.flowData) {
+        const flow = event.flowData;
+        if (flow.id === '') {
+          return;
+        }
+        console.log('delete flow', flow);
+        
+        this.addDeleteFlowId(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>{
-      if(this.appInfo===undefined){
+    async deploy(): Promise<boolean> {
+      if (this.appInfo === undefined) {
        return false;
      }
      return await flowCtrl.depoly(this.appInfo?.appId);
-   }
-
-  }
+    },
+  },
 });
--- a/frontend/src/types/KintoneEvents.ts
+++ b/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;
-  eventId:string;
-  parentId:string;
+  header: string;
+  eventId: 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;
-   get hasFlow(): boolean{
-    return this.flowData!==undefined && this.flowData.actionNodes.length>1
-  };
+  parentId: string;
+  get hasFlow(): boolean {
+    return this.flowData !== undefined && this.flowData.actionNodes.length > 1;
+  }
  flowData?: IActionFlow | undefined;
  label: string;
-  get header():string{
-    return "EVENT";
-  }
-  constructor(label:string,eventId:string,parentId:string){
-    this.eventId=eventId;
-    this.label=label;
-    this.parentId=parentId;
+  header = 'EVENT';
+  constructor(label: string, eventId: string, parentId: string) {
+    this.eventId = eventId;
+    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{
-    return "EVENTGROUP";
+  get header(): string {
+    return 'EVENTGROUP';
  }
-  constructor(eventId:string,label:string,events:IKintoneEventNode[],parentId:string){
-    this.eventId=eventId;
-    this.label=label;
-    this.events=events;
-    this.parentId=parentId;
+  constructor(
+    eventId: string,
+    label: string,
+    events: IKintoneEventNode[],
+    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{
-    return "CHANGE";
+  get header(): string {
+    return 'CHANGE';
  }
-  constructor(eventId:string,label:string,events:IKintoneEventNode[],parentId:string){
-    this.eventId=eventId;
-    this.label=label;
-    this.events=events;
-    this.parentId=parentId;
+  constructor(
+    eventId: string,
+    label: string,
+    events: IKintoneEventNode[],
+    parentId: string
+  ) {
+    this.eventId = eventId;
+    this.label = label;
+    this.events = events;
+    this.parentId = parentId;
  }
 }

-
-
 export class KintoneEventManager {
  public screens: IKintoneEventGroup[];

@@ -76,28 +81,42 @@ export class KintoneEventManager {
    this.screens = this.getKintoneEvents();
  }

-  public bindFlows(flows:IActionFlow[]){
-    this.screens=this.getKintoneEvents();
-    for (const flow of flows){
-      const eventId =flow.getRoot()?.name;
-      if(eventId!==undefined){
+  public bindFlows(flows: IActionFlow[]) {
+    this.screens = this.getKintoneEvents();
+    for (const flow of flows) {
+      const eventId = flow.getRoot()?.name;
+      console.log('eventId:', eventId);
+      if (eventId !== undefined) {
        const eventNode = this.findEventById(eventId);
-        if(eventNode!==null && eventNode.header==="EVENT"){
-          const event =eventNode as kintoneEvent;
-          event.flowData=flow;
-        }else{
+        if (eventNode !== null && eventNode.header === 'EVENT') {
+          const event = eventNode as kintoneEvent;
+          event.flowData = flow;
+        } else {
          //EventGroupのIDを取得
-          const lastIndex = eventId.lastIndexOf(".");
-          const groupId=eventId.substring(0,lastIndex);
+          const lastIndex = eventId.lastIndexOf('.');
+          const groupId = eventId.substring(0, lastIndex);
          const eventNode = this.findEventById(groupId);
-          if(eventNode && (eventNode.header==="EVENTGROUP" || eventNode.header==="CHANGE")){
-            const groupEvent=eventNode as kintoneEventGroup;
-            const newEvent =new kintoneEvent(
-              flow.getRoot()?.subTitle || "",
-              eventId,
-              groupEvent.parentId
-            );
-            newEvent.flowData=flow;
+          if (
+            eventNode &&
+            (eventNode.header === 'EVENTGROUP' || eventNode.header === 'CHANGE')
+          ) {
+            const groupEvent = eventNode as kintoneEventGroup;
+            console.log('label:', flow.getRoot()?.subTitle);
+
+            const newEvent = {
+              label: flow.getRoot()?.subTitle || '',
+              eventId: eventId,
+              parentId: groupId,
+              header: 'DELETABLE',
+              hasFlow: true,
+              flowData: flow,
+            };
+
+            // new kintoneEvent(
+            // flow.getRoot()?.subTitle || '',
+            // eventId,
+            // groupEvent.parentId
+            // );
            groupEvent.events.push(newEvent);
          }
        }
@@ -105,62 +124,198 @@ export class KintoneEventManager {
    }
  }

+  public findEventFrist() {
+    return this.findEventById('app.record.create.show') as IKintoneEvent;
+  }
+
  public findEventById(eventId: string): IKintoneEventNode | null {
-    const screen=this.findScreen(eventId);
-    if(screen) {return screen;}
+    const screen = this.findScreen(eventId);
+    if (screen) {
+      return screen;
+    }
    for (const screen of this.screens) {
      for (const event of screen.events) {
-          if (event.eventId === eventId) {
-            return event;
-          }
-          if(event.header==="EVENTGROUP"||event.header==="CHANGE"){
-            const eventGroup = event as IKintoneEventGroup;
-            const targetEvent = eventGroup.events.find((ev)=>{
-              return ev.eventId===eventId;
-            })
-            if(targetEvent){
-              return targetEvent;
-            }
+        if (event.eventId === eventId) {
+          return event;
+        }
+        if (event.header === 'EVENTGROUP' || event.header === 'CHANGE') {
+          const eventGroup = event as IKintoneEventGroup;
+          const targetEvent = eventGroup.events.find((ev) => {
+            return ev.eventId === eventId;
+          });
+          if (targetEvent) {
+            return targetEvent;
          }
+        }
      }
    }
    return null;
  }

-  public findScreen(eventId:string):IKintoneEventGroup|undefined{
-    return this.screens.find(screen=>screen.eventId==eventId);
+  public findScreen(eventId: string): IKintoneEventGroup | undefined {
+    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 kintoneEvent('レコード追加画面を表示した後','app.record.create.show',"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 kintoneEventGroup('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"),
-        ],"")
+      new kintoneEventGroup(
+        'app.record.create',
+        'レコード追加画面',
+        [
+          new kintoneEvent(
+            'レコード追加画面を表示した後',
+            'app.record.create.show',
+            '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 kintoneEventGroup(
+            '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'
+          ),
+        ],
+        ''
+      ),
    ];
  }
 }
--- a/sample.json
+++ b/sample.json
@@ -2,25 +2,22 @@
  "id": "",
  "actionNodes": [
    {
-      "id": "cdd696f5-7e9c-4fd7-bf8b-9cd1b1605870",
-      "name": "app.record.create.submit",
+      "id": "c5cd772a-04be-418e-a811-3787f98a2285",
+      "name": "app.record.create.show",
      "title": "レコード追加画面",
-      "subTitle": "保存をクリックしたとき",
+      "subTitle": "レコード追加画面を表示した後",
      "inputPoint": "",
      "outputPoints": [],
      "isRoot": true,
      "actionProps": [],
      "ActionValue": {},
-      "nextNodeIds": [
-        [
-          "",
-          "dfa6df09-7b3e-4848-89ad-2e9147004f31"
-        ]
-      ]
+      "nextNodeIds": {
+        "": "1eb097b1-9d08-462e-97b0-6e3e1232edef"
+      }
    },
    {
-      "id": "dfa6df09-7b3e-4848-89ad-2e9147004f31",
-      "name": "自動採番する",
+      "id": "1eb097b1-9d08-462e-97b0-6e3e1232edef",
+      "name": "属性UIテスト用",
      "inputPoint": "",
      "outputPoints": [],
      "actionProps": [
@@ -31,185 +28,86 @@
            "displayName": "表示名",
            "placeholder": "表示を入力してください",
            "hint": "",
-            "modelValue": "文書番号を自動採番する"
+            "modelValue": "属性UIテスト用"
          }
        },
        {
-          "component": "FieldInput",
+          "component": "AppFieldSelect",
          "props": {
-            "displayName": "採番項目",
+            "displayName": "フィールド選択(複数)",
            "modelValue": {
-              "name": "文書番号",
-              "type": "SINGLE_LINE_TEXT",
-              "code": "文書番号",
-              "label": "文書番号",
-              "noLabel": false,
-              "required": false,
-              "minLength": "",
-              "maxLength": "",
-              "expression": "",
-              "hideExpression": false,
-              "unique": false,
-              "defaultValue": ""
+              "app": {
+                "id": "64",
+                "name": "日報テスト",
+                "description": "日々の業務内容、報告事項、所感などを記載していくアプリです。\n記録を行うだけでなく、あとからの振り返りやメンバー間のコミュニケーションにも活用できます。",
+                "createdate": "2023/07/15 10:15:03"
+              },
+              "fields": [
+                {
+                  "name": "ステータス",
+                  "type": "STATUS",
+                  "code": "ステータス",
+                  "label": "ステータス",
+                  "enabled": false
+                }
+              ]
            },
-            "name": "field",
-            "placeholder": "採番項目を選択してください"
+            "name": "selectFields",
+            "placeholder": "アプリ選択後、フィールドを選んでください",
+            "selectType": "multiple"
          }
        },
        {
-          "component": "InputText",
+          "component": "AppFieldSelect",
          "props": {
-            "displayName": "フォーマット",
-            "modelValue": "000000",
-            "name": "format",
-            "placeholder": "数値書式文字列を指定します"
-          }
-        },
-        {
-          "component": "InputText",
-          "props": {
-            "displayName": "前につける文字列",
-            "modelValue": "",
-            "name": "prefix",
-            "placeholder": "前につける文字列を入力してください"
-          }
-        },
-        {
-          "component": "InputText",
-          "props": {
-            "displayName": "後ろにつける文字列",
-            "modelValue": "{$format('yyyyMMdd')}",
-            "name": "suffix",
-            "placeholder": "後ろにつける文字列を入力してください"
-          }
-        },
-        {
-          "component": "InputText",
-          "props": {
-            "displayName": "結果（戻り値）",
-            "modelValue": "docNumber",
-            "name": "verName",
-            "placeholder": "変数名を入力してください"
-          }
-        }
-      ],
-      "prevNodeId": "cdd696f5-7e9c-4fd7-bf8b-9cd1b1605870",
-      "nextNodeIds": [
-        [
-          "",
-          "b32bf329-f05a-486f-9b79-9920b57fe324"
-        ]
-      ]
-    },
-    {
-      "id": "b32bf329-f05a-486f-9b79-9920b57fe324",
-      "name": "条件式",
-      "inputPoint": "",
-      "outputPoints": [
-        "はい",
-        "いいえ"
-      ],
-      "actionProps": [
-        {
-          "component": "InputText",
-          "props": {
-            "name": "displayName",
-            "displayName": "表示名",
-            "placeholder": "表示を入力してください",
-            "hint": "",
-            "modelValue": "条件式を設定する"
-          }
-        },
-        {
-          "component": "ConditionInput",
-          "props": {
-            "displayName": "条件",
-            "modelValue": "{\"index\":0,\"type\":\"root\",\"children\":[{\"index\":1,\"type\":\"condition\",\"parent\":\"root\",\"object\":{\"name\":\"部署\",\"objectType\":\"field\",\"type\":\"DROP_DOWN\",\"code\":\"ドロップダウン\",\"label\":\"部署\",\"noLabel\":false,\"required\":false,\"options\":{\"総務\":{\"label\":\"総務\",\"index\":\"2\"},\"サポート\":{\"label\":\"サポート\",\"index\":\"3\"},\"マーケティング\":{\"label\":\"マーケティング\",\"index\":\"1\"},\"営業\":{\"label\":\"営業\",\"index\":\"0\"},\"開発\":{\"label\":\"開発\",\"index\":\"4\"}},\"defaultValue\":\"\"},\"operator\":\"!=\",\"value\":\"\"},{\"index\":2,\"type\":\"condition\",\"parent\":\"root\",\"object\":{\"name\":\"所感、学び\",\"objectType\":\"field\",\"type\":\"MULTI_LINE_TEXT\",\"code\":\"文字列__複数行__0\",\"label\":\"所感、学び\",\"noLabel\":false,\"required\":false,\"defaultValue\":\"\"},\"operator\":\"!=\",\"value\":\"\"},{\"index\":3,\"type\":\"condition\",\"parent\":\"root\",\"object\":{\"name\":\"業務内容\",\"objectType\":\"field\",\"type\":\"MULTI_LINE_TEXT\",\"code\":\"文字列__複数行_\",\"label\":\"業務内容\",\"noLabel\":false,\"required\":false,\"defaultValue\":\"\"},\"operator\":\"!=\",\"value\":\"\"},{\"index\":4,\"type\":\"condition\",\"parent\":\"root\",\"object\":{\"name\":\"ステータス\",\"objectType\":\"field\",\"type\":\"STATUS\",\"code\":\"ステータス\",\"label\":\"ステータス\",\"enabled\":true},\"operator\":\"=\",\"value\":\"作成中\"}],\"parent\":null,\"logicalOperator\":\"AND\"}",
-            "name": "condition",
-            "placeholder": "条件式を設定してください"
-          }
-        },
-        {
-          "component": "InputText",
-          "props": {
-            "displayName": "結果（戻り値）",
-            "modelValue": "conditionResult",
-            "name": "verName",
-            "placeholder": "変数名を入力してください"
-          }
-        }
-      ],
-      "prevNodeId": "dfa6df09-7b3e-4848-89ad-2e9147004f31",
-      "nextNodeIds": [
-        [
-          "いいえ",
-          "82bdcbcc-d8c1-4e2c-b38f-f736c95b193a"
-        ]
-      ]
-    },
-    {
-      "id": "82bdcbcc-d8c1-4e2c-b38f-f736c95b193a",
-      "name": "表示／非表示",
-      "inputPoint": "いいえ",
-      "outputPoints": [],
-      "actionProps": [
-        {
-          "component": "InputText",
-          "props": {
-            "name": "displayName",
-            "displayName": "表示名",
-            "placeholder": "表示を入力してください",
-            "hint": "",
-            "modelValue": "指定項目の表示・非表示を設定する"
-          }
-        },
-        {
-          "component": "FieldInput",
-          "props": {
-            "displayName": "フィールド",
+            "displayName": "フィールド選択(単一)",
            "modelValue": {
-              "name": "文書番号",
-              "type": "SINGLE_LINE_TEXT",
-              "code": "文書番号",
-              "label": "文書番号",
-              "noLabel": false,
-              "required": false,
-              "minLength": "",
-              "maxLength": "",
-              "expression": "",
-              "hideExpression": false,
-              "unique": false,
-              "defaultValue": ""
+              "app": {
+                "id": "58",
+                "name": "日報",
+                "description": "",
+                "createdate": "2023/07/13 19:05:26"
+              },
+              "fields": [
+                {
+                  "name": "所感、学び",
+                  "type": "MULTI_LINE_TEXT",
+                  "code": "文字列__複数行__0",
+                  "label": "所感、学び",
+                  "noLabel": false,
+                  "required": false,
+                  "defaultValue": ""
+                }
+              ]
            },
-            "name": "field",
-            "placeholder": "対象項目を選択してください"
+            "name": "selectField",
+            "placeholder": "アプリ選択後、フィールドを選んでください",
+            "selectType": "single"
          }
        },
        {
-          "component": "SelectBox",
+          "component": "ColorPicker",
          "props": {
-            "displayName": "表示／非表示",
-            "options": [
-              "表示",
-              "非表示"
-            ],
-            "modelValue": "非表示",
-            "name": "show",
-            "placeholder": ""
+            "displayName": "色選択",
+            "modelValue": "#f50000",
+            "name": "color",
+            "placeholder": "カラーを選択してください"
          }
        },
        {
-          "component": "ConditionInput",
+          "component": "NumInput",
          "props": {
-            "displayName": "条件",
-            "modelValue": "{\"index\":0,\"type\":\"root\",\"children\":[{\"index\":1,\"type\":\"condition\",\"parent\":\"root\",\"object\":{},\"operator\":\"=\",\"value\":\"\"}],\"parent\":null,\"logicalOperator\":\"AND\"}",
-            "name": "condition",
-            "placeholder": "条件式を設定してください"
+            "displayName": "数値入力フィールド",
+            "modelValue": 100,
+            "name": "num",
+            "max": 100,
+            "min": 0,
+            "placeholder": "数値を入力してください"
          }
        }
      ],
-      "prevNodeId": "b32bf329-f05a-486f-9b79-9920b57fe324",
-      "nextNodeIds": []
+      "prevNodeId": "c5cd772a-04be-418e-a811-3787f98a2285",
+      "nextNodeIds": {}
    }
  ]
 }
--- a/sample2.json
+++ b/sample2.json
@@ -2,36 +2,54 @@
    {
        "component": "InputText",
        "props": {
-            "displayName": "ボタン名",
+            "displayName": "文字入力",
            "modelValue": "",
-            "name": "buttonName",
-            "placeholder": "ボタンのラベルを入力してください"
+            "name": "str",
+            "placeholder": "文字を入力してください",
+            "maxLength":"20",
+            "hint":"文字列入力<br>入力ルール指定可能。ルールの設定例：[val=>!!val||'必須入力です']",
+            "rules":"[val=>!!val||'必須入力です']"
        }
    },
    {
-        "component": "SelectBox",
+        "component": "AppFieldSelect",
        "props": {
-            "displayName": "追加位置",
-            "modelValue": "",
-            "name": "position",
-            "options":[
-                "一番右に追加する",
-                "一番左に追加する"
-            ],
-            "placeholder": "追加位置を選択してください"
+            "displayName": "フィールド選択(複数)",
+            "modelValue": {},
+            "name": "selectFields",
+            "placeholder": "アプリ選択後、フィールドを選んでください",
+            "selectType":"multiple"
        }
    },
    {
-        "component": "EventSetter",
+        "component": "AppFieldSelect",
        "props": {
-            "displayName": "イベント名",
+            "displayName": "フィールド選択(単一)",
+            "modelValue": {},
+            "name": "selectField",
+            "placeholder": "アプリ選択後、フィールドを選んでください",
+            "selectType":"single"
+        }
+    },
+    {
+        "component": "ColorPicker",
+        "props": {
+            "displayName": "色選択",
            "modelValue": "",
-            "name": "eventName",
-            "connectProps":[{
-                "key":"displayName",
-                "propName":"buttonName"
-            }],
-            "placeholder": "イベント名を入力してください"
+            "name": "color",
+            "placeholder": "カラーを選択してください"
+        }
+    },
+    {
+        "component": "NumInput",
+        "props": {
+            "displayName": "数値入力フィールド",
+            "modelValue": "",
+            "name": "num",
+            "max":100,
+            "min":0,
+            "placeholder": "数値を入力してください",
+            "rules":"[val=>!!val ||'数値を入力してください',val=>val<=100 && val>=1 || '1-100の範囲内の数値を入力してください']"
        }
    }
-]
+]
Author	SHA1	Message	Date
Mouriya	700fa24868	保存ボタンクリック時にイベントを一括削除	2024-05-13 00:53:24 +09:00
maxiaozhe@alicorns.co.jp	c426bbf793	feat: numInput属性UI追加 inputText,numInputにrules設定追加、入力ルール設定可能	2024-05-09 10:49:05 +09:00
maxiaozhe@alicorns.co.jp	329debaab8	Merge branch 'mvp_step2_dev' into feature-colorpicker	2024-05-07 11:56:20 +09:00
Mouriya	994a0174f5	カラーピッカーと数字入力ボックスの追加	2024-05-06 20:58:06 +09:00