fix(canvas) Canvas Toolbar Edit button clears interaction sessions. (#…

…6174) - For switching to select mode all the toolbar buttons now use `dispatchSwitchToSelectModeCloseMenus`. - `dispatchSwitchToSelectModeCloseMenus` now clears any interaction session along with switching the editor mode.
concrete-utopia · Aug 8, 2024 · ac39e21 · ac39e21
1 parent 3976512
commit ac39e21
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 7 deletions.
diff --git a/...s/canvas/canvas-strategies/strategies/reparent-helpers/reparent-strategy-parent-lookup.ts b/...s/canvas/canvas-strategies/strategies/reparent-helpers/reparent-strategy-parent-lookup.ts
@@ -350,9 +350,14 @@ function findParentByPaddedInsertionZone(
   // with current parent under cursor filter ancestors from reparent targets
   const currentParentUnderCursor =
     reparentSubjects.type === 'EXISTING_ELEMENTS'
-      ? validTargetparentsUnderPoint.find((targetParent) =>
-          EP.isParentOf(targetParent, reparentSubjects.elements[0]),
-        ) ?? null
+      ? validTargetparentsUnderPoint.find((targetParent) => {
+          const firstReparentSubjectElement = reparentSubjects.elements.at(0)
+          if (firstReparentSubjectElement == null) {
+            return false
+          } else {
+            return EP.isParentOf(targetParent, firstReparentSubjectElement)
+          }
+        }) ?? null
       : null
   const validTargetparentsUnderPointFiltered =
     currentParentUnderCursor != null

diff --git a/editor/src/components/editor/canvas-toolbar.spec.browser2.tsx b/editor/src/components/editor/canvas-toolbar.spec.browser2.tsx
@@ -35,6 +35,7 @@ import {
   CanvasToolbarEditButtonID,
   InsertConditionalButtonTestId,
   InsertMenuButtonTestId,
+  InsertOrEditTextButtonTestId,
   PlayModeButtonTestId,
   WrapInDivButtonTestId,
 } from './canvas-toolbar'
@@ -81,6 +82,39 @@ describe('canvas toolbar', () => {
     expect(editor.getEditorState().editor.mode.type).toEqual('select')
   })
 
+  it('selecting the edit button clears the text mode and the interaction session that was started', async () => {
+    const editor = await renderTestEditorWithCode(
+      makeTestProjectCodeWithSnippet(`<div
+    style={{
+      backgroundColor: '#aaaaaa33',
+      position: 'absolute',
+      left: 57,
+      top: 168,
+      width: 247,
+      height: 402,
+    }}
+    data-uid='container'
+  >
+    <div data-uid='a3d' />
+  </div>`),
+      'await-first-dom-report',
+    )
+    expect(editor.getEditorState().editor.mode.type).toEqual('select')
+
+    const insertOrEditTextButton = editor.renderedDOM.getByTestId(InsertOrEditTextButtonTestId)
+    const insertOrEditTextButtonCenter = getDomRectCenter(
+      insertOrEditTextButton.getBoundingClientRect(),
+    )
+    await mouseClickAtPoint(insertOrEditTextButton, insertOrEditTextButtonCenter)
+    expect(editor.getEditorState().editor.mode.type).toEqual('insert')
+    expect(editor.getEditorState().editor.canvas.interactionSession).not.toBeNull()
+
+    const editButton = editor.renderedDOM.getByTestId(CanvasToolbarEditButtonID)
+    const editButtonCenter = getDomRectCenter(editButton.getBoundingClientRect())
+    await mouseClickAtPoint(editButton, editButtonCenter)
+    expect(editor.getEditorState().editor.mode.type).toEqual('select')
+    expect(editor.getEditorState().editor.canvas.interactionSession).toBeNull()
+  })
   it('can insert conditionals via the canvas toolbar', async () => {
     const editor = await renderTestEditorWithCode(
       makeTestProjectCodeWithSnippet(`

diff --git a/editor/src/components/editor/canvas-toolbar.tsx b/editor/src/components/editor/canvas-toolbar.tsx
@@ -74,6 +74,7 @@ import {
 } from './shortcut-definitions'
 
 export const InsertMenuButtonTestId = 'insert-menu-button'
+export const InsertOrEditTextButtonTestId = 'insert-or-edit-text-button'
 export const PlayModeButtonTestId = 'canvas-toolbar-play-mode'
 export const CommentModeButtonTestId = (status: string) => `canvas-toolbar-comment-mode-${status}`
 export const InsertConditionalButtonTestId = 'insert-mode-conditional'
@@ -222,6 +223,7 @@ export const CanvasToolbar = React.memo(() => {
   // Back to select mode, close the "floating" menu and turn off the forced insert mode.
   const dispatchSwitchToSelectModeCloseMenus = React.useCallback(() => {
     switchToSelectModeCloseMenus(dispatch)
+    dispatch([CanvasActions.clearInteractionSession(false)])
   }, [dispatch])
 
   const zoomLevel = useEditorState(
@@ -248,23 +250,23 @@ export const CanvasToolbar = React.memo(() => {
   const isLiveMode = editorMode === 'live'
   const toggleLiveMode = React.useCallback(() => {
     if (isLiveMode) {
-      dispatch([switchEditorMode(EditorModes.selectMode(null, false, 'none'))])
+      dispatchSwitchToSelectModeCloseMenus()
     } else {
       dispatch([switchEditorMode(EditorModes.liveMode())])
     }
-  }, [dispatch, isLiveMode])
+  }, [dispatch, isLiveMode, dispatchSwitchToSelectModeCloseMenus])
 
   const isCommentMode = editorMode === 'comment'
   const toggleCommentMode = React.useCallback(() => {
     if (isCommentMode) {
-      dispatch([switchEditorMode(EditorModes.selectMode(null, false, 'none'))])
+      dispatchSwitchToSelectModeCloseMenus()
     } else {
       dispatch([
         switchEditorMode(EditorModes.commentMode(null, 'not-dragging')),
         setRightMenuTab(RightMenuTab.Comments),
       ])
     }
-  }, [dispatch, isCommentMode])
+  }, [dispatch, isCommentMode, dispatchSwitchToSelectModeCloseMenus])
 
   const resetCanvasCallback = React.useCallback(() => {
     dispatch([resetCanvas()])
@@ -437,6 +439,7 @@ export const CanvasToolbar = React.memo(() => {
           <>
             <Tooltip title='Insert or Edit Text' placement='bottom'>
               <InsertModeButton
+                testid={InsertOrEditTextButtonTestId}
                 iconType='text'
                 iconCategory='tools'
                 primary={canvasToolbarMode.primary === 'text'}