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

✨ Add alignement shortcuts

Browse source
This commit is contained in:
eva 2021-12-01 09:48:20 +01:00 • committed by Alonso Torres
parent 0feccc9d1c
commit d5568fcc25
16 changed files with 182 additions and 152 deletions
Download patch file Download diff file Expand all files Collapse all files

21
frontend/src/app/main/data/workspace.cljs
View file

@ -1123,6 +1123,13 @@
(declare align-object-to-frame)
(declare align-objects-list)
(defn can-align? [selected objects]
(cond
(empty? selected) false
(> (count selected) 1) true
:else
(not= uuid/zero (:frame-id (get objects (first selected))))))
(defn align-objects
[axis]
(us/verify ::gal/align-axis axis)
@ -1135,12 +1142,11 @@
moved (if (= 1 (count selected))
(align-object-to-frame objects (first selected) axis)
(align-objects-list objects selected axis))
moved-objects (->> moved (group-by :id))
ids (keys moved-objects)
update-fn (fn [shape] (first (get moved-objects (:id shape))))]
(rx/of (dch/update-shapes ids update-fn {:reg-objects? true}))))))
(when (can-align? selected objects)
(rx/of (dch/update-shapes ids update-fn {:reg-objects? true})))))))
(defn align-object-to-frame
[objects object-id axis]
@ -1154,6 +1160,12 @@
rect (gsh/selection-rect selected-objs)]
(mapcat #(gal/align-to-rect % rect axis objects) selected-objs)))
(defn can-distribute? [selected]
(cond
(empty? selected) false
(< (count selected) 2) false
:else true))
(defn distribute-objects
[axis]
(us/verify ::gal/dist-axis axis)
@ -1169,7 +1181,8 @@
moved-objects (->> moved (group-by :id))
ids (keys moved-objects)
update-fn (fn [shape] (first (get moved-objects (:id shape))))]
(rx/of (dch/update-shapes ids update-fn {:reg-objects? true}))))))
(when (can-distribute? selected)
(rx/of (dch/update-shapes ids update-fn {:reg-objects? true})))))))
;; --- Shape Proportions

54
frontend/src/app/main/data/workspace/shortcuts.cljs
View file

@ -233,7 +233,7 @@
:open-color-picker {:tooltip "I"
:command "i"
:fn #(st/emit! (mdc/picker-for-selected-shape ))}
:fn #(st/emit! (mdc/picker-for-selected-shape))}
:open-viewer {:tooltip "G V"
:command "g v"
@ -261,23 +261,53 @@
:type "keyup"
:fn #(st/emit! (dw/toggle-distances-display false))}
:boolean-union {:tooltip (ds/alt "U")
:command "alt+u"
:fn #(st/emit! (dw/create-bool :union))}
:boolean-union {:tooltip (ds/meta (ds/alt "U"))
:command (ds/c-mod "alt+u")
:fn #(st/emit! (dw/create-bool :union))}
:boolean-difference {:tooltip (ds/alt "D")
:command "alt+d"
:fn #(st/emit! (dw/create-bool :difference))}
:boolean-difference {:tooltip (ds/meta (ds/alt "D"))
:command (ds/c-mod "alt+d")
:fn #(st/emit! (dw/create-bool :difference))}
:boolean-intersection {:tooltip (ds/alt "I")
:command "alt+i"
:boolean-intersection {:tooltip (ds/meta (ds/alt "I"))
:command (ds/c-mod "alt+i")
:fn #(st/emit! (dw/create-bool :intersection))}
:boolean-exclude {:tooltip (ds/alt "E")
:command "alt+e"
:boolean-exclude {:tooltip (ds/meta (ds/alt "E"))
:command (ds/c-mod "alt+e")
:fn #(st/emit! (dw/create-bool :exclude))}
})
:align-left {:tooltip (ds/alt "A")
:command "alt+a"
:fn #(st/emit! (dw/align-objects :hleft))}
:align-right {:tooltip (ds/alt "D")
:command "alt+d"
:fn #(st/emit! (dw/align-objects :hright))}
:align-top {:tooltip (ds/alt "W")
:command "alt+w"
:fn #(st/emit! (dw/align-objects :vtop))}
:align-hcenter {:tooltip (ds/alt "H")
:command "alt+h"
:fn #(st/emit! (dw/align-objects :hcenter))}
:align-vcenter {:tooltip (ds/alt "V")
:command "alt+v"
:fn #(st/emit! (dw/align-objects :vcenter))}
:align-bottom {:tooltip (ds/alt "S")
:command "alt+s"
:fn #(st/emit! (dw/align-objects :vbottom))}
:h-distribute {:tooltip (ds/meta-shift (ds/alt "H"))
:command (ds/c-mod "shift+alt+h")
:fn #(st/emit! (dw/distribute-objects :horizontal))}
:v-distribute {:tooltip (ds/meta-shift (ds/alt "V"))
:command (ds/c-mod "shift+alt+v")
:fn #(st/emit! (dw/distribute-objects :vertical))}})
(defn get-tooltip [shortcut]
(assert (contains? shortcuts shortcut) (str shortcut))

53
frontend/src/app/main/ui/workspace/sidebar/options/menus/align.cljs
View file

@ -6,9 +6,9 @@
(ns app.main.ui.workspace.sidebar.options.menus.align
(:require
[app.common.uuid :as uuid]
[app.main.data.workspace :as dw]
[app.main.refs :as refs]
[app.main.data.workspace.shortcuts :as sc]
[app.main.store :as st]
[app.main.ui.icons :as i]
[app.util.i18n :as i18n :refer [tr]]
@ -21,71 +21,58 @@
;; don't need to watch objects, only read the value
objects (deref refs/workspace-page-objects)
disabled (cond
(empty? selected) true
(> (count selected) 1) false
:else
(= uuid/zero (:frame-id (get objects (first selected)))))
disabled (not (dw/can-align? selected objects))
disabled-distribute (cond
(empty? selected) true
(< (count selected) 2) true
:else false)
on-align-button-clicked
(fn [axis] (when-not disabled (st/emit! (dw/align-objects axis))))
on-distribute-button-clicked
(fn [axis] (when-not disabled-distribute (st/emit! (dw/distribute-objects axis))))]
disabled-distribute (not(dw/can-distribute? selected))]
[:div.align-options
[:div.align-group
[:div.align-button.tooltip.tooltip-bottom
{:alt (tr "workspace.align.hleft")
{:alt (tr "workspace.align.hleft" (sc/get-tooltip :align-left))
:class (when disabled "disabled")
:on-click #(on-align-button-clicked :hleft)}
:on-click #(st/emit! (dw/align-objects :hleft))}
i/shape-halign-left]
[:div.align-button.tooltip.tooltip-bottom
{:alt (tr "workspace.align.hcenter")
{:alt (tr "workspace.align.hcenter" (sc/get-tooltip :align-hcenter))
:class (when disabled "disabled")
:on-click #(on-align-button-clicked :hcenter)}
:on-click #(st/emit! (dw/align-objects :hcenter))}
i/shape-halign-center]
[:div.align-button.tooltip.tooltip-bottom
{:alt (tr "workspace.align.hright")
{:alt (tr "workspace.align.hright" (sc/get-tooltip :align-right))
:class (when disabled "disabled")
:on-click #(on-align-button-clicked :hright)}
:on-click #(st/emit! (dw/align-objects :hright))}
i/shape-halign-right]
[:div.align-button.tooltip.tooltip-bottom
{:alt (tr "workspace.align.hdistribute")
{:alt (tr "workspace.align.hdistribute" (sc/get-tooltip :h-distribute))
:class (when disabled-distribute "disabled")
:on-click #(on-distribute-button-clicked :horizontal)}
:on-click #(st/emit! (dw/distribute-objects :horizontal))}
i/shape-hdistribute]]
[:div.align-group
[:div.align-button.tooltip.tooltip-bottom
{:alt (tr "workspace.align.vtop")
[:div.align-button.tooltip.tooltip-bottom-left
{:alt (tr "workspace.align.vtop" (sc/get-tooltip :align-top))
:class (when disabled "disabled")
:on-click #(on-align-button-clicked :vtop)}
:on-click #(st/emit! (dw/align-objects :vtop))}
i/shape-valign-top]
[:div.align-button.tooltip.tooltip-bottom-left
{:alt (tr "workspace.align.vcenter")
{:alt (tr "workspace.align.vcenter" (sc/get-tooltip :align-vcenter))
:class (when disabled "disabled")
:on-click #(on-align-button-clicked :vcenter)}
:on-click #(st/emit! (dw/align-objects :vcenter))}
i/shape-valign-center]
[:div.align-button.tooltip.tooltip-bottom-left
{:alt (tr "workspace.align.vbottom")
{:alt (tr "workspace.align.vbottom" (sc/get-tooltip :align-bottom))
:class (when disabled "disabled")
:on-click #(on-align-button-clicked :vbottom)}
:on-click #(st/emit! (dw/align-objects :vbottom))}
i/shape-valign-bottom]
[:div.align-button.tooltip.tooltip-bottom-left
{:alt (tr "workspace.align.vdistribute")
{:alt (tr "workspace.align.vdistribute" (sc/get-tooltip :v-distribute))
:class (when disabled-distribute "disabled")
:on-click #(on-distribute-button-clicked :vertical)}
:on-click #(st/emit! (dw/distribute-objects :vertical))}
i/shape-vdistribute]]]))