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

✨ Relative gradient rendering

Browse source
This commit is contained in:
alonso.torres 2021-02-10 16:48:21 +01:00
parent bfcfe2fd31
commit d48a1ca0b0
2 changed files with 19 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

11
frontend/src/app/main/ui/shapes/gradients.cljs
View file

@ -20,15 +20,13 @@
(mf/defc linear-gradient [{:keys [id gradient shape]}]
(let [{:keys [x y width height]} (:selrect shape)
transform (case (:type shape)
:path (gmt/matrix)
(gsh/inverse-transform-matrix shape (gpt/point 0.5 0.5)))]
transform (when (= :path (:type shape)) (gsh/transform-matrix shape nil (gpt/point 0.5 0.5)))]
[:linearGradient {:id id
:x1 (:start-x gradient)
:y1 (:start-y gradient)
:x2 (:end-x gradient)
:y2 (:end-y gradient)
:gradient-transform transform}
:gradientTransform transform}
(for [{:keys [offset color opacity]} (:stops gradient)]
[:stop {:key (str id "-stop-" offset)
:offset (or offset 0)
@ -37,9 +35,8 @@
(mf/defc radial-gradient [{:keys [id gradient shape]}]
(let [{:keys [x y width height]} (:selrect shape)
transform (case (:type shape)
:path (gmt/matrix)
(gsh/inverse-transform-matrix shape))]
center (gsh/center-shape shape)
transform (when (= :path (:type shape)) (gsh/transform-matrix shape))]
(let [[x y] (if (= (:type shape) :frame) [0 0] [x y])
translate-vec (gpt/point (+ x (* width (:start-x gradient)))
(+ y (* height (:start-y gradient))))

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

@ -15,6 +15,7 @@
[beicon.core :as rx]
[okulary.core :as l]
[app.common.math :as mth]
[app.common.geom.shapes :as gsh]
[app.common.geom.point :as gpt]
[app.common.geom.matrix :as gmt]
[app.util.dom :as dom]
@ -238,16 +239,22 @@
gradient (mf/deref current-gradient-ref)
editing-spot (mf/deref editing-spot-ref)
transform (gsh/transform-matrix shape)
transform-inverse (gsh/inverse-transform-matrix shape)
{:keys [x y width height] :as sr} (:selrect shape)
[{start-color :color start-opacity :opacity}
{end-color :color end-opacity :opacity}] (:stops gradient)
from-p (gpt/point (+ x (* width (:start-x gradient)))
from-p (-> (gpt/point (+ x (* width (:start-x gradient)))
(+ y (* height (:start-y gradient))))
to-p (gpt/point (+ x (* width (:end-x gradient)))
(gpt/transform transform))
to-p (-> (gpt/point (+ x (* width (:end-x gradient)))
(+ y (* height (:end-y gradient))))
(gpt/transform transform))
gradient-vec (gpt/to-vec from-p to-p)
gradient-length (gpt/length gradient-vec)
@ -263,14 +270,16 @@
(st/emit! (dc/update-gradient changes)))
on-change-start (fn [point]
(let [start-x (/ (- (:x point) x) width)
(let [point (gpt/transform point transform-inverse)
start-x (/ (- (:x point) x) width)
start-y (/ (- (:y point) y) height)
start-x (mth/precision start-x 2)
start-y (mth/precision start-y 2)]
(change! {:start-x start-x :start-y start-y})))
on-change-finish (fn [point]
(let [end-x (/ (- (:x point) x) width)
(let [point (gpt/transform point transform-inverse)
end-x (/ (- (:x point) x) width)
end-y (/ (- (:y point) y) height)
end-x (mth/precision end-x 2)