Add font rendering to text shape.

src/uxbox/data/shapes.cljs

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

src/uxbox/library.cljs

@@ -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+))

src/uxbox/ui/shapes/text.cljs

@@ -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]}]
+  [{:keys [font]}]
-  (merge {} (when font-size {:fontSize (str font-size "px")})))
+  (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}]

src/uxbox/ui/workspace/colorpalette.cljs

@@ -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+))

src/uxbox/ui/workspace/sidebar/options.cljs

@@ -498,32 +498,43 @@
      )))
 
 (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)]
+                  sid (:id shape)
-              (println "on-font-family-change" value)))
+                  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)))
+              (rs/emit! (uds/update-font-attrs sid params))))
-          (on-font-weight-change [event]
+          (on-font-style-change [event]
             (let [value (dom/event->value event)
-                  value (read-string value)
+                  [weight style] (read-string value)
-                  sid (:id shape)]
+                  sid (:id shape)
-              (println "on-font-size-change" value)))]
+                  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 (:font-family shape "sans-serif")
+          [:select.input-select {:value (pr-str family)
                                  :on-change on-font-family-change}
-         [:option {:value "sans-serif"} "Sans Serif"]
+           (for [font library/+fonts+]
-         [:option {:value "monospace"} "Monospace"]]]
+             [:option {:value (pr-str (:id font))
-
+                       :key (:id font)} (:name font)])]]
          [:span "Size and Weight"]
          [:div.row-flex
           [:input.input-text
@@ -531,19 +542,22 @@
             :type "number"
             :min "0"
             :max "200"
-          :value (:font-size shape "16")
+            :value size
             :on-change on-font-size-change}]
-        [:select.input-select {:value (:font-weight shape ":normal")
+          [:select.input-select {:value (pr-str [weight style])
-                                     :on-change on-font-weight-change}
+                                 :on-change on-font-style-change}
-         [:option {:value ":normal"} "Normal"]
+           (for [style styles
-         [:option {:value ":bold"} "Solid"]]]
+                 :let [data (mapv #(get style %) [:weight :style])]]
+             [:option {:value (pr-str data)
+                       :key (:name style)} (:name style)])]]
+
          [: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