Hide absolute resize controls for grid cells (#6043)

**Problem:**

Absolute resize controls are shown when a grid cell is selected.

**Fix:**

Don't enable the absolute resize strategy when a grid cell is selected.

**Note**
With the upcoming cell resize feature we might want to add another case
to `isResizableStrategy`, for which I left a comment in
`canvas-strategies.tsx`

editor/src/components/canvas/canvas-strategies/canvas-strategies.tsx

@@ -521,6 +521,7 @@ export function isResizableStrategy(canvasStrategy: CanvasStrategy): boolean {
     case 'FLEX_RESIZE_BASIC':
     case 'FLEX_RESIZE':
     case 'BASIC_RESIZE':
+      // TODO add grid cell resize
       return true
     default:
       return false

editor/src/components/canvas/canvas-strategies/strategies/absolute-resize-bounding-box-strategy.tsx

@@ -88,6 +88,12 @@ export function absoluteResizeBoundingBoxStrategy(
     return null
   }
 
+  if (
+    retargetedTargets.some((path) => MetadataUtils.isGridCell(canvasState.startingMetadata, path))
+  ) {
+    return null
+  }
+
   return {
     id: 'ABSOLUTE_RESIZE_BOUNDING_BOX',
     name: 'Resize',

editor/src/components/canvas/canvas-strategies/strategies/basic-resize-strategy.tsx

@@ -66,20 +66,19 @@ export function basicResizeStrategy(
   if (selectedElements.length !== 1 || !honoursPropsSize(canvasState, selectedElements[0])) {
     return null
   }
+
+  const selectedElement = selectedElements[0]
+
   const metadata = MetadataUtils.findElementByElementPath(
     canvasState.startingMetadata,
-    selectedElements[0],
+    selectedElement,
   )
   const elementDimensionsProps = metadata != null ? getElementDimensions(metadata) : null
   const elementParentBounds = metadata?.specialSizeMeasurements.immediateParentBounds ?? null
 
-  const elementDimensions =
-    elementDimensionsProps == null
-      ? null
-      : {
-          width: elementDimensionsProps.width,
-          height: elementDimensionsProps.height,
-        }
+  if (MetadataUtils.isGridCell(canvasState.startingMetadata, selectedElement)) {
+    return null
+  }
 
   return {
     id: BASIC_RESIZE_STRATEGY_ID,
@@ -128,7 +127,6 @@ export function basicResizeStrategy(
         interactionSession.activeControl.type === 'RESIZE_HANDLE'
       ) {
         // no multiselection support yet
-        const selectedElement = selectedElements[0]
         const edgePosition = interactionSession.activeControl.edgePosition
         if (interactionSession.interactionData.drag != null) {
           const drag = interactionSession.interactionData.drag

editor/src/components/canvas/canvas-strategies/strategies/flex-resize-basic-strategy.tsx

@@ -89,6 +89,10 @@ export function flexResizeBasicStrategy(
     elementParentBounds != null &&
     (elementParentBounds.width !== 0 || elementParentBounds.height !== 0)
 
+  if (MetadataUtils.isGridCell(canvasState.startingMetadata, selectedElements[0])) {
+    return null
+  }
+
   return {
     id: 'FLEX_RESIZE_BASIC',
     name: 'Flex Resize (Basic)',

editor/src/components/canvas/canvas-strategies/strategies/flex-resize-strategy.tsx

@@ -109,6 +109,10 @@ export function flexResizeStrategy(
     elementParentBounds.width !== 0 &&
     elementParentBounds.height !== 0
 
+  if (MetadataUtils.isGridCell(canvasState.startingMetadata, selectedElements[0])) {
+    return null
+  }
+
   return {
     id: FLEX_RESIZE_STRATEGY_ID,
     name: 'Flex Resize',

editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-duplicate-strategy.ts

@@ -37,13 +37,7 @@ export const gridRearrangeMoveDuplicateStrategy: CanvasStrategyFactory = (
   }
 
   const selectedElement = selectedElements[0]
-  const ok = MetadataUtils.isGridLayoutedContainer(
-    MetadataUtils.findElementByElementPath(
-      canvasState.startingMetadata,
-      EP.parentPath(selectedElement),
-    ),
-  )
-  if (!ok) {
+  if (!MetadataUtils.isGridCell(canvasState.startingMetadata, selectedElement)) {
     return null
   }
 

editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.ts

@@ -30,13 +30,7 @@ export const gridRearrangeMoveStrategy: CanvasStrategyFactory = (
   }
 
   const selectedElement = selectedElements[0]
-  const ok = MetadataUtils.isGridLayoutedContainer(
-    MetadataUtils.findElementByElementPath(
-      canvasState.startingMetadata,
-      EP.parentPath(selectedElement),
-    ),
-  )
-  if (!ok) {
+  if (!MetadataUtils.isGridCell(canvasState.startingMetadata, selectedElement)) {
     return null
   }
 

editor/src/components/canvas/canvas-strategies/strategies/keyboard-absolute-resize-strategy.tsx

@@ -43,6 +43,7 @@ import * as EP from '../../../../core/shared/element-path'
 import type { ElementInstanceMetadataMap } from '../../../../core/shared/element-template'
 import type { AllElementProps } from '../../../editor/store/editor-state'
 import { getDescriptiveStrategyLabelWithRetargetedPaths } from '../canvas-strategies'
+import { MetadataUtils } from '../../../../core/model/element-metadata-utils'
 
 interface VectorAndEdge {
   movement: CanvasVector
@@ -132,6 +133,10 @@ export function keyboardAbsoluteResizeStrategy(
     return null
   }
 
+  if (MetadataUtils.isGridCell(canvasState.startingMetadata, selectedElements[0])) {
+    return null
+  }
+
   return {
     id: 'KEYBOARD_ABSOLUTE_RESIZE',
     name: 'Resize',

editor/src/components/canvas/canvas-strategies/strategies/rearrange-grid-swap-strategy.ts

@@ -47,13 +47,8 @@ export const rearrangeGridSwapStrategy: CanvasStrategyFactory = (
   }
 
   const selectedElement = selectedElements[0]
-  const ok = MetadataUtils.isGridLayoutedContainer(
-    MetadataUtils.findElementByElementPath(
-      canvasState.startingMetadata,
-      EP.parentPath(selectedElement),
-    ),
-  )
-  if (!ok) {
+
+  if (!MetadataUtils.isGridCell(canvasState.startingMetadata, selectedElement)) {
     return null
   }
 

editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.ts

@@ -1,9 +1,4 @@
-import {
-  filtered,
-  fromArrayIndex,
-  fromField,
-  notNull,
-} from '../../../../core/shared/optics/optic-creators'
+import { fromArrayIndex, fromField, notNull } from '../../../../core/shared/optics/optic-creators'
 import { MetadataUtils } from '../../../../core/model/element-metadata-utils'
 import * as EP from '../../../../core/shared/element-path'
 import * as PP from '../../../../core/shared/property-path'
@@ -18,9 +13,9 @@ import {
   strategyApplicationResult,
 } from '../canvas-strategy-types'
 import type { InteractionSession } from '../interaction-state'
-import type { CSSNumber, GridCSSNumber } from '../../../../components/inspector/common/css-utils'
+import type { GridCSSNumber } from '../../../../components/inspector/common/css-utils'
 import { printArrayCSSNumber } from '../../../../components/inspector/common/css-utils'
-import { any, anyBy, modify, toFirst } from '../../../../core/shared/optics/optic-utilities'
+import { anyBy, modify, toFirst } from '../../../../core/shared/optics/optic-utilities'
 import { setElementsToRerenderCommand } from '../../commands/set-elements-to-rerender-command'
 import { isRight } from '../../../../core/shared/either'
 import { roundToNearestWhole } from '../../../../core/shared/math-utils'
@@ -35,11 +30,8 @@ export const resizeGridStrategy: CanvasStrategyFactory = (
   }
 
   const selectedElement = selectedElements[0]
-  const parentPath = EP.parentPath(selectedElement)
-  const ok = MetadataUtils.isGridLayoutedContainer(
-    MetadataUtils.findElementByElementPath(canvasState.startingMetadata, parentPath),
-  )
-  if (!ok) {
+
+  if (!MetadataUtils.isGridCell(canvasState.startingMetadata, selectedElement)) {
     return null
   }
 
@@ -73,6 +65,7 @@ export const resizeGridStrategy: CanvasStrategyFactory = (
       const control = interactionSession.activeControl
       const drag = interactionSession.interactionData.drag
       const dragAmount = control.axis === 'column' ? drag.x : drag.y
+      const parentPath = EP.parentPath(selectedElement)
       const parentSpecialSizeMeasurements =
         canvasState.startingMetadata[EP.toString(parentPath)].specialSizeMeasurements
       const originalValues =

editor/src/components/canvas/controls/select-mode/select-mode-hooks.tsx

@@ -662,12 +662,10 @@ function useSelectOrLiveModeSelectAndHover(
           event.type !== 'mouseup' &&
           foundTarget != null &&
           draggingAllowed &&
-          !MetadataUtils.isGridLayoutedContainer(
-            // grid has its own drag handling
-            MetadataUtils.findElementByElementPath(
-              editorStoreRef.current.editor.jsxMetadata,
-              EP.parentPath(foundTarget.elementPath),
-            ),
+          // grid has its own drag handling
+          !MetadataUtils.isGridCell(
+            editorStoreRef.current.editor.jsxMetadata,
+            foundTarget.elementPath,
           )
         ) {
           const start = windowToCanvasCoordinates(

editor/src/core/model/element-metadata-utils.ts

@@ -371,6 +371,10 @@ export const MetadataUtils = {
   isGridLayoutedContainer(instance: ElementInstanceMetadata | null): boolean {
     return instance?.specialSizeMeasurements.layoutSystemForChildren === 'grid'
   },
+  isGridCell(metadata: ElementInstanceMetadataMap, path: ElementPath): boolean {
+    const parent = MetadataUtils.findElementByElementPath(metadata, EP.parentPath(path))
+    return MetadataUtils.isGridLayoutedContainer(parent)
+  },
   isPositionAbsolute(instance: ElementInstanceMetadata | null): boolean {
     return instance?.specialSizeMeasurements.position === 'absolute'
   },