Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-08 16:00:19 -05:00
Code Issues Activity

🐛 Fix problem with embed fonts

Browse source
This commit is contained in:
alonso.torres 2021-05-06 11:04:53 +02:00 committed by Andrey Antukh
parent 4bf0ae0a9d
commit 2c3a3845ac
5 changed files with 35 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -10,7 +10,6 @@
[app.common.geom.shapes :as geom]
[app.main.ui.context :as muc]
[app.main.ui.shapes.attrs :as attrs]
[app.main.ui.shapes.text.embed :as ste]
[app.main.ui.shapes.text.styles :as sts]
[app.util.color :as uc]
[app.util.object :as obj]
@ -30,15 +29,12 @@
{::mf/wrap-props false}
[props]
(let [node (obj/get props "node")
embed? (obj/get props "embed-fonts?")
children (obj/get props "children")
shape (obj/get props "shape")
style (sts/generate-root-styles shape node)]
[:div.root.rich-text
{:style style
:xmlns "http://www.w3.org/1999/xhtml"}
(when embed?
[:& ste/embed-fontfaces-style {:node node}])
children]))
(mf/defc render-paragraph-set
@ -94,7 +90,6 @@
[props ref]
(let [{:keys [id x y width height content] :as shape} (obj/get props "shape")
grow-type (obj/get props "grow-type") ;; This is only needed in workspace
embed-fonts? (mf/use-ctx muc/embed-ctx)
;; We add 8px to add a padding for the exporter
;; width (+ width 8)
]
@ -109,5 +104,4 @@
:ref ref}
[:& render-node {:index 0
:shape shape
:node content
:embed-fonts? embed-fonts?}]]))
:node content}]]))

21
frontend/src/app/main/ui/shapes/text/embed.cljs
View file

@ -62,12 +62,14 @@
"Given a font and the variant-id, retrieves the style CSS for it."
[{:keys [id backend family variants] :as font} font-variant-id]
(if (= :google backend)
(->> (http/send! {:method :get
:mode :no-cors
:uri (fonts/gfont-url family [{:id font-variant-id}])
:response-type :text})
(rx/map :body)
(http/as-promise))
(let [uri (fonts/gfont-url family [{:id font-variant-id}])]
(->> (http/send! {:method :get
:mode :cors
:omit-default-headers true
:uri uri
:response-type :text})
(rx/map :body)
(http/as-promise)))
(let [{:keys [name weight style suffix] :as variant} (d/seek #(= (:id %) font-variant-id) variants)
result (str/fmt font-face-template {:family family
:style style
@ -89,7 +91,7 @@
(with-cache {:key uris :max-age (dt/duration {:hours 4})}
(->> (rx/from (seq uris))
(rx/mapcat (fn [uri]
(->> (http/send! {:method :get :uri uri :response-type :blob})
(->> (http/send! {:method :get :uri uri :response-type :blob :omit-default-headers true})
(rx/map :body)
(rx/mapcat wapi/read-file-as-data-url)
(rx/map #(vector uri %)))))
@ -124,9 +126,10 @@
(mf/defc embed-fontfaces-style
{::mf/wrap-props false
::mf/wrap [mf/memo]}
::mf/wrap [#(mf/memo' % (mf/check-props ["shapes"]))]}
[props]
(let [node (obj/get props "node")
(let [shapes (obj/get props "shapes")
node {:children (->> shapes (map :content))}
fonts (-> node get-node-fonts memoize)
style (mf/use-state nil)]

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

@ -14,6 +14,7 @@
[app.main.ui.context :as muc]
[app.main.ui.shapes.frame :as frame]
[app.main.ui.shapes.shape :refer [shape-container]]
[app.main.ui.shapes.text.embed :as ste]
[app.util.dom :as dom]
[app.util.keyboard :as kbd]
[app.util.timers :as ts]
@ -76,14 +77,22 @@
(let [shape (unchecked-get props "shape")
objects (unchecked-get props "objects")
edition (mf/deref refs/selected-edition)
embed-fonts? (mf/use-ctx muc/embed-ctx)
shape (gsh/transform-shape shape)
children (mapv #(get objects %) (:shapes shape))
text-childs (->> objects
vals
(filterv #(and (= :text (:type %))
(= (:id shape) (:frame-id %)))))
ds-modifier (get-in shape [:modifiers :displacement])]
(when (and shape (not (:hidden shape)))
[:g.frame-wrapper {:display (when (:hidden shape) "none")}
[:> shape-container {:shape shape}
(when embed-fonts?
[:& ste/embed-fontfaces-style {:shapes text-childs}])
[:& frame-shape
{:shape shape
:childs children}]]])))))

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

@ -130,7 +130,7 @@
(mf/deps img-ref)
(fn []
(let [img-node (mf/ref-val img-ref)
svg-node #_(mf/ref-val svg-ref) (dom/get-element "render")
svg-node (dom/get-element "render")
xml (-> (js/XMLSerializer.)
(.serializeToString svg-node)
js/encodeURIComponent
@ -157,21 +157,19 @@
#(rx/dispose! sub))))
(mf/use-effect
#_(mf/deps svg-ref)
(fn []
(let [config #js {:attributes true
:childList true
:subtree true
:characterData true}
svg-node #_(mf/ref-val svg-ref) (dom/get-element "render")
svg-node (dom/get-element "render")
observer (js/MutationObserver. handle-svg-change)
]
(.observe observer svg-node config)
(handle-svg-change)
;; Disconnect on unmount
#(.disconnect observer)
)))
#(.disconnect observer))))
[:*
[:div.pixel-overlay
@ -191,17 +189,4 @@
:height (:height vport 0)
:style {:position "absolute"
:width "100%"
:height "100%"}}]
#_[:& (mf/provider muc/embed-ctx) {:value true}
[:svg.viewport
{:ref svg-ref
:preserveAspectRatio "xMidYMid meet"
:width (:width vport 0)
:height (:height vport 0)
:view-box (format-viewbox vbox)
:style {:position "absolute"
:width "100%"
:height "100%"
:background-color (get options :background "#E8E9EA")}}
[:& overlay-frames]]]]]]))
:height "100%"}}]]]]))

12
frontend/src/app/util/http.cljs
View file

@ -52,7 +52,7 @@
{"x-frontend-version" (:full @cfg/version)})
(defn fetch
[{:keys [method uri query headers body timeout mode]
[{:keys [method uri query headers body timeout mode omit-default-headers]
:or {timeout 10000 mode :cors headers {}}}]
(rx/Observable.create
(fn [subscriber]
@ -67,9 +67,15 @@
uri (cond-> uri
(string? uri) (u/uri)
(some? query) (assoc :query query))
headers (->> (d/merge headers default-headers)
(-update-headers body))
headers (cond-> headers
(not omit-default-headers)
(d/merge default-headers))
headers (-update-headers body headers)
body (-get-body-data body)
params #js {:method (translate-method method)
:headers (clj->js headers)
:body body