diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx index 0a2ab0de5350..0ab0b0c43535 100644 --- a/editor/src/components/canvas/controls/grid-controls.tsx +++ b/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,11 +894,11 @@ export const GridControl = React.memo(({ 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', @@ -890,7 +906,7 @@ export const GridControl = React.memo(({ grid }) => { 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', diff --git a/editor/src/components/canvas/dom-walker.ts b/editor/src/components/canvas/dom-walker.ts index 912d3515f34b..2dfe03416b5a 100644 --- a/editor/src/components/canvas/dom-walker.ts +++ b/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) diff --git a/editor/src/components/inspector/inspector-common.ts b/editor/src/components/inspector/inspector-common.ts index 296f0900a7b2..32eeadabddf6 100644 --- a/editor/src/components/inspector/inspector-common.ts +++ b/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' diff --git a/editor/src/core/shared/array-utils.ts b/editor/src/core/shared/array-utils.ts index 3823f2dde770..4c52ed009c96 100644 --- a/editor/src/core/shared/array-utils.ts +++ b/editor/src/core/shared/array-utils.ts @@ -539,6 +539,14 @@ export function matrixGetter(array: T[], width: number): (row: number, column } } +export function range(start: number, end: number): Array { + let result: Array = [] + for (let i = start; i < end; i++) { + result.push(i) + } + return result +} + export function chunkArrayEqually( sortedArray: T[], numberOfChunks: number, diff --git a/editor/src/core/shared/element-template.ts b/editor/src/core/shared/element-template.ts index 8a7b76c2d1e9..b1480315c7fb 100644 --- a/editor/src/core/shared/element-template.ts +++ b/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,