insertion subject wrapping

concrete-utopia · Jul 31, 2024 · 31173d1 · 31173d1
1 parent 5855422
commit 31173d1
Show file tree

Hide file tree

Showing 3 changed files with 89 additions and 49 deletions.
diff --git a/editor/src/components/canvas/canvas-strategies/canvas-strategies.tsx b/editor/src/components/canvas/canvas-strategies/canvas-strategies.tsx
@@ -11,6 +11,7 @@ import { arrayEqualsByReference, assertNever } from '../../../core/shared/utils'
 import type {
   AllElementProps,
   EditorState,
+  EditorStatePatch,
   EditorStorePatched,
 } from '../../editor/store/editor-state'
 import { Substores, useEditorState, useSelectorWithCallback } from '../../editor/store/store-hook'
@@ -77,6 +78,11 @@ import { rearrangeGridSwapStrategy } from './strategies/rearrange-grid-swap-stra
 import { gridResizeElementStrategy } from './strategies/grid-resize-element-strategy'
 import { gridRearrangeMoveDuplicateStrategy } from './strategies/grid-rearrange-move-duplicate-strategy'
 import { gridDrawToInsertStrategy } from './strategies/grid-draw-to-insert-strategy'
+import type { CanvasCommand } from '../commands/commands'
+import { foldAndApplyCommandsInner } from '../commands/commands'
+import { updateFunctionCommand } from '../commands/update-function-command'
+import { wrapInContainerCommand } from '../commands/wrap-in-container-command'
+import type { ElementPath } from 'utopia-shared/src/types'
 
 export type CanvasStrategyFactory = (
   canvasState: InteractionCanvasState,
@@ -671,11 +677,16 @@ export function onlyFitWhenDraggingThisControl(
   }
 }
 
+export interface WrapperWithUid {
+  wrapper: InsertionSubjectWrapper
+  uid: string
+}
+
 export function getWrapperWithGeneratedUid(
   customStrategyState: CustomStrategyState,
   canvasState: InteractionCanvasState,
   subjects: Array<InsertionSubject>,
-): { wrapper: InsertionSubjectWrapper; uid: string } | null {
+): WrapperWithUid | null {
   const insertionSubjectWrapper = subjects.at(0)?.insertionSubjectWrapper ?? null
   if (insertionSubjectWrapper == null) {
     return null
@@ -688,6 +699,31 @@ export function getWrapperWithGeneratedUid(
   return { wrapper: insertionSubjectWrapper, uid: uid }
 }
 
+export function getWrappingCommands(
+  wrappedElementPath: ElementPath,
+  wrapperWithUid: WrapperWithUid,
+): CanvasCommand[] {
+  return [
+    updateFunctionCommand(
+      'always',
+      (editorState, lifecycle): Array<EditorStatePatch> =>
+        foldAndApplyCommandsInner(
+          editorState,
+          [],
+          [
+            wrapInContainerCommand(
+              'always',
+              wrappedElementPath,
+              wrapperWithUid.uid,
+              wrapperWithUid.wrapper,
+            ),
+          ],
+          lifecycle,
+        ).statePatches,
+    ),
+  ]
+}
+
 export function getDescriptiveStrategyLabelWithRetargetedPaths(
   originalLabel: string,
   pathsWereReplaced: boolean,

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/draw-to-insert-metastrategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/draw-to-insert-metastrategy.tsx
@@ -35,6 +35,7 @@ import type { CanvasStrategyFactory, MetaCanvasStrategy } from '../canvas-strate
 import {
   findCanvasStrategy,
   getWrapperWithGeneratedUid,
+  getWrappingCommands,
   pickCanvasStateFromEditorState,
   pickCanvasStateFromEditorStateWithMetadata,
   RegisteredCanvasStrategies,
@@ -318,27 +319,7 @@ export function drawToInsertStrategyFactory(
               const newPath = EP.appendToPath(targetParent.intendedParentPath, insertionSubject.uid)
 
               const optionalWrappingCommand =
-                maybeWrapperWithUid != null
-                  ? [
-                      updateFunctionCommand(
-                        'always',
-                        (editorState, lifecycle): Array<EditorStatePatch> =>
-                          foldAndApplyCommandsInner(
-                            editorState,
-                            [],
-                            [
-                              wrapInContainerCommand(
-                                'always',
-                                newPath,
-                                maybeWrapperWithUid.uid,
-                                maybeWrapperWithUid.wrapper,
-                              ),
-                            ],
-                            lifecycle,
-                          ).statePatches,
-                      ),
-                    ]
-                  : []
+                maybeWrapperWithUid != null ? getWrappingCommands(newPath, maybeWrapperWithUid) : []
 
               return strategyApplicationResult(
                 [insertionCommand.command, reparentCommand, ...optionalWrappingCommand],

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-draw-to-insert-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-draw-to-insert-strategy.tsx
@@ -18,7 +18,11 @@ import { updateHighlightedViews } from '../../commands/update-highlighted-views-
 import { wildcardPatch } from '../../commands/wildcard-patch-command'
 import { GridControls } from '../../controls/grid-controls'
 import { canvasPointToWindowPoint } from '../../dom-lookup'
-import type { CanvasStrategyFactory } from '../canvas-strategies'
+import {
+  getWrapperWithGeneratedUid,
+  getWrappingCommands,
+  type CanvasStrategyFactory,
+} from '../canvas-strategies'
 import {
   emptyStrategyApplicationResult,
   getInsertionSubjectsFromInteractionTarget,
@@ -157,33 +161,52 @@ export const gridDrawToInsertStrategy: CanvasStrategyFactory = (
 
       const gridTemplate = parent.specialSizeMeasurements.containerGridProperties
 
-      return strategyApplicationResult([
-        insertionCommand,
-        ...setGridPropsCommands(EP.appendToPath(targetParent, insertionSubject.uid), gridTemplate, {
-          gridRowStart: { numericalPosition: gridCellCoordinates.row },
-          gridColumnStart: { numericalPosition: gridCellCoordinates.column },
-          gridRowEnd: { numericalPosition: gridCellCoordinates.row + 1 },
-          gridColumnEnd: { numericalPosition: gridCellCoordinates.column + 1 },
-        }),
-        ...stripNulls([
-          insertionSubject.textEdit
-            ? wildcardPatch('on-complete', {
-                mode: {
-                  $set: EditorModes.textEditMode(
-                    EP.appendToPath(targetParent, insertionSubject.uid),
-                    canvasPointToWindowPoint(
-                      pointOnCanvas,
-                      canvasState.scale,
-                      canvasState.canvasOffset,
-                    ),
-                    'existing',
-                    'no-text-selection',
-                  ),
-                },
-              })
-            : null,
-        ]),
+      const insertedElementPath = EP.appendToPath(targetParent, insertionSubject.uid)
+
+      const maybeWrapperWithUid = getWrapperWithGeneratedUid(customStrategyState, canvasState, [
+        insertionSubject,
       ])
+
+      const wrappingCommands =
+        maybeWrapperWithUid == null
+          ? []
+          : getWrappingCommands(insertedElementPath, maybeWrapperWithUid)
+
+      return strategyApplicationResult(
+        [
+          insertionCommand,
+          ...setGridPropsCommands(insertedElementPath, gridTemplate, {
+            gridRowStart: { numericalPosition: gridCellCoordinates.row },
+            gridColumnStart: { numericalPosition: gridCellCoordinates.column },
+            gridRowEnd: { numericalPosition: gridCellCoordinates.row + 1 },
+            gridColumnEnd: { numericalPosition: gridCellCoordinates.column + 1 },
+          }),
+          ...wrappingCommands,
+          ...stripNulls([
+            insertionSubject.textEdit
+              ? wildcardPatch('on-complete', {
+                  mode: {
+                    $set: EditorModes.textEditMode(
+                      insertedElementPath,
+                      canvasPointToWindowPoint(
+                        pointOnCanvas,
+                        canvasState.scale,
+                        canvasState.canvasOffset,
+                      ),
+                      'existing',
+                      'no-text-selection',
+                    ),
+                  },
+                })
+              : null,
+          ]),
+        ],
+        {
+          strategyGeneratedUidsCache: {
+            [insertionSubject.uid]: maybeWrapperWithUid?.uid,
+          },
+        },
+      )
     },
   }
 }