Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-04-03 10:31:38 -05:00
Code Issues Activity

Merge pull request #2799 from penpot/alotor-polishing-5

Browse source 
Polishing
This commit is contained in:
Eva Marco 2023-01-18 11:38:40 +01:00 • committed by GitHub
commit c5d8d77070
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 123 additions and 79 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
common/src/app/common/geom/point.cljc
View file

@ -274,12 +274,12 @@
(Point. (mth/precision (dm/get-prop pt :x) decimals)
(mth/precision (dm/get-prop pt :y) decimals))))
(defn half-round
(defn round-step
"Round the coordinates to the closest half-point"
[pt]
[pt step]
(assert (point? pt) "expected point instance")
(Point. (mth/half-round (dm/get-prop pt :x))
(mth/half-round (dm/get-prop pt :y))))
(Point. (mth/round (dm/get-prop pt :x) step)
(mth/round (dm/get-prop pt :y) step)))
(defn transform
"Transform a point applying a matrix transformation."

21
common/src/app/common/geom/shapes/modifiers.cljc
View file

@ -382,15 +382,24 @@
result))
(defn set-objects-modifiers
([modif-tree objects ignore-constraints snap-pixel?]
(set-objects-modifiers nil modif-tree objects ignore-constraints snap-pixel?))
([modif-tree objects]
(set-objects-modifiers modif-tree objects nil))
([old-modif-tree modif-tree objects ignore-constraints snap-pixel?]
([modif-tree objects params]
(set-objects-modifiers nil modif-tree objects params))
([old-modif-tree modif-tree objects
{:keys [ignore-constraints snap-pixel? snap-precision]
:or {ignore-constraints false snap-pixel? false snap-precision 1}}]
(let [objects (-> objects
(cond-> (some? old-modif-tree)
(apply-structure-modifiers old-modif-tree))
(apply-structure-modifiers modif-tree))
modif-tree
(cond-> modif-tree
snap-pixel? (gpp/adjust-pixel-precision objects snap-precision))
bounds (d/lazy-map (keys objects) #(dm/get-in objects [% :points]))
bounds (cond-> bounds
(some? old-modif-tree)
@ -417,11 +426,7 @@
modif-tree
(if old-modif-tree
(merge-modif-tree old-modif-tree modif-tree)
modif-tree)
modif-tree
(cond-> modif-tree
snap-pixel? (gpp/adjust-pixel-precision objects))]
modif-tree)]
;;#?(:cljs
;; (.log js/console ">result" (modif->js modif-tree objects)))

20
common/src/app/common/geom/shapes/pixel_precision.cljc
View file

@ -18,7 +18,7 @@
[app.common.types.modifiers :as ctm]))
(defn size-pixel-precision
[modifiers shape points]
[modifiers shape points precision]
(let [origin (gpo/origin points)
curr-width (gpo/width-points points)
curr-height (gpo/height-points points)
@ -29,8 +29,8 @@
vertical-line? (and path? (<= curr-width 0.01))
horizontal-line? (and path? (<= curr-height 0.01))
target-width (if vertical-line? curr-width (max 1 (mth/round curr-width)))
target-height (if horizontal-line? curr-height (max 1 (mth/round curr-height)))
target-width (if vertical-line? curr-width (max 1 (mth/round curr-width precision)))
target-height (if horizontal-line? curr-height (max 1 (mth/round curr-height precision)))
ratio-width (/ target-width curr-width)
ratio-height (/ target-height curr-height)
@ -39,23 +39,23 @@
(ctm/resize scalev origin transform transform-inverse {:precise? true}))))
(defn position-pixel-precision
[modifiers _ points]
[modifiers _ points precision]
(let [bounds (gpr/bounds->rect points)
corner (gpt/point bounds)
target-corner (gpt/round corner)
target-corner (gpt/round-step corner precision)
deltav (gpt/to-vec corner target-corner)]
(ctm/move modifiers deltav)))
(defn set-pixel-precision
"Adjust modifiers so they adjust to the pixel grid"
[modifiers shape]
[modifiers shape precision]
(let [points (-> shape :points (gco/transform-points (ctm/modifiers->transform modifiers)))
has-resize? (not (ctm/only-move? modifiers))
[modifiers points]
(let [modifiers
(cond-> modifiers
has-resize? (size-pixel-precision shape points))
has-resize? (size-pixel-precision shape points precision))
points
(if has-resize?
@ -63,16 +63,16 @@
(gco/transform-points (ctm/modifiers->transform modifiers)) )
points)]
[modifiers points])]
(position-pixel-precision modifiers shape points)))
(position-pixel-precision modifiers shape points precision)))
(defn adjust-pixel-precision
[modif-tree objects]
[modif-tree objects precision]
(let [update-modifiers
(fn [modif-tree shape]
(let [modifiers (dm/get-in modif-tree [(:id shape) :modifiers])]
(cond-> modif-tree
(ctm/has-geometry? modifiers)
(update-in [(:id shape) :modifiers] set-pixel-precision shape))))]
(update-in [(:id shape) :modifiers] set-pixel-precision shape precision))))]
(->> (keys modif-tree)
(map (d/getf objects))

17
common/src/app/common/math.cljc
View file

@ -104,15 +104,16 @@
(defn round
"Returns the value of a number rounded to
the nearest integer."
[v]
#?(:cljs (js/Math.round v)
:clj (Math/round (float v))))
the nearest integer.
If given step rounds to the next closest step, for example:
(round 13.4 0.5) => 13.5
(round 13.4 0.3) => 13.3"
([v step]
(* (round (/ v step)) step))
(defn half-round
"Returns a value rounded to the next point or half point"
[v]
(/ (round (* v 2)) 2))
([v]
#?(:cljs (js/Math.round v)
:clj (Math/round (float v)))))
(defn ceil
"Returns the smallest integer greater than

2
common/test/common_tests/geom_point_test.cljc
View file

@ -203,7 +203,7 @@
(t/deftest halft-round-point
(let [p1 (gpt/point 1.34567 3.34567)
rs (gpt/half-round p1)]
rs (gpt/round-step p1 0.5)]
(t/is (gpt/point? rs))
(t/is (mth/close? 1.5 (:x rs)))
(t/is (mth/close? 3.5 (:y rs)))))

2
frontend/src/app/main/constants.cljs
View file

@ -190,3 +190,5 @@
{:name "YouTube thumb"
:width 1280
:height 720}])
(def zoom-half-pixel-precision 8)

8
frontend/src/app/main/data/workspace/drawing/box.cljs
View file

@ -16,6 +16,7 @@
[app.common.types.shape-tree :as ctst]
[app.common.types.shape.layout :as ctl]
[app.common.uuid :as uuid]
[app.main.constants :refer [zoom-half-pixel-precision]]
[app.main.data.workspace.drawing.common :as common]
[app.main.data.workspace.state-helpers :as wsh]
[app.main.snap :as snap]
@ -70,14 +71,15 @@
(let [stoper? #(or (ms/mouse-up? %) (= % :interrupt))
stoper (rx/filter stoper? stream)
layout (get state :workspace-layout)
zoom (get-in state [:workspace-local :zoom] 1)
snap-pixel? (contains? layout :snap-pixel-grid)
initial (cond-> @ms/mouse-position snap-pixel? gpt/round)
snap-precision (if (>= zoom zoom-half-pixel-precision) 0.5 1)
initial (cond-> @ms/mouse-position snap-pixel? (gpt/round-step snap-precision))
page-id (:current-page-id state)
objects (wsh/lookup-page-objects state page-id)
focus (:workspace-focus-selected state)
zoom (get-in state [:workspace-local :zoom] 1)
fid (ctst/top-nested-frame objects initial)
layout? (ctl/layout? objects fid)
@ -119,7 +121,7 @@
(rx/map #(conj current %)))))
(rx/map
(fn [[_ shift? point]]
#(update-drawing % initial (cond-> point snap-pixel? gpt/round) shift?)))))
#(update-drawing % initial (cond-> point snap-pixel? (gpt/round-step snap-precision)) shift?)))))
(rx/take-until stoper))
(->> (rx/of (common/handle-finish-drawing))

5
frontend/src/app/main/data/workspace/media.cljs
View file

@ -8,6 +8,7 @@
(:require
[app.common.exceptions :as ex]
[app.common.logging :as log]
[app.common.math :as mth]
[app.common.pages.changes-builder :as pcb]
[app.common.spec :as us]
[app.common.types.container :as ctn]
@ -52,8 +53,8 @@
shape {:name name
:width width
:height height
:x (- x (/ width 2))
:y (- y (/ height 2))
:x (mth/round (- x (/ width 2)))
:y (mth/round (- y (/ height 2)))
:metadata {:width width
:height height
:mtype mtype

15
frontend/src/app/main/data/workspace/modifiers.cljs
View file

@ -17,6 +17,7 @@
[app.common.spec :as us]
[app.common.types.modifiers :as ctm]
[app.common.types.shape.layout :as ctl]
[app.main.constants :refer [zoom-half-pixel-precision]]
[app.main.data.workspace.changes :as dch]
[app.main.data.workspace.comments :as-alias dwcm]
[app.main.data.workspace.guides :as-alias dwg]
@ -244,12 +245,15 @@
(wsh/lookup-page-objects state)
snap-pixel?
(and (not ignore-snap-pixel) (contains? (:workspace-layout state) :snap-pixel-grid))]
(and (not ignore-snap-pixel) (contains? (:workspace-layout state) :snap-pixel-grid))
zoom (dm/get-in state [:workspace-local :zoom])
snap-precision (if (>= zoom zoom-half-pixel-precision) 0.5 1)]
(as-> objects $
(apply-text-modifiers $ (get state :workspace-text-modifier))
;;(apply-path-modifiers $ (get-in state [:workspace-local :edit-path]))
(gsh/set-objects-modifiers modif-tree $ ignore-constraints snap-pixel?)))))
(gsh/set-objects-modifiers modif-tree $ {:ignore-constraints ignore-constraints :snap-pixel? snap-pixel? :snap-precision snap-precision})))))
(defn- calculate-update-modifiers
[old-modif-tree state ignore-constraints ignore-snap-pixel modif-tree]
@ -259,10 +263,13 @@
snap-pixel?
(and (not ignore-snap-pixel) (contains? (:workspace-layout state) :snap-pixel-grid))
zoom (dm/get-in state [:workspace-local :zoom])
snap-precision (if (>= zoom zoom-half-pixel-precision) 0.5 1)
objects
(-> objects
(apply-text-modifiers (get state :workspace-text-modifier)))]
(gsh/set-objects-modifiers old-modif-tree modif-tree objects ignore-constraints snap-pixel?)))
(gsh/set-objects-modifiers old-modif-tree modif-tree objects {:ignore-constraints ignore-constraints :snap-pixel? snap-pixel? :snap-precision snap-precision})))
(defn update-modifiers
([modif-tree]
@ -312,7 +319,7 @@
modif-tree
(-> (build-modif-tree ids objects get-modifier)
(gsh/set-objects-modifiers objects false false))]
(gsh/set-objects-modifiers objects))]
(assoc state :workspace-modifiers modif-tree))))))

4
frontend/src/app/main/data/workspace/path/streams.cljs
View file

@ -8,6 +8,7 @@
(:require
[app.common.geom.point :as gpt]
[app.common.geom.shapes.path :as upg]
[app.main.constants :refer [zoom-half-pixel-precision]]
[app.main.data.workspace.path.state :as state]
[app.main.snap :as snap]
[app.main.store :as st]
@ -17,7 +18,6 @@
[potok.core :as ptk]))
(defonce drag-threshold 5)
(def zoom-half-pixel-precision 8)
(defn dragging? [start zoom]
(fn [current]
@ -36,7 +36,7 @@
position
(>= zoom zoom-half-pixel-precision)
(gpt/half-round position)
(gpt/round-step position 0.5)
:else
(gpt/round position))))

17
frontend/src/app/main/data/workspace/svg_upload.cljs
View file

@ -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.changes-builder :as pcb]
[app.common.pages.helpers :as cph]
[app.common.spec :as us :refer [max-safe-int min-safe-int]]
@ -477,15 +478,17 @@
(rx/reduce (fn [acc [url image]] (assoc acc url image)) {})))
(defn create-svg-shapes
[svg-data {:keys [x y] :as position} objects frame-id parent-id selected center?]
[svg-data {:keys [x y]} objects frame-id parent-id selected center?]
(try
(let [[vb-x vb-y vb-width vb-height] (svg-dimensions svg-data)
x (if center?
(- x vb-x (/ vb-width 2))
x)
y (if center?
(- y vb-y (/ vb-height 2))
y)
x (mth/round
(if center?
(- x vb-x (/ vb-width 2))
x))
y (mth/round
(if center?
(- y vb-y (/ vb-height 2))
y))
unames (ctst/retrieve-used-names objects)

13
frontend/src/app/main/data/workspace/transforms.cljs
View file

@ -240,14 +240,12 @@
ptk/UpdateEvent
(update [_ state]
(let [objects (wsh/lookup-page-objects state)
snap-pixel? (and (contains? (:workspace-layout state) :snap-pixel-grid)
(int? value))
get-modifier
(fn [shape] (ctm/change-dimensions-modifiers shape attr value))
modif-tree
(-> (dwm/build-modif-tree ids objects get-modifier)
(gsh/set-objects-modifiers objects false snap-pixel?))]
(gsh/set-objects-modifiers objects))]
(assoc state :workspace-modifiers modif-tree)))
@ -265,14 +263,13 @@
ptk/UpdateEvent
(update [_ state]
(let [objects (wsh/lookup-page-objects state)
snap-pixel? (contains? (get state :workspace-layout) :snap-pixel-grid)
get-modifier
(fn [shape] (ctm/change-orientation-modifiers shape orientation))
modif-tree
(-> (dwm/build-modif-tree ids objects get-modifier)
(gsh/set-objects-modifiers objects false snap-pixel?))]
(gsh/set-objects-modifiers objects))]
(assoc state :workspace-modifiers modif-tree)))
@ -623,7 +620,7 @@
(->> move-events
(rx/scan #(gpt/add %1 mov-vec) (gpt/point 0 0))
(rx/map #(dwm/create-modif-tree selected (ctm/move-modifiers %)))
(rx/map (partial dwm/set-modifiers))
(rx/map #(dwm/set-modifiers % false true))
(rx/take-until stopper))
(rx/of (nudge-selected-shapes direction shift?)))
@ -669,11 +666,12 @@
cpos (gpt/point (:x bbox) (:y bbox))
pos (gpt/point (or (:x position) (:x bbox))
(or (:y position) (:y bbox)))
delta (gpt/subtract pos cpos)
modif-tree (dwm/create-modif-tree [id] (ctm/move-modifiers delta))]
(rx/of (dwm/set-modifiers modif-tree)
(rx/of (dwm/set-modifiers modif-tree false true)
(dwm/apply-modifiers))))))
(defn- move-shapes-to-frame
@ -688,7 +686,6 @@
shapes (->> ids (cph/clean-loops objects) (keep lookup))
moving-shapes
(cond->> shapes
(not layout?)

66
frontend/src/app/main/ui/workspace/shapes/frame/dynamic_modifiers.cljs
View file

@ -11,6 +11,7 @@
[app.common.geom.matrix :as gmt]
[app.common.geom.point :as gpt]
[app.common.geom.shapes :as gsh]
[app.common.pages.helpers :as cph]
[app.common.types.modifiers :as ctm]
[app.main.store :as st]
[app.main.ui.hooks :as hooks]
@ -30,14 +31,14 @@
(defn get-nodes
"Retrieve the DOM nodes to apply the matrix transformation"
[base-node {:keys [id type masked-group?] :as shape}]
[base-node {:keys [id parent-id] :as shape}]
(when (some? base-node)
(let [shape-node (get-shape-node base-node id)
frame? (= :frame type)
group? (= :group type)
text? (= :text type)
mask? (and group? masked-group?)]
(let [shape-node (get-shape-node base-node id)
parent-node (get-shape-node base-node parent-id)
frame? (cph/frame-shape? shape)
group? (cph/group-shape? shape)
text? (cph/text-shape? shape)
masking-child? (:masking-child? (meta shape))]
(cond
frame?
[shape-node
@ -48,9 +49,10 @@
;; For groups we don't want to transform the whole group but only
;; its filters/masks
mask?
[(dom/query shape-node ".mask-clip-path")
(dom/query shape-node ".mask-shape")]
masking-child?
[shape-node
(dom/query parent-node ".mask-clip-path")
(dom/query parent-node ".mask-shape")]
group?
(let [shape-defs (dom/query shape-node "defs")]
@ -74,10 +76,12 @@
(-> (dom/get-attribute node "data-old-width") d/parse-double)
(-> (dom/get-attribute node "data-old-height") d/parse-double))
(gsh/transform-selrect modifiers))]
(dom/set-attribute! node "x" x)
(dom/set-attribute! node "y" y)
(dom/set-attribute! node "width" width)
(dom/set-attribute! node "height" height)))
(when (and (some? x) (some? y) (some? width) (some? height))
(dom/set-attribute! node "x" x)
(dom/set-attribute! node "y" y)
(dom/set-attribute! node "width" width)
(dom/set-attribute! node "height" height))))
(defn start-transform!
[base-node shapes]
@ -169,6 +173,11 @@
(or (= (dom/get-tag-name node) "mask")
(= (dom/get-tag-name node) "filter"))
(do
(dom/set-attribute! node "x" (dom/get-attribute node "data-old-x"))
(dom/set-attribute! node "y" (dom/get-attribute node "data-old-y"))
(dom/set-attribute! node "width" (dom/get-attribute node "data-old-width"))
(dom/set-attribute! node "height" (dom/get-attribute node "data-old-height"))
(dom/remove-attribute! node "data-old-x")
(dom/remove-attribute! node "data-old-y")
(dom/remove-attribute! node "data-old-width")
@ -190,6 +199,18 @@
(-> modifiers
(ctm/resize scalev (-> shape' :points first) (:transform shape') (:transform-inverse shape')))))
(defn add-masking-child?
"Adds to the object the information about if the current shape is a masking child. We use the metadata
to not adding new parameters to the object."
[objects]
(fn [{:keys [id parent-id] :as shape}]
(let [parent (get objects parent-id)
masking-child? (and (cph/mask-shape? parent) (= id (first (:shapes parent))))]
(cond-> shape
masking-child?
(with-meta {:masking-child? true})))))
(defn use-dynamic-modifiers
[objects node modifiers]
@ -198,11 +219,15 @@
(mf/deps modifiers)
(fn []
(when (some? modifiers)
(d/mapm (fn [id {modifiers :modifiers}]
(d/mapm (fn [id {current-modifiers :modifiers}]
(let [shape (get objects id)
adapt-text? (and (= :text (:type shape)) (not (ctm/only-move? modifiers)))
modifiers (cond-> modifiers adapt-text? (adapt-text-modifiers shape))]
(ctm/modifiers->transform modifiers)))
adapt-text? (and (= :text (:type shape)) (not (ctm/only-move? current-modifiers)))
current-modifiers
(cond-> current-modifiers
adapt-text?
(adapt-text-modifiers shape))]
(ctm/modifiers->transform current-modifiers)))
modifiers))))
add-children (mf/use-memo (mf/deps modifiers) #(ctm/added-children-frames modifiers))
@ -215,7 +240,7 @@
(fn []
(->> (keys transforms)
(filter #(some? (get transforms %)))
(mapv (d/getf objects)))))
(mapv (comp (add-masking-child? objects) (d/getf objects))))))
prev-shapes (mf/use-var nil)
prev-modifiers (mf/use-var nil)
@ -252,7 +277,6 @@
(mf/use-layout-effect
(mf/deps transforms)
(fn []
(let [curr-shapes-set (into #{} (map :id) shapes)
prev-shapes-set (into #{} (map :id) @prev-shapes)
@ -266,7 +290,7 @@
(update-transform! node shapes transforms modifiers))
(when (d/not-empty? removed-shapes)
(remove-transform! node @prev-shapes)))
(remove-transform! node removed-shapes)))
(reset! prev-modifiers modifiers)
(reset! prev-transforms transforms)

4
frontend/src/app/main/ui/workspace/viewport/widgets.cljs
View file

@ -22,6 +22,7 @@
[app.main.ui.workspace.viewport.path-actions :refer [path-actions]]
[app.main.ui.workspace.viewport.utils :as vwu]
[app.util.dom :as dom]
[app.util.timers :as ts]
[debug :refer [debug?]]
[rumext.v2 :as mf]))
@ -86,7 +87,8 @@
(mf/defc frame-title
{::mf/wrap [mf/memo]}
{::mf/wrap [mf/memo
#(mf/deferred % ts/raf)]}
[{:keys [frame selected? zoom show-artboard-names? on-frame-enter on-frame-leave on-frame-select]}]
(let [workspace-read-only? (mf/use-ctx ctx/workspace-read-only?)
on-mouse-down