KintoneAppBuilder/frontend/src/pages/FlowChart.vue

<template>
  <q-page>
    <q-layout
      container
      class="absolute-full shadow-2 rounded-borders"
    >
      <div class="q-pa-sm q-gutter-sm  ">
        <q-drawer
        side="left"
        :overlay="true"
        bordered
        v-model="drawerLeft"
        :show-if-above="false"
        elevated
        >
            <div class="flex-center fixed-top app-selector" >
                <AppSelector  />
            </div>

            <div class="flex-center absolute-full" style="padding-top:65px;padding-left:15px;padding-right:15px;">
              <q-scroll-area class="fit" :horizontal-thumb-style="{ opacity: '0' }">
                <EventTree />
              </q-scroll-area>
            </div>

            <div class="flex-center fixed-bottom bg-grey-3 q-pa-md row ">
              <q-btn color="secondary" glossy label="デプロイ"  @click="onDeploy" icon="sync"/>
              <q-space></q-space>
              <q-btn color="primary" label="保存" @click="onSaveFlow" icon="save" />
            </div>
        </q-drawer>
      </div>
      <div class="q-pa-md q-gutter-sm">
        <div class="flowchart" v-if="store.currentFlow">
          <node-item v-for="(node,) in store.currentFlow.actionNodes" :key="node.id"
          :isSelected="node===state.activeNode" :actionNode="node"
          @addNode="addNode"
          @nodeSelected="onNodeSelected"
          @nodeEdit="onNodeEdit"
          @deleteNode="onDeleteNode"
          @deleteAllNextNodes="onDeleteAllNextNodes"
          ></node-item>
        </div>
      </div>
      <PropertyPanel :actionNode="state.activeNode" v-model:drawerRight="drawerRight"></PropertyPanel>
    </q-layout>
  <ShowDialog v-model:visible="showAddAction" name="アクション" @close="closeDg" width="350px">
      <action-select ref="appDg" name="model" type="single"></action-select>
  </ShowDialog>

  </q-page>

</template>

<script setup lang="ts">
import {ref,reactive,computed,onMounted} from 'vue';
import {IActionNode, ActionNode, IActionFlow, ActionFlow,RootAction, IActionProperty } from 'src/types/ActionTypes';
import { storeToRefs } from 'pinia';
import { useFlowEditorStore } from 'stores/flowEditor';
import NodeItem from 'src/components/main/NodeItem.vue';
import ShowDialog from 'components/ShowDialog.vue';
import ActionSelect from 'components/ActionSelect.vue';
import PropertyPanel from 'components/right/PropertyPanel.vue';
import AppSelector from 'components/left/AppSelector.vue';
import EventTree from 'components/left/EventTree.vue';
import {FlowCtrl } from '../control/flowctrl';
import { useQuasar } from 'quasar';
const drawerLeft = ref(false);
const $q=useQuasar();
const store = useFlowEditorStore();
// ref関数を使ってtemplateとバインド
const state=reactive({
  activeNode:{
    id:""
  },
})
const appDg = ref();
const prevNodeIfo=ref({
  prevNode:{} as IActionNode,
  inputPoint:""
});
// const refFlow = ref<ActionFlow|null>(null);
const showAddAction=ref(false);
const drawerRight=ref(false);
const model=ref("");
const addActionNode=(action:IActionNode)=>{
  // refFlow.value?.actionNodes.push(action);
 store.currentFlow?.actionNodes.push(action);
}

const addNode=(node:IActionNode,inputPoint:string)=>{
  showAddAction.value=true;
  prevNodeIfo.value.prevNode=node;
  prevNodeIfo.value.inputPoint=inputPoint;
}

const onNodeSelected=(node:IActionNode)=>{
  //右パネルが開いている場合、自動閉じる
  if(drawerRight.value && state.activeNode.id!==node.id){
    drawerRight.value=false;
  }
  state.activeNode = node;
}

const onNodeEdit=(node:IActionNode)=>{
  state.activeNode = node;
  drawerRight.value=true;
}

const onDeleteNode=(node:IActionNode)=>{
  if(!store.currentFlow) return;
  store.currentFlow?.removeNode(node);
}

const onDeleteAllNextNodes=(node:IActionNode)=>{
  if(!store.currentFlow) return;
  store.currentFlow?.removeAllNext(node.id);
}
const closeDg=(val :any)=>{
  console.log("Dialog closed->",val);
  if (val == 'OK') {
      const data  = appDg.value.selected[0];
      const actionProps=JSON.parse(data.content);
      const action = new ActionNode(data.name,data.desc,"",[],actionProps);
      store.currentFlow?.addNode(action, prevNodeIfo.value.prevNode,prevNodeIfo.value.inputPoint);
  }
}
/**
 * デプロイ
 */
const onDeploy= async ()=>{
  if(store.appInfo===undefined || store.flows?.length===0){
    $q.notify({
      type: 'negative',
      caption:"エラー",
      message: `設定されたフローがありません。`
    });
    return;
  }
  try{
    await store.deploy();
    $q.notify({
      type: 'positive',
      caption:"通知",
      message: `デプロイを成功しました。`
    });
  }catch(error){
    $q.notify({
      type: 'negative',
      caption:"エラー",
      message: `デプロイが失敗しました。`
    })
  }
  return;
}

const onSaveFlow = async ()=>{
  const targetFlow = store.selectedFlow;
  if(targetFlow===undefined){
    $q.notify({
      type: 'negative',
      caption:"エラー",
      message: `編集中のフローがありません。`
    });
    return;
  }
  try{
    await store.saveFlow(targetFlow);
    $q.notify({
      type: 'positive',
      caption:"通知",
      message: `${targetFlow.getRoot()?.subTitle}のフロー設定を保存しました。`
    });
  }catch(error){
    $q.notify({
      type: 'negative',
      caption:"エラー",
      message: `${targetFlow.getRoot()?.subTitle}のフローの設定の保存が失敗しました。`
    })
  }

}

const fetchData = async ()=>{
  drawerLeft.value=true;
  if(store.appInfo===undefined) return;
  const flowCtrl = new FlowCtrl();
  const actionFlows = await flowCtrl.getFlows(store.appInfo?.appId);
  if(actionFlows && actionFlows.length>0){
    store.setFlows(actionFlows);
  }
  if(actionFlows && actionFlows.length==1){
    store.selectFlow(actionFlows[0]);
  }
  const root =actionFlows[0].getRoot();
  if(root){
    state.activeNode=root;
  }
}

onMounted(() => {
  fetchData();
});
</script>

<style lang="scss">
  .app-selector{
    padding:15px;
    z-index: 999;
  }

  .flowchart{
    padding-top: 10px;
  }
  .flow-toolbar{
  opacity: 50%;
  }

  .event-tree .q-drawer {
    top:50px;
    z-index: 999;
  }
</style>