フローエディタの左パネル表示・非表示機能追加

frontend/src/pages/FlowChart.vue

@@ -20,8 +20,12 @@
           </div>
         </q-drawer>
       </div>
-      <div class="q-pa-md q-gutter-sm">
-        <div class="flowchart" v-if="store.currentFlow" style="padding-left: 300px;">
+      <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>
@@ -73,7 +77,15 @@ const addActionNode = (action: IActionNode) => {
 }
 const rootNode = computed(()=>{
   return store.currentFlow?.getRoot();
-})
+});
+const minPanelWidth=computed(()=>{
+  const root = store.currentFlow?.getRoot();
+  if(store.currentFlow && root){
+    return store.currentFlow?.getColumns(root) * 300 + 'px';
+  }else{
+    return "300px";
+  }
+});
 
 const addNode = (node: IActionNode, inputPoint: string) => {
   if (drawerRight.value) {
@@ -245,4 +257,10 @@ onMounted(() => {
   top: 50px;
   z-index: 999;
 }
+.expand{
+  position: fixed;
+  left: 0px;
+  top: 50%;
+  z-index: 9999;
+}
 </style>