PrivateCoffee/tldraw
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Fix/undo on menu open (#436)

Browse source 
* 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>
This commit is contained in:
megnakokkalera 2021-12-06 13:23:53 -05:00 committed by GitHub
parent 0db19e3043
commit c67c0871ff
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 878 additions and 826 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
package.json
View file

@ -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": {

10
packages/tldraw/src/components/ToolsPanel/ActionButton.tsx
View file

@ -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 />

9
packages/tldraw/src/components/TopPanel/StyleMenu/StyleMenu.tsx
View file

@ -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

68
packages/tldraw/src/hooks/useKeyboardShortcuts.tsx
View file

@ -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(
(ignoreMenus = false) => {
const elm = ref.current
if (ignoreMenus && app.isMenuOpen()) return true
return elm && (document.activeElement === elm || elm.contains(document.activeElement))
}, [ref])
},
[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()
},

14
packages/tldraw/src/state/TldrawApp.ts
View file

@ -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: [],
},

3
packages/tldraw/src/state/tools/SelectTool/SelectTool.ts
View file

@ -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)
}

2
packages/tldraw/src/types.ts
View file

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

1586
yarn.lock
View file

File diff suppressed because it is too large Load diff