Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Correctly position grid resize controls. #6044

Merged
merged 4 commits into from
Jul 9, 2024
Merged

Correctly position grid resize controls. #6044

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
50fe25c
fix(canvas) Correctly position grid resize controls.
seanparsons Jul 8, 2024
fbb8d9f
fix(canvas) Correctly handled scaling of the grid resize components.
seanparsons Jul 8, 2024
dc64c43
fix(canvas) Fixed the tests and their handling of the grid resize han…
seanparsons Jul 8, 2024
e588b3c
refactor(canvas) Created an inner component for the grid resize contr…
seanparsons Jul 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
294 changes: 159 additions & 135 deletions editor/src/components/canvas/controls/grid-controls.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import {
isGridAutoOrTemplateDimensions,
type GridAutoOrTemplateBase,
} from '../../../core/shared/element-template'
import type { CanvasPoint, CanvasRectangle } from '../../../core/shared/math-utils'
import type { CanvasPoint, CanvasRectangle, CanvasVector } from '../../../core/shared/math-utils'
import {
canvasPoint,
distance,
Expand Down Expand Up @@ -47,6 +47,8 @@ import { windowToCanvasCoordinates } from '../dom-lookup'
import { CanvasOffsetWrapper } from './canvas-offset-wrapper'
import { useColorTheme } from '../../../uuiui'
import { gridCellTargetId } from '../canvas-strategies/strategies/grid-helpers'
import type { EditorDispatch } from '../../../components/editor/action-types'
import { CanvasLabel } from './select-mode/controls-common'

export const GridCellTestId = (elementPath: ElementPath) => `grid-cell-${EP.toString(elementPath)}`

Expand Down Expand Up @@ -107,6 +109,144 @@ function getLabelForAxis(

const SHADOW_SNAP_ANIMATION = 'shadow-snap'

const GridResizingContainerSize = 100

export interface GridResizingControlProps {
dimension: GridCSSNumber
dimensionIndex: number
axis: 'row' | 'column'
containingFrame: CanvasRectangle
workingPrefix: number
fromPropsAxisValues: GridAutoOrTemplateBase | null
}

export const GridResizingControl = React.memo((props: GridResizingControlProps) => {
const canvasOffset = useEditorState(
Substores.canvasOffset,
(store) => store.editor.canvas.roundedCanvasOffset,
'GridResizingControl canvasOffset',
)
const scale = useEditorState(
Substores.canvas,
(store) => store.editor.canvas.scale,
'GridResizingControl scale',
)
const dispatch = useDispatch()
const colorTheme = useColorTheme()

const mouseDownHandler = React.useCallback(
(event: React.MouseEvent): void => {
const start = windowToCanvasCoordinates(
scale,
canvasOffset,
windowPoint({ x: event.nativeEvent.x, y: event.nativeEvent.y }),
)

dispatch([
CanvasActions.createInteractionSession(
createInteractionViaMouse(
start.canvasPositionRounded,
Modifier.modifiersForEvent(event),
gridAxisHandle(props.axis, props.dimensionIndex),
'zero-drag-not-permitted',
),
),
])
event.stopPropagation()
event.preventDefault()
},
[canvasOffset, dispatch, props.axis, props.dimensionIndex, scale],
)

const labelId = `grid-${props.axis}-handle-${props.dimensionIndex}`
const containerId = `${labelId}-container`

return (
<div
key={containerId}
data-testid={containerId}
style={{
position: 'absolute',
left:
props.axis === 'column' ? props.workingPrefix - GridResizingContainerSize / 2 : undefined,
top:
props.axis === 'row'
? props.workingPrefix - GridResizingContainerSize / 2
: props.containingFrame.y - 30 / scale,
right: props.axis === 'row' ? 10 / scale - props.containingFrame.x : undefined,
width: props.axis === 'column' ? GridResizingContainerSize : `max-content`,
height: props.axis === 'row' ? GridResizingContainerSize : `max-content`,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
>
<CanvasLabel
testId={labelId}
value={getLabelForAxis(props.dimension, props.dimensionIndex, props.fromPropsAxisValues)}
scale={scale}
color={colorTheme.brandNeonPink.value}
textColor={colorTheme.white.value}
onMouseDown={mouseDownHandler}
/>
</div>
)
})
GridResizingControl.displayName = 'GridResizingControl'

export interface GridResizingProps {
axisValues: GridAutoOrTemplateBase | null
fromPropsAxisValues: GridAutoOrTemplateBase | null
containingFrame: CanvasRectangle
axis: 'row' | 'column'
gap: number | null
}

export const GridResizing = React.memo((props: GridResizingProps) => {
if (props.axisValues == null) {
return null
} else {
switch (props.axisValues.type) {
case 'DIMENSIONS':
let workingPrefix: number =
props.axis === 'column' ? props.containingFrame.x : props.containingFrame.y
return (
<>
{props.axisValues.dimensions.flatMap((dimension, dimensionIndex) => {
// Assumes pixels currently.
workingPrefix += dimension.value
if (dimensionIndex === 0) {
// Shift by half the gap initially...
workingPrefix += (props.gap ?? 0) / 2
} else {
// ...Then by the full gap, as it would be half from the prior entry
// and half from the current one.
workingPrefix += props.gap ?? 0
}

return (
<GridResizingControl
dimensionIndex={dimensionIndex}
dimension={dimension}
fromPropsAxisValues={props.fromPropsAxisValues}
axis={props.axis}
containingFrame={props.containingFrame}
workingPrefix={workingPrefix}
/>
)
})}
</>
)
case 'FALLBACK':
return null
default:
assertNever(props.axisValues)
return null
}
}
})
GridResizing.displayName = 'GridResizing'

export const GridControls = controlForStrategyMemoized(() => {
const dispatch = useDispatch()
const controls = useAnimationControls()
Expand Down Expand Up @@ -575,142 +715,26 @@ export const GridControls = controlForStrategyMemoized(() => {
/>
) : null}
{grids.flatMap((grid) => {
if (grid.gridTemplateColumns == null) {
return []
} else {
switch (grid.gridTemplateColumns.type) {
case 'DIMENSIONS':
let workingPrefix: number = grid.frame.x
return grid.gridTemplateColumns.dimensions.flatMap((dimension, dimensionIndex) => {
// Assumes pixels currently.
workingPrefix += dimension.value
if (dimensionIndex !== 0) {
workingPrefix += grid.gap ?? 0
}
function mouseDownHandler(event: React.MouseEvent): void {
const start = windowToCanvasCoordinates(
scaleRef.current,
canvasOffsetRef.current,
windowPoint({ x: event.nativeEvent.x, y: event.nativeEvent.y }),
)

dispatch([
CanvasActions.createInteractionSession(
createInteractionViaMouse(
start.canvasPositionRounded,
Modifier.modifiersForEvent(event),
gridAxisHandle('column', dimensionIndex),
'zero-drag-not-permitted',
),
),
])
event.stopPropagation()
event.preventDefault()
}

const id = `grid-column-handle-${dimensionIndex}`

return (
<div
key={id}
data-testid={id}
style={{
position: 'absolute',
left: workingPrefix - 15,
top: grid.frame.y - 30,
width: 40,
height: '20px',
borderRadius: 5,
backgroundColor: colorTheme.brandNeonPink.value,
color: colorTheme.white.value,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
}}
onMouseDown={mouseDownHandler}
>
{getLabelForAxis(
dimension,
dimensionIndex,
grid.gridTemplateColumnsFromProps,
)}
</div>
)
})
case 'FALLBACK':
return []
default:
assertNever(grid.gridTemplateColumns)
return []
}
}
return (
<GridResizing
axisValues={grid.gridTemplateColumns}
fromPropsAxisValues={grid.gridTemplateColumnsFromProps}
containingFrame={grid.frame}
axis={'column'}
gap={grid.gap}
/>
)
})}
{grids.flatMap((grid) => {
if (grid.gridTemplateRows == null) {
return []
} else {
switch (grid.gridTemplateRows.type) {
case 'DIMENSIONS':
let workingPrefix: number = grid.frame.y
return grid.gridTemplateRows.dimensions.flatMap((dimension, dimensionIndex) => {
// Assumes pixels currently.
workingPrefix += dimension.value
if (dimensionIndex !== 0) {
workingPrefix += grid.gap ?? 0
}
function mouseDownHandler(event: React.MouseEvent): void {
const start = windowToCanvasCoordinates(
scaleRef.current,
canvasOffsetRef.current,
windowPoint({ x: event.nativeEvent.x, y: event.nativeEvent.y }),
)

dispatch([
CanvasActions.createInteractionSession(
createInteractionViaMouse(
start.canvasPositionRounded,
Modifier.modifiersForEvent(event),
gridAxisHandle('row', dimensionIndex),
'zero-drag-not-permitted',
),
),
])
event.stopPropagation()
event.preventDefault()
}

const id = `grid-row-handle-${dimensionIndex}`

return (
<div
key={id}
data-testid={id}
style={{
position: 'absolute',
left: grid.frame.x - 50,
top: workingPrefix - 5,
width: 40,
height: '20px',
borderRadius: 5,
backgroundColor: colorTheme.brandNeonPink.value,
color: colorTheme.white.value,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
}}
onMouseDown={mouseDownHandler}
>
{getLabelForAxis(dimension, dimensionIndex, grid.gridTemplateRowsFromProps)}
</div>
)
})
case 'FALLBACK':
return []
default:
assertNever(grid.gridTemplateRows)
return []
}
}
return (
<GridResizing
axisValues={grid.gridTemplateRows}
fromPropsAxisValues={grid.gridTemplateRowsFromProps}
containingFrame={grid.frame}
axis={'row'}
gap={grid.gap}
/>
)
})}
</CanvasOffsetWrapper>
</React.Fragment>
Expand Down
4 changes: 4 additions & 0 deletions editor/src/components/canvas/controls/select-mode/controls-common.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,6 +103,8 @@ interface CanvasLabelProps {
color: string
textColor: string
value: string | number
onMouseDown?: React.MouseEventHandler
testId?: string
}

export const CanvasLabel = React.memo((props: CanvasLabelProps): JSX.Element => {
Expand All @@ -113,6 +115,7 @@ export const CanvasLabel = React.memo((props: CanvasLabelProps): JSX.Element =>
const borderRadius = BorderRadius / scale
return (
<div
data-testid={props.testId}
style={{
display: 'flex',
alignItems: 'center',
Expand All @@ -126,6 +129,7 @@ export const CanvasLabel = React.memo((props: CanvasLabelProps): JSX.Element =>
borderRadius: borderRadius,
height: ExplicitHeightHacked / scale,
}}
onMouseDown={props.onMouseDown}
>
{value}
</div>
Expand Down
Loading