🐛 Fix problem with embed fonts

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
+                      :node content}]]))
-                      :embed-fonts? embed-fonts?}]]))

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)
+    (let [uri (fonts/gfont-url family [{:id font-variant-id}])]
       (->> (http/send! {:method :get
-                      :mode :no-cors
+                        :mode :cors
-                      :uri (fonts/gfont-url family [{:id font-variant-id}])
+                        :omit-default-headers true
+                        :uri uri
                         :response-type :text})
            (rx/map :body)
-         (http/as-promise))
+           (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)]
 

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}]]])))))

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%"}}]
+                         :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]]]]]]))

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