mirror of
https://github.com/penpot/penpot.git
synced 2025-06-05 13:01:40 +02:00
✨ Gradients support in shapes
This commit is contained in:
alonso.torres
parent
381aef77ee
commit
c266f78d1e
14 changed files with 176 additions and 79 deletions
|
|
@ -20,21 +20,36 @@
|
|||
:dashed "10,10"
|
||||
nil))
|
||||
|
||||
(defn add-border-radius [attrs shape]
|
||||
(obj/merge! attrs #js {:rx (:rx shape)
|
||||
:ry (:ry shape)}))
|
||||
|
||||
(defn add-fill [attrs shape]
|
||||
(let [fill-color-gradient-id (str "fill-color-gradient_" (:id shape))]
|
||||
(if (:fill-color-gradient shape)
|
||||
(obj/merge! attrs #js {:fill (str/format "url(#%s)" fill-color-gradient-id)})
|
||||
(obj/merge! attrs #js {:fill (or (:fill-color shape) "transparent")
|
||||
:fillOpacity (:fill-opacity shape nil)}))))
|
||||
|
||||
(defn add-stroke [attrs shape]
|
||||
(let [stroke-style (:stroke-style shape :none)
|
||||
stroke-color-gradient-id (str "stroke-color-gradient_" (:id shape))]
|
||||
(if (not= stroke-style :none)
|
||||
(if (:stroke-color-gradient shape)
|
||||
(obj/merge! attrs
|
||||
#js {:stroke (str/format "url(#%s)" stroke-color-gradient-id)
|
||||
:strokeWidth (:stroke-width shape 1)
|
||||
:strokeDasharray (stroke-type->dasharray stroke-style)})
|
||||
(obj/merge! attrs
|
||||
#js {:stroke (:stroke-color shape nil)
|
||||
:strokeWidth (:stroke-width shape 1)
|
||||
:strokeOpacity (:stroke-opacity shape nil)
|
||||
:strokeDasharray (stroke-type->dasharray stroke-style)}))))
|
||||
attrs)
|
||||
|
||||
(defn extract-style-attrs
|
||||
([shape] (extract-style-attrs shape nil))
|
||||
([shape gradient-id]
|
||||
(let [stroke-style (:stroke-style shape :none)
|
||||
attrs #js {:rx (:rx shape nil)
|
||||
:ry (:ry shape nil)}
|
||||
attrs (obj/merge! attrs
|
||||
(if gradient-id
|
||||
#js {:fill (str/format "url(#%s)" gradient-id)}
|
||||
#js {:fill (or (:fill-color shape) "transparent")
|
||||
:fillOpacity (:fill-opacity shape nil)}))]
|
||||
(when (not= stroke-style :none)
|
||||
(obj/merge! attrs
|
||||
#js {:stroke (:stroke-color shape nil)
|
||||
:strokeWidth (:stroke-width shape 1)
|
||||
:strokeOpacity (:stroke-opacity shape nil)
|
||||
:strokeDasharray (stroke-type->dasharray stroke-style)}))
|
||||
attrs)))
|
||||
([shape]
|
||||
(-> (obj/new)
|
||||
(add-border-radius shape)
|
||||
(add-fill shape)
|
||||
(add-stroke shape))))
|
||||
|
|
|
|||
|
|
@ -11,11 +11,11 @@
|
|||
(:require
|
||||
[rumext.alpha :as mf]
|
||||
[cuerdas.core :as str]
|
||||
[goog.object :as gobj]
|
||||
[app.util.object :as obj]
|
||||
[app.common.uuid :as uuid]
|
||||
[app.common.geom.point :as gpt]))
|
||||
|
||||
(mf/defc linear-gradient [{:keys [id shape gradient]}]
|
||||
(mf/defc linear-gradient [{:keys [id gradient shape]}]
|
||||
(let [{:keys [x y width height]} shape]
|
||||
[:defs
|
||||
[:linearGradient {:id id
|
||||
|
|
@ -29,12 +29,11 @@
|
|||
:stop-color color
|
||||
:stop-opacity opacity}])]]))
|
||||
|
||||
(mf/defc radial-gradient [{:keys [id shape gradient]}]
|
||||
(mf/defc radial-gradient [{:keys [id gradient shape]}]
|
||||
(let [{:keys [x y width height]} shape]
|
||||
[:defs
|
||||
(let [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))
|
||||
(* height (:start-y gradient)))
|
||||
|
|
@ -71,8 +70,14 @@
|
|||
(mf/defc gradient
|
||||
{::mf/wrap-props false}
|
||||
[props]
|
||||
(let [gradient (gobj/get props "gradient")]
|
||||
(let [attr (obj/get props "attr")
|
||||
shape (obj/get props "shape")
|
||||
|
||||
id (str (name attr) "_" (:id shape))
|
||||
gradient (get shape attr)
|
||||
gradient-props #js {:id id
|
||||
:gradient gradient
|
||||
:shape shape}]
|
||||
(case (:type gradient)
|
||||
:linear [:> linear-gradient props]
|
||||
:radial [:> radial-gradient props]
|
||||
nil)))
|
||||
:linear [:> linear-gradient gradient-props]
|
||||
:radial [:> radial-gradient gradient-props])))
|
||||
|
|
|
|||
|
|
@ -27,9 +27,7 @@
|
|||
{:keys [id x y width height]} shape
|
||||
transform (geom/transform-matrix shape)
|
||||
|
||||
gradient-id (when (:fill-color-gradient shape) (str (uuid/next)))
|
||||
|
||||
props (-> (attrs/extract-style-attrs shape gradient-id)
|
||||
props (-> (attrs/extract-style-attrs shape)
|
||||
(obj/merge!
|
||||
#js {:x x
|
||||
:y y
|
||||
|
|
@ -38,12 +36,6 @@
|
|||
:width width
|
||||
:height height}))]
|
||||
|
||||
|
||||
[:*
|
||||
(when gradient-id
|
||||
[:& gradient {:id gradient-id
|
||||
:shape shape
|
||||
:gradient (:fill-color-gradient shape)}])
|
||||
[:& shape-custom-stroke {:shape shape
|
||||
:base-props props
|
||||
:elem-name "rect"}]]))
|
||||
[:& shape-custom-stroke {:shape shape
|
||||
:base-props props
|
||||
:elem-name "rect"}]))
|
||||
|
|
|
|||
|
|
@ -68,17 +68,29 @@
|
|||
|
||||
fill-color (obj/get data "fill-color" fill)
|
||||
fill-opacity (obj/get data "fill-opacity" opacity)
|
||||
fill-color-gradient (obj/get data "fill-color-gradient" opacity)
|
||||
fill-color-gradient (-> (js->clj fill-color-gradient :keywordize-keys true)
|
||||
(update :type keyword))
|
||||
|
||||
fill-color-ref-id (obj/get data "fill-color-ref-id")
|
||||
fill-color-ref-file (obj/get data "fill-color-ref-file")
|
||||
|
||||
[r g b a] (uc/hex->rgba fill-color fill-opacity)
|
||||
background (if fill-color-gradient
|
||||
(uc/gradient->css (js->clj fill-color-gradient))
|
||||
(str/format "rgba(%s, %s, %s, %s)" r g b a))
|
||||
|
||||
fontsdb (deref fonts/fontsdb)
|
||||
|
||||
base #js {:textDecoration text-decoration
|
||||
:color (str/format "rgba(%s, %s, %s, %s)" r g b a)
|
||||
;:color (str/format "rgba(%s, %s, %s, %s)" r g b a)
|
||||
:textTransform text-transform
|
||||
:lineHeight (or line-height "inherit")}]
|
||||
:lineHeight (or line-height "inherit")
|
||||
|
||||
:background background
|
||||
:WebkitTextFillColor "transparent"
|
||||
:WebkitBackgroundClip "text"
|
||||
}]
|
||||
|
||||
(when (and (string? letter-spacing)
|
||||
(pos? (alength letter-spacing)))
|
||||
|
|
@ -167,7 +179,8 @@
|
|||
|
||||
(if (string? text)
|
||||
(let [style (generate-text-styles (clj->js node))]
|
||||
[:span {:style style :key index} (if (= text "") "\u00A0" text)])
|
||||
[:span {:style style
|
||||
:key (str index "-" (:fill-color node))} (if (= text "") "\u00A0" text)])
|
||||
(let [children (map-indexed (fn [index node]
|
||||
(mf/element text-node {:index index :node node :key index}))
|
||||
children)]
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue