3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-18 21:51:38 +02:00
Code Issues Projects Releases Packages Wiki Activity

✨ Refactor for new modifiers

Browse source
This commit is contained in:
alonso.torres 2022-10-19 13:27:44 +02:00
parent c3ed46d3ab
commit 11f347941e
15 changed files with 445 additions and 824 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -47,8 +47,9 @@
(-> shape
(assoc :click-draw? false)
(gsh/transform-shape (ctm/resize scalev (gpt/point x y)))
(gsh/transform-shape (ctm/move movev)))))
(gsh/transform-shape (-> (ctm/empty-modifiers)
(ctm/set-resize scalev (gpt/point x y))
(ctm/set-move movev))))))
(defn update-drawing [state initial point lock?]
(update-in state [:workspace-drawing :object] resize-shape initial point lock?))

1
frontend/src/app/main/data/workspace/shapes.cljs
View file

@ -22,7 +22,6 @@
[app.main.data.workspace.edition :as dwe]
[app.main.data.workspace.selection :as dws]
[app.main.data.workspace.shape-layout :as dwsl]
[app.main.data.workspace.shape-layout :as dwsl]
[app.main.data.workspace.state-helpers :as wsh]
[app.main.features :as features]
[app.main.streams :as ms]

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

@ -320,8 +320,8 @@
(letfn [(update-fn [shape]
(let [{:keys [selrect grow-type]} shape
{shape-width :width shape-height :height} selrect
modifier-width (ctm/resize-modifiers shape :width new-width)
modifier-height (ctm/resize-modifiers shape :height new-height)]
modifier-width (ctm/change-dimensions shape :width new-width)
modifier-height (ctm/change-dimensions shape :height new-height)]
;; TODO LAYOUT: MEZCLAR ESTOS EN UN UNICO MODIFIER
(cond-> shape
(and (not-changed? shape-width new-width) (= grow-type :auto-width))
@ -346,8 +346,8 @@
(defn apply-text-modifier
[shape {:keys [width height position-data]}]
(let [modifier-width (when width (ctm/resize-modifiers shape :width width))
modifier-height (when height (ctm/resize-modifiers shape :height height))
(let [modifier-width (when width (ctm/change-dimensions shape :width width))
modifier-height (when height (ctm/change-dimensions shape :height height))
;; TODO LAYOUT: MEZCLAR LOS DOS EN UN UNICO MODIFIER
new-shape

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

@ -146,11 +146,14 @@
(concat (keys workspace-modifiers) ids)
objects
(fn [shape]
(let [modifiers (if (contains? ids (:id shape)) modifiers {})
old-modifiers-v3 (get-in state [:workspace-modifiers (:id shape) :modifiers :v3])]
(let [
modifiers (if (contains? ids (:id shape)) modifiers (ctm/empty-modifiers))
structure-modifiers (ctm/select-structure
(get-in state [:workspace-modifiers (:id shape) :modifiers]))]
(cond-> modifiers
(some? old-modifiers-v3)
(assoc :v3 old-modifiers-v3))))
(some? structure-modifiers)
(ctm/add-modifiers structure-modifiers))))
ignore-constraints snap-pixel?)]
(update state :workspace-modifiers merge modif-tree))))))
@ -175,7 +178,7 @@
get-modifier
(fn [shape]
(ctm/rotation-modifiers shape center angle))
(ctm/rotation shape center angle))
modif-tree
(gsh/set-objects-modifiers ids objects get-modifier false false)]
@ -396,32 +399,18 @@
resize-origin
(cond-> (gmt/transform-point-center handler-origin shape-center shape-transform)
(some? displacement)
(gpt/add displacement))]
(gpt/add displacement))
(rx/of (set-modifiers ids
{:v2 (-> []
(cond-> displacement
(conj {:type :move
:vector displacement}))
(conj {:type :resize
:vector scalev
:origin resize-origin
:transform shape-transform
:transform-inverse shape-transform-inverse}))
;;:displacement displacement
;;:resize-vector scalev
;;:resize-origin resize-origin
;;:resize-transform shape-transform
;;:resize-scale-text scale-text
;;:resize-transform-inverse shape-transform-inverse
}))
#_(rx/of (set-modifiers ids
{:displacement displacement
:resize-vector scalev
:resize-origin resize-origin
:resize-transform shape-transform
:resize-scale-text scale-text
:resize-transform-inverse shape-transform-inverse}))))
modifiers
(-> (ctm/empty-modifiers)
(cond-> displacement
(ctm/set-move displacement))
(ctm/set-resize scalev resize-origin shape-transform shape-transform-inverse)
(cond-> scale-text
(ctm/set-scale-content (:x scalev))))]
(rx/of (set-modifiers ids modifiers))))
;; Unifies the instantaneous proportion lock modifier
;; activated by Shift key and the shapes own proportion
@ -471,7 +460,7 @@
snap-pixel? (and (contains? (:workspace-layout state) :snap-pixel-grid)
(int? value))
get-modifier
(fn [shape] (ctm/resize-modifiers shape attr value))
(fn [shape] (ctm/change-dimensions shape attr value))
modif-tree
(gsh/set-objects-modifiers ids objects get-modifier false snap-pixel?)]
@ -655,15 +644,13 @@
(d/removev #(= target-frame %)))]
(cond
(not= original-frame target-frame)
[[original-frame {:modifiers {:v3 [{:type :remove-children :value shapes}]}}]
[target-frame {:modifiers {:v3 [{:type :add-children
:value shapes
:index drop-index}]}}]]
[[original-frame {:modifiers (ctm/remove-children shapes)}]
[target-frame {:modifiers (ctm/add-children shapes drop-index)}]]
layout?
[[target-frame {:modifiers {:v3 [{:type :add-children
:value shapes
:index drop-index}]}}]]))))
[[target-frame {:modifiers (ctm/add-children shapes drop-index)}]]))))
(keys origin-frame-ids))]
(assoc state :workspace-modifiers modif-tree)))))
(defn- start-move
@ -725,8 +712,7 @@
;; We try to use the previous snap so we don't have to wait for the result of the new
(rx/map snap/correct-snap-point)
(rx/map (fn [move-vec] {:v2 [{:type :move :vector move-vec}]}))
(rx/map ctm/move)
(rx/map (partial set-modifiers ids))
(rx/take-until stopper)))
@ -867,14 +853,9 @@
origin (gpt/point (:x selrect) (+ (:y selrect) (/ (:height selrect) 2)))]
(rx/of (set-modifiers selected
{:v2 [{:type :resize
:vector (gpt/point -1.0 1.0)
:origin origin}
{:type :move
:vector (gpt/point (:width selrect) 0)}]}
#_{:resize-vector (gpt/point -1.0 1.0)
:resize-origin origin
:displacement (gmt/translate-matrix (gpt/point (- (:width selrect)) 0))}
(-> (ctm/empty-modifiers)
(ctm/set-resize (gpt/point -1.0 1.0) origin)
(ctm/move (gpt/point (:width selrect) 0)))
true)
(apply-modifiers))))))
@ -889,13 +870,8 @@
origin (gpt/point (+ (:x selrect) (/ (:width selrect) 2)) (:y selrect))]
(rx/of (set-modifiers selected
{:v2 [{:type :resize
:vector (gpt/point 1.0 -1.0)
:origin origin}
{:type :move
:vector (gpt/point 0 (:height selrect))}]}
#_{:resize-vector (gpt/point 1.0 -1.0)
:resize-origin origin
:displacement (gmt/translate-matrix (gpt/point 0 (- (:height selrect))))}
(-> (ctm/empty-modifiers)
(ctm/set-resize (gpt/point 1.0 -1.0) origin)
(ctm/move (gpt/point 0 (:height selrect))))
true)
(apply-modifiers))))))

2
frontend/src/app/main/ui/workspace/shapes.cljs
View file

@ -103,7 +103,7 @@
opts #js {:shape shape :thumbnail? thumbnail?}]
(when (and (some? shape) (not (:hidden shape)))
[:g.ws-shape-wrapper
[:g.workspace-shape-wrapper
(case (:type shape)
:path [:> path/path-wrapper opts]
:text [:> text/text-wrapper opts]

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

@ -19,67 +19,6 @@
[app.util.globals :as globals]
[rumext.v2 :as mf]))
(defn- transform-no-resize
"If we apply a scale directly to the texts it will show deformed so we need to create this
correction matrix to \"undo\" the resize but keep the other transformations."
[{:keys [x y width height points transform transform-inverse] :as shape} current-transform modifiers]
(let [corner-pt (first points)
corner-pt (cond-> corner-pt (some? transform-inverse) (gpt/transform transform-inverse))
resize-x? (some? (:resize-vector modifiers))
resize-y? (some? (:resize-vector-2 modifiers))
flip-x? (neg? (get-in modifiers [:resize-vector :x]))
flip-y? (or (neg? (get-in modifiers [:resize-vector :y]))
(neg? (get-in modifiers [:resize-vector-2 :y])))
result (cond-> (gmt/matrix)
(and (some? transform) (or resize-x? resize-y?))
(gmt/multiply transform)
resize-x?
(gmt/scale (gpt/inverse (:resize-vector modifiers)) corner-pt)
resize-y?
(gmt/scale (gpt/inverse (:resize-vector-2 modifiers)) corner-pt)
flip-x?
(gmt/scale (gpt/point -1 1) corner-pt)
flip-y?
(gmt/scale (gpt/point 1 -1) corner-pt)
(and (some? transform) (or resize-x? resize-y?))
(gmt/multiply transform-inverse))
[width height]
(if (or resize-x? resize-y?)
(let [pc (cond-> (gpt/point x y)
(some? transform)
(gpt/transform transform)
(some? current-transform)
(gpt/transform current-transform))
pw (cond-> (gpt/point (+ x width) y)
(some? transform)
(gpt/transform transform)
(some? current-transform)
(gpt/transform current-transform))
ph (cond-> (gpt/point x (+ y height))
(some? transform)
(gpt/transform transform)
(some? current-transform)
(gpt/transform current-transform))]
[(gpt/distance pc pw) (gpt/distance pc ph)])
[width height])]
[result width height]))
(defn get-shape-node
([id]
(get-shape-node js/document id))
@ -191,15 +130,8 @@
(let [transform (get transforms id)
modifiers (get-in modifiers [id :modifiers])]
;; TODO LAYOUT: Adapt to new modifiers
(doseq [node nodes]
(cond
;; Text shapes need special treatment because their resize only change
;; the text area, not the change size/position
(dom/class? node "frame-thumbnail")
(let [[transform] (transform-no-resize shape transform modifiers)]
(set-transform-att! node "transform" transform))
(dom/class? node "frame-children")
(set-transform-att! node "transform" (gmt/inverse transform))
@ -256,11 +188,7 @@
(/ (:height shape) (:height shape')))]
;; Reverse the change in size so we can recalculate the layout
(-> modifiers
(update :v2 conj {:type :resize
:vector scalev
:transform (:transform shape')
:transform-inverse (:transform-inverse shape')
:origin (-> shape' :points first)}))))
(ctm/set-resize scalev (-> shape' :points first) (:transform shape') (:transform-inverse shape')))))
(defn use-dynamic-modifiers
[objects node modifiers]
@ -272,37 +200,13 @@
(when (some? modifiers)
(d/mapm (fn [id {modifiers :modifiers}]
(let [shape (get objects id)
center (gsh/center-shape shape)
text? (= :text (:type shape))
modifiers (cond-> modifiers text? (adapt-text-modifiers shape))]
(ctm/modifiers->transform center modifiers)))
(ctm/modifiers->transform modifiers)))
modifiers))))
structure-changes
(mf/use-memo
(mf/deps modifiers)
(fn []
(into {}
(comp (filter (fn [[_ val]] (-> val :modifiers :v3 some?)))
(map (fn [[key val]]
[key (-> val :modifiers :v3)])))
modifiers)))
structure-changes (hooks/use-equal-memo structure-changes)
add-children
(mf/use-memo
(mf/deps structure-changes)
(fn []
(into []
(mapcat (fn [[frame-id changes]]
(->> changes
(filter (fn [{:keys [type]}] (= type :add-children)))
(mapcat (fn [{:keys [value]}]
(->> value (map (fn [id] {:frame frame-id :shape id}))))))))
structure-changes)))
add-children (mf/use-memo (mf/deps modifiers) #(ctm/get-frame-add-children modifiers))
add-children (hooks/use-equal-memo add-children)
add-children-prev (hooks/use-previous add-children)
shapes

7
frontend/src/app/main/ui/workspace/shapes/text/viewport_texts_html.cljs
View file

@ -35,13 +35,6 @@
(with-meta (meta (:position-data shape))))
(dissoc :position-data :transform :transform-inverse)))
#_(defn strip-modifier
[modifier]
(if (or (some? (dm/get-in modifier [:modifiers :resize-vector]))
(some? (dm/get-in modifier [:modifiers :resize-vector-2])))
modifier
(d/update-when modifier :modifiers dissoc :displacement :rotation)))
(defn fix-position [shape modifier]
(let [shape' (-> shape
(assoc :grow-type :fixed)

2
frontend/src/app/main/ui/workspace/viewport/debug.cljs
View file

@ -31,7 +31,7 @@
(when (and shape (:layout shape))
(let [children (cph/get-immediate-children objects (:id shape))
layout-data (gsl/calc-layout-data shape children)
drop-areas (gsl/drop-areas shape layout-data children)]
drop-areas (gsl/layout-drop-areas shape layout-data children)]
[:g.debug-layout {:pointer-events "none"
:transform (gsh/transform-str shape)}
(for [[idx drop-area] (d/enumerate drop-areas)]