From af529273e5a1b7947fc9b9e241981c1b1c2d5b5a Mon Sep 17 00:00:00 2001 From: Konstantinos Kaloutas Date: Tue, 25 Apr 2023 16:22:03 +0300 Subject: [PATCH] enhance (wip): customizable shortcuts --- src/main/frontend/handler/editor.cljs | 7 ++++ .../frontend/modules/shortcut/config.cljs | 28 ++++++++-------- src/main/frontend/modules/shortcut/dicts.cljc | 4 +-- .../components/ContextMenu/ContextMenu.tsx | 33 +++++++------------ .../KeyboardShortcut/KeyboardShortcut.tsx | 16 +++++++++ .../src/components/KeyboardShortcut/index.ts | 1 + .../src/components/ZoomMenu/ZoomMenu.tsx | 32 ++++-------------- tldraw/packages/core/src/utils/index.ts | 2 +- 8 files changed, 58 insertions(+), 65 deletions(-) create mode 100644 tldraw/apps/tldraw-logseq/src/components/KeyboardShortcut/KeyboardShortcut.tsx create mode 100644 tldraw/apps/tldraw-logseq/src/components/KeyboardShortcut/index.ts diff --git a/src/main/frontend/handler/editor.cljs b/src/main/frontend/handler/editor.cljs index 41f02259d..fee9191ab 100644 --- a/src/main/frontend/handler/editor.cljs +++ b/src/main/frontend/handler/editor.cljs @@ -3494,6 +3494,10 @@ expand-block!))) doall) (and clear-selection? (clear-selection!))) + + (whiteboard?) + (.setCollapsed (.-api ^js (state/active-tldraw-app)) false) + :else ;; expand one level (let [blocks-with-level (all-blocks-with-level {}) @@ -3527,6 +3531,9 @@ collapse-block!))) doall) (and clear-selection? (clear-selection!))) + + (whiteboard?) + (.setCollapsed (.-api ^js (state/active-tldraw-app)) true) :else ;; collapse by one level from outside diff --git a/src/main/frontend/modules/shortcut/config.cljs b/src/main/frontend/modules/shortcut/config.cljs index 1ac2f42e4..0a826c256 100644 --- a/src/main/frontend/modules/shortcut/config.cljs +++ b/src/main/frontend/modules/shortcut/config.cljs @@ -80,16 +80,10 @@ :whiteboard/zoom-to-selection {:binding "shift+2" :fn #(.zoomToSelection (.-api ^js (state/active-tldraw-app)))} - :whiteboard/collapse {:binding "mod+up" - :fn #(.setCollapsed (.-api ^js (state/active-tldraw-app)) true)} - - :whiteboard/expand {:binding "mod+down" - :fn #(.setCollapsed (.-api ^js (state/active-tldraw-app)) false)} - - :whiteboard/zoom-out {:binding "mod+-" + :whiteboard/zoom-out {:binding "shift+dash" :fn #(.zoomOut (.-api ^js (state/active-tldraw-app)) false)} - :whiteboard/zoom-in {:binding "mod+=" + :whiteboard/zoom-in {:binding "shift+=" :fn #(.zoomIn (.-api ^js (state/active-tldraw-app)) false)} :whiteboard/send-backward {:binding "[" @@ -116,7 +110,7 @@ :whiteboard/ungroup {:binding "mod+shift+g" :fn #(.unGroup (.-api ^js (state/active-tldraw-app)))} - :whiteboard/toggle-grid {:binding "shift g" + :whiteboard/toggle-grid {:binding "shift+g" :fn #(.toggleGrid (.-api ^js (state/active-tldraw-app)))} :auto-complete/complete {:binding "enter" @@ -559,13 +553,12 @@ (-> (build-category-map [:whiteboard/reset-zoom :whiteboard/zoom-to-fit :whiteboard/zoom-to-selection - :whiteboard/collapse - :whiteboard/expand + :whiteboard/zoom-out + :whiteboard/zoom-in :whiteboard/send-backward :whiteboard/send-to-back :whiteboard/bring-forward :whiteboard/bring-to-front - :whiteboard/select-all :whiteboard/lock :whiteboard/unlock :whiteboard/group @@ -828,12 +821,17 @@ [:whiteboard/reset-zoom :whiteboard/zoom-to-fit :whiteboard/zoom-to-selection - :whiteboard/collapse - :whiteboard/expand + :whiteboard/zoom-out + :whiteboard/zoom-in + :whiteboard/send-backward + :whiteboard/send-to-back + :whiteboard/bring-forward + :whiteboard/bring-to-front :whiteboard/lock :whiteboard/unlock :whiteboard/group - :whiteboard/ungroup] + :whiteboard/ungroup + :whiteboard/toggle-grid] :shortcut.category/others [:pdf/previous-page diff --git a/src/main/frontend/modules/shortcut/dicts.cljc b/src/main/frontend/modules/shortcut/dicts.cljc index e1659ac62..a41fcb23f 100644 --- a/src/main/frontend/modules/shortcut/dicts.cljc +++ b/src/main/frontend/modules/shortcut/dicts.cljc @@ -80,10 +80,8 @@ :editor/zoom-out "Zoom out editing block / Backwards otherwise" :editor/toggle-undo-redo-mode "Toggle undo redo mode (global or page only)" :whiteboard/reset-zoom "Reset zoom" - :whiteboard/zoom-to-fit "Zoom to fit" + :whiteboard/zoom-to-fit "Zoom to drawing" :whiteboard/zoom-to-selection "Zoom to fit selection" - :whiteboard/collapse "Collapse selected portals" - :whiteboard/expand "Expand selected portals" :whiteboard/zoom-out "Zoom out" :whiteboard/zoom-in "Zoom in" :whiteboard/send-backward "Move backward" diff --git a/tldraw/apps/tldraw-logseq/src/components/ContextMenu/ContextMenu.tsx b/tldraw/apps/tldraw-logseq/src/components/ContextMenu/ContextMenu.tsx index 4c91b187a..0ae9138f3 100644 --- a/tldraw/apps/tldraw-logseq/src/components/ContextMenu/ContextMenu.tsx +++ b/tldraw/apps/tldraw-logseq/src/components/ContextMenu/ContextMenu.tsx @@ -4,6 +4,7 @@ import { MOD_KEY, AlignType, DistributeType, isDev, EXPORT_PADDING } from '@tldr import { observer } from 'mobx-react-lite' import { TablerIcon } from '../icons' import { Button } from '../Button' +import { KeyboardShortcut } from '../KeyboardShortcut' import * as React from 'react' import * as ReactContextMenu from '@radix-ui/react-context-menu' @@ -20,8 +21,7 @@ export const ContextMenu = observer(function ContextMenu({ collisionRef, }: ContextMenuProps) { const app = useApp() - const { handlers, renderers } = React.useContext(LogseqContext) - const KeyboardShortcut = renderers?.KeyboardShortcut + const { handlers } = React.useContext(LogseqContext) const rContent = React.useRef(null) const runAndTransition = (f: Function) => { @@ -33,14 +33,6 @@ export const ContextMenu = observer(function ContextMenu({ return isDev() }, []) - function shortcut(action: string) { - return ( -
- -
- ) - } - return ( { @@ -147,7 +139,7 @@ export const ContextMenu = observer(function ContextMenu({ onClick={() => runAndTransition(app.api.zoomToSelection)} > Zoom to fit - {shortcut("whiteboard/zoom-to-fit")} + @@ -164,7 +156,7 @@ export const ContextMenu = observer(function ContextMenu({ > Ungroup - {shortcut("whiteboard/ungroup")} + )} {app.selectedShapesArray.length > 1 && @@ -175,7 +167,7 @@ export const ContextMenu = observer(function ContextMenu({ > Group - {shortcut("whiteboard/group")} + )} @@ -190,7 +182,6 @@ export const ContextMenu = observer(function ContextMenu({ > Cut - {shortcut("editor/cut")} )} Copy - {shortcut("editor/copy")} + )} @@ -261,7 +252,7 @@ export const ContextMenu = observer(function ContextMenu({ onClick={() => runAndTransition(app.api.selectAll)} > Select all - {shortcut("editor/select-parent")} + {app.selectedShapes?.size > 1 && ( Lock - {shortcut("whiteboard/lock")} + )} {app.selectedShapes?.size > 0 && app.selectedShapesArray?.some(s => s.props.isLocked) && ( @@ -288,7 +279,7 @@ export const ContextMenu = observer(function ContextMenu({ > Unlock - {shortcut("whiteboard/unlock")} + )} {app.selectedShapes?.size > 0 && @@ -301,7 +292,7 @@ export const ContextMenu = observer(function ContextMenu({ > Delete - {shortcut("editor/delete")} + {app.selectedShapes?.size > 1 && !app.readOnly && ( <> @@ -330,14 +321,14 @@ export const ContextMenu = observer(function ContextMenu({ onClick={() => runAndTransition(app.bringToFront)} > Move to front - {shortcut("whiteboard/bring-to-front")} + runAndTransition(app.sendToBack)} > Move to back - {shortcut("whiteboard/send-to-back")} + )} diff --git a/tldraw/apps/tldraw-logseq/src/components/KeyboardShortcut/KeyboardShortcut.tsx b/tldraw/apps/tldraw-logseq/src/components/KeyboardShortcut/KeyboardShortcut.tsx new file mode 100644 index 000000000..bd32d3abf --- /dev/null +++ b/tldraw/apps/tldraw-logseq/src/components/KeyboardShortcut/KeyboardShortcut.tsx @@ -0,0 +1,16 @@ +import { LogseqContext } from '../../lib/logseq-context' +import * as React from 'react' + +export const KeyboardShortcut = ({ + action, + ...props +}: { action: string } & React.HTMLAttributes) => { + const { renderers } = React.useContext(LogseqContext) + const Shortcut = renderers?.KeyboardShortcut + + return ( +
+ +
+ ) +} diff --git a/tldraw/apps/tldraw-logseq/src/components/KeyboardShortcut/index.ts b/tldraw/apps/tldraw-logseq/src/components/KeyboardShortcut/index.ts new file mode 100644 index 000000000..2f1dce9ba --- /dev/null +++ b/tldraw/apps/tldraw-logseq/src/components/KeyboardShortcut/index.ts @@ -0,0 +1 @@ +export * from './KeyboardShortcut' diff --git a/tldraw/apps/tldraw-logseq/src/components/ZoomMenu/ZoomMenu.tsx b/tldraw/apps/tldraw-logseq/src/components/ZoomMenu/ZoomMenu.tsx index 09fa5aad8..ff9b7ab80 100644 --- a/tldraw/apps/tldraw-logseq/src/components/ZoomMenu/ZoomMenu.tsx +++ b/tldraw/apps/tldraw-logseq/src/components/ZoomMenu/ZoomMenu.tsx @@ -1,7 +1,9 @@ import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu' import { useApp } from '@tldraw/react' +import { KeyboardShortcut } from '../KeyboardShortcut' import { MOD_KEY } from '@tldraw/core' import { observer } from 'mobx-react-lite' +import * as React from 'react' export const ZoomMenu = observer(function ZoomMenu(): JSX.Element { const app = useApp() @@ -26,11 +28,7 @@ export const ZoomMenu = observer(function ZoomMenu(): JSX.Element { onClick={app.api.zoomToFit} > Zoom to drawing -
- - ⇧ 1 - -
+ Zoom to fit selection -
- - ⇧ 2 - -
+ Zoom in -
- - {MOD_KEY} + - -
+ Zoom out -
- - {MOD_KEY} - - -
+ Reset zoom -
- - ⇧ 0 - -
+ diff --git a/tldraw/packages/core/src/utils/index.ts b/tldraw/packages/core/src/utils/index.ts index 1b7a1b23c..7ca89fbb9 100644 --- a/tldraw/packages/core/src/utils/index.ts +++ b/tldraw/packages/core/src/utils/index.ts @@ -102,7 +102,7 @@ export function modKey(e: any): boolean { return isDarwin() ? e.metaKey : e.ctrlKey } -export const MOD_KEY = isDarwin() ? '⌘' : 'Ctrl' +export const MOD_KEY = isDarwin() ? '⌘' : 'ctrl' export function isNonNullable(value: TValue): value is NonNullable { return Boolean(value)