FlowChart のレイアウト修正

frontend/src/pages/FlowChart.vue

@@ -1,47 +1,55 @@
 <template>
   <q-page>
-    <div class="q-pa-sm q-gutter-sm event-tree ">
-      <q-drawer
-      side="left"
-      overlay
-      bordered
-      v-model="drawerLeft"
-      :show-if-above="false"
-      elevated
-      >
-        <div class="" style="padding:10px">
-          <div class="flex-center " >
-              <AppSelector  />
-          </div>
-          <div class="flex-center">
-              <EventTree />
-          </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>
-        </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>
+    <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>
-  </q-page>
-  <PropertyPanel :actionNode="state.activeNode" v-model:drawerRight="drawerRight"></PropertyPanel>
+      <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">
       <action-select ref="appDg" name="model" type="single"></action-select>
   </ShowDialog>
 
+  </q-page>
+
 </template>
 
 <script setup lang="ts">
@@ -57,7 +65,7 @@ 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(true);
+const drawerLeft = ref(false);
 const $q=useQuasar();
 const store = useFlowEditorStore();
 // ref関数を使ってtemplateとバインド
@@ -174,8 +182,9 @@ const onSaveFlow = async ()=>{
 }
 
 const fetchData = async ()=>{
-  const flowCtrl = new FlowCtrl();
+  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);
@@ -195,16 +204,18 @@ onMounted(() => {
 </script>
 
 <style lang="scss">
+  .app-selector{
+    padding:15px;
+    z-index: 999;
+  }
+
   .flowchart{
     padding-top: 10px;
   }
   .flow-toolbar{
   opacity: 50%;
   }
-  .flow-container{
-    height: 91.5dvb;
-    overflow: hidden;
-  }
+
   .event-tree .q-drawer {
     top:50px;
     z-index: 999;