♻️ Refactor how fonts are passed to raster

frontend/src/app/main/fonts.cljs

@@ -248,6 +248,28 @@
       (get-default-variant font)))
 
 ;; Font embedding functions
+(defn get-node-fonts
+  "Extracts the fonts used by some node"
+  [node]
+  (let [nodes  (.from js/Array (dom/query-all node "[style*=font]"))
+        result (.reduce nodes (fn [obj node]
+                         (let [style (.-style node)
+                               font-family (.-fontFamily style)
+                               [_ font] (first
+                                         (filter (fn [[_ {:keys [id family]}]]
+                                                   (or (= family font-family)
+                                                       (= id font-family)))
+                                                 @fontsdb))
+                               font-id (:id font)
+                               font-variant (get-variant font (.-fontVariant style))
+                               font-variant-id (:id font-variant)]
+                           (obj/set!
+                            obj
+                            (dm/str font-id ":" font-variant-id)
+                            {:font-id font-id
+                             :font-variant-id font-variant-id})))
+                       #js {})]
+    (.values js/Object result)))
 
 (defn get-content-fonts
   "Extracts the fonts used by the content of a text shape"

frontend/src/app/main/ui/workspace/viewport/pixel_overlay.cljs

@@ -10,6 +10,7 @@
    [app.main.data.modal :as modal]
    [app.main.data.workspace.colors :as dwc]
    [app.main.data.workspace.undo :as dwu]
+   [app.main.fonts :as fonts]
    [app.main.rasterizer :as thr]
    [app.main.store :as st]
    [app.main.ui.context :as ctx]
@@ -133,11 +134,15 @@
         handle-draw-picker-canvas
         (mf/use-callback
          (fn []
-           (let [svg-node (dom/get-element "render")]
+           (let [svg-node (dom/get-element "render")
-             (->> (rx/of {:node svg-node
+                 fonts    (fonts/get-node-fonts svg-node)
-                          :width (:width vport)
+                 result {:node svg-node
-                          :result "image-bitmap"})
+                         :width (:width vport)
-                  (rx/tap #(js/console.log "render-node" %))
+                         :result "image-bitmap"}]
+             (->> (fonts/render-font-styles-cached fonts)
+                  (rx/map (fn [styles]
+                            (assoc result
+                                   :styles styles)))
                   (rx/mapcat thr/render-node)
                   (rx/subs (fn [image-bitmap]
                              (.drawImage canvas-context image-bitmap 0 0)

frontend/src/app/rasterizer.cljs

@@ -238,7 +238,9 @@
                      :scope "penpot/rasterizer"
                      :payload payload}]
     (when-not (identical? js/window js/parent)
-      (.postMessage js/parent message parent-origin))))
+      (if (instance? js/ImageBitmap payload)
+        (.postMessage js/parent message parent-origin #js [payload])
+        (.postMessage js/parent message parent-origin)))))
 
 (defn- send-success!
   "Sends a success message."