From 1c676ad2ed34a4b7c321ad8b8e177ab538427e50 Mon Sep 17 00:00:00 2001 From: Balint Gabor <127662+gbalint@users.noreply.github.com> Date: Fri, 18 Oct 2024 13:43:35 +0200 Subject: [PATCH 1/3] Fix misaligned gap controls --- .../controls/grid-controls-for-strategies.tsx | 5 +++-- .../grid-gap-control-component.tsx | 20 ++++++++++--------- 2 files changed, 14 insertions(+), 11 deletions(-) diff --git a/editor/src/components/canvas/controls/grid-controls-for-strategies.tsx b/editor/src/components/canvas/controls/grid-controls-for-strategies.tsx index a5534b5f4684..59a7b34d616b 100644 --- a/editor/src/components/canvas/controls/grid-controls-for-strategies.tsx +++ b/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 diff --git a/editor/src/components/canvas/controls/select-mode/grid-gap-control-component.tsx b/editor/src/components/canvas/controls/select-mode/grid-gap-control-component.tsx index 9a754866e4ee..a092f97df37b 100644 --- a/editor/src/components/canvas/controls/select-mode/grid-gap-control-component.tsx +++ b/editor/src/components/canvas/controls/select-mode/grid-gap-control-component.tsx @@ -2,15 +2,13 @@ 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 { @@ -18,9 +16,6 @@ import { 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 @@ -199,6 +195,8 @@ const GridPaddingOutlineForDimension = (props: { beingDragged={beingDragged} onMouseOver={onMouseOver} elementHovered={elementHovered} + gridJustifyContent={grid.justifyContent} + gridAlignContent={grid.alignContent} /> ) })} @@ -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' ? 'center' : gridAlignContent ?? 'center', + justifyContent: axis === 'row' ? gridJustifyContent ?? 'center' : 'center', placeItems: 'center', gap: gap ?? 0, From 2c7ca4c16098ebeb1ef53c5a1cdf783a73c15563 Mon Sep 17 00:00:00 2001 From: Balint Gabor <127662+gbalint@users.noreply.github.com> Date: Fri, 18 Oct 2024 13:51:28 +0200 Subject: [PATCH 2/3] Rename --- .../controls/select-mode/grid-gap-control-component.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/editor/src/components/canvas/controls/select-mode/grid-gap-control-component.tsx b/editor/src/components/canvas/controls/select-mode/grid-gap-control-component.tsx index a092f97df37b..6859b2d68e04 100644 --- a/editor/src/components/canvas/controls/select-mode/grid-gap-control-component.tsx +++ b/editor/src/components/canvas/controls/select-mode/grid-gap-control-component.tsx @@ -180,7 +180,7 @@ const GridPaddingOutlineForDimension = (props: { {createArrayWithLength(length, (index) => { const hide = index === 0 || index === length - 1 || index % 2 === 0 return ( - Date: Fri, 18 Oct 2024 14:01:20 +0200 Subject: [PATCH 3/3] Center should not be default --- .../controls/select-mode/grid-gap-control-component.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/editor/src/components/canvas/controls/select-mode/grid-gap-control-component.tsx b/editor/src/components/canvas/controls/select-mode/grid-gap-control-component.tsx index 6859b2d68e04..a212925ccd3c 100644 --- a/editor/src/components/canvas/controls/select-mode/grid-gap-control-component.tsx +++ b/editor/src/components/canvas/controls/select-mode/grid-gap-control-component.tsx @@ -296,8 +296,8 @@ const GridRowOrColumnHighlight = (props: { boxShadow: `inset 0 0 0 ${lineWidth}px ${outlineColor}`, opacity: hide ? 0 : 1, - alignContent: axis === 'row' ? 'center' : gridAlignContent ?? 'center', - justifyContent: axis === 'row' ? gridJustifyContent ?? 'center' : 'center', + alignContent: axis === 'row' ? undefined : gridAlignContent ?? undefined, + justifyContent: axis === 'row' ? gridJustifyContent ?? undefined : undefined, placeItems: 'center', gap: gap ?? 0,