adjust intended coordinates when pasting into a group (#4307)

concrete-utopia · Oct 4, 2023 · d874a60 · d874a60
1 parent e4cc037
commit d874a60
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 6 deletions.
diff --git a/editor/src/components/canvas/canvas-strategies/post-action-options/navigator-reparent.ts b/editor/src/components/canvas/canvas-strategies/post-action-options/navigator-reparent.ts
@@ -202,7 +202,7 @@ export const PropsReplacedNavigatorReparentPostActionChoice = (
   }
 }
 
-function adjustIntendedCoordinatesForGroups(
+export function adjustIntendedCoordinatesForGroups(
   jsxMetadata: ElementInstanceMetadataMap,
   reparentTargetPath: ElementPath,
   intendedCoordinates: CanvasPoint,

diff --git a/editor/src/components/canvas/canvas-strategies/post-action-options/post-action-paste.ts b/editor/src/components/canvas/canvas-strategies/post-action-options/post-action-paste.ts
@@ -66,7 +66,7 @@ import { reparentStrategyForPaste } from '../strategies/reparent-helpers/reparen
 import type { ReparentStrategy } from '../strategies/reparent-helpers/reparent-strategy-helpers'
 import type { ElementToReparent, PathToReparent } from '../strategies/reparent-utils'
 import { elementToReparent, getReparentOutcomeMultiselect } from '../strategies/reparent-utils'
-import { collectGroupTrueUp } from './navigator-reparent'
+import { adjustIntendedCoordinatesForGroups, collectGroupTrueUp } from './navigator-reparent'
 import type { PostActionChoice } from './post-action-options'
 
 interface EditorStateContext {
@@ -197,7 +197,15 @@ function pasteChoiceCommon(
       return {
         elementPath: elementPaste.originalElementPath,
         pathToReparent: elementToReparent(elementWithUID.value, elementPaste.importsToAdd),
-        intendedCoordinates: intendedCoordinates,
+        intendedCoordinates: adjustIntendedCoordinatesForGroups(
+          editorStateContext.startingMetadata,
+          target.parentPath.intendedParentPath,
+          intendedCoordinates,
+          MetadataUtils.findElementByElementPath(
+            pasteContext.elementPasteWithMetadata.targetOriginalContextMetadata,
+            elementPaste.originalElementPath,
+          ),
+        ),
         newUID: elementWithUID.value.uid,
       }
     })

diff --git a/editor/src/components/editor/actions/actions.spec.browser2.tsx b/editor/src/components/editor/actions/actions.spec.browser2.tsx
@@ -1586,9 +1586,9 @@ describe('actions', () => {
             <div data-uid='root'>
               <div data-uid='foo' style={{ width: 50, height: 50, background: 'blue', position: 'absolute', left: 200, top: 200 }} />
               <Group data-uid='group' style={{ background: 'yellow' }}>
-                <div data-uid='bar' style={{ width: 10, height: 10, background: 'red', position: 'absolute', top: 0, left: 10 }} />
-                <div data-uid='baz' style={{ width: 10, height: 10, background: 'red', position: 'absolute', top: 100, left: 30 }} />
-                <div data-uid='aai' style={{ width: 50, height: 50, background: 'blue', position: 'absolute', left: 0, top: 30 }} />
+                <div data-uid='bar' style={{ width: 10, height: 10, background: 'red', position: 'absolute', top: 0, left: 0 }} />
+                <div data-uid='baz' style={{ width: 10, height: 10, background: 'red', position: 'absolute', top: 100, left: 20 }} />
+                <div data-uid='aai' style={{ width: 50, height: 50, background: 'blue', position: 'absolute', left: 200, top: 200 }} />
               </Group>
             </div>
           `,