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

✨ Changed radial gradients to use objectBoundingBox

Browse source
This commit is contained in:
alonso.torres 2022-02-11 11:59:31 +01:00
parent db1e9574cd
commit 699ec93ca4
2 changed files with 31 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -46,41 +46,40 @@
:stop-color color :stop-color color
:stop-opacity opacity}])])) :stop-opacity opacity}])]))
(mf/defc radial-gradient [{:keys [id gradient shape]}] (mf/defc radial-gradient [{:keys [id gradient shape]}]
(let [{:keys [x y width height]} (:selrect shape) (let [path? (= :path (:type shape))
transform (if (= :path (:type shape)) shape-transform (or (when path? (:transform shape)) (gmt/matrix))
(gsh/transform-matrix shape) shape-transform-inv (or (when path? (:transform-inverse shape)) (gmt/matrix))
(gmt/matrix))
[x y] (if (= (:type shape) :frame) [0 0] [x y])
translate-vec (gpt/point (+ x (* width (:start-x gradient)))
(+ y (* height (:start-y gradient))))
gradient-vec (gpt/to-vec (gpt/point (* width (:start-x gradient)) {:keys [start-x start-y end-x end-y] gwidth :width} gradient
(* height (:start-y gradient)))
(gpt/point (* width (:end-x gradient))
(* height (:end-y gradient))))
angle (gpt/angle gradient-vec gradient-vec (gpt/to-vec (gpt/point start-x start-y)
(gpt/point 1 0)) (gpt/point end-x end-y))
scale-factor-y (/ (gpt/length gradient-vec) (/ height 2)) angle (+ (gpt/angle gradient-vec) 90)
scale-factor-x (* scale-factor-y (:width gradient))
scale-vec (gpt/point (* scale-factor-y (/ height 2)) bb-shape (gsh/selection-rect [shape])
(* scale-factor-x (/ width 2)))
transform (gmt/multiply transform ;; Paths don't have a transform in SVG because we transform the points
(gmt/translate-matrix translate-vec) ;; we need to compensate the difference between the original rectangle
(gmt/rotate-matrix angle) ;; and the transformed one. This factor is that calculation.
(gmt/scale-matrix scale-vec)) factor (if path?
(/ (:height (:selrect shape)) (:height bb-shape))
1.0)
transform (-> (gmt/matrix)
(gmt/translate (gpt/point start-x start-y))
(gmt/multiply shape-transform)
(gmt/rotate angle)
(gmt/scale (gpt/point gwidth factor))
(gmt/multiply shape-transform-inv)
(gmt/translate (gpt/negate (gpt/point start-x start-y))))
gradient-radius (gpt/length gradient-vec)
base-props #js {:id id base-props #js {:id id
:cx 0 :cx start-x
:cy 0 :cy start-y
:r 1 :r gradient-radius
:gradientUnits "userSpaceOnUse"
:gradientTransform transform} :gradientTransform transform}
include-metadata? (mf/use-ctx ed/include-metadata-ctx) include-metadata? (mf/use-ctx ed/include-metadata-ctx)

5
frontend/src/app/main/ui/workspace/colorpicker.cljs
View file

@ -167,6 +167,11 @@
(fn [color] (fn [color]
(let [editing-stop (:editing-stop @state) (let [editing-stop (:editing-stop @state)
is-gradient? (some? (:gradient color))] is-gradient? (some? (:gradient color))]
(if is-gradient?
(st/emit! (dc/start-gradient (:gradient color)))
(st/emit! (dc/stop-gradient)))
(if (and (some? editing-stop) (not is-gradient?)) (if (and (some? editing-stop) (not is-gradient?))
(handle-change-color (color->components (:color color) (:opacity color))) (handle-change-color (color->components (:color color) (:opacity color)))
(do (reset! dirty? false) (do (reset! dirty? false)