From 8f356b679d2c46097b523e6c9a813ac941858f09 Mon Sep 17 00:00:00 2001 From: Aitor Date: Wed, 15 Nov 2023 17:20:34 +0100 Subject: [PATCH] :zap: Don't use data-uris for resources --- .../src/app/main/ui/shapes/custom_stroke.cljs | 4 +-- frontend/src/app/main/ui/shapes/fills.cljs | 20 ++++------- .../app/main/ui/shapes/text/fontfaces.cljs | 35 ++----------------- .../app/main/ui/workspace/shapes/frame.cljs | 4 +-- .../src/app/main/ui/workspace/viewport.cljs | 4 +-- 5 files changed, 12 insertions(+), 55 deletions(-) diff --git a/frontend/src/app/main/ui/shapes/custom_stroke.cljs b/frontend/src/app/main/ui/shapes/custom_stroke.cljs index 6a0a2ad60..205f83a6e 100644 --- a/frontend/src/app/main/ui/shapes/custom_stroke.cljs +++ b/frontend/src/app/main/ui/shapes/custom_stroke.cljs @@ -16,7 +16,6 @@ [app.config :as cf] [app.main.ui.context :as muc] [app.main.ui.shapes.attrs :as attrs] - [app.main.ui.shapes.embed :as embed] [app.main.ui.shapes.gradients :as grad] [app.util.object :as obj] [cuerdas.core :as str] @@ -212,7 +211,6 @@ :shape shape} stroke-image (:stroke-image stroke) uri (when stroke-image (cf/resolve-file-media stroke-image)) - embed (embed/use-data-uris [uri]) stroke-width (case (:stroke-alignment stroke :center) :center (/ (:stroke-width stroke 0) 2) @@ -229,7 +227,7 @@ w (+ (dm/get-prop selrect :width) (* 2 stroke-margin)) h (+ (dm/get-prop selrect :height) (* 2 stroke-margin)) - image-props #js {:href (get embed uri uri) + image-props #js {:href uri :preserveAspectRatio "xMidYMid slice" :width 1 :height 1 diff --git a/frontend/src/app/main/ui/shapes/fills.cljs b/frontend/src/app/main/ui/shapes/fills.cljs index a7dc509e2..dca1f78a9 100644 --- a/frontend/src/app/main/ui/shapes/fills.cljs +++ b/frontend/src/app/main/ui/shapes/fills.cljs @@ -9,9 +9,8 @@ [app.common.data :as d] [app.common.data.macros :as dm] [app.common.geom.shapes :as gsh] - [app.config :as cfg] + [app.config :as cf] [app.main.ui.shapes.attrs :as attrs] - [app.main.ui.shapes.embed :as embed] [app.main.ui.shapes.gradients :as grad] [app.util.object :as obj] [rumext.v2 :as mf])) @@ -40,29 +39,24 @@ uri (cond (some? metadata) - (cfg/resolve-file-media metadata) + (cf/resolve-file-media metadata) (some? image) - (cfg/resolve-file-media image)) + (cf/resolve-file-media image)) uris (into [uri] (comp (keep :fill-image) - (map cfg/resolve-file-media)) + (map cf/resolve-file-media)) fills) - embed (embed/use-data-uris uris) transform (gsh/transform-str shape) - ;; When true the image has not loaded yet - loading? (not-any? (partial contains? embed) uris) - pat-props #js {:patternUnits "userSpaceOnUse" :x x :y y :width width - :height height - :data-loading loading?} + :height height} pat-props (if (= :path type) (obj/set! pat-props "patternTransform" transform) @@ -96,9 +90,9 @@ :height height :style style}] (if (:fill-image value) - (let [uri (cfg/resolve-file-media (:fill-image value)) + (let [uri (cf/resolve-file-media (:fill-image value)) image-props #js {:id (dm/str "fill-image-" render-id "-" fill-index) - :href (get embed uri uri) + :href (get uris uri uri) :preserveAspectRatio "xMidYMid slice" :width width :height height diff --git a/frontend/src/app/main/ui/shapes/text/fontfaces.cljs b/frontend/src/app/main/ui/shapes/text/fontfaces.cljs index c3016b223..44a12e8c0 100644 --- a/frontend/src/app/main/ui/shapes/text/fontfaces.cljs +++ b/frontend/src/app/main/ui/shapes/text/fontfaces.cljs @@ -9,22 +9,12 @@ [app.common.data :as d] [app.common.files.helpers :as cfh] [app.main.fonts :as fonts] - [app.main.ui.shapes.embed :as embed] [app.util.object :as obj] [beicon.core :as rx] [clojure.set :as set] [cuerdas.core :as str] [rumext.v2 :as mf])) -(defn replace-embeds - "Replace into the font-faces of a CSS the URL's that are present in `embed-data` by its - data-uri" - [css urls embed-data] - (letfn [(replace-url [css url] - (str/replace css url (get embed-data url url)))] - (->> urls - (reduce replace-url css)))) - (defn use-fonts-css "Hook that retrieves the CSS of the fonts passed as parameter" [fonts] @@ -64,31 +54,10 @@ {::mf/wrap-props false ::mf/wrap [#(mf/memo' % (mf/check-props ["fonts"]))]} [props] - (let [fonts (obj/get props "fonts") - ;; Fetch its CSS fontfaces - fonts-css (use-fonts-css fonts) - - ;; Extract from the CSS the URL's to embed - fonts-urls (mf/use-memo - (mf/deps fonts-css) - #(fonts/extract-fontface-urls fonts-css)) - - ;; Calculate the data-uris for these fonts - fonts-embed (embed/use-data-uris fonts-urls) - - loading? (some? (d/seek #(not (contains? fonts-embed %)) fonts-urls)) - - ;; Creates a style tag by replacing the urls with the data uri - style (replace-embeds fonts-css fonts-urls fonts-embed)] - - (cond - (d/not-empty? style) - [:style {:data-loading loading?} style] - - (d/not-empty? fonts) - [:style {:data-loading true}]))) + fonts-css (use-fonts-css fonts)] + [:style fonts-css])) (defn shape->fonts [shape objects] diff --git a/frontend/src/app/main/ui/workspace/shapes/frame.cljs b/frontend/src/app/main/ui/workspace/shapes/frame.cljs index 05544e76d..5deae5db4 100644 --- a/frontend/src/app/main/ui/workspace/shapes/frame.cljs +++ b/frontend/src/app/main/ui/workspace/shapes/frame.cljs @@ -18,7 +18,6 @@ [app.main.refs :as refs] [app.main.store :as st] [app.main.ui.context :as ctx] - [app.main.ui.shapes.embed :as embed] [app.main.ui.shapes.frame :as frame] [app.main.ui.shapes.shape :refer [shape-container]] [app.main.ui.workspace.shapes.common :refer [check-shape-props]] @@ -44,9 +43,8 @@ (refs/children-objects shape-id)) childs (mf/deref childs-ref)] - [:& (mf/provider embed/context) {:value true} [:& shape-container {:shape shape :ref ref :disable-shadows? (cfh/is-direct-child-of-root? shape)} - [:& frame-shape {:shape shape :childs childs}]]])))) + [:& frame-shape {:shape shape :childs childs}]])))) (defn check-props [new-props old-props] diff --git a/frontend/src/app/main/ui/workspace/viewport.cljs b/frontend/src/app/main/ui/workspace/viewport.cljs index 34b4948d9..7a59d0287 100644 --- a/frontend/src/app/main/ui/workspace/viewport.cljs +++ b/frontend/src/app/main/ui/workspace/viewport.cljs @@ -18,7 +18,6 @@ [app.main.ui.context :as ctx] [app.main.ui.hooks :as ui-hooks] [app.main.ui.measurements :as msr] - [app.main.ui.shapes.embed :as embed] [app.main.ui.shapes.export :as use] [app.main.ui.workspace.shapes :as shapes] [app.main.ui.workspace.shapes.text.editor :as editor] @@ -329,11 +328,10 @@ [:& (mf/provider ctx/current-vbox) {:value vbox'} [:& (mf/provider use/include-metadata-ctx) {:value (dbg/enabled? :show-export-metadata)} - [:& (mf/provider embed/context) {:value true} ;; Render root shape [:& shapes/root-shape {:key page-id :objects base-objects - :active-frames @active-frames}]]]]] + :active-frames @active-frames}]]]] [:svg.viewport-controls {:xmlns "http://www.w3.org/2000/svg"