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 401fe101782e..8f5029506b21 100644 --- a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts +++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts @@ -249,14 +249,14 @@ export function setGridPropsCommands( const rowStart = gridPositionToValue(gridProps.gridRowStart) const rowEnd = gridPositionToValue(gridProps.gridRowEnd) - const areaColumnStart = asMaybeNamedAreaOrValue(gridTemplate, 'column', columnStart) - const areaColumnEnd = asMaybeNamedAreaOrValue(gridTemplate, 'column', columnEnd) - const areaRowStart = asMaybeNamedAreaOrValue(gridTemplate, 'row', rowStart) - const areaRowEnd = asMaybeNamedAreaOrValue(gridTemplate, 'row', rowEnd) + const lineColumnStart = asMaybeNamedLineOrValue(gridTemplate, 'column', columnStart) + const lineColumnEnd = asMaybeNamedLineOrValue(gridTemplate, 'column', columnEnd) + const lineRowStart = asMaybeNamedLineOrValue(gridTemplate, 'row', rowStart) + const lineRowEnd = asMaybeNamedLineOrValue(gridTemplate, 'row', rowEnd) if (columnStart != null && columnStart === columnEnd) { commands.push( - setProperty('always', elementPath, PP.create('style', 'gridColumn'), areaColumnStart), + setProperty('always', elementPath, PP.create('style', 'gridColumn'), lineColumnStart), ) } else if ( columnStart != null && @@ -266,23 +266,23 @@ export function setGridPropsCommands( columnStart === columnEnd - 1 ) { commands.push( - setProperty('always', elementPath, PP.create('style', 'gridColumn'), areaColumnStart), + setProperty('always', elementPath, PP.create('style', 'gridColumn'), lineColumnStart), ) } else { if (columnStart != null) { commands.push( - setProperty('always', elementPath, PP.create('style', 'gridColumnStart'), areaColumnStart), + setProperty('always', elementPath, PP.create('style', 'gridColumnStart'), lineColumnStart), ) } if (columnEnd != null) { commands.push( - setProperty('always', elementPath, PP.create('style', 'gridColumnEnd'), areaColumnEnd), + setProperty('always', elementPath, PP.create('style', 'gridColumnEnd'), lineColumnEnd), ) } } if (rowStart != null && rowStart === rowEnd) { - commands.push(setProperty('always', elementPath, PP.create('style', 'gridRow'), areaRowStart)) + commands.push(setProperty('always', elementPath, PP.create('style', 'gridRow'), lineRowStart)) } else if ( rowStart != null && typeof rowStart === 'number' && @@ -290,16 +290,16 @@ export function setGridPropsCommands( typeof rowEnd === 'number' && rowStart === rowEnd - 1 ) { - commands.push(setProperty('always', elementPath, PP.create('style', 'gridRow'), areaRowStart)) + commands.push(setProperty('always', elementPath, PP.create('style', 'gridRow'), lineRowStart)) } else { if (rowStart != null) { commands.push( - setProperty('always', elementPath, PP.create('style', 'gridRowStart'), areaRowStart), + setProperty('always', elementPath, PP.create('style', 'gridRowStart'), lineRowStart), ) } if (rowEnd != null) { commands.push( - setProperty('always', elementPath, PP.create('style', 'gridRowEnd'), areaRowEnd), + setProperty('always', elementPath, PP.create('style', 'gridRowEnd'), lineRowEnd), ) } } @@ -352,7 +352,7 @@ function getCellCoordsDelta( return gridCellCoordinates(rowDiff, columnDiff) } -function asMaybeNamedAreaOrValue( +function asMaybeNamedLineOrValue( grid: GridContainerProperties, axis: 'row' | 'column', value: number | string | null, @@ -362,9 +362,9 @@ function asMaybeNamedAreaOrValue( } else if (typeof value === 'number') { const template = axis === 'row' ? grid.gridTemplateRows : grid.gridTemplateColumns if (template?.type === 'DIMENSIONS') { - const maybeAreaStart = template.dimensions.at(value - 1) - if (maybeAreaStart != null && maybeAreaStart.areaName != null) { - return maybeAreaStart.areaName + const maybeLineStart = template.dimensions.at(value - 1) + if (maybeLineStart != null && maybeLineStart.lineName != null) { + return maybeLineStart.lineName } } return value === 0 ? 1 : value @@ -602,12 +602,12 @@ function alterGridTemplateDimensions(params: { if (before.length + after.length === 0) { return null } - return gridCSSRepeat(dim.times, [...before, ...after], dim.areaName) + return gridCSSRepeat(dim.times, [...before, ...after], dim.lineName) case 'REPLACE': return gridCSSRepeat( dim.times, [...before, params.patch.newValue, ...after], - dim.areaName, + dim.lineName, ) default: assertNever(params.patch) 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..2df2477034eb 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 @@ -165,7 +165,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,7 +181,7 @@ 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) diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx index 756944ad8a37..91ae616bf5ae 100644 --- a/editor/src/components/canvas/controls/grid-controls.tsx +++ b/editor/src/components/canvas/controls/grid-controls.tsx @@ -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}
, )} , diff --git a/editor/src/components/editor/store/store-deep-equality-instances.ts b/editor/src/components/editor/store/store-deep-equality-instances.ts index cdf9eabda3f7..872d6b86b085 100644 --- a/editor/src/components/editor/store/store-deep-equality-instances.ts +++ b/editor/src/components/editor/store/store-deep-equality-instances.ts @@ -1977,7 +1977,7 @@ export const GridCSSNumberKeepDeepEquality: KeepDeepEqualityCall combine2EqualityCalls( (p) => p.value, CSSNumberKeepDeepEquality, - (p) => p.areaName, + (p) => p.lineName, NullableStringKeepDeepEquality, gridCSSNumber, ) @@ -1986,7 +1986,7 @@ export const GridCSSKeywordKeepDeepEquality: KeepDeepEqualityCall p.value, createCallWithTripleEquals(), - (p) => p.areaName, + (p) => p.lineName, NullableStringKeepDeepEquality, gridCSSKeyword, ) @@ -2030,7 +2030,7 @@ export const GridCSSRepeatKeepDeepEquality: KeepDeepEqualityCall createCallWithTripleEquals(), (p) => p.value, arrayDeepEquality(GridDimensionKeepDeepEquality), - (p) => p.areaName, + (p) => p.lineName, NullableStringKeepDeepEquality, gridCSSRepeat, ) @@ -2064,7 +2064,7 @@ export const GridCSSMinmaxKeepDeepEquality: KeepDeepEqualityCall GridCSSNumberOrKeywordKeepDeepEquality, (p) => p.max, GridCSSNumberOrKeywordKeepDeepEquality, - (p) => p.areaName, + (p) => p.lineName, NullableStringKeepDeepEquality, gridCSSMinmax, ) diff --git a/editor/src/components/inspector/common/css-utils.ts b/editor/src/components/inspector/common/css-utils.ts index 82b0ddcfd882..eb74150ed104 100644 --- a/editor/src/components/inspector/common/css-utils.ts +++ b/editor/src/components/inspector/common/css-utils.ts @@ -583,7 +583,7 @@ export type GridCSSNumberUnit = LengthUnit | ResolutionUnit | PercentUnit | 'fr' const GridCSSNumberUnits: Array = [...LengthUnits, ...ResolutionUnits, '%', 'fr'] type BaseGridDimension = { - areaName: string | null + lineName: string | null } export type GridCSSNumber = BaseGridDimension & { @@ -630,17 +630,17 @@ export function gridDimensionsAreEqual(a: GridDimension, b: GridDimension): bool type BaseGridCSSRepeat = { type: 'REPEAT' value: Array - areaName: string | null + lineName: string | null } function baseGridCSSRepeat( value: Array, - areaName: string | null, + lineName: string | null, ): BaseGridCSSRepeat { return { type: 'REPEAT', value: value, - areaName: areaName, + lineName: lineName, } } @@ -651,10 +651,10 @@ type GridCSSRepeatStatic = BaseGridCSSRepeat & { function gridCSSRepeatStatic( times: number, value: Array, - areaName: string | null, + lineName: string | null, ): GridCSSRepeatStatic { return { - ...baseGridCSSRepeat(value, areaName), + ...baseGridCSSRepeat(value, lineName), times: times, } } @@ -666,10 +666,10 @@ type GridCSSRepeatDynamic = BaseGridCSSRepeat & { function gridCSSRepeatDynamic( times: CSSKeyword<'auto-fill' | 'auto-fit'>, value: Array, - areaName: string | null, + lineName: string | null, ): GridCSSRepeatDynamic { return { - ...baseGridCSSRepeat(value, areaName), + ...baseGridCSSRepeat(value, lineName), times: times, } } @@ -713,24 +713,24 @@ export function isGridCSSKeyword(dim: GridDimension): dim is GridCSSKeyword { export function gridCSSKeyword( value: CSSKeyword, - areaName: string | null, + lineName: string | null, ): GridCSSKeyword { return { type: 'KEYWORD', value: value, - areaName: areaName, + lineName: lineName, } } export function gridCSSRepeat( times: GridCSSRepeatTimes, value: GridDimension[], - areaName: string | null, + lineName: string | null, ): GridCSSRepeat { if (typeof times === 'number') { - return gridCSSRepeatStatic(times, value, areaName) + return gridCSSRepeatStatic(times, value, lineName) } else { - return gridCSSRepeatDynamic(times, value, areaName) + return gridCSSRepeatDynamic(times, value, lineName) } } @@ -749,21 +749,21 @@ export function isGridCSSMinmax(dim: GridDimension): dim is GridCSSMinmax { export function gridCSSMinmax( min: GridCSSNumber | GridCSSKeyword, max: GridCSSNumber | GridCSSKeyword, - areaName: string | null, + lineName: string | null, ): GridCSSMinmax { return { type: 'MINMAX', min: min, max: max, - areaName: areaName, + lineName: lineName, } } -export function gridCSSNumber(value: CSSNumber, areaName: string | null): GridCSSNumber { +export function gridCSSNumber(value: CSSNumber, lineName: string | null): GridCSSNumber { return { type: 'NUMBER', value: value, - areaName: areaName, + lineName: lineName, } } @@ -949,8 +949,8 @@ export function printCSSNumber( } export function printGridDimensionCSS(dimension: GridDimension): string { - const areaName = dimension.areaName != null ? `[${dimension.areaName}] ` : '' - return areaName + stringifyGridDimension(dimension) + const lineName = dimension.lineName != null ? `[${dimension.lineName}] ` : '' + return lineName + stringifyGridDimension(dimension) } export function stringifyGridDimension(dimension: GridDimension): string { @@ -1083,19 +1083,19 @@ export function parseToCSSGridDimension(input: unknown): Either { return { ...value, - areaName: value.type === 'REPEAT' ? null : areaName, + lineName: value.type === 'REPEAT' ? null : lineName, } as GridDimension }, parseCSSGrid(inputToParse)) } @@ -1128,7 +1128,7 @@ export function parseGridPosition( const referenceTemplate = axis === 'row' ? container.gridTemplateRows : container.gridTemplateColumns if (referenceTemplate?.type === 'DIMENSIONS') { - const maybeArea = referenceTemplate.dimensions.findIndex((dim) => dim.areaName === input) + const maybeArea = referenceTemplate.dimensions.findIndex((dim) => dim.lineName === input) if (maybeArea >= 0) { let value = gridPositionValue(maybeArea + 1) if ( @@ -1236,12 +1236,12 @@ export function parseGridAutoOrTemplateBase( export function parseGridChildren( children: csstree.List, ): Either { - let nextAreaName: string | null = null + let nextLineName: string | null = null - function getAreaName() { - const currentAreaName = nextAreaName != null ? `${nextAreaName}` : null - nextAreaName = null - return currentAreaName + function getLineName() { + const currentLineName = nextLineName != null ? `${nextLineName}` : null + nextLineName = null + return currentLineName } let dimensions: GridDimension[] = [] @@ -1250,7 +1250,7 @@ export function parseGridChildren( case 'Dimension': { const parsedDimension = parseCSSNumber(`${child.value}${child.unit}`, 'AnyValid') if (isRight(parsedDimension)) { - dimensions.push(gridCSSNumber(parsedDimension.value, getAreaName())) + dimensions.push(gridCSSNumber(parsedDimension.value, getLineName())) } else { return left('Invalid grid CSS dimension.') } @@ -1258,7 +1258,7 @@ export function parseGridChildren( } case 'Identifier': { if (isValidGridDimensionKeyword(child.name)) { - dimensions.push(gridCSSKeyword(cssKeyword(child.name), getAreaName())) + dimensions.push(gridCSSKeyword(cssKeyword(child.name), getLineName())) } else { return left('Invalid grid CSS keyword.') } @@ -1274,7 +1274,7 @@ export function parseGridChildren( return left('Invalid grid CSS repeat times.') } - const areaName = getAreaName() + const lineName = getLineName() const values = new csstree.List().fromArray( otherChildren.filter( @@ -1287,7 +1287,7 @@ export function parseGridChildren( ) const parsedDimensions = parseGridChildren(values) if (isRight(parsedDimensions)) { - dimensions.push(gridCSSRepeat(times, parsedDimensions.value, areaName)) + dimensions.push(gridCSSRepeat(times, parsedDimensions.value, lineName)) } else { return left('Invalid grid CSS repeat values.') } @@ -1311,7 +1311,7 @@ export function parseGridChildren( ) { return left('Invalid minmax arguments.') } - dimensions.push(gridCSSMinmax(min, max, getAreaName())) + dimensions.push(gridCSSMinmax(min, max, getLineName())) } break } @@ -1321,8 +1321,8 @@ export function parseGridChildren( break } case 'Brackets': { - // The next child will get this area name - nextAreaName = child.children.toArray().find((c) => c.type === 'Identifier')?.name ?? null + // The next child will get this line name + nextLineName = child.children.toArray().find((c) => c.type === 'Identifier')?.name ?? null break } default: diff --git a/editor/src/components/inspector/flex-section.spec.browser2.tsx b/editor/src/components/inspector/flex-section.spec.browser2.tsx index fb151839b8b8..e7c1749b892c 100644 --- a/editor/src/components/inspector/flex-section.spec.browser2.tsx +++ b/editor/src/components/inspector/flex-section.spec.browser2.tsx @@ -12,7 +12,7 @@ describe('flex section', () => { const control = await screen.findByTestId('grid-dimension-column-0') await typeIntoField(control, '200px') const grid = await renderResult.renderedDOM.findByTestId('grid') - expect(grid.style.gridTemplateColumns).toEqual('[area1] 200px 1fr 1fr 1fr 1fr') + expect(grid.style.gridTemplateColumns).toEqual('[line1] 200px 1fr 1fr 1fr 1fr') }) it('can type a number without unit for dimension', async () => { const renderResult = await renderTestEditorWithCode(gridProject, 'await-first-dom-report') @@ -20,7 +20,7 @@ describe('flex section', () => { const control = await screen.findByTestId('grid-dimension-column-0') await typeIntoField(control, '2') const grid = await renderResult.renderedDOM.findByTestId('grid') - expect(grid.style.gridTemplateColumns).toEqual('[area1] 2fr 1fr 1fr 1fr 1fr') + expect(grid.style.gridTemplateColumns).toEqual('[line1] 2fr 1fr 1fr 1fr 1fr') }) it('can type a fractional number for dimension', async () => { const renderResult = await renderTestEditorWithCode(gridProject, 'await-first-dom-report') @@ -28,7 +28,7 @@ describe('flex section', () => { const control = await screen.findByTestId('grid-dimension-column-0') await typeIntoField(control, '2fr') const grid = await renderResult.renderedDOM.findByTestId('grid') - expect(grid.style.gridTemplateColumns).toEqual('[area1] 2fr 1fr 1fr 1fr 1fr') + expect(grid.style.gridTemplateColumns).toEqual('[line1] 2fr 1fr 1fr 1fr 1fr') }) it('can type a keyword for dimension', async () => { const renderResult = await renderTestEditorWithCode(gridProject, 'await-first-dom-report') @@ -36,7 +36,7 @@ describe('flex section', () => { const control = await screen.findByTestId('grid-dimension-column-0') await typeIntoField(control, 'min-content') const grid = await renderResult.renderedDOM.findByTestId('grid') - expect(grid.style.gridTemplateColumns).toEqual('[area1] min-content 1fr 1fr 1fr 1fr') + expect(grid.style.gridTemplateColumns).toEqual('[line1] min-content 1fr 1fr 1fr 1fr') }) it('ignores a typed invalid keyword for dimension', async () => { const renderResult = await renderTestEditorWithCode(gridProject, 'await-first-dom-report') @@ -44,7 +44,7 @@ describe('flex section', () => { const control = await screen.findByTestId('grid-dimension-column-0') await typeIntoField(control, 'not-a-keyword') const grid = await renderResult.renderedDOM.findByTestId('grid') - expect(grid.style.gridTemplateColumns).toEqual('[area1] 1fr 1fr 1fr 1fr 1fr') + expect(grid.style.gridTemplateColumns).toEqual('[line1] 1fr 1fr 1fr 1fr 1fr') }) it('defaults to auto if empty', async () => { const renderResult = await renderTestEditorWithCode(gridProject, 'await-first-dom-report') @@ -52,7 +52,7 @@ describe('flex section', () => { const control = await screen.findByTestId('grid-dimension-column-0') await typeIntoField(control, null) const grid = await renderResult.renderedDOM.findByTestId('grid') - expect(grid.style.gridTemplateColumns).toEqual('[area1] auto 1fr 1fr 1fr 1fr') + expect(grid.style.gridTemplateColumns).toEqual('[line1] auto 1fr 1fr 1fr 1fr') }) it('updates a repeat expression', async () => { const renderResult = await renderTestEditorWithCode( @@ -64,15 +64,15 @@ describe('flex section', () => { const grid = await renderResult.renderedDOM.findByTestId('grid') const input: HTMLInputElement = await screen.findByTestId('grid-dimension-column-1') await typeIntoField(input, 'repeat(2, 0.5fr 42px)') - expect(grid.style.gridTemplateColumns).toEqual('[area1] 1fr repeat(2, 0.5fr 42px) 2fr') + expect(grid.style.gridTemplateColumns).toEqual('[line1] 1fr repeat(2, 0.5fr 42px) 2fr') expect(input.value).toBe('repeat(2, 0.5fr 42px)') }) - it('does not show area names in the input', async () => { + it('does not show line names in the input', async () => { const renderResult = await renderTestEditorWithCode(gridProject, 'await-first-dom-report') await selectComponentsForTest(renderResult, [EP.fromString('sb/grid')]) const control: HTMLInputElement = await screen.findByTestId('grid-dimension-column-0') const grid = await renderResult.renderedDOM.findByTestId('grid') - expect(grid.style.gridTemplateColumns).toEqual('[area1] 1fr 1fr 1fr 1fr 1fr') + expect(grid.style.gridTemplateColumns).toEqual('[line1] 1fr 1fr 1fr 1fr 1fr') expect(control.value).toBe('1fr') }) }) @@ -142,7 +142,7 @@ export var storyboard = ( style={{ display: 'grid', gridTemplateRows: '80px 1fr 1fr', - gridTemplateColumns: '[area1] 1fr 1fr 1fr 1fr 1fr', + gridTemplateColumns: '[line1] 1fr 1fr 1fr 1fr 1fr', gridGap: 10, height: 322, width: 364, @@ -166,7 +166,7 @@ export var storyboard = ( width: 41, height: 23, border: '1px solid #000', - gridColumn: 'area1', + gridColumn: 'line1', gridRow: 1, backgroundColor: '#09f', }} @@ -223,7 +223,7 @@ export var storyboard = ( width: 41, height: 23, border: '1px solid #000', - gridColumn: 'area1', + gridColumn: 'line1', gridRow: 1, backgroundColor: '#09f', }} @@ -258,7 +258,7 @@ export var storyboard = ( style={{ display: 'grid', gridTemplateRows: '80px 1fr 1fr', - gridTemplateColumns: '[area1] 1fr repeat(2, 10px 30px) 2fr', + gridTemplateColumns: '[line1] 1fr repeat(2, 10px 30px) 2fr', gridGap: 10, height: 322, width: 364, @@ -282,7 +282,7 @@ export var storyboard = ( width: 41, height: 23, border: '1px solid #000', - gridColumn: 'area1', + gridColumn: 'line1', gridRow: 1, backgroundColor: '#09f', }} diff --git a/editor/src/components/inspector/flex-section.tsx b/editor/src/components/inspector/flex-section.tsx index 5d27487c3357..34f9aaf4cf29 100644 --- a/editor/src/components/inspector/flex-section.tsx +++ b/editor/src/components/inspector/flex-section.tsx @@ -387,22 +387,22 @@ const TemplateDimensionControl = React.memo( if (dimensions?.type !== 'DIMENSIONS') { return } - const currentAreaName = dimensions.dimensions[index]?.areaName ?? undefined + const currentLineName = dimensions.dimensions[index]?.lineName ?? undefined - const rawNewAreaName = window.prompt('Area name:', currentAreaName)?.trim() - if (rawNewAreaName == null) { + const rawNewLineName = window.prompt('Line name:', currentLineName)?.trim() + if (rawNewLineName == null) { return } - const newAreaName: string | null = - rawNewAreaName.length === 0 ? null : sanitizeAreaName(rawNewAreaName) + const newLineName: string | null = + rawNewLineName.length === 0 ? null : sanitizeLineName(rawNewLineName) const left = template.dimensions.slice(0, index) const right = template.dimensions.slice(index + 1) const newValues = [ ...left, - { ...values[index], areaName: newAreaName } as GridDimension, + { ...values[index], lineName: newLineName } as GridDimension, ...right, ] @@ -415,13 +415,13 @@ const TemplateDimensionControl = React.memo( ), ] - // replace the area name in the template and update the grid children so they - // reference the new area name, if they used to reference the previous one - const adjustedGridTemplate = renameAreaInTemplateAtIndex( + // replace the line name in the template and update the grid children so they + // reference the new line name, if they used to reference the previous one + const adjustedGridTemplate = renameLineInTemplateAtIndex( container, axis, index, - newAreaName, + newLineName, ) const children = MetadataUtils.getChildrenUnordered(metadataRef.current, grid.elementPath) for (const child of children) { @@ -575,9 +575,9 @@ function AxisDimensionControl({ const title = React.useMemo(() => { if (isDynamic) { - return value.areaName ?? dynamicIndexTitle + return value.lineName ?? dynamicIndexTitle } - return value.areaName ?? indexFrom + return value.lineName ?? indexFrom }, [value, indexFrom, isDynamic, dynamicIndexTitle]) const gridExpressionInputFocused = useGridExpressionInputFocused() @@ -694,17 +694,17 @@ function removeTemplateValueAtIndex( } } -function renameAreaInTemplateAtIndex( +function renameLineInTemplateAtIndex( original: GridContainerProperties, axis: 'column' | 'row', index: number, - newAreaName: string | null, + newLineName: string | null, ): GridContainerProperties { function renameDimension(dimension: GridDimension, idx: number): GridDimension { return idx === index ? ({ ...dimension, - areaName: dimension.type === 'REPEAT' ? null : newAreaName, + lineName: dimension.type === 'REPEAT' ? null : newLineName, } as GridDimension) : dimension } @@ -734,8 +734,8 @@ function renameAreaInTemplateAtIndex( const reAlphanumericDashUnderscore = /[^0-9a-z\-_]+/gi -function sanitizeAreaName(areaName: string): string { - return areaName.replace(reAlphanumericDashUnderscore, '-') +function sanitizeLineName(lineName: string): string { + return lineName.replace(reAlphanumericDashUnderscore, '-') } function serializeValue(v: CSSNumber) { diff --git a/editor/src/components/inspector/grid-helpers.ts b/editor/src/components/inspector/grid-helpers.ts index 8e5f2b967156..ef8be9bff817 100644 --- a/editor/src/components/inspector/grid-helpers.ts +++ b/editor/src/components/inspector/grid-helpers.ts @@ -33,12 +33,12 @@ export function parseGridDimensionInput( currentValue != null && isGridCSSNumber(currentValue) ? currentValue.value.unit : null return gridCSSNumber( cssNumber(value.value, value.unit ?? maybeUnit), - currentValue?.areaName ?? null, + currentValue?.lineName ?? null, ) } else if (isCSSKeyword(value)) { - return gridCSSKeyword(value, currentValue?.areaName ?? null) + return gridCSSKeyword(value, currentValue?.lineName ?? null) } else if (isEmptyInputValue(value)) { - return gridCSSKeyword(cssKeyword('auto'), currentValue?.areaName ?? null) + return gridCSSKeyword(cssKeyword('auto'), currentValue?.lineName ?? null) } else { return null } diff --git a/editor/src/components/inspector/sections/style-section/container-subsection/grid-cell-subsection.tsx b/editor/src/components/inspector/sections/style-section/container-subsection/grid-cell-subsection.tsx index 4550fb33fef7..6cfcc258cb5e 100644 --- a/editor/src/components/inspector/sections/style-section/container-subsection/grid-cell-subsection.tsx +++ b/editor/src/components/inspector/sections/style-section/container-subsection/grid-cell-subsection.tsx @@ -190,12 +190,12 @@ const DimensionsControls = React.memo( ? gridPositionValue(e.value) : cssKeyword(e.value) - const maybeAreaValue = maybeValueFromAreaName( + const maybeLineValue = maybeValueFromLineName( value, dimension === 'gridColumnStart' || dimension === 'width' ? columnLabels : rowLabels, ) - if (maybeAreaValue != null) { - value = maybeAreaValue + if (maybeLineValue != null) { + value = maybeLineValue } let newValues = { @@ -277,8 +277,8 @@ const DimensionsControls = React.memo( onSubmitValue={onSubmitPosition('gridColumnStart')} value={columnStartValue.value} valueAlias={columnStartValue.alias} - keywords={keywordsForPosition(columnLabels.map((l) => l.areaName))} - keywordTypeCheck={isValidGridPositionKeyword(columnLabels.map((l) => l.areaName))} + keywords={keywordsForPosition(columnLabels.map((l) => l.lineName))} + keywordTypeCheck={isValidGridPositionKeyword(columnLabels.map((l) => l.lineName))} labelInner={{ category: 'inspector-element', type: 'gridColumn', @@ -290,8 +290,8 @@ const DimensionsControls = React.memo( onSubmitValue={onSubmitPosition('gridRowStart')} value={rowStartValue.value} valueAlias={rowStartValue.alias} - keywords={keywordsForPosition(rowLabels.map((l) => l.areaName))} - keywordTypeCheck={isValidGridPositionKeyword(rowLabels.map((l) => l.areaName))} + keywords={keywordsForPosition(rowLabels.map((l) => l.lineName))} + keywordTypeCheck={isValidGridPositionKeyword(rowLabels.map((l) => l.lineName))} labelInner={{ category: 'inspector-element', type: 'gridRow', @@ -354,14 +354,14 @@ const BoundariesControls = React.memo( ? gridPositionValue(e.value) : cssKeyword(e.value) - const maybeAreaValue = maybeValueFromAreaName( + const maybeLineValue = maybeValueFromLineName( value, dimension === 'gridColumnStart' || dimension === 'gridColumnEnd' ? columnLabels : rowLabels, ) - if (maybeAreaValue != null) { - value = maybeAreaValue + if (maybeLineValue != null) { + value = maybeLineValue } const newValues = { @@ -418,8 +418,8 @@ const BoundariesControls = React.memo( type: 'gridColumn-start', color: 'on-highlight-secondary', }} - keywords={keywordsForPosition(columnLabels.map((l) => l.areaName))} - keywordTypeCheck={isValidGridPositionKeyword(columnLabels.map((l) => l.areaName))} + keywords={keywordsForPosition(columnLabels.map((l) => l.lineName))} + keywordTypeCheck={isValidGridPositionKeyword(columnLabels.map((l) => l.lineName))} /> l.areaName))} - keywordTypeCheck={isValidGridPositionKeyword(rowLabels.map((l) => l.areaName))} + keywords={keywordsForPosition(rowLabels.map((l) => l.lineName))} + keywordTypeCheck={isValidGridPositionKeyword(rowLabels.map((l) => l.lineName))} /> @@ -449,8 +449,8 @@ const BoundariesControls = React.memo( type: 'gridColumn-end', color: 'on-highlight-secondary', }} - keywords={keywordsForPosition(columnLabels.map((l) => l.areaName))} - keywordTypeCheck={isValidGridPositionKeyword(columnLabels.map((l) => l.areaName))} + keywords={keywordsForPosition(columnLabels.map((l) => l.lineName))} + keywordTypeCheck={isValidGridPositionKeyword(columnLabels.map((l) => l.lineName))} /> l.areaName))} - keywordTypeCheck={isValidGridPositionKeyword(rowLabels.map((l) => l.areaName))} + keywords={keywordsForPosition(rowLabels.map((l) => l.lineName))} + keywordTypeCheck={isValidGridPositionKeyword(rowLabels.map((l) => l.lineName))} /> @@ -496,10 +496,10 @@ function getLabelsFromTemplate(gridTemplate: GridContainerProperties) { return [] } return mapDropNulls((d, index) => { - if (d.areaName == null) { + if (d.lineName == null) { return null } - return { areaName: d.areaName, position: index + 1 } + return { lineName: d.lineName, position: index + 1 } }, template.dimensions) } const columnLabels = getAxisLabels('gridTemplateColumns') @@ -523,28 +523,28 @@ function keywordsForPosition(labels: string[]) { return items } -function maybeValueFromAreaName( +function maybeValueFromLineName( value: GridPosition, - labels: { areaName: string; position: number }[], + labels: { lineName: string; position: number }[], ): GridPositionValue | null { if (!isCSSKeyword(value)) { return null } - const areaMatch = labels.find((l) => l.areaName === value.value) - if (areaMatch != null) { - return gridPositionValue(areaMatch.position) + const lineMatch = labels.find((l) => l.lineName === value.value) + if (lineMatch != null) { + return gridPositionValue(lineMatch.position) } return null } function getValueWithAlias( position: GridPosition | null, - labels: { areaName: string; position: number }[], + labels: { lineName: string; position: number }[], ) { const value = getValue(position) ?? cssKeyword('auto') if (isCSSKeyword(value)) { return { value: value } } - const areaName = labels.find((l) => l.position === value.value) - return { value: value, alias: areaName?.areaName } + const lineName = labels.find((l) => l.position === value.value) + return { value: value, alias: lineName?.lineName } } diff --git a/editor/src/core/shared/element-template.ts b/editor/src/core/shared/element-template.ts index 6e054876f9cf..f7b204760872 100644 --- a/editor/src/core/shared/element-template.ts +++ b/editor/src/core/shared/element-template.ts @@ -2667,7 +2667,7 @@ export function gridPositionValue(numericalPosition: number | null): GridPositio export const validGridPositionKeywords = ['auto'] -export type ValidGridPositionKeyword = string // using because valid keywords are also area names we cannot know in advance +export type ValidGridPositionKeyword = string // using because valid keywords are also line names we cannot know in advance export type GridPosition = GridPositionValue | CSSKeyword diff --git a/editor/src/uuiui/inputs/grid-expression-input.tsx b/editor/src/uuiui/inputs/grid-expression-input.tsx index 6407f163b6d2..f86e841fd60f 100644 --- a/editor/src/uuiui/inputs/grid-expression-input.tsx +++ b/editor/src/uuiui/inputs/grid-expression-input.tsx @@ -83,7 +83,7 @@ export const GridExpressionInput = React.memo( if (maybeMinmax != null) { return onUpdateDimension({ ...maybeMinmax, - areaName: value.areaName, + lineName: value.lineName, } as GridDimension) }