fix(editor) prune bottom and right pins when fixing size

concrete-utopia · Oct 12, 2023 · b3e0a43 · b3e0a43
1 parent 168297f
commit b3e0a43
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 18 deletions.
diff --git a/...nvas/canvas-strategies/strategies/convert-to-absolute-and-move-strategy.spec.browser2.tsx b/...nvas/canvas-strategies/strategies/convert-to-absolute-and-move-strategy.spec.browser2.tsx
@@ -1132,6 +1132,10 @@ describe('Convert to absolute/escape hatch', () => {
             backgroundColor: '#aaaaaa33',
             width: '50%',
             height: '20%',
+            right: 200,
+            bottom: 320,
+            top: 0,
+            left: 0,
           }}
           data-uid='bbb'
           data-testid='bbb'
@@ -1178,9 +1182,9 @@ describe('Convert to absolute/escape hatch', () => {
               backgroundColor: '#aaaaaa33',
               width: 200,
               height: 80,
-              position: 'absolute',
-              left: 15,
               top: 15,
+              left: 15,
+              position: 'absolute',
             }}
             data-uid='bbb'
             data-testid='bbb'
@@ -1255,6 +1259,10 @@ describe('Convert to absolute/escape hatch', () => {
             backgroundColor: '#aaaaaa33',
             width: '50%',
             height: '20%',
+            right: 200,
+            bottom: 320,
+            top: 0,
+            left: 0
           }}
           data-uid='bbb'
           data-testid='bbb'
@@ -1301,9 +1309,9 @@ describe('Convert to absolute/escape hatch', () => {
               backgroundColor: '#aaaaaa33',
               width: 200,
               height: 80,
-              position: 'absolute',
-              left: 15,
               top: 15,
+              left: 15,
+              position: 'absolute',
             }}
             data-uid='bbb'
             data-testid='bbb'
@@ -1414,6 +1422,10 @@ describe('Convert to absolute/escape hatch', () => {
           backgroundColor: '#aaaaaa33',
           width: '50%',
           height: '20%',
+          right: 200,
+          bottom: 320,
+          top: 0,
+          left: 0
         }}
         data-uid='bbb'
         data-testid='bbb'
@@ -1457,9 +1469,9 @@ describe('Convert to absolute/escape hatch', () => {
             backgroundColor: '#aaaaaa33',
             width: 200,
             height: 80,
-            position: 'absolute',
-            left: 15,
             top: 15,
+            left: 15,
+            position: 'absolute',
           }}
           data-uid='bbb'
           data-testid='bbb'
@@ -1478,6 +1490,10 @@ describe('Convert to absolute/escape hatch', () => {
             backgroundColor: '#aaaaaa33',
             width: '50%',
             height: '20%',
+            right: 200,
+            bottom: 320,
+            top: 0,
+            left: 0
           }}
           data-uid='bbb'
           data-testid='bbb'
@@ -1521,9 +1537,9 @@ describe('Convert to absolute/escape hatch', () => {
               backgroundColor: '#aaaaaa33',
               width: 200,
               height: 80,
-              position: 'absolute',
-              left: 15,
               top: 15,
+              left: 15,
+              position: 'absolute',
             }}
             data-uid='bbb'
             data-testid='bbb'

diff --git a/...ponents/canvas/canvas-strategies/strategies/reparent-helpers/reparent-property-changes.ts b/...ponents/canvas/canvas-strategies/strategies/reparent-helpers/reparent-property-changes.ts
@@ -55,7 +55,7 @@ import {
   stripPinsConvertToVisualSize,
 } from './reparent-property-strategies'
 import { assertNever } from '../../../../../core/shared/utils'
-import { flexChildProps, pruneFlexPropsCommands } from '../../../../inspector/inspector-common'
+import { flexChildProps, prunePropsCommands } from '../../../../inspector/inspector-common'
 import { setCssLengthProperty } from '../../../commands/set-css-length-command'
 import type { ElementPathTrees } from '../../../../../core/shared/element-path-tree'
 import {
@@ -221,7 +221,7 @@ export function positionElementToCoordinatesCommands(
   pathLookup: OldPathToNewPathMapping,
 ): CanvasCommand[] {
   const basicCommands = [
-    ...pruneFlexPropsCommands(flexChildProps, elementToReparent.newPath),
+    ...prunePropsCommands(flexChildProps, elementToReparent.newPath),
     setCssLengthProperty(
       'always',
       elementToReparent.newPath,
@@ -280,7 +280,7 @@ export function positionElementToCoordinatesCommands(
     }
 
     return [
-      ...pruneFlexPropsCommands(flexChildProps, targetPath),
+      ...prunePropsCommands(flexChildProps, targetPath),
       setProperty('always', targetPath, PP.create('style', 'position'), 'absolute'),
       setCssLengthProperty(
         'always',

diff --git a/editor/src/components/inspector/inspector-common.ts b/editor/src/components/inspector/inspector-common.ts
@@ -390,7 +390,9 @@ export const flexChildProps = [
   styleP('flexBasis'),
 ]
 
-export function pruneFlexPropsCommands(
+const flexChildAndBottomRightProps = [...flexChildProps, styleP('bottom'), styleP('right')]
+
+export function prunePropsCommands(
   props: PropertyPath[],
   elementPath: ElementPath,
 ): Array<CanvasCommand> {
@@ -449,7 +451,7 @@ function sizeToDimensionsFromFrame(
   const height = frame.height
 
   return [
-    ...pruneFlexPropsCommands(flexChildProps, elementPath),
+    ...prunePropsCommands(flexChildAndBottomRightProps, elementPath),
     setCssLengthProperty(
       'always',
       elementPath,
@@ -480,7 +482,7 @@ export const sizeToVisualDimensionsAlongAxisInstance =
     const value = globalFrame[dimension]
 
     return [
-      ...pruneFlexPropsCommands(flexChildProps, elementPath),
+      ...prunePropsCommands(flexChildProps, elementPath),
       setCssLengthProperty(
         'always',
         elementPath,

diff --git a/editor/src/components/inspector/inspector-strategies/inspector-strategies.ts b/editor/src/components/inspector/inspector-strategies/inspector-strategies.ts
@@ -4,7 +4,7 @@ import type { Axis, FlexAlignment, FlexJustifyContent } from '../inspector-commo
 import {
   filterKeepFlexContainers,
   flexChildProps,
-  pruneFlexPropsCommands,
+  prunePropsCommands,
   sizeToVisualDimensions,
 } from '../inspector-common'
 import { MetadataUtils } from '../../../core/model/element-metadata-utils'
@@ -115,7 +115,7 @@ export const updateFlexDirectionStrategies = (
       return elements.flatMap((path) => [
         setProperty('always', path, PP.create('style', 'flexDirection'), flexDirection),
         ...MetadataUtils.getChildrenPathsOrdered(metadata, pathTrees, path).flatMap((child) => [
-          ...pruneFlexPropsCommands(flexChildProps, child),
+          ...prunePropsCommands(flexChildProps, child),
           ...sizeToVisualDimensions(metadata, pathTrees, child),
         ]),
       ])

diff --git a/...src/components/inspector/inspector-strategies/remove-flex-convert-to-absolute-strategy.ts b/...src/components/inspector/inspector-strategies/remove-flex-convert-to-absolute-strategy.ts
@@ -7,7 +7,7 @@ import {
   filterKeepFlexContainers,
   flexContainerProps,
   nullOrNonEmpty,
-  pruneFlexPropsCommands,
+  prunePropsCommands,
   sizeToVisualDimensions,
   getConvertIndividualElementToAbsoluteCommandsFromMetadata,
 } from '../inspector-common'
@@ -20,7 +20,7 @@ function removeFlexConvertToAbsoluteOne(
 ): Array<CanvasCommand> {
   const children = MetadataUtils.getChildrenPathsOrdered(metadata, pathTrees, elementPath)
   return [
-    ...pruneFlexPropsCommands(flexContainerProps, elementPath), // flex-related stuff is pruned
+    ...prunePropsCommands(flexContainerProps, elementPath), // flex-related stuff is pruned
     ...children.flatMap((c) =>
       getConvertIndividualElementToAbsoluteCommandsFromMetadata(c, metadata, pathTrees),
     ), // all children are converted to absolute,