mirror of
https://github.com/penpot/penpot.git
synced 2025-05-12 14:56:38 +02:00
✨ Pixel precision on modifiers
This commit is contained in:
parent
9332d6f36c
commit
e5206e65e7
15 changed files with 398 additions and 246 deletions
|
@ -128,6 +128,7 @@
|
|||
(dm/export gtr/merge-modifiers)
|
||||
(dm/export gtr/transform-shape)
|
||||
(dm/export gtr/transform-selrect)
|
||||
(dm/export gtr/transform-bounds)
|
||||
(dm/export gtr/modifiers->transform)
|
||||
(dm/export gtr/empty-modifiers?)
|
||||
|
||||
|
|
|
@ -41,7 +41,7 @@
|
|||
(transform-points points nil matrix))
|
||||
|
||||
([points center matrix]
|
||||
(if (and (d/not-empty? points) (some? matrix))
|
||||
(if (and (d/not-empty? points) (gmt/matrix? matrix))
|
||||
(let [prev (if center (gmt/translate-matrix center) (gmt/matrix))
|
||||
post (if center (gmt/translate-matrix (gpt/negate center)) (gmt/matrix))
|
||||
|
||||
|
|
|
@ -171,12 +171,13 @@
|
|||
(defn transform-point-center
|
||||
"Transform a point around the shape center"
|
||||
[point center matrix]
|
||||
(when point
|
||||
(if (and (some? point) (some? matrix) (some? center))
|
||||
(gpt/transform
|
||||
point
|
||||
(gmt/multiply (gmt/translate-matrix center)
|
||||
matrix
|
||||
(gmt/translate-matrix (gpt/negate center))))))
|
||||
(gmt/translate-matrix (gpt/negate center))))
|
||||
point))
|
||||
|
||||
(defn transform-rect
|
||||
"Transform a rectangles and changes its attributes"
|
||||
|
@ -465,24 +466,28 @@
|
|||
(normalize-scale (:y resize-v2))))
|
||||
|
||||
|
||||
resize-transform (:resize-transform modifiers (gmt/matrix))
|
||||
resize-transform-inverse (:resize-transform-inverse modifiers (gmt/matrix))
|
||||
resize-transform (:resize-transform modifiers)
|
||||
resize-transform-inverse (:resize-transform-inverse modifiers)
|
||||
|
||||
rt-modif (:rotation modifiers)]
|
||||
|
||||
(cond-> (gmt/matrix)
|
||||
(some? resize-1)
|
||||
(-> (gmt/translate origin-1)
|
||||
(gmt/multiply resize-transform)
|
||||
(cond-> (some? resize-transform)
|
||||
(gmt/multiply resize-transform))
|
||||
(gmt/scale resize-1)
|
||||
(gmt/multiply resize-transform-inverse)
|
||||
(cond-> (some? resize-transform-inverse)
|
||||
(gmt/multiply resize-transform-inverse))
|
||||
(gmt/translate (gpt/negate origin-1)))
|
||||
|
||||
(some? resize-2)
|
||||
(-> (gmt/translate origin-2)
|
||||
(gmt/multiply resize-transform)
|
||||
(cond-> (some? resize-transform)
|
||||
(gmt/multiply resize-transform))
|
||||
(gmt/scale resize-2)
|
||||
(gmt/multiply resize-transform-inverse)
|
||||
(cond-> (some? resize-transform-inverse)
|
||||
(gmt/multiply resize-transform-inverse))
|
||||
(gmt/translate (gpt/negate origin-2)))
|
||||
|
||||
(some? displacement)
|
||||
|
@ -562,8 +567,8 @@
|
|||
:always
|
||||
(dissoc :modifiers))))))
|
||||
|
||||
(defn transform-selrect
|
||||
[selrect {:keys [displacement resize-transform-inverse resize-vector resize-origin resize-vector-2 resize-origin-2]}]
|
||||
(defn transform-bounds
|
||||
[points center {:keys [displacement resize-transform-inverse resize-vector resize-origin resize-vector-2 resize-origin-2]}]
|
||||
;; FIXME: Improve Performance
|
||||
(let [resize-transform-inverse (or resize-transform-inverse (gmt/matrix))
|
||||
|
||||
|
@ -573,19 +578,16 @@
|
|||
|
||||
resize-origin
|
||||
(when (some? resize-origin)
|
||||
(transform-point-center resize-origin (gco/center-selrect selrect) resize-transform-inverse))
|
||||
(transform-point-center resize-origin center resize-transform-inverse))
|
||||
|
||||
resize-origin-2
|
||||
(when (some? resize-origin-2)
|
||||
(transform-point-center resize-origin-2 (gco/center-selrect selrect) resize-transform-inverse))]
|
||||
(transform-point-center resize-origin-2 center resize-transform-inverse))]
|
||||
|
||||
(if (and (nil? displacement) (nil? resize-origin) (nil? resize-origin-2))
|
||||
selrect
|
||||
|
||||
(cond-> selrect
|
||||
:always
|
||||
(gpr/rect->points)
|
||||
points
|
||||
|
||||
(cond-> points
|
||||
(some? displacement)
|
||||
(gco/transform-points displacement)
|
||||
|
||||
|
@ -593,11 +595,15 @@
|
|||
(gco/transform-points resize-origin (gmt/scale-matrix resize-vector))
|
||||
|
||||
(some? resize-origin-2)
|
||||
(gco/transform-points resize-origin-2 (gmt/scale-matrix resize-vector-2))
|
||||
|
||||
:always
|
||||
(gpr/points->selrect)))))
|
||||
(gco/transform-points resize-origin-2 (gmt/scale-matrix resize-vector-2))))))
|
||||
|
||||
(defn transform-selrect
|
||||
[selrect modifiers]
|
||||
(let [center (gco/center-selrect selrect)]
|
||||
(-> selrect
|
||||
(gpr/rect->points)
|
||||
(transform-bounds center modifiers)
|
||||
(gpr/points->selrect))))
|
||||
|
||||
(defn selection-rect
|
||||
"Returns a rect that contains all the shapes and is aware of the
|
||||
|
|
|
@ -106,6 +106,11 @@
|
|||
#?(:cljs (js/Math.round v)
|
||||
:clj (Math/round (float v))))
|
||||
|
||||
(defn half-round
|
||||
"Returns a value rounded to the next point or half point"
|
||||
[v]
|
||||
(/ (round (* v 2)) 2))
|
||||
|
||||
(defn ceil
|
||||
"Returns the smallest integer greater than
|
||||
or equal to a given number."
|
||||
|
|
|
@ -54,11 +54,14 @@
|
|||
(watch [_ state stream]
|
||||
(let [stoper? #(or (ms/mouse-up? %) (= % :interrupt))
|
||||
stoper (rx/filter stoper? stream)
|
||||
initial @ms/mouse-position
|
||||
layout (get state :workspace-layout)
|
||||
snap-pixel? (contains? layout :snap-pixel-grid)
|
||||
|
||||
initial (cond-> @ms/mouse-position
|
||||
snap-pixel? gpt/round)
|
||||
|
||||
page-id (:current-page-id state)
|
||||
objects (wsh/lookup-page-objects state page-id)
|
||||
layout (get state :workspace-layout)
|
||||
focus (:workspace-focus-selected state)
|
||||
zoom (get-in state [:workspace-local :zoom] 1)
|
||||
|
||||
|
@ -95,7 +98,7 @@
|
|||
(rx/map #(conj current %)))))
|
||||
(rx/map
|
||||
(fn [[_ shift? point]]
|
||||
#(update-drawing % point shift?)))
|
||||
#(update-drawing % (cond-> point snap-pixel? gpt/round) shift?)))
|
||||
|
||||
(rx/take-until stoper))
|
||||
(rx/of common/handle-finish-drawing))))))
|
||||
|
|
|
@ -27,7 +27,9 @@
|
|||
:scale-text
|
||||
:dynamic-alignment
|
||||
:display-artboard-names
|
||||
:snap-guides})
|
||||
:snap-guides
|
||||
:show-pixel-grid
|
||||
:snap-pixel-grid})
|
||||
|
||||
(def presets
|
||||
{:assets
|
||||
|
@ -53,7 +55,9 @@
|
|||
:snap-grid
|
||||
:dynamic-alignment
|
||||
:display-artboard-names
|
||||
:snap-guides})
|
||||
:snap-guides
|
||||
:show-pixel-grid
|
||||
:snap-pixel-grid})
|
||||
|
||||
(def default-global
|
||||
{:options-mode :design})
|
||||
|
|
|
@ -354,7 +354,7 @@
|
|||
:command (ds/c-mod "alt+l")
|
||||
:fn #(st/emit! (dw/toggle-proportion-lock))}
|
||||
|
||||
:create-artboard-from-selection {:tooltip (ds/meta (ds/alt "G"))
|
||||
:artboard-selection {:tooltip (ds/meta (ds/alt "G"))
|
||||
:command (ds/c-mod "alt+g")
|
||||
:fn #(st/emit! (dw/create-artboard-from-selection))}
|
||||
|
||||
|
@ -368,8 +368,16 @@
|
|||
|
||||
:thumbnail-set {:tooltip (ds/shift "T")
|
||||
:command "shift+t"
|
||||
:fn #(st/emit! (dw/toggle-file-thumbnail-selected))}})
|
||||
:fn #(st/emit! (dw/toggle-file-thumbnail-selected))}
|
||||
|
||||
:show-pixel-grid {:tooltip (ds/shift ",")
|
||||
:command "shift+,"
|
||||
:fn #(st/emit! (toggle-layout-flag :show-pixel-grid))}
|
||||
|
||||
:snap-pixel-grid {:command ","
|
||||
:tooltip ","
|
||||
:fn #(st/emit! (toggle-layout-flag :snap-pixel-grid))}
|
||||
})
|
||||
|
||||
(def opacity-shortcuts
|
||||
(into {} (->>
|
||||
|
|
|
@ -114,8 +114,12 @@
|
|||
(declare get-ignore-tree)
|
||||
|
||||
(defn- set-modifiers
|
||||
([ids] (set-modifiers ids nil false))
|
||||
([ids modifiers] (set-modifiers ids modifiers false))
|
||||
([ids]
|
||||
(set-modifiers ids nil false))
|
||||
|
||||
([ids modifiers]
|
||||
(set-modifiers ids modifiers false))
|
||||
|
||||
([ids modifiers ignore-constraints]
|
||||
(us/verify (s/coll-of uuid?) ids)
|
||||
(ptk/reify ::set-modifiers
|
||||
|
@ -125,12 +129,14 @@
|
|||
page-id (:current-page-id state)
|
||||
objects (wsh/lookup-page-objects state page-id)
|
||||
ids (into #{} (remove #(get-in objects [% :blocked] false)) ids)
|
||||
layout (get state :workspace-layout)
|
||||
snap-pixel? (contains? layout :snap-pixel-grid)
|
||||
|
||||
setup-modifiers
|
||||
(fn [state id]
|
||||
(let [shape (get objects id)]
|
||||
(update state :workspace-modifiers
|
||||
#(set-modifiers-recursive % objects shape modifiers ignore-constraints))))]
|
||||
#(set-modifiers-recursive % objects shape modifiers ignore-constraints snap-pixel?))))]
|
||||
|
||||
(reduce setup-modifiers state ids))))))
|
||||
|
||||
|
@ -235,9 +241,77 @@
|
|||
|
||||
[root transformed-root ignore-geometry?]))
|
||||
|
||||
(defn set-pixel-precision
|
||||
"Adjust modifiers so they adjust to the pixel grid"
|
||||
[modifiers shape]
|
||||
|
||||
(if (or (some? (:resize-transform modifiers))
|
||||
(some? (:resize-transform-2 modifiers)))
|
||||
;; If we're working with a rotation we don't handle pixel precision because
|
||||
;; the transformation won't have the precision anyway
|
||||
modifiers
|
||||
|
||||
(let [center (gsh/center-shape shape)
|
||||
base-bounds (-> (:points shape) (gsh/points->rect))
|
||||
|
||||
raw-bounds
|
||||
(-> (gsh/transform-bounds (:points shape) center modifiers)
|
||||
(gsh/points->rect))
|
||||
|
||||
target-p (gpt/round (gpt/point raw-bounds))
|
||||
|
||||
ratio-width (/ (mth/round (:width raw-bounds)) (:width raw-bounds))
|
||||
ratio-height (/ (mth/round (:height raw-bounds)) (:height raw-bounds))
|
||||
|
||||
modifiers
|
||||
(-> modifiers
|
||||
(d/without-nils)
|
||||
(d/update-in-when
|
||||
[:resize-vector :x] #(* % ratio-width))
|
||||
|
||||
;; If the resize-vector-2 modifier arrives means the resize-vector
|
||||
;; will only resize on the x axis
|
||||
(cond-> (nil? (:resize-vector-2 modifiers))
|
||||
(d/update-in-when
|
||||
[:resize-vector :y] #(* % ratio-height)))
|
||||
|
||||
(d/update-in-when
|
||||
[:resize-vector-2 :y] #(* % ratio-height)))
|
||||
|
||||
origin (get modifiers :resize-origin)
|
||||
origin-2 (get modifiers :resize-origin-2)
|
||||
|
||||
resize-v (get modifiers :resize-vector)
|
||||
resize-v-2 (get modifiers :resize-vector-2)
|
||||
displacement (get modifiers :displacement)
|
||||
|
||||
target-p-inv
|
||||
(-> target-p
|
||||
(gpt/transform
|
||||
(cond-> (gmt/matrix)
|
||||
(some? displacement)
|
||||
(gmt/multiply (gmt/inverse displacement))
|
||||
|
||||
(and (some? resize-v) (some? origin))
|
||||
(gmt/scale (gpt/inverse resize-v) origin)
|
||||
|
||||
(and (some? resize-v-2) (some? origin-2))
|
||||
(gmt/scale (gpt/inverse resize-v-2) origin-2))))
|
||||
|
||||
delta-v (gpt/subtract target-p-inv (gpt/point base-bounds))
|
||||
|
||||
modifiers
|
||||
(-> modifiers
|
||||
(d/update-when :displacement #(gmt/multiply (gmt/translate-matrix delta-v) %))
|
||||
(cond-> (nil? (:displacement modifiers))
|
||||
(assoc :displacement (gmt/translate-matrix delta-v))))]
|
||||
modifiers)))
|
||||
|
||||
(defn- set-modifiers-recursive
|
||||
[modif-tree objects shape modifiers ignore-constraints]
|
||||
[modif-tree objects shape modifiers ignore-constraints snap-pixel?]
|
||||
|
||||
(let [children (map (d/getf objects) (:shapes shape))
|
||||
modifiers (cond-> modifiers snap-pixel? (set-pixel-precision shape))
|
||||
transformed-rect (gsh/transform-selrect (:selrect shape) modifiers)
|
||||
|
||||
set-child
|
||||
|
@ -245,7 +319,7 @@
|
|||
(let [child-modifiers (gsh/calc-child-modifiers shape child modifiers ignore-constraints transformed-rect)]
|
||||
(cond-> modif-tree
|
||||
(not (gsh/empty-modifiers? child-modifiers))
|
||||
(set-modifiers-recursive objects child child-modifiers ignore-constraints))))
|
||||
(set-modifiers-recursive objects child child-modifiers ignore-constraints snap-pixel?))))
|
||||
|
||||
modif-tree
|
||||
(-> modif-tree
|
||||
|
@ -283,7 +357,6 @@
|
|||
(dissoc :workspace-modifiers)
|
||||
(update :workspace-local dissoc :current-move-selected)))))
|
||||
|
||||
|
||||
;; -- Resize --------------------------------------------------------
|
||||
|
||||
(defn start-resize
|
||||
|
@ -294,8 +367,8 @@
|
|||
{:keys [rotation]} shape
|
||||
|
||||
shape-center (gsh/center-shape shape)
|
||||
shape-transform (:transform shape (gmt/matrix))
|
||||
shape-transform-inverse (:transform-inverse shape (gmt/matrix))
|
||||
shape-transform (:transform shape)
|
||||
shape-transform-inverse (:transform-inverse shape)
|
||||
|
||||
rotation (or rotation 0)
|
||||
|
||||
|
@ -411,13 +484,15 @@
|
|||
ptk/UpdateEvent
|
||||
(update [_ state]
|
||||
(let [page-id (:current-page-id state)
|
||||
objects (get-in state [:workspace-data :pages-index page-id :objects])]
|
||||
objects (get-in state [:workspace-data :pages-index page-id :objects])
|
||||
layout (get state :workspace-layout)
|
||||
snap-pixel? (contains? layout :snap-pixel-grid)]
|
||||
|
||||
(reduce (fn [state id]
|
||||
(let [shape (get objects id)
|
||||
modifiers (gsh/resize-modifiers shape attr value)]
|
||||
(update state :workspace-modifiers
|
||||
#(set-modifiers-recursive % objects shape modifiers false))))
|
||||
#(set-modifiers-recursive % objects shape modifiers false snap-pixel?))))
|
||||
state
|
||||
ids)))
|
||||
|
||||
|
|
|
@ -141,6 +141,9 @@
|
|||
(def workspace-layout
|
||||
(l/derived :workspace-layout st/state))
|
||||
|
||||
(def snap-pixel?
|
||||
(l/derived #(contains? % :snap-pixel-grid) workspace-layout))
|
||||
|
||||
(def workspace-file
|
||||
"A ref to a striped vision of file (without data)."
|
||||
(l/derived (fn [state]
|
||||
|
|
|
@ -225,7 +225,7 @@
|
|||
(when (not has-frame?)
|
||||
[:*
|
||||
[:& menu-entry {:title (tr "workspace.shape.menu.create-artboard-from-selection")
|
||||
:shortcut (sc/get-tooltip :create-artboard-from-selection)
|
||||
:shortcut (sc/get-tooltip :artboard-selection)
|
||||
:on-click do-create-artboard-from-selection}]
|
||||
[:& menu-separator]])]))
|
||||
|
||||
|
|
|
@ -376,6 +376,20 @@
|
|||
(tr "workspace.header.menu.enable-dynamic-alignment"))]
|
||||
[:span.shortcut (sc/get-tooltip :toggle-alignment)]]
|
||||
|
||||
[:li {:on-click #(st/emit! (toggle-flag :show-pixel-grid))}
|
||||
[:span
|
||||
(if (contains? layout :show-pixel-grid)
|
||||
(tr "workspace.header.menu.hide-pixel-grid")
|
||||
(tr "workspace.header.menu.show-pixel-grid"))]
|
||||
[:span.shortcut (sc/get-tooltip :show-pixel-grid)]]
|
||||
|
||||
[:li {:on-click #(st/emit! (toggle-flag :snap-pixel-grid))}
|
||||
[:span
|
||||
(if (contains? layout :snap-pixel-grid)
|
||||
(tr "workspace.header.menu.disable-snap-pixel-grid")
|
||||
(tr "workspace.header.menu.enable-snap-pixel-grid"))]
|
||||
[:span.shortcut (sc/get-tooltip :snap-pixel-grid)]]
|
||||
|
||||
[:li {:on-click #(st/emit! (modal/show {:type :nudge-option}))}
|
||||
[:span (tr "modals.nudge-title")]]]]]))
|
||||
|
||||
|
|
|
@ -9,12 +9,14 @@
|
|||
[app.common.colors :as colors]
|
||||
[app.common.geom.point :as gpt]
|
||||
[app.common.geom.shapes :as gsh]
|
||||
[app.common.math :as mth]
|
||||
[app.common.uuid :as uuid]
|
||||
[app.main.data.workspace :as dw]
|
||||
[app.main.refs :as refs]
|
||||
[app.main.store :as st]
|
||||
[app.main.streams :as ms]
|
||||
[app.main.ui.cursors :as cur]
|
||||
[app.main.ui.formats :as fmt]
|
||||
[app.main.ui.workspace.viewport.rules :as rules]
|
||||
[app.util.dom :as dom]
|
||||
[rumext.alpha :as mf]))
|
||||
|
@ -48,6 +50,8 @@
|
|||
frame-ref (mf/use-memo (mf/deps frame-id) #(refs/object-by-id frame-id))
|
||||
frame (mf/deref frame-ref)
|
||||
|
||||
snap-pixel? (mf/deref refs/snap-pixel?)
|
||||
|
||||
on-pointer-enter
|
||||
(mf/use-callback
|
||||
(fn []
|
||||
|
@ -88,7 +92,7 @@
|
|||
|
||||
on-mouse-move
|
||||
(mf/use-callback
|
||||
(mf/deps position zoom)
|
||||
(mf/deps position zoom snap-pixel?)
|
||||
(fn [event]
|
||||
|
||||
(when-let [_ (mf/ref-val dragging-ref)]
|
||||
|
@ -100,7 +104,10 @@
|
|||
(+ position delta)
|
||||
(+ start-pos delta))
|
||||
|
||||
;; TODO: Change when pixel-grid flag exists
|
||||
new-position (if snap-pixel?
|
||||
(mth/round new-position)
|
||||
new-position)
|
||||
|
||||
new-frame-id (:id (get-hover-frame))]
|
||||
(swap! state assoc
|
||||
:new-position new-position
|
||||
|
@ -364,7 +371,7 @@
|
|||
:style {:font-size (/ rules/font-size zoom)
|
||||
:font-family rules/font-family
|
||||
:fill colors/black}}
|
||||
(str pos)]]))])))
|
||||
(fmt/format-number pos)]]))])))
|
||||
|
||||
(mf/defc new-guide-area
|
||||
[{:keys [vbox zoom axis get-hover-frame disabled-guides?]}]
|
||||
|
|
|
@ -45,6 +45,7 @@
|
|||
(def pill-text-font-size 12)
|
||||
(def pill-text-height 20)
|
||||
(def pill-text-border-radius 4)
|
||||
(def pill-text-padding 4)
|
||||
|
||||
(mf/defc shape-distance-segment
|
||||
"Displays a segment between two selrects with the distance between them"
|
||||
|
@ -55,12 +56,13 @@
|
|||
(get sr2 (if (= :x coord) :x1 :y1)))
|
||||
|
||||
distance (- to-c from-c)
|
||||
distance-str (str distance)
|
||||
distance-str (fmt/format-number distance)
|
||||
half-point (half-point coord sr1 sr2)
|
||||
width (-> distance-str
|
||||
count
|
||||
(* (/ pill-text-width-letter zoom))
|
||||
(+ (/ pill-text-width-margin zoom)))]
|
||||
(+ (/ pill-text-width-margin zoom))
|
||||
(+ (* (/ pill-text-width-margin zoom) 2)))]
|
||||
|
||||
[:g.distance-segment
|
||||
(let [point [(+ from-c (/ distance 2))
|
||||
|
|
|
@ -2230,6 +2230,18 @@ msgstr "Show rules"
|
|||
msgid "workspace.header.menu.show-textpalette"
|
||||
msgstr "Show fonts palette"
|
||||
|
||||
msgid "workspace.header.menu.hide-pixel-grid"
|
||||
msgstr "Hide pixel grid"
|
||||
|
||||
msgid "workspace.header.menu.show-pixel-grid"
|
||||
msgstr "Show pixel grid"
|
||||
|
||||
msgid "workspace.header.menu.disable-snap-pixel-grid"
|
||||
msgstr "Disable snap to pixel"
|
||||
|
||||
msgid "workspace.header.menu.enable-snap-pixel-grid"
|
||||
msgstr "Enable snap to pixel"
|
||||
|
||||
#: src/app/main/ui/workspace/header.cljs
|
||||
msgid "workspace.header.reset-zoom"
|
||||
msgstr "Reset"
|
||||
|
|
|
@ -2246,6 +2246,18 @@ msgstr "Mostrar reglas"
|
|||
msgid "workspace.header.menu.show-textpalette"
|
||||
msgstr "Mostrar paleta de textos"
|
||||
|
||||
msgid "workspace.header.menu.hide-pixel-grid"
|
||||
msgstr "Ocultar rejilla de pixeles"
|
||||
|
||||
msgid "workspace.header.menu.show-pixel-grid"
|
||||
msgstr "Mostrar rejilla de pixeles"
|
||||
|
||||
msgid "workspace.header.menu.disable-snap-pixel-grid"
|
||||
msgstr "Desactivar ajuste al pixel"
|
||||
|
||||
msgid "workspace.header.menu.enable-snap-pixel-grid"
|
||||
msgstr "Activar ajuste al pixel"
|
||||
|
||||
#: src/app/main/ui/workspace/header.cljs
|
||||
msgid "workspace.header.reset-zoom"
|
||||
msgstr "Restablecer"
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue