From 2c3a3845acb29b3cba627888a3f534b1991b8174 Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Thu, 6 May 2021 11:04:53 +0200 Subject: [PATCH] :bug: Fix problem with embed fonts --- frontend/src/app/main/ui/shapes/text.cljs | 8 +------ .../src/app/main/ui/shapes/text/embed.cljs | 21 +++++++++-------- .../app/main/ui/workspace/shapes/frame.cljs | 9 ++++++++ .../ui/workspace/viewport/pixel_overlay.cljs | 23 ++++--------------- frontend/src/app/util/http.cljs | 12 +++++++--- 5 files changed, 35 insertions(+), 38 deletions(-) diff --git a/frontend/src/app/main/ui/shapes/text.cljs b/frontend/src/app/main/ui/shapes/text.cljs index 6449c3e64..f26386dae 100644 --- a/frontend/src/app/main/ui/shapes/text.cljs +++ b/frontend/src/app/main/ui/shapes/text.cljs @@ -10,7 +10,6 @@ [app.common.geom.shapes :as geom] [app.main.ui.context :as muc] [app.main.ui.shapes.attrs :as attrs] - [app.main.ui.shapes.text.embed :as ste] [app.main.ui.shapes.text.styles :as sts] [app.util.color :as uc] [app.util.object :as obj] @@ -30,15 +29,12 @@ {::mf/wrap-props false} [props] (let [node (obj/get props "node") - embed? (obj/get props "embed-fonts?") children (obj/get props "children") shape (obj/get props "shape") style (sts/generate-root-styles shape node)] [:div.root.rich-text {:style style :xmlns "http://www.w3.org/1999/xhtml"} - (when embed? - [:& ste/embed-fontfaces-style {:node node}]) children])) (mf/defc render-paragraph-set @@ -94,7 +90,6 @@ [props ref] (let [{:keys [id x y width height content] :as shape} (obj/get props "shape") grow-type (obj/get props "grow-type") ;; This is only needed in workspace - embed-fonts? (mf/use-ctx muc/embed-ctx) ;; We add 8px to add a padding for the exporter ;; width (+ width 8) ] @@ -109,5 +104,4 @@ :ref ref} [:& render-node {:index 0 :shape shape - :node content - :embed-fonts? embed-fonts?}]])) + :node content}]])) diff --git a/frontend/src/app/main/ui/shapes/text/embed.cljs b/frontend/src/app/main/ui/shapes/text/embed.cljs index b487bb25f..8c5fc6284 100644 --- a/frontend/src/app/main/ui/shapes/text/embed.cljs +++ b/frontend/src/app/main/ui/shapes/text/embed.cljs @@ -62,12 +62,14 @@ "Given a font and the variant-id, retrieves the style CSS for it." [{:keys [id backend family variants] :as font} font-variant-id] (if (= :google backend) - (->> (http/send! {:method :get - :mode :no-cors - :uri (fonts/gfont-url family [{:id font-variant-id}]) - :response-type :text}) - (rx/map :body) - (http/as-promise)) + (let [uri (fonts/gfont-url family [{:id font-variant-id}])] + (->> (http/send! {:method :get + :mode :cors + :omit-default-headers true + :uri uri + :response-type :text}) + (rx/map :body) + (http/as-promise))) (let [{:keys [name weight style suffix] :as variant} (d/seek #(= (:id %) font-variant-id) variants) result (str/fmt font-face-template {:family family :style style @@ -89,7 +91,7 @@ (with-cache {:key uris :max-age (dt/duration {:hours 4})} (->> (rx/from (seq uris)) (rx/mapcat (fn [uri] - (->> (http/send! {:method :get :uri uri :response-type :blob}) + (->> (http/send! {:method :get :uri uri :response-type :blob :omit-default-headers true}) (rx/map :body) (rx/mapcat wapi/read-file-as-data-url) (rx/map #(vector uri %))))) @@ -124,9 +126,10 @@ (mf/defc embed-fontfaces-style {::mf/wrap-props false - ::mf/wrap [mf/memo]} + ::mf/wrap [#(mf/memo' % (mf/check-props ["shapes"]))]} [props] - (let [node (obj/get props "node") + (let [shapes (obj/get props "shapes") + node {:children (->> shapes (map :content))} fonts (-> node get-node-fonts memoize) style (mf/use-state nil)] diff --git a/frontend/src/app/main/ui/workspace/shapes/frame.cljs b/frontend/src/app/main/ui/workspace/shapes/frame.cljs index 71a38987a..91e31c6ed 100644 --- a/frontend/src/app/main/ui/workspace/shapes/frame.cljs +++ b/frontend/src/app/main/ui/workspace/shapes/frame.cljs @@ -14,6 +14,7 @@ [app.main.ui.context :as muc] [app.main.ui.shapes.frame :as frame] [app.main.ui.shapes.shape :refer [shape-container]] + [app.main.ui.shapes.text.embed :as ste] [app.util.dom :as dom] [app.util.keyboard :as kbd] [app.util.timers :as ts] @@ -76,14 +77,22 @@ (let [shape (unchecked-get props "shape") objects (unchecked-get props "objects") edition (mf/deref refs/selected-edition) + embed-fonts? (mf/use-ctx muc/embed-ctx) shape (gsh/transform-shape shape) children (mapv #(get objects %) (:shapes shape)) + text-childs (->> objects + vals + (filterv #(and (= :text (:type %)) + (= (:id shape) (:frame-id %))))) + ds-modifier (get-in shape [:modifiers :displacement])] (when (and shape (not (:hidden shape))) [:g.frame-wrapper {:display (when (:hidden shape) "none")} [:> shape-container {:shape shape} + (when embed-fonts? + [:& ste/embed-fontfaces-style {:shapes text-childs}]) [:& frame-shape {:shape shape :childs children}]]]))))) diff --git a/frontend/src/app/main/ui/workspace/viewport/pixel_overlay.cljs b/frontend/src/app/main/ui/workspace/viewport/pixel_overlay.cljs index ab46aeb73..9601b2b98 100644 --- a/frontend/src/app/main/ui/workspace/viewport/pixel_overlay.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/pixel_overlay.cljs @@ -130,7 +130,7 @@ (mf/deps img-ref) (fn [] (let [img-node (mf/ref-val img-ref) - svg-node #_(mf/ref-val svg-ref) (dom/get-element "render") + svg-node (dom/get-element "render") xml (-> (js/XMLSerializer.) (.serializeToString svg-node) js/encodeURIComponent @@ -157,21 +157,19 @@ #(rx/dispose! sub)))) (mf/use-effect - #_(mf/deps svg-ref) (fn [] (let [config #js {:attributes true :childList true :subtree true :characterData true} - svg-node #_(mf/ref-val svg-ref) (dom/get-element "render") + svg-node (dom/get-element "render") observer (js/MutationObserver. handle-svg-change) ] (.observe observer svg-node config) (handle-svg-change) ;; Disconnect on unmount - #(.disconnect observer) - ))) + #(.disconnect observer)))) [:* [:div.pixel-overlay @@ -191,17 +189,4 @@ :height (:height vport 0) :style {:position "absolute" :width "100%" - :height "100%"}}] - - #_[:& (mf/provider muc/embed-ctx) {:value true} - [:svg.viewport - {:ref svg-ref - :preserveAspectRatio "xMidYMid meet" - :width (:width vport 0) - :height (:height vport 0) - :view-box (format-viewbox vbox) - :style {:position "absolute" - :width "100%" - :height "100%" - :background-color (get options :background "#E8E9EA")}} - [:& overlay-frames]]]]]])) + :height "100%"}}]]]])) diff --git a/frontend/src/app/util/http.cljs b/frontend/src/app/util/http.cljs index 5c4eeba6c..a5c4920b0 100644 --- a/frontend/src/app/util/http.cljs +++ b/frontend/src/app/util/http.cljs @@ -52,7 +52,7 @@ {"x-frontend-version" (:full @cfg/version)}) (defn fetch - [{:keys [method uri query headers body timeout mode] + [{:keys [method uri query headers body timeout mode omit-default-headers] :or {timeout 10000 mode :cors headers {}}}] (rx/Observable.create (fn [subscriber] @@ -67,9 +67,15 @@ uri (cond-> uri (string? uri) (u/uri) (some? query) (assoc :query query)) - headers (->> (d/merge headers default-headers) - (-update-headers body)) + + headers (cond-> headers + (not omit-default-headers) + (d/merge default-headers)) + + headers (-update-headers body headers) + body (-get-body-data body) + params #js {:method (translate-method method) :headers (clj->js headers) :body body