github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-04-30 13:49:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

✨ Display continously the distances between layers

Browse Source 
When a user moves a layer with the keyboard.
This commit is contained in:
Andres Gonzalez 2025-07-24 17:46:21 +02:00 committed by Andrey Antukh
parent 3f657a0c04
commit 6049d97ed9
3 changed files with 32 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
CHANGES.md
View File

@ -10,6 +10,8 @@
### :sparkles: New features & Enhancements
- Continuous display of distances between elements when moving a layer with the keyboard [Taiga #1780](https://tree.taiga.io/project/penpot/issue/1780)
### :bug: Bugs fixed
- Display strokes information in inspect tab [Taiga #11154](https://tree.taiga.io/project/penpot/issue/11154)

16
frontend/src/app/main/data/workspace/shortcuts.cljs
View File

@ -213,42 +213,42 @@
:fn #(emit-when-no-readonly (dw/vertical-order-selected :bottom))}
:move-fast-up {:tooltip (ds/shift ds/up-arrow)
:command "shift+up"
:command ["shift+up" "shift+alt+up" "alt+shift+up"]
:subsections [:modify-layers]
:fn #(emit-when-no-readonly (dwt/move-selected :up true))}
:move-fast-down {:tooltip (ds/shift ds/down-arrow)
:command "shift+down"
:command ["shift+down" "shift+alt+down" "alt+shift+down"]
:subsections [:modify-layers]
:fn #(emit-when-no-readonly (dwt/move-selected :down true))}
:move-fast-right {:tooltip (ds/shift ds/right-arrow)
:command "shift+right"
:command ["shift+right" "shift+alt+right" "alt+shift+right"]
:subsections [:modify-layers]
:fn #(emit-when-no-readonly (dwt/move-selected :right true))}
:move-fast-left {:tooltip (ds/shift ds/left-arrow)
:command "shift+left"
:command ["shift+left" "shift+alt+left" "alt+shift+left"]
:subsections [:modify-layers]
:fn #(emit-when-no-readonly (dwt/move-selected :left true))}
:move-unit-up {:tooltip ds/up-arrow
:command "up"
:command ["up" "alt+up"]
:subsections [:modify-layers]
:fn #(emit-when-no-readonly (dwt/move-selected :up false))}
:move-unit-down {:tooltip ds/down-arrow
:command "down"
:command ["down" "alt+down"]
:subsections [:modify-layers]
:fn #(emit-when-no-readonly (dwt/move-selected :down false))}
:move-unit-left {:tooltip ds/right-arrow
:command "right"
:command ["right" "alt+right"]
:subsections [:modify-layers]
:fn #(emit-when-no-readonly (dwt/move-selected :right false))}
:move-unit-right {:tooltip ds/left-arrow
:command "left"
:command ["left" "alt+left"]
:subsections [:modify-layers]
:fn #(emit-when-no-readonly (dwt/move-selected :left false))}

24
frontend/src/app/main/ui/workspace/viewport.cljs
View File

@ -378,7 +378,7 @@
(when (dbg/enabled? :show-export-metadata)
[:& use/export-page {:page page}])
;; We need a "real" background shape so layer transforms work properly in firefox
;; We need a "real" background shape so layer transforms work properly in firefox
[:rect {:width (:width vbox 0)
:height (:height vbox 0)
:x (:x vbox 0)
@ -387,7 +387,7 @@
[:& (mf/provider ctx/current-vbox) {:value vbox'}
[:& (mf/provider use/include-metadata-ctx) {:value (dbg/enabled? :show-export-metadata)}
;; Render root shape
;; Render root shape
[:& shapes/root-shape {:key page-id
:objects base-objects
:active-frames @active-frames}]]]]
@ -487,6 +487,26 @@
:hover-shape @measure-hover
:zoom zoom}])
;; Show distances during movement with ALT
(when (and (= transform :move) @alt? (seq selected-shapes))
[:& msr/measurement
{:bounds vbox
:selected-shapes selected-shapes
:frame selected-frame
:hover-shape @hover
:zoom zoom}])
;; Reactive subscription to duplication relation (safe)
(let [state-var (mf/use-var (resolve 'app.main.store/state))
duplicated-info (get-in @(deref state-var) [:workspace-local :duplicated])]
(when (and (= transform :move) @alt? duplicated-info)
[:g.duplicated-distance
[:& msr/distance-display
{:from (get duplicated-info :selrect-original)
:to (get duplicated-info :selrect-duplicated)
:zoom zoom
:bounds vbox}]]))
(when show-padding?
[:& mfc/padding-control
{:frame first-shape