Replace moveTemplate with inspector strategies (#4338)

* Remove unused functions

* Replace findElementAtPath with getElementFromProjectContents in clipboard.ts

* getElementFromProjectContents is not a good name

* More fixes

* Remove unused code

* Remove moveTemplate from UNWRAP_ELEMENTS

* Remove code!

* Remove more code

* Draft to add absolute offsets

* Remove unused import

* Extract function

* Do not force pins when there weren't any

* Fix compile errors

* Inspector strategy based editorMoveTemplate implementation

* Do not force pins when unwrapping

* Fix flex test

* Add parentPath null check

* Take indexPosition into account

* Cleanup

* More rename

* More renames

* Eliminiate duplication

* Wrap the path in strategy state data into an object

* Make it sure that data is an object

editor/src/components/canvas/canvas-strategies/strategies/absolute-reparent-strategy.tsx

@@ -1,11 +1,15 @@
+import type { BuiltInDependencies } from '../../../../core/es-modules/package-manager/built-in-dependencies-list'
 import { MetadataUtils } from '../../../../core/model/element-metadata-utils'
 import { mapDropNulls } from '../../../../core/shared/array-utils'
 import * as EP from '../../../../core/shared/element-path'
 import type { ElementPathTrees } from '../../../../core/shared/element-path-tree'
 import type { ElementInstanceMetadataMap } from '../../../../core/shared/element-template'
-import type { ElementPath } from '../../../../core/shared/project-file-types'
+import type { ElementPath, NodeModules } from '../../../../core/shared/project-file-types'
 import * as PP from '../../../../core/shared/property-path'
+import type { IndexPosition } from '../../../../utils/utils'
+import type { ProjectContentTreeRoot } from '../../../assets'
 import type { AllElementProps } from '../../../editor/store/editor-state'
+import type { InsertionPath } from '../../../editor/store/insertion-path'
 import { CSSCursor } from '../../canvas-types'
 import type { CanvasCommand } from '../../commands/commands'
 import { setCursorCommand } from '../../commands/set-cursor-command'
@@ -36,6 +40,7 @@ import {
   treatElementAsFragmentLike,
 } from './fragment-like-helpers'
 import { ifAllowedToReparent, isAllowedToReparent } from './reparent-helpers/reparent-helpers'
+import type { ForcePins } from './reparent-helpers/reparent-property-changes'
 import { getAbsoluteReparentPropertyChanges } from './reparent-helpers/reparent-property-changes'
 import type { ReparentTarget } from './reparent-helpers/reparent-strategy-helpers'
 import { getReparentOutcome, pathToReparent } from './reparent-utils'
@@ -136,46 +141,22 @@ export function baseAbsoluteReparentStrategy(
             })
 
             if (reparentTarget.shouldReparent && allowedToReparent) {
-              const commands = mapDropNulls((selectedElement) => {
-                const reparentResult = getReparentOutcome(
-                  canvasState.startingMetadata,
-                  canvasState.startingElementPathTree,
-                  canvasState.startingAllElementProps,
-                  canvasState.builtInDependencies,
-                  projectContents,
-                  nodeModules,
-                  pathToReparent(selectedElement),
-                  newParent,
-                  'always',
-                  null,
-                )
-
-                if (reparentResult == null) {
-                  return null
-                } else {
-                  const offsetCommands = replaceFragmentLikePathsWithTheirChildrenRecursive(
+              const commands = mapDropNulls(
+                (selectedElement) =>
+                  createAbsoluteReparentAndOffsetCommands(
+                    selectedElement,
+                    newParent,
+                    null,
                     canvasState.startingMetadata,
-                    canvasState.startingAllElementProps,
                     canvasState.startingElementPathTree,
-                    [selectedElement],
-                  ).flatMap((target) => {
-                    return getAbsoluteReparentPropertyChanges(
-                      target,
-                      newParent.intendedParentPath,
-                      canvasState.startingMetadata,
-                      canvasState.startingMetadata,
-                      canvasState.projectContents,
-                    )
-                  })
-
-                  const { commands: reparentCommands, newPath } = reparentResult
-                  return {
-                    oldPath: selectedElement,
-                    newPath: newPath,
-                    commands: [...offsetCommands, ...reparentCommands],
-                  }
-                }
-              }, filteredSelectedElements)
+                    canvasState.startingAllElementProps,
+                    canvasState.builtInDependencies,
+                    projectContents,
+                    nodeModules,
+                    'force-pins',
+                  ),
+                selectedElements,
+              )
 
               let newPaths: Array<ElementPath> = []
               let updatedTargetPaths: UpdatedPathMap = {}
@@ -235,6 +216,59 @@ export function baseAbsoluteReparentStrategy(
   }
 }
 
+export function createAbsoluteReparentAndOffsetCommands(
+  target: ElementPath,
+  newParent: InsertionPath,
+  indexPosition: IndexPosition | null,
+  metadata: ElementInstanceMetadataMap,
+  pathTree: ElementPathTrees,
+  elementProps: AllElementProps,
+  builtInDependencies: BuiltInDependencies,
+  projectContents: ProjectContentTreeRoot,
+  nodeModules: NodeModules,
+  forcePins: ForcePins,
+) {
+  const reparentResult = getReparentOutcome(
+    metadata,
+    pathTree,
+    elementProps,
+    builtInDependencies,
+    projectContents,
+    nodeModules,
+    pathToReparent(target),
+    newParent,
+    'always',
+    indexPosition,
+  )
+
+  if (reparentResult == null) {
+    return null
+  } else {
+    const offsetCommands = replaceFragmentLikePathsWithTheirChildrenRecursive(
+      metadata,
+      elementProps,
+      pathTree,
+      [target],
+    ).flatMap((p) => {
+      return getAbsoluteReparentPropertyChanges(
+        p,
+        newParent.intendedParentPath,
+        metadata,
+        metadata,
+        projectContents,
+        forcePins,
+      )
+    })
+
+    const { commands: reparentCommands, newPath } = reparentResult
+    return {
+      oldPath: target,
+      newPath: newPath,
+      commands: [...offsetCommands, ...reparentCommands],
+    }
+  }
+}
+
 function maybeAddContainLayout(
   metadata: ElementInstanceMetadataMap,
   allElementProps: AllElementProps,

editor/src/components/canvas/canvas-strategies/strategies/reparent-helpers/reparent-property-changes.ts

@@ -71,12 +71,15 @@ const propertiesToRemove: Array<PropertyPath> = [
   PP.create('style', 'bottom'),
 ]
 
+export type ForcePins = 'force-pins' | 'do-not-force-pins'
+
 export function getAbsoluteReparentPropertyChanges(
   target: ElementPath,
   newParent: ElementPath,
   targetStartingMetadata: ElementInstanceMetadataMap,
   newParentStartingMetadata: ElementInstanceMetadataMap,
   projectContents: ProjectContentTreeRoot,
+  forcePins: ForcePins,
 ): Array<AdjustCssLengthProperties | ConvertCssPercentToPx> {
   const element: JSXElement | null = getJSXElementFromProjectContents(target, projectContents)
 
@@ -146,8 +149,8 @@ export function getAbsoluteReparentPropertyChanges(
     return isRight(rawPin) && rawPin.value != null
   }
 
-  const needsLeftPin = !hasPin('left') && !hasPin('right')
-  const needsTopPin = !hasPin('top') && !hasPin('bottom')
+  const needsLeftPin = !hasPin('left') && !hasPin('right') && forcePins === 'force-pins'
+  const needsTopPin = !hasPin('top') && !hasPin('bottom') && forcePins === 'force-pins'
 
   let edgePropertiesToAdjust: Array<LengthPropertyToAdjust> = []
 
@@ -335,6 +338,7 @@ export function getReparentPropertyChanges(
         originalContextMetadata,
         currentMetadata,
         projectContents,
+        'force-pins',
       )
 
       const strategyCommands = runReparentPropertyStrategies([

editor/src/components/canvas/canvas-strategies/strategies/reparent-helpers/reparent-property-strategies.ts

@@ -312,6 +312,7 @@ export const convertFragmentLikeChildrenToVisualSize =
           metadata.originalTargetMetadata,
           metadata.currentMetadata,
           projectContents,
+          'force-pins',
         )
       } else {
         const directions = singleAxisAutoLayoutContainerDirections(