Grid resize better handles

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

@@ -31,7 +31,13 @@ export const resizeGridStrategy: CanvasStrategyFactory = (
 
   const selectedElement = selectedElements[0]
 
-  if (!MetadataUtils.isGridCell(canvasState.startingMetadata, selectedElement)) {
+  const isGridCell = MetadataUtils.isGridCell(canvasState.startingMetadata, selectedElement)
+  const isGrid = MetadataUtils.isGridLayoutedContainer(
+    MetadataUtils.findElementByElementPath(canvasState.startingMetadata, selectedElement),
+  )
+  const isGridOrGridCell = isGridCell || isGrid
+
+  if (!isGridOrGridCell) {
     return null
   }
 
@@ -65,17 +71,19 @@ 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 gridPath = isGrid ? selectedElement : EP.parentPath(selectedElement)
+
+      const gridSpecialSizeMeasurements =
+        canvasState.startingMetadata[EP.toString(gridPath)].specialSizeMeasurements
       const originalValues =
         control.axis === 'column'
-          ? parentSpecialSizeMeasurements.containerGridPropertiesFromProps.gridTemplateColumns
-          : parentSpecialSizeMeasurements.containerGridPropertiesFromProps.gridTemplateRows
+          ? gridSpecialSizeMeasurements.containerGridPropertiesFromProps.gridTemplateColumns
+          : gridSpecialSizeMeasurements.containerGridPropertiesFromProps.gridTemplateRows
       const calculatedValues =
         control.axis === 'column'
-          ? parentSpecialSizeMeasurements.containerGridProperties.gridTemplateColumns
-          : parentSpecialSizeMeasurements.containerGridProperties.gridTemplateRows
+          ? gridSpecialSizeMeasurements.containerGridProperties.gridTemplateColumns
+          : gridSpecialSizeMeasurements.containerGridProperties.gridTemplateRows
 
       if (
         calculatedValues == null ||
@@ -115,14 +123,14 @@ export const resizeGridStrategy: CanvasStrategyFactory = (
       const commands = [
         setProperty(
           'always',
-          parentPath,
+          gridPath,
           PP.create(
             'style',
             control.axis === 'column' ? 'gridTemplateColumns' : 'gridTemplateRows',
           ),
           propertyValueAsString,
         ),
-        setElementsToRerenderCommand([parentPath]),
+        setElementsToRerenderCommand([gridPath]),
       ]
 
       return strategyApplicationResult(commands)

editor/src/components/canvas/controls/grid-controls.tsx

@@ -1,3 +1,6 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { jsx } from '@emotion/react'
 import type { AnimationControls } from 'framer-motion'
 import { motion, useAnimationControls } from 'framer-motion'
 import React from 'react'
@@ -51,7 +54,7 @@ import {
 } from '../canvas-strategies/interaction-state'
 import { windowToCanvasCoordinates } from '../dom-lookup'
 import { CanvasOffsetWrapper } from './canvas-offset-wrapper'
-import { useColorTheme } from '../../../uuiui'
+import { useColorTheme, UtopiaStyles } from '../../../uuiui'
 import { gridCellTargetId } from '../canvas-strategies/strategies/grid-helpers'
 import { resizeBoundingBoxFromSide } from '../canvas-strategies/strategies/resize-helpers'
 import type { EdgePosition } from '../canvas-types'
@@ -65,6 +68,7 @@ import {
 import { useCanvasAnimation } from '../ui-jsx-canvas-renderer/animation-context'
 import { CanvasLabel } from './select-mode/controls-common'
 import { optionalMap } from '../../../core/shared/optional-utils'
+import type { Sides } from 'utopia-api/core'
 
 const CELL_ANIMATION_DURATION = 0.15 // seconds
 
@@ -122,16 +126,16 @@ function getLabelForAxis(
 }
 
 const SHADOW_SNAP_ANIMATION = 'shadow-snap'
-
-const GridResizingContainerSize = 100
+const GRID_RESIZE_HANDLE_CONTAINER_SIZE = 30 // px
+const GRID_RESIZE_HANDLE_SIZE = 15 // px
 
 export interface GridResizingControlProps {
   dimension: GridCSSNumber
   dimensionIndex: number
   axis: 'row' | 'column'
   containingFrame: CanvasRectangle
-  workingPrefix: number
   fromPropsAxisValues: GridAutoOrTemplateBase | null
+  padding: number | null
 }
 
 export const GridResizingControl = React.memo((props: GridResizingControlProps) => {
@@ -148,13 +152,22 @@ export const GridResizingControl = React.memo((props: GridResizingControlProps)
   const dispatch = useDispatch()
   const colorTheme = useColorTheme()
 
+  const [resizing, setResizing] = React.useState(false)
+
   const mouseDownHandler = React.useCallback(
     (event: React.MouseEvent): void => {
+      function mouseUpHandler() {
+        setResizing(false)
+        window.removeEventListener('mouseup', mouseUpHandler)
+      }
+      window.addEventListener('mouseup', mouseUpHandler)
+
       const start = windowToCanvasCoordinates(
         scale,
         canvasOffset,
         windowPoint({ x: event.nativeEvent.x, y: event.nativeEvent.y }),
       )
+      setResizing(true)
 
       dispatch([
         CanvasActions.createInteractionSession(
@@ -175,34 +188,84 @@ export const GridResizingControl = React.memo((props: GridResizingControlProps)
   const labelId = `grid-${props.axis}-handle-${props.dimensionIndex}`
   const containerId = `${labelId}-container`
 
+  const shadowSize = React.useMemo(() => {
+    return props.axis === 'column'
+      ? props.containingFrame.height + GRID_RESIZE_HANDLE_CONTAINER_SIZE
+      : props.containingFrame.width + GRID_RESIZE_HANDLE_CONTAINER_SIZE
+  }, [props.containingFrame, props.axis])
+
   return (
     <div
       key={containerId}
       data-testid={containerId}
       style={{
-        position: 'absolute',
-        left:
-          props.axis === 'column' ? props.workingPrefix - GridResizingContainerSize / 2 : undefined,
-        top:
-          props.axis === 'row'
-            ? props.workingPrefix - GridResizingContainerSize / 2
-            : props.containingFrame.y - 30 / scale,
-        right: props.axis === 'row' ? 10 / scale - props.containingFrame.x : undefined,
-        width: props.axis === 'column' ? GridResizingContainerSize : `max-content`,
-        height: props.axis === 'row' ? GridResizingContainerSize : `max-content`,
         display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
+        alignItems: props.axis === 'column' ? 'flex-start' : 'center',
+        justifyContent: props.axis === 'column' ? 'center' : 'flex-start',
+        border: `1px solid ${resizing ? colorTheme.brandNeonPink.value : 'transparent'}`,
+        height: props.axis === 'column' && resizing ? shadowSize : '100%',
+        width: props.axis === 'row' && resizing ? shadowSize : '100%',
+        position: 'relative',
+        ...(resizing
+          ? UtopiaStyles.backgrounds.stripedBackground(colorTheme.brandNeonPink60.value, scale)
+          : {}),
       }}
     >
-      <CanvasLabel
-        testId={labelId}
-        value={getLabelForAxis(props.dimension, props.dimensionIndex, props.fromPropsAxisValues)}
-        scale={scale}
-        color={colorTheme.brandNeonPink.value}
-        textColor={colorTheme.white.value}
+      <div
+        data-testid={labelId}
+        style={{
+          zoom: 1 / scale,
+          width: GRID_RESIZE_HANDLE_SIZE,
+          height: GRID_RESIZE_HANDLE_SIZE,
+          borderRadius: '100%',
+          border: `1px solid ${colorTheme.border0.value}`,
+          boxShadow: `${colorTheme.canvasControlsSizeBoxShadowColor50.value} 0px 0px
+              ${1 / scale}px, ${colorTheme.canvasControlsSizeBoxShadowColor20.value} 0px ${
+            1 / scale
+          }px ${2 / scale}px ${1 / scale}px`,
+          background: colorTheme.white.value,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          cursor: gridEdgeToCSSCursor(props.axis === 'column' ? 'column-start' : 'row-start'),
+          fontSize: 8,
+        }}
+        css={{
+          opacity: resizing ? 1 : 0.5,
+          ':hover': {
+            opacity: 1,
+          },
+        }}
         onMouseDown={mouseDownHandler}
-      />
+      >
+        {props.axis === 'row' ? '↕' : '↔'}
+      </div>
+      {when(
+        resizing,
+        <div
+          style={{
+            position: 'absolute',
+            top: props.axis === 'column' ? GRID_RESIZE_HANDLE_CONTAINER_SIZE : 0,
+            left: props.axis === 'row' ? GRID_RESIZE_HANDLE_CONTAINER_SIZE : 0,
+            right: 0,
+            bottom: 0,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          <CanvasLabel
+            value={getLabelForAxis(
+              props.dimension,
+              props.dimensionIndex,
+              props.fromPropsAxisValues,
+            )}
+            scale={scale}
+            color={colorTheme.brandNeonPink.value}
+            textColor={colorTheme.white.value}
+          />
+        </div>,
+      )}
     </div>
   )
 })
@@ -214,50 +277,75 @@ export interface GridResizingProps {
   containingFrame: CanvasRectangle
   axis: 'row' | 'column'
   gap: number | null
+  padding: Sides | null
 }
 
 export const GridResizing = React.memo((props: GridResizingProps) => {
+  const canvasScale = useEditorState(
+    Substores.canvasOffset,
+    (store) => store.editor.canvas.scale,
+    'GridResizing canvasScale',
+  )
   if (props.axisValues == null) {
     return null
-  } else {
-    switch (props.axisValues.type) {
-      case 'DIMENSIONS':
-        let workingPrefix: number =
-          props.axis === 'column' ? props.containingFrame.x : props.containingFrame.y
-        return (
-          <>
-            {props.axisValues.dimensions.flatMap((dimension, dimensionIndex) => {
-              // Assumes pixels currently.
-              workingPrefix += dimension.value
-              if (dimensionIndex === 0) {
-                // Shift by half the gap initially...
-                workingPrefix += (props.gap ?? 0) / 2
-              } else {
-                // ...Then by the full gap, as it would be half from the prior entry
-                // and half from the current one.
-                workingPrefix += props.gap ?? 0
-              }
-
-              return (
-                <GridResizingControl
-                  key={`grid-resizing-control-${dimensionIndex}`}
-                  dimensionIndex={dimensionIndex}
-                  dimension={dimension}
-                  fromPropsAxisValues={props.fromPropsAxisValues}
-                  axis={props.axis}
-                  containingFrame={props.containingFrame}
-                  workingPrefix={workingPrefix}
-                />
-              )
-            })}
-          </>
-        )
-      case 'FALLBACK':
-        return null
-      default:
-        assertNever(props.axisValues)
-        return null
-    }
+  }
+  switch (props.axisValues.type) {
+    case 'DIMENSIONS':
+      const size = GRID_RESIZE_HANDLE_CONTAINER_SIZE / canvasScale
+      return (
+        <div
+          style={{
+            position: 'absolute',
+            top: props.containingFrame.y - (props.axis === 'column' ? size : 0),
+            left: props.containingFrame.x - (props.axis === 'row' ? size : 0),
+            width:
+              props.axis === 'column'
+                ? props.containingFrame.width
+                : size + props.containingFrame.width,
+            height: props.axis === 'row' ? props.containingFrame.height : size,
+            display: 'grid',
+            gridTemplateColumns:
+              props.axis === 'column'
+                ? props.axisValues.dimensions.map((dim) => `${dim.value}${dim.unit}`).join(' ')
+                : undefined,
+            gridTemplateRows:
+              props.axis === 'row'
+                ? props.axisValues.dimensions.map((dim) => `${dim.value}${dim.unit}`).join(' ')
+                : undefined,
+            gap: props.gap ?? 0,
+            paddingLeft:
+              props.axis === 'column' && props.padding != null
+                ? `${props.padding.left}px`
+                : undefined,
+            paddingTop:
+              props.axis === 'row' && props.padding != null ? `${props.padding.top}px` : undefined,
+          }}
+        >
+          {props.axisValues.dimensions.flatMap((dimension, dimensionIndex) => {
+            return (
+              <GridResizingControl
+                key={`grid-resizing-control-${dimensionIndex}`}
+                dimensionIndex={dimensionIndex}
+                dimension={dimension}
+                fromPropsAxisValues={props.fromPropsAxisValues}
+                axis={props.axis}
+                containingFrame={props.containingFrame}
+                padding={
+                  props.padding == null
+                    ? 0
+                    : props.axis === 'column'
+                    ? props.padding.left ?? 0
+                    : props.padding.top ?? 0
+                }
+              />
+            )
+          })}
+        </div>
+      )
+    case 'FALLBACK':
+      return null
+    default:
+      assertNever(props.axisValues)
   }
 })
 GridResizing.displayName = 'GridResizing'
@@ -602,7 +690,7 @@ export const GridControls = controlForStrategyMemoized(() => {
                   >
                     {when(
                       features.Grid.dotgrid,
-                      <>
+                      <React.Fragment>
                         <div
                           style={{
                             position: 'absolute',
@@ -657,7 +745,7 @@ export const GridControls = controlForStrategyMemoized(() => {
                             right: -1,
                           }}
                         />
-                      </>,
+                      </React.Fragment>,
                     )}
                   </div>
                 )
@@ -742,6 +830,7 @@ export const GridControls = controlForStrategyMemoized(() => {
               containingFrame={grid.frame}
               axis={'column'}
               gap={grid.gap}
+              padding={grid.padding}
             />
           )
         })}
@@ -754,6 +843,7 @@ export const GridControls = controlForStrategyMemoized(() => {
               containingFrame={grid.frame}
               axis={'row'}
               gap={grid.gap}
+              padding={grid.padding}
             />
           )
         })}