mirror of
https://github.com/penpot/penpot.git
synced 2025-03-11 07:11:32 -05:00
🐛 Fix problems with text gradients
This commit is contained in:
alonso.torres
parent
f1768c5a07
commit
7fa47d68a8
5 changed files with 95 additions and 46 deletions
|
|
@ -140,6 +140,28 @@
|
|||
|
||||
(gmt/translate (gpt/negate shape-center)))))
|
||||
|
||||
(defn inverse-transform-matrix
|
||||
([shape]
|
||||
(inverse-transform-matrix shape nil))
|
||||
|
||||
([shape params]
|
||||
(inverse-transform-matrix shape params (or (gco/shape->center shape) (gpt/point 0 0))))
|
||||
|
||||
([{:keys [flip-x flip-y transform-inverse] :as shape} {:keys [no-flip]} shape-center]
|
||||
(-> (gmt/matrix)
|
||||
(gmt/translate shape-center)
|
||||
|
||||
(cond-> (and flip-x no-flip)
|
||||
(gmt/scale (gpt/point -1 1)))
|
||||
|
||||
(cond-> (and flip-y no-flip)
|
||||
(gmt/scale (gpt/point 1 -1)))
|
||||
|
||||
(cond-> (some? transform-inverse)
|
||||
(gmt/multiply transform-inverse))
|
||||
|
||||
(gmt/translate (gpt/negate shape-center)))))
|
||||
|
||||
(defn transform-str
|
||||
([shape]
|
||||
(transform-str shape nil))
|
||||
|
|
@ -152,21 +174,6 @@
|
|||
(dm/str (transform-matrix shape params))
|
||||
"")))
|
||||
|
||||
;; FIXME: performance
|
||||
(defn inverse-transform-matrix
|
||||
([shape]
|
||||
(let [shape-center (or (gco/shape->center shape)
|
||||
(gpt/point 0 0))]
|
||||
(inverse-transform-matrix shape shape-center)))
|
||||
([{:keys [flip-x flip-y] :as shape} center]
|
||||
(-> (gmt/matrix)
|
||||
(gmt/translate center)
|
||||
(cond->
|
||||
flip-x (gmt/scale (gpt/point -1 1))
|
||||
flip-y (gmt/scale (gpt/point 1 -1)))
|
||||
(gmt/multiply (:transform-inverse shape (gmt/matrix)))
|
||||
(gmt/translate (gpt/negate center)))))
|
||||
|
||||
;; FIXME: move to geom rect?
|
||||
(defn transform-rect
|
||||
"Transform a rectangles and changes its attributes"
|
||||
|
|
|
|||
|
|
@ -244,6 +244,21 @@
|
|||
(run! #(.appendCodePoint sb (int %)) (subvec cpoints start end))
|
||||
(.toString sb))))
|
||||
|
||||
(defn- fix-gradients
|
||||
"Conversion from draft doesn't convert correctly the fills gradient types. This
|
||||
function change the type from string to keyword of the gradient type"
|
||||
[data]
|
||||
(letfn [(fix-type [type]
|
||||
(cond-> type
|
||||
(string? type) keyword))
|
||||
|
||||
(update-fill [fill]
|
||||
(d/update-in-when fill [:fill-color-gradient :type] fix-type))
|
||||
|
||||
(update-all-fills [fills]
|
||||
(mapv update-fill fills))]
|
||||
(d/update-when data :fills update-all-fills)))
|
||||
|
||||
(defn convert-from-draft
|
||||
[content]
|
||||
(letfn [(extract-text [cpoints part]
|
||||
|
|
@ -251,7 +266,9 @@
|
|||
end (inc (first (last part)))
|
||||
text (code-points->text cpoints start end)
|
||||
attrs (second (first part))]
|
||||
(assoc attrs :text text)))
|
||||
(-> attrs
|
||||
(fix-gradients)
|
||||
(assoc :text text))))
|
||||
|
||||
(split-texts [text styles]
|
||||
(let [cpoints (text->code-points text)
|
||||
|
|
@ -268,7 +285,8 @@
|
|||
(let [key (get block :key)
|
||||
text (get block :text)
|
||||
styles (get block :inlineStyleRanges)
|
||||
data (get block :data)]
|
||||
data (->> (get block :data)
|
||||
fix-gradients)]
|
||||
(-> data
|
||||
(assoc :key key)
|
||||
(assoc :type "paragraph")
|
||||
|
|
|
|||
|
|
@ -8,7 +8,10 @@
|
|||
(:require
|
||||
[app.common.data :as d]
|
||||
[app.common.data.macros :as dm]
|
||||
[app.common.files.helpers :as cfh]
|
||||
[app.common.geom.point :as gpt]
|
||||
[app.common.geom.shapes :as gsh]
|
||||
[app.common.geom.shapes.text :as gst]
|
||||
[app.config :as cf]
|
||||
[app.main.ui.shapes.attrs :as attrs]
|
||||
[app.main.ui.shapes.gradients :as grad]
|
||||
|
|
@ -28,7 +31,12 @@
|
|||
fills (get shape :fills [])
|
||||
|
||||
selrect (dm/get-prop shape :selrect)
|
||||
|
||||
bounds (when (cfh/text-shape? shape)
|
||||
(gst/shape->rect shape))
|
||||
|
||||
metadata (get shape :metadata)
|
||||
|
||||
x (dm/get-prop selrect :x)
|
||||
y (dm/get-prop selrect :y)
|
||||
width (dm/get-prop selrect :width)
|
||||
|
|
@ -62,32 +70,50 @@
|
|||
(obj/set! pat-props "patternTransform" transform)
|
||||
pat-props)]
|
||||
|
||||
(for [[shape-index shape] (d/enumerate (or (:position-data shape) [shape]))]
|
||||
[:* {:key (dm/str shape-index)}
|
||||
(for [[fill-index value] (reverse (d/enumerate (get shape :fills [])))]
|
||||
(for [[obj-index obj] (d/enumerate (or (:position-data shape) [shape]))]
|
||||
[:* {:key (dm/str obj-index)}
|
||||
(for [[fill-index value] (reverse (d/enumerate (get obj :fills [])))]
|
||||
(when (some? (:fill-color-gradient value))
|
||||
(let [gradient (:fill-color-gradient value)
|
||||
|
||||
from-p (-> (gpt/point (+ x (* width (:start-x gradient)))
|
||||
(+ y (* height (:start-y gradient)))))
|
||||
to-p (-> (gpt/point (+ x (* width (:end-x gradient)))
|
||||
(+ y (* height (:end-y gradient)))))
|
||||
|
||||
gradient
|
||||
(cond-> gradient
|
||||
(some? bounds)
|
||||
(assoc
|
||||
:start-x (/ (- (:x from-p) (:x bounds)) (:width bounds))
|
||||
:start-y (/ (- (:y from-p) (:y bounds)) (:height bounds))
|
||||
:end-x (/ (- (:x to-p) (:x bounds)) (:width bounds))
|
||||
:end-y (/ (- (:y to-p) (:y bounds)) (:height bounds))))
|
||||
|
||||
props #js {:id (dm/str "fill-color-gradient-" render-id "-" fill-index)
|
||||
:key (dm/str fill-index)
|
||||
:gradient gradient
|
||||
:shape shape}]
|
||||
(case (:type gradient)
|
||||
:linear [:> grad/linear-gradient props]
|
||||
:radial [:> grad/radial-gradient props]))))
|
||||
:shape obj}]
|
||||
(case (d/name (:type gradient))
|
||||
"linear" [:> grad/linear-gradient props]
|
||||
"radial" [:> grad/radial-gradient props]))))
|
||||
|
||||
|
||||
(let [fill-id (dm/str "fill-" shape-index "-" render-id)]
|
||||
(let [fill-id (dm/str "fill-" obj-index "-" render-id)]
|
||||
[:> :pattern (-> (obj/clone pat-props)
|
||||
(obj/set! "id" fill-id)
|
||||
(cond-> has-image?
|
||||
(cond-> (and has-image? (nil? bounds))
|
||||
(-> (obj/set! "width" (* width no-repeat-padding))
|
||||
(obj/set! "height" (* height no-repeat-padding)))))
|
||||
(obj/set! "height" (* height no-repeat-padding))))
|
||||
(cond-> (some? bounds)
|
||||
(-> (obj/set! "width" (:width bounds))
|
||||
(obj/set! "height" (:height bounds)))))
|
||||
[:g
|
||||
(for [[fill-index value] (reverse (d/enumerate (get shape :fills [])))]
|
||||
(for [[fill-index value] (reverse (d/enumerate (get obj :fills [])))]
|
||||
(let [style (attrs/get-fill-style value fill-index render-id type)
|
||||
props #js {:key (dm/str fill-index)
|
||||
:width width
|
||||
:height height
|
||||
:width (d/nilv (:width bounds) width)
|
||||
:height (d/nilv (:height bounds) height)
|
||||
:style style}]
|
||||
(if (:fill-image value)
|
||||
(let [uri (cf/resolve-file-media (:fill-image value))
|
||||
|
|
|
|||
|
|
@ -93,7 +93,7 @@
|
|||
:textTransform text-transform
|
||||
:color (if (and show-text? (not gradient?)) text-color "transparent")
|
||||
:background (when (and show-text? gradient?) text-color)
|
||||
:caretColor (or text-color "black")
|
||||
:caretColor (if (and (not gradient?) text-color) text-color "black")
|
||||
:overflowWrap "initial"
|
||||
:lineBreak "auto"
|
||||
:whiteSpace "break-spaces"
|
||||
|
|
|
|||
|
|
@ -118,7 +118,7 @@
|
|||
:on-pointer-up on-pointer-up}]])
|
||||
|
||||
(mf/defc gradient-handler-transformed
|
||||
[{:keys [from-p to-p width-p from-color to-color zoom editing transform
|
||||
[{:keys [from-p to-p width-p from-color to-color zoom editing
|
||||
on-change-start on-change-finish on-change-width]}]
|
||||
(let [moving-point (mf/use-var nil)
|
||||
angle (+ 90 (gpt/angle from-p to-p))
|
||||
|
|
@ -151,7 +151,7 @@
|
|||
(reset! moving-point nil))]
|
||||
|
||||
(mf/use-effect
|
||||
(mf/deps @moving-point from-p to-p width-p transform)
|
||||
(mf/deps @moving-point from-p to-p width-p)
|
||||
(fn []
|
||||
(let [subs (->> st/stream
|
||||
(rx/filter mse/pointer-event?)
|
||||
|
|
@ -159,18 +159,17 @@
|
|||
(rx/map mse/get-pointer-position)
|
||||
(rx/subs!
|
||||
(fn [pt]
|
||||
(let [pt (gpt/transform pt transform)]
|
||||
(case @moving-point
|
||||
:from-p (when on-change-start (on-change-start pt))
|
||||
:to-p (when on-change-finish (on-change-finish pt))
|
||||
:width-p (when on-change-width
|
||||
(let [width-v (gpt/unit (gpt/to-vec from-p width-p))
|
||||
distance (gpt/point-line-distance pt from-p to-p)
|
||||
new-width-p (gpt/add
|
||||
from-p
|
||||
(gpt/multiply width-v (gpt/point distance)))]
|
||||
(on-change-width new-width-p)))
|
||||
nil)))))]
|
||||
(case @moving-point
|
||||
:from-p (when on-change-start (on-change-start pt))
|
||||
:to-p (when on-change-finish (on-change-finish pt))
|
||||
:width-p (when on-change-width
|
||||
(let [width-v (gpt/unit (gpt/to-vec from-p width-p))
|
||||
distance (gpt/point-line-distance pt from-p to-p)
|
||||
new-width-p (gpt/add
|
||||
from-p
|
||||
(gpt/multiply width-v (gpt/point distance)))]
|
||||
(on-change-width new-width-p)))
|
||||
nil))))]
|
||||
(fn [] (rx/dispose! subs)))))
|
||||
[:g.gradient-handlers
|
||||
[:defs
|
||||
|
|
@ -296,7 +295,6 @@
|
|||
:width-p (when (= :radial (:type gradient)) width-p)
|
||||
:from-color {:value start-color :opacity start-opacity}
|
||||
:to-color {:value end-color :opacity end-opacity}
|
||||
:transform transform
|
||||
:zoom zoom
|
||||
:on-change-start on-change-start
|
||||
:on-change-finish on-change-finish
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue