Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-21 12:11:37 -05:00
Code Issues Activity

⚡ Don't use data-uris for resources

Browse source
This commit is contained in:
Aitor 2023-11-15 17:20:34 +01:00 • committed by Andrey Antukh
parent 240718f2b2
commit 8f356b679d
5 changed files with 12 additions and 55 deletions
frontend/src/app/main/ui
shapes
custom_stroke.cljsfills.cljs
text
fontfaces.cljs
workspace
shapes
frame.cljs
viewport.cljs

4
frontend/src/app/main/ui/shapes/custom_stroke.cljs
View file

@ -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

20
frontend/src/app/main/ui/shapes/fills.cljs
View file

@ -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

35
frontend/src/app/main/ui/shapes/text/fontfaces.cljs
View file

@ -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]

4
frontend/src/app/main/ui/workspace/shapes/frame.cljs
View file

@ -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]

4
frontend/src/app/main/ui/workspace/viewport.cljs
View file

@ -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"