mirror of
https://github.com/penpot/penpot.git
synced 2025-07-26 00:57:21 +02:00
✨ Load emoji font dynamically when initializing
This commit is contained in:
parent
56ecacee21
commit
2306df5fb7
6 changed files with 80 additions and 48 deletions
|
@ -283,6 +283,7 @@
|
|||
;; canvas, even though we are not using `page-id` inside the hook.
|
||||
;; We think moving this out to a handler will make the render code
|
||||
;; harder to follow through.
|
||||
|
||||
(mf/with-effect [page-id]
|
||||
(when-let [canvas (mf/ref-val canvas-ref)]
|
||||
(->> wasm.api/module
|
||||
|
|
|
@ -99,8 +99,6 @@
|
|||
(h/call wasm/internal-module "_render" timestamp)
|
||||
(set! wasm/internal-frame-id nil))
|
||||
|
||||
|
||||
|
||||
(defn cancel-render
|
||||
[_]
|
||||
(when wasm/internal-frame-id
|
||||
|
@ -606,15 +604,22 @@
|
|||
(h/call wasm/internal-module "_clear_shape_text")
|
||||
(let [paragraph-set (first (dm/get-prop content :children))
|
||||
paragraphs (dm/get-prop paragraph-set :children)
|
||||
fonts (fonts/get-content-fonts content)]
|
||||
fonts (fonts/get-content-fonts content)
|
||||
emoji? (atom false)]
|
||||
(loop [index 0]
|
||||
(when (< index (count paragraphs))
|
||||
(let [paragraph (nth paragraphs index)
|
||||
leaves (dm/get-prop paragraph :children)]
|
||||
(when (seq leaves)
|
||||
(t/write-shape-text leaves paragraph)
|
||||
(let [text (apply str (map :text leaves))]
|
||||
(when (and (not @emoji?) (t/contains-emoji? text))
|
||||
(reset! emoji? true))
|
||||
(t/write-shape-text leaves paragraph text))
|
||||
(recur (inc index))))))
|
||||
(f/store-fonts fonts)))
|
||||
(let [fonts (if @emoji?
|
||||
(f/add-emoji-font fonts)
|
||||
fonts)]
|
||||
(f/store-fonts fonts))))
|
||||
|
||||
(defn set-view-box
|
||||
[zoom vbox]
|
||||
|
|
|
@ -77,7 +77,7 @@
|
|||
|
||||
;; IMPORTANT: It should be noted that only TTF fonts can be stored.
|
||||
(defn- store-font-buffer
|
||||
[font-data font-array-buffer]
|
||||
[font-data font-array-buffer emoji?]
|
||||
(let [id-buffer (:family-id-buffer font-data)
|
||||
size (.-byteLength font-array-buffer)
|
||||
ptr (h/call wasm/internal-module "_alloc_bytes" size)
|
||||
|
@ -90,17 +90,18 @@
|
|||
(aget id-buffer 2)
|
||||
(aget id-buffer 3)
|
||||
(:weight font-data)
|
||||
(:style font-data))
|
||||
(:style font-data)
|
||||
emoji?)
|
||||
true))
|
||||
|
||||
(defn- store-font-url
|
||||
[font-data font-url]
|
||||
[font-data font-url emoji?]
|
||||
(->> (http/send! {:method :get
|
||||
:uri font-url
|
||||
:response-type :blob})
|
||||
(rx/map :body)
|
||||
(rx/mapcat wapi/read-file-as-array-buffer)
|
||||
(rx/map (fn [array-buffer] (store-font-buffer font-data array-buffer)))))
|
||||
(rx/map (fn [array-buffer] (store-font-buffer font-data array-buffer emoji?)))))
|
||||
|
||||
(defn- google-font-ttf-url
|
||||
[font-id font-variant-id]
|
||||
|
@ -120,7 +121,7 @@
|
|||
(dm/str (u/join cf/public-uri "fonts/" asset-id))))
|
||||
|
||||
(defn- store-font-id
|
||||
[font-data asset-id]
|
||||
[font-data asset-id emoji?]
|
||||
(when asset-id
|
||||
(let [uri (font-id->ttf-url (:font-id font-data) asset-id (:font-variant-id font-data))
|
||||
id-buffer (uuid/get-u32 (:wasm-id font-data))
|
||||
|
@ -132,7 +133,7 @@
|
|||
(aget id-buffer 3)
|
||||
(:weight font-data)
|
||||
(:style font-data)))]
|
||||
(when-not font-stored? (store-font-url font-data uri)))))
|
||||
(when-not font-stored? (store-font-url font-data uri emoji?)))))
|
||||
|
||||
(defn serialize-font-style
|
||||
[font-style]
|
||||
|
@ -155,24 +156,36 @@
|
|||
[font-weight]
|
||||
(js/Number font-weight))
|
||||
|
||||
(defn store-font
|
||||
[font]
|
||||
(let [font-id (dm/get-prop font :font-id)
|
||||
font-variant-id (dm/get-prop font :font-variant-id)
|
||||
wasm-id (font-id->uuid font-id)
|
||||
raw-weight (or (:weight (font-db-data font-id font-variant-id)) 400)
|
||||
|
||||
weight (serialize-font-weight raw-weight)
|
||||
|
||||
style (serialize-font-style (cond
|
||||
(str/includes? font-variant-id "italic") "italic"
|
||||
:else "normal"))
|
||||
asset-id (font-id->asset-id font-id font-variant-id)
|
||||
font-data {:wasm-id wasm-id
|
||||
:font-id font-id
|
||||
:font-variant-id font-variant-id
|
||||
:style style
|
||||
:weight weight}
|
||||
emoji? (dm/get-prop font :emoji?)]
|
||||
(store-font-id font-data asset-id emoji?)))
|
||||
|
||||
(defn store-fonts
|
||||
[fonts]
|
||||
(keep (fn [font]
|
||||
(let [font-id (dm/get-prop font :font-id)
|
||||
font-variant-id (dm/get-prop font :font-variant-id)
|
||||
wasm-id (font-id->uuid font-id)
|
||||
raw-weight (or (:weight (font-db-data font-id font-variant-id)) 400)
|
||||
(keep (fn [font] (store-font font)) fonts))
|
||||
|
||||
weight (serialize-font-weight raw-weight)
|
||||
|
||||
style (serialize-font-style (cond
|
||||
(str/includes? font-variant-id "italic") "italic"
|
||||
:else "normal"))
|
||||
asset-id (font-id->asset-id font-id font-variant-id)
|
||||
font-data {:wasm-id wasm-id
|
||||
:font-id font-id
|
||||
:font-variant-id font-variant-id
|
||||
:style style
|
||||
:weight weight}]
|
||||
(store-font-id font-data asset-id))) fonts))
|
||||
|
||||
(defn add-emoji-font
|
||||
[fonts]
|
||||
(conj fonts {:font-id "gfont-noto-color-emoji"
|
||||
:font-variant-id "regular"
|
||||
:style 0
|
||||
:weight 400
|
||||
:emoji? true}))
|
|
@ -20,13 +20,12 @@
|
|||
(defn write-shape-text
|
||||
;; buffer has the following format:
|
||||
;; [<num-leaves> <paragraph_attributes> <leaves_attributes> <text>]
|
||||
[leaves paragraph]
|
||||
[leaves paragraph text]
|
||||
(let [leaves (filter #(not (str/blank? (:text %))) leaves)
|
||||
num-leaves (count leaves)
|
||||
paragraph-attr-size 48
|
||||
leaf-attr-size 52
|
||||
metadata-size (+ 1 paragraph-attr-size (* num-leaves leaf-attr-size))
|
||||
text (apply str (map :text leaves))
|
||||
text-buffer (utf8->buffer text)
|
||||
text-size (.-byteLength text-buffer)
|
||||
buffer (js/ArrayBuffer. (+ metadata-size text-size))
|
||||
|
@ -106,3 +105,8 @@
|
|||
(.set heap (js/Uint8Array. buffer) metadata-offset)))
|
||||
|
||||
(h/call wasm/internal-module "_set_shape_text_content"))
|
||||
|
||||
(def emoji-pattern #"[\uD83C-\uDBFF][\uDC00-\uDFFF]")
|
||||
|
||||
(defn contains-emoji? [s]
|
||||
(boolean (re-find emoji-pattern s)))
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue