greatbody
/
logseq
mirror of https://github.com/logseq/logseq
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

enhance (wip): customizable shortcuts

pull/9269/head
Konstantinos Kaloutas 2023-04-25 16:22:03 +03:00 committed by Gabriel Horner
parent 96aed148b4
commit dd9eb3a4e2
8 changed files with 58 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/main/frontend/handler/editor.cljs
View File

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

28
src/main/frontend/modules/shortcut/config.cljs
View File

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

4
src/main/frontend/modules/shortcut/dicts.cljc
View File

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

33
tldraw/apps/tldraw-logseq/src/components/ContextMenu/ContextMenu.tsx
View File

@ -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<HTMLDivElement>(null)
const runAndTransition = (f: Function) => {
@ -33,14 +33,6 @@ export const ContextMenu = observer(function ContextMenu({
return isDev()
}, [])
function shortcut(action: string) {
return (
<div className="tl-menu-right-slot">
<KeyboardShortcut action={action} />
</div>
)
}
return (
<ReactContextMenu.Root
onOpenChange={open => {
@ -147,7 +139,7 @@ export const ContextMenu = observer(function ContextMenu({
onClick={() => runAndTransition(app.api.zoomToSelection)}
>
Zoom to fit
{shortcut("whiteboard/zoom-to-fit")}
<KeyboardShortcut action="whiteboard/zoom-to-fit" />
</ReactContextMenu.Item>
<ReactContextMenu.Separator className="menu-separator" />
</>
@ -164,7 +156,7 @@ export const ContextMenu = observer(function ContextMenu({
>
<TablerIcon className="tl-menu-icon" name="ungroup" />
Ungroup
{shortcut("whiteboard/ungroup")}
<KeyboardShortcut action="whiteboard/ungroup" />
</ReactContextMenu.Item>
)}
{app.selectedShapesArray.length > 1 &&
@ -175,7 +167,7 @@ export const ContextMenu = observer(function ContextMenu({
>
<TablerIcon className="tl-menu-icon" name="group" />
Group
{shortcut("whiteboard/group")}
<KeyboardShortcut action="whiteboard/group" />
</ReactContextMenu.Item>
)}
<ReactContextMenu.Separator className="menu-separator" />
@ -190,7 +182,6 @@ export const ContextMenu = observer(function ContextMenu({
>
<TablerIcon className="tl-menu-icon" name="cut" />
Cut
{shortcut("editor/cut")}
</ReactContextMenu.Item>
)}
<ReactContextMenu.Item
@ -199,7 +190,7 @@ export const ContextMenu = observer(function ContextMenu({
>
<TablerIcon className="tl-menu-icon" name="copy" />
Copy
{shortcut("editor/copy")}
<KeyboardShortcut action="editor/copy" />
</ReactContextMenu.Item>
</>
)}
@ -261,7 +252,7 @@ export const ContextMenu = observer(function ContextMenu({
onClick={() => runAndTransition(app.api.selectAll)}
>
Select all
{shortcut("editor/select-parent")}
<KeyboardShortcut action="editor/select-parent" />
</ReactContextMenu.Item>
{app.selectedShapes?.size > 1 && (
<ReactContextMenu.Item
@ -278,7 +269,7 @@ export const ContextMenu = observer(function ContextMenu({
>
<TablerIcon className="tl-menu-icon" name="lock" />
Lock
{shortcut("whiteboard/lock")}
<KeyboardShortcut action="whiteboard/lock" />
</ReactContextMenu.Item>
)}
{app.selectedShapes?.size > 0 && app.selectedShapesArray?.some(s => s.props.isLocked) && (
@ -288,7 +279,7 @@ export const ContextMenu = observer(function ContextMenu({
>
<TablerIcon className="tl-menu-icon" name="lock-open" />
Unlock
{shortcut("whiteboard/unlock")}
<KeyboardShortcut action="whiteboard/unlock" />
</ReactContextMenu.Item>
)}
{app.selectedShapes?.size > 0 &&
@ -301,7 +292,7 @@ export const ContextMenu = observer(function ContextMenu({
>
<TablerIcon className="tl-menu-icon" name="backspace" />
Delete
{shortcut("editor/delete")}
<KeyboardShortcut action="editor/delete" />
</ReactContextMenu.Item>
{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")}
<KeyboardShortcut action="whiteboard/bring-to-front" />
</ReactContextMenu.Item>
<ReactContextMenu.Item
className="tl-menu-item"
onClick={() => runAndTransition(app.sendToBack)}
>
Move to back
{shortcut("whiteboard/send-to-back")}
<KeyboardShortcut action="whiteboard/send-to-back" />
</ReactContextMenu.Item>
</>
)}

16
tldraw/apps/tldraw-logseq/src/components/KeyboardShortcut/KeyboardShortcut.tsx Normal file
View File

@ -0,0 +1,16 @@
import { LogseqContext } from '../../lib/logseq-context'
import * as React from 'react'
export const KeyboardShortcut = ({
action,
...props
}: { action: string } & React.HTMLAttributes<HTMLElement>) => {
const { renderers } = React.useContext(LogseqContext)
const Shortcut = renderers?.KeyboardShortcut
return (
<div className="tl-menu-right-slot" {...props}>
<Shortcut action={action} />
</div>
)
}

1
tldraw/apps/tldraw-logseq/src/components/KeyboardShortcut/index.ts Normal file
View File

@ -0,0 +1 @@
export * from './KeyboardShortcut'

32
tldraw/apps/tldraw-logseq/src/components/ZoomMenu/ZoomMenu.tsx
View File

@ -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
<div className="tl-menu-right-slot">
<span className="keyboard-shortcut">
<code>⇧</code> <code>1</code>
</span>
</div>
<KeyboardShortcut action="whiteboard/zoom-to-fit"/>
</DropdownMenuPrimitive.Item>
<DropdownMenuPrimitive.Item
className="tl-menu-item"
@ -39,11 +37,7 @@ export const ZoomMenu = observer(function ZoomMenu(): JSX.Element {
disabled={app.selectedShapesArray.length === 0}
>
Zoom to fit selection
<div className="tl-menu-right-slot">
<span className="keyboard-shortcut">
<code>⇧</code> <code>2</code>
</span>
</div>
<KeyboardShortcut action="whiteboard/zoom-to-selection"/>
</DropdownMenuPrimitive.Item>
<DropdownMenuPrimitive.Item
className="tl-menu-item"
@ -51,11 +45,7 @@ export const ZoomMenu = observer(function ZoomMenu(): JSX.Element {
onClick={app.api.zoomIn}
>
Zoom in
<div className="tl-menu-right-slot">
<span className="keyboard-shortcut">
<code>{MOD_KEY}</code> <code>+</code>
</span>
</div>
<KeyboardShortcut action="whiteboard/zoom-in"/>
</DropdownMenuPrimitive.Item>
<DropdownMenuPrimitive.Item
className="tl-menu-item"
@ -63,11 +53,7 @@ export const ZoomMenu = observer(function ZoomMenu(): JSX.Element {
onClick={app.api.zoomOut}
>
Zoom out
<div className="tl-menu-right-slot">
<span className="keyboard-shortcut">
<code>{MOD_KEY}</code> <code>-</code>
</span>
</div>
<KeyboardShortcut action="whiteboard/zoom-out"/>
</DropdownMenuPrimitive.Item>
<DropdownMenuPrimitive.Item
className="tl-menu-item"
@ -75,11 +61,7 @@ export const ZoomMenu = observer(function ZoomMenu(): JSX.Element {
onClick={app.api.resetZoom}
>
Reset zoom
<div className="tl-menu-right-slot">
<span className="keyboard-shortcut">
<code>⇧</code> <code>0</code>
</span>
</div>
<KeyboardShortcut action="whiteboard/reset-zoom"/>
</DropdownMenuPrimitive.Item>
</DropdownMenuPrimitive.Content>
</DropdownMenuPrimitive.Root>

2
tldraw/packages/core/src/utils/index.ts
View File

@ -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<TValue>(value: TValue): value is NonNullable<TValue> {
return Boolean(value)