Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-26 22:51:29 -05:00
Code Issues Activity

🐛 Fix problems with masks

Browse source
This commit is contained in:
alonso.torres 2022-04-22 10:45:17 +02:00
parent b7d33041e8
commit dfc9d0709d
3 changed files with 40 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/app/main/data/workspace/persistence.cljs
View file

@ -50,7 +50,7 @@
(ptk/reify ::initialize-persistence (ptk/reify ::initialize-persistence
ptk/EffectEvent ptk/EffectEvent
(effect [_ _ stream] (effect [_ _ stream]
(let [stoper (rx/filter #(= :app.main.data.workspace/finalize %) stream) (let [stoper (rx/filter #(= ::finalize %) stream)
forcer (rx/filter #(= ::force-persist %) stream) forcer (rx/filter #(= ::force-persist %) stream)
notifier (->> stream notifier (->> stream
(rx/filter dch/commit-changes?) (rx/filter dch/commit-changes?)

20
frontend/src/app/main/ui/shapes/mask.cljs
View file

@ -51,21 +51,9 @@
render-id (mf/use-ctx muc/render-ctx) render-id (mf/use-ctx muc/render-ctx)
svg-text? (and (= :text (:type mask)) (some? (:position-data mask))) svg-text? (and (= :text (:type mask)) (some? (:position-data mask)))
mask (cond-> mask svg-text? set-white-fill)
mask-bb mask-bb
(cond
svg-text?
(gst/position-data-points mask)
:else
(-> (gsh/transform-shape mask) (-> (gsh/transform-shape mask)
(:points)))] (:points))]
[:*
[:g {:opacity 0}
[:g {:id (str "shape-" (mask-id render-id mask))}
[:& shape-wrapper {:shape (dissoc mask :shadow :blur)}]]]
[:defs [:defs
[:filter {:id (filter-id render-id mask)} [:filter {:id (filter-id render-id mask)}
[:feFlood {:flood-color "white" [:feFlood {:flood-color "white"
@ -83,10 +71,10 @@
(map #(str (:x %) "," (:y %))) (map #(str (:x %) "," (:y %)))
(str/join " "))}]] (str/join " "))}]]
;; When te shape is a text we pass to the shape the info and disable the filter.
;; There is a bug in Firefox with filters and texts. We change the text to white at shape level
[:mask {:class "mask-shape" [:mask {:class "mask-shape"
:id (mask-id render-id mask)} :id (mask-id render-id mask)}
;; SVG texts are broken in Firefox with the filter. When the masking shapes is a text
;; we use the `set-white-fill` instead of using the filter
[:g {:filter (when-not svg-text? (filter-url render-id mask))} [:g {:filter (when-not svg-text? (filter-url render-id mask))}
[:use {:href (str "#shape-" (mask-id render-id mask))}]]]]]))) [:& shape-wrapper {:shape (-> mask (dissoc :shadow :blur) (assoc :is-mask? true))}]]]])))

16
frontend/src/app/main/ui/shapes/text/svg_text.cljs
View file

@ -19,13 +19,27 @@
(def fill-attrs [:fill-color :fill-color-gradient :fill-opacity]) (def fill-attrs [:fill-color :fill-color-gradient :fill-opacity])
(defn set-white-fill
[shape]
(let [update-color
(fn [data]
(-> data
(dissoc :fill-color :fill-opacity :fill-color-gradient)
(assoc :fills [{:fill-color "#FFFFFF" :fill-opacity 1}])))]
(-> shape
(d/update-when :position-data #(mapv update-color %))
(assoc :stroke-color "#FFFFFF" :stroke-opacity 1))))
(mf/defc text-shape (mf/defc text-shape
{::mf/wrap-props false {::mf/wrap-props false
::mf/wrap [mf/memo]} ::mf/wrap [mf/memo]}
[props] [props]
(let [render-id (mf/use-ctx muc/render-ctx) (let [render-id (mf/use-ctx muc/render-ctx)
{:keys [x y width height position-data] :as shape} (obj/get props "shape") shape (obj/get props "shape")
shape (cond-> shape (:is-mask? shape) set-white-fill)
{:keys [x y width height position-data]} shape
transform (str (gsh/transform-matrix shape)) transform (str (gsh/transform-matrix shape))