mirror of
https://github.com/penpot/penpot.git
synced 2025-06-03 22:31:38 +02:00
✨ Changes to text editor
This commit is contained in:
parent
d83459f674
commit
618d22d214
9 changed files with 115 additions and 149 deletions
|
@ -80,34 +80,38 @@
|
|||
"z")}))
|
||||
attrs))
|
||||
|
||||
(defn add-fill [attrs shape render-id index]
|
||||
(let [
|
||||
fill-attrs (cond
|
||||
(contains? shape :fill-image)
|
||||
(let [fill-image-id (str "fill-image-" render-id)]
|
||||
{:fill (str/format "url(#%s)" fill-image-id)})
|
||||
(defn add-fill
|
||||
([attrs shape render-id]
|
||||
(add-fill attrs shape render-id 0))
|
||||
|
||||
(contains? shape :fill-color-gradient)
|
||||
(let [fill-color-gradient-id (str "fill-color-gradient_" render-id "_" index)]
|
||||
{:fill (str/format "url(#%s)" fill-color-gradient-id)})
|
||||
([attrs shape render-id index]
|
||||
(let [fill-attrs
|
||||
(cond
|
||||
(contains? shape :fill-image)
|
||||
(let [fill-image-id (str "fill-image-" render-id)]
|
||||
{:fill (str/format "url(#%s)" fill-image-id)})
|
||||
|
||||
(contains? shape :fill-color)
|
||||
{:fill (:fill-color shape)}
|
||||
(contains? shape :fill-color-gradient)
|
||||
(let [fill-color-gradient-id (str "fill-color-gradient_" render-id "_" index)]
|
||||
{:fill (str/format "url(#%s)" fill-color-gradient-id)})
|
||||
|
||||
;; If contains svg-attrs the origin is svg. If it's not svg origin
|
||||
;; we setup the default fill as transparent (instead of black)
|
||||
(and (not (contains? shape :svg-attrs))
|
||||
(not (#{:svg-raw :group} (:type shape))))
|
||||
{:fill "none"}
|
||||
(contains? shape :fill-color)
|
||||
{:fill (:fill-color shape)}
|
||||
|
||||
:else
|
||||
{})
|
||||
;; If contains svg-attrs the origin is svg. If it's not svg origin
|
||||
;; we setup the default fill as transparent (instead of black)
|
||||
(and (not (contains? shape :svg-attrs))
|
||||
(not (#{:svg-raw :group} (:type shape))))
|
||||
{:fill "none"}
|
||||
|
||||
fill-attrs (cond-> fill-attrs
|
||||
(contains? shape :fill-opacity)
|
||||
(assoc :fillOpacity (:fill-opacity shape)))]
|
||||
:else
|
||||
{})
|
||||
|
||||
(obj/merge! attrs (clj->js fill-attrs))))
|
||||
fill-attrs (cond-> fill-attrs
|
||||
(contains? shape :fill-opacity)
|
||||
(assoc :fillOpacity (:fill-opacity shape)))]
|
||||
|
||||
(obj/merge! attrs (clj->js fill-attrs)))))
|
||||
|
||||
(defn add-stroke [attrs shape render-id]
|
||||
(let [stroke-style (:stroke-style shape :none)
|
||||
|
|
|
@ -38,19 +38,8 @@
|
|||
stroke-width (case (:stroke-alignment shape :center)
|
||||
:center (/ (:stroke-width shape 0) 2)
|
||||
:outer (:stroke-width shape 0)
|
||||
0)
|
||||
margin (gsh/shape-stroke-margin shape stroke-width)
|
||||
bounding-box (-> (gsh/points->selrect (:points shape))
|
||||
(update :x - (+ stroke-width margin))
|
||||
(update :y - (+ stroke-width margin))
|
||||
(update :width + (* 2 (+ stroke-width margin)))
|
||||
(update :height + (* 2 (+ stroke-width margin))))]
|
||||
[:mask {:id stroke-mask-id
|
||||
:x (:x bounding-box)
|
||||
:y (:y bounding-box)
|
||||
:width (:width bounding-box)
|
||||
:height (:height bounding-box)
|
||||
:maskUnits "userSpaceOnUse"}
|
||||
0)]
|
||||
[:mask {:id stroke-mask-id}
|
||||
[:use {:xlinkHref (str "#" shape-id)
|
||||
:style #js {:fill "none" :stroke "white" :strokeWidth (* stroke-width 2)}}]
|
||||
|
||||
|
|
|
@ -19,11 +19,12 @@
|
|||
(let [valign (:vertical-align node "top")
|
||||
base #js {:height "100%"
|
||||
:width "100%"
|
||||
:fontFamily "sourcesanspro"}]
|
||||
:fontFamily "sourcesanspro"
|
||||
:display "flex"}]
|
||||
(cond-> base
|
||||
(= valign "top") (obj/set! "justifyContent" "flex-start")
|
||||
(= valign "center") (obj/set! "justifyContent" "center")
|
||||
(= valign "bottom") (obj/set! "justifyContent" "flex-end"))))
|
||||
(= valign "top") (obj/set! "alignItems" "flex-start")
|
||||
(= valign "center") (obj/set! "alignItems" "center")
|
||||
(= valign "bottom") (obj/set! "alignItems" "flex-end"))))
|
||||
|
||||
(defn generate-paragraph-set-styles
|
||||
[{:keys [grow-type] :as shape}]
|
||||
|
@ -39,7 +40,6 @@
|
|||
#js {:display "inline-flex"
|
||||
:flexDirection "column"
|
||||
:justifyContent "inherit"
|
||||
:minHeight (when-not (or auto-width? auto-height?) "100%")
|
||||
:minWidth (when-not auto-width? "100%")
|
||||
:marginRight "1px"
|
||||
:verticalAlign "top"}))
|
||||
|
|
|
@ -24,9 +24,8 @@
|
|||
|
||||
(let [render-id (mf/use-ctx muc/render-ctx)
|
||||
{:keys [id x y width height position-data] :as shape} (obj/get props "shape")
|
||||
clip-id (str "clip-text" id "_" render-id)
|
||||
group-props (-> #js {:transform (gsh/transform-matrix shape)
|
||||
:clipPath (str "url(#" clip-id ")")}
|
||||
transform (str (gsh/transform-matrix shape))
|
||||
group-props (-> #js {:transform transform}
|
||||
(attrs/add-style-attrs shape render-id))
|
||||
get-gradient-id
|
||||
(fn [index]
|
||||
|
@ -43,9 +42,6 @@
|
|||
|
||||
[:& shape-custom-stroke {:shape shape}
|
||||
[:> :g group-props
|
||||
[:defs
|
||||
[:clipPath {:id clip-id}
|
||||
[:rect.text-clip {:x x :y y :width width :height height}]]]
|
||||
(for [[index data] (d/enumerate position-data)]
|
||||
(let [props (-> #js {:x (:x data)
|
||||
:y (:y data)
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue