Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-24 07:29:08 -05:00
Code Issues Activity

♻️ Reorganize and improve the shortcuts machinary.

Browse source
This commit is contained in:
Andrey Antukh 2020-03-23 15:28:53 +01:00
parent 1195777036
commit 7b23a2a2b4
4 changed files with 71 additions and 88 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

69
frontend/src/uxbox/main/data/workspace.cljs
View file

@ -11,6 +11,8 @@
(:require
[clojure.set :as set]
[beicon.core :as rx]
[goog.object :as gobj]
[goog.events :as events]
[cljs.spec.alpha :as s]
[potok.core :as ptk]
[uxbox.common.data :as d]
@ -36,7 +38,11 @@
[uxbox.util.time :as dt]
[uxbox.util.transit :as t]
[uxbox.util.uuid :as uuid]
[vendor.randomcolor]))
[uxbox.util.webapi :as wapi]
[vendor.randomcolor])
(:import goog.events.EventType
goog.events.KeyCodes
goog.ui.KeyboardShortcutHandler))
;; TODO: temporal workaround
(def clear-ruler nil)
@ -1097,7 +1103,6 @@
(rx/empty))))))
;; --- Toggle shape's selection status (selected or deselected)
(defn select-shape
@ -1999,3 +2004,63 @@
pages (vec (concat before [id] after))]
(assoc-in state [:projects (:project-id page) :pages] pages)))))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; Shortcuts
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
(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))
"ctrl+0" #(rx/of (reset-zoom))
"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)
"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))})
(def initialize-shortcuts
(letfn [(initialize [sink]
(let [handler (KeyboardShortcutHandler. js/document)]
;; 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)))))))

1
frontend/src/uxbox/main/ui/shapes/frame.cljs
View file

@ -133,7 +133,6 @@
translate #(translate-to-frame % ds-modifier (gpt/point (- x) (- y)))
]
[:svg {:x x :y y :width width :height height}
[:& "rect" props]
(for [item (reverse childs)]

8
frontend/src/uxbox/main/ui/workspace.cljs
View file

@ -26,7 +26,6 @@
[uxbox.main.ui.workspace.header :refer [header]]
[uxbox.main.ui.workspace.rules :refer [horizontal-rule vertical-rule]]
[uxbox.main.ui.workspace.scroll :as scroll]
[uxbox.main.ui.workspace.shortcuts :as shortcuts]
[uxbox.main.ui.workspace.sidebar :refer [left-sidebar right-sidebar]]
[uxbox.main.ui.workspace.sidebar.history :refer [history-dialog]]
[uxbox.main.ui.workspace.left-toolbar :refer [left-toolbar]]
@ -119,10 +118,11 @@
{:fn #(st/emit! dw/initialize-layout)})
(mf/use-effect
{:deps (mf/deps file-id page-id)
{:deps (mf/deps file-id)
:fn (fn []
(let [sub (shortcuts/init)]
#(rx/cancel! sub)))})
(st/emit! dw/initialize-shortcuts)
#(st/emit! ::dw/finalize-shortcuts))})
(let [file (mf/deref refs/workspace-file)
page (mf/deref refs/workspace-page)
layout (mf/deref refs/workspace-layout)]

81
frontend/src/uxbox/main/ui/workspace/shortcuts.cljs
View file

@ -1,81 +0,0 @@
;; This Source Code Form is subject to the terms of the Mozilla Public
;; License, v. 2.0. If a copy of the MPL was not distributed with this
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
;;
;; Copyright (c) 2015-2016 Andrey Antukh <niwi@niwi.nz>
;; Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
(ns uxbox.main.ui.workspace.shortcuts
(:require [goog.events :as events]
[beicon.core :as rx]
[potok.core :as ptk]
[uxbox.main.store :as st]
[uxbox.main.data.lightbox :as dl]
[uxbox.main.data.workspace :as dw])
(:import goog.events.EventType
goog.events.KeyCodes
goog.ui.KeyboardShortcutHandler))
(declare move-selected)
;; --- Shortcuts
(defonce +shortcuts+
{
;; :shift+g #(st/emit! (dw/toggle-flag :grid))
:ctrl+shift+m #(st/emit! (dw/toggle-layout-flag :sitemap))
:ctrl+shift+f #(st/emit! (dw/toggle-layout-flag :drawtools))
:ctrl+shift+i #(st/emit! (dw/toggle-layout-flag :icons))
:ctrl+shift+l #(st/emit! (dw/toggle-layout-flag :layers))
:ctrl+0 #(st/emit! (dw/reset-zoom))
;; :ctrl+r #(st/emit! (dw/toggle-flag :ruler))
:ctrl+d #(st/emit! dw/duplicate-selected)
:ctrl+z #(st/emit! dw/undo)
:ctrl+shift+z #(st/emit! dw/redo)
:ctrl+y #(st/emit! dw/redo)
:ctrl+q #(st/emit! dw/reinitialize-undo)
:ctrl+b #(st/emit! (dw/select-for-drawing :rect))
:ctrl+e #(st/emit! (dw/select-for-drawing :circle))
:ctrl+t #(st/emit! (dw/select-for-drawing :text))
:esc #(st/emit! :interrupt dw/deselect-all)
:delete #(st/emit! dw/delete-selected)
:ctrl+up #(st/emit! (dw/vertical-order-selected :up))
:ctrl+down #(st/emit! (dw/vertical-order-selected :down))
:ctrl+shift+up #(st/emit! (dw/vertical-order-selected :top))
:ctrl+shift+down #(st/emit! (dw/vertical-order-selected :bottom))
:shift+up #(st/emit! (dw/move-selected :up true))
:shift+down #(st/emit! (dw/move-selected :down true))
:shift+right #(st/emit! (dw/move-selected :right true))
:shift+left #(st/emit! (dw/move-selected :left true))
:up #(st/emit! (dw/move-selected :up false))
:down #(st/emit! (dw/move-selected :down false))
:right #(st/emit! (dw/move-selected :right false))
:left #(st/emit! (dw/move-selected :left false))
})
;; --- Shortcuts Setup Functions
(defn- watch-shortcuts
[sink]
(let [handler (KeyboardShortcutHandler. js/document)]
;; Register shortcuts.
(doseq [item (keys +shortcuts+)]
(let [identifier (name item)]
(.registerShortcut handler identifier identifier)))
;; Initialize shortcut listener.
(let [event KeyboardShortcutHandler.EventType.SHORTCUT_TRIGGERED
callback #(sink (keyword (.-identifier %)))
key (events/listen handler event callback)]
(fn []
(events/unlistenByKey key)
(.clearKeyListener handler)))))
(defn init
[]
(let [stream (->> (rx/create watch-shortcuts)
(rx/pr-log "[debug]: shortcut:"))]
(rx/on-value stream (fn [event]
(when-let [handler (get +shortcuts+ event)]
(handler))))))