Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-21 12:11:37 -05:00
Code Issues Activity

🐛 Fix problem with masked texts on exporting

Browse source
This commit is contained in:
alonso.torres 2021-10-05 16:52:02 +02:00
parent 75a7ce24bf
commit cbee65671c
5 changed files with 43 additions and 15 deletions
CHANGES.md
exporter/src/app/renderer
svg.cljs
frontend/src/app/main
ui.cljs
ui
render.cljs
shapes/text
styles.cljs

1
CHANGES.md
View file

@ -15,6 +15,7 @@
- Fix error screen when operations over comments fail [#1219](https://github.com/penpot/penpot/issues/1219)
- Fix undo problem when changing typography/color from library [#1230](https://github.com/penpot/penpot/issues/1230)
- Fix problem with text margin while rendering [#1231](https://github.com/penpot/penpot/issues/1231)
- Fix problem with masked texts on exporting [Taiga #2116](https://tree.taiga.io/project/penpot/issue/2116)
### :arrow_up: Deps updates
### :boom: Breaking changes

19
exporter/src/app/renderer/svg.cljs
View file

@ -210,11 +210,10 @@
:height (.. attrs -height -value)
:colors (.split colors ",")}))
(extract-single-node [node]
(extract-single-node [[shot node]]
(log/trace :fn :extract-single-node)
(p/let [attrs (bw/eval! node extract-element-attrs)
shot (bw/screenshot node {:omit-background? true :type "png"})]
(p/let [attrs (bw/eval! node extract-element-attrs)]
{:id (unchecked-get attrs "id")
:x (unchecked-get attrs "x")
:y (unchecked-get attrs "y")
@ -223,13 +222,21 @@
:colors (vec (unchecked-get attrs "colors"))
:data shot}))
(resolve-text-node [page node]
(p/let [attrs (bw/eval! node extract-element-attrs)
id (unchecked-get attrs "id")
text-node (bw/select page (str "#screenshot-text-" id " foreignObject"))
shot (bw/screenshot text-node {:omit-background? true :type "png"})]
[shot node]))
(clean-temp-data [{:keys [tempdir] :as node}]
(p/do!
(sh/rmdir! tempdir)
(dissoc node :tempdir)))
(process-text-node [item]
(process-text-node [page item]
(-> (p/resolved item)
(p/then (partial resolve-text-node page))
(p/then extract-single-node)
(p/then trace-node)
(p/then clean-temp-data)))
@ -237,7 +244,7 @@
(process-text-nodes [page]
(log/trace :fn :process-text-nodes)
(-> (bw/select-all page "#screenshot foreignObject")
(p/then (fn [nodes] (p/all (map process-text-node nodes))))))
(p/then (fn [nodes] (p/all (map (partial process-text-node page) nodes))))))
(extract-svg [page]
(p/let [dom (bw/select page "#screenshot")
@ -271,7 +278,7 @@
(p/let [page (render-in-page page rctx)]
(extract-svg page)))]
(let [path (str "/render-object/" file-id "/" page-id "/" object-id)
(let [path (str "/render-object/" file-id "/" page-id "/" object-id "?render-texts=true")
uri (-> (u/uri (cf/get :public-uri))
(assoc :path "/")
(assoc :fragment path))

10
frontend/src/app/main/ui.cljs
View file

@ -152,12 +152,14 @@
:render-object
(do
(let [file-id (uuid (get-in route [:path-params :file-id]))
page-id (uuid (get-in route [:path-params :page-id]))
object-id (uuid (get-in route [:path-params :object-id]))]
(let [file-id (uuid (get-in route [:path-params :file-id]))
page-id (uuid (get-in route [:path-params :page-id]))
object-id (uuid (get-in route [:path-params :object-id]))
render-texts (get-in route [:query-params :render-texts])]
[:& render/render-object {:file-id file-id
:page-id page-id
:object-id object-id}]))
:object-id object-id
:render-texts? (and (some? render-texts) (= render-texts "true"))}]))
:render-sprite
(do

25
frontend/src/app/main/ui/render.cljs
View file

@ -27,7 +27,7 @@
(mf/defc object-svg
{::mf/wrap [mf/memo]}
[{:keys [objects object-id zoom] :or {zoom 1} :as props}]
[{:keys [objects object-id zoom render-texts?] :or {zoom 1} :as props}]
(let [object (get objects object-id)
frame-id (if (= :frame (:type object))
(:id object)
@ -76,7 +76,11 @@
(mf/use-memo
(mf/deps objects)
#(exports/shape-wrapper-factory objects))
]
text-shapes
(->> objects
(filter (fn [[id shape]] (= :text (:type shape))))
(mapv second))]
(mf/use-effect
(mf/deps width height)
@ -100,7 +104,19 @@
:frame [:& frame-wrapper {:shape object :view-box vbox}]
:group [:> shape-container {:shape object}
[:& group-wrapper {:shape object}]]
[:& shape-wrapper {:shape object}])]]))
[:& shape-wrapper {:shape object}])]
;; Auxiliary SVG for rendering text-shapes
(when render-texts?
(for [object text-shapes]
[:svg {:id (str "screenshot-text-" (:id object))
:view-box (str "0 0 " (:width object) " " (:height object))
:width (:width object)
:height (:height object)
:version "1.1"
:xmlns "http://www.w3.org/2000/svg"
:xmlnsXlink "http://www.w3.org/1999/xlink"}
[:& shape-wrapper {:shape (-> object (assoc :x 0 :y 0))}]]))]))
(defn- adapt-root-frame
[objects object-id]
@ -120,7 +136,7 @@
;; backend entry point for download only the data of single page.
(mf/defc render-object
[{:keys [file-id page-id object-id] :as props}]
[{:keys [file-id page-id object-id render-texts?] :as props}]
(let [objects (mf/use-state nil)]
(mf/use-effect
(mf/deps file-id page-id object-id)
@ -140,6 +156,7 @@
(when @objects
[:& object-svg {:objects @objects
:object-id object-id
:render-texts? render-texts?
:zoom 1}])))
(mf/defc render-sprite

3
frontend/src/app/main/ui/shapes/text/styles.cljs
View file

@ -18,7 +18,8 @@
(let [valign (:vertical-align node "top")
width (some-> (:width shape) (+ 1))
base #js {:height (or (:height shape) "100%")
:width (or width "100%")}]
:width (or width "100%")
:fontFamily "sourcesanspro"}]
(cond-> base
(= valign "top") (obj/set! "justifyContent" "flex-start")
(= valign "center") (obj/set! "justifyContent" "center")