3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-10 02:41:39 +02:00
Code Issues Projects Releases Packages Wiki Activity

✨ Improve shape movement with keyboard.

Browse source 
Make fast movement align with grid.
This commit is contained in:
Andrey Antukh 2020-01-09 15:01:32 +01:00
parent 9af76ad86c
commit 2a7d516306
2 changed files with 40 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -708,57 +708,55 @@
(let [selected (get-in state [:workspace-local :selected])] (let [selected (get-in state [:workspace-local :selected])]
(rx/from (map #(apply update-shape % attrs) selected)))))) (rx/from (map #(apply update-shape % attrs) selected))))))
;; --- Move Selected ;; --- Shape Movement (using keyboard shorcuts)
(declare initial-selection-align) (declare initial-selection-align)
(declare apply-temporal-displacement-in-bulk) (declare apply-temporal-displacement-in-bulk)
(declare materialize-temporal-modifier-in-bulk) (declare materialize-temporal-modifier-in-bulk)
(defn- get-displacement-with-grid
"Retrieve the correct displacement delta point for the
provided direction speed and distances thresholds."
[shape direction options]
(let [grid-x (:grid-x options 10)
grid-y (:grid-y options 10)
x-mod (mod (:x shape) grid-x)
y-mod (mod (:y shape) grid-y)]
(case direction
:up (gpt/point 0 (- (if (zero? y-mod) grid-y y-mod)))
:down (gpt/point 0 (- grid-y y-mod))
:left (gpt/point (- (if (zero? x-mod) grid-x x-mod)) 0)
:right (gpt/point (- grid-x x-mod) 0))))
(defn- get-displacement (defn- get-displacement
"Retrieve the correct displacement delta point for the "Retrieve the correct displacement delta point for the
provided direction speed and distances thresholds." provided direction speed and distances thresholds."
[direction speed distance] [shape direction]
(case direction (case direction
:up (gpt/point 0 (- (get-in distance [speed :y]))) :up (gpt/point 0 (- 1))
:down (gpt/point 0 (get-in distance [speed :y])) :down (gpt/point 0 1)
:left (gpt/point (- (get-in distance [speed :x])) 0) :left (gpt/point (- 1) 0)
:right (gpt/point (get-in distance [speed :x]) 0))) :right (gpt/point 1 0)))
(defn- get-displacement-distance
"Retrieve displacement distances thresholds for
defined displacement speeds."
[metadata align?]
(let [gx (:grid-x-axis metadata)
gy (:grid-y-axis metadata)]
{:std (gpt/point (if align? gx 1)
(if align? gy 1))
:fast (gpt/point (if align? (* 3 gx) 10)
(if align? (* 3 gy) 10))}))
(s/def ::direction #{:up :down :right :left}) (s/def ::direction #{:up :down :right :left})
(s/def ::speed #{:std :fast})
;; Event used for apply displacement transformation
;; to the selected shapes throught the keyboard shortcuts.
(defn move-selected (defn move-selected
[direction speed] [direction align?]
(s/assert ::direction direction) (s/assert ::direction direction)
(s/assert ::speed speed) (s/assert boolean? align?)
(ptk/reify ::move-selected (ptk/reify ::move-selected
ptk/WatchEvent ptk/WatchEvent
(watch [_ state stream] (watch [_ state stream]
(let [{:keys [selected flags id]} (:workspace-local state) (let [selected (get-in state [:workspace-local :selected])
align? (refs/alignment-activated? flags) options (get-in state [:workspace-data :options])
metadata (merge c/page-metadata shapes (map #(get-in state [:workspace-data :shapes-by-id %]) selected)
(get-in state [:workspace-page :metadata])) shape (geom/shapes->rect-shape shapes)
distance (get-displacement-distance metadata align?) displacement (if align?
displacement (get-displacement direction speed distance)] (get-displacement-with-grid shape direction options)
(rx/concat (get-displacement shape direction))]
(when align? (rx/of (initial-selection-align selected))) (rx/of (apply-temporal-displacement-in-bulk selected displacement)
(rx/of (apply-temporal-displacement-in-bulk selected displacement)) (materialize-temporal-modifier-in-bulk selected))))))
(rx/of (materialize-temporal-modifier-in-bulk selected)))))))
;; --- Delete Selected ;; --- Delete Selected

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

@ -46,14 +46,14 @@
:ctrl+down #(st/emit! (dw/order-selected-shapes :down)) :ctrl+down #(st/emit! (dw/order-selected-shapes :down))
:ctrl+shift+up #(st/emit! (dw/order-selected-shapes :top)) :ctrl+shift+up #(st/emit! (dw/order-selected-shapes :top))
:ctrl+shift+down #(st/emit! (dw/order-selected-shapes :bottom)) :ctrl+shift+down #(st/emit! (dw/order-selected-shapes :bottom))
:shift+up #(st/emit! (dw/move-selected :up :fast)) :shift+up #(st/emit! (dw/move-selected :up true))
:shift+down #(st/emit! (dw/move-selected :down :fast)) :shift+down #(st/emit! (dw/move-selected :down true))
:shift+right #(st/emit! (dw/move-selected :right :fast)) :shift+right #(st/emit! (dw/move-selected :right true))
:shift+left #(st/emit! (dw/move-selected :left :fast)) :shift+left #(st/emit! (dw/move-selected :left true))
:up #(st/emit! (dw/move-selected :up :std)) :up #(st/emit! (dw/move-selected :up false))
:down #(st/emit! (dw/move-selected :down :std)) :down #(st/emit! (dw/move-selected :down false))
:right #(st/emit! (dw/move-selected :right :std)) :right #(st/emit! (dw/move-selected :right false))
:left #(st/emit! (dw/move-selected :left :std)) :left #(st/emit! (dw/move-selected :left false))
}) })
;; --- Shortcuts Setup Functions ;; --- Shortcuts Setup Functions