Resize a Grid Element (#6038)

## Description

This PR adds a strategy and the canvas controls to resize grid elements.




https://github.com/concrete-utopia/utopia/assets/16385508/b048879c-6210-4a30-abbd-4bc310ce7a63



**Manual Tests:**
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Preview mode

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

@@ -66,6 +66,7 @@ import { MetadataUtils } from '../../../core/model/element-metadata-utils'
 import { gridRearrangeMoveStrategy } from './strategies/grid-rearrange-move-strategy'
 import { resizeGridStrategy } from './strategies/resize-grid-strategy'
 import { rearrangeGridSwapStrategy } from './strategies/rearrange-grid-swap-strategy'
+import { gridResizeElementStrategy } from './strategies/grid-resize-element-strategy'
 import { gridRearrangeMoveDuplicateStrategy } from './strategies/grid-rearrange-move-duplicate-strategy'
 
 export type CanvasStrategyFactory = (
@@ -115,6 +116,7 @@ const resizeStrategies: MetaCanvasStrategy = (
       flexResizeStrategy,
       basicResizeStrategy,
       resizeGridStrategy,
+      gridResizeElementStrategy,
     ],
   )
 }
@@ -521,7 +523,7 @@ export function isResizableStrategy(canvasStrategy: CanvasStrategy): boolean {
     case 'FLEX_RESIZE_BASIC':
     case 'FLEX_RESIZE':
     case 'BASIC_RESIZE':
-      // TODO add grid cell resize
+    case 'GRID-CELL-RESIZE-STRATEGY':
       return true
     default:
       return false

editor/src/components/canvas/canvas-strategies/interaction-state.ts

@@ -628,6 +628,23 @@ export function gridCellHandle(params: { id: string }): GridCellHandle {
   }
 }
 
+export const GridResizeEdges = ['row-start', 'row-end', 'column-start', 'column-end'] as const
+export type GridResizeEdge = (typeof GridResizeEdges)[number]
+
+export interface GridResizeHandle {
+  type: 'GRID_RESIZE_HANDLE'
+  id: string
+  edge: GridResizeEdge
+}
+
+export function gridResizeHandle(id: string, edge: GridResizeEdge): GridResizeHandle {
+  return {
+    type: 'GRID_RESIZE_HANDLE',
+    id: id,
+    edge: edge,
+  }
+}
+
 export type CanvasControlType =
   | BoundingArea
   | ResizeHandle
@@ -638,6 +655,7 @@ export type CanvasControlType =
   | BorderRadiusResizeHandle
   | GridCellHandle
   | GridAxisHandle
+  | GridResizeHandle
 
 export function isDragToPan(
   interaction: InteractionSession | null,

editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts

@@ -4,6 +4,7 @@ import type {
   ElementInstanceMetadata,
   ElementInstanceMetadataMap,
   GridElementProperties,
+  GridPosition,
 } from '../../../../core/shared/element-template'
 import type { CanvasVector } from '../../../../core/shared/math-utils'
 import {
@@ -13,15 +14,18 @@ import {
   windowRectangle,
   type WindowPoint,
 } from '../../../../core/shared/math-utils'
-import { create } from '../../../../core/shared/property-path'
+import * as PP from '../../../../core/shared/property-path'
 import type { CanvasCommand } from '../../commands/commands'
 import { setProperty } from '../../commands/set-property-command'
 import { canvasPointToWindowPoint } from '../../dom-lookup'
 import type { DragInteractionData } from '../interaction-state'
+import { stripNulls } from '../../../../core/shared/array-utils'
+import { optionalMap } from '../../../../core/shared/optional-utils'
 import type { GridCustomStrategyState } from '../canvas-strategy-types'
 import type { GridCellCoordinates } from '../../controls/grid-controls'
 import { gridCellCoordinates } from '../../controls/grid-controls'
 import * as EP from '../../../../core/shared/element-path'
+import { deleteProperties } from '../../commands/delete-properties-command'
 
 export function getGridCellUnderMouse(mousePoint: WindowPoint, canvasScale: number) {
   return getGridCellAtPoint(mousePoint, canvasScale, false)
@@ -173,10 +177,10 @@ export function runGridRearrangeMove(
 
   return {
     commands: [
-      setProperty('always', targetElement, create('style', 'gridColumnStart'), column.start),
-      setProperty('always', targetElement, create('style', 'gridColumnEnd'), column.end),
-      setProperty('always', targetElement, create('style', 'gridRowStart'), row.start),
-      setProperty('always', targetElement, create('style', 'gridRowEnd'), row.end),
+      setProperty('always', targetElement, PP.create('style', 'gridColumnStart'), column.start),
+      setProperty('always', targetElement, PP.create('style', 'gridColumnEnd'), column.end),
+      setProperty('always', targetElement, PP.create('style', 'gridRowStart'), row.start),
+      setProperty('always', targetElement, PP.create('style', 'gridRowEnd'), row.end),
     ],
     targetCell: newTargetCell,
     originalRootCell: rootCell,
@@ -185,6 +189,45 @@ export function runGridRearrangeMove(
   }
 }
 
+export function gridPositionToValue(p: GridPosition | null | undefined): string | number | null {
+  if (p == null) {
+    return null
+  }
+  if (p === 'auto') {
+    return 'auto'
+  }
+
+  return p.numericalPosition
+}
+
+export function setGridPropsCommands(
+  elementPath: ElementPath,
+  gridProps: Partial<GridElementProperties>,
+): CanvasCommand[] {
+  return stripNulls([
+    deleteProperties('always', elementPath, [
+      PP.create('style', 'gridColumn'),
+      PP.create('style', 'gridRow'),
+    ]),
+    optionalMap(
+      (s) => setProperty('always', elementPath, PP.create('style', 'gridColumnStart'), s),
+      gridPositionToValue(gridProps?.gridColumnStart),
+    ),
+    optionalMap(
+      (s) => setProperty('always', elementPath, PP.create('style', 'gridColumnEnd'), s),
+      gridPositionToValue(gridProps?.gridColumnEnd),
+    ),
+    optionalMap(
+      (s) => setProperty('always', elementPath, PP.create('style', 'gridRowStart'), s),
+      gridPositionToValue(gridProps?.gridRowStart),
+    ),
+    optionalMap(
+      (s) => setProperty('always', elementPath, PP.create('style', 'gridRowEnd'), s),
+      gridPositionToValue(gridProps?.gridRowEnd),
+    ),
+  ])
+}
+
 function getTargetCell(
   previousTargetCell: GridCellCoordinates | null,
   canvasScale: number,