Activating the escape hatch fixes the size of the target (#4356)

* fix(editor) Escape hatch fixes size of converted elements * fix(tests) Fixed tests broken by size fixing
concrete-utopia · Oct 11, 2023 · 603552b · 603552b
1 parent 804b375
commit 603552b
Show file tree

Hide file tree

Showing 2 changed files with 150 additions and 3 deletions.
diff --git a/...nvas/canvas-strategies/strategies/convert-to-absolute-and-move-strategy.spec.browser2.tsx b/...nvas/canvas-strategies/strategies/convert-to-absolute-and-move-strategy.spec.browser2.tsx
@@ -37,6 +37,7 @@ import {
   keyDown,
   mouseDownAtPoint,
   mouseDragFromPointToPoint,
+  mouseDragFromPointWithDelta,
   mouseMoveToPoint,
   mouseUpAtPoint,
   pressKey,
@@ -1170,7 +1171,7 @@ describe('Convert to absolute/escape hatch', () => {
             data-uid='aaa'
           >
           <View
-            style={{ backgroundColor: '#aaaaaa33', width: '50%', height: '20%', right: 185, bottom: 305, top: 15, left: 15, position: 'absolute', }}
+            style={{ backgroundColor: '#aaaaaa33', width: 200, height: 80, right: 185, bottom: 305, top: 15, left: 15, position: 'absolute', }}
             data-uid='bbb'
             data-testid='bbb'
           />
@@ -1290,7 +1291,7 @@ describe('Convert to absolute/escape hatch', () => {
             data-uid='aaa'
           >
           <View
-            style={{ backgroundColor: '#aaaaaa33', width: '50%', height: '20%', right: 185, bottom: 305, top: 15, left: 15, position: 'absolute', }}
+            style={{ backgroundColor: '#aaaaaa33', width: 200, height: 80, right: 185, bottom: 305, top: 15, left: 15, position: 'absolute', }}
             data-uid='bbb'
             data-testid='bbb'
           />
@@ -1301,6 +1302,148 @@ describe('Convert to absolute/escape hatch', () => {
   })
 })
 
+describe('Escape hatch strategy on awkward project', () => {
+  it('Fixes the size of the dragged element to stop it growing out of control', async () => {
+    const renderResult = await renderTestEditorWithCode(
+      `
+        import * as React from 'react'
+        import { Scene, Storyboard } from 'utopia-api'
+        
+        export var storyboard = (
+          <Storyboard data-uid='sb'>
+            <div
+              style={{
+                backgroundColor: '#aaaaaa33',
+                position: 'absolute',
+                left: 0,
+                top: 0,
+                width: 400,
+                height: 400,
+                display: 'flex',
+                flexDirection: 'column',
+                gap: 60,
+              }}
+              data-uid='root'
+            >
+              <div
+                style={{
+                  display: 'flex',
+                  flexDirection: 'row',
+                  width: '100%',
+                  justifyContent: 'space-between',
+                }}
+                data-uid='container'
+              >
+                <div
+                  style={{
+                    height: '100%',
+                    overflow: 'hidden',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    backgroundColor: '#FFEE00',
+                  }}
+                  data-testid='drag-me'
+                  data-uid='drag-me'
+                >
+                  <div
+                    style={{
+                      height: 100,
+                      width: 100,
+                      backgroundColor: '#FD1919',
+                    }}
+                    data-uid='child'
+                  />
+                </div>
+              </div>
+            </div>
+          </Storyboard>
+        )
+      `,
+      'await-first-dom-report',
+    )
+
+    const targetElement = EP.elementPath([['sb', 'root', 'container', 'drag-me']])
+
+    await selectComponentsForTest(renderResult, [targetElement])
+
+    const targetBounds = renderResult.renderedDOM.getByTestId('drag-me').getBoundingClientRect()
+    const canvasControlsLayer = renderResult.renderedDOM.getByTestId(CanvasControlsContainerID)
+
+    await mouseDragFromPointWithDelta(
+      canvasControlsLayer,
+      {
+        x: targetBounds.left + targetBounds.width / 2,
+        y: targetBounds.top + targetBounds.height / 2,
+      },
+      {
+        x: 15,
+        y: 15,
+      },
+    )
+
+    expect(getPrintedUiJsCode(renderResult.getEditorState())).toEqual(
+      formatTestProjectCode(`
+        import * as React from 'react'
+          import { Scene, Storyboard } from 'utopia-api'
+          
+          export var storyboard = (
+            <Storyboard data-uid='sb'>
+              <div
+                style={{
+                  backgroundColor: '#aaaaaa33',
+                  position: 'absolute',
+                  left: 0,
+                  top: 0,
+                  width: 400,
+                  height: 400,
+                  display: 'flex',
+                  flexDirection: 'column',
+                  gap: 60,
+                }}
+                data-uid='root'
+              >
+                <div
+                  style={{
+                    display: 'flex',
+                    flexDirection: 'row',
+                    width: '100%',
+                    justifyContent: 'space-between',
+                  }}
+                  data-uid='container'
+                >
+                  <div
+                    style={{
+                      height: 100,
+                      overflow: 'hidden',
+                      display: 'flex',
+                      flexDirection: 'column',
+                      backgroundColor: '#FFEE00',
+                      width: 100,
+                      position: 'absolute',
+                      left: 15,
+                      top: 15,
+                    }}
+                    data-testid='drag-me'
+                    data-uid='drag-me'
+                  >
+                    <div
+                      style={{
+                        height: 100,
+                        width: 100,
+                        backgroundColor: '#FD1919',
+                      }}
+                      data-uid='child'
+                    />
+                  </div>
+                </div>
+              </div>
+            </Storyboard>
+          )
+      `),
+    )
+  })
+})
+
 function codeForDragToEscapeHatchProject(flowOrFlex: 'flow' | 'flex'): string {
   return `
     <div

diff --git a/.../components/canvas/canvas-strategies/strategies/convert-to-absolute-and-move-strategy.tsx b/.../components/canvas/canvas-strategies/strategies/convert-to-absolute-and-move-strategy.tsx
@@ -79,6 +79,7 @@ import type { ElementPathTrees } from '../../../../core/shared/element-path-tree
 import { cssPixelLength } from '../../../inspector/common/css-utils'
 import type { ProjectContentTreeRoot } from '../../../assets'
 import { showToastCommand } from '../../commands/show-toast-command'
+import { sizeToVisualDimensions } from '../../../inspector/inspector-common'
 
 export const ConvertToAbsoluteAndMoveStrategyID = 'CONVERT_TO_ABSOLUTE_AND_MOVE_STRATEGY'
 
@@ -387,7 +388,10 @@ function collectSetLayoutPropCommands(
     })()
 
     if (newLocalFrame != null) {
-      let commands: Array<CanvasCommand> = [convertToAbsolute('always', path)]
+      let commands: Array<CanvasCommand> = [
+        ...sizeToVisualDimensions(metadata, canvasState.startingElementPathTree, path),
+        convertToAbsolute('always', path),
+      ]
       const updatePinsCommands = createUpdatePinsCommands(
         path,
         metadata,