mirror of
https://github.com/penpot/penpot.git
synced 2025-06-03 19:41:38 +02:00
♻️ Refactor the text size calculations
This commit is contained in:
alonso.torres
parent
b67b3243bb
commit
2a17f0e507
21 changed files with 1128 additions and 1113 deletions
|
|
@ -9,201 +9,56 @@
|
|||
|
||||
(ns app.main.ui.shapes.text
|
||||
(:require
|
||||
[app.common.data :as d]
|
||||
[app.common.geom.matrix :as gmt]
|
||||
[app.common.geom.shapes :as geom]
|
||||
[app.main.data.fetch :as df]
|
||||
[app.main.fonts :as fonts]
|
||||
[cuerdas.core :as str]
|
||||
[rumext.alpha :as mf]
|
||||
[app.main.ui.context :as muc]
|
||||
[app.main.ui.shapes.group :refer [mask-id-ctx]]
|
||||
[app.util.color :as uc]
|
||||
[app.common.data :as d]
|
||||
[app.common.geom.shapes :as geom]
|
||||
[app.common.geom.matrix :as gmt]
|
||||
[app.util.object :as obj]
|
||||
[app.util.text :as ut]
|
||||
[clojure.set :as set]
|
||||
[cuerdas.core :as str]
|
||||
[promesa.core :as p]
|
||||
[rumext.alpha :as mf]))
|
||||
|
||||
;; --- Text Editor Rendering
|
||||
|
||||
(defn- generate-root-styles
|
||||
[data]
|
||||
(let [valign (obj/get data "vertical-align" "top")
|
||||
talign (obj/get data "text-align" "flex-start")
|
||||
base #js {:height "100%"
|
||||
:width "100%"
|
||||
:display "flex"}]
|
||||
(cond-> base
|
||||
(= valign "top") (obj/set! "alignItems" "flex-start")
|
||||
(= valign "center") (obj/set! "alignItems" "center")
|
||||
(= valign "bottom") (obj/set! "alignItems" "flex-end")
|
||||
(= talign "left") (obj/set! "justifyContent" "flex-start")
|
||||
(= talign "center") (obj/set! "justifyContent" "center")
|
||||
(= talign "right") (obj/set! "justifyContent" "flex-end")
|
||||
(= talign "justify") (obj/set! "justifyContent" "stretch"))))
|
||||
|
||||
(defn- generate-paragraph-styles
|
||||
[data]
|
||||
(let [base #js {:fontSize "14px"
|
||||
:margin "inherit"
|
||||
:lineHeight "1.2"}
|
||||
lh (obj/get data "line-height")
|
||||
ta (obj/get data "text-align")]
|
||||
(cond-> base
|
||||
ta (obj/set! "textAlign" ta)
|
||||
lh (obj/set! "lineHeight" lh))))
|
||||
|
||||
(defn- generate-text-styles
|
||||
[data]
|
||||
(let [letter-spacing (obj/get data "letter-spacing")
|
||||
text-decoration (obj/get data "text-decoration")
|
||||
text-transform (obj/get data "text-transform")
|
||||
line-height (obj/get data "line-height")
|
||||
|
||||
font-id (obj/get data "font-id" (:font-id ut/default-text-attrs))
|
||||
font-variant-id (obj/get data "font-variant-id")
|
||||
|
||||
font-family (obj/get data "font-family")
|
||||
font-size (obj/get data "font-size")
|
||||
|
||||
;; Old properties for backwards compatibility
|
||||
fill (obj/get data "fill")
|
||||
opacity (obj/get data "opacity" 1)
|
||||
|
||||
fill-color (obj/get data "fill-color" fill)
|
||||
fill-opacity (obj/get data "fill-opacity" opacity)
|
||||
fill-color-gradient (obj/get data "fill-color-gradient" nil)
|
||||
fill-color-gradient (when fill-color-gradient
|
||||
(-> (js->clj fill-color-gradient :keywordize-keys true)
|
||||
(update :type keyword)))
|
||||
|
||||
fill-color-ref-id (obj/get data "fill-color-ref-id")
|
||||
fill-color-ref-file (obj/get data "fill-color-ref-file")
|
||||
|
||||
[r g b a] (uc/hex->rgba fill-color fill-opacity)
|
||||
background (if fill-color-gradient
|
||||
(uc/gradient->css (js->clj fill-color-gradient))
|
||||
(str/format "rgba(%s, %s, %s, %s)" r g b a))
|
||||
|
||||
fontsdb (deref fonts/fontsdb)
|
||||
|
||||
base #js {:textDecoration text-decoration
|
||||
:textTransform text-transform
|
||||
:lineHeight (or line-height "inherit")
|
||||
"--text-color" background}]
|
||||
|
||||
(when (and (string? letter-spacing)
|
||||
(pos? (alength letter-spacing)))
|
||||
(obj/set! base "letterSpacing" (str letter-spacing "px")))
|
||||
|
||||
(when (and (string? font-size)
|
||||
(pos? (alength font-size)))
|
||||
(obj/set! base "fontSize" (str font-size "px")))
|
||||
|
||||
(when (and (string? font-id)
|
||||
(pos? (alength font-id)))
|
||||
(let [font (get fontsdb font-id)]
|
||||
(fonts/ensure-loaded! font-id)
|
||||
(let [font-family (or (:family font)
|
||||
(obj/get data "fontFamily"))
|
||||
font-variant (d/seek #(= font-variant-id (:id %))
|
||||
(:variants font))
|
||||
font-style (or (:style font-variant)
|
||||
(obj/get data "fontStyle"))
|
||||
font-weight (or (:weight font-variant)
|
||||
(obj/get data "fontWeight"))]
|
||||
(obj/set! base "fontFamily" font-family)
|
||||
(obj/set! base "fontStyle" font-style)
|
||||
(obj/set! base "fontWeight" font-weight))))
|
||||
|
||||
base))
|
||||
|
||||
(defn get-all-fonts [node]
|
||||
(let [current-font (if (not (nil? (:font-id node)))
|
||||
#{(select-keys node [:font-id :font-variant-id])}
|
||||
#{})
|
||||
children-font (map get-all-fonts (:children node))]
|
||||
(reduce set/union (conj children-font current-font))))
|
||||
|
||||
|
||||
(defn fetch-font [font-id font-variant-id]
|
||||
(let [font-url (fonts/font-url font-id font-variant-id)]
|
||||
(-> (js/fetch font-url)
|
||||
(p/then (fn [res] (.text res))))))
|
||||
|
||||
(defonce font-face-template "
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: '$0';
|
||||
font-style: $3;
|
||||
font-weight: $2;
|
||||
font-display: block;
|
||||
src: url(/fonts/%(0)s-$1.woff) format('woff');
|
||||
}
|
||||
")
|
||||
|
||||
(defn get-local-font-css [font-id font-variant-id]
|
||||
(let [{:keys [family variants]} (get @fonts/fontsdb font-id)
|
||||
{:keys [name weight style]} (->> variants (filter #(= (:id %) font-variant-id)) first)
|
||||
css-str (str/format font-face-template [family name weight style])]
|
||||
(p/resolved css-str)))
|
||||
|
||||
(defn embed-font [{:keys [font-id font-variant-id] :or {font-variant-id "regular"}}]
|
||||
(let [{:keys [backend]} (get @fonts/fontsdb font-id)]
|
||||
(p/let [font-text (case backend
|
||||
:google (fetch-font font-id font-variant-id)
|
||||
(get-local-font-css font-id font-variant-id))
|
||||
url-to-data (->> font-text
|
||||
(re-seq #"url\(([^)]+)\)")
|
||||
(map second)
|
||||
(map df/fetch-as-data-uri)
|
||||
(p/all))]
|
||||
(reduce (fn [text [url data]] (str/replace text url data)) font-text url-to-data))
|
||||
))
|
||||
[app.util.color :as uc]
|
||||
[app.main.ui.shapes.text.styles :as sts]
|
||||
[app.main.ui.shapes.text.embed :as ste]))
|
||||
|
||||
;; -- Text nodes
|
||||
(mf/defc text-node
|
||||
[{:keys [node index] :as props}]
|
||||
[{:keys [node index shape] :as props}]
|
||||
(let [embed-resources? (mf/use-ctx muc/embed-ctx)
|
||||
embeded-fonts (mf/use-state nil)
|
||||
{:keys [type text children]} node]
|
||||
{:keys [type text children]} node
|
||||
|
||||
(mf/use-effect
|
||||
(mf/deps node)
|
||||
(fn []
|
||||
(when (and embed-resources? (= type "root"))
|
||||
(let [font-to-embed (get-all-fonts node)
|
||||
font-to-embed (if (empty? font-to-embed) #{ut/default-text-attrs} font-to-embed)
|
||||
embeded (map embed-font font-to-embed)]
|
||||
(-> (p/all embeded)
|
||||
(p/then (fn [result] (reset! embeded-fonts (str/join "\n" result)))))))))
|
||||
render-node
|
||||
(fn [index node]
|
||||
(mf/element text-node {:index index
|
||||
:node node
|
||||
:key index
|
||||
:shape shape}))]
|
||||
|
||||
(if (string? text)
|
||||
(let [style (generate-text-styles (clj->js node))]
|
||||
(let [style (sts/generate-text-styles (clj->js node))]
|
||||
[:span.text-node {:style style} (if (= text "") "\u00A0" text)])
|
||||
(let [children (map-indexed (fn [index node]
|
||||
(mf/element text-node {:index index :node node :key index}))
|
||||
children)]
|
||||
|
||||
(let [children (map-indexed render-node children)]
|
||||
(case type
|
||||
"root"
|
||||
(let [style (generate-root-styles (clj->js node))]
|
||||
|
||||
(let [style (sts/generate-root-styles (clj->js node) #js {:shape shape})]
|
||||
[:div.root.rich-text
|
||||
{:key index
|
||||
:style style
|
||||
:xmlns "http://www.w3.org/1999/xhtml"}
|
||||
[:*
|
||||
[:style ".text-node { background: var(--text-color); -webkit-text-fill-color: transparent; -webkit-background-clip: text;"]
|
||||
(when (not (nil? @embeded-fonts))
|
||||
[:style @embeded-fonts])]
|
||||
(when embed-resources?
|
||||
[ste/embed-fontfaces-style {:node node}])]
|
||||
children])
|
||||
|
||||
"paragraph-set"
|
||||
(let [style #js {:display "inline-block"}]
|
||||
[:div.paragraphs {:key index :style style} children])
|
||||
(let [style (sts/generate-paragraph-set-styles (clj->js node))]
|
||||
[:div.paragraph-set {:key index :style style} children])
|
||||
|
||||
"paragraph"
|
||||
(let [style (generate-paragraph-styles (clj->js node))]
|
||||
[:p {:key index :style style} children])
|
||||
(let [style (sts/generate-paragraph-styles (clj->js node))]
|
||||
[:p.paragraph {:key index :style style} children])
|
||||
|
||||
nil)))))
|
||||
|
||||
|
|
@ -211,31 +66,37 @@
|
|||
{::mf/wrap-props false
|
||||
::mf/wrap [mf/memo]}
|
||||
[props]
|
||||
(let [root (obj/get props "content")]
|
||||
[:& text-node {:index 0 :node root}]))
|
||||
(let [root (obj/get props "content")
|
||||
shape (obj/get props "shape")]
|
||||
[:& text-node {:index 0
|
||||
:node root
|
||||
:shape shape}]))
|
||||
|
||||
(defn- retrieve-colors
|
||||
[shape]
|
||||
(let [colors (into #{} (comp (map :fill)
|
||||
(filter string?))
|
||||
(tree-seq map? :children (:content shape)))]
|
||||
(let [colors (->> shape :content
|
||||
(tree-seq map? :children)
|
||||
(into #{} (comp (map :fill) (filter string?))))]
|
||||
(if (empty? colors)
|
||||
"#000000"
|
||||
(apply str (interpose "," colors)))))
|
||||
|
||||
(mf/defc text-shape
|
||||
{::mf/wrap-props false}
|
||||
[props]
|
||||
{::mf/wrap-props false
|
||||
::mf/forward-ref true}
|
||||
[props ref]
|
||||
(let [shape (unchecked-get props "shape")
|
||||
selected? (unchecked-get props "selected?")
|
||||
mask-id (mf/use-ctx mask-id-ctx)
|
||||
{:keys [id x y width height rotation content]} shape]
|
||||
grow-type (:grow-type shape)
|
||||
mask-id (mf/use-ctx mask-id-ctx)
|
||||
{:keys [id x y width height content]} shape]
|
||||
[:foreignObject {:x x
|
||||
:y y
|
||||
:data-colors (retrieve-colors shape)
|
||||
:transform (geom/transform-matrix shape)
|
||||
:width width
|
||||
:height height
|
||||
:mask mask-id}
|
||||
[:& text-content {:content (:content shape)}]]))
|
||||
|
||||
:width (if (#{:auto-width} grow-type) 10000 width)
|
||||
:height (if (#{:auto-height :auto-width} grow-type) 10000 height)
|
||||
:mask mask-id
|
||||
:ref ref}
|
||||
[:& text-content {:shape shape
|
||||
:content (:content shape)}]]))
|
||||
|
|
|
|||
75
frontend/src/app/main/ui/shapes/text/embed.cljs
Normal file
75
frontend/src/app/main/ui/shapes/text/embed.cljs
Normal file
|
|
@ -0,0 +1,75 @@
|
|||
;; This Source Code Form is subject to the terms of the Mozilla Public
|
||||
;; License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
;;
|
||||
;; This Source Code Form is "Incompatible With Secondary Licenses", as
|
||||
;; defined by the Mozilla Public License, v. 2.0.
|
||||
;;
|
||||
;; Copyright (c) 2020 UXBOX Labs SL
|
||||
|
||||
(ns app.main.ui.shapes.text.embed
|
||||
(:require
|
||||
[clojure.set :as set]
|
||||
[promesa.core :as p]
|
||||
[cuerdas.core :as str]
|
||||
[rumext.alpha :as mf]
|
||||
[app.main.data.fetch :as df]
|
||||
[app.main.fonts :as fonts]
|
||||
[app.util.text :as ut]))
|
||||
|
||||
(defonce font-face-template "
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: '$0';
|
||||
font-style: $3;
|
||||
font-weight: $2;
|
||||
font-display: block;
|
||||
src: url(/fonts/%(0)s-$1.woff) format('woff');
|
||||
}
|
||||
")
|
||||
|
||||
;; -- Embed fonts into styles
|
||||
(defn get-node-fonts [node]
|
||||
(let [current-font (if (not (nil? (:font-id node)))
|
||||
#{(select-keys node [:font-id :font-variant-id])}
|
||||
#{})
|
||||
children-font (map get-node-fonts (:children node))]
|
||||
(reduce set/union (conj children-font current-font))))
|
||||
|
||||
|
||||
(defn get-local-font-css [font-id font-variant-id]
|
||||
(let [{:keys [family variants]} (get @fonts/fontsdb font-id)
|
||||
{:keys [name weight style]} (->> variants (filter #(= (:id %) font-variant-id)) first)
|
||||
css-str (str/format font-face-template [family name weight style])]
|
||||
(p/resolved css-str)))
|
||||
|
||||
(defn get-text-font-data [text]
|
||||
(->> text
|
||||
(re-seq #"url\(([^)]+)\)")
|
||||
(map second)
|
||||
(map df/fetch-as-data-uri)
|
||||
(p/all)))
|
||||
|
||||
(defn embed-font [{:keys [font-id font-variant-id] :or {font-variant-id "regular"}}]
|
||||
(let [{:keys [backend]} (get @fonts/fontsdb font-id)]
|
||||
(p/let [font-text (case backend
|
||||
:google (fonts/fetch-font font-id font-variant-id)
|
||||
(get-local-font-css font-id font-variant-id))
|
||||
url-to-data (get-text-font-data font-text)
|
||||
replace-text (fn [text [url data]] (str/replace text url data))]
|
||||
(reduce replace-text font-text url-to-data))))
|
||||
|
||||
(mf/defc embed-fontfaces-style [{:keys [node]}]
|
||||
(let [embeded-fonts (mf/use-state nil)]
|
||||
(mf/use-effect
|
||||
(mf/deps node)
|
||||
(fn []
|
||||
(let [font-to-embed (get-node-fonts node)
|
||||
font-to-embed (if (empty? font-to-embed) #{ut/default-text-attrs} font-to-embed)
|
||||
embeded (map embed-font font-to-embed)]
|
||||
(-> (p/all embeded)
|
||||
(p/then (fn [result] (reset! embeded-fonts (str/join "\n" result))))))))
|
||||
|
||||
|
||||
(when (not (nil? @embeded-fonts))
|
||||
[:style @embeded-fonts])))
|
||||
119
frontend/src/app/main/ui/shapes/text/styles.cljs
Normal file
119
frontend/src/app/main/ui/shapes/text/styles.cljs
Normal file
|
|
@ -0,0 +1,119 @@
|
|||
;; This Source Code Form is subject to the terms of the Mozilla Public
|
||||
;; License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
;;
|
||||
;; This Source Code Form is "Incompatible With Secondary Licenses", as
|
||||
;; defined by the Mozilla Public License, v. 2.0.
|
||||
;;
|
||||
;; Copyright (c) 2020 UXBOX Labs SL
|
||||
|
||||
(ns app.main.ui.shapes.text.styles
|
||||
(:require
|
||||
[cuerdas.core :as str]
|
||||
[app.main.fonts :as fonts]
|
||||
[app.common.data :as d]
|
||||
[app.util.object :as obj]
|
||||
[app.util.color :as uc]
|
||||
[app.util.text :as ut]))
|
||||
|
||||
(defn generate-root-styles
|
||||
[data props]
|
||||
(let [valign (obj/get data "vertical-align" "top")
|
||||
talign (obj/get data "text-align" "flex-start")
|
||||
shape (obj/get props "shape")
|
||||
base #js {:height (or (:height shape) "100%")
|
||||
:width (or (:width shape) "100%")
|
||||
:display "flex"}]
|
||||
(cond-> base
|
||||
(= valign "top") (obj/set! "alignItems" "flex-start")
|
||||
(= valign "center") (obj/set! "alignItems" "center")
|
||||
(= valign "bottom") (obj/set! "alignItems" "flex-end")
|
||||
|
||||
(= talign "left") (obj/set! "justifyContent" "flex-start")
|
||||
(= talign "center") (obj/set! "justifyContent" "center")
|
||||
(= talign "right") (obj/set! "justifyContent" "flex-end")
|
||||
(= talign "justify") (obj/set! "justifyContent" "stretch"))))
|
||||
|
||||
(defn generate-paragraph-set-styles
|
||||
[data]
|
||||
;; The position absolute is used so the paragraph is "outside"
|
||||
;; the normal layout and can grow outside its parent
|
||||
;; We use this element to measure the size of the text
|
||||
(let [base #js {:display "inline-block"
|
||||
:position "absolute"}]
|
||||
base))
|
||||
|
||||
(defn generate-paragraph-styles
|
||||
[data]
|
||||
(let [base #js {:fontSize "14px"
|
||||
:margin "inherit"
|
||||
:lineHeight "1.2"}
|
||||
lh (obj/get data "line-height")
|
||||
ta (obj/get data "text-align")]
|
||||
(cond-> base
|
||||
ta (obj/set! "textAlign" ta)
|
||||
lh (obj/set! "lineHeight" lh))))
|
||||
|
||||
(defn generate-text-styles
|
||||
[data]
|
||||
(let [letter-spacing (obj/get data "letter-spacing")
|
||||
text-decoration (obj/get data "text-decoration")
|
||||
text-transform (obj/get data "text-transform")
|
||||
line-height (obj/get data "line-height")
|
||||
|
||||
font-id (obj/get data "font-id" (:font-id ut/default-text-attrs))
|
||||
font-variant-id (obj/get data "font-variant-id")
|
||||
|
||||
font-family (obj/get data "font-family")
|
||||
font-size (obj/get data "font-size")
|
||||
|
||||
;; Old properties for backwards compatibility
|
||||
fill (obj/get data "fill")
|
||||
opacity (obj/get data "opacity" 1)
|
||||
|
||||
fill-color (obj/get data "fill-color" fill)
|
||||
fill-opacity (obj/get data "fill-opacity" opacity)
|
||||
fill-color-gradient (obj/get data "fill-color-gradient" nil)
|
||||
fill-color-gradient (when fill-color-gradient
|
||||
(-> (js->clj fill-color-gradient :keywordize-keys true)
|
||||
(update :type keyword)))
|
||||
|
||||
fill-color-ref-id (obj/get data "fill-color-ref-id")
|
||||
fill-color-ref-file (obj/get data "fill-color-ref-file")
|
||||
|
||||
[r g b a] (uc/hex->rgba fill-color fill-opacity)
|
||||
background (if fill-color-gradient
|
||||
(uc/gradient->css (js->clj fill-color-gradient))
|
||||
(str/format "rgba(%s, %s, %s, %s)" r g b a))
|
||||
|
||||
fontsdb (deref fonts/fontsdb)
|
||||
|
||||
base #js {:textDecoration text-decoration
|
||||
:textTransform text-transform
|
||||
:lineHeight (or line-height "inherit")
|
||||
"--text-color" background}]
|
||||
|
||||
(when (and (string? letter-spacing)
|
||||
(pos? (alength letter-spacing)))
|
||||
(obj/set! base "letterSpacing" (str letter-spacing "px")))
|
||||
|
||||
(when (and (string? font-size)
|
||||
(pos? (alength font-size)))
|
||||
(obj/set! base "fontSize" (str font-size "px")))
|
||||
|
||||
(when (and (string? font-id)
|
||||
(pos? (alength font-id)))
|
||||
(let [font (get fontsdb font-id)]
|
||||
(let [font-family (or (:family font)
|
||||
(obj/get data "fontFamily"))
|
||||
font-variant (d/seek #(= font-variant-id (:id %))
|
||||
(:variants font))
|
||||
font-style (or (:style font-variant)
|
||||
(obj/get data "fontStyle"))
|
||||
font-weight (or (:weight font-variant)
|
||||
(obj/get data "fontWeight"))]
|
||||
(obj/set! base "fontFamily" font-family)
|
||||
(obj/set! base "fontStyle" font-style)
|
||||
(obj/set! base "fontWeight" font-weight))))
|
||||
|
||||
base))
|
||||
Loading…
Add table
Add a link
Reference in a new issue