From 6049d97ed9aeccc4a05a1204de969144b44c79a4 Mon Sep 17 00:00:00 2001
From: Andres Gonzalez <andres.gonzalez79@gmail.com>
Date: Thu, 24 Jul 2025 17:46:21 +0200
Subject: [PATCH] :sparkles: Display continously the distances between layers

When a user moves a layer with the keyboard.
---
 CHANGES.md                                    |  2 ++
 .../app/main/data/workspace/shortcuts.cljs    | 16 ++++++-------
 .../src/app/main/ui/workspace/viewport.cljs   | 24 +++++++++++++++++--
 3 files changed, 32 insertions(+), 10 deletions(-)

diff --git a/CHANGES.md b/CHANGES.md
index efcba90dec..3aa38d215c 100644
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -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)
 
diff --git a/frontend/src/app/main/data/workspace/shortcuts.cljs b/frontend/src/app/main/data/workspace/shortcuts.cljs
index e1535516bf..5320652c0c 100644
--- a/frontend/src/app/main/data/workspace/shortcuts.cljs
+++ b/frontend/src/app/main/data/workspace/shortcuts.cljs
@@ -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))}
 
diff --git a/frontend/src/app/main/ui/workspace/viewport.cljs b/frontend/src/app/main/ui/workspace/viewport.cljs
index e496500259..f602191ac0 100644
--- a/frontend/src/app/main/ui/workspace/viewport.cljs
+++ b/frontend/src/app/main/ui/workspace/viewport.cljs
@@ -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