Combo Drag For Grids.

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

@@ -91,6 +91,7 @@ import {
 } from '../controls/grid-controls-for-strategies'
 import { gridReorderStrategy } from './strategies/grid-reorder-strategy'
 import { gridMoveAbsoluteStrategy } from './strategies/grid-move-absolute'
+import { gridChildCornerResizeStrategy } from './strategies/grid-child-corner-resize-strategy'
 
 export type CanvasStrategyFactory = (
   canvasState: InteractionCanvasState,
@@ -143,6 +144,7 @@ const resizeStrategies: MetaCanvasStrategy = (
       resizeGridStrategy,
       gridResizeElementStrategy,
       gridResizeElementRulerStrategy,
+      gridChildCornerResizeStrategy,
     ],
   )
 }

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

@@ -15,7 +15,15 @@ import type { KeyCharacter } from '../../../utils/keyboard'
 import type { Modifiers } from '../../../utils/modifiers'
 import type { AllElementProps } from '../../editor/store/editor-state'
 import type { BorderRadiusCorner } from '../border-radius-control-utils'
-import type { EdgePiece, EdgePosition } from '../canvas-types'
+import {
+  EdgePositionBottom,
+  EdgePositionLeft,
+  EdgePositionRight,
+  EdgePositionTop,
+  type EdgePiece,
+  type EdgePosition,
+  type EdgePositionCorner,
+} from '../canvas-types'
 import { MoveIntoDragThreshold } from '../canvas-utils'
 import type { CanvasCommand } from '../commands/commands'
 import type { ApplicableStrategy } from './canvas-strategies'
@@ -666,6 +674,21 @@ export type GridResizeEdgeProperties = {
   isEnd: boolean
 }
 
+export function gridResizeEdgeToEdgePosition(edge: GridResizeEdge): EdgePosition {
+  switch (edge) {
+    case 'column-start':
+      return EdgePositionLeft
+    case 'column-end':
+      return EdgePositionRight
+    case 'row-start':
+      return EdgePositionTop
+    case 'row-end':
+      return EdgePositionBottom
+    default:
+      assertNever(edge)
+  }
+}
+
 export function gridResizeEdgeProperties(edge: GridResizeEdge): GridResizeEdgeProperties {
   return {
     isRow: edge === 'row-start' || edge === 'row-end',
@@ -703,6 +726,23 @@ export function gridResizeRulerHandle(id: string, edge: GridResizeEdge): GridRes
   }
 }
 
+export interface GridChildCornerHandle {
+  type: 'GRID_CHILD_CORNER_HANDLE'
+  id: string
+  corner: EdgePositionCorner
+}
+
+export function gridChildCornerHandle(
+  id: string,
+  corner: EdgePositionCorner,
+): GridChildCornerHandle {
+  return {
+    type: 'GRID_CHILD_CORNER_HANDLE',
+    id: id,
+    corner: corner,
+  }
+}
+
 export type CanvasControlType =
   | BoundingArea
   | ResizeHandle
@@ -716,6 +756,7 @@ export type CanvasControlType =
   | GridAxisHandle
   | GridResizeHandle
   | GridResizeRulerHandle
+  | GridChildCornerHandle
 
 export function isDragToPan(
   interaction: InteractionSession | null,

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

@@ -54,10 +54,7 @@ import {
 import { CanvasControlsContainerID } from '../../controls/new-canvas-controls'
 import type { CSSProperties } from 'react'
 import { MaxContent } from '../../../inspector/inspector-common'
-import {
-  ResizePointTestId,
-  AbsoluteResizeControlTestId,
-} from '../../controls/select-mode/absolute-resize-control'
+import { AbsoluteResizeControlTestId } from '../../controls/select-mode/absolute-resize-control'
 import type { FragmentLikeType } from './fragment-like-helpers'
 import { AllFragmentLikeTypes } from './fragment-like-helpers'
 import {
@@ -78,6 +75,7 @@ import {
 import { act } from 'react-dom/test-utils'
 import { ComponentsHonouringPropsStylesProject } from './common-projects.test-utils'
 import { SizeLabelTestId } from '../../controls/select-mode/size-label'
+import { ResizePointTestId } from '../../controls/resize-control'
 
 // no mouseup here! it starts the interaction and resizes with drag delta
 async function startDragUsingActions(