From 9342ed1562f1a92d3b97d25dd79839c09cc2ca21 Mon Sep 17 00:00:00 2001 From: Federico Ruggi <1081051+ruggi@users.noreply.github.com> Date: Tue, 9 Jul 2024 13:21:29 +0200 Subject: [PATCH] Hide absolute resize controls for grid cells (#6043) **Problem:** Absolute resize controls are shown when a grid cell is selected. **Fix:** Don't enable the absolute resize strategy when a grid cell is selected. **Note** With the upcoming cell resize feature we might want to add another case to `isResizableStrategy`, for which I left a comment in `canvas-strategies.tsx` --- .../canvas-strategies/canvas-strategies.tsx | 1 + .../absolute-resize-bounding-box-strategy.tsx | 6 ++++++ .../strategies/basic-resize-strategy.tsx | 16 +++++++--------- .../strategies/flex-resize-basic-strategy.tsx | 4 ++++ .../strategies/flex-resize-strategy.tsx | 4 ++++ .../grid-rearrange-move-duplicate-strategy.ts | 8 +------- .../grid-rearrange-move-strategy.ts | 8 +------- .../keyboard-absolute-resize-strategy.tsx | 5 +++++ .../rearrange-grid-swap-strategy.ts | 9 ++------- .../strategies/resize-grid-strategy.ts | 19 ++++++------------- .../select-mode/select-mode-hooks.tsx | 10 ++++------ .../src/core/model/element-metadata-utils.ts | 4 ++++ 12 files changed, 45 insertions(+), 49 deletions(-) diff --git a/editor/src/components/canvas/canvas-strategies/canvas-strategies.tsx b/editor/src/components/canvas/canvas-strategies/canvas-strategies.tsx index ac434d214eef..47c335e97dfb 100644 --- a/editor/src/components/canvas/canvas-strategies/canvas-strategies.tsx +++ b/editor/src/components/canvas/canvas-strategies/canvas-strategies.tsx @@ -521,6 +521,7 @@ export function isResizableStrategy(canvasStrategy: CanvasStrategy): boolean { case 'FLEX_RESIZE_BASIC': case 'FLEX_RESIZE': case 'BASIC_RESIZE': + // TODO add grid cell resize return true default: return false diff --git a/editor/src/components/canvas/canvas-strategies/strategies/absolute-resize-bounding-box-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/absolute-resize-bounding-box-strategy.tsx index e5340b153d4e..42f0bd5fc694 100644 --- a/editor/src/components/canvas/canvas-strategies/strategies/absolute-resize-bounding-box-strategy.tsx +++ b/editor/src/components/canvas/canvas-strategies/strategies/absolute-resize-bounding-box-strategy.tsx @@ -88,6 +88,12 @@ export function absoluteResizeBoundingBoxStrategy( return null } + if ( + retargetedTargets.some((path) => MetadataUtils.isGridCell(canvasState.startingMetadata, path)) + ) { + return null + } + return { id: 'ABSOLUTE_RESIZE_BOUNDING_BOX', name: 'Resize', diff --git a/editor/src/components/canvas/canvas-strategies/strategies/basic-resize-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/basic-resize-strategy.tsx index 81a3e65479eb..6a0246a9980f 100644 --- a/editor/src/components/canvas/canvas-strategies/strategies/basic-resize-strategy.tsx +++ b/editor/src/components/canvas/canvas-strategies/strategies/basic-resize-strategy.tsx @@ -66,20 +66,19 @@ export function basicResizeStrategy( if (selectedElements.length !== 1 || !honoursPropsSize(canvasState, selectedElements[0])) { return null } + + const selectedElement = selectedElements[0] + const metadata = MetadataUtils.findElementByElementPath( canvasState.startingMetadata, - selectedElements[0], + selectedElement, ) const elementDimensionsProps = metadata != null ? getElementDimensions(metadata) : null const elementParentBounds = metadata?.specialSizeMeasurements.immediateParentBounds ?? null - const elementDimensions = - elementDimensionsProps == null - ? null - : { - width: elementDimensionsProps.width, - height: elementDimensionsProps.height, - } + if (MetadataUtils.isGridCell(canvasState.startingMetadata, selectedElement)) { + return null + } return { id: BASIC_RESIZE_STRATEGY_ID, @@ -128,7 +127,6 @@ export function basicResizeStrategy( interactionSession.activeControl.type === 'RESIZE_HANDLE' ) { // no multiselection support yet - const selectedElement = selectedElements[0] const edgePosition = interactionSession.activeControl.edgePosition if (interactionSession.interactionData.drag != null) { const drag = interactionSession.interactionData.drag diff --git a/editor/src/components/canvas/canvas-strategies/strategies/flex-resize-basic-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/flex-resize-basic-strategy.tsx index 6e087d07b33e..3d8a48bebaa5 100644 --- a/editor/src/components/canvas/canvas-strategies/strategies/flex-resize-basic-strategy.tsx +++ b/editor/src/components/canvas/canvas-strategies/strategies/flex-resize-basic-strategy.tsx @@ -89,6 +89,10 @@ export function flexResizeBasicStrategy( elementParentBounds != null && (elementParentBounds.width !== 0 || elementParentBounds.height !== 0) + if (MetadataUtils.isGridCell(canvasState.startingMetadata, selectedElements[0])) { + return null + } + return { id: 'FLEX_RESIZE_BASIC', name: 'Flex Resize (Basic)', diff --git a/editor/src/components/canvas/canvas-strategies/strategies/flex-resize-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/flex-resize-strategy.tsx index f5592f08bd0c..1cff33d7db1f 100644 --- a/editor/src/components/canvas/canvas-strategies/strategies/flex-resize-strategy.tsx +++ b/editor/src/components/canvas/canvas-strategies/strategies/flex-resize-strategy.tsx @@ -109,6 +109,10 @@ export function flexResizeStrategy( elementParentBounds.width !== 0 && elementParentBounds.height !== 0 + if (MetadataUtils.isGridCell(canvasState.startingMetadata, selectedElements[0])) { + return null + } + return { id: FLEX_RESIZE_STRATEGY_ID, name: 'Flex Resize', diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-duplicate-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-duplicate-strategy.ts index 045ac5c7ec87..68a81c073293 100644 --- a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-duplicate-strategy.ts +++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-duplicate-strategy.ts @@ -37,13 +37,7 @@ export const gridRearrangeMoveDuplicateStrategy: CanvasStrategyFactory = ( } const selectedElement = selectedElements[0] - const ok = MetadataUtils.isGridLayoutedContainer( - MetadataUtils.findElementByElementPath( - canvasState.startingMetadata, - EP.parentPath(selectedElement), - ), - ) - if (!ok) { + if (!MetadataUtils.isGridCell(canvasState.startingMetadata, selectedElement)) { return null } diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.ts index 6a164346a1af..d0ce57d61f8c 100644 --- a/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.ts +++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-rearrange-move-strategy.ts @@ -30,13 +30,7 @@ export const gridRearrangeMoveStrategy: CanvasStrategyFactory = ( } const selectedElement = selectedElements[0] - const ok = MetadataUtils.isGridLayoutedContainer( - MetadataUtils.findElementByElementPath( - canvasState.startingMetadata, - EP.parentPath(selectedElement), - ), - ) - if (!ok) { + if (!MetadataUtils.isGridCell(canvasState.startingMetadata, selectedElement)) { return null } diff --git a/editor/src/components/canvas/canvas-strategies/strategies/keyboard-absolute-resize-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/keyboard-absolute-resize-strategy.tsx index 536ab0cb0f9e..ddf036280417 100644 --- a/editor/src/components/canvas/canvas-strategies/strategies/keyboard-absolute-resize-strategy.tsx +++ b/editor/src/components/canvas/canvas-strategies/strategies/keyboard-absolute-resize-strategy.tsx @@ -43,6 +43,7 @@ import * as EP from '../../../../core/shared/element-path' import type { ElementInstanceMetadataMap } from '../../../../core/shared/element-template' import type { AllElementProps } from '../../../editor/store/editor-state' import { getDescriptiveStrategyLabelWithRetargetedPaths } from '../canvas-strategies' +import { MetadataUtils } from '../../../../core/model/element-metadata-utils' interface VectorAndEdge { movement: CanvasVector @@ -132,6 +133,10 @@ export function keyboardAbsoluteResizeStrategy( return null } + if (MetadataUtils.isGridCell(canvasState.startingMetadata, selectedElements[0])) { + return null + } + return { id: 'KEYBOARD_ABSOLUTE_RESIZE', name: 'Resize', diff --git a/editor/src/components/canvas/canvas-strategies/strategies/rearrange-grid-swap-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/rearrange-grid-swap-strategy.ts index 680166359653..ecd46c2d6fd2 100644 --- a/editor/src/components/canvas/canvas-strategies/strategies/rearrange-grid-swap-strategy.ts +++ b/editor/src/components/canvas/canvas-strategies/strategies/rearrange-grid-swap-strategy.ts @@ -47,13 +47,8 @@ export const rearrangeGridSwapStrategy: CanvasStrategyFactory = ( } const selectedElement = selectedElements[0] - const ok = MetadataUtils.isGridLayoutedContainer( - MetadataUtils.findElementByElementPath( - canvasState.startingMetadata, - EP.parentPath(selectedElement), - ), - ) - if (!ok) { + + if (!MetadataUtils.isGridCell(canvasState.startingMetadata, selectedElement)) { return null } diff --git a/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.ts index 914bf68d1894..cc741fbd5515 100644 --- a/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.ts +++ b/editor/src/components/canvas/canvas-strategies/strategies/resize-grid-strategy.ts @@ -1,9 +1,4 @@ -import { - filtered, - fromArrayIndex, - fromField, - notNull, -} from '../../../../core/shared/optics/optic-creators' +import { fromArrayIndex, fromField, notNull } from '../../../../core/shared/optics/optic-creators' import { MetadataUtils } from '../../../../core/model/element-metadata-utils' import * as EP from '../../../../core/shared/element-path' import * as PP from '../../../../core/shared/property-path' @@ -18,9 +13,9 @@ import { strategyApplicationResult, } from '../canvas-strategy-types' import type { InteractionSession } from '../interaction-state' -import type { CSSNumber, GridCSSNumber } from '../../../../components/inspector/common/css-utils' +import type { GridCSSNumber } from '../../../../components/inspector/common/css-utils' import { printArrayCSSNumber } from '../../../../components/inspector/common/css-utils' -import { any, anyBy, modify, toFirst } from '../../../../core/shared/optics/optic-utilities' +import { anyBy, modify, toFirst } from '../../../../core/shared/optics/optic-utilities' import { setElementsToRerenderCommand } from '../../commands/set-elements-to-rerender-command' import { isRight } from '../../../../core/shared/either' import { roundToNearestWhole } from '../../../../core/shared/math-utils' @@ -35,11 +30,8 @@ export const resizeGridStrategy: CanvasStrategyFactory = ( } const selectedElement = selectedElements[0] - const parentPath = EP.parentPath(selectedElement) - const ok = MetadataUtils.isGridLayoutedContainer( - MetadataUtils.findElementByElementPath(canvasState.startingMetadata, parentPath), - ) - if (!ok) { + + if (!MetadataUtils.isGridCell(canvasState.startingMetadata, selectedElement)) { return null } @@ -73,6 +65,7 @@ export const resizeGridStrategy: CanvasStrategyFactory = ( const control = interactionSession.activeControl const drag = interactionSession.interactionData.drag const dragAmount = control.axis === 'column' ? drag.x : drag.y + const parentPath = EP.parentPath(selectedElement) const parentSpecialSizeMeasurements = canvasState.startingMetadata[EP.toString(parentPath)].specialSizeMeasurements const originalValues = diff --git a/editor/src/components/canvas/controls/select-mode/select-mode-hooks.tsx b/editor/src/components/canvas/controls/select-mode/select-mode-hooks.tsx index fc368de424f8..654ebdc01e36 100644 --- a/editor/src/components/canvas/controls/select-mode/select-mode-hooks.tsx +++ b/editor/src/components/canvas/controls/select-mode/select-mode-hooks.tsx @@ -662,12 +662,10 @@ function useSelectOrLiveModeSelectAndHover( event.type !== 'mouseup' && foundTarget != null && draggingAllowed && - !MetadataUtils.isGridLayoutedContainer( - // grid has its own drag handling - MetadataUtils.findElementByElementPath( - editorStoreRef.current.editor.jsxMetadata, - EP.parentPath(foundTarget.elementPath), - ), + // grid has its own drag handling + !MetadataUtils.isGridCell( + editorStoreRef.current.editor.jsxMetadata, + foundTarget.elementPath, ) ) { const start = windowToCanvasCoordinates( diff --git a/editor/src/core/model/element-metadata-utils.ts b/editor/src/core/model/element-metadata-utils.ts index e093c90c5912..1447d98a5cea 100644 --- a/editor/src/core/model/element-metadata-utils.ts +++ b/editor/src/core/model/element-metadata-utils.ts @@ -371,6 +371,10 @@ export const MetadataUtils = { isGridLayoutedContainer(instance: ElementInstanceMetadata | null): boolean { return instance?.specialSizeMeasurements.layoutSystemForChildren === 'grid' }, + isGridCell(metadata: ElementInstanceMetadataMap, path: ElementPath): boolean { + const parent = MetadataUtils.findElementByElementPath(metadata, EP.parentPath(path)) + return MetadataUtils.isGridLayoutedContainer(parent) + }, isPositionAbsolute(instance: ElementInstanceMetadata | null): boolean { return instance?.specialSizeMeasurements.position === 'absolute' },