3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-08-07 14:38:33 +02:00
Code Issues Projects Releases Packages Wiki Activity

⚡ Add minor optimizations to shapes/gradient related components

Browse source
This commit is contained in:
Andrey Antukh 2023-09-06 16:27:30 +02:00
parent 140cb43681
commit 5940e00053
1 changed files with 66 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -10,13 +10,16 @@
[app.common.data.macros :as dm] [app.common.data.macros :as dm]
[app.common.geom.matrix :as gmt] [app.common.geom.matrix :as gmt]
[app.common.geom.point :as gpt] [app.common.geom.point :as gpt]
[app.common.geom.rect :as grc]
[app.common.geom.shapes :as gsh] [app.common.geom.shapes :as gsh]
[app.common.pages.helpers :as cph]
[app.main.ui.context :as muc] [app.main.ui.context :as muc]
[app.main.ui.shapes.export :as ed] [app.main.ui.shapes.export :as ed]
[app.util.object :as obj] [app.util.object :as obj]
[rumext.v2 :as mf])) [rumext.v2 :as mf]))
(defn add-metadata [props gradient] (defn- add-metadata!
[props gradient]
(-> props (-> props
(obj/set! "penpot:gradient" "true") (obj/set! "penpot:gradient" "true")
(obj/set! "penpot:start-x" (:start-x gradient)) (obj/set! "penpot:start-x" (:start-x gradient))
@ -25,75 +28,90 @@
(obj/set! "penpot:end-y" (:end-y gradient)) (obj/set! "penpot:end-y" (:end-y gradient))
(obj/set! "penpot:width" (:width gradient)))) (obj/set! "penpot:width" (:width gradient))))
(mf/defc linear-gradient [{:keys [id gradient shape]}] (mf/defc linear-gradient
(let [transform (when (= :path (:type shape)) {::mf/wrap-props false}
(gsh/transform-matrix shape nil (gpt/point 0.5 0.5))) [{:keys [id gradient shape]}]
(let [transform (mf/with-memo [shape]
(when (cph/frame-shape? shape)
(gsh/transform-matrix shape nil (gpt/point 0.5 0.5))))
base-props #js {:id id metadata? (mf/use-ctx ed/include-metadata-ctx)
props #js {:id id
:x1 (:start-x gradient) :x1 (:start-x gradient)
:y1 (:start-y gradient) :y1 (:start-y gradient)
:x2 (:end-x gradient) :x2 (:end-x gradient)
:y2 (:end-y gradient) :y2 (:end-y gradient)
:gradientTransform (dm/str transform)} :gradientTransform (dm/str transform)}]
include-metadata? (mf/use-ctx ed/include-metadata-ctx) (when ^boolean metadata?
(add-metadata! props gradient))
props (cond-> base-props
include-metadata?
(add-metadata gradient))]
[:> :linearGradient props [:> :linearGradient props
(for [{:keys [offset color opacity]} (:stops gradient)] (for [{:keys [offset color opacity]} (:stops gradient)]
[:stop {:key (dm/str id "-stop-" offset) [:stop {:key (dm/str id "-stop-" offset)
:offset (or offset 0) :offset (d/nilv offset 0)
:stop-color color :stop-color color
:stop-opacity opacity}])])) :stop-opacity opacity}])]))
(mf/defc radial-gradient [{:keys [id gradient shape]}] (mf/defc radial-gradient
(let [path? (= :path (:type shape)) {::mf/wrap-props false}
shape-transform (or (when path? (:transform shape)) (gmt/matrix)) [{:keys [id gradient shape]}]
shape-transform-inv (or (when path? (:transform-inverse shape)) (gmt/matrix)) (let [path? (cph/path-shape? shape)
transform (when ^boolean path?
(dm/get-prop shape :transform))
transform (d/nilv transform gmt/base)
transform-inv (when ^boolean path?
(dm/get-prop shape :transform-inverse))
transform-inv (d/nilv transform-inv gmt/base)
{:keys [start-x start-y end-x end-y] gwidth :width} gradient {:keys [start-x start-y end-x end-y] gwidth :width} gradient
gradient-vec (gpt/to-vec (gpt/point start-x start-y) gstart-pt (gpt/point start-x start-y)
(gpt/point end-x end-y)) gend-pt (gpt/point end-x end-y)
gradient-vec (gpt/to-vec gstart-pt gend-pt)
angle (+ (gpt/angle gradient-vec) 90) angle (+ (gpt/angle gradient-vec) 90)
bb-shape (gsh/shapes->rect [shape]) points (dm/get-prop shape :points)
bounds (mf/with-memo [points]
(grc/points->rect points))
selrect (dm/get-prop shape :selrect)
;; Paths don't have a transform in SVG because we transform the points ;; Paths don't have a transform in SVG because we transform
;; we need to compensate the difference between the original rectangle ;; the points we need to compensate the difference between the
;; and the transformed one. This factor is that calculation. ;; original rectangle and the transformed one. This factor is
factor (if path? ;; that calculation.
(/ (:height (:selrect shape)) (:height bb-shape)) factor (if ^boolean path?
(/ (dm/get-prop selrect :height)
(dm/get-prop bounds :height))
1.0) 1.0)
transform (-> (gmt/matrix) transform (mf/with-memo [gradient transform transform-inv factor]
(gmt/translate (gpt/point start-x start-y)) (-> (gmt/matrix)
(gmt/multiply shape-transform) (gmt/translate gstart-pt)
(gmt/multiply transform)
(gmt/rotate angle) (gmt/rotate angle)
(gmt/scale (gpt/point gwidth factor)) (gmt/scale (gpt/point gwidth factor))
(gmt/multiply shape-transform-inv) (gmt/multiply transform-inv)
(gmt/translate (gpt/negate (gpt/point start-x start-y)))) (gmt/translate (gpt/negate gstart-pt))))
gradient-radius (gpt/length gradient-vec) metadata? (mf/use-ctx ed/include-metadata-ctx)
base-props #js {:id id
props #js {:id id
:cx start-x :cx start-x
:cy start-y :cy start-y
:r gradient-radius :r (gpt/length gradient-vec)
:gradientTransform transform} :gradientTransform transform}]
include-metadata? (mf/use-ctx ed/include-metadata-ctx) (when ^boolean metadata?
(add-metadata! props gradient))
props (cond-> base-props
include-metadata?
(add-metadata gradient))]
[:> :radialGradient props [:> :radialGradient props
(for [{:keys [offset color opacity]} (:stops gradient)] (for [{:keys [offset color opacity]} (:stops gradient)]
[:stop {:key (dm/str id "-stop-" offset) [:stop {:key (dm/str id "-stop-" offset)
:offset (or offset 0) :offset (d/nilv offset 0)
:stop-color color :stop-color color
:stop-opacity opacity}])])) :stop-opacity opacity}])]))