From 4ffa6e720b1abf1e9c37487013fefaaca310d21b Mon Sep 17 00:00:00 2001 From: Federico Ruggi <1081051+ruggi@users.noreply.github.com> Date: Tue, 3 Sep 2024 15:22:53 +0200 Subject: [PATCH 1/6] wip --- .../canvas-strategies/canvas-strategies.tsx | 2 + .../strategies/grid-helpers.ts | 5 +- .../grid-rearrange-keyboard-strategy.ts | 198 ++++++++++++++++++ 3 files changed, 203 insertions(+), 2 deletions(-) create mode 100644 editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-keyboard-strategy.ts diff --git a/editor/src/components/canvas/canvas-strategies/canvas-strategies.tsx b/editor/src/components/canvas/canvas-strategies/canvas-strategies.tsx index e6113afb22e1..e3c443c0446c 100644 --- a/editor/src/components/canvas/canvas-strategies/canvas-strategies.tsx +++ b/editor/src/components/canvas/canvas-strategies/canvas-strategies.tsx @@ -80,6 +80,7 @@ import { wrapInContainerCommand } from '../commands/wrap-in-container-command' import type { ElementPath } from 'utopia-shared/src/types' import { reparentSubjectsForInteractionTarget } from './strategies/reparent-helpers/reparent-strategy-helpers' import { getReparentTargetUnified } from './strategies/reparent-helpers/reparent-strategy-parent-lookup' +import { gridRearrangeKeyboardStrategy } from './strategies/grid-rearrange-keyboard-strategy' export type CanvasStrategyFactory = ( canvasState: InteractionCanvasState, @@ -110,6 +111,7 @@ const moveOrReorderStrategies: MetaCanvasStrategy = ( gridRearrangeMoveStrategy, rearrangeGridSwapStrategy, gridRearrangeMoveDuplicateStrategy, + gridRearrangeKeyboardStrategy, ], ) } diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts index a6360bbc3962..2ad7009608eb 100644 --- a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts +++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts @@ -49,7 +49,7 @@ function isGridCellTargetId(id: string): boolean { return id.startsWith(gridCellTargetIdPrefix) } -function getGridCellAtPoint( +export function getGridCellAtPoint( windowPoint: WindowPoint, duplicating: boolean, ): { id: string; coordinates: GridCellCoordinates; cellWindowRectangle: WindowRectangle } | null { @@ -87,6 +87,7 @@ function getGridCellAtPoint( const { element, cellWindowRectangle } = cellUnderMouse const row = element.getAttribute('data-grid-row') const column = element.getAttribute('data-grid-column') + return { id: element.id, cellWindowRectangle: cellWindowRectangle, @@ -328,7 +329,7 @@ export function getTargetCell( } } -function getElementGridProperties( +export function getElementGridProperties( element: ElementInstanceMetadata, cellUnderMouse: { row: number; column: number }, ): { diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-keyboard-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-keyboard-strategy.ts new file mode 100644 index 000000000000..ef720728b48e --- /dev/null +++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-keyboard-strategy.ts @@ -0,0 +1,198 @@ +import * as EP from '../../../../core/shared/element-path' +import { MetadataUtils } from '../../../../core/model/element-metadata-utils' +import { emptyModifiers, Modifier } from '../../../../utils/modifiers' +import type { CanvasStrategy, InteractionCanvasState } from '../canvas-strategy-types' +import { + emptyStrategyApplicationResult, + getTargetPathsFromInteractionTarget, + strategyApplicationResult, +} from '../canvas-strategy-types' +import type { InteractionSession } from '../interaction-state' +import { accumulatePresses } from './shared-keyboard-strategy-helpers' +import type { CanvasCommand } from '../../commands/commands' +import { getElementGridProperties, getGridCellAtPoint, setGridPropsCommands } from './grid-helpers' +import { + gridPositionValue, + type GridElementProperties, +} from '../../../../core/shared/element-template' +import { isInfinityRectangle, offsetPoint, windowPoint } from '../../../../core/shared/math-utils' +import { canvasPointToWindowPoint } from '../../dom-lookup' +import { GridControls, GridControlsKey } from '../../controls/grid-controls' + +type ArrowKey = 'left' | 'right' | 'up' | 'down' + +export function gridRearrangeKeyboardStrategy( + canvasState: InteractionCanvasState, + interactionSession: InteractionSession | null, +): CanvasStrategy | null { + if (interactionSession?.activeControl.type !== 'KEYBOARD_CATCHER_CONTROL') { + return null + } + + const selectedElements = getTargetPathsFromInteractionTarget(canvasState.interactionTarget) + if (selectedElements.length !== 1) { + return null + } + + const target = selectedElements[0] + + if (!MetadataUtils.isGridCell(canvasState.startingMetadata, target)) { + return null + } + + const cell = MetadataUtils.findElementByElementPath(canvasState.startingMetadata, target) + if (cell == null) { + return null + } + + const parentGridPath = EP.parentPath(target) + + const grid = MetadataUtils.findElementByElementPath(canvasState.startingMetadata, parentGridPath) + if (grid == null) { + return null + } + + const cellFrame = cell.globalFrame + if (cellFrame == null || isInfinityRectangle(cellFrame)) { + return null + } + const canvasFrameWidth = cellFrame.width * canvasState.scale + const canvasFrameHeight = cellFrame.height * canvasState.scale + + const cellOriginPoint = offsetPoint( + canvasPointToWindowPoint(cellFrame, canvasState.scale, canvasState.canvasOffset), + windowPoint({ x: 5, y: 5 }), + ) + const cellOrigin = getGridCellAtPoint(cellOriginPoint, true) + if (cellOrigin == null) { + return null + } + + const cellEndPoint = offsetPoint( + cellOriginPoint, + windowPoint({ + x: canvasFrameWidth - 5, + y: canvasFrameHeight - 5, + }), + ) + const cellEnd = getGridCellAtPoint(cellEndPoint, true) + if (cellEnd == null) { + return null + } + + const cellOriginCoords = cellOrigin.coordinates + const cellEndCoords = cellEnd.coordinates + + const cellWidth = cellEndCoords.column - cellOriginCoords.column + 1 + const cellHeight = cellEndCoords.row - cellOriginCoords.row + 1 + + const gridTemplate = grid.specialSizeMeasurements.containerGridProperties + + return { + id: 'GRID_KEYBOARD_REARRANGE', + name: 'Grid rearrange', + descriptiveLabel: 'Grid rearrange', + icon: { + category: 'modalities', + type: 'reorder-large', + }, + controlsToRender: [ + { + control: GridControls, + props: { targets: [parentGridPath] }, + key: GridControlsKey(parentGridPath), + show: 'always-visible', + priority: 'bottom', + }, + ], + fitness: fitness(interactionSession), + apply: () => { + if (interactionSession == null || interactionSession.interactionData.type !== 'KEYBOARD') { + return emptyStrategyApplicationResult + } + if ( + gridTemplate.gridTemplateColumns?.type !== 'DIMENSIONS' || + gridTemplate.gridTemplateRows?.type !== 'DIMENSIONS' + ) { + return emptyStrategyApplicationResult + } + + const interactionData = interactionSession.interactionData + + let colDelta = interactionData.keyStates.reduce((tot, cur) => { + let presses = 0 + cur.keysPressed.forEach((key) => { + presses += key === 'left' ? -1 : key === 'right' ? 1 : 0 + }) + return tot + presses + }, 0) + let rowDelta = interactionData.keyStates.reduce((tot, cur) => { + let presses = 0 + cur.keysPressed.forEach((key) => { + presses += key === 'up' ? -1 : key === 'down' ? 1 : 0 + }) + return tot + presses + }, 0) + + let gridProps: Partial = { + ...cell.specialSizeMeasurements.elementGridProperties, + } + + function getNewBounds(start: number, cellsCount: number, size: number) { + const limit = cellsCount - size + 1 + + let newFrom = start + let newTo = start + size + + if (newFrom > limit) { + newTo = limit + 2 // +2, because +1 for the grid and +1 for its limit + newFrom = newTo - size + } + if (newFrom < 1) { + newFrom = 1 + newTo = newFrom + size + } + + return { from: newFrom, to: newTo } + } + + if (colDelta !== 0) { + const { from, to } = getNewBounds( + cellOriginCoords.column + colDelta, + gridTemplate.gridTemplateColumns.dimensions.length, + cellWidth, + ) + gridProps.gridColumnStart = gridPositionValue(from) + gridProps.gridColumnEnd = gridPositionValue(to) + } + + if (rowDelta !== 0) { + const { from, to } = getNewBounds( + cellOriginCoords.row + rowDelta, + gridTemplate.gridTemplateRows.dimensions.length, + cellHeight, + ) + gridProps.gridRowStart = gridPositionValue(from) + gridProps.gridRowEnd = gridPositionValue(to) + } + + return strategyApplicationResult(setGridPropsCommands(target, gridTemplate, gridProps)) + }, + } +} + +function fitness(interactionSession: InteractionSession | null): number { + if (interactionSession == null || interactionSession.interactionData.type !== 'KEYBOARD') { + return 0 + } + + const accumulatedPresses = accumulatePresses(interactionSession.interactionData.keyStates) + const matches = accumulatedPresses.some( + (accumulatedPress) => + Array.from(accumulatedPress.keysPressed).some( + (key) => key === 'left' || key === 'right' || key === 'up' || key === 'down', + ) && Modifier.equal(accumulatedPress.modifiers, emptyModifiers), + ) + + return matches ? 1 : 0 +} From e0d3e5cc7a72ea78a9e65abf6a9ecf84461a8c4f Mon Sep 17 00:00:00 2001 From: Federico Ruggi <1081051+ruggi@users.noreply.github.com> Date: Tue, 3 Sep 2024 15:37:34 +0200 Subject: [PATCH 2/6] update calculations --- .../grid-rearrange-keyboard-strategy.ts | 32 +++++++++---------- 1 file changed, 15 insertions(+), 17 deletions(-) diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-keyboard-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-keyboard-strategy.ts index ef720728b48e..c54a2812bc43 100644 --- a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-keyboard-strategy.ts +++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-keyboard-strategy.ts @@ -1,6 +1,13 @@ -import * as EP from '../../../../core/shared/element-path' import { MetadataUtils } from '../../../../core/model/element-metadata-utils' +import * as EP from '../../../../core/shared/element-path' +import { + gridPositionValue, + type GridElementProperties, +} from '../../../../core/shared/element-template' +import { isInfinityRectangle, offsetPoint, windowPoint } from '../../../../core/shared/math-utils' import { emptyModifiers, Modifier } from '../../../../utils/modifiers' +import { GridControls, GridControlsKey } from '../../controls/grid-controls' +import { canvasPointToWindowPoint } from '../../dom-lookup' import type { CanvasStrategy, InteractionCanvasState } from '../canvas-strategy-types' import { emptyStrategyApplicationResult, @@ -8,18 +15,8 @@ import { strategyApplicationResult, } from '../canvas-strategy-types' import type { InteractionSession } from '../interaction-state' +import { getGridCellAtPoint, setGridPropsCommands } from './grid-helpers' import { accumulatePresses } from './shared-keyboard-strategy-helpers' -import type { CanvasCommand } from '../../commands/commands' -import { getElementGridProperties, getGridCellAtPoint, setGridPropsCommands } from './grid-helpers' -import { - gridPositionValue, - type GridElementProperties, -} from '../../../../core/shared/element-template' -import { isInfinityRectangle, offsetPoint, windowPoint } from '../../../../core/shared/math-utils' -import { canvasPointToWindowPoint } from '../../dom-lookup' -import { GridControls, GridControlsKey } from '../../controls/grid-controls' - -type ArrowKey = 'left' | 'right' | 'up' | 'down' export function gridRearrangeKeyboardStrategy( canvasState: InteractionCanvasState, @@ -139,17 +136,18 @@ export function gridRearrangeKeyboardStrategy( } function getNewBounds(start: number, cellsCount: number, size: number) { - const limit = cellsCount - size + 1 + const lowerLimit = 1 + const upperLimit = cellsCount + 1 let newFrom = start let newTo = start + size - if (newFrom > limit) { - newTo = limit + 2 // +2, because +1 for the grid and +1 for its limit + if (newTo > upperLimit) { + newTo = upperLimit newFrom = newTo - size } - if (newFrom < 1) { - newFrom = 1 + if (newFrom < lowerLimit) { + newFrom = lowerLimit newTo = newFrom + size } From 4b5f85f90499b1f53df3324efb2da1463144f207 Mon Sep 17 00:00:00 2001 From: Federico Ruggi <1081051+ruggi@users.noreply.github.com> Date: Tue, 3 Sep 2024 15:47:28 +0200 Subject: [PATCH 3/6] helpers and refactor --- .../strategies/grid-helpers.ts | 56 +++++++- .../grid-rearrange-keyboard-strategy.ts | 135 ++++++++---------- 2 files changed, 112 insertions(+), 79 deletions(-) diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts index 2ad7009608eb..4d1d6079f857 100644 --- a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts +++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts @@ -10,8 +10,10 @@ import { } from '../../../../core/shared/element-template' import type { CanvasVector, WindowRectangle } from '../../../../core/shared/math-utils' import { + isInfinityRectangle, offsetPoint, rectContainsPoint, + windowPoint, windowRectangle, type WindowPoint, } from '../../../../core/shared/math-utils' @@ -50,7 +52,7 @@ function isGridCellTargetId(id: string): boolean { } export function getGridCellAtPoint( - windowPoint: WindowPoint, + point: WindowPoint, duplicating: boolean, ): { id: string; coordinates: GridCellCoordinates; cellWindowRectangle: WindowRectangle } | null { function maybeRecursivelyFindCellAtPoint( @@ -61,7 +63,7 @@ export function getGridCellAtPoint( if (isGridCellTargetId(element.id)) { const domRect = element.getBoundingClientRect() const windowRect = windowRectangle(domRect) - if (rectContainsPoint(windowRect, windowPoint)) { + if (rectContainsPoint(windowRect, point)) { return { element: element, cellWindowRectangle: windowRect } } } @@ -78,7 +80,7 @@ export function getGridCellAtPoint( } const cellUnderMouse = maybeRecursivelyFindCellAtPoint( - document.elementsFromPoint(windowPoint.x, windowPoint.y), + document.elementsFromPoint(point.x, point.y), ) if (cellUnderMouse == null) { return null @@ -401,3 +403,51 @@ function asMaybeNamedAreaOrValue( } return value } + +export function getGridCellBoundsFromCanvas( + cell: ElementInstanceMetadata, + canvasScale: number, + canvasOffset: CanvasVector, +) { + const cellFrame = cell.globalFrame + if (cellFrame == null || isInfinityRectangle(cellFrame)) { + return null + } + + const canvasFrameWidth = cellFrame.width * canvasScale + const canvasFrameHeight = cellFrame.height * canvasScale + + const cellOriginPoint = offsetPoint( + canvasPointToWindowPoint(cellFrame, canvasScale, canvasOffset), + windowPoint({ x: 5, y: 5 }), + ) + const cellOrigin = getGridCellAtPoint(cellOriginPoint, true) + if (cellOrigin == null) { + return null + } + + const cellEndPoint = offsetPoint( + cellOriginPoint, + windowPoint({ + x: canvasFrameWidth - 5, + y: canvasFrameHeight - 5, + }), + ) + const cellEnd = getGridCellAtPoint(cellEndPoint, true) + if (cellEnd == null) { + return null + } + + const cellOriginCoords = cellOrigin.coordinates + const cellEndCoords = cellEnd.coordinates + + const cellWidth = cellEndCoords.column - cellOriginCoords.column + 1 + const cellHeight = cellEndCoords.row - cellOriginCoords.row + 1 + + return { + originCell: cellOriginCoords, + endCell: cellEndCoords, + width: cellWidth, + height: cellHeight, + } +} diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-keyboard-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-keyboard-strategy.ts index c54a2812bc43..deb1670b2114 100644 --- a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-keyboard-strategy.ts +++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-keyboard-strategy.ts @@ -4,18 +4,17 @@ import { gridPositionValue, type GridElementProperties, } from '../../../../core/shared/element-template' -import { isInfinityRectangle, offsetPoint, windowPoint } from '../../../../core/shared/math-utils' +import { assertNever } from '../../../../core/shared/utils' import { emptyModifiers, Modifier } from '../../../../utils/modifiers' import { GridControls, GridControlsKey } from '../../controls/grid-controls' -import { canvasPointToWindowPoint } from '../../dom-lookup' import type { CanvasStrategy, InteractionCanvasState } from '../canvas-strategy-types' import { emptyStrategyApplicationResult, getTargetPathsFromInteractionTarget, strategyApplicationResult, } from '../canvas-strategy-types' -import type { InteractionSession } from '../interaction-state' -import { getGridCellAtPoint, setGridPropsCommands } from './grid-helpers' +import type { InteractionSession, KeyState } from '../interaction-state' +import { getGridCellBoundsFromCanvas, setGridPropsCommands } from './grid-helpers' import { accumulatePresses } from './shared-keyboard-strategy-helpers' export function gridRearrangeKeyboardStrategy( @@ -48,43 +47,13 @@ export function gridRearrangeKeyboardStrategy( if (grid == null) { return null } + const gridTemplate = grid.specialSizeMeasurements.containerGridProperties - const cellFrame = cell.globalFrame - if (cellFrame == null || isInfinityRectangle(cellFrame)) { - return null - } - const canvasFrameWidth = cellFrame.width * canvasState.scale - const canvasFrameHeight = cellFrame.height * canvasState.scale - - const cellOriginPoint = offsetPoint( - canvasPointToWindowPoint(cellFrame, canvasState.scale, canvasState.canvasOffset), - windowPoint({ x: 5, y: 5 }), - ) - const cellOrigin = getGridCellAtPoint(cellOriginPoint, true) - if (cellOrigin == null) { + const cellBounds = getGridCellBoundsFromCanvas(cell, canvasState.scale, canvasState.canvasOffset) + if (cellBounds == null) { return null } - const cellEndPoint = offsetPoint( - cellOriginPoint, - windowPoint({ - x: canvasFrameWidth - 5, - y: canvasFrameHeight - 5, - }), - ) - const cellEnd = getGridCellAtPoint(cellEndPoint, true) - if (cellEnd == null) { - return null - } - - const cellOriginCoords = cellOrigin.coordinates - const cellEndCoords = cellEnd.coordinates - - const cellWidth = cellEndCoords.column - cellOriginCoords.column + 1 - const cellHeight = cellEndCoords.row - cellOriginCoords.row + 1 - - const gridTemplate = grid.specialSizeMeasurements.containerGridProperties - return { id: 'GRID_KEYBOARD_REARRANGE', name: 'Grid rearrange', @@ -116,59 +85,28 @@ export function gridRearrangeKeyboardStrategy( const interactionData = interactionSession.interactionData - let colDelta = interactionData.keyStates.reduce((tot, cur) => { - let presses = 0 - cur.keysPressed.forEach((key) => { - presses += key === 'left' ? -1 : key === 'right' ? 1 : 0 - }) - return tot + presses - }, 0) - let rowDelta = interactionData.keyStates.reduce((tot, cur) => { - let presses = 0 - cur.keysPressed.forEach((key) => { - presses += key === 'up' ? -1 : key === 'down' ? 1 : 0 - }) - return tot + presses - }, 0) + const horizontalDelta = getKeysDelta(interactionData.keyStates, 'horizontal') + const verticalDelta = getKeysDelta(interactionData.keyStates, 'vertical') let gridProps: Partial = { ...cell.specialSizeMeasurements.elementGridProperties, } - function getNewBounds(start: number, cellsCount: number, size: number) { - const lowerLimit = 1 - const upperLimit = cellsCount + 1 - - let newFrom = start - let newTo = start + size - - if (newTo > upperLimit) { - newTo = upperLimit - newFrom = newTo - size - } - if (newFrom < lowerLimit) { - newFrom = lowerLimit - newTo = newFrom + size - } - - return { from: newFrom, to: newTo } - } - - if (colDelta !== 0) { + if (horizontalDelta !== 0) { const { from, to } = getNewBounds( - cellOriginCoords.column + colDelta, + cellBounds.originCell.column + horizontalDelta, gridTemplate.gridTemplateColumns.dimensions.length, - cellWidth, + cellBounds.width, ) gridProps.gridColumnStart = gridPositionValue(from) gridProps.gridColumnEnd = gridPositionValue(to) } - if (rowDelta !== 0) { + if (verticalDelta !== 0) { const { from, to } = getNewBounds( - cellOriginCoords.row + rowDelta, + cellBounds.originCell.row + verticalDelta, gridTemplate.gridTemplateRows.dimensions.length, - cellHeight, + cellBounds.height, ) gridProps.gridRowStart = gridPositionValue(from) gridProps.gridRowEnd = gridPositionValue(to) @@ -194,3 +132,48 @@ function fitness(interactionSession: InteractionSession | null): number { return matches ? 1 : 0 } + +function getKeysDelta(keyStates: KeyState[], direction: 'vertical' | 'horizontal'): number { + return keyStates.reduce((tot, cur) => { + let presses = 0 + cur.keysPressed.forEach((key) => { + switch (direction) { + case 'horizontal': + presses += key === 'left' ? -1 : key === 'right' ? 1 : 0 + break + case 'vertical': + presses += key === 'up' ? -1 : key === 'down' ? 1 : 0 + break + default: + assertNever(direction) + } + }) + return tot + presses + }, 0) +} + +function getNewBounds( + start: number, + cellsCount: number, + size: number, +): { + from: number + to: number +} { + const lowerLimit = 1 + const upperLimit = cellsCount + 1 + + let from = start + let to = start + size + + if (to > upperLimit) { + to = upperLimit + from = to - size + } + if (from < lowerLimit) { + from = lowerLimit + to = from + size + } + + return { from: from, to: to } +} From f2a511d0784c7c6af8a33f1e5f60eed2c34ef1e2 Mon Sep 17 00:00:00 2001 From: Federico Ruggi <1081051+ruggi@users.noreply.github.com> Date: Tue, 3 Sep 2024 15:48:10 +0200 Subject: [PATCH 4/6] unexport --- .../canvas/canvas-strategies/strategies/grid-helpers.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts index 4d1d6079f857..911b23f8544e 100644 --- a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts +++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts @@ -331,7 +331,7 @@ export function getTargetCell( } } -export function getElementGridProperties( +function getElementGridProperties( element: ElementInstanceMetadata, cellUnderMouse: { row: number; column: number }, ): { From 25025681ee321c55c0ca5d52a1e01a155b61af74 Mon Sep 17 00:00:00 2001 From: Federico Ruggi <1081051+ruggi@users.noreply.github.com> Date: Tue, 3 Sep 2024 19:17:55 +0200 Subject: [PATCH 5/6] rename for clarity --- .../strategies/grid-rearrange-keyboard-strategy.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-keyboard-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-keyboard-strategy.ts index deb1670b2114..9e345d92db1d 100644 --- a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-keyboard-strategy.ts +++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-keyboard-strategy.ts @@ -134,7 +134,7 @@ function fitness(interactionSession: InteractionSession | null): number { } function getKeysDelta(keyStates: KeyState[], direction: 'vertical' | 'horizontal'): number { - return keyStates.reduce((tot, cur) => { + return keyStates.reduce((total, cur) => { let presses = 0 cur.keysPressed.forEach((key) => { switch (direction) { @@ -148,7 +148,7 @@ function getKeysDelta(keyStates: KeyState[], direction: 'vertical' | 'horizontal assertNever(direction) } }) - return tot + presses + return total + presses }, 0) } From a67d57d157f0787edd1afdc2e133d7aed914ce80 Mon Sep 17 00:00:00 2001 From: Federico Ruggi <1081051+ruggi@users.noreply.github.com> Date: Wed, 4 Sep 2024 10:34:10 +0200 Subject: [PATCH 6/6] use const --- .../canvas/canvas-strategies/strategies/grid-helpers.ts | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts index 911b23f8544e..1d3b5d27451e 100644 --- a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts +++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts @@ -404,6 +404,8 @@ function asMaybeNamedAreaOrValue( return value } +const GRID_BOUNDS_TOLERANCE = 5 // px + export function getGridCellBoundsFromCanvas( cell: ElementInstanceMetadata, canvasScale: number, @@ -419,7 +421,7 @@ export function getGridCellBoundsFromCanvas( const cellOriginPoint = offsetPoint( canvasPointToWindowPoint(cellFrame, canvasScale, canvasOffset), - windowPoint({ x: 5, y: 5 }), + windowPoint({ x: GRID_BOUNDS_TOLERANCE, y: GRID_BOUNDS_TOLERANCE }), ) const cellOrigin = getGridCellAtPoint(cellOriginPoint, true) if (cellOrigin == null) { @@ -429,8 +431,8 @@ export function getGridCellBoundsFromCanvas( const cellEndPoint = offsetPoint( cellOriginPoint, windowPoint({ - x: canvasFrameWidth - 5, - y: canvasFrameHeight - 5, + x: canvasFrameWidth - GRID_BOUNDS_TOLERANCE, + y: canvasFrameHeight - GRID_BOUNDS_TOLERANCE, }), ) const cellEnd = getGridCellAtPoint(cellEndPoint, true)