Spike/grid controls

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

@@ -63,6 +63,10 @@ import type { InsertionSubject, InsertionSubjectWrapper } from '../../editor/edi
 import { generateUidWithExistingComponents } from '../../../core/model/element-template-utils'
 import { retargetStrategyToChildrenOfFragmentLikeElements } from './strategies/fragment-like-helpers'
 import { MetadataUtils } from '../../../core/model/element-metadata-utils'
+import { rearrangeGridSwapStrategy } from './strategies/rearrange-grid-swap-strategy'
+import { rearrangeGridMoveStrategy } from './strategies/rearrange-grid-move-strategy'
+import { gridCellResizeStrategy } from './strategies/grid-cell-resize-strategy'
+import { resizeGridStrategy } from './strategies/resize-grid-strategy'
 
 export type CanvasStrategyFactory = (
   canvasState: InteractionCanvasState,
@@ -90,6 +94,9 @@ const moveOrReorderStrategies: MetaCanvasStrategy = (
       convertToAbsoluteAndMoveStrategy,
       convertToAbsoluteAndMoveAndSetParentFixedStrategy,
       reorderSliderStategy,
+      rearrangeGridSwapStrategy,
+      rearrangeGridMoveStrategy,
+      gridCellResizeStrategy,
     ],
   )
 }
@@ -100,13 +107,14 @@ const resizeStrategies: MetaCanvasStrategy = (
   customStrategyState: CustomStrategyState,
 ): Array<CanvasStrategy> => {
   return mapDropNulls(
-    (factory) => factory(canvasState, interactionSession),
+    (factory) => factory(canvasState, interactionSession, customStrategyState),
     [
       keyboardAbsoluteResizeStrategy,
       absoluteResizeBoundingBoxStrategy,
       flexResizeBasicStrategy,
       flexResizeStrategy,
       basicResizeStrategy,
+      resizeGridStrategy,
     ],
   )
 }
@@ -582,7 +590,7 @@ export function useGetApplicableStrategyControls(): Array<ControlWithProps<unkno
     }
     // Special case controls.
     if (!isResizable && !currentlyInProgress) {
-      applicableControls.push(notResizableControls)
+      // applicableControls.push(notResizableControls)
     }
     return applicableControls
   }, [applicableStrategies, currentStrategy, currentlyInProgress])

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

@@ -559,6 +559,44 @@ export function flexGapHandle(): FlexGapHandle {
   }
 }
 
+export interface GridCellHandle {
+  type: 'GRID_CELL_HANDLE'
+  id: string
+}
+
+export function gridCellHandle(params: { id: string }): GridCellHandle {
+  return {
+    type: 'GRID_CELL_HANDLE',
+    id: params.id,
+  }
+}
+
+export interface GridResizeHandle {
+  type: 'GRID_RESIZE_HANDLE'
+  id: string
+}
+
+export function gridResizeHandle(id: string): GridResizeHandle {
+  return {
+    type: 'GRID_RESIZE_HANDLE',
+    id: id,
+  }
+}
+
+export interface GridAxisHandle {
+  type: 'GRID_AXIS_HANDLE'
+  axis: 'column' | 'row'
+  columnOrRow: number
+}
+
+export function gridAxisHandle(axis: 'column' | 'row', columnOrRow: number): GridAxisHandle {
+  return {
+    type: 'GRID_AXIS_HANDLE',
+    axis: axis,
+    columnOrRow: columnOrRow,
+  }
+}
+
 export interface PaddingResizeHandle {
   type: 'PADDING_RESIZE_HANDLE'
   edgePiece: EdgePiece
@@ -610,6 +648,9 @@ export type CanvasControlType =
   | KeyboardCatcherControl
   | ReorderSlider
   | BorderRadiusResizeHandle
+  | GridCellHandle
+  | GridResizeHandle
+  | GridAxisHandle
 
 export function isDragToPan(
   interaction: InteractionSession | null,

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

@@ -83,7 +83,12 @@ export function absoluteResizeBoundingBoxStrategy(
     retargetedTargets.length === 0 ||
     !retargetedTargets.every((element) => {
       return supportsAbsoluteResize(canvasState.startingMetadata, element, canvasState)
-    })
+    }) ||
+    retargetedTargets.some((t) =>
+      MetadataUtils.isGridLayoutedContainer(
+        MetadataUtils.findElementByElementPath(canvasState.startingMetadata, EP.parentPath(t)),
+      ),
+    )
   ) {
     return null
   }

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

@@ -54,6 +54,7 @@ import { pushIntendedBoundsAndUpdateGroups } from '../../commands/push-intended-
 import { queueTrueUpElement } from '../../commands/queue-true-up-command'
 import { treatElementAsGroupLike } from './group-helpers'
 import { trueUpGroupElementChanged } from '../../../editor/store/editor-state'
+import { parentPath } from '../../../../core/shared/element-path'
 
 export const BASIC_RESIZE_STRATEGY_ID = 'BASIC_RESIZE'
 
@@ -63,7 +64,15 @@ export function basicResizeStrategy(
 ): CanvasStrategy | null {
   const selectedElements = getTargetPathsFromInteractionTarget(canvasState.interactionTarget)
 
-  if (selectedElements.length !== 1 || !honoursPropsSize(canvasState, selectedElements[0])) {
+  if (
+    selectedElements.length !== 1 ||
+    !honoursPropsSize(canvasState, selectedElements[0]) ||
+    selectedElements.some((t) =>
+      MetadataUtils.isGridLayoutedContainer(
+        MetadataUtils.findElementByElementPath(canvasState.startingMetadata, parentPath(t)),
+      ),
+    )
+  ) {
     return null
   }
   const metadata = MetadataUtils.findElementByElementPath(
@@ -73,14 +82,6 @@ export function basicResizeStrategy(
   const elementDimensionsProps = metadata != null ? getElementDimensions(metadata) : null
   const elementParentBounds = metadata?.specialSizeMeasurements.immediateParentBounds ?? null
 
-  const elementDimensions =
-    elementDimensionsProps == null
-      ? null
-      : {
-          width: elementDimensionsProps.width,
-          height: elementDimensionsProps.height,
-        }
-
   return {
     id: BASIC_RESIZE_STRATEGY_ID,
     name: 'Resize (Basic)',

editor/src/components/canvas/canvas-strategies/strategies/drag-to-move-metastrategy.tsx

@@ -29,6 +29,7 @@ import { relativeMoveStrategy } from './relative-move-strategy'
 import { reparentMetaStrategy } from './reparent-metastrategy'
 import { flattenSelection } from './shared-move-strategies-helpers'
 import * as EP from '../../../../core/shared/element-path'
+import { MetadataUtils } from '../../../../core/model/element-metadata-utils'
 
 type MoveStrategyFactory = (
   canvasState: InteractionCanvasState,
@@ -101,8 +102,12 @@ export const dragToMoveMetaStrategy: MetaCanvasStrategy = (
       dragToMoveStrategies,
     )
   } else {
+    const doNothing = doNothingStrategy(canvasState, interactionSession, customStrategyState)
+    if (doNothing == null) {
+      return []
+    }
     return filterStrategiesWhileSpacePressed(interactionSession.interactionData.spacePressed, [
-      doNothingStrategy(canvasState, interactionSession, customStrategyState),
+      doNothing,
     ])
   }
 }
@@ -124,9 +129,19 @@ export function doNothingStrategy(
   canvasState: InteractionCanvasState,
   interactionSession: InteractionSession | null,
   customStrategyState: CustomStrategyState,
-): CanvasStrategy {
+): CanvasStrategy | null {
   const selectedElements = getTargetPathsFromInteractionTarget(canvasState.interactionTarget)
 
+  if (
+    selectedElements.some((t) =>
+      MetadataUtils.isGridLayoutedContainer(
+        MetadataUtils.findElementByElementPath(canvasState.startingMetadata, EP.parentPath(t)),
+      ),
+    )
+  ) {
+    return null
+  }
+
   return {
     id: DoNothingStrategyID,
     name: 'No Default Available',

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

@@ -0,0 +1,89 @@
+import { MetadataUtils } from '../../../../core/model/element-metadata-utils'
+import * as EP from '../../../../core/shared/element-path'
+import type { ElementPath } from '../../../../core/shared/project-file-types'
+import { create } from '../../../../core/shared/property-path'
+import type { CanvasCommand } from '../../commands/commands'
+import { setProperty } from '../../commands/set-property-command'
+import { GridControls, GridResizeShadow, TargetGridCell } from '../../controls/grid-controls'
+import type { CanvasStrategyFactory } from '../canvas-strategies'
+import { onlyFitWhenDraggingThisControl } from '../canvas-strategies'
+import type { InteractionCanvasState } from '../canvas-strategy-types'
+import {
+  getTargetPathsFromInteractionTarget,
+  emptyStrategyApplicationResult,
+  strategyApplicationResult,
+} from '../canvas-strategy-types'
+import type { InteractionSession } from '../interaction-state'
+
+export const gridCellResizeStrategy: CanvasStrategyFactory = (
+  canvasState: InteractionCanvasState,
+  interactionSession: InteractionSession | null,
+) => {
+  const selectedElements = getTargetPathsFromInteractionTarget(canvasState.interactionTarget)
+  if (selectedElements.length !== 1) {
+    return null
+  }
+
+  const selectedElement = selectedElements[0]
+  const ok = MetadataUtils.isGridLayoutedContainer(
+    MetadataUtils.findElementByElementPath(
+      canvasState.startingMetadata,
+      EP.parentPath(selectedElement),
+    ),
+  )
+  if (!ok) {
+    return null
+  }
+
+  return {
+    id: 'grid-cell-resize-strategy',
+    name: 'Resize Grid Cell',
+    descriptiveLabel: 'Resize Grid Cell',
+    icon: {
+      category: 'tools',
+      type: 'pointer',
+    },
+    controlsToRender: [
+      {
+        control: GridControls,
+        props: {},
+        key: `grid-controls-${EP.toString(selectedElement)}`,
+        show: 'always-visible',
+      },
+      {
+        control: GridResizeShadow,
+        props: { elementPath: selectedElement },
+        key: `grid-resize-shadow-${EP.toString(selectedElement)}`,
+        show: 'always-visible',
+      },
+    ],
+    fitness: onlyFitWhenDraggingThisControl(interactionSession, 'GRID_RESIZE_HANDLE', 1),
+    apply: () => {
+      if (
+        interactionSession == null ||
+        interactionSession.interactionData.type !== 'DRAG' ||
+        interactionSession.interactionData.drag == null ||
+        interactionSession.activeControl.type !== 'GRID_RESIZE_HANDLE'
+      ) {
+        return emptyStrategyApplicationResult
+      }
+
+      return strategyApplicationResult(
+        resizeGridCellCommands(selectedElement, {
+          columnEnd: TargetGridCell.current.column + 1,
+          rowEnd: TargetGridCell.current.row + 1,
+        }),
+      )
+    },
+  }
+}
+
+function resizeGridCellCommands(
+  elementPath: ElementPath,
+  { columnEnd, rowEnd }: { columnEnd: number; rowEnd: number },
+): CanvasCommand[] {
+  return [
+    setProperty('always', elementPath, create('style', 'gridColumnEnd'), columnEnd),
+    setProperty('always', elementPath, create('style', 'gridRowEnd'), rowEnd),
+  ]
+}

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
@@ -127,7 +128,12 @@ export function keyboardAbsoluteResizeStrategy(
     selectedElements.length === 0 ||
     !selectedElements.every((element) => {
       return supportsAbsoluteResize(canvasState.startingMetadata, element, canvasState)
-    })
+    }) ||
+    selectedElements.some((t) =>
+      MetadataUtils.isGridLayoutedContainer(
+        MetadataUtils.findElementByElementPath(canvasState.startingMetadata, EP.parentPath(t)),
+      ),
+    )
   ) {
     return null
   }