From cbee65671cd860288ce74940e533570ec7828d49 Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Tue, 5 Oct 2021 16:52:02 +0200 Subject: [PATCH] :bug: Fix problem with masked texts on exporting --- CHANGES.md | 1 + exporter/src/app/renderer/svg.cljs | 19 +++++++++----- frontend/src/app/main/ui.cljs | 10 +++++--- frontend/src/app/main/ui/render.cljs | 25 ++++++++++++++++--- .../src/app/main/ui/shapes/text/styles.cljs | 3 ++- 5 files changed, 43 insertions(+), 15 deletions(-) diff --git a/CHANGES.md b/CHANGES.md index d2c57891c..f66fc83d6 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -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 diff --git a/exporter/src/app/renderer/svg.cljs b/exporter/src/app/renderer/svg.cljs index 93e0649f4..54544aa24 100644 --- a/exporter/src/app/renderer/svg.cljs +++ b/exporter/src/app/renderer/svg.cljs @@ -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)) diff --git a/frontend/src/app/main/ui.cljs b/frontend/src/app/main/ui.cljs index 9a939bd49..bd75ba4f7 100644 --- a/frontend/src/app/main/ui.cljs +++ b/frontend/src/app/main/ui.cljs @@ -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 diff --git a/frontend/src/app/main/ui/render.cljs b/frontend/src/app/main/ui/render.cljs index 9cea9c60a..44afd4010 100644 --- a/frontend/src/app/main/ui/render.cljs +++ b/frontend/src/app/main/ui/render.cljs @@ -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 diff --git a/frontend/src/app/main/ui/shapes/text/styles.cljs b/frontend/src/app/main/ui/shapes/text/styles.cljs index 25e386262..1ee53dd4d 100644 --- a/frontend/src/app/main/ui/shapes/text/styles.cljs +++ b/frontend/src/app/main/ui/shapes/text/styles.cljs @@ -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")