mirror of
https://github.com/penpot/penpot.git
synced 2025-01-23 23:18:48 -05:00
Add font rendering to text shape.
This commit is contained in:
Andrey Antukh
parent
22060dbe76
commit
4499dfc787
5 changed files with 99 additions and 46 deletions
|
|
@ -52,6 +52,12 @@
|
|||
:x2 [sc/integer]
|
||||
:y2 [sc/integer]})
|
||||
|
||||
(def ^:static +shape-font-attrs-schema+
|
||||
{:family [sc/string]
|
||||
:style [sc/string]
|
||||
:weight [sc/string]
|
||||
:size [sc/number]})
|
||||
|
||||
(def ^:static +shape-radius-attrs-schema+
|
||||
{:rx [sc/integer]
|
||||
:ry [sc/integer]})
|
||||
|
|
@ -159,6 +165,19 @@
|
|||
(when color {:fill color})
|
||||
(when opacity {:opacity opacity})))))
|
||||
|
||||
(defn update-font-attrs
|
||||
[sid {:keys [family style weight size] :as opts}]
|
||||
(sc/validate! +shape-font-attrs-schema+ opts)
|
||||
(reify
|
||||
rs/UpdateEvent
|
||||
(-apply-update [_ state]
|
||||
(update-in state [:shapes-by-id sid :font]
|
||||
merge
|
||||
(when family {:family family})
|
||||
(when style {:style style})
|
||||
(when weight {:weight weight})
|
||||
(when size {:size size})))))
|
||||
|
||||
(defn update-stroke-attrs
|
||||
[sid {:keys [color opacity type width] :as opts}]
|
||||
(sc/validate! +shape-stroke-attrs-schema+ opts)
|
||||
|
|
|
|||
|
|
@ -8,24 +8,35 @@
|
|||
(ns uxbox.library
|
||||
(:require [uxbox.library.colors :as colors]
|
||||
[uxbox.library.icons :as icons]
|
||||
[uxbox.library.fonts :as fonts]
|
||||
[uxbox.util.data :refer (index-by-id)]))
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; Colors
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
||||
(def ^:static +color-collections+
|
||||
(def ^:const +color-collections+
|
||||
colors/+collections+)
|
||||
|
||||
(def ^:static +color-collections-by-id+
|
||||
(def ^:const +color-collections-by-id+
|
||||
(index-by-id colors/+collections+))
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; Icons
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
||||
(def ^:static +icon-collections+
|
||||
(def ^:const +icon-collections+
|
||||
icons/+collections+)
|
||||
|
||||
(def ^:static +icon-collections-by-id+
|
||||
(def ^:const +icon-collections-by-id+
|
||||
(index-by-id icons/+collections+))
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; Fonts
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
||||
(def ^:const +fonts+
|
||||
fonts/+collections+)
|
||||
|
||||
(def ^:const +fonts-by-id+
|
||||
(index-by-id fonts/+collections+))
|
||||
|
|
|
|||
|
|
@ -105,7 +105,6 @@
|
|||
local (:rum/local own)]
|
||||
(html
|
||||
[:g.shape {:class (when selected? "selected")
|
||||
;; :on-double-click #(on-double-click own %)
|
||||
:ref "main"
|
||||
:on-mouse-down on-mouse-down
|
||||
:on-mouse-up on-mouse-up}
|
||||
|
|
@ -135,8 +134,16 @@
|
|||
[:font-size])
|
||||
|
||||
(defn- build-style
|
||||
[{:keys [font-size]}]
|
||||
(merge {} (when font-size {:fontSize (str font-size "px")})))
|
||||
[{:keys [font]}]
|
||||
(let [{:keys [family weight style size]
|
||||
:or {family "sourcesanspro"
|
||||
weight "normal"
|
||||
style "normal"
|
||||
size 16}} font]
|
||||
{:fontSize (str size "px")
|
||||
:fontFamily family
|
||||
:fontWeight weight
|
||||
:fontStyle style}))
|
||||
|
||||
(defmethod uusc/render-shape :builtin/text
|
||||
[{:keys [id x1 y1 x2 y2 content drawing? editing?] :as shape}]
|
||||
|
|
|
|||
|
|
@ -27,6 +27,8 @@
|
|||
;; Lenses
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
||||
;; TODO: move this lense under library ns.
|
||||
|
||||
(def ^:static ^:private collections-by-id-l
|
||||
(-> (comp (l/in [:colors-by-id])
|
||||
(ul/merge library/+color-collections-by-id+))
|
||||
|
|
|
|||
|
|
@ -498,52 +498,66 @@
|
|||
)))
|
||||
|
||||
(defmethod -render-menu :menu/text
|
||||
[menu own shape]
|
||||
[menu own {:keys [font] :as shape}]
|
||||
(letfn [(on-font-family-change [event]
|
||||
(let [value (dom/event->value event)
|
||||
sid (:id shape)]
|
||||
(println "on-font-family-change" value)))
|
||||
sid (:id shape)
|
||||
params {:family (read-string value)
|
||||
:weight "normal"
|
||||
:style "normal"}]
|
||||
(rs/emit! (uds/update-font-attrs sid params))))
|
||||
(on-font-size-change [event]
|
||||
(let [value (dom/event->value event)
|
||||
value (parse-int value)
|
||||
params {:size (parse-int value)}
|
||||
sid (:id shape)]
|
||||
(println "on-font-size-change" value)))
|
||||
(on-font-weight-change [event]
|
||||
(rs/emit! (uds/update-font-attrs sid params))))
|
||||
(on-font-style-change [event]
|
||||
(let [value (dom/event->value event)
|
||||
value (read-string value)
|
||||
sid (:id shape)]
|
||||
(println "on-font-size-change" value)))]
|
||||
(html
|
||||
[:div.element-set {:key (str (:id menu))}
|
||||
[:div.element-set-title (:name menu)]
|
||||
[:div.element-set-content
|
||||
[:span "Font family"]
|
||||
[:div.row-flex
|
||||
[:select.input-select {:value (:font-family shape "sans-serif")
|
||||
:on-change on-font-family-change}
|
||||
[:option {:value "sans-serif"} "Sans Serif"]
|
||||
[:option {:value "monospace"} "Monospace"]]]
|
||||
[weight style] (read-string value)
|
||||
sid (:id shape)
|
||||
params {:style style
|
||||
:weight weight}]
|
||||
(rs/emit! (uds/update-font-attrs sid params))))]
|
||||
(let [{:keys [family style weight size]
|
||||
:or {family "sourcesanspro"
|
||||
style "normal"
|
||||
weight "normal"
|
||||
size 16}} font
|
||||
styles (:styles (first (filter #(= (:id %) family) library/+fonts+)))]
|
||||
(html
|
||||
[:div.element-set {:key (str (:id menu))}
|
||||
[:div.element-set-title (:name menu)]
|
||||
[:div.element-set-content
|
||||
[:span "Font family"]
|
||||
[:div.row-flex
|
||||
[:select.input-select {:value (pr-str family)
|
||||
:on-change on-font-family-change}
|
||||
(for [font library/+fonts+]
|
||||
[:option {:value (pr-str (:id font))
|
||||
:key (:id font)} (:name font)])]]
|
||||
[:span "Size and Weight"]
|
||||
[:div.row-flex
|
||||
[:input.input-text
|
||||
{:placeholder "Font Size"
|
||||
:type "number"
|
||||
:min "0"
|
||||
:max "200"
|
||||
:value size
|
||||
:on-change on-font-size-change}]
|
||||
[:select.input-select {:value (pr-str [weight style])
|
||||
:on-change on-font-style-change}
|
||||
(for [style styles
|
||||
:let [data (mapv #(get style %) [:weight :style])]]
|
||||
[:option {:value (pr-str data)
|
||||
:key (:name style)} (:name style)])]]
|
||||
|
||||
[:span "Size and Weight"]
|
||||
[:div.row-flex
|
||||
[:input.input-text
|
||||
{:placeholder "Font Size"
|
||||
:type "number"
|
||||
:min "0"
|
||||
:max "200"
|
||||
:value (:font-size shape "16")
|
||||
:on-change on-font-size-change}]
|
||||
[:select.input-select {:value (:font-weight shape ":normal")
|
||||
:on-change on-font-weight-change}
|
||||
[:option {:value ":normal"} "Normal"]
|
||||
[:option {:value ":bold"} "Solid"]]]
|
||||
[:span "Text align"]
|
||||
[:div.row-flex.align-icons
|
||||
[:span.current i/align-left]
|
||||
[:span i/align-right]
|
||||
[:span i/align-center]
|
||||
[:span i/align-justify]
|
||||
]]])))
|
||||
[:span "Text align"]
|
||||
[:div.row-flex.align-icons
|
||||
[:span.current i/align-left]
|
||||
[:span i/align-right]
|
||||
[:span i/align-center]
|
||||
[:span i/align-justify]
|
||||
]]]))))
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; Components
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue