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

🐛 Fix problem with gradient handlers

Browse source
This commit is contained in:
alonso.torres 2022-02-09 13:04:16 +01:00
parent 85cab5031d
commit ee5b341d0e
1 changed files with 55 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

50
frontend/src/app/main/ui/workspace/viewport/gradients.cljs
View file

@ -35,7 +35,7 @@
(l/derived (l/in [:workspace-local :editing-stop]) st/state)) (l/derived (l/in [:workspace-local :editing-stop]) st/state))
(def current-gradient-ref (def current-gradient-ref
(l/derived (l/in [:workspace-local :current-gradient]) st/state)) (l/derived (l/in [:workspace-local :current-gradient]) st/state =))
(mf/defc shadow [{:keys [id x y width height offset]}] (mf/defc shadow [{:keys [id x y width height offset]}]
[:filter {:id id [:filter {:id id
@ -158,17 +158,19 @@
(rx/filter ms/pointer-event?) (rx/filter ms/pointer-event?)
(rx/filter #(= :viewport (:source %))) (rx/filter #(= :viewport (:source %)))
(rx/map :pt) (rx/map :pt)
(rx/subs #(case @moving-point (rx/subs
:from-p (when on-change-start (on-change-start %)) (fn [pt]
:to-p (when on-change-finish (on-change-finish %)) (case @moving-point
:from-p (when on-change-start (on-change-start pt))
:to-p (when on-change-finish (on-change-finish pt))
:width-p (when on-change-width :width-p (when on-change-width
(let [width-v (gpt/unit (gpt/to-vec from-p width-p)) (let [width-v (gpt/unit (gpt/to-vec from-p width-p))
distance (gpt/point-line-distance % from-p to-p) distance (gpt/point-line-distance pt from-p to-p)
new-width-p (gpt/add new-width-p (gpt/add
from-p from-p
(gpt/multiply width-v (gpt/point distance)))] (gpt/multiply width-v (gpt/point distance)))]
(on-change-width new-width-p))) (on-change-width new-width-p)))
nil)))] nil))))]
(fn [] (rx/dispose! subs))))) (fn [] (rx/dispose! subs)))))
[:g.gradient-handlers [:g.gradient-handlers
[:defs [:defs
@ -229,9 +231,15 @@
(mf/defc gradient-handlers (mf/defc gradient-handlers
{::mf/wrap [mf/memo]}
[{:keys [id zoom]}] [{:keys [id zoom]}]
(let [shape (mf/deref (refs/object-by-id id)) (let [current-change (mf/use-state {})
shape-ref (mf/use-memo (mf/deps id) #(refs/object-by-id id))
shape (mf/deref shape-ref)
gradient (mf/deref current-gradient-ref) gradient (mf/deref current-gradient-ref)
gradient (merge gradient @current-change)
editing-spot (mf/deref editing-spot-ref) editing-spot (mf/deref editing-spot-ref)
transform (gsh/transform-matrix shape) transform (gsh/transform-matrix shape)
@ -261,31 +269,43 @@
width-p (gpt/add from-p width-v) width-p (gpt/add from-p width-v)
change! (fn [changes] change!
(st/emit! (dc/update-gradient changes))) (mf/use-callback
(fn [changes]
(swap! current-change merge changes)
(st/emit! (dc/update-gradient changes))))
on-change-start (fn [point] on-change-start
(mf/use-callback
(mf/deps transform-inverse width height)
(fn [point]
(let [point (gpt/transform point transform-inverse) (let [point (gpt/transform point transform-inverse)
start-x (/ (- (:x point) x) width) start-x (/ (- (:x point) x) width)
start-y (/ (- (:y point) y) height) start-y (/ (- (:y point) y) height)
start-x (mth/precision start-x 2) start-x (mth/precision start-x 2)
start-y (mth/precision start-y 2)] start-y (mth/precision start-y 2)]
(change! {:start-x start-x :start-y start-y}))) (change! {:start-x start-x :start-y start-y}))))
on-change-finish (fn [point] on-change-finish
(mf/use-callback
(mf/deps transform-inverse width height)
(fn [point]
(let [point (gpt/transform point transform-inverse) (let [point (gpt/transform point transform-inverse)
end-x (/ (- (:x point) x) width) end-x (/ (- (:x point) x) width)
end-y (/ (- (:y point) y) height) end-y (/ (- (:y point) y) height)
end-x (mth/precision end-x 2) end-x (mth/precision end-x 2)
end-y (mth/precision end-y 2)] end-y (mth/precision end-y 2)]
(change! {:end-x end-x :end-y end-y}))) (change! {:end-x end-x :end-y end-y}))))
on-change-width (fn [point] on-change-width
(mf/use-callback
(mf/deps gradient-length width height)
(fn [point]
(let [scale-factor-y (/ gradient-length (/ height 2)) (let [scale-factor-y (/ gradient-length (/ height 2))
norm-dist (/ (gpt/distance point from-p) norm-dist (/ (gpt/distance point from-p)
(* (/ width 2) scale-factor-y))] (* (/ width 2) scale-factor-y))]
(when (and norm-dist (mth/finite? norm-dist)) (when (and norm-dist (mth/finite? norm-dist))
(change! {:width norm-dist}))))] (change! {:width norm-dist})))))]
(when (and gradient (when (and gradient
(= id (:shape-id gradient)) (= id (:shape-id gradient))