From ae6856e3fba30f451c293b9cce1daabb41e260b5 Mon Sep 17 00:00:00 2001 From: Balazs Bajorics <2226774+balazsbajorics@users.noreply.github.com> Date: Fri, 18 Oct 2024 13:49:29 +0200 Subject: [PATCH 1/5] splitting GridResizingControl into two controls --- .../canvas/controls/grid-controls.tsx | 201 ++++++++++++------ 1 file changed, 134 insertions(+), 67 deletions(-) diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx index c0d0b99be34f..ad0e88f5bbec 100644 --- a/editor/src/components/canvas/controls/grid-controls.tsx +++ b/editor/src/components/canvas/controls/grid-controls.tsx @@ -128,7 +128,7 @@ interface GridResizingControlProps { stripedAreaLength: number | null } -const GridResizingControl = React.memo((props: GridResizingControlProps) => { +const GridTrackSizeLabelForDimension = React.memo((props: GridResizingControlProps) => { const { setResizingIndex } = props const canvasOffset = useEditorState( @@ -247,6 +247,46 @@ const GridResizingControl = React.memo((props: GridResizingControlProps) => { > {getLabelForAxis(props.dimension, props.dimensionIndex, props.fromPropsAxisValues)} + + ) +}) +GridTrackSizeLabelForDimension.displayName = 'GridTrackSizeLabelForDimension' + +const GridResizingStripedIndicator = React.memo((props: GridResizingControlProps) => { + const scale = useEditorState( + Substores.canvas, + (store) => store.editor.canvas.scale, + 'GridResizingControl scale', + ) + const colorTheme = useColorTheme() + + 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]) + + const stripedAreaSkew = React.useMemo( + () => GRID_RESIZE_HANDLE_CONTAINER_SIZE / scale + props.padding, + [scale, props.padding], + ) + + return ( +
{when( props.resizing !== 'not-resizing',
{
) }) -GridResizingControl.displayName = 'GridResizingControl' +GridResizingStripedIndicator.displayName = 'GridResizingStripedIndicator' interface GridResizingProps { axisValues: GridAutoOrTemplateBase | null @@ -378,72 +418,99 @@ const GridResizing = React.memo((props: GridResizingProps) => { const size = GRID_RESIZE_HANDLE_CONTAINER_SIZE / canvasScale const dimensions = props.axisValues.dimensions + const helperGridStyle: React.CSSProperties = { + 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, + height: props.axis === 'row' ? props.containingFrame.height : size, + display: 'grid', + gridTemplateColumns: + props.axis === 'column' + ? dimensions.map((dim) => printGridCSSNumber(dim)).join(' ') + : undefined, + gridTemplateRows: + props.axis === 'row' + ? dimensions.map((dim) => printGridCSSNumber(dim)).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, + 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, + } + return ( -
printGridCSSNumber(dim)).join(' ') - : undefined, - gridTemplateRows: - props.axis === 'row' - ? dimensions.map((dim) => printGridCSSNumber(dim)).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, - 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) => { - return ( - - ) - })} -
+ +
+ {dimensions.flatMap((dimension, dimensionIndex) => { + return ( + + ) + })} +
+
+ {dimensions.flatMap((dimension, dimensionIndex) => { + return ( + + ) + })} +
+ ) case 'FALLBACK': return null From 55e01ce6399b0aa08210b869a411023fb0938585 Mon Sep 17 00:00:00 2001 From: Balazs Bajorics <2226774+balazsbajorics@users.noreply.github.com> Date: Fri, 18 Oct 2024 14:03:40 +0200 Subject: [PATCH 2/5] getting rid of GRID_RESIZE_HANDLE_CONTAINER_SIZE --- .../canvas/controls/grid-controls.tsx | 87 +++++-------------- 1 file changed, 21 insertions(+), 66 deletions(-) diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx index ad0e88f5bbec..b3ae3854b1b2 100644 --- a/editor/src/components/canvas/controls/grid-controls.tsx +++ b/editor/src/components/canvas/controls/grid-controls.tsx @@ -74,7 +74,11 @@ import { windowToCanvasCoordinates } from '../dom-lookup' import type { Axis } from '../gap-utils' import { useCanvasAnimation } from '../ui-jsx-canvas-renderer/animation-context' import { CanvasOffsetWrapper } from './canvas-offset-wrapper' -import type { GridControlsProps, GridData } from './grid-controls-for-strategies' +import type { + GridControlsProps, + GridData, + GridMeasurementHelperData, +} from './grid-controls-for-strategies' import { edgePositionToGridResizeEdge, GridCellTestId, @@ -112,7 +116,6 @@ function getLabelForAxis( return gridCSSNumberToLabel(defaultEither(fromDOM, fromPropsAtIndex)) } -const GRID_RESIZE_HANDLE_CONTAINER_SIZE = 30 // px const GRID_RESIZE_HANDLE_SIZE = 15 // px interface GridResizingControlProps { @@ -200,17 +203,6 @@ const GridTrackSizeLabelForDimension = React.memo((props: GridResizingControlPro 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]) - - const stripedAreaSkew = React.useMemo( - () => GRID_RESIZE_HANDLE_CONTAINER_SIZE / scale + props.padding, - [scale, props.padding], - ) - return (
@@ -263,17 +255,6 @@ const GridResizingStripedIndicator = 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]) - - const stripedAreaSkew = React.useMemo( - () => GRID_RESIZE_HANDLE_CONTAINER_SIZE / scale + props.padding, - [scale, props.padding], - ) - return (
@@ -291,20 +272,9 @@ const GridResizingStripedIndicator = React.memo((props: GridResizingControlProps props.resizing !== 'not-resizing',
{ } switch (props.axisValues.type) { case 'DIMENSIONS': - const size = GRID_RESIZE_HANDLE_CONTAINER_SIZE / canvasScale const dimensions = props.axisValues.dimensions + const helperGridBaseStyle: React.CSSProperties = getGridHelperStyleMatchingTargetGrid( + props.targetGrid, + ) + const helperGridStyle: React.CSSProperties = { - 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, - height: props.axis === 'row' ? props.containingFrame.height : size, - display: 'grid', + ...helperGridBaseStyle, + gridTemplateRows: props.axis === 'row' ? helperGridBaseStyle.gridTemplateRows : '1fr', gridTemplateColumns: - props.axis === 'column' - ? dimensions.map((dim) => printGridCSSNumber(dim)).join(' ') - : undefined, - gridTemplateRows: - props.axis === 'row' - ? dimensions.map((dim) => printGridCSSNumber(dim)).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, - 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, + props.axis === 'column' ? helperGridBaseStyle.gridTemplateColumns : '1fr', } return ( @@ -592,6 +545,7 @@ export const GridRowColumnResizingControlsComponent = ({ return ( Date: Fri, 18 Oct 2024 14:07:27 +0200 Subject: [PATCH 3/5] positioning the labels well --- editor/src/components/canvas/controls/grid-controls.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx index b3ae3854b1b2..deb5fd6e9cbe 100644 --- a/editor/src/components/canvas/controls/grid-controls.tsx +++ b/editor/src/components/canvas/controls/grid-controls.tsx @@ -219,8 +219,11 @@ const GridTrackSizeLabelForDimension = React.memo((props: GridResizingControlPro
Date: Fri, 18 Oct 2024 14:18:59 +0200 Subject: [PATCH 4/5] subdued grid colors when not hovered --- .../components/canvas/controls/grid-controls.tsx | 16 +++++++++++++++- editor/src/uuiui/styles/theme/dark.ts | 1 + editor/src/uuiui/styles/theme/light.ts | 1 + 3 files changed, 17 insertions(+), 1 deletion(-) diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx index deb5fd6e9cbe..084bc5d1f0db 100644 --- a/editor/src/components/canvas/controls/grid-controls.tsx +++ b/editor/src/components/canvas/controls/grid-controls.tsx @@ -203,6 +203,20 @@ const GridTrackSizeLabelForDimension = React.memo((props: GridResizingControlPro const labelId = `grid-${props.axis}-handle-${props.dimensionIndex}` const containerId = `${labelId}-container` + const cssProp = React.useMemo( + () => ({ + backgroundColor: + props.resizing === 'resize-target' + ? colorTheme.primary.value + : colorTheme.primarySubdued.value, + '&:hover': { + zIndex: 1, + backgroundColor: colorTheme.primary.value, + }, + }), + [props.resizing, colorTheme], + ) + return (
{getLabelForAxis(props.dimension, props.dimensionIndex, props.fromPropsAxisValues)}
diff --git a/editor/src/uuiui/styles/theme/dark.ts b/editor/src/uuiui/styles/theme/dark.ts index 7e76faef77b3..a20d92defc3b 100644 --- a/editor/src/uuiui/styles/theme/dark.ts +++ b/editor/src/uuiui/styles/theme/dark.ts @@ -3,6 +3,7 @@ import type { light } from './light' const darkBase = { primary: createUtopiColor('oklch(59% 0.25 254)'), + primarySubdued: createUtopiColor('oklch(43% 0.15 254)'), primary10solid: createUtopiColor('oklch(0.98 0.01 253.75)'), primary10: createUtopiColor('oklch(59% 0.25 254 / 10%)'), primary25: createUtopiColor('oklch(59% 0.25 254 / 25%)'), diff --git a/editor/src/uuiui/styles/theme/light.ts b/editor/src/uuiui/styles/theme/light.ts index ad00d11d5e84..6a16fac353c8 100644 --- a/editor/src/uuiui/styles/theme/light.ts +++ b/editor/src/uuiui/styles/theme/light.ts @@ -3,6 +3,7 @@ import type { dark } from './dark' const lightBase = { primary: createUtopiColor('oklch(59% 0.25 254)'), + primarySubdued: createUtopiColor('oklch(75% 0.15 254)'), primary10solid: createUtopiColor('oklch(0.98 0.01 253.75)'), primary10: createUtopiColor('oklch(59% 0.25 254 / 10%)'), primary25: createUtopiColor('oklch(59% 0.25 254 / 25%)'), From 3e57c79e0b639bd1c7c37892f3a9efe0112442f1 Mon Sep 17 00:00:00 2001 From: Balazs Bajorics <2226774+balazsbajorics@users.noreply.github.com> Date: Fri, 18 Oct 2024 14:25:25 +0200 Subject: [PATCH 5/5] Update grid-controls.tsx --- editor/src/components/canvas/controls/grid-controls.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx index 084bc5d1f0db..756944ad8a37 100644 --- a/editor/src/components/canvas/controls/grid-controls.tsx +++ b/editor/src/components/canvas/controls/grid-controls.tsx @@ -131,7 +131,7 @@ interface GridResizingControlProps { stripedAreaLength: number | null } -const GridTrackSizeLabelForDimension = React.memo((props: GridResizingControlProps) => { +const GridTrackSizeLabel = React.memo((props: GridResizingControlProps) => { const { setResizingIndex } = props const canvasOffset = useEditorState( @@ -259,7 +259,7 @@ const GridTrackSizeLabelForDimension = React.memo((props: GridResizingControlPro
) }) -GridTrackSizeLabelForDimension.displayName = 'GridTrackSizeLabelForDimension' +GridTrackSizeLabel.displayName = 'GridTrackSizeLabel' const GridResizingStripedIndicator = React.memo((props: GridResizingControlProps) => { const scale = useEditorState( @@ -452,7 +452,7 @@ const GridResizing = React.memo((props: GridResizingProps) => {
{dimensions.flatMap((dimension, dimensionIndex) => { return ( -