Merge pull request #754 from PaulHax/maximize

Maximize view on double click

Author: floryst

src/components/LayoutGrid.vue

@@ -6,7 +6,7 @@
   >
     <div v-for="(item, i) in items" :key="i" class="d-flex flex-equal">
       <layout-grid v-if="item.type === 'layout'" :layout="(item as Layout)" />
-      <div v-else class="layout-item">
+      <div v-else class="layout-item" @dblclick="maximize(item.id!)">
         <component
           :is="item.component"
           :key="item.id"
@@ -26,6 +26,8 @@ import { storeToRefs } from 'pinia';
 import { ViewTypeToComponent } from '@/src/core/viewTypes';
 import { Layout, LayoutDirection } from '../types/layout';
 import { useViewStore } from '../store/views';
+import { useToolStore } from '../store/tools';
+import { ALLOW_MAXIMIZE_TOOLS } from '../config';
 
 export default defineComponent({
   name: 'LayoutGrid',
@@ -35,6 +37,12 @@ export default defineComponent({
         useViewStore().setActiveViewID(id);
       }
     },
+    maximize(viewId: string) {
+      const currentTool = useToolStore().currentTool;
+      if (ALLOW_MAXIMIZE_TOOLS.includes(currentTool)) {
+        useViewStore().toggleMaximizeView(viewId);
+      }
+    },
   },
   props: {
     layout: {

src/config.ts

@@ -8,6 +8,7 @@ import { Layout, LayoutDirection } from './types/layout';
 import { ViewSpec } from './types/views';
 import { SampleDataset } from './types';
 import { Action } from './constants';
+import { Tools } from './store/tools/types';
 
 /**
  * These are the initial view IDs.
@@ -289,6 +290,14 @@ export const ACTION_TO_KEY = {
   showKeyboardShortcuts: '?',
 } satisfies Record<Action, string>;
 
+export const ALLOW_MAXIMIZE_TOOLS = [
+  Tools.WindowLevel,
+  Tools.Pan,
+  Tools.Zoom,
+  Tools.Select,
+  Tools.Crosshairs,
+];
+
 export const DEFAULT_SEGMENT_MASKS: SegmentMask[] = [
   {
     value: 1,

src/store/views.ts

@@ -9,10 +9,22 @@ import {
   View,
 } from '../io/state-file/schema';
 
+function cloneLayout(layout: Layout): Layout {
+  return {
+    direction: layout.direction,
+    items: layout.items.map((item) =>
+      typeof item === 'string' ? item : cloneLayout(item)
+    ),
+    ...(layout.name && { name: layout.name }),
+  };
+}
+
 interface State {
   layout: Layout;
   viewSpecs: Record<string, ViewSpec>;
   activeViewID: string;
+  maximizedViewID: string | null;
+  originalLayout: Layout | null;
 }
 
 export const useViewStore = defineStore('view', {
@@ -23,6 +35,8 @@ export const useViewStore = defineStore('view', {
     },
     viewSpecs: structuredClone(InitViewSpecs),
     activeViewID: '',
+    maximizedViewID: null,
+    originalLayout: null,
   }),
   getters: {
     viewIDs(state) {
@@ -44,6 +58,7 @@ export const useViewStore = defineStore('view', {
       }
     },
     setLayout(layout: Layout) {
+      this.restoreLayout();
       this.layout = layout;
 
       const layoutsToProcess = [layout];
@@ -59,6 +74,33 @@ export const useViewStore = defineStore('view', {
         });
       }
     },
+    maximizeView(viewID: string) {
+      if (this.maximizedViewID) {
+        this.restoreLayout();
+      }
+
+      this.originalLayout = cloneLayout(this.layout);
+      this.maximizedViewID = viewID;
+
+      this.layout = {
+        direction: LayoutDirection.H,
+        items: [viewID],
+      };
+    },
+    restoreLayout() {
+      if (this.originalLayout) {
+        this.layout = this.originalLayout;
+        this.originalLayout = null;
+        this.maximizedViewID = null;
+      }
+    },
+    toggleMaximizeView(viewID: string) {
+      if (this.maximizedViewID === viewID) {
+        this.restoreLayout();
+      } else {
+        this.maximizeView(viewID);
+      }
+    },
     serialize(stateFile: StateFile) {
       const viewConfigStore = useViewConfigStore();
       const { manifest } = stateFile;