Add line-height, letter spacing and text saving for text shape.

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})

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)]
+          key2 (events/listen dom2 EventType.BLUR on-blur)
-      (assoc own ::key1 key1))))
+          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")
+    (merge
-     :color color
+     {:fontSize (str size "px")
-     :textAlign align
+      :color color
-     :fontFamily family
+      :textAlign align
-     :fontWeight weight
+      :fontFamily family
-     :fontStyle style}))
+      :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?)

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