diff --git a/frontend/src/app/main/fonts.cljs b/frontend/src/app/main/fonts.cljs index c63df3fc2..905762bed 100644 --- a/frontend/src/app/main/fonts.cljs +++ b/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" 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 76840d7e7..36601aaf4 100644 --- a/frontend/src/app/main/ui/workspace/viewport/pixel_overlay.cljs +++ b/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")] - (->> (rx/of {:node svg-node - :width (:width vport) - :result "image-bitmap"}) - (rx/tap #(js/console.log "render-node" %)) + (let [svg-node (dom/get-element "render") + fonts (fonts/get-node-fonts svg-node) + result {:node svg-node + :width (:width vport) + :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) diff --git a/frontend/src/app/rasterizer.cljs b/frontend/src/app/rasterizer.cljs index fcf5de377..36fab6ded 100644 --- a/frontend/src/app/rasterizer.cljs +++ b/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."