Show invisible grid controls on all grids during interactions

concrete-utopia · Oct 10, 2024 · d1f7ae8 · d1f7ae8
1 parent 647fb23
commit d1f7ae8
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 29 deletions.
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts
@@ -45,6 +45,7 @@ import {
 import { mapDropNulls } from '../../../../core/shared/array-utils'
 import { assertNever } from '../../../../core/shared/utils'
 import { showGridControls } from '../../commands/show-grid-controls-command'
+import { memoize } from '../../../../core/shared/memoize'
 
 export function runGridRearrangeMove(
   targetElement: ElementPath,
@@ -813,3 +814,11 @@ function getOriginalElementGridConfiguration(
     mouseCellPosInOriginalElement,
   }
 }
+
+export const getAllGrids = memoize(getAllGridsInner, { maxSize: 1 })
+
+function getAllGridsInner(jsxMetadata: ElementInstanceMetadataMap): Array<ElementPath> {
+  return Object.keys(jsxMetadata)
+    .filter((key) => MetadataUtils.isGridLayoutedContainer(jsxMetadata[key]))
+    .map(EP.fromString)
+}
diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx
@@ -40,7 +40,6 @@ import {
   pointsEqual,
   scaleRect,
   windowPoint,
-  zeroRectangle,
   zeroRectIfNullOrInfinity,
 } from '../../../core/shared/math-utils'
 import {
@@ -89,7 +88,6 @@ import { windowToCanvasCoordinates } from '../dom-lookup'
 import type { Axis } from '../gap-utils'
 import { useCanvasAnimation } from '../ui-jsx-canvas-renderer/animation-context'
 import { CanvasOffsetWrapper } from './canvas-offset-wrapper'
-import { CanvasLabel } from './select-mode/controls-common'
 import { useMaybeHighlightElement } from './select-mode/select-mode-hooks'
 import type { GridCellCoordinates } from '../canvas-strategies/strategies/grid-cell-bounds'
 import { gridCellTargetId } from '../canvas-strategies/strategies/grid-cell-bounds'
@@ -662,9 +660,10 @@ export const GridControlsKey = (gridPath: ElementPath) => `grid-controls-${EP.to
 
 export interface GridControlProps {
   grid: GridData
+  visible: 'visible' | 'hidden'
 }
 
-export const GridControl = React.memo<GridControlProps>(({ grid }) => {
+export const GridControl = React.memo<GridControlProps>(({ grid, visible }) => {
   const dispatch = useDispatch()
   const controls = useAnimationControls()
   const colorTheme = useColorTheme()
@@ -916,6 +915,7 @@ export const GridControl = React.memo<GridControlProps>(({ grid }) => {
       grid.padding == null
         ? 0
         : `${grid.padding.top}px ${grid.padding.right}px ${grid.padding.bottom}px ${grid.padding.left}px`,
+    opacity: visible === 'visible' ? 1 : 0,
   }
 
   // Gap needs to be set only if the other two are not present or we'll have rendering issues
@@ -1126,38 +1126,47 @@ GridControl.displayName = 'GridControl'
 
 export interface GridControlsProps {
   targets: ElementPath[]
+  visible: 'visible' | 'hidden'
 }
 
-export const GridControls = controlForStrategyMemoized<GridControlsProps>(({ targets }) => {
-  const targetRootCell = useEditorState(
-    Substores.canvas,
-    (store) => store.editor.canvas.controls.gridControlData?.rootCell ?? null,
-    'GridControls targetRootCell',
-  )
+export const GridControls = controlForStrategyMemoized<GridControlsProps>(
+  ({ targets, visible }) => {
+    const targetRootCell = useEditorState(
+      Substores.canvas,
+      (store) => store.editor.canvas.controls.gridControlData?.rootCell ?? null,
+      'GridControls targetRootCell',
+    )
 
-  const hoveredGrids = useEditorState(
-    Substores.canvas,
-    (store) => stripNulls([store.editor.canvas.controls.gridControlData?.grid]),
-    'GridControls hoveredGrids',
-  )
+    const hoveredGrids = useEditorState(
+      Substores.canvas,
+      (store) => stripNulls([store.editor.canvas.controls.gridControlData?.grid]),
+      'GridControls hoveredGrids',
+    )
 
-  const grids = useGridData(uniqBy([...targets, ...hoveredGrids], (a, b) => EP.pathsEqual(a, b)))
+    const grids = useGridData(uniqBy([...targets, ...hoveredGrids], (a, b) => EP.pathsEqual(a, b)))
 
-  if (grids.length === 0) {
-    return null
-  }
+    if (grids.length === 0) {
+      return null
+    }
 
-  return (
-    <div id={'grid-controls'}>
-      <CanvasOffsetWrapper>
-        {grids.map((grid) => {
-          return <GridControl key={`grid-control-${EP.toString(grid.elementPath)}`} grid={grid} />
-        })}
-        <AbsoluteDistanceIndicators targetRootCell={targetRootCell} />
-      </CanvasOffsetWrapper>
-    </div>
-  )
-})
+    return (
+      <div id={'grid-controls'}>
+        <CanvasOffsetWrapper>
+          {grids.map((grid) => {
+            return (
+              <GridControl
+                key={`grid-control-${EP.toString(grid.elementPath)}`}
+                grid={grid}
+                visible={visible ?? 'visible'}
+              />
+            )
+          })}
+          <AbsoluteDistanceIndicators targetRootCell={targetRootCell} />
+        </CanvasOffsetWrapper>
+      </div>
+    )
+  },
+)
 
 const MIN_INDICATORS_DISTANCE = 32 // px
 

diff --git a/editor/src/components/canvas/controls/new-canvas-controls.tsx b/editor/src/components/canvas/controls/new-canvas-controls.tsx
@@ -74,6 +74,8 @@ import { NO_OP } from '../../../core/shared/utils'
 import { useIsMyProject } from '../../editor/store/collaborative-editing'
 import { MultiplayerWrapper } from '../../../utils/multiplayer-wrapper'
 import { MultiplayerPresence } from '../multiplayer-presence'
+import { GridControls } from './grid-controls'
+import { getAllGrids } from '../canvas-strategies/strategies/grid-helpers'
 
 export const CanvasControlsContainerID = 'new-canvas-controls-container'
 
@@ -313,6 +315,7 @@ const NewCanvasControlsInner = (props: NewCanvasControlsInnerProps) => {
     autoFocusedPaths,
     filePathMappings,
     propertyControlsInfo,
+    grids,
   } = useEditorState(
     Substores.fullStore,
     (store) => {
@@ -333,6 +336,7 @@ const NewCanvasControlsInner = (props: NewCanvasControlsInnerProps) => {
         autoFocusedPaths: store.derived.autoFocusedPaths,
         filePathMappings: store.derived.filePathMappings,
         propertyControlsInfo: store.editor.propertyControlsInfo,
+        grids: isDragInteractionActive(store.editor) ? getAllGrids(store.editor.jsxMetadata) : [],
       }
     },
     'NewCanvasControlsInner',
@@ -596,6 +600,14 @@ const NewCanvasControlsInner = (props: NewCanvasControlsInnerProps) => {
                   isSelectOrInsertMode(editorMode) &&
                     !EP.multiplePathsAllWithTheSameUID(localSelectedViews),
                   <>
+                    {when(
+                      dragInteractionActive,
+                      <RenderControlMemoized
+                        key={'grids'}
+                        control={GridControls.control as React.FC<{}>}
+                        propsForControl={{ targets: grids, visible: 'hidden' }}
+                      />,
+                    )}
                     {strategyControls.map((c) => (
                       <RenderControlMemoized
                         key={c.key}