fix(canvas) Correctly Aligned Grid Controls (#6484)

- `alignContent` in `getSpecialMeasurements` now isn't filtered by
`getFlexJustifyContent`.
- Added `justifyContent` and `alignContent` to `GridResizingProps`.
- In `GridResizing`, the main div now includes `paddingRight`,
`paddingBottom`,
  `justifyContent` and `alignContent`.
- `GridControl` now uses `range` to build the `placeholders` value.
- Removed position shifting from `GridControl` and changed the `border`
to
  an `outline` as those were causing the content to be repositioned.
- Added `range` utility function.
- `SpecialSizeMeasurements.alignContent` is now typed to `AlignContent |
null` instead
  of `FlexJustifyContent | null` as that is more correct.

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

@@ -20,7 +20,7 @@ import {
   printGridCSSNumber,
 } from '../../../components/inspector/common/css-utils'
 import { MetadataUtils } from '../../../core/model/element-metadata-utils'
-import { mapDropNulls, stripNulls, uniqBy } from '../../../core/shared/array-utils'
+import { mapDropNulls, range, stripNulls, uniqBy } from '../../../core/shared/array-utils'
 import { defaultEither } from '../../../core/shared/either'
 import * as EP from '../../../core/shared/element-path'
 import type {
@@ -336,6 +336,8 @@ export interface GridResizingProps {
   axis: Axis
   gap: number | null
   padding: Sides | null
+  justifyContent: string | null
+  alignContent: string | null
 }
 
 export const GridResizing = React.memo((props: GridResizingProps) => {
@@ -424,6 +426,16 @@ export const GridResizing = React.memo((props: GridResizingProps) => {
                 : undefined,
             paddingTop:
               props.axis === 'row' && props.padding != null ? `${props.padding.top}px` : undefined,
+            paddingRight:
+              props.axis === 'column' && props.padding != null
+                ? `${props.padding.right}px`
+                : undefined,
+            paddingBottom:
+              props.axis === 'row' && props.padding != null
+                ? `${props.padding.bottom}px`
+                : undefined,
+            justifyContent: props.justifyContent ?? undefined,
+            alignContent: props.alignContent ?? undefined,
           }}
         >
           {dimensions.flatMap((dimension, dimensionIndex) => {
@@ -621,6 +633,8 @@ export const GridRowColumnResizingControls =
               gap={grid.columnGap ?? grid.gap}
               padding={grid.padding}
               stripedAreaLength={getStripedAreaLength(grid.gridTemplateRows, grid.gap ?? 0)}
+              alignContent={grid.justifyContent}
+              justifyContent={grid.alignContent}
             />
           )
         })}
@@ -635,6 +649,8 @@ export const GridRowColumnResizingControls =
               gap={grid.rowGap ?? grid.gap}
               padding={grid.padding}
               stripedAreaLength={getStripedAreaLength(grid.gridTemplateColumns, grid.gap ?? 0)}
+              alignContent={grid.alignContent}
+              justifyContent={grid.justifyContent}
             />
           )
         })}
@@ -878,19 +894,19 @@ export const GridControl = React.memo<GridControlProps>(({ grid }) => {
     gridPath: gridPath,
   })
 
-  const placeholders = Array.from(Array(grid.cells).keys())
+  const placeholders = range(0, grid.cells)
   let style: CSSProperties = {
     position: 'absolute',
-    top: grid.frame.y - 1, // account for border!
-    left: grid.frame.x - 1, // account for border!
+    top: grid.frame.y,
+    left: grid.frame.x,
     width: grid.frame.width,
     height: grid.frame.height,
     display: 'grid',
     gridTemplateColumns: getNullableAutoOrTemplateBaseString(grid.gridTemplateColumns),
     gridTemplateRows: getNullableAutoOrTemplateBaseString(grid.gridTemplateRows),
     backgroundColor:
       activelyDraggingOrResizingCell != null ? colorTheme.primary10.value : 'transparent',
-    border: `1px solid ${
+    outline: `1px solid ${
       activelyDraggingOrResizingCell != null ? colorTheme.primary.value : 'transparent'
     }`,
     justifyContent: grid.justifyContent ?? 'initial',

editor/src/components/canvas/dom-walker.ts

@@ -69,6 +69,7 @@ import { fastForEach } from '../../core/shared/utils'
 import type { EditorState, EditorStorePatched } from '../editor/store/editor-state'
 import { shallowEqual } from '../../core/shared/equality-utils'
 import {
+  getAlignContent,
   getFlexAlignment,
   getFlexJustifyContent,
   getSelfAlignment,
@@ -756,7 +757,7 @@ function getSpecialMeasurements(
   const parentTextDirection = eitherToMaybe(parseDirection(parentElementStyle?.direction, null))
 
   const justifyContent = getFlexJustifyContent(elementStyle.justifyContent)
-  const alignContent = getFlexJustifyContent(elementStyle.alignContent)
+  const alignContent = getAlignContent(elementStyle.alignContent)
   const alignItems = getFlexAlignment(elementStyle.alignItems)
   const alignSelf = getSelfAlignment(elementStyle.alignSelf)
   const justifySelf = getSelfAlignment(elementStyle.justifySelf)

editor/src/components/inspector/inspector-common.ts

@@ -99,6 +99,75 @@ export function getFlexJustifyContent(value: string | null): FlexJustifyContent
   }
 }
 
+export type AlignContent =
+  | 'normal'
+  | 'start'
+  | 'center'
+  | 'end'
+  | 'flex-start'
+  | 'flex-end'
+  | 'baseline'
+  | 'first baseline'
+  | 'last baseline'
+  | 'space-between'
+  | 'space-around'
+  | 'space-evenly'
+  | 'stretch'
+  | 'safe center'
+  | 'unsafe center'
+  | 'inherit'
+  | 'initial'
+  | 'revert'
+  | 'revert-layer'
+  | 'unset'
+
+export function getAlignContent(value: string | null): AlignContent | null {
+  switch (value) {
+    case 'normal':
+      return 'normal'
+    case 'start':
+      return 'start'
+    case 'center':
+      return 'center'
+    case 'end':
+      return 'end'
+    case 'flex-start':
+      return 'flex-start'
+    case 'flex-end':
+      return 'flex-end'
+    case 'baseline':
+      return 'baseline'
+    case 'first baseline':
+      return 'first baseline'
+    case 'last baseline':
+      return 'last baseline'
+    case 'space-between':
+      return 'space-between'
+    case 'space-around':
+      return 'space-around'
+    case 'space-evenly':
+      return 'space-evenly'
+    case 'stretch':
+      return 'stretch'
+    case 'safe center':
+      return 'safe center'
+    case 'unsafe center':
+      return 'unsafe center'
+    case 'inherit':
+      return 'inherit'
+    case 'initial':
+      return 'initial'
+    case 'revert':
+      return 'revert'
+    case 'revert-layer':
+      return 'revert-layer'
+    case 'unset':
+      return 'unset'
+    default:
+      return null
+  }
+}
+
 export type FlexAlignment = StartCenterEnd | 'auto' | 'stretch'
 export type SelfAlignment = FlexAlignment | 'end' | 'start'
 

editor/src/core/shared/array-utils.ts

@@ -539,6 +539,14 @@ export function matrixGetter<T>(array: T[], width: number): (row: number, column
   }
 }
 
+export function range(start: number, end: number): Array<number> {
+  let result: Array<number> = []
+  for (let i = start; i < end; i++) {
+    result.push(i)
+  }
+  return result
+}
+
 export function chunkArrayEqually<T>(
   sortedArray: T[],
   numberOfChunks: number,

editor/src/core/shared/element-template.ts

@@ -35,6 +35,7 @@ import { intrinsicHTMLElementNamesAsStrings } from './dom-utils'
 import type { MapLike } from 'typescript'
 import { forceNotNull } from './optional-utils'
 import type {
+  AlignContent,
   FlexAlignment,
   FlexJustifyContent,
   SelfAlignment,
@@ -2814,7 +2815,7 @@ export interface SpecialSizeMeasurements {
   gap: number | null
   flexDirection: FlexDirection | null
   justifyContent: FlexJustifyContent | null
-  alignContent: FlexJustifyContent | null
+  alignContent: AlignContent | null
   alignItems: FlexAlignment | null
   alignSelf: SelfAlignment | null
   justifySelf: SelfAlignment | null
@@ -2867,7 +2868,7 @@ export function specialSizeMeasurements(
   gap: number | null,
   flexDirection: FlexDirection | null,
   justifyContent: FlexJustifyContent | null,
-  alignContent: FlexJustifyContent | null,
+  alignContent: AlignContent | null,
   alignItems: FlexAlignment | null,
   htmlElementName: string,
   renderedChildrenCount: number,