mirror of
https://github.com/penpot/penpot.git
synced 2025-01-24 07:29:08 -05:00
Add line-height, letter spacing and text saving for text shape.
This commit is contained in:
Andrey Antukh
parent
8e5d193518
commit
c7fd8570e3
3 changed files with 61 additions and 20 deletions
|
|
@ -57,7 +57,9 @@
|
|||
:style [sc/string]
|
||||
:weight [sc/string]
|
||||
:align [sc/string]
|
||||
:size [sc/number]})
|
||||
:size [sc/number]
|
||||
:letter-spacing [sc/number]
|
||||
:line-height [sc/number]})
|
||||
|
||||
(def ^:static +shape-radius-attrs-schema+
|
||||
{:rx [sc/integer]
|
||||
|
|
@ -155,6 +157,15 @@
|
|||
(-apply-update [_ state]
|
||||
(update-in state [:shapes-by-id sid] sh/move' opts))))
|
||||
|
||||
(defn update-text
|
||||
"Update the start position coordenate of the shape."
|
||||
[sid {:keys [content]}]
|
||||
{:pre [(string? content)]}
|
||||
(reify
|
||||
rs/UpdateEvent
|
||||
(-apply-update [_ state]
|
||||
(assoc-in state [:shapes-by-id sid :content] content))))
|
||||
|
||||
(defn update-fill-attrs
|
||||
[sid {:keys [color opacity] :as opts}]
|
||||
(sc/validate! +shape-fill-attrs-schema+ opts)
|
||||
|
|
@ -167,13 +178,16 @@
|
|||
(when opacity {:opacity opacity})))))
|
||||
|
||||
(defn update-font-attrs
|
||||
[sid {:keys [family style weight size align] :as opts}]
|
||||
[sid {:keys [family style weight size align
|
||||
letter-spacing line-height] :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 line-height {:line-height line-height})
|
||||
(when letter-spacing {:letter-spacing letter-spacing})
|
||||
(when align {:align align})
|
||||
(when family {:family family})
|
||||
(when style {:style style})
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
[uxbox.rstore :as rs]
|
||||
[uxbox.state :as st]
|
||||
[uxbox.shapes :as ush]
|
||||
[uxbox.data.shapes :as ds]
|
||||
[uxbox.data.workspace :as dw]
|
||||
[uxbox.ui.core :as uuc]
|
||||
[uxbox.ui.mixins :as mx]
|
||||
|
|
@ -75,25 +76,31 @@
|
|||
(uuc/release-action! ::edition)
|
||||
(swap! local assoc :edition false)
|
||||
(set! (.-contentEditable container) false)
|
||||
(.removeAttribute container "contenteditable")))]
|
||||
|
||||
(.removeAttribute container "contenteditable")))
|
||||
(on-input [ev]
|
||||
(let [content (dom/event->inner-text ev)
|
||||
sid (:id (first (:rum/props own)))]
|
||||
(rs/emit! (ds/update-text sid {:content content}))))]
|
||||
(let [dom (mx/get-ref-dom own "main")
|
||||
dom2 (mx/get-ref-dom own "container")
|
||||
key1 (events/listen dom EventType.DBLCLICK on-double-click)
|
||||
key2 (events/listen dom2 EventType.BLUR on-blur)]
|
||||
(assoc own ::key1 key1))))
|
||||
key2 (events/listen dom2 EventType.BLUR on-blur)
|
||||
key3 (events/listen dom2 EventType.INPUT on-input)]
|
||||
(assoc own ::key1 key1 ::key2 key2 ::key3 key3))))
|
||||
|
||||
(defn- text-component-will-unmount
|
||||
[own]
|
||||
(let [key1 (::key1 own)
|
||||
key2 (::key2 own)]
|
||||
key2 (::key2 own)
|
||||
key3 (::key3 own)]
|
||||
(events/unlistenByKey key1)
|
||||
(events/unlistenByKey key2)
|
||||
(dissoc own ::key1 ::key2)))
|
||||
(events/unlistenByKey key3)
|
||||
(dissoc own ::key1 ::key2 ::key3)))
|
||||
|
||||
(defn- text-component-transfer-state
|
||||
[old-own own]
|
||||
(let [data (select-keys old-own [::key1 ::key2])]
|
||||
(let [data (select-keys old-own [::key1 ::key2 ::key3])]
|
||||
(merge own data)))
|
||||
|
||||
(defn- text-component-render
|
||||
|
|
@ -136,21 +143,26 @@
|
|||
|
||||
(defn- build-style
|
||||
[{:keys [font fill opacity] :or {fill "#000000" opacity 1}}]
|
||||
(let [{:keys [family weight style size align]
|
||||
(let [{:keys [family weight style size align line-height letter-spacing]
|
||||
:or {family "sourcesanspro"
|
||||
weight "normal"
|
||||
style "normal"
|
||||
line-height 1.4
|
||||
letter-spacing 1
|
||||
align "left"
|
||||
size 16}} font
|
||||
color (-> fill
|
||||
(color/hex->rgba opacity)
|
||||
(color/rgb->str))]
|
||||
{:fontSize (str size "px")
|
||||
:color color
|
||||
:textAlign align
|
||||
:fontFamily family
|
||||
:fontWeight weight
|
||||
:fontStyle style}))
|
||||
(merge
|
||||
{:fontSize (str size "px")
|
||||
:color color
|
||||
:textAlign align
|
||||
:fontFamily family
|
||||
:fontWeight weight
|
||||
:fontStyle style}
|
||||
(when line-height {:lineHeight line-height})
|
||||
(when letter-spacing {:letterSpacing letter-spacing}))))
|
||||
|
||||
(defmethod uusc/render-shape :builtin/text
|
||||
[{:keys [id x1 y1 x2 y2 content drawing? editing?] :as shape}]
|
||||
|
|
@ -161,7 +173,6 @@
|
|||
:transform (str rfm)}
|
||||
attrs (merge props size)
|
||||
style (build-style shape)]
|
||||
|
||||
(html
|
||||
[:g
|
||||
(if (or drawing? editing?)
|
||||
|
|
|
|||
|
|
@ -511,10 +511,21 @@
|
|||
params {:size (parse-int value)}
|
||||
sid (:id shape)]
|
||||
(rs/emit! (uds/update-font-attrs sid params))))
|
||||
(on-font-letter-spacing-change [event]
|
||||
(let [value (dom/event->value event)
|
||||
params {:letter-spacing (parse-float value)}
|
||||
sid (:id shape)]
|
||||
(rs/emit! (uds/update-font-attrs sid params))))
|
||||
(on-font-line-height-change [event]
|
||||
(let [value (dom/event->value event)
|
||||
params {:line-height (parse-float value)}
|
||||
sid (:id shape)]
|
||||
(rs/emit! (uds/update-font-attrs sid params))))
|
||||
(on-font-align-change [event value]
|
||||
(let [params {:align value}
|
||||
sid (:id shape)]
|
||||
(rs/emit! (uds/update-font-attrs sid params))))
|
||||
|
||||
(on-font-style-change [event]
|
||||
(let [value (dom/event->value event)
|
||||
[weight style] (read-string value)
|
||||
|
|
@ -522,11 +533,13 @@
|
|||
params {:style style
|
||||
:weight weight}]
|
||||
(rs/emit! (uds/update-font-attrs sid params))))]
|
||||
(let [{:keys [family style weight size align]
|
||||
(let [{:keys [family style weight size align line-height letter-spacing]
|
||||
:or {family "sourcesanspro"
|
||||
align "left"
|
||||
style "normal"
|
||||
weight "normal"
|
||||
letter-spacing 1
|
||||
line-height 1.4
|
||||
size 16}} font
|
||||
styles (:styles (first (filter #(= (:id %) family) library/+fonts+)))]
|
||||
(html
|
||||
|
|
@ -566,14 +579,17 @@
|
|||
:step "0.1"
|
||||
:min "0"
|
||||
:max "200"
|
||||
:defaultValue "1.5"}]
|
||||
:value line-height
|
||||
:on-change on-font-line-height-change}]
|
||||
[:input.input-text
|
||||
{:placeholder "Letter spacing"
|
||||
:type "number"
|
||||
:step "0.1"
|
||||
:min "0"
|
||||
:max "200"
|
||||
:defaultValue "1"}]]
|
||||
:value letter-spacing
|
||||
:on-change on-font-letter-spacing-change}]]
|
||||
|
||||
|
||||
[:span "Text align"]
|
||||
[:div.row-flex.align-icons
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue