Fix misaligned gap controls when justifyContent or alignContent is set

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

@@ -33,6 +33,7 @@ import {
 } from './grid-controls'
 import { isEdgePositionOnSide } from '../canvas-utils'
 import { findOriginalGrid } from '../canvas-strategies/strategies/grid-helpers'
+import type { AlignContent, FlexJustifyContent } from '../../inspector/inspector-common'
 
 export const GridCellTestId = (elementPath: ElementPath) => `grid-cell-${EP.toString(elementPath)}`
 
@@ -70,8 +71,8 @@ export type GridMeasurementHelperData = {
   gap: number | null
   rowGap: number | null
   columnGap: number | null
-  justifyContent: string | null
-  alignContent: string | null
+  justifyContent: FlexJustifyContent | null
+  alignContent: AlignContent | null
   padding: Sides
   columns: number
   cells: number

editor/src/components/canvas/controls/select-mode/grid-gap-control-component.tsx

@@ -2,25 +2,20 @@ import type { CSSProperties } from 'react'
 import React from 'react'
 import { createArrayWithLength, interleaveArray } from '../../../../core/shared/array-utils'
 import type { GridAutoOrTemplateBase } from '../../../../core/shared/element-template'
-import type { CanvasVector, Size } from '../../../../core/shared/math-utils'
-import { size, windowPoint } from '../../../../core/shared/math-utils'
+import type { Size } from '../../../../core/shared/math-utils'
+import { size } from '../../../../core/shared/math-utils'
 import type { ElementPath } from '../../../../core/shared/project-file-types'
 import { assertNever } from '../../../../core/shared/utils'
-import { Modifier } from '../../../../utils/modifiers'
 import { when } from '../../../../utils/react-conditionals'
 import { useColorTheme, UtopiaStyles } from '../../../../uuiui'
 import { CSSCursor } from '../../../../uuiui-deps'
-import type { EditorDispatch } from '../../../editor/action-types'
 import { useDispatch } from '../../../editor/store/dispatch-context'
 import { Substores, useEditorState, useRefEditorState } from '../../../editor/store/store-hook'
 import {
   cssNumber,
   printCSSNumber,
   stringifyGridDimension,
 } from '../../../inspector/common/css-utils'
-import CanvasActions from '../../canvas-actions'
-import { createInteractionViaMouse, gridGapHandle } from '../../canvas-strategies/interaction-state'
-import { windowToCanvasCoordinates } from '../../dom-lookup'
 import type { Axis } from '../../gap-utils'
 import { maybeGridGapData } from '../../gap-utils'
 import { CanvasOffsetWrapper } from '../canvas-offset-wrapper'
@@ -30,6 +25,7 @@ import { getGridHelperStyleMatchingTargetGrid } from '../grid-controls-helpers'
 import type { CSSNumberWithRenderedValue } from './controls-common'
 import { CanvasLabel, PillHandle, useHoverWithDelay } from './controls-common'
 import { startGapControlInteraction } from './grid-gap-control-helpers'
+import type { AlignContent, FlexJustifyContent } from '../../../inspector/inspector-common'
 
 export interface GridGapControlProps {
   selectedElement: ElementPath
@@ -184,7 +180,7 @@ const GridPaddingOutlineForDimension = (props: {
       {createArrayWithLength(length, (index) => {
         const hide = index === 0 || index === length - 1 || index % 2 === 0
         return (
-          <GridRowHighlight
+          <GridRowOrColumnHighlight
             key={index}
             hide={hide} // we only want to show the divs that fall in where the gaps are in the original grid
             gapId={`${dimension}-${index}`}
@@ -199,14 +195,16 @@ const GridPaddingOutlineForDimension = (props: {
             beingDragged={beingDragged}
             onMouseOver={onMouseOver}
             elementHovered={elementHovered}
+            gridJustifyContent={grid.justifyContent}
+            gridAlignContent={grid.alignContent}
           />
         )
       })}
     </div>
   )
 }
 
-const GridRowHighlight = (props: {
+const GridRowOrColumnHighlight = (props: {
   gapId: string
   onMouseDown: React.MouseEventHandler
   hide: boolean
@@ -218,6 +216,8 @@ const GridRowHighlight = (props: {
   beingDragged: boolean
   onMouseOver: () => void
   elementHovered: boolean
+  gridJustifyContent: FlexJustifyContent | null
+  gridAlignContent: AlignContent | null
 }) => {
   const {
     gapId,
@@ -231,6 +231,8 @@ const GridRowHighlight = (props: {
     beingDragged,
     onMouseOver,
     elementHovered,
+    gridJustifyContent,
+    gridAlignContent,
   } = props
 
   const colorTheme = useColorTheme()
@@ -294,8 +296,8 @@ const GridRowHighlight = (props: {
         boxShadow: `inset 0 0 0 ${lineWidth}px ${outlineColor}`,
         opacity: hide ? 0 : 1,
 
-        alignItems: 'center',
-        justifyContent: 'center',
+        alignContent: axis === 'row' ? undefined : gridAlignContent ?? undefined,
+        justifyContent: axis === 'row' ? gridJustifyContent ?? undefined : undefined,
         placeItems: 'center',
 
         gap: gap ?? 0,