Initial work on basic shapes rendering.

src/uxbox/ui/workspace/toolboxes/drawtools.cljs

@@ -2,6 +2,7 @@
   (:require [sablono.core :as html :refer-macros [html]]
             [rum.core :as rum]
             [cats.labs.lens :as l]
+            [uxbox.locales :refer (tr)]
             [uxbox.router :as r]
             [uxbox.rstore :as rs]
             [uxbox.state :as st]
@@ -14,6 +15,18 @@
             [uxbox.ui.mixins :as mx]
             [uxbox.ui.dom :as dom]))
 
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; Lenses
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+
+(def ^:private ^:static drawing-shape
+  "A focused vision of the drawing property
+  of the workspace status. This avoids
+  rerender the whole toolbox on each workspace
+  change."
+  (as-> (l/in [:workspace :drawing]) $
+    (l/focus-atom $ st/state)))
+
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; Draw Tools
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
@@ -21,24 +34,49 @@
 (def ^:staric +draw-tools+
   {:rect
    {:icon i/box
-    :help "Box (Ctrl + B)"
+    :help (tr "ds.help.rect")
+    :shape {:type :builtin/rect
+            :name "Rect"
+            :width 20
+            :height 20
+            :stroke "#000000"
+            :stroke-width "1"
+            :view-box [0 0 20 20]}
     :priority 10}
    :circle
    {:icon i/circle
-    :help "Circle (Ctrl + E)"
+    :help (tr "ds.help.circle")
+    :shape {:type :builtin/circle
+            :name "Circle"
+            :width 20
+            :height 20
+            :stroke "#000000"
+            :stroke-width "1"
+            :view-box [0 0 20 20]}
     :priority 20}
    :line
    {:icon i/line
-    :help "Line (Ctrl + L)"
+    :help (tr "ds.help.line")
+    :shape {:type :builtin/line
+            :width 20
+            :height 20
+            :view-box [0 0 20 20]}
     :priority 30}})
 
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; Draw Tool Box
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 
+(defn- select-for-draw
+  [icon]
+  (if (= (:drawing @wb/workspace-l) icon)
+    (rs/emit! (dw/select-for-drawing nil))
+    (rs/emit! (dw/select-for-drawing icon))))
+
 (defn draw-tools-render
   [open-toolboxes]
   (let [workspace (rum/react wb/workspace-l)
+        drawing (rum/react drawing-shape)
         close #(rs/emit! (dw/toggle-toolbox :draw))
         tools (->> (into [] +draw-tools+)
                    (sort-by (comp :priority second)))]
@@ -46,14 +84,16 @@
      [:div#form-tools.tool-window
       [:div.tool-window-bar
        [:div.tool-window-icon i/window]
-       [:span "Tools"]
+       [:span (tr "ds.tools")]
        [:div.tool-window-close {:on-click close} i/close]]
       [:div.tool-window-content
-       (for [[key props] tools]
+       (for [[key props] tools
+             :let [selected? (= drawing (:shape props))]]
          [:div.tool-btn.tooltip.tooltip-hover
           {:alt (:help props)
+           :class (when selected? "selected")
            :key (name key)
-           :on-click (constantly nil)}
+           :on-click (partial select-for-draw (:shape props))}
           (:icon props)])]])))
 
 (def ^:static draw-toolbox

src/uxbox/ui/workspace/toolboxes/layers.cljs

@@ -144,6 +144,7 @@
                :let [key (str (:id shape))]]
            ;; TODO: make polymorphic
            (case (:type shape)
+             :builtin/rect (rum/with-key (layer-element shape selected) key)
              :builtin/icon (rum/with-key (layer-element shape selected) key)
              :builtin/group (rum/with-key (layer-group shape selected) key)))])])))
 
@@ -175,6 +176,7 @@
               :let [key (str (:id shape))]]
           ;; TODO: make polymorphic
           (case (:type shape)
+            :builtin/rect (rum/with-key (layer-element shape selected) key)
             :builtin/icon (rum/with-key (layer-element shape selected) key)
             :builtin/group (rum/with-key (layer-group shape selected) key)))]]
       [:div.layers-tools