mirror of
https://github.com/penpot/penpot.git
synced 2025-03-12 07:41:43 -05:00
⚡ Don't use data-uris for resources
This commit is contained in:
parent
240718f2b2
commit
8f356b679d
5 changed files with 12 additions and 55 deletions
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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]
|
||||
|
|
|
@ -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]
|
||||
|
|
|
@ -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"
|
||||
|
|
Loading…
Add table
Reference in a new issue