diff --git a/editor/src/components/canvas/canvas-strategies/strategies/absolute-resize-bounding-box-strategy.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/absolute-resize-bounding-box-strategy.spec.browser2.tsx index 5b407d1423b8..a71db5b5a05f 100644 --- a/editor/src/components/canvas/canvas-strategies/strategies/absolute-resize-bounding-box-strategy.spec.browser2.tsx +++ b/editor/src/components/canvas/canvas-strategies/strategies/absolute-resize-bounding-box-strategy.spec.browser2.tsx @@ -1338,6 +1338,64 @@ export var storyboard = ( const resizeControl = getResizeControl(renderResult, EdgePositionBottomRight) expect(resizeControl).toBeNull() }) + it('percent values are rounded to 2 decimal places after resizing', async () => { + const renderResult = await renderTestEditorWithCode( + makeTestProjectCodeWithSnippet(` +
+
+
+ `), + 'await-first-dom-report', + ) + + const target = EP.fromString(`${BakedInStoryboardUID}/${TestSceneUID}/${TestAppUID}:aaa/bbb`) + + await renderResult.dispatch([selectComponents([target], false)], true) + await resizeElement(renderResult, { x: -10, y: -10 }, EdgePositionBottomRight, emptyModifiers) + expect(getPrintedUiJsCode(renderResult.getEditorState())).toEqual( + makeTestProjectCodeWithSnippet(` +
+
+
+ `), + ) + }) describe('snap lines', () => { it('horizontal snap lines are shown when resizing a multiselection', async () => { const editor = await renderTestEditorWithCode( 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 cd85e689edd1..465eadf83955 100644 --- a/editor/src/components/canvas/commands/adjust-css-length-command.ts +++ b/editor/src/components/canvas/commands/adjust-css-length-command.ts @@ -15,6 +15,7 @@ import { setJSXValuesAtPaths, unsetJSXValuesAtPaths, } from '../../../core/shared/jsx-attributes' +import { roundTo } from '../../../core/shared/math-utils' import type { ElementPath, PropertyPath } from '../../../core/shared/project-file-types' import * as PP from '../../../core/shared/property-path' import type { DerivedState, EditorState } from '../../editor/store/editor-state' @@ -359,7 +360,7 @@ function updatePercentageValueByPixel( const currentValuePercent = currentValue.value const offsetInPercent = (byValue / parentDimensionPx) * 100 const newValueCssNumber: CSSNumber = { - value: currentValuePercent + offsetInPercent, + value: roundTo(currentValuePercent + offsetInPercent, 2), unit: currentValue.unit, } const newValue = printCSSNumber(newValueCssNumber, null) diff --git a/editor/src/components/inspector/inspector-common.ts b/editor/src/components/inspector/inspector-common.ts index 477a1b2d53b6..8a6dd1aec2fe 100644 --- a/editor/src/components/inspector/inspector-common.ts +++ b/editor/src/components/inspector/inspector-common.ts @@ -622,7 +622,7 @@ export function detectFillHugFixedState( const isGroupLike = treatElementAsGroupLike(metadata, elementPath) const parsed = defaultEither(null, parseCSSLengthPercent(simpleAttribute)) - if (parsed != null && parsed.unit === '%') { + if (parsed != null && parsed.unit === '%' && parsed.value === 100) { const valueWithType: FixedHugFill = { type: isGroupLike ? 'hug-group' : 'fill', value: parsed } return { fixedHugFill: valueWithType, controlStatus: 'simple' } } diff --git a/editor/src/components/inspector/inspector-strategies/fixed-fill-hug.spec.browser2.tsx b/editor/src/components/inspector/inspector-strategies/fixed-fill-hug.spec.browser2.tsx index a6c70d47ce33..b3e507868279 100644 --- a/editor/src/components/inspector/inspector-strategies/fixed-fill-hug.spec.browser2.tsx +++ b/editor/src/components/inspector/inspector-strategies/fixed-fill-hug.spec.browser2.tsx @@ -349,6 +349,53 @@ describe('Fixed / Fill / Hug control', () => { absoluteProjectWithInjectedStyle(`width: '100%', height: '100%'`), ) }) + + it('detects fill container on a static element', async () => { + const editor = await renderTestEditorWithCode( + makeTestProjectCodeWithSnippet(` +
+ `), + 'await-first-dom-report', + ) + + await selectComponentsForTest(editor, [ + EP.fromString(`${BakedInStoryboardUID}/${TestSceneUID}/${TestAppUID}:thediv`), + ]) + + expect(editor.renderedDOM.getAllByText(FillContainerLabel).length).toEqual(2) + }) + + it('percent values that are not 100% are not classified as fill container', async () => { + const editor = await renderTestEditorWithCode( + makeTestProjectCodeWithSnippet(` +
+ `), + 'await-first-dom-report', + ) + + await selectComponentsForTest(editor, [ + EP.fromString(`${BakedInStoryboardUID}/${TestSceneUID}/${TestAppUID}:thediv`), + ]) + + expect(editor.renderedDOM.queryAllByText(FillContainerLabel).length).toEqual(0) + expect(editor.renderedDOM.getAllByText(FixedLabel).length).toEqual(2) + }) }) describe('hug contents', () => {