Push intended bounds for empty elements

editor/src/components/canvas/canvas-strategies/post-action-options/post-action-paste.ts

@@ -39,15 +39,15 @@ import type {
   PastePostActionMenuData,
   PasteToReplacePostActionMenuData,
 } from '../../../editor/store/editor-state'
-import { trueUpElementChanged } from '../../../editor/store/editor-state'
+import { trueUpGroupElementChanged } from '../../../editor/store/editor-state'
 import {
   childInsertionPath,
   replaceWithElementsWrappedInFragmentBehaviour,
 } from '../../../editor/store/insertion-path'
 import type { CanvasCommand } from '../../commands/commands'
 import { foldAndApplyCommandsInner } from '../../commands/commands'
 import { deleteElement } from '../../commands/delete-element-command'
-import { queueGroupTrueUp } from '../../commands/queue-group-true-up-command'
+import { queueTrueUpElement } from '../../commands/queue-true-up-command'
 import { showToastCommand } from '../../commands/show-toast-command'
 import { updateFunctionCommand } from '../../commands/update-function-command'
 import { updateSelectedViews } from '../../commands/update-selected-views-command'
@@ -354,7 +354,7 @@ export function staticReparentAndUpdatePosition(
         },
       },
     }),
-    ...groupTrueUpPaths.map((path) => queueGroupTrueUp([trueUpElementChanged(path)])),
+    ...groupTrueUpPaths.map((path) => queueTrueUpElement([trueUpGroupElementChanged(path)])),
   ])
 }
 

editor/src/components/canvas/canvas-strategies/strategies/absolute-resize-bounding-box-strategy.tsx

@@ -15,7 +15,7 @@ import type { ElementPath } from '../../../../core/shared/project-file-types'
 import type { AllElementProps } from '../../../editor/store/editor-state'
 import {
   getJSXElementFromProjectContents,
-  trueUpElementChanged,
+  trueUpGroupElementChanged,
 } from '../../../editor/store/editor-state'
 import {
   detectFillHugFixedState,
@@ -25,7 +25,7 @@ import type { EdgePosition } from '../../canvas-types'
 import { EdgePositionLeft, EdgePositionTop, EdgePositionTopLeft } from '../../canvas-types'
 import { isEdgePositionEqualTo } from '../../canvas-utils'
 import { pushIntendedBoundsAndUpdateGroups } from '../../commands/push-intended-bounds-and-update-groups-command'
-import { queueGroupTrueUp } from '../../commands/queue-group-true-up-command'
+import { queueTrueUpElement } from '../../commands/queue-true-up-command'
 import { setCursorCommand } from '../../commands/set-cursor-command'
 import { setElementsToRerenderCommand } from '../../commands/set-elements-to-rerender-command'
 import { setSnappingGuidelines } from '../../commands/set-snapping-guidelines-command'
@@ -261,7 +261,7 @@ export function absoluteResizeBoundingBoxStrategy(
                   [{ target: selectedElement, frame: newFrame }],
                   'starting-metadata',
                 ),
-                queueGroupTrueUp(childGroups.map(trueUpElementChanged)),
+                queueTrueUpElement(childGroups.map(trueUpGroupElementChanged)),
               ]
             })
 

editor/src/components/canvas/canvas-strategies/strategies/basic-resize-strategy.tsx

@@ -21,7 +21,6 @@ import {
 } from '../../canvas-utils'
 import type { LengthPropertyToAdjust } from '../../commands/adjust-css-length-command'
 import {
-  AdjustCssLengthProperties,
   adjustCssLengthProperties,
   lengthPropertyToAdjust,
 } from '../../commands/adjust-css-length-command'
@@ -52,12 +51,9 @@ import {
   resizeBoundingBox,
 } from './resize-helpers'
 import { pushIntendedBoundsAndUpdateGroups } from '../../commands/push-intended-bounds-and-update-groups-command'
-import { queueGroupTrueUp } from '../../commands/queue-group-true-up-command'
+import { queueTrueUpElement } from '../../commands/queue-true-up-command'
 import { treatElementAsGroupLike } from './group-helpers'
-import {
-  trueUpChildrenOfElementChanged,
-  trueUpElementChanged,
-} from '../../../editor/store/editor-state'
+import { trueUpGroupElementChanged } from '../../../editor/store/editor-state'
 
 export const BASIC_RESIZE_STRATEGY_ID = 'BASIC_RESIZE'
 
@@ -228,7 +224,9 @@ export function basicResizeStrategy(
               [{ target: selectedElement, frame: resizedBounds }],
               'starting-metadata',
             ),
-            ...groupChildren.map((c) => queueGroupTrueUp([trueUpElementChanged(c.elementPath)])),
+            ...groupChildren.map((c) =>
+              queueTrueUpElement([trueUpGroupElementChanged(c.elementPath)]),
+            ),
           ])
         } else {
           return strategyApplicationResult([

editor/src/components/canvas/canvas-strategies/strategies/convert-to-absolute-and-move-strategy.tsx

@@ -82,6 +82,7 @@ import { showToastCommand } from '../../commands/show-toast-command'
 import {
   getConvertIndividualElementToAbsoluteCommands,
   isHugFromStyleAttribute,
+  isHuggingParent,
   sizeToVisualDimensions,
 } from '../../../inspector/inspector-common'
 import { getDescriptiveStrategyLabelWithRetargetedPaths } from '../canvas-strategies'
@@ -756,7 +757,3 @@ function createSetParentsToFixedSizeCommands(
 
   return []
 }
-
-function isHuggingParent(element: JSXElement, property: 'width' | 'height') {
-  return isHugFromStyleAttribute(element.props, property, 'include-all-hugs')
-}

editor/src/components/canvas/canvas-strategies/strategies/flex-resize-basic-strategy.tsx

@@ -4,7 +4,6 @@ import { isInfinityRectangle } from '../../../../core/shared/math-utils'
 import { stylePropPathMappingFn } from '../../../inspector/common/property-path-hooks'
 import type { LengthPropertyToAdjust } from '../../commands/adjust-css-length-command'
 import {
-  AdjustCssLengthProperties,
   adjustCssLengthProperties,
   lengthPropertyToAdjust,
 } from '../../commands/adjust-css-length-command'
@@ -34,12 +33,11 @@ import {
   pickCursorFromEdgePosition,
   resizeBoundingBox,
 } from './resize-helpers'
-import { FlexDirection } from '../../../inspector/common/css-utils'
 import { getElementDimensions } from './flex-resize-helpers'
 import { pushIntendedBoundsAndUpdateGroups } from '../../commands/push-intended-bounds-and-update-groups-command'
-import { queueGroupTrueUp } from '../../commands/queue-group-true-up-command'
+import { queueTrueUpElement } from '../../commands/queue-true-up-command'
 import { treatElementAsGroupLike } from './group-helpers'
-import { trueUpElementChanged } from '../../../editor/store/editor-state'
+import { trueUpGroupElementChanged } from '../../../editor/store/editor-state'
 
 export function flexResizeBasicStrategy(
   canvasState: InteractionCanvasState,
@@ -227,7 +225,9 @@ export function flexResizeBasicStrategy(
               [{ target: selectedElement, frame: resizedBounds }],
               'starting-metadata',
             ),
-            ...groupChildren.map((c) => queueGroupTrueUp([trueUpElementChanged(c.elementPath)])),
+            ...groupChildren.map((c) =>
+              queueTrueUpElement([trueUpGroupElementChanged(c.elementPath)]),
+            ),
           ])
         } else {
           return strategyApplicationResult([

editor/src/components/canvas/canvas-strategies/strategies/flex-resize-strategy.tsx

@@ -64,9 +64,9 @@ import { strictEvery, mapDropNulls } from '../../../../core/shared/array-utils'
 import type { ElementPath } from '../../../../core/shared/project-file-types'
 import type { ElementPathTrees } from '../../../../core/shared/element-path-tree'
 import { treatElementAsGroupLike } from './group-helpers'
-import { queueGroupTrueUp } from '../../commands/queue-group-true-up-command'
+import { queueTrueUpElement } from '../../commands/queue-true-up-command'
 import { pushIntendedBoundsAndUpdateGroups } from '../../commands/push-intended-bounds-and-update-groups-command'
-import { trueUpElementChanged } from '../../../editor/store/editor-state'
+import { trueUpGroupElementChanged } from '../../../editor/store/editor-state'
 
 export const FLEX_RESIZE_STRATEGY_ID = 'FLEX_RESIZE'
 
@@ -358,7 +358,9 @@ export function flexResizeStrategy(
               [{ target: selectedElement, frame: newFrame }],
               'starting-metadata',
             ),
-            ...groupChildren.map((c) => queueGroupTrueUp([trueUpElementChanged(c.elementPath)])),
+            ...groupChildren.map((c) =>
+              queueTrueUpElement([trueUpGroupElementChanged(c.elementPath)]),
+            ),
           ])
         } else {
           return strategyApplicationResult([

editor/src/components/canvas/canvas-strategies/strategies/group-conversion-helpers.ts

@@ -79,8 +79,8 @@ import type { AddToast, ApplyCommandsAction } from '../../../editor/action-types
 import { applyCommandsAction, showToast } from '../../../editor/actions/action-creators'
 import type { AllElementProps, NavigatorEntry } from '../../../editor/store/editor-state'
 import {
-  trueUpChildrenOfElementChanged,
-  trueUpElementChanged,
+  trueUpChildrenOfGroupChanged,
+  trueUpGroupElementChanged,
 } from '../../../editor/store/editor-state'
 import {
   childInsertionPath,
@@ -102,7 +102,7 @@ import { EdgePositionBottomRight } from '../../canvas-types'
 import { addElement } from '../../commands/add-element-command'
 import type { CanvasCommand } from '../../commands/commands'
 import { deleteElement } from '../../commands/delete-element-command'
-import { queueGroupTrueUp } from '../../commands/queue-group-true-up-command'
+import { queueTrueUpElement } from '../../commands/queue-true-up-command'
 import type { SetCssLengthProperty } from '../../commands/set-css-length-command'
 import {
   setCssLengthProperty,
@@ -733,7 +733,7 @@ export function convertFrameToGroup(
       getConvertIndividualElementToAbsoluteCommandsFromMetadata(c, metadata, pathTrees),
     ),
     ...prunePropsCommands(flexContainerProps, elementPath), // flex-related stuff is pruned
-    queueGroupTrueUp([trueUpChildrenOfElementChanged(elementPath)]),
+    queueTrueUpElement([trueUpChildrenOfGroupChanged(elementPath)]),
     showToastCommand(
       'Converted to group and removed styling',
       'INFO',
@@ -1092,7 +1092,7 @@ export function createWrapInGroupActions(
     insertGroupCommand,
     ...pinChangeCommands,
     selectNewGroup,
-    queueGroupTrueUp([trueUpElementChanged(groupPath)]),
+    queueTrueUpElement([trueUpGroupElementChanged(groupPath)]),
   ])
 }
 

editor/src/components/canvas/canvas-strategies/strategies/group-helpers.ts

@@ -358,7 +358,7 @@ export function groupJSXElement(children: JSXElementChildren): JSXElementWithout
     'Group',
     jsxAttributesFromMap({
       style: jsExpressionValue(
-        // we need to add position: absolute and top, left so that the TRUE_UP_GROUPS action can correct these values later
+        // we need to add position: absolute and top, left so that the TRUE_UP_ELEMENTS action can correct these values later
         { position: 'absolute', left: 0, top: 0 },
         emptyComments,
       ),

editor/src/components/canvas/canvas-strategies/strategies/reparent-utils.ts

@@ -35,7 +35,7 @@ import type { IndexPosition } from '../../../../utils/utils'
 import { fastForEach } from '../../../../core/shared/utils'
 import { addElements } from '../../commands/add-elements-command'
 import type { ElementPathTrees } from '../../../../core/shared/element-path-tree'
-import { getRequiredGroupTrueUps } from '../../commands/queue-group-true-up-command'
+import { getRequiredGroupTrueUps } from '../../commands/queue-true-up-command'
 import type { Either } from '../../../../core/shared/either'
 import { left, right } from '../../../../core/shared/either'
 import { maybeBranchConditionalCase } from '../../../../core/model/conditionals'

editor/src/components/canvas/commands/commands.ts

@@ -43,8 +43,6 @@ import type { DuplicateElement } from './duplicate-element-command'
 import { runDuplicateElement } from './duplicate-element-command'
 import type { UpdateFunctionCommand } from './update-function-command'
 import { runUpdateFunctionCommand } from './update-function-command'
-import type { PushIntendedBoundsAndUpdateGroups } from './push-intended-bounds-and-update-groups-command'
-import { runPushIntendedBoundsAndUpdateGroups } from './push-intended-bounds-and-update-groups-command'
 import type { DeleteProperties } from './delete-properties-command'
 import { runDeleteProperties } from './delete-properties-command'
 import type { AddImportsToFile } from './add-imports-to-file-command'
@@ -81,8 +79,12 @@ import { runWrapInContainerCommand } from './wrap-in-container-command'
 import { patchProjectContentsWithParsedFile } from './patch-utils'
 import type { AddElements } from './add-elements-command'
 import { runAddElements } from './add-elements-command'
-import type { QueueGroupTrueUp } from './queue-group-true-up-command'
-import { runQueueGroupTrueUp } from './queue-group-true-up-command'
+import type { QueueTrueUpElement } from './queue-true-up-command'
+import { runQueueTrueUpElement } from './queue-true-up-command'
+import type { PushIntendedBoundsAndUpdateGroups } from './push-intended-bounds-and-update-groups-command'
+import { runPushIntendedBoundsAndUpdateGroups } from './push-intended-bounds-and-update-groups-command'
+import type { PushIntendedBoundsAndUpdateHuggingElements } from './push-intended-bounds-and-update-hugging-elements-command'
+import { runPushIntendedBoundsAndUpdateHuggingElements } from './push-intended-bounds-and-update-hugging-elements-command'
 
 export interface CommandFunctionResult {
   editorStatePatches: Array<EditorStatePatch>
@@ -117,6 +119,7 @@ export type CanvasCommand =
   | SetElementsToRerenderCommand
   | AppendElementsToRerenderCommand
   | PushIntendedBoundsAndUpdateGroups
+  | PushIntendedBoundsAndUpdateHuggingElements
   | DeleteProperties
   | SetProperty
   | UpdatePropIfExists
@@ -133,7 +136,7 @@ export type CanvasCommand =
   | RearrangeChildren
   | DeleteElement
   | WrapInContainerCommand
-  | QueueGroupTrueUp
+  | QueueTrueUpElement
 
 export function runCanvasCommand(
   editorState: EditorState,
@@ -179,6 +182,9 @@ export function runCanvasCommand(
       return runAppendElementsToRerender(editorState, command)
     case 'PUSH_INTENDED_BOUNDS_AND_UPDATE_GROUPS':
       return runPushIntendedBoundsAndUpdateGroups(editorState, command, commandLifecycle)
+    case 'PUSH_INTENDED_BOUNDS_AND_UPDATE_HUGGING_ELEMENTS':
+      return runPushIntendedBoundsAndUpdateHuggingElements(editorState, command)
+
     case 'DELETE_PROPERTIES':
       return runDeleteProperties(editorState, command)
     case 'SET_PROPERTY':
@@ -211,8 +217,8 @@ export function runCanvasCommand(
       return runDeleteElement(editorState, command)
     case 'WRAP_IN_CONTAINER':
       return runWrapInContainerCommand(editorState, command)
-    case 'QUEUE_GROUP_TRUE_UP':
-      return runQueueGroupTrueUp(editorState, command)
+    case 'QUEUE_TRUE_UP_ELEMENT':
+      return runQueueTrueUpElement(editorState, command)
     default:
       const _exhaustiveCheck: never = command
       throw new Error(`Unhandled canvas command ${JSON.stringify(command)}`)

editor/src/components/canvas/commands/push-intended-bounds-and-update-groups-command.ts

@@ -21,7 +21,7 @@ import type {
   EditorState,
   EditorStatePatch,
 } from '../../editor/store/editor-state'
-import { trueUpElementChanged } from '../../editor/store/editor-state'
+import { trueUpGroupElementChanged } from '../../editor/store/editor-state'
 import { cssPixelLength, type FlexDirection } from '../../inspector/common/css-utils'
 import {
   getConstraintsIncludingImplicitForElement,
@@ -107,8 +107,8 @@ export const runPushIntendedBoundsAndUpdateGroups = (
     commandLifecycle === 'end-interaction' && !commandRanBecauseOfQueuedTrueUp
       ? [
           {
-            trueUpGroupsForElementAfterDomWalkerRuns: {
-              $set: resizedGroupChildren.map((c) => trueUpElementChanged(c)),
+            trueUpElementsAfterDomWalkerRuns: {
+              $set: resizedGroupChildren.map((c) => trueUpGroupElementChanged(c)),
             },
           },
         ]