From 956211bb71650c479cc1826e7c7b02b5cb08bd41 Mon Sep 17 00:00:00 2001 From: Konstantinos Kaloutas Date: Wed, 26 Apr 2023 12:08:33 +0300 Subject: [PATCH] chore: handle tool shortcuts --- src/main/frontend/extensions/tldraw.cljs | 3 +- .../frontend/modules/shortcut/config.cljs | 54 ++++++++++++++++++- src/main/frontend/modules/shortcut/dicts.cljc | 10 ++++ .../components/PrimaryTools/PrimaryTools.tsx | 4 +- .../src/components/ToolButton/ToolButton.tsx | 11 ++-- .../tldraw-logseq/src/lib/tools/BoxTool.tsx | 2 +- .../src/lib/tools/EllipseTool.tsx | 2 +- .../tldraw-logseq/src/lib/tools/EraseTool.tsx | 2 +- .../src/lib/tools/HighlighterTool.tsx | 2 +- .../tldraw-logseq/src/lib/tools/LineTool.tsx | 2 +- .../LogseqPortalTool/LogseqPortalTool.tsx | 2 +- .../src/lib/tools/PencilTool.tsx | 2 +- .../tldraw-logseq/src/lib/tools/TextTool.tsx | 2 +- tldraw/apps/tldraw-logseq/src/styles.css | 2 +- tldraw/packages/core/src/lib/TLState.ts | 21 -------- .../src/lib/tools/TLMoveTool/TLMoveTool.ts | 2 +- .../lib/tools/TLSelectTool/TLSelectTool.tsx | 2 +- tldraw/packages/core/src/utils/KeyUtils.ts | 32 ----------- tldraw/packages/core/src/utils/index.ts | 1 - 19 files changed, 81 insertions(+), 77 deletions(-) delete mode 100644 tldraw/packages/core/src/utils/KeyUtils.ts diff --git a/src/main/frontend/extensions/tldraw.cljs b/src/main/frontend/extensions/tldraw.cljs index b111c3454..ff96171fd 100644 --- a/src/main/frontend/extensions/tldraw.cljs +++ b/src/main/frontend/extensions/tldraw.cljs @@ -78,7 +78,8 @@ (rum/defc keyboard-shortcut [props] - [(ui/render-keyboard-shortcut (shortcut-helper/gen-shortcut-seq (keyword (gobj/get props "action"))))]) + (let [shortcut (shortcut-helper/gen-shortcut-seq (keyword (gobj/get props "action")))] + (ui/render-keyboard-shortcut shortcut))) (def tldraw-renderers {:Page page-cp :Block block-cp diff --git a/src/main/frontend/modules/shortcut/config.cljs b/src/main/frontend/modules/shortcut/config.cljs index 0a826c256..f842f7b4e 100644 --- a/src/main/frontend/modules/shortcut/config.cljs +++ b/src/main/frontend/modules/shortcut/config.cljs @@ -71,6 +71,36 @@ :pdf/find {:binding "alt+f" :fn pdf-utils/open-finder} + :whiteboard/select {:binding ["1" "s"] + :fn #(.selectTool (state/active-tldraw-app) "select")} + + :whiteboard/pan {:binding ["2" "p"] + :fn #(.selectTool (state/active-tldraw-app) "move")} + + :whiteboard/portal {:binding "3" + :fn #(.selectTool (state/active-tldraw-app) "logseq-portal")} + + :whiteboard/pencil {:binding ["4" "d"] + :fn #(.selectTool (state/active-tldraw-app) "pencil")} + + :whiteboard/highlighter {:binding ["5" "h"] + :fn #(.selectTool (state/active-tldraw-app) "highlighter")} + + :whiteboard/eraser {:binding ["6" "e"] + :fn #(.selectTool (state/active-tldraw-app) "erase")} + + :whiteboard/connector {:binding ["7" "c"] + :fn #(.selectTool (state/active-tldraw-app) "line")} + + :whiteboard/text {:binding ["8" "t"] + :fn #(.selectTool (state/active-tldraw-app) "text")} + + :whiteboard/rectangle {:binding ["9" "r"] + :fn #(.selectTool (state/active-tldraw-app) "box")} + + :whiteboard/ellipse {:binding "o" + :fn #(.selectTool (state/active-tldraw-app) "ellipse")} + :whiteboard/reset-zoom {:binding "shift+0" :fn #(.resetZoom (.-api ^js (state/active-tldraw-app)))} @@ -550,7 +580,17 @@ (with-meta {:before m/enable-when-not-editing-mode!})) :shortcut.handler/whiteboard - (-> (build-category-map [:whiteboard/reset-zoom + (-> (build-category-map [:whiteboard/select + :whiteboard/pan + :whiteboard/portal + :whiteboard/pencil + :whiteboard/highlighter + :whiteboard/eraser + :whiteboard/connector + :whiteboard/text + :whiteboard/rectangle + :whiteboard/ellipse + :whiteboard/reset-zoom :whiteboard/zoom-to-fit :whiteboard/zoom-to-selection :whiteboard/zoom-out @@ -818,7 +858,17 @@ :ui/toggle-contents] :shortcut.category/whiteboard - [:whiteboard/reset-zoom + [:whiteboard/select + :whiteboard/pan + :whiteboard/portal + :whiteboard/pencil + :whiteboard/highlighter + :whiteboard/eraser + :whiteboard/connector + :whiteboard/text + :whiteboard/rectangle + :whiteboard/ellipse + :whiteboard/reset-zoom :whiteboard/zoom-to-fit :whiteboard/zoom-to-selection :whiteboard/zoom-out diff --git a/src/main/frontend/modules/shortcut/dicts.cljc b/src/main/frontend/modules/shortcut/dicts.cljc index a41fcb23f..45e4bdb2b 100644 --- a/src/main/frontend/modules/shortcut/dicts.cljc +++ b/src/main/frontend/modules/shortcut/dicts.cljc @@ -79,6 +79,16 @@ :editor/zoom-in "Zoom in editing block / Forwards otherwise" :editor/zoom-out "Zoom out editing block / Backwards otherwise" :editor/toggle-undo-redo-mode "Toggle undo redo mode (global or page only)" + :whiteboard/select "Select tool" + :whiteboard/pan "Pan tool" + :whiteboard/portal "Portal tool" + :whiteboard/pencil "Pencil tool" + :whiteboard/highlighter "Highlighter tool" + :whiteboard/eraser "Eraser tool" + :whiteboard/connector "Connector tool" + :whiteboard/text "Text tool" + :whiteboard/rectangle "Rectangle tool" + :whiteboard/ellipse "Ellipse tool" :whiteboard/reset-zoom "Reset zoom" :whiteboard/zoom-to-fit "Zoom to drawing" :whiteboard/zoom-to-selection "Zoom to fit selection" diff --git a/tldraw/apps/tldraw-logseq/src/components/PrimaryTools/PrimaryTools.tsx b/tldraw/apps/tldraw-logseq/src/components/PrimaryTools/PrimaryTools.tsx index 7f7cd066c..4871a9869 100644 --- a/tldraw/apps/tldraw-logseq/src/components/PrimaryTools/PrimaryTools.tsx +++ b/tldraw/apps/tldraw-logseq/src/components/PrimaryTools/PrimaryTools.tsx @@ -40,12 +40,12 @@ export const PrimaryTools = observer(function PrimaryTools() { app.selectTool("select")} tooltip="Select" id="select" icon="select-cursor" /> app.selectTool("move")} - tooltip="Move" + tooltip="Pan" id="move" icon={app.isIn('move.panning') ? 'hand-grab' : 'hand-stop'} /> - app.selectTool("logseq-portal")} tooltip="Add block or page" id="logseq-portal" icon="circle-plus" /> + app.selectTool("`logseq-portal")} tooltip="Add block or page" id="logseq-portal" icon="circle-plus" /> app.selectTool("pencil")} tooltip="Draw" id="pencil" icon="ballpen" /> app.selectTool("highlighter")} tooltip="Highlight" id="highlighter" icon="highlight" /> app.selectTool("erase")} tooltip="Eraser" id="erase" icon="eraser" /> diff --git a/tldraw/apps/tldraw-logseq/src/components/ToolButton/ToolButton.tsx b/tldraw/apps/tldraw-logseq/src/components/ToolButton/ToolButton.tsx index 966157c98..6a5f0657e 100644 --- a/tldraw/apps/tldraw-logseq/src/components/ToolButton/ToolButton.tsx +++ b/tldraw/apps/tldraw-logseq/src/components/ToolButton/ToolButton.tsx @@ -5,6 +5,7 @@ import { observer } from 'mobx-react-lite' import type * as React from 'react' import { Button } from '../Button' import { TablerIcon } from '../icons' +import { KeyboardShortcut } from '../KeyboardShortcut' export interface ToolButtonProps extends React.ButtonHTMLAttributes { id: string @@ -23,14 +24,10 @@ export const ToolButton = observer(({ id, icon, tooltip, tooltipSide = "left", h const shortcuts = (Tool as any)?.['shortcut'] const tooltipContent = shortcuts && tooltip ? ( - <> +
{tooltip} - - {shortcuts - .map((shortcut: string, idx: number) => {shortcut.toUpperCase()}) - .reduce((prev: React.ReactNode, curr: React.ReactNode) => [prev, ' | ', curr])} - - + +
) : ( tooltip ) diff --git a/tldraw/apps/tldraw-logseq/src/lib/tools/BoxTool.tsx b/tldraw/apps/tldraw-logseq/src/lib/tools/BoxTool.tsx index 6635e07c1..06e1e65fa 100644 --- a/tldraw/apps/tldraw-logseq/src/lib/tools/BoxTool.tsx +++ b/tldraw/apps/tldraw-logseq/src/lib/tools/BoxTool.tsx @@ -4,6 +4,6 @@ import { BoxShape, type Shape } from '../shapes' export class BoxTool extends TLBoxTool { static id = 'box' - static shortcut = ['9', 'r'] + static shortcut = 'whiteboard/rectangle' Shape = BoxShape } diff --git a/tldraw/apps/tldraw-logseq/src/lib/tools/EllipseTool.tsx b/tldraw/apps/tldraw-logseq/src/lib/tools/EllipseTool.tsx index 825d9c408..5b2c6214d 100644 --- a/tldraw/apps/tldraw-logseq/src/lib/tools/EllipseTool.tsx +++ b/tldraw/apps/tldraw-logseq/src/lib/tools/EllipseTool.tsx @@ -4,6 +4,6 @@ import { EllipseShape, type Shape } from '../shapes' export class EllipseTool extends TLBoxTool { static id = 'ellipse' - static shortcut = ['o'] + static shortcut = 'whiteboard/ellipse' Shape = EllipseShape } diff --git a/tldraw/apps/tldraw-logseq/src/lib/tools/EraseTool.tsx b/tldraw/apps/tldraw-logseq/src/lib/tools/EraseTool.tsx index f06bfa5e2..a9c13f6c0 100644 --- a/tldraw/apps/tldraw-logseq/src/lib/tools/EraseTool.tsx +++ b/tldraw/apps/tldraw-logseq/src/lib/tools/EraseTool.tsx @@ -4,5 +4,5 @@ import type { Shape } from '../shapes' export class NuEraseTool extends TLEraseTool { static id = 'erase' - static shortcut = ['6', 'e'] + static shortcut = 'whiteboard/eraser' } diff --git a/tldraw/apps/tldraw-logseq/src/lib/tools/HighlighterTool.tsx b/tldraw/apps/tldraw-logseq/src/lib/tools/HighlighterTool.tsx index 2511c7126..57e71cd14 100644 --- a/tldraw/apps/tldraw-logseq/src/lib/tools/HighlighterTool.tsx +++ b/tldraw/apps/tldraw-logseq/src/lib/tools/HighlighterTool.tsx @@ -4,7 +4,7 @@ import { HighlighterShape, type Shape } from '../shapes' export class HighlighterTool extends TLDrawTool { static id = 'highlighter' - static shortcut = ['5', 'h'] + static shortcut = 'whiteboard/highlighter' Shape = HighlighterShape simplify = true simplifyTolerance = 0.618 diff --git a/tldraw/apps/tldraw-logseq/src/lib/tools/LineTool.tsx b/tldraw/apps/tldraw-logseq/src/lib/tools/LineTool.tsx index 8a18542f2..7bff4aa6f 100644 --- a/tldraw/apps/tldraw-logseq/src/lib/tools/LineTool.tsx +++ b/tldraw/apps/tldraw-logseq/src/lib/tools/LineTool.tsx @@ -5,6 +5,6 @@ import { LineShape, type Shape } from '../shapes' // @ts-expect-error maybe later export class LineTool extends TLLineTool { static id = 'line' - static shortcut = ['7', 'c'] + static shortcut = 'whiteboard/connector' Shape = LineShape } diff --git a/tldraw/apps/tldraw-logseq/src/lib/tools/LogseqPortalTool/LogseqPortalTool.tsx b/tldraw/apps/tldraw-logseq/src/lib/tools/LogseqPortalTool/LogseqPortalTool.tsx index 5314d09aa..b93b9a368 100644 --- a/tldraw/apps/tldraw-logseq/src/lib/tools/LogseqPortalTool/LogseqPortalTool.tsx +++ b/tldraw/apps/tldraw-logseq/src/lib/tools/LogseqPortalTool/LogseqPortalTool.tsx @@ -9,7 +9,7 @@ export class LogseqPortalTool extends TLTool< TLApp > { static id = 'logseq-portal' - static shortcut = ['3'] + static shortcut = 'whiteboard/portal' static states = [IdleState, CreatingState] static initial = 'idle' diff --git a/tldraw/apps/tldraw-logseq/src/lib/tools/PencilTool.tsx b/tldraw/apps/tldraw-logseq/src/lib/tools/PencilTool.tsx index f49f4dfcb..0e61021ce 100644 --- a/tldraw/apps/tldraw-logseq/src/lib/tools/PencilTool.tsx +++ b/tldraw/apps/tldraw-logseq/src/lib/tools/PencilTool.tsx @@ -4,7 +4,7 @@ import { PencilShape, type Shape } from '../shapes' export class PencilTool extends TLDrawTool { static id = 'pencil' - static shortcut = ['4', 'd'] + static shortcut = 'whiteboard/pencil' Shape = PencilShape simplify = false } diff --git a/tldraw/apps/tldraw-logseq/src/lib/tools/TextTool.tsx b/tldraw/apps/tldraw-logseq/src/lib/tools/TextTool.tsx index 8319cd0ea..0e1b0ff04 100644 --- a/tldraw/apps/tldraw-logseq/src/lib/tools/TextTool.tsx +++ b/tldraw/apps/tldraw-logseq/src/lib/tools/TextTool.tsx @@ -4,6 +4,6 @@ import { TextShape, type Shape } from '../shapes' export class TextTool extends TLTextTool { static id = 'text' - static shortcut = ['8', 't'] + static shortcut = 'whiteboard/text' Shape = TextShape } diff --git a/tldraw/apps/tldraw-logseq/src/styles.css b/tldraw/apps/tldraw-logseq/src/styles.css index 798d48aeb..07b3db1c5 100644 --- a/tldraw/apps/tldraw-logseq/src/styles.css +++ b/tldraw/apps/tldraw-logseq/src/styles.css @@ -147,7 +147,7 @@ html[data-theme='light'] { .tl-menu-right-slot { margin-left: auto; - padding-left: 40px; + padding-left: 20px; .keyboard-shortcut > code { padding: 4px !important; diff --git a/tldraw/packages/core/src/lib/TLState.ts b/tldraw/packages/core/src/lib/TLState.ts index 06453bec3..527c319af 100644 --- a/tldraw/packages/core/src/lib/TLState.ts +++ b/tldraw/packages/core/src/lib/TLState.ts @@ -9,7 +9,6 @@ import type { TLShortcut, TLEvents, } from '../types' -import { KeyUtils } from '../utils' import type { TLShape } from './shapes' export interface TLStateClass< @@ -120,7 +119,6 @@ export abstract class TLRootState if (this.currentState) { prevState._events.onExit({ ...data, toId: id }) prevState.dispose() - nextState.registerKeyboardShortcuts() this.setCurrentState(nextState) this._events.onTransition({ ...data, fromId: prevState.id, toId: id }) nextState._events.onEnter({ ...data, fromId: prevState.id }) @@ -404,34 +402,15 @@ export abstract class TLState< } } - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore - const shortcuts = this.constructor['shortcuts'] as TLShortcut[] - this._shortcuts = shortcuts - makeObservable(this) } static cursor?: TLCursor - registerKeyboardShortcuts = (): void => { - if (!this._shortcuts?.length) return - - this._disposables.push( - ...this._shortcuts.map(({ keys, fn }) => { - return KeyUtils.registerShortcut(keys, event => { - if (!this.isActive) return - fn(this.root, this, event) - }) - }) - ) - } - /* --------------------- States --------------------- */ protected _root: R protected _parent: P - private _shortcuts: TLShortcut[] = [] get root() { return this._root diff --git a/tldraw/packages/core/src/lib/tools/TLMoveTool/TLMoveTool.ts b/tldraw/packages/core/src/lib/tools/TLMoveTool/TLMoveTool.ts index 4c62552e3..04fe3a092 100644 --- a/tldraw/packages/core/src/lib/tools/TLMoveTool/TLMoveTool.ts +++ b/tldraw/packages/core/src/lib/tools/TLMoveTool/TLMoveTool.ts @@ -10,7 +10,7 @@ export class TLMoveTool< R extends TLApp = TLApp > extends TLTool { static id = 'move' - static shortcut = ['2', 'm'] + static shortcut = 'whiteboard/pan' static states = [IdleState, IdleHoldState, PanningState, PinchingState] diff --git a/tldraw/packages/core/src/lib/tools/TLSelectTool/TLSelectTool.tsx b/tldraw/packages/core/src/lib/tools/TLSelectTool/TLSelectTool.tsx index c83829356..e88a23a92 100644 --- a/tldraw/packages/core/src/lib/tools/TLSelectTool/TLSelectTool.tsx +++ b/tldraw/packages/core/src/lib/tools/TLSelectTool/TLSelectTool.tsx @@ -33,7 +33,7 @@ export class TLSelectTool< static initial = 'idle' - static shortcut = ['1', 's'] + static shortcut = 'whiteboard/select' static states = [ IdleState, diff --git a/tldraw/packages/core/src/utils/KeyUtils.ts b/tldraw/packages/core/src/utils/KeyUtils.ts deleted file mode 100644 index 300c3747e..000000000 --- a/tldraw/packages/core/src/utils/KeyUtils.ts +++ /dev/null @@ -1,32 +0,0 @@ -import Mousetrap from 'mousetrap' - -type AvailableTags = 'INPUT' | 'TEXTAREA' | 'SELECT' - -const tagFilter = ({ target }: KeyboardEvent, enableOnTags?: AvailableTags[]) => { - const targetTagName = target && (target as HTMLElement).tagName - return Boolean( - targetTagName && enableOnTags && enableOnTags.includes(targetTagName as AvailableTags) - ) -} - -export class KeyUtils { - static registerShortcut( - keys: string | string[], - callback: (keyboardEvent: Mousetrap.ExtendedKeyboardEvent, combo: string) => void - ) { - const fn = (keyboardEvent: Mousetrap.ExtendedKeyboardEvent, combo: string): void => { - keyboardEvent.preventDefault() - if ( - tagFilter(keyboardEvent, ['INPUT', 'TEXTAREA', 'SELECT']) || - (keyboardEvent.target as HTMLElement)?.isContentEditable - ) { - return - } - callback(keyboardEvent, combo) - } - Mousetrap.bind(keys, fn, 'keydown') - return () => { - Mousetrap.unbind(keys, 'keydown') - } - } -} diff --git a/tldraw/packages/core/src/utils/index.ts b/tldraw/packages/core/src/utils/index.ts index 7ca89fbb9..3219a7a79 100644 --- a/tldraw/packages/core/src/utils/index.ts +++ b/tldraw/packages/core/src/utils/index.ts @@ -1,7 +1,6 @@ import * as uuid from 'uuid' export * from './BoundsUtils' export * from './PointUtils' -export * from './KeyUtils' export * from './GeomUtils' export * from './PolygonUtils' export * from './SvgPathUtils'