Fix/show hide grid panels (#4323)

* checkpoint * the column widths also respect panel visibility
concrete-utopia · Oct 5, 2023 · bc9af51 · bc9af51
1 parent 7fb5397
commit bc9af51
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 34 deletions.
diff --git a/editor/src/components/canvas/grid-panel.tsx b/editor/src/components/canvas/grid-panel.tsx
@@ -19,8 +19,16 @@ interface GridPanelProps {
 }
 
 export const GridPanel = React.memo<GridPanelProps>((props) => {
+  if (props.pane == null) {
+    return null
+  }
+  return <GridPanelInner {...props} />
+})
+GridPanel.displayName = 'GridPanel'
+
+const GridPanelInner = React.memo<GridPanelProps>((props) => {
   const { onDrop, canDrop } = props
-  const { panel, index, span, order } = props.pane
+  const { panel, index, span, order, visible } = props.pane
 
   const { isDragActive, draggedPanel } = useGridPanelDragInfo()
 
@@ -85,7 +93,7 @@ export const GridPanel = React.memo<GridPanelProps>((props) => {
         gridColumn: `col ${index > -1 ? index + 1 : index}`,
         gridRow: `span ${span}`,
         order: order,
-        display: 'flex',
+        display: visible ? 'flex' : 'none',
         flexDirection: 'column',
         contain: 'layout',
         paddingLeft: GridPanelHorizontalGapHalf,
@@ -143,3 +151,4 @@ export const GridPanel = React.memo<GridPanelProps>((props) => {
     </div>
   )
 })
+GridPanelInner.displayName = 'GridPanelInner'
diff --git a/editor/src/components/canvas/grid-panels-container.tsx b/editor/src/components/canvas/grid-panels-container.tsx
@@ -18,21 +18,20 @@ import {
   GridVerticalExtraPadding,
   NumberOfColumns,
   normalizeColIndex,
-  storedLayoutToResolvedPanels,
   updateLayout,
   useColumnWidths,
+  useGridPanelState,
+  useResolvedGridPanels,
   wrapAroundColIndex,
 } from './grid-panels-state'
 import { CanvasFloatingToolbars } from './canvas-floating-toolbars'
 import { usePropControlledStateV2 } from '../inspector/common/inspector-utils'
 import { useAtom } from 'jotai'
 
 export const GridPanelsContainer = React.memo(() => {
-  const [panelState, setPanelState] = useAtom(GridPanelsStateAtom)
+  const [panelState, setPanelState] = useGridPanelState()
 
-  const orderedPanels = React.useMemo(() => {
-    return storedLayoutToResolvedPanels(panelState)
-  }, [panelState])
+  const orderedPanels = useResolvedGridPanels()
 
   const nonEmptyColumns = React.useMemo(() => {
     return Array.from(

diff --git a/editor/src/components/canvas/grid-panels-state.tsx b/editor/src/components/canvas/grid-panels-state.tsx
@@ -13,6 +13,7 @@ import { useKeepShallowReferenceEquality } from '../../utils/react-performance'
 import { atom, useAtom, useAtomValue, useSetAtom, useStore } from 'jotai'
 import immutableUpdate from 'immutability-helper'
 import { deepFreeze } from '../../utils/deep-freeze'
+import { Substores, useEditorState } from '../editor/store/store-hook'
 
 export const GridMenuWidth = 268
 export const GridMenuMinWidth = 200
@@ -49,6 +50,7 @@ export interface GridPanelData {
   span: number
   index: number
   order: number
+  visible: boolean
 }
 
 export type PanelName = Menu | Pane
@@ -114,24 +116,67 @@ export const GridMenuDefaultPanels: StoredLayout = [
 
 export const GridPanelsStateAtom = atom(GridMenuDefaultPanels)
 
-export function storedLayoutToResolvedPanels(stored: StoredLayout): {
-  [index in PanelName]: GridPanelData
-} {
-  const panels = accumulate<{ [index in PanelName]: GridPanelData }>({} as any, (acc) => {
-    stored.forEach((column, colIndex) => {
-      const panelsForColumn = column.panels.length
-      column.panels.forEach((panel, panelIndex) => {
-        acc[panel.name] = {
-          panel: panel,
-          span: GridPanelsNumberOfRows / panelsForColumn, // TODO introduce resize function
-          index: colIndex,
-          order: panelIndex,
-        }
+export function useGridPanelState() {
+  return useAtom(GridPanelsStateAtom)
+}
+
+function useVisibleGridPanels() {
+  const [panelState] = useGridPanelState()
+
+  const { codeEditorVisible, navigatorVisible, inspectorVisible } = useEditorState(
+    Substores.restOfEditor,
+    (store) => {
+      return {
+        codeEditorVisible: store.editor.interfaceDesigner.codePaneVisible,
+        navigatorVisible: store.editor.leftMenu.expanded,
+        inspectorVisible: store.editor.rightMenu.expanded,
+      }
+    },
+    'storedLayoutToResolvedPanels panel visibility',
+  )
+
+  const visiblePanels: StoredLayout = panelState.map((column) => ({
+    ...column,
+    panels: column.panels.filter((panel) => {
+      switch (panel.name) {
+        case 'code-editor':
+          return codeEditorVisible
+        case 'navigator':
+          return navigatorVisible
+        case 'inspector':
+          return inspectorVisible
+        default:
+          assertNever(panel.name)
+      }
+      throw new Error('never should run')
+    }),
+  }))
+
+  return visiblePanels
+}
+
+export function useResolvedGridPanels() {
+  const [panelState] = useGridPanelState()
+  const visiblePanels = useVisibleGridPanels()
+
+  return React.useMemo(() => {
+    const panels = accumulate<{ [index in PanelName]: GridPanelData }>({} as any, (acc) => {
+      panelState.forEach((column, colIndex) => {
+        const visiblePanelsForColumn = visiblePanels[colIndex].panels
+        column.panels.forEach((panel, panelIndex) => {
+          acc[panel.name] = {
+            panel: panel,
+            span: GridPanelsNumberOfRows / visiblePanelsForColumn.length, // TODO introduce resize function
+            index: colIndex,
+            order: panelIndex,
+            visible: visiblePanelsForColumn.findIndex((p) => p.name === panel.name) > -1,
+          }
+        })
       })
     })
-  })
 
-  return panels
+    return panels
+  }, [panelState, visiblePanels])
 }
 
 /**
@@ -324,14 +369,15 @@ export function useColumnWidths(): [
   (columnIndex: number, newWidth: number) => void,
 ] {
   const [panelState, setPanelState] = useAtom(GridPanelsStateAtom)
+  const visiblePanels = useVisibleGridPanels()
 
   // start with the default value
   const columnWidths: Array<number> = React.useMemo(
     () =>
-      panelState.map((_, index) => {
-        return getColumnWidth(panelState, index)
+      visiblePanels.map((_, index) => {
+        return getColumnWidth(visiblePanels, index)
       }),
-    [panelState],
+    [visiblePanels],
   )
 
   const setColumnWidths = React.useCallback(

diff --git a/editor/src/components/editor/actions/actions.tsx b/editor/src/components/editor/actions/actions.tsx
@@ -2491,9 +2491,6 @@ export const UPDATE_FNS = {
   TOGGLE_PANE: (action: TogglePane, editor: EditorModel): EditorModel => {
     switch (action.target) {
       case 'leftmenu':
-        if (isFeatureEnabled('Draggable Floating Panels')) {
-          return editor
-        }
         return {
           ...editor,
           leftMenu: {
@@ -2502,9 +2499,6 @@ export const UPDATE_FNS = {
           },
         }
       case 'rightmenu':
-        if (isFeatureEnabled('Draggable Floating Panels')) {
-          return editor
-        }
         return {
           ...editor,
           rightMenu: {
@@ -2578,9 +2572,6 @@ export const UPDATE_FNS = {
         }
 
       case 'codeEditor':
-        if (isFeatureEnabled('Draggable Floating Panels')) {
-          return editor
-        }
         return updateCodeEditorVisibility(editor, !editor.interfaceDesigner.codePaneVisible)
       case 'canvas':
       case 'misccodeeditor':