Fix/undo on menu open (#436)

* fix for undo button on menu open

* Change toggle to set, add option for keyboard events

* Update .gitignore

* Update .gitignore

* Remove isStyleOpen

* Remove isStyleOpen

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>

package.json

@@ -65,11 +65,11 @@
     "lerna": "^3.22.1",
     "lint-staged": "^11.2.6",
     "prettier": "^2.4.1",
+    "pretty-quick": "^3.1.2",
     "resize-observer-polyfill": "^1.5.1",
     "tslib": "^2.3.0",
     "typedoc": "^0.22.3",
-    "typescript": "^4.5.2",
+    "typescript": "^4.5.2"
-    "pretty-quick": "^3.1.2"
   },
   "husky": {
     "hooks": {

packages/tldraw/src/components/ToolsPanel/ActionButton.tsx

@@ -31,7 +31,6 @@ import {
 } from '@radix-ui/react-icons'
 import { DMContent } from '~components/Primitives/DropdownMenu'
 import { Divider } from '~components/Primitives/Divider'
-import { TrashIcon } from '~components/Primitives/icons'
 import { ToolButton } from '~components/Primitives/ToolButton'
 
 const selectedShapesCountSelector = (s: TDSnapshot) =>
@@ -172,8 +171,15 @@ export function ActionButton(): JSX.Element {
     app.distribute(DistributeType.Horizontal)
   }, [app])
 
+  const handleMenuOpenChange = React.useCallback(
+    (open: boolean) => {
+      app.setMenuOpen(open)
+    },
+    [app]
+  )
+
   return (
-    <DropdownMenu.Root dir="ltr">
+    <DropdownMenu.Root dir="ltr" onOpenChange={handleMenuOpenChange}>
       <DropdownMenu.Trigger dir="ltr" asChild>
         <ToolButton variant="circle">
           <DotsHorizontalIcon />

packages/tldraw/src/components/TopPanel/StyleMenu/StyleMenu.tsx

@@ -147,8 +147,15 @@ export const StyleMenu = React.memo(function ColorMenu(): JSX.Element {
     app.style({ textAlign: value as AlignStyle })
   }, [])
 
+  const handleMenuOpenChange = React.useCallback(
+    (open: boolean) => {
+      app.setMenuOpen(open)
+    },
+    [app]
+  )
+
   return (
-    <DropdownMenu.Root dir="ltr">
+    <DropdownMenu.Root dir="ltr" onOpenChange={handleMenuOpenChange}>
       <DropdownMenu.Trigger asChild>
         <ToolButton variant="text">
           Styles

packages/tldraw/src/hooks/useKeyboardShortcuts.tsx

@@ -6,17 +6,21 @@ import { useFileSystemHandlers, useTldrawApp } from '~hooks'
 export function useKeyboardShortcuts(ref: React.RefObject<HTMLDivElement>) {
   const app = useTldrawApp()
 
-  const canHandleEvent = React.useCallback(() => {
+  const canHandleEvent = React.useCallback(
-    const elm = ref.current
+    (ignoreMenus = false) => {
-    return elm && (document.activeElement === elm || elm.contains(document.activeElement))
+      const elm = ref.current
-  }, [ref])
+      if (ignoreMenus && app.isMenuOpen()) return true
+      return elm && (document.activeElement === elm || elm.contains(document.activeElement))
+    },
+    [ref]
+  )
 
   /* ---------------------- Tools --------------------- */
 
   useHotkeys(
     'v,1',
     () => {
-      if (!canHandleEvent()) return
+      if (!canHandleEvent(true)) return
       app.selectTool('select')
     },
     [app, ref.current]
@@ -25,7 +29,7 @@ export function useKeyboardShortcuts(ref: React.RefObject<HTMLDivElement>) {
   useHotkeys(
     'd,p,2',
     () => {
-      if (!canHandleEvent()) return
+      if (!canHandleEvent(true)) return
       app.selectTool(TDShapeType.Draw)
     },
     undefined,
@@ -35,7 +39,7 @@ export function useKeyboardShortcuts(ref: React.RefObject<HTMLDivElement>) {
   useHotkeys(
     'e,3',
     () => {
-      if (!canHandleEvent()) return
+      if (!canHandleEvent(true)) return
       app.selectTool('erase')
     },
     undefined,
@@ -45,7 +49,7 @@ export function useKeyboardShortcuts(ref: React.RefObject<HTMLDivElement>) {
   useHotkeys(
     'r,4',
     () => {
-      if (!canHandleEvent()) return
+      if (!canHandleEvent(true)) return
       app.selectTool(TDShapeType.Rectangle)
     },
     undefined,
@@ -55,7 +59,7 @@ export function useKeyboardShortcuts(ref: React.RefObject<HTMLDivElement>) {
   useHotkeys(
     'o,5',
     () => {
-      if (!canHandleEvent()) return
+      if (!canHandleEvent(true)) return
       app.selectTool(TDShapeType.Ellipse)
     },
     undefined,
@@ -65,7 +69,7 @@ export function useKeyboardShortcuts(ref: React.RefObject<HTMLDivElement>) {
   useHotkeys(
     'l,6',
     () => {
-      if (!canHandleEvent()) return
+      if (!canHandleEvent(true)) return
       app.selectTool(TDShapeType.Line)
     },
     undefined,
@@ -75,7 +79,7 @@ export function useKeyboardShortcuts(ref: React.RefObject<HTMLDivElement>) {
   useHotkeys(
     'a,7',
     () => {
-      if (!canHandleEvent()) return
+      if (!canHandleEvent(true)) return
       app.selectTool(TDShapeType.Arrow)
     },
     undefined,
@@ -85,7 +89,7 @@ export function useKeyboardShortcuts(ref: React.RefObject<HTMLDivElement>) {
   useHotkeys(
     't,8',
     () => {
-      if (!canHandleEvent()) return
+      if (!canHandleEvent(true)) return
       app.selectTool(TDShapeType.Text)
     },
     undefined,
@@ -95,7 +99,7 @@ export function useKeyboardShortcuts(ref: React.RefObject<HTMLDivElement>) {
   useHotkeys(
     's,9',
     () => {
-      if (!canHandleEvent()) return
+      if (!canHandleEvent(true)) return
       app.selectTool(TDShapeType.Sticky)
     },
     undefined,
@@ -109,7 +113,7 @@ export function useKeyboardShortcuts(ref: React.RefObject<HTMLDivElement>) {
   useHotkeys(
     'ctrl+shift+d,⌘+shift+d',
     (e) => {
-      if (!canHandleEvent()) return
+      if (!canHandleEvent(true)) return
       app.toggleDarkMode()
       e.preventDefault()
     },
@@ -122,7 +126,7 @@ export function useKeyboardShortcuts(ref: React.RefObject<HTMLDivElement>) {
   useHotkeys(
     'ctrl+.,⌘+.',
     () => {
-      if (!canHandleEvent()) return
+      if (!canHandleEvent(true)) return
       app.toggleFocusMode()
     },
     undefined,
@@ -132,7 +136,7 @@ export function useKeyboardShortcuts(ref: React.RefObject<HTMLDivElement>) {
   useHotkeys(
     'ctrl+shift+g,⌘+shift+g',
     () => {
-      if (!canHandleEvent()) return
+      if (!canHandleEvent(true)) return
       app.toggleGrid()
     },
     undefined,
@@ -190,7 +194,7 @@ export function useKeyboardShortcuts(ref: React.RefObject<HTMLDivElement>) {
   useHotkeys(
     '⌘+z,ctrl+z',
     () => {
-      if (!canHandleEvent()) return
+      if (!canHandleEvent(true)) return
 
       if (app.session) {
         app.cancelSession()
@@ -205,7 +209,7 @@ export function useKeyboardShortcuts(ref: React.RefObject<HTMLDivElement>) {
   useHotkeys(
     'ctrl+shift-z,⌘+shift+z',
     () => {
-      if (!canHandleEvent()) return
+      if (!canHandleEvent(true)) return
 
       if (app.session) {
         app.cancelSession()
@@ -246,7 +250,7 @@ export function useKeyboardShortcuts(ref: React.RefObject<HTMLDivElement>) {
   useHotkeys(
     'ctrl+=,⌘+=,ctrl+num_subtract,⌘+num_subtract',
     (e) => {
-      if (!canHandleEvent()) return
+      if (!canHandleEvent(true)) return
       app.zoomIn()
       e.preventDefault()
     },
@@ -257,7 +261,7 @@ export function useKeyboardShortcuts(ref: React.RefObject<HTMLDivElement>) {
   useHotkeys(
     'ctrl+-,⌘+-,ctrl+num_add,⌘+num_add',
     (e) => {
-      if (!canHandleEvent()) return
+      if (!canHandleEvent(true)) return
 
       app.zoomOut()
       e.preventDefault()
@@ -269,7 +273,7 @@ export function useKeyboardShortcuts(ref: React.RefObject<HTMLDivElement>) {
   useHotkeys(
     'shift+0,ctrl+numpad_0,⌘+numpad_0',
     () => {
-      if (!canHandleEvent()) return
+      if (!canHandleEvent(true)) return
       app.resetZoom()
     },
     undefined,
@@ -279,7 +283,7 @@ export function useKeyboardShortcuts(ref: React.RefObject<HTMLDivElement>) {
   useHotkeys(
     'shift+1',
     () => {
-      if (!canHandleEvent()) return
+      if (!canHandleEvent(true)) return
       app.zoomToFit()
     },
     undefined,
@@ -289,7 +293,7 @@ export function useKeyboardShortcuts(ref: React.RefObject<HTMLDivElement>) {
   useHotkeys(
     'shift+2',
     () => {
-      if (!canHandleEvent()) return
+      if (!canHandleEvent(true)) return
       app.zoomToSelection()
     },
     undefined,
@@ -315,7 +319,7 @@ export function useKeyboardShortcuts(ref: React.RefObject<HTMLDivElement>) {
   useHotkeys(
     'shift+h',
     () => {
-      if (!canHandleEvent()) return
+      if (!canHandleEvent(true)) return
       app.flipHorizontal()
     },
     undefined,
@@ -325,7 +329,7 @@ export function useKeyboardShortcuts(ref: React.RefObject<HTMLDivElement>) {
   useHotkeys(
     'shift+v',
     () => {
-      if (!canHandleEvent()) return
+      if (!canHandleEvent(true)) return
       app.flipVertical()
     },
     undefined,
@@ -337,7 +341,7 @@ export function useKeyboardShortcuts(ref: React.RefObject<HTMLDivElement>) {
   useHotkeys(
     'escape',
     () => {
-      if (!canHandleEvent()) return
+      if (!canHandleEvent(true)) return
 
       app.cancel()
     },
@@ -362,7 +366,7 @@ export function useKeyboardShortcuts(ref: React.RefObject<HTMLDivElement>) {
   useHotkeys(
     '⌘+a,ctrl+a',
     () => {
-      if (!canHandleEvent()) return
+      if (!canHandleEvent(true)) return
       app.selectAll()
     },
     undefined,
@@ -524,7 +528,7 @@ export function useKeyboardShortcuts(ref: React.RefObject<HTMLDivElement>) {
   useHotkeys(
     '[',
     () => {
-      if (!canHandleEvent()) return
+      if (!canHandleEvent(true)) return
       app.moveBackward()
     },
     undefined,
@@ -534,7 +538,7 @@ export function useKeyboardShortcuts(ref: React.RefObject<HTMLDivElement>) {
   useHotkeys(
     ']',
     () => {
-      if (!canHandleEvent()) return
+      if (!canHandleEvent(true)) return
       app.moveForward()
     },
     undefined,
@@ -544,7 +548,7 @@ export function useKeyboardShortcuts(ref: React.RefObject<HTMLDivElement>) {
   useHotkeys(
     'shift+[',
     () => {
-      if (!canHandleEvent()) return
+      if (!canHandleEvent(true)) return
       app.moveToBack()
     },
     undefined,
@@ -554,7 +558,7 @@ export function useKeyboardShortcuts(ref: React.RefObject<HTMLDivElement>) {
   useHotkeys(
     'shift+]',
     () => {
-      if (!canHandleEvent()) return
+      if (!canHandleEvent(true)) return
       app.moveToFront()
     },
     undefined,
@@ -579,7 +583,7 @@ export function useKeyboardShortcuts(ref: React.RefObject<HTMLDivElement>) {
   useHotkeys(
     'alt+command+l,alt+ctrl+l',
     (e) => {
-      if (!canHandleEvent()) return
+      if (!canHandleEvent(true)) return
       app.style({ textAlign: AlignStyle.Start })
       e.preventDefault()
     },
@@ -590,7 +594,7 @@ export function useKeyboardShortcuts(ref: React.RefObject<HTMLDivElement>) {
   useHotkeys(
     'alt+command+t,alt+ctrl+t',
     (e) => {
-      if (!canHandleEvent()) return
+      if (!canHandleEvent(true)) return
       app.style({ textAlign: AlignStyle.Middle })
       e.preventDefault()
     },
@@ -601,7 +605,7 @@ export function useKeyboardShortcuts(ref: React.RefObject<HTMLDivElement>) {
   useHotkeys(
     'alt+command+r,alt+ctrl+r',
     (e) => {
-      if (!canHandleEvent()) return
+      if (!canHandleEvent(true)) return
       app.style({ textAlign: AlignStyle.End })
       e.preventDefault()
     },

packages/tldraw/src/state/TldrawApp.ts

@@ -962,18 +962,16 @@ export class TldrawApp extends StateManager<TDSnapshot> {
   }
 
   /**
-   * Toggle the style panel.
+   * Toggles the state if menu is opened
    */
-  toggleStylePanel = (): this => {
+  setMenuOpen = (isOpen: boolean): this => {
-    if (this.session) return this
+    this.patchState({ appState: { isMenuOpen: isOpen } }, 'ui:toggled_menu_opened')
-    this.patchState(
-      { appState: { isStyleOpen: !this.appState.isStyleOpen } },
-      'ui:toggled_style_panel'
-    )
     this.persist()
     return this
   }
 
+  isMenuOpen = (): boolean => this.appState.isMenuOpen
+
   /**
    * Toggle grids.
    */
@@ -3224,7 +3222,7 @@ export class TldrawApp extends StateManager<TDSnapshot> {
       currentPageId: 'page',
       currentStyle: defaultStyle,
       isToolLocked: false,
-      isStyleOpen: false,
+      isMenuOpen: false,
       isEmptyCanvas: false,
       snapLines: [],
     },

packages/tldraw/src/state/tools/SelectTool/SelectTool.ts

@@ -341,9 +341,6 @@ export class SelectTool extends BaseTool<Status> {
   }
 
   onPointerDown: TLPointerEventHandler = (info, e) => {
-    if (this.app.appState.isStyleOpen) {
-      this.app.toggleStylePanel()
-    }
     if (e.buttons === 4) {
       this.setStatus(Status.MiddleWheelPanning)
     }

packages/tldraw/src/types.ts

@@ -98,8 +98,8 @@ export interface TDSnapshot {
     hoveredId?: string
     activeTool: TDToolType
     isToolLocked: boolean
-    isStyleOpen: boolean
     isEmptyCanvas: boolean
+    isMenuOpen: boolean
     status: string
     snapLines: TLSnapLine[]
   }