mirror of
https://github.com/penpot/penpot.git
synced 2025-03-19 19:21:23 -05:00
🎉 Add new shortcuts handling implementation.
This commit is contained in:
Andrey Antukh
parent
1a3a48e4de
commit
8597b87cad
5 changed files with 67 additions and 64 deletions
5
frontend/package-lock.json
generated
5
frontend/package-lock.json
generated
|
|
@ -3945,6 +3945,11 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"mousetrap": {
|
||||
"version": "1.6.5",
|
||||
"resolved": "https://registry.npmjs.org/mousetrap/-/mousetrap-1.6.5.tgz",
|
||||
"integrity": "sha512-QNo4kEepaIBwiT8CDhP98umTetp+JNfQYBWvC1pc6/OAibuXtRcxZ58Qz8skvEHYvURne/7R8T5VoOI7rDsEUA=="
|
||||
},
|
||||
"ms": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
|
||||
|
|
|
|||
|
|
@ -29,6 +29,7 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"date-fns": "^2.11.1",
|
||||
"mousetrap": "^1.6.5",
|
||||
"randomcolor": "^0.5.4",
|
||||
"react": "^16.13.1",
|
||||
"react-color": "^2.18.0",
|
||||
|
|
|
|||
|
|
@ -2263,63 +2263,41 @@
|
|||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
||||
(def shortcuts
|
||||
{"ctrl+shift+m" #(rx/of (toggle-layout-flag :sitemap))
|
||||
"ctrl+shift+f" #(rx/of (toggle-layout-flag :drawtools))
|
||||
"ctrl+shift+i" #(rx/of (toggle-layout-flag :icons))
|
||||
"ctrl+shift+l" #(rx/of (toggle-layout-flag :layers))
|
||||
"equals" #(rx/of increase-zoom) ; keyName for the key with = and + in US keyboards (see https://unixpapa.com/js/key.html)
|
||||
"dash" #(rx/of decrease-zoom) ; keyName for the key with - and _ in US keyboards
|
||||
"shift+0" #(rx/of zoom-to-50)
|
||||
"shift+1" #(rx/of reset-zoom)
|
||||
"shift+2" #(rx/of zoom-to-200)
|
||||
"ctrl+d" #(rx/of duplicate-selected)
|
||||
"ctrl+z" #(rx/of undo)
|
||||
"ctrl+shift+z" #(rx/of redo)
|
||||
"ctrl+y" #(rx/of redo)
|
||||
"ctrl+q" #(rx/of reinitialize-undo)
|
||||
"ctrl+b" #(rx/of (select-for-drawing :rect))
|
||||
"ctrl+e" #(rx/of (select-for-drawing :circle))
|
||||
"ctrl+t" #(rx/of (select-for-drawing :text))
|
||||
"ctrl+c" #(rx/of copy-selected)
|
||||
"ctrl+v" #(rx/of paste)
|
||||
"ctrl+g" #(rx/of (create-group))
|
||||
"ctrl+shift+g" #(rx/of (remove-group))
|
||||
"esc" #(rx/of :interrupt deselect-all)
|
||||
"delete" #(rx/of delete-selected)
|
||||
"ctrl+up" #(rx/of (vertical-order-selected :up))
|
||||
"ctrl+down" #(rx/of (vertical-order-selected :down))
|
||||
"ctrl+shift+up" #(rx/of (vertical-order-selected :top))
|
||||
"ctrl+shift+down" #(rx/of (vertical-order-selected :bottom))
|
||||
"shift+up" #(rx/of (move-selected :up true))
|
||||
"shift+down" #(rx/of (move-selected :down true))
|
||||
"shift+right" #(rx/of (move-selected :right true))
|
||||
"shift+left" #(rx/of (move-selected :left true))
|
||||
"up" #(rx/of (move-selected :up false))
|
||||
"down" #(rx/of (move-selected :down false))
|
||||
"right" #(rx/of (move-selected :right false))
|
||||
"left" #(rx/of (move-selected :left false))})
|
||||
{"ctrl+shift+m" #(st/emit! (toggle-layout-flag :sitemap))
|
||||
"ctrl+shift+i" #(st/emit! (toggle-layout-flag :libraries))
|
||||
"ctrl+shift+l" #(st/emit! (toggle-layout-flag :layers))
|
||||
"+" #(st/emit! increase-zoom)
|
||||
"-" #(st/emit! decrease-zoom)
|
||||
|
||||
(def initialize-shortcuts
|
||||
(letfn [(initialize [sink]
|
||||
(let [handler (KeyboardShortcutHandler. js/document)]
|
||||
"ctrl+g" #(st/emit! (create-group))
|
||||
"ctrl+shift+g" #(st/emit! (remove-group))
|
||||
|
||||
;; Register shortcuts.
|
||||
(run! #(.registerShortcut handler % %) (keys shortcuts))
|
||||
|
||||
;; Initialize shortcut listener.
|
||||
(let [event KeyboardShortcutHandler.EventType.SHORTCUT_TRIGGERED
|
||||
callback #(sink (gobj/get % "identifier"))
|
||||
key (events/listen handler event callback)]
|
||||
(fn []
|
||||
(events/unlistenByKey key)
|
||||
(.clearKeyListener handler)))))]
|
||||
(ptk/reify ::initialize-shortcuts
|
||||
ptk/WatchEvent
|
||||
(watch [_ state stream]
|
||||
(let [stoper (rx/filter #(= ::finalize-shortcuts %) stream)]
|
||||
(->> (rx/create initialize)
|
||||
(rx/pr-log "[debug]: shortcut:")
|
||||
(rx/map #(get shortcuts %))
|
||||
(rx/filter fn?)
|
||||
(rx/merge-map (fn [f] (f)))
|
||||
(rx/take-until stoper)))))))
|
||||
"shift+0" #(st/emit! zoom-to-50)
|
||||
"shift+1" #(st/emit! reset-zoom)
|
||||
"shift+2" #(st/emit! zoom-to-200)
|
||||
"ctrl+d" #(st/emit! duplicate-selected)
|
||||
"ctrl+z" #(st/emit! undo)
|
||||
"ctrl+shift+z" #(st/emit! redo)
|
||||
"ctrl+y" #(st/emit! redo)
|
||||
"ctrl+q" #(st/emit! reinitialize-undo)
|
||||
"ctrl+b" #(st/emit! (select-for-drawing :rect))
|
||||
"ctrl+e" #(st/emit! (select-for-drawing :circle))
|
||||
"ctrl+t" #(st/emit! (select-for-drawing :text))
|
||||
"ctrl+c" #(st/emit! copy-selected)
|
||||
"ctrl+v" #(st/emit! paste)
|
||||
"ctrl+g" #(st/emit! (create-group))
|
||||
;; "ctrl+shift+g" #(st/emit! remove-group)
|
||||
"esc" #(st/emit! :interrupt deselect-all)
|
||||
"delete" #(st/emit! delete-selected)
|
||||
"ctrl+up" #(st/emit! (vertical-order-selected :up))
|
||||
"ctrl+down" #(st/emit! (vertical-order-selected :down))
|
||||
"ctrl+shift+up" #(st/emit! (vertical-order-selected :top))
|
||||
"ctrl+shift+down" #(st/emit! (vertical-order-selected :bottom))
|
||||
"shift+up" #(st/emit! (move-selected :up true))
|
||||
"shift+down" #(st/emit! (move-selected :down true))
|
||||
"shift+right" #(st/emit! (move-selected :right true))
|
||||
"shift+left" #(st/emit! (move-selected :left true))
|
||||
"up" #(st/emit! (move-selected :up false))
|
||||
"down" #(st/emit! (move-selected :down false))
|
||||
"right" #(st/emit! (move-selected :right false))
|
||||
"left" #(st/emit! (move-selected :left false))})
|
||||
|
|
|
|||
|
|
@ -10,9 +10,12 @@
|
|||
(ns uxbox.main.ui.react-hooks
|
||||
"A collection of general purpose react hooks."
|
||||
(:require
|
||||
[cljs.spec.alpha :as s]
|
||||
[uxbox.common.spec :as us]
|
||||
[beicon.core :as rx]
|
||||
[goog.events :as events]
|
||||
[rumext.alpha :as mf])
|
||||
[rumext.alpha :as mf]
|
||||
["mousetrap" :as mousetrap])
|
||||
(:import goog.events.EventType))
|
||||
|
||||
(defn use-rxsub
|
||||
|
|
@ -24,3 +27,22 @@
|
|||
#(rx/cancel! sub)))
|
||||
#js [ob])
|
||||
state))
|
||||
|
||||
|
||||
(s/def ::shortcuts
|
||||
(s/map-of ::us/string fn?))
|
||||
|
||||
(defn use-shortcuts
|
||||
[shortcuts]
|
||||
(us/assert ::shortcuts shortcuts)
|
||||
(mf/use-effect
|
||||
(fn []
|
||||
(->> (seq shortcuts)
|
||||
(run! (fn [[key f]]
|
||||
(mousetrap/bind key (fn [event]
|
||||
(js/console.log "[debug]: shortcut:" key)
|
||||
(.preventDefault event)
|
||||
(f event))))))
|
||||
(fn [] (mousetrap/reset))))
|
||||
nil)
|
||||
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@
|
|||
[uxbox.main.streams :as ms]
|
||||
[uxbox.main.ui.confirm]
|
||||
[uxbox.main.ui.keyboard :as kbd]
|
||||
[uxbox.main.ui.react-hooks :as hooks]
|
||||
[uxbox.main.ui.messages :refer [messages-widget]]
|
||||
[uxbox.main.ui.workspace.viewport :refer [viewport]]
|
||||
[uxbox.main.ui.workspace.colorpalette :refer [colorpalette]]
|
||||
|
|
@ -111,11 +112,7 @@
|
|||
(st/emit! (dw/initialize-ws file-id))
|
||||
#(st/emit! (dw/finalize-ws file-id)))))
|
||||
|
||||
(-> (mf/deps file-id)
|
||||
(mf/use-effect
|
||||
(fn []
|
||||
(st/emit! dw/initialize-shortcuts)
|
||||
#(st/emit! ::dw/finalize-shortcuts))))
|
||||
(hooks/use-shortcuts dw/shortcuts)
|
||||
|
||||
(mf/use-effect #(st/emit! dw/initialize-layout))
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue