readd conver to absolute command

Author: bkrmendy

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

@@ -6,6 +6,8 @@ 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 { ConvertToAbsolute } from './convert-to-absolute-command'
+import { runConvertToAbsolute } from './convert-to-absolute-command'
 import type { ReorderElement } from './reorder-element-command'
 import { runReorderElement } from './reorder-element-command'
 import type { ReparentElement } from './reparent-element-command'
@@ -102,6 +104,7 @@ export type CanvasCommand =
   | UpdateSelectedViews
   | UpdateHighlightedViews
   | SetSnappingGuidelines
+  | ConvertToAbsolute
   | SetCssLengthProperty
   | ReorderElement
   | ShowOutlineHighlight
@@ -154,6 +157,8 @@ export function runCanvasCommand(
       return runUpdateHighlightedViews(editorState, command)
     case 'SET_SNAPPING_GUIDELINES':
       return runSetSnappingGuidelines(editorState, command)
+    case 'CONVERT_TO_ABSOLUTE':
+      return runConvertToAbsolute(editorState, command)
     case 'SET_CSS_LENGTH_PROPERTY':
       return runSetCssLengthProperty(editorState, command)
     case 'REORDER_ELEMENT':

editor/src/components/canvas/commands/convert-to-absolute-command.spec.tsx

@@ -0,0 +1,88 @@
+import { styleStringInArray } from '../../../utils/common-constants'
+import { createBuiltInDependenciesList } from '../../../core/es-modules/package-manager/built-in-dependencies-list'
+import { isRight } from '../../../core/shared/either'
+import * as EP from '../../../core/shared/element-path'
+import {
+  getJSXAttributesAtPath,
+  jsxSimpleAttributeToValue,
+} from '../../../core/shared/jsx-attribute-utils'
+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, renderTestEditorWithModel } from '../ui-jsx.test-utils'
+import { updateEditorStateWithPatches } from './commands'
+import { convertToAbsolute, runConvertToAbsolute } from './convert-to-absolute-command'
+import { isJSXElement } from '../../../core/shared/element-template'
+
+describe('convertToAbsolute', () => {
+  it('sets position absolute', async () => {
+    const renderResult = await renderTestEditorWithModel(
+      complexDefaultProjectPreParsed(),
+      'dont-await-first-dom-report',
+      DefaultStartingFeatureSwitches,
+      createBuiltInDependenciesList(null),
+    )
+
+    const appInstancePath = EP.elementPath([['storyboard-entity', 'scene-1-entity', 'app-entity']])
+
+    const originalEditorState = renderResult.getEditorState().editor
+
+    const convertToAbsoluteCommand = convertToAbsolute('always', appInstancePath)
+    const result = runConvertToAbsolute(
+      renderResult.getEditorState().editor,
+      convertToAbsoluteCommand,
+    )
+
+    const patchedEditor = updateEditorStateWithPatches(
+      renderResult.getEditorState().editor,
+      result.editorStatePatches,
+    )
+
+    const originalPositionProp = withUnderlyingTargetFromEditorState(
+      appInstancePath,
+      originalEditorState,
+      null,
+      (success, element, underlyingTarget, underlyingFilePath) => {
+        if (isJSXElement(element)) {
+          const jsxAttributeResult = getJSXAttributesAtPath(
+            element.props,
+            stylePropPathMappingFn('position', styleStringInArray),
+          )
+          const currentValue = jsxSimpleAttributeToValue(jsxAttributeResult.attribute)
+          if (currentValue !== null && isRight(currentValue)) {
+            return currentValue.value
+          } else {
+            return null
+          }
+        } else {
+          return null
+        }
+      },
+    )
+
+    const updatedPositionProp = withUnderlyingTargetFromEditorState(
+      appInstancePath,
+      patchedEditor,
+      null,
+      (success, element, underlyingTarget, underlyingFilePath) => {
+        if (isJSXElement(element)) {
+          const jsxAttributeResult = getJSXAttributesAtPath(
+            element.props,
+            stylePropPathMappingFn('position', styleStringInArray),
+          )
+          const currentValue = jsxSimpleAttributeToValue(jsxAttributeResult.attribute)
+          if (currentValue !== null && isRight(currentValue)) {
+            return currentValue.value
+          } else {
+            return null
+          }
+        } else {
+          return null
+        }
+      },
+    )
+
+    expect(originalPositionProp).toEqual(undefined)
+    expect(updatedPositionProp).toEqual('absolute')
+  })
+})

editor/src/components/canvas/commands/convert-to-absolute-command.ts

@@ -0,0 +1,72 @@
+import { styleStringInArray } from '../../../utils/common-constants'
+import { MetadataUtils } from '../../../core/model/element-metadata-utils'
+import * as EP from '../../../core/shared/element-path'
+import type { ElementInstanceMetadataMap } from '../../../core/shared/element-template'
+import { emptyComments, jsExpressionValue } from '../../../core/shared/element-template'
+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 type { BaseCommand, CommandFunction, WhenToRun } from './commands'
+import { applyValuesAtPath } from './utils/property-utils'
+
+export interface ConvertToAbsolute extends BaseCommand {
+  type: 'CONVERT_TO_ABSOLUTE'
+  target: ElementPath
+}
+
+export function convertToAbsolute(transient: WhenToRun, target: ElementPath): ConvertToAbsolute {
+  return {
+    type: 'CONVERT_TO_ABSOLUTE',
+    whenToRun: transient,
+    target: target,
+  }
+}
+
+export const runConvertToAbsolute: CommandFunction<ConvertToAbsolute> = (
+  editorState: EditorState,
+  command: ConvertToAbsolute,
+) => {
+  const propsToUpdate: Array<ValueAtPath> = [
+    {
+      path: stylePropPathMappingFn('position', styleStringInArray),
+      value: jsExpressionValue('absolute', emptyComments),
+    },
+  ]
+
+  const { editorStatePatch: propertyUpdatePatch } = applyValuesAtPath(
+    editorState,
+    command.target,
+    propsToUpdate,
+  )
+
+  const updatedMetadataPatch = addPositionAbsoluteToMetadata(
+    editorState.jsxMetadata,
+    command.target,
+  )
+
+  return {
+    editorStatePatches: [propertyUpdatePatch, updatedMetadataPatch],
+    commandDescription: 'Switch Position to Absolute',
+  }
+}
+
+function addPositionAbsoluteToMetadata(
+  metadataMap: ElementInstanceMetadataMap,
+  target: ElementPath,
+): EditorStatePatch {
+  const existingMetadata = MetadataUtils.findElementByElementPath(metadataMap, target)
+  if (existingMetadata == null) {
+    return {}
+  }
+
+  return {
+    jsxMetadata: {
+      [EP.toString(target)]: {
+        specialSizeMeasurements: {
+          position: { $set: 'absolute' },
+        },
+      },
+    },
+  }
+}

editor/src/components/inspector/inspector-common.ts

@@ -72,6 +72,7 @@ import {
   groupConversionCommands,
 } from '../canvas/canvas-strategies/strategies/group-conversion-helpers'
 import { fixedSizeDimensionHandlingText } from '../text-editor/text-handling'
+import { convertToAbsolute } from '../canvas/commands/convert-to-absolute-command'
 import { hugPropertiesFromStyleMap } from '../../core/shared/dom-utils'
 import { setHugContentForAxis } from './inspector-strategies/hug-contents-strategy'
 
@@ -1130,7 +1131,7 @@ function addPositionAbsoluteTopLeft(
   parentFlexDirection: FlexDirection | null,
 ): Array<CanvasCommand> {
   return [
-    setProperty('always', elementPath, styleP('position'), 'absolute'),
+    convertToAbsolute('always', elementPath),
     setCssLengthProperty(
       'always',
       elementPath,