)
`)
+ })
+ it("does not add the other longhand if the shorthand is not defined and the other longhand it's auto", async () => {
+ const renderResult = await renderTestEditorWithCode(
+ makeTestProject({
+ shorthand: 'auto / 2.4fr 1fr 1fr',
+ columns: null,
+ rows: null,
+ height: 600,
+ }),
+ 'await-first-dom-report',
+ )
+ const target = EP.fromString(`sb/grid/row-1-column-2`)
+ await renderResult.dispatch(selectComponents([target], false), true)
+ await renderResult.getDispatchFollowUpActionsFinished()
+ const canvasControlsLayer = renderResult.renderedDOM.getByTestId(CanvasControlsContainerID)
+ const resizeControl = renderResult.renderedDOM.getByTestId(`grid-column-handle-1`)
+ const resizeControlRect = resizeControl.getBoundingClientRect()
+ const startPoint = canvasPoint({
+ x: resizeControlRect.x + resizeControlRect.width / 2,
+ y: resizeControlRect.y + resizeControlRect.height / 2,
+ })
+ const endPoint = canvasPoint({
+ x: startPoint.x + 100,
+ y: startPoint.y,
+ })
+ await mouseMoveToPoint(resizeControl, startPoint)
+ await mouseDownAtPoint(resizeControl, startPoint)
+ await mouseMoveToPoint(canvasControlsLayer, endPoint)
+ await mouseUpAtPoint(canvasControlsLayer, endPoint)
+ await renderResult.getDispatchFollowUpActionsFinished()
+
+ expect(getPrintedUiJsCode(renderResult.getEditorState()))
+ .toEqual(`import * as React from 'react'
+import { Storyboard } from 'utopia-api'
+
+export var storyboard = (
+
+
+
+)
+`)
+ })
})
})
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 bf89f6246649..e3242fdd3f97 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
@@ -7,7 +7,12 @@ import {
import { MetadataUtils } from '../../../../core/model/element-metadata-utils'
import * as EP from '../../../../core/shared/element-path'
import * as PP from '../../../../core/shared/property-path'
-import { setProperty } from '../../commands/set-property-command'
+import type { PropertyToUpdate } from '../../commands/set-property-command'
+import {
+ propertyToDelete,
+ propertyToSet,
+ updateBulkProperties,
+} from '../../commands/set-property-command'
import {
controlsForGridPlaceholders,
GridRowColumnResizingControls,
@@ -30,17 +35,19 @@ import {
printArrayGridDimensions,
} from '../../../../components/inspector/common/css-utils'
import { toFirst } from '../../../../core/shared/optics/optic-utilities'
-import type { Either } from '../../../../core/shared/either'
-import { foldEither, isLeft, isRight } from '../../../../core/shared/either'
-import { roundTo, roundToNearestWhole } from '../../../../core/shared/math-utils'
+import { isLeft } from '../../../../core/shared/either'
+import { roundToNearestWhole } from '../../../../core/shared/math-utils'
import type { GridAutoOrTemplateBase } from '../../../../core/shared/element-template'
import {
expandGridDimensions,
findOriginalGrid,
+ isJustAutoGridDimension,
replaceGridTemplateDimensionAtIndex,
} from './grid-helpers'
import { setCursorCommand } from '../../commands/set-cursor-command'
import { CSSCursor } from '../../canvas-types'
+import type { CanvasCommand } from '../../commands/commands'
+import type { Axis } from '../../gap-utils'
export const resizeGridStrategy: CanvasStrategyFactory = (
canvasState: InteractionCanvasState,
@@ -116,6 +123,12 @@ export const resizeGridStrategy: CanvasStrategyFactory = (
? gridSpecialSizeMeasurements.containerGridProperties.gridTemplateColumns
: gridSpecialSizeMeasurements.containerGridProperties.gridTemplateRows
+ const otherAxis: Axis = control.axis === 'column' ? 'row' : 'column'
+ const otherAxisValues =
+ otherAxis === 'column'
+ ? gridSpecialSizeMeasurements.containerGridPropertiesFromProps.gridTemplateColumns
+ : gridSpecialSizeMeasurements.containerGridPropertiesFromProps.gridTemplateRows
+
if (
calculatedValues == null ||
calculatedValues.type !== 'DIMENSIONS' ||
@@ -165,7 +178,7 @@ export const resizeGridStrategy: CanvasStrategyFactory = (
const isFractional = mergedUnit.value === 'fr'
const precision = modifiers.cmd ? 'coarse' : 'precise'
- const areaName = mergedValues.dimensions[control.columnOrRow]?.areaName ?? null
+ const lineName = mergedValues.dimensions[control.columnOrRow]?.lineName ?? null
const newValue = Math.max(
0,
@@ -181,21 +194,36 @@ export const resizeGridStrategy: CanvasStrategyFactory = (
originalValues.dimensions,
expandedOriginalValues,
control.columnOrRow,
- gridCSSNumber(cssNumber(newValue, mergedUnit.value), areaName),
+ gridCSSNumber(cssNumber(newValue, mergedUnit.value), lineName),
)
const propertyValueAsString = printArrayGridDimensions(newDimensions)
- const commands = [
- setProperty(
- 'always',
- originalGridPath,
- PP.create(
- 'style',
- control.axis === 'column' ? 'gridTemplateColumns' : 'gridTemplateRows',
- ),
- propertyValueAsString,
- ),
+ const propertyAxis = PP.create(
+ 'style',
+ control.axis === 'column' ? 'gridTemplateColumns' : 'gridTemplateRows',
+ )
+ let propertiesToUpdate: PropertyToUpdate[] = [
+ propertyToSet(propertyAxis, propertyValueAsString),
+ propertyToDelete(PP.create('style', 'gridTemplate')), // delete the shorthand in favor of the longhands
+ ]
+
+ if (
+ otherAxisValues?.type === 'DIMENSIONS' &&
+ otherAxisValues.dimensions.length > 0 &&
+ !isJustAutoGridDimension(otherAxisValues.dimensions)
+ ) {
+ // if the other axis has dimensions, serialize them in their longhand
+ const propertyOtherAxis = PP.create(
+ 'style',
+ otherAxis === 'column' ? 'gridTemplateColumns' : 'gridTemplateRows',
+ )
+ const otherAxisValueAsString = printArrayGridDimensions(otherAxisValues.dimensions)
+ propertiesToUpdate.push(propertyToSet(propertyOtherAxis, otherAxisValueAsString))
+ }
+
+ let commands: CanvasCommand[] = [
+ updateBulkProperties('always', originalGridPath, propertiesToUpdate),
setCursorCommand(control.axis === 'column' ? CSSCursor.ColResize : CSSCursor.RowResize),
]
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/set-padding-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/set-padding-strategy.tsx
index bb69d4fc2a7c..607524af53b9 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/set-padding-strategy.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/set-padding-strategy.tsx
@@ -72,10 +72,6 @@ import { elementHasOnlyTextChildren } from '../../canvas-utils'
import type { Modifiers } from '../../../../utils/modifiers'
import type { Axis } from '../../../inspector/inspector-common'
import { detectFillHugFixedState, isHuggingFixedHugFill } from '../../../inspector/inspector-common'
-import {
- AdjustCssLengthProperties,
- adjustCssLengthProperties,
-} from '../../commands/adjust-css-length-command'
import type { ElementPathTrees } from '../../../../core/shared/element-path-tree'
import { activeFrameTargetPath, setActiveFrames } from '../../commands/set-active-frames-command'
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/shared-absolute-resize-strategy-helpers.ts b/editor/src/components/canvas/canvas-strategies/strategies/shared-absolute-resize-strategy-helpers.ts
index 17c7d5f55b7e..a70ebc28d65c 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/shared-absolute-resize-strategy-helpers.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/shared-absolute-resize-strategy-helpers.ts
@@ -40,11 +40,6 @@ import {
EdgePositionBottom,
} from '../../canvas-types'
import { pickPointOnRect, snapPoint } from '../../canvas-utils'
-import type { AdjustCssLengthProperties } from '../../commands/adjust-css-length-command'
-import {
- adjustCssLengthProperties,
- lengthPropertyToAdjust,
-} from '../../commands/adjust-css-length-command'
import { pointGuidelineToBoundsEdge } from '../../controls/guideline-helpers'
import type { AbsolutePin } from './resize-helpers'
import { ensureAtLeastTwoPinsForEdgePosition, resizeBoundingBox } from './resize-helpers'
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/shared-move-strategies-helpers.ts b/editor/src/components/canvas/canvas-strategies/strategies/shared-move-strategies-helpers.ts
index 4f93b1e1f635..7ec32d192246 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/shared-move-strategies-helpers.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/shared-move-strategies-helpers.ts
@@ -31,6 +31,7 @@ import {
} from '../../../../core/shared/math-utils'
import type { ElementPath } from '../../../../core/shared/project-file-types'
+import type { AllElementProps } from '../../../editor/store/editor-state'
import { getJSXElementFromProjectContents } from '../../../editor/store/editor-state'
import { stylePropPathMappingFn } from '../../../inspector/common/property-path-hooks'
import { determineConstrainedDragAxis } from '../../canvas-controls-frame'
@@ -78,6 +79,7 @@ import {
} from '../../commands/set-css-length-command'
import type { ActiveFrame, ActiveFrameAction } from '../../commands/set-active-frames-command'
import { activeFrameTargetRect, setActiveFrames } from '../../commands/set-active-frames-command'
+import type { ElementPathTrees } from '../../../../core/shared/element-path-tree'
export interface MoveCommandsOptions {
ignoreLocalFrame?: boolean
@@ -227,6 +229,8 @@ function getAppropriateLocalFrame(
export function getDirectMoveCommandsForSelectedElement(
projectContents: ProjectContentTreeRoot,
startingMetadata: ElementInstanceMetadataMap,
+ startingAllElementProps: AllElementProps,
+ startingElementPathTree: ElementPathTrees,
selectedElement: ElementPath,
mappedPath: ElementPath,
leftOrTop: 'left' | 'top',
@@ -246,6 +250,8 @@ export function getDirectMoveCommandsForSelectedElement(
return getMoveCommandsForSelectedElement(
projectContents,
startingMetadata,
+ startingAllElementProps,
+ startingElementPathTree,
selectedElement,
mappedPath,
drag,
@@ -255,6 +261,8 @@ export function getDirectMoveCommandsForSelectedElement(
export function getMoveCommandsForSelectedElement(
projectContents: ProjectContentTreeRoot,
startingMetadata: ElementInstanceMetadataMap,
+ startingAllElementProps: AllElementProps,
+ startingElementPathTree: ElementPathTrees,
selectedElement: ElementPath,
mappedPath: ElementPath,
drag: CanvasVector,
@@ -273,14 +281,34 @@ export function getMoveCommandsForSelectedElement(
selectedElement,
)
+ const closestNonFragmentParent = MetadataUtils.getClosestNonFragmentParent(
+ startingMetadata,
+ startingAllElementProps,
+ startingElementPathTree,
+ EP.parentPath(mappedPath),
+ )
+ const closestNonFragmentParentMetadata = MetadataUtils.findElementByElementPath(
+ startingMetadata,
+ closestNonFragmentParent,
+ )
+ const providesBoundsForAbsoluteChildren =
+ closestNonFragmentParentMetadata?.specialSizeMeasurements.providesBoundsForAbsoluteChildren ??
+ false
+
const elementParentBounds =
- elementMetadata?.specialSizeMeasurements.coordinateSystemBounds ?? null
+ elementMetadata?.specialSizeMeasurements.coordinateSystemBounds ??
+ (providesBoundsForAbsoluteChildren
+ ? nullIfInfinity(closestNonFragmentParentMetadata?.globalFrame)
+ : null) ??
+ null
const globalFrame = nullIfInfinity(
MetadataUtils.getFrameInCanvasCoords(selectedElement, startingMetadata),
)
- const localFrame = nullIfInfinity(MetadataUtils.getLocalFrame(selectedElement, startingMetadata))
+ const localFrame = nullIfInfinity(
+ MetadataUtils.getLocalFrame(selectedElement, startingMetadata, EP.parentPath(mappedPath)),
+ )
if (element == null) {
return { commands: [], intendedBounds: [] }
@@ -330,6 +358,8 @@ export function getInteractionMoveCommandsForSelectedElement(
return getMoveCommandsForSelectedElement(
canvasState.projectContents,
canvasState.startingMetadata,
+ canvasState.startingAllElementProps,
+ canvasState.startingElementPathTree,
selectedElement,
mappedPath,
drag,
@@ -339,6 +369,8 @@ export function getInteractionMoveCommandsForSelectedElement(
export function moveInspectorStrategy(
metadata: ElementInstanceMetadataMap,
+ allElementProps: AllElementProps,
+ elementPathTree: ElementPathTrees,
selectedElementPaths: ElementPath[],
projectContents: ProjectContentTreeRoot,
movement: CanvasVector,
@@ -352,6 +384,8 @@ export function moveInspectorStrategy(
const moveCommandsResult = getMoveCommandsForSelectedElement(
projectContents,
metadata,
+ allElementProps,
+ elementPathTree,
selectedPath,
selectedPath,
movement,
@@ -368,6 +402,8 @@ export function moveInspectorStrategy(
export function directMoveInspectorStrategy(
metadata: ElementInstanceMetadataMap,
+ allElementProps: AllElementProps,
+ elementPathTree: ElementPathTrees,
selectedElementPaths: ElementPath[],
projectContents: ProjectContentTreeRoot,
leftOrTop: 'left' | 'top',
@@ -382,6 +418,8 @@ export function directMoveInspectorStrategy(
const moveCommandsResult = getDirectMoveCommandsForSelectedElement(
projectContents,
metadata,
+ allElementProps,
+ elementPathTree,
selectedPath,
selectedPath,
leftOrTop,
diff --git a/editor/src/components/canvas/canvas-utils.ts b/editor/src/components/canvas/canvas-utils.ts
index 50b5f71e9ac6..2bfd96433fdc 100644
--- a/editor/src/components/canvas/canvas-utils.ts
+++ b/editor/src/components/canvas/canvas-utils.ts
@@ -63,7 +63,12 @@ import type {
HighlightBoundsForUids,
ExportsDetail,
} from '../../core/shared/project-file-types'
-import { isExportDefault, isParseSuccess, isTextFile } from '../../core/shared/project-file-types'
+import {
+ importsEquals,
+ isExportDefault,
+ isParseSuccess,
+ isTextFile,
+} from '../../core/shared/project-file-types'
import {
applyUtopiaJSXComponentsChanges,
getDefaultExportedTopLevelElement,
@@ -140,7 +145,11 @@ import { getStoryboardUID } from '../../core/model/scene-utils'
import { optionalMap } from '../../core/shared/optional-utils'
import { assertNever, fastForEach } from '../../core/shared/utils'
import type { ProjectContentTreeRoot } from '../assets'
-import { getProjectFileByFilePath } from '../assets'
+import {
+ getProjectFileByFilePath,
+ isProjectContentDirectory,
+ isProjectContentFile,
+} from '../assets'
import type { CSSNumber } from '../inspector/common/css-utils'
import { parseCSSLengthPercent, printCSSNumber } from '../inspector/common/css-utils'
import { getTopLevelName, importedFromWhere } from '../editor/import-utils'
@@ -347,6 +356,7 @@ export function updateFramesOfScenesAndComponents(
const localFrame = MetadataUtils.getLocalFrame(
frameAndTarget.target,
workingEditorState.jsxMetadata,
+ null,
)
const valueFromDOM = getObservableValueForLayoutProp(
elementMetadata,
@@ -430,7 +440,7 @@ export function updateFramesOfScenesAndComponents(
frameAndTarget.frame,
)
const currentLocalFrame = nullIfInfinity(
- MetadataUtils.getLocalFrame(target, workingEditorState.jsxMetadata),
+ MetadataUtils.getLocalFrame(target, workingEditorState.jsxMetadata, null),
)
const currentFullFrame = optionalMap(Frame.getFullFrame, currentLocalFrame)
const fullFrame = Frame.getFullFrame(newLocalFrame)
@@ -926,7 +936,7 @@ export function collectGuidelines(
}
const instance = MetadataUtils.findElementByElementPath(metadata, selectedView)
- const localFrame = MetadataUtils.getLocalFrame(selectedView, metadata)
+ const localFrame = MetadataUtils.getLocalFrame(selectedView, metadata, null)
if (
instance != null &&
MetadataUtils.isImg(instance) &&
@@ -2180,3 +2190,73 @@ export function canvasPanelOffsets(): {
right: inspector?.clientWidth ?? 0,
}
}
+
+export function projectContentsSameForRefreshRequire(
+ oldProjectContents: ProjectContentTreeRoot,
+ newProjectContents: ProjectContentTreeRoot,
+): boolean {
+ if (oldProjectContents === newProjectContents) {
+ // Identical references, so the imports are the same.
+ return true
+ } else {
+ for (const [filename, oldProjectTree] of Object.entries(oldProjectContents)) {
+ const newProjectTree = newProjectContents[filename]
+ // No need to check these further if they have the same reference.
+ if (oldProjectTree === newProjectTree) {
+ continue
+ }
+ // If the file can't be found in the other tree, the imports are not the same.
+ if (newProjectTree == null) {
+ return false
+ }
+ if (isProjectContentFile(oldProjectTree) && isProjectContentFile(newProjectTree)) {
+ // Both entries are files.
+ const oldContent = oldProjectTree.content
+ const newContent = newProjectTree.content
+ if (isTextFile(oldContent) || isTextFile(newContent)) {
+ if (isTextFile(oldContent) && isTextFile(newContent)) {
+ const oldParsed = oldContent.fileContents.parsed
+ const newParsed = newContent.fileContents.parsed
+ if (isParseSuccess(oldParsed) || isParseSuccess(newParsed)) {
+ if (isParseSuccess(oldParsed) && isParseSuccess(newParsed)) {
+ if (
+ !importsEquals(oldParsed.imports, newParsed.imports) ||
+ oldParsed.combinedTopLevelArbitraryBlock !==
+ newParsed.combinedTopLevelArbitraryBlock ||
+ oldParsed.exportsDetail !== newParsed.exportsDetail
+ ) {
+ // For the same file the imports, combined top
+ // level arbitrary block or exports have changed.
+ return false
+ }
+ } else {
+ // One of the files is a parse success but the other is not.
+ return false
+ }
+ }
+ } else {
+ // One of the files is a text file but the other is not.
+ return false
+ }
+ }
+ } else if (
+ isProjectContentDirectory(oldProjectTree) &&
+ isProjectContentDirectory(newProjectTree)
+ ) {
+ // Both entries are directories.
+ if (
+ !projectContentsSameForRefreshRequire(oldProjectTree.children, newProjectTree.children)
+ ) {
+ // The imports of the subdirectories differ.
+ return false
+ }
+ } else {
+ // One of the entries is a file and the other is a directory.
+ return false
+ }
+ }
+ }
+
+ // If nothing differs, return true.
+ return true
+}
diff --git a/editor/src/components/canvas/commands/add-contain-layout-if-needed-command.ts b/editor/src/components/canvas/commands/add-contain-layout-if-needed-command.ts
index 19364723ad6d..f9d67d83cb80 100644
--- a/editor/src/components/canvas/commands/add-contain-layout-if-needed-command.ts
+++ b/editor/src/components/canvas/commands/add-contain-layout-if-needed-command.ts
@@ -2,11 +2,10 @@ import { MetadataUtils } from '../../../core/model/element-metadata-utils'
import * as EP from '../../../core/shared/element-path'
import { emptyComments, jsExpressionValue } from '../../../core/shared/element-template'
import type { ElementPath } from '../../../core/shared/project-file-types'
-import { PropertyPath } from '../../../core/shared/project-file-types'
import * as PP from '../../../core/shared/property-path'
import type { EditorState } from '../../editor/store/editor-state'
-import { applyValuesAtPath } from './adjust-number-command'
import type { BaseCommand, CommandFunction, WhenToRun } from './commands'
+import { applyValuesAtPath } from './utils/property-utils'
export interface AddContainLayoutIfNeeded extends BaseCommand {
type: 'ADD_CONTAIN_LAYOUT_IF_NEEDED'
diff --git a/editor/src/components/canvas/commands/adjust-css-length-command.ts b/editor/src/components/canvas/commands/adjust-css-length-command.ts
index 90daf3c850e6..c7186760ec23 100644
--- a/editor/src/components/canvas/commands/adjust-css-length-command.ts
+++ b/editor/src/components/canvas/commands/adjust-css-length-command.ts
@@ -22,8 +22,8 @@ import { modifyUnderlyingForOpenFile } from '../../editor/store/editor-state'
import type { CSSNumber, FlexDirection } from '../../inspector/common/css-utils'
import { parseCSSPercent, parseCSSPx, printCSSNumber } from '../../inspector/common/css-utils'
import type { BaseCommand, CommandFunction, WhenToRun } from './commands'
-import { deleteValuesAtPath } from './delete-properties-command'
import { patchParseSuccessAtElementPath } from './patch-utils'
+import { deleteValuesAtPath } from './utils/property-utils'
export type CreateIfNotExistant = 'create-if-not-existing' | 'do-not-create-if-doesnt-exist'
@@ -416,7 +416,7 @@ function getConflictingPropertiesToDelete(
return propertiesToDelete
}
-export function deleteConflictingPropsForWidthHeightFromAttributes(
+function deleteConflictingPropsForWidthHeightFromAttributes(
attributes: JSXAttributes,
propertyPath: PropertyPath,
parentFlexDirection: FlexDirection | null,
diff --git a/editor/src/components/canvas/commands/adjust-number-command.spec.tsx b/editor/src/components/canvas/commands/adjust-number-command.spec.tsx
deleted file mode 100644
index 41ac2e58d9f5..000000000000
--- a/editor/src/components/canvas/commands/adjust-number-command.spec.tsx
+++ /dev/null
@@ -1,143 +0,0 @@
-import update from 'immutability-helper'
-import { styleStringInArray } from '../../../utils/common-constants'
-import { createBuiltInDependenciesList } from '../../../core/es-modules/package-manager/built-in-dependencies-list'
-import * as EP from '../../../core/shared/element-path'
-import { getNumberPropertyFromProps } from '../../../core/shared/jsx-attributes'
-import { complexDefaultProjectPreParsed } from '../../../sample-projects/sample-project-utils.test-utils'
-import { withUnderlyingTargetFromEditorState } from '../../editor/store/editor-state'
-import { stylePropPathMappingFn } from '../../inspector/common/property-path-hooks'
-import {
- DefaultStartingFeatureSwitches,
- makeTestProjectCodeWithSnippet,
- renderTestEditorWithCode,
- renderTestEditorWithModel,
-} from '../ui-jsx.test-utils'
-import { adjustNumberProperty, runAdjustNumberProperty } from './adjust-number-command'
-import { updateEditorStateWithPatches } from './commands'
-import { isJSXElement } from '../../../core/shared/element-template'
-
-describe('adjustNumberProperty', () => {
- it('works for left style prop', async () => {
- const renderResult = await renderTestEditorWithModel(
- complexDefaultProjectPreParsed(),
- 'dont-await-first-dom-report',
- DefaultStartingFeatureSwitches,
- createBuiltInDependenciesList(null),
- )
-
- const cardInstancePath = EP.elementPath([
- ['storyboard-entity', 'scene-1-entity', 'app-entity'],
- ['app-outer-div', 'card-instance'],
- ])
-
- const originalEditorState = renderResult.getEditorState().editor
-
- const originalLeftStyleProp = withUnderlyingTargetFromEditorState(
- cardInstancePath,
- originalEditorState,
- null,
- (success, element, underlyingTarget, underlyingFilePath) => {
- if (isJSXElement(element)) {
- return getNumberPropertyFromProps(
- element.props,
- stylePropPathMappingFn('left', styleStringInArray),
- )
- } else {
- return null
- }
- },
- )!
-
- const delta = 10
-
- const adjustNumberPropertyCommand = adjustNumberProperty(
- 'always',
- cardInstancePath,
- stylePropPathMappingFn('left', styleStringInArray),
- delta,
- true,
- )
-
- const result = runAdjustNumberProperty(
- renderResult.getEditorState().editor,
- adjustNumberPropertyCommand,
- )
-
- const patchedEditor = updateEditorStateWithPatches(
- renderResult.getEditorState().editor,
- result.editorStatePatches,
- )
-
- const updatedLeftStyleProp = withUnderlyingTargetFromEditorState(
- cardInstancePath,
- patchedEditor,
- null,
- (success, element, underlyingTarget, underlyingFilePath) => {
- if (isJSXElement(element)) {
- return getNumberPropertyFromProps(
- element.props,
- stylePropPathMappingFn('left', styleStringInArray),
- )
- } else {
- return null
- }
- },
- )
-
- expect(updatedLeftStyleProp).toEqual(originalLeftStyleProp + delta)
- })
- it('works for missing left style prop', async () => {
- const renderResult = await renderTestEditorWithCode(
- makeTestProjectCodeWithSnippet(`
-
- `),
- 'dont-await-first-dom-report',
- )
-
- const elementPath = EP.elementPath([
- ['scene-aaa', 'app-entity'],
- ['parent', 'child'],
- ])
-
- const delta = 10
-
- // left prop is missing, it should be just set to the delta value
- const adjustNumberPropertyCommand = adjustNumberProperty(
- 'always',
- elementPath,
- stylePropPathMappingFn('left', styleStringInArray),
- delta,
- true,
- )
-
- const result = runAdjustNumberProperty(
- renderResult.getEditorState().editor,
- adjustNumberPropertyCommand,
- )
-
- const patchedEditor = updateEditorStateWithPatches(
- renderResult.getEditorState().editor,
- result.editorStatePatches,
- )
- const updatedLeftStyleProp = withUnderlyingTargetFromEditorState(
- elementPath,
- patchedEditor,
- null,
- (success, element, underlyingTarget, underlyingFilePath) => {
- if (isJSXElement(element)) {
- return getNumberPropertyFromProps(
- element.props,
- stylePropPathMappingFn('left', styleStringInArray),
- )
- } else {
- return null
- }
- },
- )
-
- expect(updatedLeftStyleProp).toEqual(delta)
- })
-})
diff --git a/editor/src/components/canvas/commands/adjust-number-command.ts b/editor/src/components/canvas/commands/adjust-number-command.ts
deleted file mode 100644
index 6750b8a0b328..000000000000
--- a/editor/src/components/canvas/commands/adjust-number-command.ts
+++ /dev/null
@@ -1,211 +0,0 @@
-import { foldEither } from '../../../core/shared/either'
-import * as EP from '../../../core/shared/element-path'
-import type { JSXElement } from '../../../core/shared/element-template'
-import {
- emptyComments,
- isJSXElement,
- jsExpressionValue,
-} from '../../../core/shared/element-template'
-import type { ValueAtPath } from '../../../core/shared/jsx-attributes'
-import {
- getNumberPropertyFromProps,
- setJSXValuesAtPaths,
-} from '../../../core/shared/jsx-attributes'
-import type { ElementPath, PropertyPath } from '../../../core/shared/project-file-types'
-import * as PP from '../../../core/shared/property-path'
-import type { EditorState, EditorStatePatch } from '../../editor/store/editor-state'
-import {
- modifyUnderlyingElementForOpenFile,
- withUnderlyingTargetFromEditorState,
-} from '../../editor/store/editor-state'
-import type { BaseCommand, CommandFunction, WhenToRun } from './commands'
-import { patchParseSuccessAtElementPath } from './patch-utils'
-
-export interface AdjustNumberProperty extends BaseCommand {
- type: 'ADJUST_NUMBER_PROPERTY'
- target: ElementPath
- property: PropertyPath
- value: number | AdjustNumberInequalityCondition
- createIfNonExistant: boolean
-}
-
-export function adjustNumberProperty(
- whenToRun: WhenToRun,
- target: ElementPath,
- property: PropertyPath,
- value: number | AdjustNumberInequalityCondition,
- createIfNonExistant: boolean,
-): AdjustNumberProperty {
- return {
- type: 'ADJUST_NUMBER_PROPERTY',
- whenToRun: whenToRun,
- target: target,
- property: property,
- value: value,
- createIfNonExistant: createIfNonExistant,
- }
-}
-
-export type AdjustNumberCondition = 'less-than' | 'greater-than'
-
-export interface AdjustNumberInequalityCondition {
- property: PropertyPath
- condition: AdjustNumberCondition
-}
-
-export function adjustNumberInequalityCondition(
- property: PropertyPath,
- condition: AdjustNumberCondition,
-): AdjustNumberInequalityCondition {
- return {
- property: property,
- condition: condition,
- }
-}
-
-export const runAdjustNumberProperty: CommandFunction
= (
- editorState: EditorState,
- command: AdjustNumberProperty,
-) => {
- // Handle updating the existing value, treating a value that can't be parsed
- // as zero.
- let newValue: number = 0
-
- // Identify the current value, whatever that may be.
- let targetPropertyNonExistant: boolean = false
- let inequalityValue: number | null = null
- const currentValue = withUnderlyingTargetFromEditorState(
- command.target,
- editorState,
- null,
- (success, element, underlyingTarget, underlyingFilePath) => {
- if (isJSXElement(element)) {
- // Check for the inequality adjustment target while we're here.
- if (typeof command.value !== 'number') {
- inequalityValue = getNumberPropertyFromProps(element.props, command.value.property)
- }
-
- // Try the property we're updating.
- const fromProperty = getNumberPropertyFromProps(element.props, command.property)
- if (fromProperty == null) {
- targetPropertyNonExistant = true
- } else {
- return fromProperty
- }
- }
- return null
- },
- )
-
- if (targetPropertyNonExistant && !command.createIfNonExistant) {
- return {
- editorStatePatches: [],
- commandDescription: `Adjust Number Prop: ${EP.toUid(command.target)}/${PP.toString(
- command.property,
- )} not applied as the property does not exist.`,
- }
- } else {
- if (typeof command.value === 'number') {
- if (currentValue != null) {
- newValue += currentValue
- }
-
- // Change the value.
- newValue += command.value
- } else {
- if (currentValue != null && inequalityValue != null) {
- switch (command.value.condition) {
- case 'less-than':
- if (inequalityValue <= currentValue) {
- return {
- editorStatePatches: [],
- commandDescription: `Adjust Number Prop: ${EP.toUid(command.target)}/${PP.toString(
- command.property,
- )} not applied as value is large enough already.`,
- }
- } else {
- newValue = inequalityValue
- }
- break
- case 'greater-than':
- if (inequalityValue >= currentValue) {
- return {
- editorStatePatches: [],
- commandDescription: `Adjust Number Prop: ${EP.toUid(command.target)}/${PP.toString(
- command.property,
- )} not applied as value is small enough already.`,
- }
- } else {
- newValue = inequalityValue
- }
- break
- default:
- const _exhaustiveCheck: never = command.value.condition
- throw new Error(`Unhandled command condition of ${JSON.stringify(command.value)}`)
- }
- }
- }
-
- const propsToUpdate: Array = [
- {
- path: command.property,
- value: jsExpressionValue(newValue, emptyComments),
- },
- ]
-
- // Apply the update to the properties.
- const { editorStatePatch: propertyUpdatePatch } = applyValuesAtPath(
- editorState,
- command.target,
- propsToUpdate,
- )
-
- return {
- editorStatePatches: [propertyUpdatePatch],
- commandDescription: `Adjust Number Prop: ${EP.toUid(command.target)}/${PP.toString(
- command.property,
- )} by ${command.value}`,
- }
- }
-}
-
-export function applyValuesAtPath(
- editorState: EditorState,
- target: ElementPath,
- jsxValuesAndPathsToSet: ValueAtPath[],
-): { editorStateWithChanges: EditorState; editorStatePatch: EditorStatePatch } {
- const workingEditorState = modifyUnderlyingElementForOpenFile(
- target,
- editorState,
- (element: JSXElement) => {
- return foldEither(
- () => {
- return element
- },
- (updatedProps) => {
- return {
- ...element,
- props: updatedProps,
- }
- },
- setJSXValuesAtPaths(element.props, jsxValuesAndPathsToSet),
- )
- },
- )
-
- const editorStatePatch = patchParseSuccessAtElementPath(target, workingEditorState, (success) => {
- return {
- topLevelElements: {
- $set: success.topLevelElements,
- },
- imports: {
- $set: success.imports,
- },
- }
- })
-
- return {
- editorStateWithChanges: workingEditorState,
- editorStatePatch: editorStatePatch,
- }
-}
diff --git a/editor/src/components/canvas/commands/commands.ts b/editor/src/components/canvas/commands/commands.ts
index cf7428ce5209..816ad0c558cd 100644
--- a/editor/src/components/canvas/commands/commands.ts
+++ b/editor/src/components/canvas/commands/commands.ts
@@ -6,8 +6,6 @@ import type { EditorState, EditorStatePatch } from '../../editor/store/editor-st
import type { CommandDescription } from '../canvas-strategies/interaction-state'
import type { AdjustCssLengthProperties } from './adjust-css-length-command'
import { runAdjustCssLengthProperties } from './adjust-css-length-command'
-import type { AdjustNumberProperty } from './adjust-number-command'
-import { runAdjustNumberProperty } from './adjust-number-command'
import type { ConvertToAbsolute } from './convert-to-absolute-command'
import { runConvertToAbsolute } from './convert-to-absolute-command'
import type { ReorderElement } from './reorder-element-command'
@@ -47,8 +45,6 @@ import type { InsertElementInsertionSubject } from './insert-element-insertion-s
import { runInsertElementInsertionSubject } from './insert-element-insertion-subject'
import type { AddElement } from './add-element-command'
import { runAddElement } from './add-element-command'
-import type { UpdatePropIfExists } from './update-prop-if-exists-command'
-import { runUpdatePropIfExists } from './update-prop-if-exists-command'
import type { HighlightElementsCommand } from './highlight-element-command'
import { runHighlightElementsCommand } from './highlight-element-command'
import type { InteractionLifecycle } from '../canvas-strategies/canvas-strategy-types'
@@ -102,7 +98,6 @@ export type CanvasCommand =
| WildcardPatch
| UpdateFunctionCommand
| StrategySwitched
- | AdjustNumberProperty
| AdjustCssLengthProperties
| ReparentElement
| DuplicateElement
@@ -119,7 +114,6 @@ export type CanvasCommand =
| PushIntendedBoundsAndUpdateHuggingElements
| DeleteProperties
| SetProperty
- | UpdatePropIfExists
| AddImportsToFile
| AddToReparentedToPaths
| InsertElementInsertionSubject
@@ -151,8 +145,6 @@ export function runCanvasCommand(
return runUpdateFunctionCommand(editorState, command, commandLifecycle)
case 'STRATEGY_SWITCHED':
return runStrategySwitchedCommand(command)
- case 'ADJUST_NUMBER_PROPERTY':
- return runAdjustNumberProperty(editorState, command)
case 'ADJUST_CSS_LENGTH_PROPERTY':
return runAdjustCssLengthProperties(editorState, command)
case 'REPARENT_ELEMENT':
@@ -187,8 +179,6 @@ export function runCanvasCommand(
return runSetProperty(editorState, command)
case 'UPDATE_BULK_PROPERTIES':
return runBulkUpdateProperties(editorState, command)
- case 'UPDATE_PROP_IF_EXISTS':
- return runUpdatePropIfExists(editorState, command)
case 'ADD_IMPORTS_TO_FILE':
return runAddImportsToFile(editorState, command)
case 'ADD_TO_REPARENTED_TO_PATHS':
diff --git a/editor/src/components/canvas/commands/convert-css-percent-to-px-command.ts b/editor/src/components/canvas/commands/convert-css-percent-to-px-command.ts
index 990dbc2ac63c..8b77cf92a033 100644
--- a/editor/src/components/canvas/commands/convert-css-percent-to-px-command.ts
+++ b/editor/src/components/canvas/commands/convert-css-percent-to-px-command.ts
@@ -16,8 +16,8 @@ import type { EditorState } from '../../editor/store/editor-state'
import { withUnderlyingTargetFromEditorState } from '../../editor/store/editor-state'
import type { CSSNumber } from '../../inspector/common/css-utils'
import { parseCSSPercent, printCSSNumber } from '../../inspector/common/css-utils'
-import { applyValuesAtPath } from './adjust-number-command'
import type { BaseCommand, CommandFunction, WhenToRun } from './commands'
+import { applyValuesAtPath } from './utils/property-utils'
export interface ConvertCssPercentToPx extends BaseCommand {
type: 'CONVERT_CSS_PERCENT_TO_PX'
diff --git a/editor/src/components/canvas/commands/convert-to-absolute-command.ts b/editor/src/components/canvas/commands/convert-to-absolute-command.ts
index 7ecb5b1726ab..2effb0eef891 100644
--- a/editor/src/components/canvas/commands/convert-to-absolute-command.ts
+++ b/editor/src/components/canvas/commands/convert-to-absolute-command.ts
@@ -7,8 +7,8 @@ import type { ValueAtPath } from '../../../core/shared/jsx-attributes'
import type { ElementPath } from '../../../core/shared/project-file-types'
import type { EditorState, EditorStatePatch } from '../../editor/store/editor-state'
import { stylePropPathMappingFn } from '../../inspector/common/property-path-hooks'
-import { applyValuesAtPath } from './adjust-number-command'
import type { BaseCommand, CommandFunction, WhenToRun } from './commands'
+import { applyValuesAtPath } from './utils/property-utils'
export interface ConvertToAbsolute extends BaseCommand {
type: 'CONVERT_TO_ABSOLUTE'
diff --git a/editor/src/components/canvas/commands/delete-properties-command.ts b/editor/src/components/canvas/commands/delete-properties-command.ts
index f1d8501385b3..65565b21d922 100644
--- a/editor/src/components/canvas/commands/delete-properties-command.ts
+++ b/editor/src/components/canvas/commands/delete-properties-command.ts
@@ -1,13 +1,9 @@
-import type { JSXElement } from '../../../core/shared/element-template'
-import type { EditorState, EditorStatePatch } from '../../../components/editor/store/editor-state'
-import { modifyUnderlyingElementForOpenFile } from '../../../components/editor/store/editor-state'
-import { foldEither } from '../../../core/shared/either'
-import { unsetJSXValuesAtPaths } from '../../../core/shared/jsx-attributes'
+import type { EditorState } from '../../../components/editor/store/editor-state'
import type { ElementPath, PropertyPath } from '../../../core/shared/project-file-types'
import type { BaseCommand, CommandFunction, WhenToRun } from './commands'
import * as EP from '../../../core/shared/element-path'
import * as PP from '../../../core/shared/property-path'
-import { patchParseSuccessAtElementPath } from './patch-utils'
+import { deleteValuesAtPath } from './utils/property-utils'
export interface DeleteProperties extends BaseCommand {
type: 'DELETE_PROPERTIES'
@@ -46,43 +42,3 @@ export const runDeleteProperties: CommandFunction = (
.join(',')} on ${EP.toUid(command.element)}`,
}
}
-
-export function deleteValuesAtPath(
- editorState: EditorState,
- target: ElementPath,
- properties: Array,
-): { editorStateWithChanges: EditorState; editorStatePatch: EditorStatePatch } {
- const workingEditorState = modifyUnderlyingElementForOpenFile(
- target,
- editorState,
- (element: JSXElement) => {
- return foldEither(
- () => {
- return element
- },
- (updatedProps) => {
- return {
- ...element,
- props: updatedProps,
- }
- },
- unsetJSXValuesAtPaths(element.props, properties),
- )
- },
- )
-
- const editorStatePatch = patchParseSuccessAtElementPath(target, workingEditorState, (success) => {
- return {
- topLevelElements: {
- $set: success.topLevelElements,
- },
- imports: {
- $set: success.imports,
- },
- }
- })
- return {
- editorStateWithChanges: workingEditorState,
- editorStatePatch: editorStatePatch,
- }
-}
diff --git a/editor/src/components/canvas/commands/set-css-length-command.ts b/editor/src/components/canvas/commands/set-css-length-command.ts
index cde200d644a5..0a4bafc4d315 100644
--- a/editor/src/components/canvas/commands/set-css-length-command.ts
+++ b/editor/src/components/canvas/commands/set-css-length-command.ts
@@ -25,9 +25,9 @@ import {
} from '../../inspector/common/css-utils'
import type { CreateIfNotExistant } from './adjust-css-length-command'
import { deleteConflictingPropsForWidthHeight } from './adjust-css-length-command'
-import { applyValuesAtPath } from './adjust-number-command'
import type { BaseCommand, CommandFunction, WhenToRun } from './commands'
import { addToastPatch } from './show-toast-command'
+import { applyValuesAtPath } from './utils/property-utils'
type CssNumberOrKeepOriginalUnit =
| { type: 'EXPLICIT_CSS_NUMBER'; value: CSSNumber | CSSKeyword }
diff --git a/editor/src/components/canvas/commands/set-property-command.ts b/editor/src/components/canvas/commands/set-property-command.ts
index a7b06f27de13..ca791fd81306 100644
--- a/editor/src/components/canvas/commands/set-property-command.ts
+++ b/editor/src/components/canvas/commands/set-property-command.ts
@@ -8,9 +8,8 @@ import type {
} from '../../../core/shared/project-file-types'
import * as PP from '../../../core/shared/property-path'
import type { EditorState } from '../../editor/store/editor-state'
-import { applyValuesAtPath } from './adjust-number-command'
import type { BaseCommand, CommandFunction, WhenToRun } from './commands'
-import { deleteValuesAtPath } from './delete-properties-command'
+import { applyValuesAtPath, deleteValuesAtPath } from './utils/property-utils'
type PositionProp = 'left' | 'top' | 'right' | 'bottom' | 'width' | 'height'
diff --git a/editor/src/components/canvas/commands/update-class-list-command.ts b/editor/src/components/canvas/commands/update-class-list-command.ts
index 208c80719ec8..1643ccbeea3c 100644
--- a/editor/src/components/canvas/commands/update-class-list-command.ts
+++ b/editor/src/components/canvas/commands/update-class-list-command.ts
@@ -14,8 +14,8 @@ import {
import { getTailwindConfigCached } from '../../../core/tailwind/tailwind-compilation'
import { getClassNameAttribute } from '../../../core/tailwind/tailwind-options'
import { getElementFromProjectContents, type EditorState } from '../../editor/store/editor-state'
-import { applyValuesAtPath } from './adjust-number-command'
import type { BaseCommand, CommandFunction, WhenToRun } from './commands'
+import { applyValuesAtPath } from './utils/property-utils'
export interface UpdateClassList extends BaseCommand {
type: 'UPDATE_CLASS_LIST'
diff --git a/editor/src/components/canvas/commands/update-prop-if-exists-command.ts b/editor/src/components/canvas/commands/update-prop-if-exists-command.ts
deleted file mode 100644
index 3f8677579462..000000000000
--- a/editor/src/components/canvas/commands/update-prop-if-exists-command.ts
+++ /dev/null
@@ -1,86 +0,0 @@
-import { foldEither, isRight } from '../../../core/shared/either'
-import * as EP from '../../../core/shared/element-path'
-import {
- emptyComments,
- modifiableAttributeIsAttributeNotFound,
- isJSXElement,
- jsExpressionValue,
-} from '../../../core/shared/element-template'
-import { getModifiableJSXAttributeAtPath } from '../../../core/shared/jsx-attribute-utils'
-import type { ElementPath, PropertyPath } from '../../../core/shared/project-file-types'
-import * as PP from '../../../core/shared/property-path'
-import type { EditorState } from '../../editor/store/editor-state'
-import { withUnderlyingTargetFromEditorState } from '../../editor/store/editor-state'
-import { applyValuesAtPath } from './adjust-number-command'
-import type { BaseCommand, CommandFunction, WhenToRun } from './commands'
-
-export interface UpdatePropIfExists extends BaseCommand {
- type: 'UPDATE_PROP_IF_EXISTS'
- element: ElementPath
- property: PropertyPath
- value: string
-}
-
-export function updatePropIfExists(
- whenToRun: WhenToRun,
- element: ElementPath,
- property: PropertyPath,
- value: string,
-): UpdatePropIfExists {
- return {
- type: 'UPDATE_PROP_IF_EXISTS',
- whenToRun: whenToRun,
- element: element,
- property: property,
- value: value,
- }
-}
-
-export const runUpdatePropIfExists: CommandFunction = (
- editorState: EditorState,
- command: UpdatePropIfExists,
-) => {
- // check if the prop exists
- const propertyExists = withUnderlyingTargetFromEditorState(
- command.element,
- editorState,
- false,
- (_, element) => {
- if (isJSXElement(element)) {
- return foldEither(
- () => false,
- (value) => !modifiableAttributeIsAttributeNotFound(value),
- getModifiableJSXAttributeAtPath(element.props, command.property),
- )
- } else {
- return false
- }
- },
- )
-
- if (propertyExists) {
- // Apply the update to the properties.
- const { editorStatePatch: propertyUpdatePatch } = applyValuesAtPath(
- editorState,
- command.element,
- [{ path: command.property, value: jsExpressionValue(command.value, emptyComments) }],
- )
-
- return {
- editorStatePatches: [propertyUpdatePatch],
- commandDescription: `Update Prop if Exists ${PP.toString(command.property)}=${JSON.stringify(
- command.property,
- null,
- 2,
- )} on ${EP.toUid(command.element)}`,
- }
- } else {
- // no op return to prevent updating a nonexistant prop. if you want to set a prop regardless whether it exists or not, use the setPropertyCommand
- return {
- editorStatePatches: [],
- commandDescription: `Update Prop if Exists did not find existing prop for ${PP.toString(
- command.property,
- )}`,
- }
- }
-}
diff --git a/editor/src/components/canvas/commands/utils/property-utils.ts b/editor/src/components/canvas/commands/utils/property-utils.ts
new file mode 100644
index 000000000000..0198ad74bcc7
--- /dev/null
+++ b/editor/src/components/canvas/commands/utils/property-utils.ts
@@ -0,0 +1,88 @@
+import type { ElementPath, JSXElement, PropertyPath } from 'utopia-shared/src/types'
+import { foldEither } from '../../../../core/shared/either'
+import type { ValueAtPath } from '../../../../core/shared/jsx-attributes'
+import { setJSXValuesAtPaths, unsetJSXValuesAtPaths } from '../../../../core/shared/jsx-attributes'
+import type { EditorState, EditorStatePatch } from '../../../editor/store/editor-state'
+import { modifyUnderlyingElementForOpenFile } from '../../../editor/store/editor-state'
+import { patchParseSuccessAtElementPath } from '../patch-utils'
+
+export function applyValuesAtPath(
+ editorState: EditorState,
+ target: ElementPath,
+ jsxValuesAndPathsToSet: ValueAtPath[],
+): { editorStateWithChanges: EditorState; editorStatePatch: EditorStatePatch } {
+ const workingEditorState = modifyUnderlyingElementForOpenFile(
+ target,
+ editorState,
+ (element: JSXElement) => {
+ return foldEither(
+ () => {
+ return element
+ },
+ (updatedProps) => {
+ return {
+ ...element,
+ props: updatedProps,
+ }
+ },
+ setJSXValuesAtPaths(element.props, jsxValuesAndPathsToSet),
+ )
+ },
+ )
+
+ const editorStatePatch = patchParseSuccessAtElementPath(target, workingEditorState, (success) => {
+ return {
+ topLevelElements: {
+ $set: success.topLevelElements,
+ },
+ imports: {
+ $set: success.imports,
+ },
+ }
+ })
+
+ return {
+ editorStateWithChanges: workingEditorState,
+ editorStatePatch: editorStatePatch,
+ }
+}
+
+export function deleteValuesAtPath(
+ editorState: EditorState,
+ target: ElementPath,
+ properties: Array,
+): { editorStateWithChanges: EditorState; editorStatePatch: EditorStatePatch } {
+ const workingEditorState = modifyUnderlyingElementForOpenFile(
+ target,
+ editorState,
+ (element: JSXElement) => {
+ return foldEither(
+ () => {
+ return element
+ },
+ (updatedProps) => {
+ return {
+ ...element,
+ props: updatedProps,
+ }
+ },
+ unsetJSXValuesAtPaths(element.props, properties),
+ )
+ },
+ )
+
+ const editorStatePatch = patchParseSuccessAtElementPath(target, workingEditorState, (success) => {
+ return {
+ topLevelElements: {
+ $set: success.topLevelElements,
+ },
+ imports: {
+ $set: success.imports,
+ },
+ }
+ })
+ return {
+ editorStateWithChanges: workingEditorState,
+ editorStatePatch: editorStatePatch,
+ }
+}
diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx
index 756944ad8a37..2cb226ce961e 100644
--- a/editor/src/components/canvas/controls/grid-controls.tsx
+++ b/editor/src/components/canvas/controls/grid-controls.tsx
@@ -63,7 +63,7 @@ import {
import type { GridCellCoordinates } from '../canvas-strategies/strategies/grid-cell-bounds'
import { gridCellTargetId } from '../canvas-strategies/strategies/grid-cell-bounds'
import {
- getGlobalFrameOfGridCell,
+ getGlobalFrameOfGridCellFromMetadata,
getGridRelatedIndexes,
} from '../canvas-strategies/strategies/grid-helpers'
import { canResizeGridTemplate } from '../canvas-strategies/strategies/resize-grid-strategy'
@@ -309,7 +309,7 @@ const GridResizingStripedIndicator = React.memo((props: GridResizingControlProps
}}
>
{when(
- props.dimension.areaName != null,
+ props.dimension.lineName != null,
- {props.dimension.areaName}
+ {props.dimension.lineName}
,
)}
,
@@ -1153,7 +1153,7 @@ const AbsoluteDistanceIndicators = React.memo(
if (gridMetadata == null || props.targetRootCell == null) {
return null
}
- return getGlobalFrameOfGridCell(gridMetadata, props.targetRootCell)
+ return getGlobalFrameOfGridCellFromMetadata(gridMetadata, props.targetRootCell)
}, [props.targetRootCell, gridMetadata])
const distanceTop =
@@ -1460,7 +1460,7 @@ function useCellAnimation(params: {
return null
}
- return getGlobalFrameOfGridCell(gridMetadata, targetRootCell)
+ return getGlobalFrameOfGridCellFromMetadata(gridMetadata, targetRootCell)
}, [gridMetadata, targetRootCell])
React.useEffect(() => {
diff --git a/editor/src/components/canvas/controls/select-mode/flex-gap-control.test-utils.tsx b/editor/src/components/canvas/controls/select-mode/flex-gap-control.test-utils.tsx
index a17811afdd54..a5d6243d21ae 100644
--- a/editor/src/components/canvas/controls/select-mode/flex-gap-control.test-utils.tsx
+++ b/editor/src/components/canvas/controls/select-mode/flex-gap-control.test-utils.tsx
@@ -38,6 +38,7 @@ export async function checkFlexGapHandlesPositionedCorrectly(
const localFrame = MetadataUtils.getLocalFrame(
selectedElement.elementPath,
editorState.jsxMetadata,
+ null,
)
const selectedElementFrame = zeroRectIfNullOrInfinity(localFrame)
// If this is a flex element and it has a gap specified.
diff --git a/editor/src/components/canvas/controls/select-mode/flex-gap-control.tsx b/editor/src/components/canvas/controls/select-mode/flex-gap-control.tsx
index 950974fdf078..f210ec1e0621 100644
--- a/editor/src/components/canvas/controls/select-mode/flex-gap-control.tsx
+++ b/editor/src/components/canvas/controls/select-mode/flex-gap-control.tsx
@@ -178,7 +178,7 @@ export const FlexGapControl = controlForStrategyMemoized