diff --git a/editor/src/components/canvas/canvas-strategies/strategies/drag-to-insert-metastrategy.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/drag-to-insert-metastrategy.spec.browser2.tsx deleted file mode 100644 index b37938937002..000000000000 --- a/editor/src/components/canvas/canvas-strategies/strategies/drag-to-insert-metastrategy.spec.browser2.tsx +++ /dev/null @@ -1,960 +0,0 @@ -import { - FOR_TESTS_setNextGeneratedUid, - FOR_TESTS_setNextGeneratedUids, -} from '../../../../core/model/element-template-utils.test-utils' -import type { Modifiers } from '../../../../utils/modifiers' -import { emptyModifiers } from '../../../../utils/modifiers' -import { - expectSingleUndo2Saves, - slightlyOffsetPointBecauseVeryWeirdIssue, -} from '../../../../utils/utils.test-utils' -import { setRightMenuTab } from '../../../editor/actions/action-creators' -import { RightMenuTab, navigatorEntryToKey } from '../../../editor/store/editor-state' -import { CanvasControlsContainerID } from '../../controls/new-canvas-controls' -import { DragOutlineControlTestId } from '../../controls/select-mode/drag-outline-control' -import { - mouseDownAtPoint, - mouseMoveToPoint, - mouseUpAtPoint, - pressKey, -} from '../../event-helpers.test-utils' -import type { EditorRenderResult } from '../../ui-jsx.test-utils' -import { - getPrintedUiJsCode, - makeTestProjectCodeWithSnippet, - renderTestEditorWithCode, -} from '../../ui-jsx.test-utils' - -// FIXME These tests will probably start to fail if the insert menu becomes too long, at which point we may -// have to insert some mocking to restrict the available items there - -async function setupInsertTest(inputCode: string): Promise { - const renderResult = await renderTestEditorWithCode(inputCode, 'await-first-dom-report') - await renderResult.dispatch([setRightMenuTab(RightMenuTab.Insert)], false) - - const newUID = 'ddd' - FOR_TESTS_setNextGeneratedUid(newUID) - - return renderResult -} - -async function startDraggingFromInsertMenuDivButtonToPoint( - targetPoint: { x: number; y: number }, - modifiers: Modifiers, - renderResult: EditorRenderResult, - elementType: string = 'div', -): Promise { - const insertButton = renderResult.renderedDOM.getByTestId(`insert-item-${elementType}`) - const insertButtonBounds = insertButton.getBoundingClientRect() - const canvasControlsLayer = renderResult.renderedDOM.getByTestId(CanvasControlsContainerID) - - const startPoint = slightlyOffsetPointBecauseVeryWeirdIssue({ - x: insertButtonBounds.x + insertButtonBounds.width / 2, - y: insertButtonBounds.y + insertButtonBounds.height / 2, - }) - - const endPoint = slightlyOffsetPointBecauseVeryWeirdIssue(targetPoint) - - await mouseMoveToPoint(insertButton, startPoint) - await mouseDownAtPoint(insertButton, startPoint) - await mouseMoveToPoint(canvasControlsLayer, endPoint, { - modifiers: modifiers, - eventOptions: { buttons: 1 }, - }) -} - -async function finishDraggingToPoint( - targetPoint: { x: number; y: number }, - modifiers: Modifiers, - renderResult: EditorRenderResult, -): Promise { - const canvasControlsLayer = renderResult.renderedDOM.getByTestId(CanvasControlsContainerID) - const endPoint = slightlyOffsetPointBecauseVeryWeirdIssue(targetPoint) - await mouseUpAtPoint(canvasControlsLayer, endPoint, { modifiers: modifiers }) -} - -async function dragFromInsertMenuDivButtonToPoint( - targetPoint: { x: number; y: number }, - modifiers: Modifiers, - renderResult: EditorRenderResult, - showDragOutline: 'show-drag-outline' | 'no-drag-outline', - elementType: string = 'div', -) { - await expectSingleUndo2Saves(renderResult, async () => { - await startDraggingFromInsertMenuDivButtonToPoint( - targetPoint, - modifiers, - renderResult, - elementType, - ) - const dragOutlineControl = await renderResult.renderedDOM.queryByTestId( - DragOutlineControlTestId, - ) - if (showDragOutline === 'show-drag-outline') { - expect(dragOutlineControl).not.toBeNull() - } else { - expect(dragOutlineControl).toBeNull() - } - await finishDraggingToPoint(targetPoint, modifiers, renderResult) - }) - - await renderResult.getDispatchFollowUpActionsFinished() -} - -describe('drag-to-insert', () => { - describe('Dragging from the insert menu into an absolute layout', () => { - const inputCode = makeTestProjectCodeWithSnippet(` -
-
-
-
- `) - - it('Should insert a div into an absolute layout', async () => { - const renderResult = await setupInsertTest(inputCode) - - const targetParentElement = renderResult.renderedDOM.getByTestId('larger') - const targetParentElementBounds = targetParentElement.getBoundingClientRect() - const targetPoint = { - x: targetParentElementBounds.x + targetParentElementBounds.width / 2, - y: targetParentElementBounds.y + targetParentElementBounds.height / 2, - } - - await dragFromInsertMenuDivButtonToPoint( - targetPoint, - emptyModifiers, - renderResult, - 'no-drag-outline', - ) - - expect(getPrintedUiJsCode(renderResult.getEditorState())).toEqual( - makeTestProjectCodeWithSnippet(` -
-
-
-
-
-
- `), - ) - }) - - it('Should insert into a smaller element', async () => { - const renderResult = await setupInsertTest(inputCode) - - const targetParentElement = renderResult.renderedDOM.getByTestId('smaller') - const targetParentElementBounds = targetParentElement.getBoundingClientRect() - const targetPoint = { - x: targetParentElementBounds.x + targetParentElementBounds.width / 2, - y: targetParentElementBounds.y + targetParentElementBounds.height / 2, - } - - await dragFromInsertMenuDivButtonToPoint( - targetPoint, - emptyModifiers, - renderResult, - 'no-drag-outline', - ) - - expect(getPrintedUiJsCode(renderResult.getEditorState())).toEqual( - makeTestProjectCodeWithSnippet(` -
-
-
-
-
-
- `), - ) - }) - - it('Should insert a conditional into an absolute layout', async () => { - const renderResult = await setupInsertTest(inputCode) - - FOR_TESTS_setNextGeneratedUids(['ddd']) - - const targetParentElement = renderResult.renderedDOM.getByTestId('larger') - const targetParentElementBounds = targetParentElement.getBoundingClientRect() - const targetPoint = { - x: targetParentElementBounds.x + targetParentElementBounds.width / 2, - y: targetParentElementBounds.y + targetParentElementBounds.height / 2, - } - - await dragFromInsertMenuDivButtonToPoint( - targetPoint, - emptyModifiers, - renderResult, - 'no-drag-outline', - 'Conditional', - ) - - expect(getPrintedUiJsCode(renderResult.getEditorState())).toEqual( - makeTestProjectCodeWithSnippet(` -
-
- {true ? ( -
- ) : ( -
- False branch -
- )} -
-
-
- `), - ) - }) - - it('Should insert a fragment into an absolute layout', async () => { - const renderResult = await setupInsertTest(inputCode) - - const targetParentElement = renderResult.renderedDOM.getByTestId('larger') - const targetParentElementBounds = targetParentElement.getBoundingClientRect() - const targetPoint = { - x: targetParentElementBounds.x + targetParentElementBounds.width / 2, - y: targetParentElementBounds.y + targetParentElementBounds.height / 2, - } - - await dragFromInsertMenuDivButtonToPoint( - targetPoint, - emptyModifiers, - renderResult, - 'no-drag-outline', - 'Fragment', - ) - - expect(getPrintedUiJsCode(renderResult.getEditorState())).toEqual( - makeTestProjectCodeWithSnippet(` -
-
- -
- -
-
-
- `), - ) - }) - }) - - describe('Dragging from the insert menu into a flex layout', () => { - const inputCode = makeTestProjectCodeWithSnippet(` -
-
-
-
- `) - - it('Should insert a div into a flex layout at zero position', async () => { - const renderResult = await setupInsertTest(inputCode) - - const targetNextSibling = renderResult.renderedDOM.getByTestId('bbb') - const targetNextSiblingBounds = targetNextSibling.getBoundingClientRect() - // Drag close to the left edge of the target sibling - const targetPoint = { - x: targetNextSiblingBounds.x + 5, - y: targetNextSiblingBounds.y + 5, - } - - await dragFromInsertMenuDivButtonToPoint( - targetPoint, - emptyModifiers, - renderResult, - 'show-drag-outline', - ) - - expect(getPrintedUiJsCode(renderResult.getEditorState())).toEqual( - makeTestProjectCodeWithSnippet(` -
-
-
-
-
- `), - ) - }) - - it('Should insert a wrapped element into a flex layout at zero position', async () => { - const renderResult = await setupInsertTest(inputCode) - - const targetNextSibling = renderResult.renderedDOM.getByTestId('bbb') - const targetNextSiblingBounds = targetNextSibling.getBoundingClientRect() - // Drag close to the left edge of the target sibling - const targetPoint = { - x: targetNextSiblingBounds.x + 5, - y: targetNextSiblingBounds.y + 5, - } - - await dragFromInsertMenuDivButtonToPoint( - targetPoint, - emptyModifiers, - renderResult, - 'show-drag-outline', - 'Fragment', - ) - - expect(getPrintedUiJsCode(renderResult.getEditorState())).toEqual( - makeTestProjectCodeWithSnippet(` -
- -
- -
-
-
- `), - ) - }) - - it('Should insert a div into a flex layout with absolute positioning', async () => { - const renderResult = await setupInsertTest(inputCode) - - const targetSibling = renderResult.renderedDOM.getByTestId('bbb') - const targetSiblingBounds = targetSibling.getBoundingClientRect() - // Drag close to the right edge of the target sibling - const targetPoint = { - x: targetSiblingBounds.x + targetSiblingBounds.width - 5, - y: targetSiblingBounds.y + targetSiblingBounds.height - 5, - } - - await startDraggingFromInsertMenuDivButtonToPoint(targetPoint, emptyModifiers, renderResult) - // Tab once to switch from flex insert to abs - await pressKey('Tab', { modifiers: emptyModifiers }) - await finishDraggingToPoint(targetPoint, emptyModifiers, renderResult) - - expect(getPrintedUiJsCode(renderResult.getEditorState())).toEqual( - makeTestProjectCodeWithSnippet(` -
-
-
-
-
- `), - ) - }) - - it('Should forcibly insert a div into a flex layout that does not provide bounds with absolute positioning', async () => { - const renderResult = await setupInsertTest(inputCode) - - const targetParent = renderResult.renderedDOM.getByTestId('ccc') - const targetParentBounds = targetParent.getBoundingClientRect() - - const targetPoint = { - x: targetParentBounds.x + targetParentBounds.width / 2, - y: targetParentBounds.y + targetParentBounds.height / 2, - } - - await startDraggingFromInsertMenuDivButtonToPoint(targetPoint, emptyModifiers, renderResult) - // Tab once to switch from flex insert to forced abs - await pressKey('Tab', { modifiers: emptyModifiers }) - await finishDraggingToPoint(targetPoint, emptyModifiers, renderResult) - - expect(getPrintedUiJsCode(renderResult.getEditorState())).toEqual( - makeTestProjectCodeWithSnippet(` -
-
-
-
-
-
- `), - ) - }) - - it('Should insert a div into a flex layout at the next position', async () => { - const renderResult = await setupInsertTest(inputCode) - - const targetPrevSibling = renderResult.renderedDOM.getByTestId('bbb') - const targetPrevSiblingBounds = targetPrevSibling.getBoundingClientRect() - // Drag close to the right edge of the target sibling - const targetPoint = { - x: targetPrevSiblingBounds.x + targetPrevSiblingBounds.width - 5, - y: targetPrevSiblingBounds.y + targetPrevSiblingBounds.height - 5, - } - - await dragFromInsertMenuDivButtonToPoint( - targetPoint, - emptyModifiers, - renderResult, - 'show-drag-outline', - ) - - expect(getPrintedUiJsCode(renderResult.getEditorState())).toEqual( - makeTestProjectCodeWithSnippet(` -
-
-
-
-
- `), - ) - }) - - it('Should insert a div into a child of a flex layout which provides absolute bounds', async () => { - const renderResult = await setupInsertTest(inputCode) - - const targetParentElement = renderResult.renderedDOM.getByTestId('bbb') - const targetParentElementBounds = targetParentElement.getBoundingClientRect() - - const targetPoint = { - x: targetParentElementBounds.x + targetParentElementBounds.width / 2, - y: targetParentElementBounds.y + targetParentElementBounds.height / 2, - } - - await dragFromInsertMenuDivButtonToPoint( - targetPoint, - emptyModifiers, - renderResult, - 'no-drag-outline', - ) - - expect(getPrintedUiJsCode(renderResult.getEditorState())).toEqual( - makeTestProjectCodeWithSnippet(` -
-
-
-
-
-
- `), - ) - }) - }) - - it('can insert two images', async () => { - const renderResult = await renderTestEditorWithCode( - makeTestProjectCodeWithSnippet(` -
-
-
-
- `), - 'await-first-dom-report', - ) - - const targetParentElement = renderResult.renderedDOM.getByTestId('larger') - const targetParentElementBounds = targetParentElement.getBoundingClientRect() - const targetPoint = { - x: targetParentElementBounds.x + targetParentElementBounds.width / 2, - y: targetParentElementBounds.y + targetParentElementBounds.height / 2, - } - - await renderResult.dispatch([setRightMenuTab(RightMenuTab.Insert)], false) - - FOR_TESTS_setNextGeneratedUid('ddd') - - await dragFromInsertMenuDivButtonToPoint( - targetPoint, - emptyModifiers, - renderResult, - 'no-drag-outline', - 'img', - ) - - await renderResult.dispatch([setRightMenuTab(RightMenuTab.Insert)], false) - - FOR_TESTS_setNextGeneratedUid('eee') - - await dragFromInsertMenuDivButtonToPoint( - targetPoint, - emptyModifiers, - renderResult, - 'no-drag-outline', - 'img', - ) - - expect(renderResult.getEditorState().derived.navigatorTargets.map(navigatorEntryToKey)).toEqual( - [ - 'regular-utopia-storyboard-uid/scene-aaa', - 'regular-utopia-storyboard-uid/scene-aaa/app-entity', - 'regular-utopia-storyboard-uid/scene-aaa/app-entity:aaa', - 'regular-utopia-storyboard-uid/scene-aaa/app-entity:aaa/larger', - 'regular-utopia-storyboard-uid/scene-aaa/app-entity:aaa/larger/ddd', - 'regular-utopia-storyboard-uid/scene-aaa/app-entity:aaa/larger/eee', - 'regular-utopia-storyboard-uid/scene-aaa/app-entity:aaa/smaller', - ], - ) - }) -}) diff --git a/editor/src/components/canvas/canvas-strategies/strategies/drag-to-insert-metastrategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/drag-to-insert-metastrategy.tsx index 60eafa144228..d98c44b2dd47 100644 --- a/editor/src/components/canvas/canvas-strategies/strategies/drag-to-insert-metastrategy.tsx +++ b/editor/src/components/canvas/canvas-strategies/strategies/drag-to-insert-metastrategy.tsx @@ -58,6 +58,10 @@ import { wrapInContainerCommand } from '../../commands/wrap-in-container-command import type { InsertionPath } from '../../../editor/store/insertion-path' import { childInsertionPath } from '../../../editor/store/insertion-path' +/** + * NOTE: this strategy was mostly used for legacy insert menu interactions, but it's kept + * intact since it's still used for image insertion from other places. + */ export const dragToInsertMetaStrategy: MetaCanvasStrategy = ( canvasState: InteractionCanvasState, interactionSession: InteractionSession | null, 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 index 8dec77d65f2c..423ab0bd4d15 100644 --- 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 @@ -66,6 +66,14 @@ import { wildcardPatch } from '../../commands/wildcard-patch-command' import type { InsertionPath } from '../../../editor/store/insertion-path' import { childInsertionPath } from '../../../editor/store/insertion-path' +/** + * + * NOTE: https://github.com/concrete-utopia/utopia/pull/5819 deleted a bunch of + * tests for this strategy that relied on the legacy insert menu. + * + * ! IF YOU WORK ON THIS, PLEASE RESURRECT THE TESTS AND MAKE THEM USE THE 'F' SHORTCUT ! + * + */ export const drawToInsertMetaStrategy: MetaCanvasStrategy = ( canvasState: InteractionCanvasState, interactionSession: InteractionSession | null, diff --git a/editor/src/components/canvas/canvas-strategies/strategies/draw-to-insert-strategy.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/draw-to-insert-strategy.spec.browser2.tsx index 9e1cb0480398..2540e52d561d 100644 --- a/editor/src/components/canvas/canvas-strategies/strategies/draw-to-insert-strategy.spec.browser2.tsx +++ b/editor/src/components/canvas/canvas-strategies/strategies/draw-to-insert-strategy.spec.browser2.tsx @@ -4,41 +4,12 @@ import { makeTestProjectCodeWithSnippet, renderTestEditorWithCode, getPrintedUiJsCode, - TestSceneUID, - TestAppUID, } from '../../ui-jsx.test-utils' import { CanvasControlsContainerID } from '../../controls/new-canvas-controls' import * as EP from '../../../../core/shared/element-path' -import { - mouseClickAtPoint, - mouseDownAtPoint, - mouseDragFromPointToPoint, - mouseDragFromPointToPointNoMouseDown, - mouseMoveToPoint, - pressKey, -} from '../../event-helpers.test-utils' +import { mouseClickAtPoint, mouseMoveToPoint, pressKey } from '../../event-helpers.test-utils' import { RightMenuTab } from '../../../editor/store/editor-state' -import { - FOR_TESTS_setNextGeneratedUid, - FOR_TESTS_setNextGeneratedUids, -} from '../../../../core/model/element-template-utils.test-utils' -import { BakedInStoryboardUID } from '../../../../core/model/scene-utils' -import type { ElementInstanceMetadataMap } from '../../../../core/shared/element-template' -import type { CanvasPoint, CanvasRectangle } from '../../../../core/shared/math-utils' -import { - canvasPoint, - isInfinityRectangle, - offsetPoint, - windowPoint, -} from '../../../../core/shared/math-utils' -import { MetadataUtils } from '../../../../core/model/element-metadata-utils' -import type { Direction } from '../../../inspector/common/css-utils' -import { expectSingleUndo2Saves } from '../../../../utils/utils.test-utils' -import type { Modifiers } from '../../../../utils/modifiers' -import { emptyModifiers, shiftModifier } from '../../../../utils/modifiers' - -// FIXME These tests will probably start to fail if the insert menu becomes too long, at which point we may -// have to insert some mocking to restrict the available items there +import { FOR_TESTS_setNextGeneratedUid } from '../../../../core/model/element-template-utils.test-utils' function slightlyOffsetWindowPointBecauseVeryWeirdIssue(point: { x: number; y: number }) { // FIXME when running in headless chrome, the result of getBoundingClientRect will be slightly @@ -60,232 +31,6 @@ function ensureInInsertMode(renderResult: EditorRenderResult): void { expect(renderResult.getEditorState().editor.mode.type).toEqual('insert') } -async function enterInsertModeFromInsertMenu( - renderResult: EditorRenderResult, - elementType: string = 'div', -) { - const insertButton = renderResult.renderedDOM.getByTestId(`insert-item-${elementType}`) - const insertButtonBounds = insertButton.getBoundingClientRect() - - const point = slightlyOffsetWindowPointBecauseVeryWeirdIssue({ - x: insertButtonBounds.x + insertButtonBounds.width / 2, - y: insertButtonBounds.y + insertButtonBounds.height / 2, - }) - - await mouseMoveToPoint(insertButton, point) - await mouseClickAtPoint(insertButton, point) - - await renderResult.getDispatchFollowUpActionsFinished() - - ensureInInsertMode(renderResult) -} - -async function enterInsertModeFromInsertMenuStartDrag(renderResult: EditorRenderResult) { - const insertButton = renderResult.renderedDOM.getByTestId('insert-item-div') - const insertButtonBounds = insertButton.getBoundingClientRect() - - const point = slightlyOffsetWindowPointBecauseVeryWeirdIssue({ - x: insertButtonBounds.x + insertButtonBounds.width / 2, - y: insertButtonBounds.y + insertButtonBounds.height / 2, - }) - - await mouseMoveToPoint(insertButton, point) - await mouseDownAtPoint(insertButton, point) - - await renderResult.getDispatchFollowUpActionsFinished() - - ensureInInsertMode(renderResult) -} - -function isIndicatorBeforeSiblingBBB( - metadata: ElementInstanceMetadataMap, - reparentLine: CanvasRectangle, -): boolean { - const targetSibling = EP.fromString( - `${BakedInStoryboardUID}/${TestSceneUID}/${TestAppUID}:aaa/bbb`, - ) - const targetParent = EP.fromString(`${BakedInStoryboardUID}/${TestSceneUID}/${TestAppUID}:aaa`) - - const parentFrame = MetadataUtils.getFrameInCanvasCoords(targetParent, metadata) - const nextSiblingFrame = MetadataUtils.getFrameInCanvasCoords(targetSibling, metadata) - - if (parentFrame == null || nextSiblingFrame == null || isInfinityRectangle(nextSiblingFrame)) { - return false - } else { - const isBelowRightOfParentTopLeft = - isInfinityRectangle(parentFrame) || - (reparentLine.x >= parentFrame.x && reparentLine.y >= parentFrame.y) - - return ( - isBelowRightOfParentTopLeft && - reparentLine.x <= nextSiblingFrame.x && - reparentLine.y <= nextSiblingFrame.y - ) - } -} - -function isIndicatorBetweenSiblingsBBBCCC( - metadata: ElementInstanceMetadataMap, - reparentLine: CanvasRectangle, - flexDirection: Direction, -): boolean { - const targetSiblingBefore = EP.fromString( - `${BakedInStoryboardUID}/${TestSceneUID}/${TestAppUID}:aaa/bbb`, - ) - const targetSiblingAfter = EP.fromString( - `${BakedInStoryboardUID}/${TestSceneUID}/${TestAppUID}:aaa/ccc`, - ) - const prevSiblingFrame = MetadataUtils.getFrameInCanvasCoords(targetSiblingBefore, metadata) - const nextSiblingFrame = MetadataUtils.getFrameInCanvasCoords(targetSiblingAfter, metadata) - if ( - prevSiblingFrame == null || - nextSiblingFrame == null || - isInfinityRectangle(prevSiblingFrame) || - isInfinityRectangle(nextSiblingFrame) - ) { - return false - } else { - const prevSiblingEdge = - flexDirection === 'horizontal' - ? { - x: prevSiblingFrame.x + prevSiblingFrame.width, - y: prevSiblingFrame.y, - } - : { - x: prevSiblingFrame.x, - y: prevSiblingFrame.y + prevSiblingFrame.height, - } - return ( - reparentLine.x >= prevSiblingEdge.x && - reparentLine.y >= prevSiblingEdge.y && - reparentLine.x <= nextSiblingFrame.x && - reparentLine.y <= nextSiblingFrame.y - ) - } -} - -const testDrawToInsertImageAspectRatio = async (inputCode: string, expectedCode: string) => { - const renderResult = await setupInsertTest(makeTestProjectCodeWithSnippet(inputCode)) - await enterInsertModeFromInsertMenu(renderResult, 'img') - - const targetElement = renderResult.renderedDOM.getByTestId('bbb') - const targetElementBounds = targetElement.getBoundingClientRect() - const canvasControlsLayer = renderResult.renderedDOM.getByTestId(CanvasControlsContainerID) - - const startPoint = slightlyOffsetWindowPointBecauseVeryWeirdIssue({ - x: targetElementBounds.x + 5, - y: targetElementBounds.y + 5, - }) - const endPoint = slightlyOffsetWindowPointBecauseVeryWeirdIssue({ - x: targetElementBounds.x + 15, // with aspect ratio lock this 10px with should be ignored - y: targetElementBounds.y + 305, - }) - - // Move before starting dragging - await mouseMoveToPoint(canvasControlsLayer, startPoint) - - // Highlight should show the candidate parent - expect(renderResult.getEditorState().editor.highlightedViews.map(EP.toUid)).toEqual(['bbb']) - - // Drag from inside bbb to inside ccc - await mouseDragFromPointToPoint(canvasControlsLayer, startPoint, endPoint) - - await renderResult.getDispatchFollowUpActionsFinished() - - // Check that the inserted element is a child of bbb - expect(getPrintedUiJsCode(renderResult.getEditorState())).toEqual( - makeTestProjectCodeWithSnippet(expectedCode), - ) -} - -async function drawToInsertTestMaybeAddsFlexGrow( - dragDelta: CanvasPoint, - expectedStyle: React.CSSProperties, - flexDirection: 'row' | 'column', - parentSize: number | null = null, -) { - const flexElementWithChildren = (insertedSibling: string = '') => - makeTestProjectCodeWithSnippet(` -
-
-
-
- ${insertedSibling} -
- `) - - const renderResult = await setupInsertTest(flexElementWithChildren()) - await enterInsertModeFromInsertMenu(renderResult) - - const targetElement = renderResult.renderedDOM.getByTestId('bb3') - const targetElementBounds = targetElement.getBoundingClientRect() - const canvasControlsLayer = renderResult.renderedDOM.getByTestId(CanvasControlsContainerID) - - const startPoint = slightlyOffsetWindowPointBecauseVeryWeirdIssue({ - x: targetElementBounds.x + targetElementBounds.width + 5, - y: targetElementBounds.y + targetElementBounds.height + 5, - }) as CanvasPoint - const endPoint = offsetPoint(startPoint, dragDelta) - - // Move before starting dragging - await mouseMoveToPoint(canvasControlsLayer, startPoint) - - // Highlight should show the candidate parent - expect(renderResult.getEditorState().editor.highlightedViews.map(EP.toUid)).toEqual(['aaa']) - - // Drag horizontally close to the first position - await mouseDragFromPointToPoint(canvasControlsLayer, startPoint, endPoint) - - await renderResult.getDispatchFollowUpActionsFinished() - - const insertedSiblingCode = `
- ` - - // Check that the inserted element contains the correct style property - expect(getPrintedUiJsCode(renderResult.getEditorState())).toEqual( - flexElementWithChildren(insertedSiblingCode), - ) -} - /* eslint jest/expect-expect: ["error", { "assertFunctionNames": ["expect", "runInsertTest", "runClickToInsertTest", "drawToInsertTestMaybeAddsFlexGrow", "testDrawToInsertImageAspectRatio" ] }] */ describe('draw-to-insert', () => { @@ -326,162 +71,25 @@ describe('draw-to-insert', () => {
`) - describe('Inserting into simple target', () => { - async function runInsertTest( - dragDelta: { x: number; y: number }, - modifiers: Modifiers, - expectedSize: { width: number; height: number }, - ) { - const renderResult = await setupInsertTest(inputCode) - await enterInsertModeFromInsertMenu(renderResult) - - const targetElement = renderResult.renderedDOM.getByTestId('bbb') - const targetElementBounds = targetElement.getBoundingClientRect() - const canvasControlsLayer = renderResult.renderedDOM.getByTestId(CanvasControlsContainerID) - - const startPoint = slightlyOffsetWindowPointBecauseVeryWeirdIssue({ - x: targetElementBounds.x + 5, - y: targetElementBounds.y + 5, - }) - const endPoint = slightlyOffsetWindowPointBecauseVeryWeirdIssue({ - x: startPoint.x + dragDelta.x, - y: startPoint.y + dragDelta.y, - }) - - // Move before starting dragging - await mouseMoveToPoint(canvasControlsLayer, startPoint) - - // Highlight should show the candidate parent - expect(renderResult.getEditorState().editor.highlightedViews.map(EP.toUid)).toEqual(['bbb']) - - // Drag from inside bbb to inside ccc - await mouseDragFromPointToPoint(canvasControlsLayer, startPoint, endPoint, { - modifiers: modifiers, - }) - - await renderResult.getDispatchFollowUpActionsFinished() - - // Check that the inserted element is a child of bbb - expect(getPrintedUiJsCode(renderResult.getEditorState())).toEqual( - makeTestProjectCodeWithSnippet(` -
-
-
-
-
-
- `), - ) - } - - it('Should honour the initial target when dragging to insert', async () => { - const xDelta = 20 - const yDelta = 300 - await runInsertTest({ x: xDelta, y: yDelta }, emptyModifiers, { - width: xDelta, - height: yDelta, - }) - }) - - it('Should lock aspect ratio to 1:1 when holding shift and dragging vertically', async () => { - const xDelta = 20 - const yDelta = 300 - - // The result should be the same regardless of which dimension of the drag is the larger - await runInsertTest({ x: xDelta, y: yDelta }, shiftModifier, { - width: yDelta, - height: yDelta, - }) - }) - - it('Should lock aspect ratio to 1:1 when holding shift and dragging horizontally', async () => { - const xDelta = 300 - const yDelta = 20 - - // The result should be the same regardless of which dimension of the drag is the larger - await runInsertTest({ x: xDelta, y: yDelta }, shiftModifier, { - width: xDelta, - height: xDelta, - }) - }) - - it('Should insert a conditional', async () => { - const renderResult = await setupInsertTest(inputCode) - await enterInsertModeFromInsertMenu(renderResult, 'Conditional') - - FOR_TESTS_setNextGeneratedUids([ - 'skip1', - 'skip2', - 'skip3', - 'skip4', - 'skip5', - 'skip6', - 'skip7', - 'false-branch', - ]) - + describe('Click to insert with default size', () => { + async function runClickToInsertTest(renderResult: EditorRenderResult) { const targetElement = renderResult.renderedDOM.getByTestId('bbb') const targetElementBounds = targetElement.getBoundingClientRect() const canvasControlsLayer = renderResult.renderedDOM.getByTestId(CanvasControlsContainerID) - const dragDelta = windowPoint({ x: 50, y: 40 }) - - const startPoint = slightlyOffsetWindowPointBecauseVeryWeirdIssue({ - x: targetElementBounds.x + 5, - y: targetElementBounds.y + 5, - }) - const endPoint = slightlyOffsetWindowPointBecauseVeryWeirdIssue({ - x: startPoint.x + dragDelta.x, - y: startPoint.y + dragDelta.y, + const point = slightlyOffsetWindowPointBecauseVeryWeirdIssue({ + x: targetElementBounds.x + 65, + y: targetElementBounds.y + 55, }) - // Move before starting dragging - await mouseMoveToPoint(canvasControlsLayer, startPoint) + // Move before clicking + await mouseMoveToPoint(canvasControlsLayer, point) // Highlight should show the candidate parent expect(renderResult.getEditorState().editor.highlightedViews.map(EP.toUid)).toEqual(['bbb']) - // Drag from inside bbb to inside ccc - await mouseDragFromPointToPoint(canvasControlsLayer, startPoint, endPoint) + // Click in bbb + await mouseClickAtPoint(canvasControlsLayer, point) await renderResult.getDispatchFollowUpActionsFinished() @@ -509,116 +117,17 @@ describe('draw-to-insert', () => { backgroundColor: '#d3d3d3', }} > - {true ? (
- ) : ( -
- False branch -
- )} -
-
-
- `), - ) - }) - - it('Should insert a fragment', async () => { - const renderResult = await setupInsertTest(inputCode) - await enterInsertModeFromInsertMenu(renderResult, 'Fragment') - - const targetElement = renderResult.renderedDOM.getByTestId('bbb') - const targetElementBounds = targetElement.getBoundingClientRect() - const canvasControlsLayer = renderResult.renderedDOM.getByTestId(CanvasControlsContainerID) - - const dragDelta = windowPoint({ x: 50, y: 40 }) - - const startPoint = slightlyOffsetWindowPointBecauseVeryWeirdIssue({ - x: targetElementBounds.x + 5, - y: targetElementBounds.y + 5, - }) - const endPoint = slightlyOffsetWindowPointBecauseVeryWeirdIssue({ - x: startPoint.x + dragDelta.x, - y: startPoint.y + dragDelta.y, - }) - - // Move before starting dragging - await mouseMoveToPoint(canvasControlsLayer, startPoint) - - // Highlight should show the candidate parent - expect(renderResult.getEditorState().editor.highlightedViews.map(EP.toUid)).toEqual(['bbb']) - - // Drag from inside bbb to inside ccc - await mouseDragFromPointToPoint(canvasControlsLayer, startPoint, endPoint) - - await renderResult.getDispatchFollowUpActionsFinished() - - // Check that the inserted element is a child of bbb - expect(getPrintedUiJsCode(renderResult.getEditorState())).toEqual( - makeTestProjectCodeWithSnippet(` -
-
- -
-
{
`), ) - }) - }) - - it('Should drag to insert into targets smaller than the element', async () => { - const renderResult = await setupInsertTest(inputCode) - await enterInsertModeFromInsertMenu(renderResult) - - const targetElement = renderResult.renderedDOM.getByTestId('bbb') - const targetElementBounds = targetElement.getBoundingClientRect() - const canvasControlsLayer = renderResult.renderedDOM.getByTestId(CanvasControlsContainerID) - - const startPoint = slightlyOffsetWindowPointBecauseVeryWeirdIssue({ - x: targetElementBounds.x + 5, - y: targetElementBounds.y + 5, - }) - const endPoint = slightlyOffsetWindowPointBecauseVeryWeirdIssue({ - x: targetElementBounds.x + 1005, - y: targetElementBounds.y + 1005, - }) - - // Move before starting dragging - await mouseMoveToPoint(canvasControlsLayer, startPoint) - - // Highlight should show the candidate parent - expect(renderResult.getEditorState().editor.highlightedViews.map(EP.toUid)).toEqual(['bbb']) - - // Drag from inside bbb to inside ccc - await mouseDragFromPointToPoint(canvasControlsLayer, startPoint, endPoint) - - await renderResult.getDispatchFollowUpActionsFinished() - - // Check that the inserted element is a child of bbb - expect(getPrintedUiJsCode(renderResult.getEditorState())).toEqual( - makeTestProjectCodeWithSnippet(` -
-
-
-
-
-
- `), - ) - }) - - describe('Click to insert with default size', () => { - async function runClickToInsertTest(renderResult: EditorRenderResult) { - const targetElement = renderResult.renderedDOM.getByTestId('bbb') - const targetElementBounds = targetElement.getBoundingClientRect() - const canvasControlsLayer = renderResult.renderedDOM.getByTestId(CanvasControlsContainerID) - - const point = slightlyOffsetWindowPointBecauseVeryWeirdIssue({ - x: targetElementBounds.x + 65, - y: targetElementBounds.y + 55, - }) - - // Move before clicking - await mouseMoveToPoint(canvasControlsLayer, point) - - // Highlight should show the candidate parent - expect(renderResult.getEditorState().editor.highlightedViews.map(EP.toUid)).toEqual(['bbb']) - - // Click in bbb - await mouseClickAtPoint(canvasControlsLayer, point) - - await renderResult.getDispatchFollowUpActionsFinished() - - // Check that the inserted element is a child of bbb - expect(getPrintedUiJsCode(renderResult.getEditorState())).toEqual( - makeTestProjectCodeWithSnippet(` -
-
-
-
-
-
- `), - ) - } - - it('works from the insert menu', async () => { - const renderResult = await setupInsertTest(inputCode) - await enterInsertModeFromInsertMenu(renderResult) - await runClickToInsertTest(renderResult) - }) + } it('works with the keyboard shortcut', async () => { const renderResult = await setupInsertTest(inputCode) @@ -804,2481 +152,5 @@ describe('draw-to-insert', () => { await runClickToInsertTest(renderResult) }) }) - - it('Click to insert into an element smaller than the default size', async () => { - const renderResult = await setupInsertTest( - makeTestProjectCodeWithSnippet(` -
-
-
- `), - ) - await enterInsertModeFromInsertMenu(renderResult) - - const targetElement = renderResult.renderedDOM.getByTestId('bbb') - const targetElementBounds = targetElement.getBoundingClientRect() - const canvasControlsLayer = renderResult.renderedDOM.getByTestId(CanvasControlsContainerID) - - const point = slightlyOffsetWindowPointBecauseVeryWeirdIssue({ - x: targetElementBounds.x + 5, - y: targetElementBounds.y + 5, - }) - - // Move before clicking - await mouseMoveToPoint(canvasControlsLayer, point) - - // Highlight should show the candidate parent - expect(renderResult.getEditorState().editor.highlightedViews.map(EP.toUid)).toEqual(['bbb']) - - // Click in bbb - await mouseClickAtPoint(canvasControlsLayer, point) - - await renderResult.getDispatchFollowUpActionsFinished() - - // Check that the inserted element is a child of bbb - expect(getPrintedUiJsCode(renderResult.getEditorState())).toEqual( - makeTestProjectCodeWithSnippet(` -
-
-
-
-
- `), - ) - }) - - it('Should not clear the intended target when dragging to insert past the scene boundary', async () => { - const renderResult = await setupInsertTest(inputCode) - await enterInsertModeFromInsertMenu(renderResult) - - const targetElement = renderResult.renderedDOM.getByTestId('bbb') - const targetElementBounds = targetElement.getBoundingClientRect() - const canvasControlsLayer = renderResult.renderedDOM.getByTestId(CanvasControlsContainerID) - - const startPoint = slightlyOffsetWindowPointBecauseVeryWeirdIssue({ - x: targetElementBounds.x + 5, - y: targetElementBounds.y + 5, - }) - const endPoint = slightlyOffsetWindowPointBecauseVeryWeirdIssue({ - x: targetElementBounds.x + 1005, - y: targetElementBounds.y + 15, - }) - - // Move before starting dragging - await mouseMoveToPoint(canvasControlsLayer, startPoint) - - // Highlight should show the candidate parent - expect(renderResult.getEditorState().editor.highlightedViews.map(EP.toUid)).toEqual(['bbb']) - - // Drag from inside bbb to outside of the scene - await mouseDragFromPointToPoint(canvasControlsLayer, startPoint, endPoint) - - await renderResult.getDispatchFollowUpActionsFinished() - - // Check that the inserted element is a child of bbb - expect(getPrintedUiJsCode(renderResult.getEditorState())).toEqual( - makeTestProjectCodeWithSnippet(` -
-
-
-
-
-
- `), - ) - }) - - it('when drag ends outside the canvas in insert mode, it is cancelled', async () => { - const renderResult = await setupInsertTest(inputCode) - - const targetElement = renderResult.renderedDOM.getByTestId('bbb') - const targetElementBounds = targetElement.getBoundingClientRect() - const canvasControlsLayer = renderResult.renderedDOM.getByTestId(CanvasControlsContainerID) - - const startPoint = slightlyOffsetWindowPointBecauseVeryWeirdIssue({ - x: targetElementBounds.x + 5, - y: targetElementBounds.y + 5, - }) - - const endPoint = slightlyOffsetWindowPointBecauseVeryWeirdIssue({ - x: targetElementBounds.x + 2005, - y: targetElementBounds.y + 2005, - }) - - await enterInsertModeFromInsertMenuStartDrag(renderResult) - await renderResult.getDispatchFollowUpActionsFinished() - - await mouseMoveToPoint(canvasControlsLayer, startPoint) - - await mouseDragFromPointToPointNoMouseDown(canvasControlsLayer, startPoint, endPoint) - await renderResult.getDispatchFollowUpActionsFinished() - - expect(getPrintedUiJsCode(renderResult.getEditorState())).toEqual(inputCode) - }) - it('Drag to insert into a zero sized element', async () => { - const testCode = makeTestProjectCodeWithSnippet(` -
-
-
- `) - const renderResult = await setupInsertTest(testCode) - await enterInsertModeFromInsertMenu(renderResult) - - const targetElement = renderResult.renderedDOM.getByTestId('bbb') - const targetElementBounds = targetElement.getBoundingClientRect() - const canvasControlsLayer = renderResult.renderedDOM.getByTestId(CanvasControlsContainerID) - - const startPoint = slightlyOffsetWindowPointBecauseVeryWeirdIssue({ - x: targetElementBounds.x, - y: targetElementBounds.y, - }) - const endPoint = slightlyOffsetWindowPointBecauseVeryWeirdIssue({ - x: targetElementBounds.x + 40, - y: targetElementBounds.y + 50, - }) - - // Move before starting dragging - await mouseMoveToPoint(canvasControlsLayer, startPoint) - - // Highlight should show the candidate parent - expect(renderResult.getEditorState().editor.highlightedViews.map(EP.toUid)).toEqual(['bbb']) - - // Drag from inside bbb to inside ccc - await mouseDragFromPointToPoint(canvasControlsLayer, startPoint, endPoint) - - await renderResult.getDispatchFollowUpActionsFinished() - - // Check that the inserted element is a child of bbb - expect(getPrintedUiJsCode(renderResult.getEditorState())).toEqual( - makeTestProjectCodeWithSnippet(` -
-
-
-
-
- `), - ) - }) - it('Click to insert into a zero size element', async () => { - const testCode = makeTestProjectCodeWithSnippet(` -
-
-
- `) - const renderResult = await setupInsertTest(testCode) - await enterInsertModeFromInsertMenu(renderResult) - - const targetElement = renderResult.renderedDOM.getByTestId('bbb') - const targetElementBounds = targetElement.getBoundingClientRect() - const canvasControlsLayer = renderResult.renderedDOM.getByTestId(CanvasControlsContainerID) - - const point = slightlyOffsetWindowPointBecauseVeryWeirdIssue({ - x: targetElementBounds.x, - y: targetElementBounds.y, - }) - - // Move before clicking - await mouseMoveToPoint(canvasControlsLayer, point) - - // Highlight should show the candidate parent - expect(renderResult.getEditorState().editor.highlightedViews.map(EP.toUid)).toEqual(['bbb']) - - // Click in bbb - await mouseClickAtPoint(canvasControlsLayer, point) - - await renderResult.getDispatchFollowUpActionsFinished() - - // Check that the inserted element is a child of bbb - expect(getPrintedUiJsCode(renderResult.getEditorState())).toEqual( - makeTestProjectCodeWithSnippet(` -
-
-
-
-
- `), - ) - }) - - it('Ignores fragments and flattens their children', async () => { - const inputWithFragments = makeTestProjectCodeWithSnippet(` -
- -
-
- <> -
- - -
-
- `) - - const renderResult = await setupInsertTest(inputWithFragments) - await enterInsertModeFromInsertMenu(renderResult) - - const targetElement = renderResult.renderedDOM.getByTestId('aaa') - const targetElementBounds = targetElement.getBoundingClientRect() - const canvasControlsLayer = renderResult.renderedDOM.getByTestId(CanvasControlsContainerID) - - const startPoint = slightlyOffsetWindowPointBecauseVeryWeirdIssue({ - x: targetElementBounds.x + 200, - y: targetElementBounds.y + 200, - }) - const endPoint = slightlyOffsetWindowPointBecauseVeryWeirdIssue({ - x: targetElementBounds.x + 250, - y: targetElementBounds.y + 250, - }) - - // Move before starting dragging - await mouseMoveToPoint(canvasControlsLayer, startPoint) - - // Highlight should show the candidate parent - expect(renderResult.getEditorState().editor.highlightedViews.map(EP.toUid)).toEqual(['aaa']) - - // Drag from inside bbb to inside ccc - await mouseDragFromPointToPoint(canvasControlsLayer, startPoint, endPoint) - - await renderResult.getDispatchFollowUpActionsFinished() - - // Check that the inserted element is a child of bbb - expect(getPrintedUiJsCode(renderResult.getEditorState())).toEqual( - makeTestProjectCodeWithSnippet(` -
- -
-
- <> -
- - -
-
-
- `), - ) - }) - }) - - describe('Inserting into Static', () => { - const inputCode = makeTestProjectCodeWithSnippet(` -
-
-
-
- `) - - it('By default, it inserts as absolute into a flow parent', async () => { - const renderResult = await setupInsertTest(inputCode) - await enterInsertModeFromInsertMenu(renderResult) - - const targetElement = renderResult.renderedDOM.getByTestId('bbb') - const targetElementBounds = targetElement.getBoundingClientRect() - const canvasControlsLayer = renderResult.renderedDOM.getByTestId(CanvasControlsContainerID) - - const startPoint = slightlyOffsetWindowPointBecauseVeryWeirdIssue({ - x: targetElementBounds.x + 5, - y: targetElementBounds.y + 15, - }) - const endPoint = slightlyOffsetWindowPointBecauseVeryWeirdIssue({ - x: targetElementBounds.x + 25, - y: targetElementBounds.y + 35, - }) - - // Move before starting dragging - await mouseMoveToPoint(canvasControlsLayer, startPoint) - - // Highlight should show the candidate parent - expect(renderResult.getEditorState().editor.highlightedViews.map(EP.toUid)).toEqual(['bbb']) - - // Drag from inside bbb to inside ccc - await mouseDragFromPointToPoint(canvasControlsLayer, startPoint, endPoint) - - await renderResult.getDispatchFollowUpActionsFinished() - - // Check that the inserted element is a child of bbb - expect(getPrintedUiJsCode(renderResult.getEditorState())).toEqual( - makeTestProjectCodeWithSnippet(` -
-
-
-
-
- -
- `), - ) - }) - - it('Using the strategy picker, it happily inserts into a static element', async () => { - const renderResult = await setupInsertTest(inputCode) - await enterInsertModeFromInsertMenu(renderResult) - - const targetElement = renderResult.renderedDOM.getByTestId('bbb') - const targetElementBounds = targetElement.getBoundingClientRect() - const canvasControlsLayer = renderResult.renderedDOM.getByTestId(CanvasControlsContainerID) - - const startPoint = slightlyOffsetWindowPointBecauseVeryWeirdIssue({ - x: targetElementBounds.x + 5, - y: targetElementBounds.y + 15, - }) - const endPoint = slightlyOffsetWindowPointBecauseVeryWeirdIssue({ - x: targetElementBounds.x + 25, - y: targetElementBounds.y + 35, - }) - - await renderResult.getDispatchFollowUpActionsFinished() - - // Move before starting dragging - await mouseMoveToPoint(canvasControlsLayer, startPoint) - - // Highlight should show the candidate parent - expect(renderResult.getEditorState().editor.highlightedViews.map(EP.toUid)).toEqual(['bbb']) - - await mouseDragFromPointToPoint(canvasControlsLayer, startPoint, endPoint, { - midDragCallback: async () => { - await pressKey('2') // this should select the 'Draw to Insert (Flow)' strategy - }, - }) - - await renderResult.getDispatchFollowUpActionsFinished() - - // Check that the inserted element is a child of bbb - expect(getPrintedUiJsCode(renderResult.getEditorState())).toEqual( - makeTestProjectCodeWithSnippet(` -
-
-
-
-
-
- `), - ) - }) - }) - - describe('Inserting into flex row', () => { - const inputCode = makeTestProjectCodeWithSnippet(` -
-
-
-
- `) - - it('Insert into zero position in flex', async () => { - const renderResult = await setupInsertTest(inputCode) - await enterInsertModeFromInsertMenu(renderResult) - - const targetElement = renderResult.renderedDOM.getByTestId('bbb') - const targetElementBounds = targetElement.getBoundingClientRect() - const canvasControlsLayer = renderResult.renderedDOM.getByTestId(CanvasControlsContainerID) - - const startPoint = slightlyOffsetWindowPointBecauseVeryWeirdIssue({ - x: targetElementBounds.x + 5, - y: targetElementBounds.y + 5, - }) - const endPoint = slightlyOffsetWindowPointBecauseVeryWeirdIssue({ - x: targetElementBounds.x + 25, - y: targetElementBounds.y + 305, - }) - - // Move before starting dragging - await mouseMoveToPoint(canvasControlsLayer, startPoint) - - // Highlight should show the candidate parent - expect(renderResult.getEditorState().editor.highlightedViews.map(EP.toUid)).toEqual(['aaa']) - // Shows flex indicator line at index position target - expect( - renderResult.getEditorState().editor.canvas.controls.flexReparentTargetLines.length, - ).toEqual(1) - const indicatorBeforeSibling = isIndicatorBeforeSiblingBBB( - renderResult.getEditorState().editor.jsxMetadata, - renderResult.getEditorState().editor.canvas.controls.flexReparentTargetLines[0], - ) - expect(indicatorBeforeSibling).toEqual(true) - - // Drag horizontally close to the zero position - await mouseDragFromPointToPoint(canvasControlsLayer, startPoint, endPoint) - - await renderResult.getDispatchFollowUpActionsFinished() - - // Check that the inserted element is a sibling of bbb, position is before bbb - expect(getPrintedUiJsCode(renderResult.getEditorState())).toEqual( - makeTestProjectCodeWithSnippet(` -
-
-
-
-
- `), - ) - }) - - it('Click to insert into zero position in flex', async () => { - const renderResult = await setupInsertTest(inputCode) - await enterInsertModeFromInsertMenu(renderResult) - - const targetElement = renderResult.renderedDOM.getByTestId('bbb') - const targetElementBounds = targetElement.getBoundingClientRect() - const canvasControlsLayer = renderResult.renderedDOM.getByTestId(CanvasControlsContainerID) - - const point = slightlyOffsetWindowPointBecauseVeryWeirdIssue({ - x: targetElementBounds.x + 5, - y: targetElementBounds.y + 5, - }) - - // Move before clicking - await mouseMoveToPoint(canvasControlsLayer, point) - - // Highlight should show the candidate parent - expect(renderResult.getEditorState().editor.highlightedViews.map(EP.toUid)).toEqual(['aaa']) - // Shows flex indicator line at index position target - expect( - renderResult.getEditorState().editor.canvas.controls.flexReparentTargetLines.length, - ).toEqual(1) - const indicatorBeforeSibling = isIndicatorBeforeSiblingBBB( - renderResult.getEditorState().editor.jsxMetadata, - renderResult.getEditorState().editor.canvas.controls.flexReparentTargetLines[0], - ) - expect(indicatorBeforeSibling).toEqual(true) - - // Click horizontally close to the zero position - await mouseClickAtPoint(canvasControlsLayer, point) - - await renderResult.getDispatchFollowUpActionsFinished() - - // Check that the inserted element is a sibling of bbb, position is before bbb - expect(getPrintedUiJsCode(renderResult.getEditorState())).toEqual( - makeTestProjectCodeWithSnippet(` -
-
-
-
-
- `), - ) - }) - - it('Inserting a wrapped element into the 0th position in flex', async () => { - const renderResult = await setupInsertTest(inputCode) - await enterInsertModeFromInsertMenu(renderResult, 'Conditional') - - FOR_TESTS_setNextGeneratedUids([ - 'skip1', - 'skip2', - 'skip3', - 'skip4', - 'skip5', - 'skip6', - 'skip7', - 'false-branch', - ]) - const targetElement = renderResult.renderedDOM.getByTestId('bbb') - const targetElementBounds = targetElement.getBoundingClientRect() - const canvasControlsLayer = renderResult.renderedDOM.getByTestId(CanvasControlsContainerID) - - const startPoint = slightlyOffsetWindowPointBecauseVeryWeirdIssue({ - x: targetElementBounds.x + 5, - y: targetElementBounds.y + 5, - }) - const endPoint = slightlyOffsetWindowPointBecauseVeryWeirdIssue({ - x: targetElementBounds.x + 25, - y: targetElementBounds.y + 305, - }) - - // Move before starting dragging - await mouseMoveToPoint(canvasControlsLayer, startPoint) - - // Highlight should show the candidate parent - expect(renderResult.getEditorState().editor.highlightedViews.map(EP.toUid)).toEqual(['aaa']) - // Shows flex indicator line at index position target - expect( - renderResult.getEditorState().editor.canvas.controls.flexReparentTargetLines.length, - ).toEqual(1) - const indicatorBeforeSibling = isIndicatorBeforeSiblingBBB( - renderResult.getEditorState().editor.jsxMetadata, - renderResult.getEditorState().editor.canvas.controls.flexReparentTargetLines[0], - ) - expect(indicatorBeforeSibling).toEqual(true) - - await expectSingleUndo2Saves(renderResult, () => - // Drag horizontally close to the zero position - mouseDragFromPointToPoint(canvasControlsLayer, startPoint, endPoint), - ) - - await renderResult.getDispatchFollowUpActionsFinished() - - // Check that the inserted element is a sibling of bbb, position is before bbb - expect(getPrintedUiJsCode(renderResult.getEditorState())).toEqual( - makeTestProjectCodeWithSnippet(` -
- {true ? ( -
- ) : ( -
- False branch -
- )} -
-
-
- `), - ) - }) - - it('Insert into first position in flex', async () => { - const renderResult = await setupInsertTest(inputCode) - await enterInsertModeFromInsertMenu(renderResult) - - const targetElement = renderResult.renderedDOM.getByTestId('bbb') - const targetElementBounds = targetElement.getBoundingClientRect() - const canvasControlsLayer = renderResult.renderedDOM.getByTestId(CanvasControlsContainerID) - - const startPoint = slightlyOffsetWindowPointBecauseVeryWeirdIssue({ - x: targetElementBounds.x + targetElementBounds.width + 5, - y: targetElementBounds.y + targetElementBounds.height + 5, - }) - const endPoint = slightlyOffsetWindowPointBecauseVeryWeirdIssue({ - x: targetElementBounds.x + targetElementBounds.width + 25, - y: targetElementBounds.y + targetElementBounds.height + 305, - }) - - // Move before starting dragging - await mouseMoveToPoint(canvasControlsLayer, startPoint) - - // Highlight should show the candidate parent - expect(renderResult.getEditorState().editor.highlightedViews.map(EP.toUid)).toEqual(['aaa']) - // Shows flex indicator line at index position target - expect( - renderResult.getEditorState().editor.canvas.controls.flexReparentTargetLines.length, - ).toEqual(1) - const indicatorBetweenSiblings = isIndicatorBetweenSiblingsBBBCCC( - renderResult.getEditorState().editor.jsxMetadata, - renderResult.getEditorState().editor.canvas.controls.flexReparentTargetLines[0], - 'horizontal', - ) - expect(indicatorBetweenSiblings).toEqual(true) - - // Drag horizontally close to the first position - await mouseDragFromPointToPoint(canvasControlsLayer, startPoint, endPoint) - - await renderResult.getDispatchFollowUpActionsFinished() - - // Check that the inserted element is a sibling of bbb, position is after bbb - expect(getPrintedUiJsCode(renderResult.getEditorState())).toEqual( - makeTestProjectCodeWithSnippet(` -
-
-
-
-
- `), - ) - }) - - it('Click to insert into first position in flex', async () => { - const renderResult = await setupInsertTest(inputCode) - await enterInsertModeFromInsertMenu(renderResult) - - const targetElement = renderResult.renderedDOM.getByTestId('bbb') - const targetElementBounds = targetElement.getBoundingClientRect() - const canvasControlsLayer = renderResult.renderedDOM.getByTestId(CanvasControlsContainerID) - - const point = slightlyOffsetWindowPointBecauseVeryWeirdIssue({ - x: targetElementBounds.x + targetElementBounds.width + 5, - y: targetElementBounds.y + targetElementBounds.height + 5, - }) // Move before clicking - await mouseMoveToPoint(canvasControlsLayer, point) - - // Highlight should show the candidate parent - expect(renderResult.getEditorState().editor.highlightedViews.map(EP.toUid)).toEqual(['aaa']) - // Shows flex indicator line at index position target - expect( - renderResult.getEditorState().editor.canvas.controls.flexReparentTargetLines.length, - ).toEqual(1) - const indicatorBetweenSiblings = isIndicatorBetweenSiblingsBBBCCC( - renderResult.getEditorState().editor.jsxMetadata, - renderResult.getEditorState().editor.canvas.controls.flexReparentTargetLines[0], - 'horizontal', - ) - expect(indicatorBetweenSiblings).toEqual(true) - - // Click horizontally close to the first position - await mouseClickAtPoint(canvasControlsLayer, point) - - await renderResult.getDispatchFollowUpActionsFinished() - - // Check that the inserted element is a sibling of bbb, position is after bbb - expect(getPrintedUiJsCode(renderResult.getEditorState())).toEqual( - makeTestProjectCodeWithSnippet(` -
-
-
-
-
- `), - ) - }) - - it('Insert into first position in flex, backwards drag', async () => { - const renderResult = await setupInsertTest(inputCode) - await enterInsertModeFromInsertMenu(renderResult) - - const targetElement = renderResult.renderedDOM.getByTestId('bbb') - const targetElementBounds = targetElement.getBoundingClientRect() - const canvasControlsLayer = renderResult.renderedDOM.getByTestId(CanvasControlsContainerID) - - const startPoint = slightlyOffsetWindowPointBecauseVeryWeirdIssue({ - x: targetElementBounds.x + targetElementBounds.width + 25, - y: targetElementBounds.y + 305, - }) - const endPoint = slightlyOffsetWindowPointBecauseVeryWeirdIssue({ - x: targetElementBounds.x + targetElementBounds.width + 5, - y: targetElementBounds.y + 5, - }) - - // Move before starting dragging - await mouseMoveToPoint(canvasControlsLayer, startPoint) - - // Highlight should show the candidate parent - expect(renderResult.getEditorState().editor.highlightedViews.map(EP.toUid)).toEqual(['aaa']) - // Shows flex indicator line at index position target - expect( - renderResult.getEditorState().editor.canvas.controls.flexReparentTargetLines.length, - ).toEqual(1) - - const indicatorBetweenSiblings = isIndicatorBetweenSiblingsBBBCCC( - renderResult.getEditorState().editor.jsxMetadata, - renderResult.getEditorState().editor.canvas.controls.flexReparentTargetLines[0], - 'horizontal', - ) - expect(indicatorBetweenSiblings).toEqual(true) - - // Drag starts horizontally close to the first position, dragging towards the top left - await mouseDragFromPointToPoint(canvasControlsLayer, startPoint, endPoint) - - await renderResult.getDispatchFollowUpActionsFinished() - - // Check that the inserted element is a sibling of bbb, position is before bbb - expect(getPrintedUiJsCode(renderResult.getEditorState())).toEqual( - makeTestProjectCodeWithSnippet(` -
-
-
-
-
- `), - ) - }) - - it('Insert inside a flex child with absolute layout', async () => { - const renderResult = await setupInsertTest(inputCode) - await enterInsertModeFromInsertMenu(renderResult) - - const targetElement = renderResult.renderedDOM.getByTestId('bbb') - const targetElementBounds = targetElement.getBoundingClientRect() - const canvasControlsLayer = renderResult.renderedDOM.getByTestId(CanvasControlsContainerID) - - const startPoint = slightlyOffsetWindowPointBecauseVeryWeirdIssue({ - x: targetElementBounds.x + 10, - y: targetElementBounds.y + 10, - }) - const endPoint = slightlyOffsetWindowPointBecauseVeryWeirdIssue({ - x: targetElementBounds.x + 30, - y: targetElementBounds.y + 40, - }) - - // Move before starting dragging - await mouseMoveToPoint(canvasControlsLayer, startPoint) - - // Highlight should show the candidate parent - expect(renderResult.getEditorState().editor.highlightedViews.map(EP.toUid)).toEqual(['bbb']) - - // Drag starts inside bbb - await mouseDragFromPointToPoint(canvasControlsLayer, startPoint, endPoint) - - await renderResult.getDispatchFollowUpActionsFinished() - - // Check that the inserted element is a child of bbb - expect(getPrintedUiJsCode(renderResult.getEditorState())).toEqual( - makeTestProjectCodeWithSnippet(` -
-
-
-
-
-
- `), - ) - }) - - it('Click to insert inside a flex child with absolute layout', async () => { - const renderResult = await setupInsertTest(inputCode) - await enterInsertModeFromInsertMenu(renderResult) - - const targetElement = renderResult.renderedDOM.getByTestId('bbb') - const targetElementBounds = targetElement.getBoundingClientRect() - const canvasControlsLayer = renderResult.renderedDOM.getByTestId(CanvasControlsContainerID) - - const point = slightlyOffsetWindowPointBecauseVeryWeirdIssue({ - x: targetElementBounds.x + 10, - y: targetElementBounds.y + 10, - }) - - // Move before clicking - await mouseMoveToPoint(canvasControlsLayer, point) - - // Highlight should show the candidate parent - expect(renderResult.getEditorState().editor.highlightedViews.map(EP.toUid)).toEqual(['bbb']) - - // Click inside bbb - await mouseClickAtPoint(canvasControlsLayer, point) - - await renderResult.getDispatchFollowUpActionsFinished() - - // Check that the inserted element is a child of bbb - expect(getPrintedUiJsCode(renderResult.getEditorState())).toEqual( - makeTestProjectCodeWithSnippet(` -
-
-
-
-
-
- `), - ) - }) - - it('Drag inside a flex child close to the edge, which inserts as a sibling', async () => { - const renderResult = await setupInsertTest(inputCode) - await enterInsertModeFromInsertMenu(renderResult) - - const targetElement = renderResult.renderedDOM.getByTestId('bbb') - const targetElementBounds = targetElement.getBoundingClientRect() - const canvasControlsLayer = renderResult.renderedDOM.getByTestId(CanvasControlsContainerID) - - const startPoint = slightlyOffsetWindowPointBecauseVeryWeirdIssue({ - x: targetElementBounds.x + 3, - y: targetElementBounds.y + 3, - }) - const endPoint = slightlyOffsetWindowPointBecauseVeryWeirdIssue({ - x: targetElementBounds.x + 23, - y: targetElementBounds.y + 33, - }) - - // Move before starting dragging - await mouseMoveToPoint(canvasControlsLayer, startPoint) - - // Highlight should show the candidate parent - expect(renderResult.getEditorState().editor.highlightedViews.map(EP.toUid)).toEqual(['aaa']) - // Shows flex indicator line at index position target - expect( - renderResult.getEditorState().editor.canvas.controls.flexReparentTargetLines.length, - ).toEqual(1) - - const indicatorBeforeSibling = isIndicatorBeforeSiblingBBB( - renderResult.getEditorState().editor.jsxMetadata, - renderResult.getEditorState().editor.canvas.controls.flexReparentTargetLines[0], - ) - expect(indicatorBeforeSibling).toEqual(true) - - // Drag starts inside bbb, but very close to its edge (3px) - await mouseDragFromPointToPoint(canvasControlsLayer, startPoint, endPoint) - - await renderResult.getDispatchFollowUpActionsFinished() - - // Check that the inserted element is a sibling of bbb, position is before bbb - expect(getPrintedUiJsCode(renderResult.getEditorState())).toEqual( - makeTestProjectCodeWithSnippet(` -
-
-
-
-
- `), - ) - }) - - it('Click inside a flex child close to the edge, which inserts as a sibling', async () => { - const renderResult = await setupInsertTest(inputCode) - await enterInsertModeFromInsertMenu(renderResult) - - const targetElement = renderResult.renderedDOM.getByTestId('bbb') - const targetElementBounds = targetElement.getBoundingClientRect() - const canvasControlsLayer = renderResult.renderedDOM.getByTestId(CanvasControlsContainerID) - - const point = slightlyOffsetWindowPointBecauseVeryWeirdIssue({ - x: targetElementBounds.x + 3, - y: targetElementBounds.y + 3, - }) - - // Move before clicking - await mouseMoveToPoint(canvasControlsLayer, point) - - // Highlight should show the candidate parent - expect(renderResult.getEditorState().editor.highlightedViews.map(EP.toUid)).toEqual(['aaa']) - // Shows flex indicator line at index position target - expect( - renderResult.getEditorState().editor.canvas.controls.flexReparentTargetLines.length, - ).toEqual(1) - - const indicatorBeforeSibling = isIndicatorBeforeSiblingBBB( - renderResult.getEditorState().editor.jsxMetadata, - renderResult.getEditorState().editor.canvas.controls.flexReparentTargetLines[0], - ) - expect(indicatorBeforeSibling).toEqual(true) - - // Click inside bbb, but very close to its edge (3px) - await mouseClickAtPoint(canvasControlsLayer, point) - - await renderResult.getDispatchFollowUpActionsFinished() - - // Check that the inserted element is a sibling of bbb, position is before bbb - expect(getPrintedUiJsCode(renderResult.getEditorState())).toEqual( - makeTestProjectCodeWithSnippet(` -
-
-
-
-
- `), - ) - }) - describe('insertion adds flex grow on reaching edge if possible', () => { - it('inserting into the end of flex row adds flexGrow when reaching parent`s edge', async () => { - const expectedStyle = { - backgroundColor: '#aaaaaa33', - height: 25, - contain: 'layout', - flexGrow: 1, - } - await drawToInsertTestMaybeAddsFlexGrow(canvasPoint({ x: 60, y: 25 }), expectedStyle, 'row') - }) - it('inserting into the end of flex row adds width when not reaching parent`s edge', async () => { - const expectedStyle = { - backgroundColor: '#aaaaaa33', - width: 50, - height: 25, - contain: 'layout', - } - await drawToInsertTestMaybeAddsFlexGrow(canvasPoint({ x: 50, y: 25 }), expectedStyle, 'row') - }) - it('inserting into the end of flex row only adds width when siblings are shrinked already (no open space for insertion)', async () => { - const expectedStyle = { - backgroundColor: '#aaaaaa33', - width: 60, - height: 25, - contain: 'layout', - } - await drawToInsertTestMaybeAddsFlexGrow( - canvasPoint({ x: 60, y: 25 }), - expectedStyle, - 'row', - 100, - ) - }) - }) - }) - - describe('Inserting into flex column', () => { - const inputCode = makeTestProjectCodeWithSnippet(` -
-
-
-
- `) - - it('Insert into zero position in flex, column layout', async () => { - const renderResult = await setupInsertTest(inputCode) - await enterInsertModeFromInsertMenu(renderResult) - - const targetElement = renderResult.renderedDOM.getByTestId('bbb') - const targetElementBounds = targetElement.getBoundingClientRect() - const canvasControlsLayer = renderResult.renderedDOM.getByTestId(CanvasControlsContainerID) - - const startPoint = slightlyOffsetWindowPointBecauseVeryWeirdIssue({ - x: targetElementBounds.x + targetElementBounds.width + 5, - y: targetElementBounds.y + 5, - }) - const endPoint = slightlyOffsetWindowPointBecauseVeryWeirdIssue({ - x: targetElementBounds.x + targetElementBounds.width + 305, - y: targetElementBounds.y + 25, - }) - - // Move before starting dragging - await mouseMoveToPoint(canvasControlsLayer, startPoint) - - // Highlight should show the candidate parent - expect(renderResult.getEditorState().editor.highlightedViews.map(EP.toUid)).toEqual(['aaa']) - // Shows flex indicator line at index position target - expect( - renderResult.getEditorState().editor.canvas.controls.flexReparentTargetLines.length, - ).toEqual(1) - - const indicatorBeforeSibling = isIndicatorBeforeSiblingBBB( - renderResult.getEditorState().editor.jsxMetadata, - renderResult.getEditorState().editor.canvas.controls.flexReparentTargetLines[0], - ) - expect(indicatorBeforeSibling).toEqual(true) - - // Drag vertically close to the first position - await mouseDragFromPointToPoint(canvasControlsLayer, startPoint, endPoint) - - await renderResult.getDispatchFollowUpActionsFinished() - - // Check that the inserted element is a sibling of bbb, position is before bbb - expect(getPrintedUiJsCode(renderResult.getEditorState())).toEqual( - makeTestProjectCodeWithSnippet(` -
-
-
-
-
- `), - ) - }) - - it('Click to insert into zero position in flex, column layout', async () => { - const renderResult = await setupInsertTest(inputCode) - await enterInsertModeFromInsertMenu(renderResult) - - const targetElement = renderResult.renderedDOM.getByTestId('bbb') - const targetElementBounds = targetElement.getBoundingClientRect() - const canvasControlsLayer = renderResult.renderedDOM.getByTestId(CanvasControlsContainerID) - - const point = slightlyOffsetWindowPointBecauseVeryWeirdIssue({ - x: targetElementBounds.x + targetElementBounds.width + 5, - y: targetElementBounds.y + 5, - }) - - // Move before clicking - await mouseMoveToPoint(canvasControlsLayer, point) - - // Highlight should show the candidate parent - expect(renderResult.getEditorState().editor.highlightedViews.map(EP.toUid)).toEqual(['aaa']) - // Shows flex indicator line at index position target - expect( - renderResult.getEditorState().editor.canvas.controls.flexReparentTargetLines.length, - ).toEqual(1) - - const indicatorBeforeSibling = isIndicatorBeforeSiblingBBB( - renderResult.getEditorState().editor.jsxMetadata, - renderResult.getEditorState().editor.canvas.controls.flexReparentTargetLines[0], - ) - expect(indicatorBeforeSibling).toEqual(true) - - // Click vertically close to the first position - await mouseClickAtPoint(canvasControlsLayer, point) - - await renderResult.getDispatchFollowUpActionsFinished() - - // Check that the inserted element is a sibling of bbb, position is before bbb - expect(getPrintedUiJsCode(renderResult.getEditorState())).toEqual( - makeTestProjectCodeWithSnippet(` -
-
-
-
-
- `), - ) - }) - - it('Insert into first position in flex, column layout', async () => { - const renderResult = await setupInsertTest(inputCode) - await enterInsertModeFromInsertMenu(renderResult) - - const targetElement = renderResult.renderedDOM.getByTestId('bbb') - const targetElementBounds = targetElement.getBoundingClientRect() - const canvasControlsLayer = renderResult.renderedDOM.getByTestId(CanvasControlsContainerID) - - const startPoint = slightlyOffsetWindowPointBecauseVeryWeirdIssue({ - x: targetElementBounds.x + targetElementBounds.width + 5, - y: targetElementBounds.y + targetElementBounds.height + 5, - }) - const endPoint = slightlyOffsetWindowPointBecauseVeryWeirdIssue({ - x: targetElementBounds.x + targetElementBounds.width + 305, - y: targetElementBounds.y + targetElementBounds.height + 25, - }) - - // Move before starting dragging - await mouseMoveToPoint(canvasControlsLayer, startPoint) - - // Highlight should show the candidate parent - expect(renderResult.getEditorState().editor.highlightedViews.map(EP.toUid)).toEqual(['aaa']) - // Shows flex indicator line at index position target - expect( - renderResult.getEditorState().editor.canvas.controls.flexReparentTargetLines.length, - ).toEqual(1) - - const indicatorBetweenSiblings = isIndicatorBetweenSiblingsBBBCCC( - renderResult.getEditorState().editor.jsxMetadata, - renderResult.getEditorState().editor.canvas.controls.flexReparentTargetLines[0], - 'vertical', - ) - expect(indicatorBetweenSiblings).toEqual(true) - - // Drag vertically close to the first position - await mouseDragFromPointToPoint(canvasControlsLayer, startPoint, endPoint) - - await renderResult.getDispatchFollowUpActionsFinished() - - // Check that the inserted element is a sibling of bbb, position is after bbb - expect(getPrintedUiJsCode(renderResult.getEditorState())).toEqual( - makeTestProjectCodeWithSnippet(` -
-
-
-
-
- `), - ) - }) - - it('Click to insert into first position in flex, column layout', async () => { - const renderResult = await setupInsertTest(inputCode) - await enterInsertModeFromInsertMenu(renderResult) - - const targetElement = renderResult.renderedDOM.getByTestId('bbb') - const targetElementBounds = targetElement.getBoundingClientRect() - const canvasControlsLayer = renderResult.renderedDOM.getByTestId(CanvasControlsContainerID) - - const point = slightlyOffsetWindowPointBecauseVeryWeirdIssue({ - x: targetElementBounds.x + targetElementBounds.width + 5, - y: targetElementBounds.y + targetElementBounds.height + 5, - }) - - // Move before clicking - await mouseMoveToPoint(canvasControlsLayer, point) - - // Highlight should show the candidate parent - expect(renderResult.getEditorState().editor.highlightedViews.map(EP.toUid)).toEqual(['aaa']) - // Shows flex indicator line at index position target - expect( - renderResult.getEditorState().editor.canvas.controls.flexReparentTargetLines.length, - ).toEqual(1) - const indicatorBetweenSiblings = isIndicatorBetweenSiblingsBBBCCC( - renderResult.getEditorState().editor.jsxMetadata, - renderResult.getEditorState().editor.canvas.controls.flexReparentTargetLines[0], - 'vertical', - ) - expect(indicatorBetweenSiblings).toEqual(true) - - // Click vertically close to the first position - await mouseClickAtPoint(canvasControlsLayer, point) - - await renderResult.getDispatchFollowUpActionsFinished() - - // Check that the inserted element is a sibling of bbb, position is after bbb - expect(getPrintedUiJsCode(renderResult.getEditorState())).toEqual( - makeTestProjectCodeWithSnippet(` -
-
-
-
-
- `), - ) - }) - - it('Insert into first position in flex, column layout, backwards drag', async () => { - const renderResult = await setupInsertTest(inputCode) - await enterInsertModeFromInsertMenu(renderResult) - - const targetElement = renderResult.renderedDOM.getByTestId('bbb') - const targetElementBounds = targetElement.getBoundingClientRect() - const canvasControlsLayer = renderResult.renderedDOM.getByTestId(CanvasControlsContainerID) - - const startPoint = slightlyOffsetWindowPointBecauseVeryWeirdIssue({ - x: targetElementBounds.x + targetElementBounds.width + 105, - y: targetElementBounds.y + targetElementBounds.height + 25, - }) - const endPoint = slightlyOffsetWindowPointBecauseVeryWeirdIssue({ - x: targetElementBounds.x + targetElementBounds.width - 195, - y: targetElementBounds.y + targetElementBounds.height + 5, - }) - - // Move before starting dragging - await mouseMoveToPoint(canvasControlsLayer, startPoint) - - // Highlight should show the candidate parent - expect(renderResult.getEditorState().editor.highlightedViews.map(EP.toUid)).toEqual(['aaa']) - // Shows flex indicator line at index position target - expect( - renderResult.getEditorState().editor.canvas.controls.flexReparentTargetLines.length, - ).toEqual(1) - const indicatorBetweenSiblings = isIndicatorBetweenSiblingsBBBCCC( - renderResult.getEditorState().editor.jsxMetadata, - renderResult.getEditorState().editor.canvas.controls.flexReparentTargetLines[0], - 'vertical', - ) - expect(indicatorBetweenSiblings).toEqual(true) - - // Drag starts vertically close to the first position, dragging towards the top left - await mouseDragFromPointToPoint(canvasControlsLayer, startPoint, endPoint) - - await renderResult.getDispatchFollowUpActionsFinished() - - // Check that the inserted element is a sibling of bbb, position is after bbb - expect(getPrintedUiJsCode(renderResult.getEditorState())).toEqual( - makeTestProjectCodeWithSnippet(` -
-
-
-
-
- `), - ) - }) - describe('insertion adds flex grow on reaching edge if possible', () => { - it('inserting into the end of flex column adds flexGrow when reaching parent`s edge', async () => { - const expectedStyle = { - backgroundColor: '#aaaaaa33', - width: 60, - contain: 'layout', - flexGrow: 1, - } - await drawToInsertTestMaybeAddsFlexGrow( - canvasPoint({ x: 60, y: 136 }), - expectedStyle, - 'column', - ) - }) - it('inserting into the end of flex column adds width when not reaching parent`s edge', async () => { - const expectedStyle = { - backgroundColor: '#aaaaaa33', - width: 50, - height: 130, - contain: 'layout', - } - await drawToInsertTestMaybeAddsFlexGrow( - canvasPoint({ x: 50, y: 130 }), - expectedStyle, - 'column', - ) - }) - it('inserting into the end of flex column only adds width when siblings are shrinked already (no open space for insertion)', async () => { - const expectedStyle = { - backgroundColor: '#aaaaaa33', - width: 60, - height: 136, - contain: 'layout', - } - await drawToInsertTestMaybeAddsFlexGrow( - canvasPoint({ x: 60, y: 136 }), - expectedStyle, - 'column', - 100, - ) - }) - }) - }) - - describe('Inserting an image', () => { - it('Draw to insert to an absolute layout keeps aspect ratio', async () => { - const inputCode = ` -
-
-
-
- ` - const expectedCode = ` -
-
- -
-
-
- ` - await testDrawToInsertImageAspectRatio(inputCode, expectedCode) - }) - - it('Draw to insert to a flex layout keeps aspect ratio', async () => { - const inputCode = ` -
-
-
- ` - const expectedCode = ` -
-
- -
-
- ` - await testDrawToInsertImageAspectRatio(inputCode, expectedCode) - }) - }) - - describe('Conditionals support', () => { - ;[true, false].forEach((enabled) => { - describe(`with the Conditional feature switch ${enabled ? 'enabled' : 'disabled'}`, () => { - const inputCode = makeTestProjectCodeWithSnippet(` -
-
- {true ? ( -
- ) : null} -
- `) - - it('Draw to insert into a sibling of the conditional', async () => { - const renderResult = await setupInsertTest(inputCode) - await enterInsertModeFromInsertMenu(renderResult) - - const targetElement = renderResult.renderedDOM.getByTestId('bbb') - const targetElementBounds = targetElement.getBoundingClientRect() - const canvasControlsLayer = - renderResult.renderedDOM.getByTestId(CanvasControlsContainerID) - - const startPoint = slightlyOffsetWindowPointBecauseVeryWeirdIssue({ - x: targetElementBounds.x + 5, - y: targetElementBounds.y + 5, - }) - const endPoint = slightlyOffsetWindowPointBecauseVeryWeirdIssue({ - x: targetElementBounds.x + 25, - y: targetElementBounds.y + 305, - }) - - // Move before starting dragging - await mouseMoveToPoint(canvasControlsLayer, startPoint) - - // Highlight should show the candidate parent - expect(renderResult.getEditorState().editor.highlightedViews.map(EP.toUid)).toEqual([ - 'bbb', - ]) - - // Drag from inside bbb to inside ccc - await mouseDragFromPointToPoint(canvasControlsLayer, startPoint, endPoint, { - midDragCallback: async () => { - expect(renderResult.getEditorState().strategyState.currentStrategy).toEqual( - 'Draw to Insert (Abs)', - ) - }, - }) - - await renderResult.getDispatchFollowUpActionsFinished() - - // Check that the inserted element is a child of bbb - expect(getPrintedUiJsCode(renderResult.getEditorState())).toEqual( - makeTestProjectCodeWithSnippet(` -
-
-
-
- {true ? ( -
- ) : null} -
- `), - ) - }) - - it('Draw to insert into the parent of a conditional works', async () => { - const renderResult = await setupInsertTest(inputCode) - await enterInsertModeFromInsertMenu(renderResult) - - const targetElement = renderResult.renderedDOM.getByTestId('aaa') - const targetElementBounds = targetElement.getBoundingClientRect() - const canvasControlsLayer = - renderResult.renderedDOM.getByTestId(CanvasControlsContainerID) - - const startPoint = slightlyOffsetWindowPointBecauseVeryWeirdIssue({ - x: targetElementBounds.x + 170, - y: targetElementBounds.y + 10, - }) - const endPoint = slightlyOffsetWindowPointBecauseVeryWeirdIssue({ - x: targetElementBounds.x + 220, - y: targetElementBounds.y + 310, - }) - - // Move before starting dragging - await mouseMoveToPoint(canvasControlsLayer, startPoint) - - // Highlight should show the candidate parent - expect(renderResult.getEditorState().editor.highlightedViews.map(EP.toUid)).toEqual([ - 'aaa', - ]) - - await mouseDragFromPointToPoint(canvasControlsLayer, startPoint, endPoint, { - midDragCallback: async () => { - expect(renderResult.getEditorState().strategyState.currentStrategy).toEqual( - 'Draw to Insert (Abs)', - ) - }, - }) - - await renderResult.getDispatchFollowUpActionsFinished() - - // Check that the inserted element is a child of bbb - expect(getPrintedUiJsCode(renderResult.getEditorState())).toEqual( - makeTestProjectCodeWithSnippet(` -
-
- {true ? ( -
- ) : null} -
-
- `), - ) - }) - }) - }) }) }) diff --git a/editor/src/components/canvas/design-panel-root.tsx b/editor/src/components/canvas/design-panel-root.tsx index 5849399e2bcb..a47489e46279 100644 --- a/editor/src/components/canvas/design-panel-root.tsx +++ b/editor/src/components/canvas/design-panel-root.tsx @@ -21,7 +21,6 @@ import { ErrorsPane } from '../code-editor/errors-pane' import { CanvasStrategyInspector } from './canvas-strategies/canvas-strategy-inspector' import { IS_TEST_ENVIRONMENT, getQueryParam } from '../../common/env-vars' import { when } from '../../utils/react-conditionals' -import { InsertMenuPane } from '../navigator/insert-menu-pane' import { useDispatch } from '../editor/store/dispatch-context' import { GridPanelsContainer } from './grid-panels-container' import { TitleBarCode, TitleBarUserProfile } from '../titlebar/title-bar' @@ -232,7 +231,6 @@ export const RightPane = React.memo((props) => { backgroundColor: colorTheme.inspectorBackground.value, }} > - {when(selectedTab === RightMenuTab.Insert, )} {when(selectedTab === RightMenuTab.Inspector, )} {when(selectedTab === RightMenuTab.Settings, )} {when(selectedTab === RightMenuTab.Comments, )} diff --git a/editor/src/components/editor/insertmenu.spec.browser2.tsx b/editor/src/components/editor/insertmenu.spec.browser2.tsx index 25eb6fdd72ce..3dc761f4d0c3 100644 --- a/editor/src/components/editor/insertmenu.spec.browser2.tsx +++ b/editor/src/components/editor/insertmenu.spec.browser2.tsx @@ -16,7 +16,6 @@ import { renderTestEditorWithCode, } from '../canvas/ui-jsx.test-utils' import { setPanelVisibility, setRightMenuTab } from './actions/action-creators' -import { InsertMenuFilterTestId } from './insertmenu' import { RightMenuTab } from './store/editor-state' import { ComponentPickerTestId } from '../navigator/navigator-item/component-picker' import * as EP from '../../core/shared/element-path' diff --git a/editor/src/components/editor/insertmenu.tsx b/editor/src/components/editor/insertmenu.tsx deleted file mode 100644 index 4f58ad4cdc9a..000000000000 --- a/editor/src/components/editor/insertmenu.tsx +++ /dev/null @@ -1,727 +0,0 @@ -/** @jsxRuntime classic */ -/** @jsx jsx */ -import type { CSSObject } from '@emotion/react' -import { jsx } from '@emotion/react' -import React, { useState } from 'react' -import type { - InputActionMeta, - InputProps, - MenuListComponentProps, - OptionProps, - StylesConfig, -} from 'react-windowed-select' -import WindowedSelect, { components, createFilter } from 'react-windowed-select' -import { RightMenuTab } from '../../components/editor/store/editor-state' -import { generateUidWithExistingComponents } from '../../core/model/element-template-utils' -import { isLeft } from '../../core/shared/either' -import type { JSXAttributes, JSXElementName } from '../../core/shared/element-template' -import { - emptyComments, - getJSXAttribute, - jsExpressionValue, - jsxElement, - jsxElementNameEquals, - setJSXAttributesAttribute, -} from '../../core/shared/element-template' -import { setJSXValueInAttributeAtPath } from '../../core/shared/jsx-attribute-utils' -import type { CanvasVector } from '../../core/shared/math-utils' -import { canvasPoint, point, windowPoint } from '../../core/shared/math-utils' -import type { - PackageStatus, - PackageStatusMap, - PossiblyUnversionedNpmDependency, -} from '../../core/shared/npm-dependency-types' -import type { ElementPath, Imports } from '../../core/shared/project-file-types' -import { importsEquals } from '../../core/shared/project-file-types' -import * as PP from '../../core/shared/property-path' -import { NO_OP, assertNever } from '../../core/shared/utils' -import { Modifier, emptyModifiers } from '../../utils/modifiers' -import { Icn, InspectorSubsectionHeader, UIRow, UtopiaTheme, useColorTheme } from '../../uuiui' -import { getControlStyles } from '../../uuiui-deps' -import { InspectorInputEmotionStyle } from '../../uuiui/inputs/base-input' -import type { ProjectContentTreeRoot } from '../assets' -import CanvasActions from '../canvas/canvas-actions' -import { - boundingArea, - createHoverInteractionViaMouse, - createInteractionViaMouse, -} from '../canvas/canvas-strategies/interaction-state' -import type { CanvasAction } from '../canvas/canvas-types' -import { windowToCanvasCoordinates } from '../canvas/dom-lookup' -import type { PropertyControlsInfo } from '../custom-code/code-file' -import type { FontSettings } from '../inspector/common/css-utils' -import { NpmDependencyVersionAndStatusIndicator } from '../navigator/dependecy-version-status-indicator' -import type { InsertableComponent } from '../shared/project-components' -import { - getInsertableGroupLabel, - getNonEmptyComponentGroups, - moveSceneToTheBeginningAndSetDefaultSize, -} from '../shared/project-components' -import type { EditorDispatch } from './action-types' -import { enableInsertModeForJSXElement, setRightMenuTab } from './actions/action-creators' -import { defaultDivElement } from './defaults' -import type { InsertionSubject, Mode } from './editor-modes' -import { usePossiblyResolvedPackageDependencies } from './npm-dependency/npm-dependency' -import { useDispatch } from './store/dispatch-context' -import { Substores, useEditorState } from './store/store-hook' - -export const InsertMenuId = 'insert-menu-inspector-tab' - -export const InsertMenuFilterTestId = 'insert-menu-filter' - -interface InsertMenuProps { - lastFontSettings: FontSettings | null - selectedViews: Array - mode: Mode - currentlyOpenFilename: string | null - dependencies: Array - packageStatus: PackageStatusMap - propertyControlsInfo: PropertyControlsInfo - projectContents: ProjectContentTreeRoot - canvasScale: number - canvasOffset: CanvasVector -} - -export const InsertMenu = React.memo(() => { - const restOfEditorProps = useEditorState( - Substores.restOfEditor, - (store) => { - return { - lastFontSettings: store.editor.lastUsedFont, - mode: store.editor.mode, - packageStatus: store.editor.nodeModules.packageStatus, - propertyControlsInfo: store.editor.propertyControlsInfo, - } - }, - 'InsertMenu restOfEditorProps', - ) - - const selectedViews = useEditorState( - Substores.selectedViews, - (store) => store.editor.selectedViews, - 'InsertMenu selectedViews', - ) - - const canvasProps = useEditorState( - Substores.canvas, - (store) => { - return { - currentlyOpenFilename: store.editor.canvas.openFile?.filename ?? null, - canvasScale: store.editor.canvas.scale, - } - }, - 'InsertMenu canvasProps', - ) - - const roundedCanvasOffset = useEditorState( - Substores.canvasOffset, - (store) => store.editor.canvas.roundedCanvasOffset, - 'InsertMenu roundedCanvasOffset', - ) - - const projectContents = useEditorState( - Substores.projectContents, - (store) => store.editor.projectContents, - 'InsertMenu projectContents', - ) - - const dependencies = usePossiblyResolvedPackageDependencies() - - const propsWithDependencies: InsertMenuProps = { - ...restOfEditorProps, - ...canvasProps, - selectedViews: selectedViews, - canvasOffset: roundedCanvasOffset, - projectContents: projectContents, - dependencies: dependencies, - } - - return -}) - -type ElementBeingInserted = - | { - type: 'component' - importsToAdd: Imports - elementName: JSXElementName - props: JSXAttributes - } - | { - type: 'fragment' - } - | { - type: 'conditional' - } - | { - type: 'map' - } - -function componentBeingInserted( - importsToAdd: Imports, - elementName: JSXElementName, - props: JSXAttributes, -): ElementBeingInserted { - return { - type: 'component', - importsToAdd: importsToAdd, - elementName: elementName, - props: props, - } -} - -function elementBeingInserted(insertableComponent: InsertableComponent): ElementBeingInserted { - const element = insertableComponent.element() - switch (element.type) { - case 'JSX_CONDITIONAL_EXPRESSION': - return { type: 'conditional' } - case 'JSX_FRAGMENT': - return { type: 'fragment' } - case 'JSX_MAP_EXPRESSION': - return { type: 'map' } - case 'JSX_ELEMENT': - return componentBeingInserted(insertableComponent.importsToAdd, element.name, element.props) - default: - assertNever(element) - } -} - -export function elementBeingInsertedEquals( - first: ElementBeingInserted, - second: ElementBeingInserted, -): boolean { - if (first.type === 'component' && second.type === 'component') { - return ( - importsEquals(first.importsToAdd, second.importsToAdd) && - jsxElementNameEquals(first.elementName, second.elementName) - ) - } - - return first.type === second.type -} - -const enableInsertMode = ( - component: InsertableComponent, - newUID: string, - createInteractionSessionCommand: CanvasAction, - dispatch: EditorDispatch, -) => { - const element = component.element() - switch (element.type) { - case 'JSX_ELEMENT': { - const newElement = jsxElement( - element.name, - newUID, - setJSXAttributesAttribute( - addPositionAbsoluteToProps(element.props), - 'data-uid', - jsExpressionValue(newUID, emptyComments), - ), - element.children, - ) - - return dispatch( - [ - enableInsertModeForJSXElement( - newElement, - newUID, - component.importsToAdd, - component.defaultSize, - ), - createInteractionSessionCommand, - ], - 'everyone', - ) - } - case 'JSX_CONDITIONAL_EXPRESSION': { - return dispatch( - [ - enableInsertModeForJSXElement( - defaultDivElement(newUID), - newUID, - component.importsToAdd, - component.defaultSize, - { wrapInContainer: 'conditional' }, - ), - createInteractionSessionCommand, - ], - 'everyone', - ) - } - case 'JSX_FRAGMENT': - return dispatch( - [ - enableInsertModeForJSXElement( - defaultDivElement(newUID), - newUID, - component.importsToAdd, - component.defaultSize, - { wrapInContainer: 'fragment' }, - ), - createInteractionSessionCommand, - ], - 'everyone', - ) - case 'JSX_MAP_EXPRESSION': - return NO_OP() // we don't support draw to insert for maps - default: - assertNever(element) - } -} - -const Input = (props: InputProps) => { - return -} - -const Option = React.memo((props: OptionProps) => { - const dispatch = useDispatch() - const colorTheme = useColorTheme() - const component: InsertableComponent = props.data.value - const { isFocused } = props - const isActive: boolean = (props.selectProps as any).isActive - - const projectContents = useEditorState( - Substores.projectContents, - (store) => store.editor.projectContents, - 'CustomOption project contents', - ) - - const { canvasScale, canvasOffset } = useEditorState( - Substores.canvasOffset, - (store) => ({ - canvasScale: store.editor.canvas.scale, - canvasOffset: store.editor.canvas.roundedCanvasOffset, - }), - 'CustomOption canvas offsets', - ) - - const mode = React.useMemo(() => (props.selectProps as any).mode as Mode, [props.selectProps]) - - const currentlyBeingInserted = React.useMemo(() => { - if (mode === null || mode.type !== 'insert' || mode.subjects.length !== 1) { - return null - } - - const insertionSubject: InsertionSubject = mode.subjects[0] - - return componentBeingInserted( - insertionSubject.importsToAdd, - insertionSubject.element.name, - insertionSubject.element.props, - ) - }, [mode]) - - const insertItemOnMouseDown = React.useCallback( - (event: React.MouseEvent) => { - const mousePoint = windowToCanvasCoordinates( - canvasScale, - canvasOffset, - windowPoint(point(event.clientX, event.clientY)), - ).canvasPositionRounded - enableInsertMode( - component, - generateUidWithExistingComponents(projectContents), - CanvasActions.createInteractionSession( - createInteractionViaMouse( - mousePoint, - Modifier.modifiersForEvent(event), - boundingArea(), - 'zero-drag-permitted', - ), - ), - dispatch, - ) - }, - [dispatch, canvasOffset, canvasScale, projectContents, component], - ) - - const insertItemOnMouseUp = React.useCallback( - (_event: React.MouseEvent) => { - dispatch([CanvasActions.clearInteractionSession(false)], 'everyone') - }, - [dispatch], - ) - - const isComponentCurrentlyInserted = - currentlyBeingInserted != null && - elementBeingInsertedEquals(currentlyBeingInserted, elementBeingInserted(component)) - - const isSelected = React.useMemo(() => { - return ( - isComponentCurrentlyInserted || (isActive && isFocused && currentlyBeingInserted !== null) - ) - }, [isComponentCurrentlyInserted, isActive, isFocused, currentlyBeingInserted]) - - const [isHovered, setIsHovered] = useState(false) - const setIsHoveredTrue = React.useCallback(() => { - setIsHovered(true) - }, []) - - const setIsHoveredFalse = React.useCallback(() => { - setIsHovered(false) - }, []) - - return ( -
- - - {props.label} - -
- ) -}) - -type GroupOptionItem = { - label: string - options: ComponentOptionItem[] -} - -type ComponentOptionItem = { - label: string - source: string - value: InsertableComponent -} - -function useSelectStyles(hasResults: boolean): StylesConfig { - const colorTheme = useColorTheme() - return React.useMemo( - () => ({ - container: (styles): CSSObject => ({ - height: '100%', - }), - control: (styles): CSSObject => ({ - background: 'transparent', - outline: 'none', - ':focus-within': { - outline: 'none', - border: 'none', - }, - padding: 8, - }), - valueContainer: (styles): CSSObject => ({ - display: 'flex', - position: 'relative', - flexGrow: 1, - flexShrink: 0, - alignItems: 'center', - gap: 4, - }), - indicatorsContainer: (styles): CSSObject => ({ - display: 'none', - }), - menu: (styles): CSSObject => { - return { - marginTop: 8, - paddingLeft: 8, - paddingRight: 8, - height: '100%', - } - }, - menuList: (styles): CSSObject => { - return { - height: '100%', - overflow: 'scroll', - paddingBottom: 100, - display: 'flex', - flexDirection: 'column', - gap: 2, - paddingLeft: 8, - paddingRight: 8, - } - }, - input: (styles): CSSObject => { - return { - ...(InspectorInputEmotionStyle({ - hasLabel: false, - controlStyles: getControlStyles('simple'), - }) as CSSObject), - paddingLeft: 4, - backgroundColor: colorTheme.bg2.value, - flexGrow: 1, - display: 'flex', - alignItems: 'center', - cursor: 'text', - border: `1px solid ${hasResults ? 'transparent' : colorTheme.error.value}`, - } - }, - placeholder: (styles): CSSObject => { - return { - ...styles, - position: 'absolute', - marginLeft: 5, - } - }, - group: (): CSSObject => { - return { - display: 'flex', - flexDirection: 'column', - gap: 2, - } - }, - groupHeading: (styles): CSSObject => { - return { - display: 'flex', - alignItems: 'center', - height: UtopiaTheme.layout.rowHeight.smaller, - fontWeight: 700, - } - }, - }), - [colorTheme, hasResults], - ) -} - -const MenuList = React.memo((menuListProps: MenuListComponentProps) => { - const focusedOption: ComponentOptionItem | null = (menuListProps as any).focusedOption - const { selectProps } = menuListProps - - React.useEffect(() => { - selectProps.onFocusedOptionChange(focusedOption) - }, [focusedOption, selectProps]) - - return -}) - -const InsertMenuInner = React.memo((props: InsertMenuProps) => { - const dispatch = useDispatch() - const [filter, setFilter] = React.useState('') - - const insertableGroups = React.useMemo(() => { - if (props.currentlyOpenFilename == null) { - return [] - } - return moveSceneToTheBeginningAndSetDefaultSize( - getNonEmptyComponentGroups( - 'insert', - props.packageStatus, - props.propertyControlsInfo, - props.projectContents, - props.dependencies, - props.currentlyOpenFilename, - ), - ) - }, [ - props.packageStatus, - props.propertyControlsInfo, - props.projectContents, - props.dependencies, - props.currentlyOpenFilename, - ]) - - const options = React.useMemo((): GroupOptionItem[] => { - return insertableGroups.map((g) => { - const groupLabel = getInsertableGroupLabel(g.source) - return { - label: groupLabel, - options: g.insertableComponents.map((c): ComponentOptionItem => { - return { - label: c.name, - source: groupLabel, - value: c, - } - }), - } - }) - }, [insertableGroups]) - - const filterOption = createFilter({ - ignoreAccents: true, - stringify: (c) => c.data.source + c.data.label, - ignoreCase: true, - trim: true, - matchFrom: 'any', - }) - - const { hasResults } = React.useMemo(() => { - const filteredOptions = options - .flatMap((g) => g.options) - .filter((o) => filterOption({ data: o } as any, filter)) - return { - hasResults: filteredOptions.length > 0, - } - }, [options, filter, filterOption]) - - function onFilterChange(newValue: string, actionMeta: InputActionMeta) { - if (actionMeta.action !== 'input-blur' && actionMeta.action !== 'menu-close') { - setFilter(newValue.trim()) - } - } - - const [focusedOption, setFocusedOption] = React.useState(null) - - const onKeyDown = React.useCallback( - (e: React.KeyboardEvent) => { - setIsActive(true) - if (e.key === 'Escape') { - dispatch([setRightMenuTab(RightMenuTab.Inspector)]) - } - if (e.key === 'Enter' && focusedOption != null) { - enableInsertMode( - focusedOption.value, - generateUidWithExistingComponents(props.projectContents), - CanvasActions.createInteractionSession( - createInteractionViaMouse( - canvasPoint({ x: 0, y: 0 }), - emptyModifiers, - boundingArea(), - 'zero-drag-permitted', - ), - ), - dispatch, - ) - } - }, - [dispatch, props.projectContents, focusedOption], - ) - - const onChange = React.useCallback( - (e: ComponentOptionItem) => { - onFilterChange(e.label, { action: 'input-change' }) - - dispatch( - [ - CanvasActions.createInteractionSession( - createHoverInteractionViaMouse( - canvasPoint({ x: 0, y: 0 }), - emptyModifiers, - boundingArea(), - 'zero-drag-permitted', - ), - ), - ], - 'everyone', - ) - }, - [dispatch], - ) - - function alwaysTrue() { - return true - } - - const styles = useSelectStyles(hasResults) - - const [isActive, setIsActive] = React.useState(true) - function onMouseLeave() { - setIsActive(false) - } - function onMouseEnter() { - setIsActive(true) - } - - return ( -
- -
- ) -}) -InsertMenuInner.displayName = 'InsertMenuInner' - -function addPositionAbsoluteToProps(props: JSXAttributes) { - const styleAttributes = getJSXAttribute(props, 'style') ?? jsExpressionValue({}, emptyComments) - - const updatedStyleAttrs = setJSXValueInAttributeAtPath( - styleAttributes, - PP.fromString('position'), - jsExpressionValue('absolute', emptyComments), - ) - - if (isLeft(updatedStyleAttrs)) { - throw new Error(`Problem setting position absolute on an element we just created.`) - } - - return setJSXAttributesAttribute(props, 'style', updatedStyleAttrs.value) -} - -interface InsertGroupProps { - label: string - subLabel?: string - dependencyStatus: PackageStatus - dependencyVersion: string | null -} - -export const InsertGroup: React.FunctionComponent> = - React.memo((props) => { - const colorTheme = useColorTheme() - return ( -
- - -
- {props.label} -
- {props.subLabel == null ? null : ( -
- {props.subLabel} -
- )} - -
- -
- -
- {props.children} -
-
- ) - }) diff --git a/editor/src/components/navigator/insert-menu-pane.tsx b/editor/src/components/navigator/insert-menu-pane.tsx deleted file mode 100644 index c12e763a710f..000000000000 --- a/editor/src/components/navigator/insert-menu-pane.tsx +++ /dev/null @@ -1,62 +0,0 @@ -/** @jsxRuntime classic */ -/** @jsx jsx */ -/** @jsxFrag React.Fragment */ -import { jsx } from '@emotion/react' -import React from 'react' -import { Section, SectionBodyArea } from '../../uuiui' -import { setFocus } from '../common/actions' -import type { EditorDispatch, LoginState } from '../editor/action-types' -import { InsertMenu } from '../editor/insertmenu' -import { useDispatch } from '../editor/store/dispatch-context' -import type { DerivedState, EditorState } from '../editor/store/editor-state' -import { RightMenuTab } from '../editor/store/editor-state' -import { Substores, useEditorState } from '../editor/store/store-hook' -import { setRightMenuTab } from '../editor/actions/action-creators' -import { unless, when } from '../../utils/react-conditionals' -import { IS_TEST_ENVIRONMENT } from '../../common/env-vars' - -export interface LeftPaneProps { - editorState: EditorState - derivedState: DerivedState - editorDispatch: EditorDispatch - loginState: LoginState -} - -export const InsertMenuPane = React.memo(() => { - const dispatch = useDispatch() - const { focusedPanel } = useEditorState( - Substores.restOfEditor, - (store) => { - return { - focusedPanel: store.editor.focusedPanel, - } - }, - 'InsertMenuPane', - ) - - const onFocus = React.useCallback( - (event: React.FocusEvent) => { - if (focusedPanel !== 'insertmenu') { - dispatch([setFocus('insertmenu')], 'everyone') - } - }, - [dispatch, focusedPanel], - ) - - const onClickClose = React.useCallback(() => { - dispatch([setRightMenuTab(RightMenuTab.Inspector)]) - }, [dispatch]) - - return ( -
- - {when(IS_TEST_ENVIRONMENT, )} - -
- ) -}) diff --git a/editor/src/templates/editor-canvas.tsx b/editor/src/templates/editor-canvas.tsx index efb210aebf9b..381df809eb84 100644 --- a/editor/src/templates/editor-canvas.tsx +++ b/editor/src/templates/editor-canvas.tsx @@ -104,7 +104,6 @@ import { CursorComponent } from '../components/canvas/controls/select-mode/curso import * as ResizeObserverSyntheticDefault from 'resize-observer-polyfill' import { isFeatureEnabled } from '../utils/feature-switches' import { getCanvasViewportCenter } from './paste-helpers' -import { InsertMenuId } from '../components/editor/insertmenu' import { DataPasteHandler, isPasteHandler } from '../utils/paste-handler' const ResizeObserver = ResizeObserverSyntheticDefault.default ?? ResizeObserverSyntheticDefault @@ -807,8 +806,7 @@ export class EditorCanvas extends React.Component { (event.nativeEvent != null && event.nativeEvent.srcElement != null && (isTargetContextMenu(event.nativeEvent.target as any) || - isTargetInPopup(event.nativeEvent.srcElement as any, this.props.editor.openPopupId) || - isTargetInInsertMenu(event.nativeEvent.target as any))) || + isTargetInPopup(event.nativeEvent.srcElement as any, this.props.editor.openPopupId))) || this.props.editor.modal !== null ) { return [] // This is a hack implementing a behavior when context menu blocks the UI @@ -1404,17 +1402,3 @@ function isTargetInPopup(target: HTMLElement, popupId: string | null): boolean { return popupElement != null && popupElement.contains(target) } } - -function isTargetInInsertMenu(target: HTMLElement | null): boolean { - /** - * this hack is incredibly sad, - * the problem is insertmenu.tsx has non-standard mouse handling. - * the real solution would be to rewrite the mouse handling code in the insert menu, - * but I don't have the time to do it now - * - * the way I would change the insert menu is to only start the insert mode if the mouse dragged past a threshold instead of immediately starting it, - * plus I would also _enter_ insert mode on click similar to how we enter insert mode from the insert TopMenu - */ - const insertMenu = document.getElementById(InsertMenuId) - return insertMenu != null && insertMenu.contains(target) -}