DB連動実装

frontend/src/pages/FlowChart.vue

@@ -0,0 +1,165 @@
+<template>
+    <div class="q-pa-md q-gutter-sm event-tree">
+      <q-drawer
+      side="left"
+      overlay
+      bordered
+      v-model="drawerLeft"
+      :show-if-above="false"
+      elevated
+      >
+      <!-- <q-card class="column full-height" style="width: 300px">
+        <q-card-section> -->
+
+          <div class="flex-center fixd-top" >
+              <AppSelector  />
+            </div>
+
+          <!-- </q-card-section> -->
+        <q-separator />
+          <!-- <q-card-section> -->
+            <div class="flex-center">
+            <EventTree />
+            </div>
+          <!-- </q-card-section> -->
+        <!-- </q-card> -->
+      </q-drawer>
+    </div>
+
+  <q-page>
+    <div class="q-pa-md q-gutter-sm">
+    <!-- <q-layout
+      container
+      class="flow-container shadow-2 rounded-borders"
+    > -->
+
+    <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>
+    <!-- </q-layout> -->
+  </div>
+  </q-page>
+  <PropertyPanel :actionNode="state.activeNode" v-model:drawerRight="drawerRight"></PropertyPanel>
+  <show-dialog v-model:visible="showAddAction" name="アクション" @close="closeDg">
+      <action-select ref="appDg" name="アクション" type="single"></action-select>
+  </show-dialog>
+
+</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'
+const drawerLeft = ref(true);
+
+const store = useFlowEditorStore();
+// ref関数を使ってtemplateとバインド
+const state=reactive({
+  activeNode:{
+    id:""
+  },
+})
+const appDg = ref();
+const prevNodeIfo=ref({
+  prevNode:{},
+  inputPoint:""
+});
+const refFlow = ref<ActionFlow|null>(null);
+const showAddAction=ref(false);
+const drawerRight=ref(false);
+
+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 fetchData= async ()=>{
+  const flowCtrl = new FlowCtrl();
+  const actionFlows = await flowCtrl.getFlows("1");
+  if(actionFlows && actionFlows.length>0){
+    store.setFlows(actionFlows);
+  }
+  if(actionFlows && actionFlows.length==1){
+    store.selectFlow(actionFlows[0]);
+  }
+  refFlow.value=actionFlows[0];
+  const root =refFlow.value.getRoot();
+  if(root){
+    state.activeNode=root;
+  }
+}
+
+onMounted(() => {
+  fetchData();
+});
+</script>
+
+<style lang="scss">
+  .flowchart{
+    padding-top: 10px;
+  }
+  .flow-toolbar{
+  opacity: 50%;
+  }
+  .flow-container{
+    height: 91.5dvb;
+    overflow: hidden;
+  }
+  .event-tree .q-drawer {
+    top:50px;
+    z-index: 999;
+  }
+</style>