From 132c7d5b1d8129c74149c6354e6a7ab9e05dedb3 Mon Sep 17 00:00:00 2001 From: Balazs Bajorics <2226774+balazsbajorics@users.noreply.github.com> Date: Fri, 18 Oct 2024 14:57:01 +0200 Subject: [PATCH] Fix Grid Track Labels and Resize Indicators (#6566) # **Problem:** The grid labels and the grid resize indicators are in a state of being fucked: ![image](https://github.com/user-attachments/assets/e68f433a-93e5-4f3a-92c7-a53764357651) ![image](https://github.com/user-attachments/assets/d2347204-9ae4-48de-bc5f-31592f81e751) ![image](https://github.com/user-attachments/assets/c0105ee6-793e-48d1-b68b-b2f9eb6f64e2) # **Goal:** Fix the various layout issues, and make the labels subdued until hovered. The hovered label should z-index over its siblings: ![image](https://github.com/user-attachments/assets/52b0f170-6d6b-4fed-8290-1eb6f9a022c8) # **Fix:** image ![image](https://github.com/user-attachments/assets/9cb73a40-b205-45c8-a43f-2f1aae5ff6bf) **Commit Details:** - Split `GridResizingControl` into `GridTrackSizeLabelForDimension` and `GridResizingStripedIndicator` - Render _two_ helper grids, one for the label and one for the sizing indicator. This avoids future css intermingling problems, going forward bug fixing one should not meaningfully affect the other. - The helper grids use the blessed `getGridHelperStyleMatchingTargetGrid` style instead of manually picking an assortment of relevant grid properties. This simplifies our life 97% **Note:** The code could be further simplified, as this is now a copy-paste job. I tried to remove the obviously unnecessary things, but there's still a little too much div wrappers going on. **Manual Tests:** I hereby swear that: - [ ] I opened a hydrogen project and it loaded - [ ] I could navigate to various routes in Play mode --- .../canvas/controls/grid-controls.tsx | 229 ++++++++++-------- editor/src/uuiui/styles/theme/dark.ts | 1 + editor/src/uuiui/styles/theme/light.ts | 1 + 3 files changed, 136 insertions(+), 95 deletions(-) diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx index c0d0b99be34f..756944ad8a37 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 { @@ -128,7 +131,7 @@ interface GridResizingControlProps { stripedAreaLength: number | null } -const GridResizingControl = React.memo((props: GridResizingControlProps) => { +const GridTrackSizeLabel = React.memo((props: GridResizingControlProps) => { const { setResizingIndex } = props const canvasOffset = useEditorState( @@ -200,15 +203,18 @@ const GridResizingControl = 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], + 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 ( @@ -219,20 +225,22 @@ const GridResizingControl = React.memo((props: GridResizingControlProps) => { display: 'flex', alignItems: props.axis === 'column' ? 'flex-start' : 'center', justifyContent: props.axis === 'column' ? 'center' : 'flex-start', - height: props.axis === 'column' && props.resizing !== 'not-resizing' ? shadowSize : '100%', - width: props.axis === 'row' && props.resizing !== 'not-resizing' ? shadowSize : '100%', + height: '100%', + width: '100%', position: 'relative', }} >
{ }} onMouseDown={mouseDownHandler} onMouseMove={onMouseMove} + css={cssProp} > {getLabelForAxis(props.dimension, props.dimensionIndex, props.fromPropsAxisValues)}
+ + ) +}) +GridTrackSizeLabel.displayName = 'GridTrackSizeLabel' + +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` + + return ( +
{when( props.resizing !== 'not-resizing',
{
) }) -GridResizingControl.displayName = 'GridResizingControl' +GridResizingStripedIndicator.displayName = 'GridResizingStripedIndicator' interface GridResizingProps { + targetGrid: GridMeasurementHelperData axisValues: GridAutoOrTemplateBase | null fromPropsAxisValues: GridAutoOrTemplateBase | null stripedAreaLength: number | null @@ -375,75 +403,84 @@ const GridResizing = React.memo((props: GridResizingProps) => { } 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 = { + ...helperGridBaseStyle, + gridTemplateRows: props.axis === 'row' ? helperGridBaseStyle.gridTemplateRows : '1fr', + gridTemplateColumns: + props.axis === 'column' ? helperGridBaseStyle.gridTemplateColumns : '1fr', + } + 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 @@ -525,6 +562,7 @@ export const GridRowColumnResizingControlsComponent = ({ return (