performance(editor) Switch Event Handlers 2.0 (#6469)

- Switched lots of event handlers from onClick to onMouseDown, along with updating the name of props if those use that naming. - Added `onMouseDown` handler that stops propagation to the react-contextify menu, so that the mouse down doesn't pass through it and activate things underneath the menu. - Added `stopPropagation` call to the `onMouseDown` of the navigator so that the event doesn't pass through to the canvas. - Removed `stopPropagation` and `preventDefault` calls in `NavigatorRowClickableWrapper` so that the event can still trigger dragging.
concrete-utopia · Dec 13, 2024 · 6f90025 · 6f90025
1 parent ab61d49
commit 6f90025
Show file tree

Hide file tree

Showing 15 changed files with 122 additions and 107 deletions.
diff --git a/editor/src/components/canvas/design-panel-root.tsx b/editor/src/components/canvas/design-panel-root.tsx
@@ -134,7 +134,7 @@ export const RightPane = React.memo<ResizableRightPaneProps>((props) => {
   )
   const dispatch = useDispatch()
 
-  const onClickTab = React.useCallback(
+  const onMouseDownTab = React.useCallback(
     (menuTab: RightMenuTab) => {
       const actions: Array<EditorAction> = [EditorActions.setRightMenuTab(menuTab)]
       if (isCommentMode(editorModeRef.current) && menuTab !== RightMenuTab.Comments) {
@@ -145,21 +145,21 @@ export const RightPane = React.memo<ResizableRightPaneProps>((props) => {
     [dispatch, editorModeRef],
   )
 
-  const onClickInsertTab = React.useCallback(() => {
-    onClickTab(RightMenuTab.Insert)
-  }, [onClickTab])
+  const onMouseDownInsertTab = React.useCallback(() => {
+    onMouseDownTab(RightMenuTab.Insert)
+  }, [onMouseDownTab])
 
-  const onClickCommentsTab = React.useCallback(() => {
-    onClickTab(RightMenuTab.Comments)
-  }, [onClickTab])
+  const onMouseDownCommentsTab = React.useCallback(() => {
+    onMouseDownTab(RightMenuTab.Comments)
+  }, [onMouseDownTab])
 
-  const onClickInspectorTab = React.useCallback(() => {
-    onClickTab(RightMenuTab.Inspector)
-  }, [onClickTab])
+  const onMouseDownInspectorTab = React.useCallback(() => {
+    onMouseDownTab(RightMenuTab.Inspector)
+  }, [onMouseDownTab])
 
-  const onClickSettingsTab = React.useCallback(() => {
-    onClickTab(RightMenuTab.Settings)
-  }, [onClickTab])
+  const onMouseDownSettingsTab = React.useCallback(() => {
+    onMouseDownTab(RightMenuTab.Settings)
+  }, [onMouseDownTab])
 
   const canComment = useCanComment()
 
@@ -200,7 +200,7 @@ export const RightPane = React.memo<ResizableRightPaneProps>((props) => {
           <MenuTab
             label={'Inspector'}
             selected={selectedTab === RightMenuTab.Inspector}
-            onClick={onClickInspectorTab}
+            onMouseDown={onMouseDownInspectorTab}
           />
           {when(
             allowedToEdit,
@@ -210,7 +210,7 @@ export const RightPane = React.memo<ResizableRightPaneProps>((props) => {
                 <MenuTab
                   label={'Insert'}
                   selected={selectedTab === RightMenuTab.Insert}
-                  onClick={onClickInsertTab}
+                  onMouseDown={onMouseDownInsertTab}
                 />,
               )}
             </>,
@@ -221,13 +221,13 @@ export const RightPane = React.memo<ResizableRightPaneProps>((props) => {
               testId='comments-tab'
               label={'Comments'}
               selected={selectedTab === RightMenuTab.Comments}
-              onClick={onClickCommentsTab}
+              onMouseDown={onMouseDownCommentsTab}
             />,
           )}
           <MenuTab
             label={'Settings'}
             selected={selectedTab === RightMenuTab.Settings}
-            onClick={onClickSettingsTab}
+            onMouseDown={onMouseDownSettingsTab}
           />
         </FlexRow>
         <SimpleFlexRow

diff --git a/editor/src/components/context-menu-wrapper.tsx b/editor/src/components/context-menu-wrapper.tsx
@@ -155,8 +155,18 @@ export const ContextMenu = <T,>({ dispatch, getData, id, items }: ContextMenuPro
     [getData, dispatch, isDisabled, isHidden],
   )
 
+  const onMouseDown = React.useCallback((event: React.MouseEvent<HTMLDivElement>) => {
+    event.stopPropagation()
+  }, [])
+
   return (
-    <Menu key={id} id={id} animation={false} onVisibilityChange={onVisibilityChange}>
+    <Menu
+      key={id}
+      id={id}
+      animation={false}
+      onVisibilityChange={onVisibilityChange}
+      onMouseDown={onMouseDown}
+    >
       {splitItems.map((item, index) => {
         if (item?.type === 'submenu') {
           return (

diff --git a/editor/src/components/inspector/common/inspector-end-to-end-tests.spec.browser2.tsx b/editor/src/components/inspector/common/inspector-end-to-end-tests.spec.browser2.tsx
@@ -1479,12 +1479,12 @@ describe('inspector tests with real metadata', () => {
 
     await act(async () => {
       await screen.findByTestId('section-header-Advanced')
-      fireEvent.click(screen.getByTestId('section-header-Advanced'))
+      fireEvent.mouseDown(screen.getByTestId('section-header-Advanced'))
     })
 
     await act(async () => {
       await screen.findByTestId('target-selector-style')
-      fireEvent.click(screen.getByTestId('target-selector'))
+      fireEvent.mouseDown(screen.getByTestId('target-selector'))
     })
     await act(async () => {
       await screen.findByTestId('target-list-item-css')
@@ -1586,12 +1586,12 @@ describe('inspector tests with real metadata', () => {
 
     await act(async () => {
       await screen.findByTestId('section-header-Advanced')
-      fireEvent.click(screen.getByTestId('section-header-Advanced'))
+      fireEvent.mouseDown(screen.getByTestId('section-header-Advanced'))
     })
 
     await act(async () => {
       await screen.findByTestId('target-selector-style')
-      fireEvent.click(screen.getByTestId('target-selector'))
+      fireEvent.mouseDown(screen.getByTestId('target-selector'))
     })
     await act(async () => {
       await screen.findByTestId('target-list-item-css')

diff --git a/editor/src/components/inspector/section-header.tsx b/editor/src/components/inspector/section-header.tsx
@@ -19,7 +19,7 @@ export function InspectorSectionHeader({
         padding: 8,
         cursor: 'pointer',
       }}
-      onClick={toggle}
+      onMouseDown={toggle}
       data-testid={`section-header-${title}`}
     >
       <div

diff --git a/editor/src/components/inspector/sections/component-section/component-section.tsx b/editor/src/components/inspector/sections/component-section/component-section.tsx
@@ -1189,7 +1189,7 @@ interface ObjectIndicatorProps {
 const ObjectIndicator = (props: ObjectIndicatorProps) => {
   return (
     <div
-      onClick={props.toggle}
+      onMouseDown={props.toggle}
       style={{
         border: `1px solid ${colorTheme.bg3.value}`,
         paddingLeft: 2,
@@ -1579,7 +1579,7 @@ export const ComponentSectionInner = React.memo((props: ComponentSectionProps) =
             <span onClick={openInstanceFile}>Component</span>
           )}
         </FlexRow>
-        <SquareButton highlight onClick={toggleSection}>
+        <SquareButton highlight onMouseDown={toggleSection}>
           <ExpandableIndicator
             testId='component-section-expand'
             visible

diff --git a/editor/src/components/inspector/sections/header-section/target-selector.tsx b/editor/src/components/inspector/sections/header-section/target-selector.tsx
@@ -408,10 +408,10 @@ const TargetListHeader = React.memo((props: TargetListHeaderProps) => {
         Target
       </H1>
       <SectionActionSheet className='actionsheet'>
-        <SquareButton highlight disabled={isAdding} onClick={startAdding}>
+        <SquareButton highlight disabled={isAdding} onMouseDown={startAdding}>
           <Icn category='semantic' type='cross' width={12} height={12} />
         </SquareButton>
-        <SquareButton highlight onClick={togglePathPanel}>
+        <SquareButton highlight onMouseDown={togglePathPanel}>
           <ExpandableIndicator
             testId='target-selector'
             visible

diff --git a/editor/src/components/inspector/sections/layout-section/list-source-cartouche.tsx b/editor/src/components/inspector/sections/layout-section/list-source-cartouche.tsx
@@ -100,11 +100,14 @@ const MapListSourceCartoucheInner = React.memo(
     const { popupIsOpen, DataPickerComponent, setReferenceElement, openPopup } =
       useDataPickerButton(variableNamesInScope, onPickMappedElement, pathToMappedExpression, target)
 
-    const onClick = React.useCallback(() => {
-      if (openOn === 'single-click') {
-        openPopup()
-      }
-    }, [openOn, openPopup])
+    const onClick = React.useCallback(
+      (e: React.MouseEvent) => {
+        if (openOn === 'single-click') {
+          openPopup()
+        }
+      },
+      [openOn, openPopup],
+    )
 
     const onDoubleClick = React.useCallback(() => {
       if (openOn === 'double-click') {

diff --git a/editor/src/components/navigator/left-pane/index.tsx b/editor/src/components/navigator/left-pane/index.tsx
@@ -48,7 +48,7 @@ export const LeftPaneComponent = React.memo<LeftPaneComponentProps>((props) => {
 
   const dispatch = useDispatch()
 
-  const onClickTab = React.useCallback(
+  const onMouseDownTab = React.useCallback(
     (menuTab: LeftMenuTab) => {
       let actions: Array<EditorAction> = []
       actions.push(setLeftMenuTab(menuTab))
@@ -57,21 +57,21 @@ export const LeftPaneComponent = React.memo<LeftPaneComponentProps>((props) => {
     [dispatch],
   )
 
-  const onClickPagesTab = React.useCallback(() => {
-    onClickTab(LeftMenuTab.Pages)
-  }, [onClickTab])
+  const onMouseDownPagesTab = React.useCallback(() => {
+    onMouseDownTab(LeftMenuTab.Pages)
+  }, [onMouseDownTab])
 
-  const onClickProjectTab = React.useCallback(() => {
-    onClickTab(LeftMenuTab.Project)
-  }, [onClickTab])
+  const onMouseDownProjectTab = React.useCallback(() => {
+    onMouseDownTab(LeftMenuTab.Project)
+  }, [onMouseDownTab])
 
-  const onClickNavigatorTab = React.useCallback(() => {
-    onClickTab(LeftMenuTab.Navigator)
-  }, [onClickTab])
+  const onMouseDownNavigatorTab = React.useCallback(() => {
+    onMouseDownTab(LeftMenuTab.Navigator)
+  }, [onMouseDownTab])
 
-  const onClickGithubTab = React.useCallback(() => {
-    onClickTab(LeftMenuTab.Github)
-  }, [onClickTab])
+  const onMouseDownGithubTab = React.useCallback(() => {
+    onMouseDownTab(LeftMenuTab.Github)
+  }, [onMouseDownTab])
 
   const isMyProject = useIsMyProject()
 
@@ -126,23 +126,23 @@ export const LeftPaneComponent = React.memo<LeftPaneComponentProps>((props) => {
                 <MenuTab
                   label={'Pages'}
                   selected={selectedTab === LeftMenuTab.Pages}
-                  onClick={onClickPagesTab}
+                  onMouseDown={onMouseDownPagesTab}
                 />,
               )}
               <MenuTab
                 label={'Navigator'}
                 selected={selectedTab === LeftMenuTab.Navigator}
-                onClick={onClickNavigatorTab}
+                onMouseDown={onMouseDownNavigatorTab}
               />
               <MenuTab
                 label={'Project'}
                 selected={selectedTab === LeftMenuTab.Project}
-                onClick={onClickProjectTab}
+                onMouseDown={onMouseDownProjectTab}
               />
               <MenuTab
                 label={'Github'}
                 selected={selectedTab === LeftMenuTab.Github}
-                onClick={onClickGithubTab}
+                onMouseDown={onMouseDownGithubTab}
               />
             </FlexRow>,
           )}

diff --git a/editor/src/components/navigator/navigator-item/navigator-condensed-entry.tsx b/editor/src/components/navigator/navigator-item/navigator-condensed-entry.tsx
@@ -20,7 +20,7 @@ import { LayoutIcon } from './layout-icon'
 import { DataReferenceCartoucheControl } from '../../inspector/sections/component-section/data-reference-cartouche'
 import {
   NavigatorRowClickableWrapper,
-  useGetNavigatorClickActions,
+  useGetNavigatorMouseDownActions,
 } from './navigator-item-clickable-wrapper'
 import type { ThemeObject } from '../../../uuiui/styles/theme/theme-helpers'
 import { useNavigatorSelectionBoundsForEntry } from './use-navigator-selection-bounds-for-entry'
@@ -341,18 +341,18 @@ const CondensedEntryItemContent = React.memo(
       ])
     }, [props.entry, dispatch, highlightedViews])
 
-    const getClickActions = useGetNavigatorClickActions(
+    const getMouseDownActions = useGetNavigatorMouseDownActions(
       props.entry.elementPath,
       props.selected,
       condensedNavigatorRow([props.entry], 'leaf', props.indentation),
     )
 
-    const onClick = React.useCallback(
+    const onMouseDown = React.useCallback(
       (e: React.MouseEvent) => {
         e.stopPropagation()
-        dispatch(getClickActions(e))
+        dispatch(getMouseDownActions(e))
       },
-      [dispatch, getClickActions],
+      [dispatch, getMouseDownActions],
     )
 
     return (
@@ -374,7 +374,7 @@ const CondensedEntryItemContent = React.memo(
         }}
         onMouseOver={onMouseOver}
         onMouseOut={onMouseOut}
-        onClick={onClick}
+        onMouseDown={onMouseDown}
       >
         <div
           style={{

diff --git a/editor/src/components/navigator/navigator-item/navigator-item-clickable-wrapper.tsx b/editor/src/components/navigator/navigator-item/navigator-item-clickable-wrapper.tsx
@@ -46,33 +46,30 @@ export const NavigatorRowClickableWrapper = React.memo(
       return selectedViews.current.some((view) => EP.pathsEqual(targetPath, view))
     }, [selectedViews, targetPath])
 
-    const getActions = useGetNavigatorClickActions(targetPath, selected, props.row)
+    const getMouseDownActions = useGetNavigatorMouseDownActions(targetPath, selected, props.row)
 
-    const onClick = React.useCallback(
+    const onMouseDown = React.useCallback(
       (e: React.MouseEvent) => {
-        e.stopPropagation()
-        e.preventDefault()
-
-        const actions = getActions(e)
+        const actions = getMouseDownActions(e)
         dispatch(actions)
       },
-      [dispatch, getActions],
+      [dispatch, getMouseDownActions],
     )
 
     return (
-      <div style={{ display: 'flex', alignItems: 'center', flex: 1 }} onClick={onClick}>
+      <div style={{ display: 'flex', alignItems: 'center', flex: 1 }} onMouseDown={onMouseDown}>
         {props.children}
       </div>
     )
   },
 )
 NavigatorRowClickableWrapper.displayName = 'NavigatorRowClickableWrapper'
 
-export function useGetNavigatorClickActions(
+export function useGetNavigatorMouseDownActions(
   targetPath: ElementPath,
   selected: boolean,
   row: NavigatorRow,
-) {
+): (event: React.MouseEvent) => Array<EditorAction> {
   const navigatorTargets = useRefEditorState(navigatorTargetsSelector)
   const selectedViews = useRefEditorState((store) => store.editor.selectedViews)
   const collapsedViews = useRefEditorState((store) => store.editor.navigator.collapsedViews)