diff --git a/src/uxbox/data/shapes.cljs b/src/uxbox/data/shapes.cljs index 38d341b76..8182559af 100644 --- a/src/uxbox/data/shapes.cljs +++ b/src/uxbox/data/shapes.cljs @@ -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}) diff --git a/src/uxbox/ui/shapes/text.cljs b/src/uxbox/ui/shapes/text.cljs index a1ce661bd..fa94b508a 100644 --- a/src/uxbox/ui/shapes/text.cljs +++ b/src/uxbox/ui/shapes/text.cljs @@ -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?) diff --git a/src/uxbox/ui/workspace/sidebar/options.cljs b/src/uxbox/ui/workspace/sidebar/options.cljs index 9defc170e..24c9307b0 100644 --- a/src/uxbox/ui/workspace/sidebar/options.cljs +++ b/src/uxbox/ui/workspace/sidebar/options.cljs @@ -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