変数設定を追加

frontend/src/pages/FlowChart.vue

@@ -22,12 +22,12 @@
       </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"
+          <node-item v-for="(node,) in store.currentFlow.actionNodes" :key="node.id" :isSelected="node === store.activeNode"
             :actionNode="node" @addNode="addNode" @nodeSelected="onNodeSelected" @nodeEdit="onNodeEdit"
             @deleteNode="onDeleteNode" @deleteAllNextNodes="onDeleteAllNextNodes" @copyFlow="onCopyFlow"></node-item>
         </div>
       </div>
-      <PropertyPanel :actionNode="state.activeNode" v-model:drawerRight="drawerRight"></PropertyPanel>
+      <PropertyPanel :actionNode="store.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>
@@ -57,12 +57,7 @@ const drawerLeft = ref(false);
 const $q = useQuasar();
 const store = useFlowEditorStore();
 const authStore = useAuthStore();
-// ref関数を使ってtemplateとバインド
-const state = reactive({
-  activeNode: {
-    id: ""
-  },
-})
+
 const appDg = ref();
 const prevNodeIfo = ref({
   prevNode: {} as IActionNode,
@@ -88,21 +83,21 @@ const addNode = (node: IActionNode, inputPoint: string) => {
 
 const onNodeSelected = (node: IActionNode) => {
   //右パネルが開いている場合、自動閉じる
-  if (drawerRight.value && state.activeNode.id !== node.id) {
+  if (drawerRight.value && store.activeNode?.id !== node.id) {
     drawerRight.value = false;
   }
-  state.activeNode = node;
+  store.setActiveNode(node);
 }
 
 const onNodeEdit = (node: IActionNode) => {
-  state.activeNode = node;
+  store.setActiveNode(node);
   drawerRight.value = true;
 }
 
 const onDeleteNode = (node: IActionNode) => {
   if (!store.currentFlow) return;
   //右パネルが開いている場合、自動閉じる
-  if (drawerRight.value && state.activeNode.id === node.id) {
+  if (drawerRight.value && store.activeNode?.id === node.id) {
     drawerRight.value = false;
   }
   store.currentFlow?.removeNode(node);
@@ -219,7 +214,7 @@ const fetchData = async () => {
   }
   const root = actionFlows[0].getRoot();
   if (root) {
-    state.activeNode = root;
+    store.setActiveNode(root);
   }
 }