🎉 Allow orthogonal movement

CHANGES.md

@@ -10,6 +10,7 @@
 - Increment font size by 10 with shift+arrows [1047](https://github.com/penpot/penpot/issues/1047).
 - New shortcut to detach components Ctrl+Shift+K [Taiga #1799](https://tree.taiga.io/project/penpot/us/1799).
 - Set email inputs to type "email", to aid keyboard entry [Taiga #1921](https://tree.taiga.io/project/penpot/issue/1921).
+- Use shift+move to move element orthogonally [#823](https://github.com/penpot/penpot/issues/823).
 - Use space + mouse drag to pan, instead of only space [Taiga #1800](https://tree.taiga.io/project/penpot/us/1800).
 
 ### :bug: Bugs fixed

frontend/src/app/main/data/workspace/transforms.cljs

@@ -11,6 +11,7 @@
    [app.common.geom.matrix :as gmt]
    [app.common.geom.point :as gpt]
    [app.common.geom.shapes :as gsh]
+   [app.common.math :as mth]
    [app.common.pages :as cp]
    [app.common.spec :as us]
    [app.main.data.workspace.changes :as dch]
@@ -538,10 +539,18 @@
              layout  (get state :workspace-layout)
              zoom    (get-in state [:workspace-local :zoom] 1)
 
+             fix-axis (fn [[position shift?]]
+                        (let [delta (gpt/to-vec from-position position)]
+                          (if shift?
+                            (if (> (mth/abs (:x delta)) (mth/abs (:y delta)))
+                              (gpt/point (:x delta) 0)
+                              (gpt/point 0 (:y delta)))
+                            delta)))
 
              position (->> ms/mouse-position
                            (rx/take-until stopper)
-                           (rx/map #(gpt/to-vec from-position %)))
+                           (rx/with-latest-from ms/mouse-position-shift)
+                           (rx/map #(fix-axis %)))
 
              snap-delta (rx/concat
                          ;; We send the nil first so the stream is not waiting for the first value

frontend/src/app/main/ui/workspace/viewport/actions.cljs

@@ -85,8 +85,7 @@
                (not drawing-tool)
                (st/emit! (when (or shift? (not selected?))
                            (dw/select-shape id shift?))
-                         (when (not shift?)
+                         (dw/start-move-selected))))))))))
-                           (dw/start-move-selected)))))))))))
 
 (defn on-move-selected
   [hover hover-ids selected]