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>
2021-12-06 13:23:53 -05:00 · 2021-12-06 13:23:53 -05:00 · c67c0871ff
commit c67c0871ff
--- a/.gitignore
+++ b/.gitignore
@ -15,4 +15,4 @@ apps/www/public/workbox-*
 apps/www/public/worker-*
 apps/www/public/sw.js
 apps/www/public/sw.js.map
-.env
+.env
--- a/package.json
+++ b/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",
-    "pretty-quick": "^3.1.2"
+    "typescript": "^4.5.2"
  },
  "husky": {
    "hooks": {
@ -77,4 +77,4 @@
      "pre-push": "fix:style && eslint && test"
    }
  }
-}
+}
--- a/packages/tldraw/src/components/ToolsPanel/ActionButton.tsx
+++ b/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 />
--- a/packages/tldraw/src/components/TopPanel/StyleMenu/StyleMenu.tsx
+++ b/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
--- a/packages/tldraw/src/hooks/useKeyboardShortcuts.tsx
+++ b/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 elm = ref.current
-    return elm && (document.activeElement === elm || elm.contains(document.activeElement))
-  }, [ref])
+  const canHandleEvent = React.useCallback(
+    (ignoreMenus = false) => {
+      const elm = ref.current
+      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()
    },
--- a/packages/tldraw/src/state/TldrawApp.ts
+++ b/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 => {
-    if (this.session) return this
-    this.patchState(
-      { appState: { isStyleOpen: !this.appState.isStyleOpen } },
-      'ui:toggled_style_panel'
-    )
+  setMenuOpen = (isOpen: boolean): this => {
+    this.patchState({ appState: { isMenuOpen: isOpen } }, 'ui:toggled_menu_opened')
    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: [],
    },
--- a/packages/tldraw/src/state/tools/SelectTool/SelectTool.ts
+++ b/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)
    }
--- a/packages/tldraw/src/types.ts
+++ b/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[]
  }
--- a/yarn.lock
+++ b/yarn.lock