Add draw toolbox rendering on workarea.

frontend/uxbox/data/workspace.cljs

@@ -27,7 +27,7 @@
   (reify
     rs/UpdateEvent
     (-apply-update [_ state]
-      (let [key (keyword (str (name toolname) "-enabled"))
+      (let [key (keyword (str (name toolname) "-toolbox-enabled"))
             val (get-in state [:workspace key] false)
             state (assoc-in state [:workspace key] (not val))]
         (if val

frontend/uxbox/ui/workspace.cljs

@@ -12,7 +12,7 @@
             [uxbox.ui.workspace.pagesmngr :refer (pagesmngr)]
             [uxbox.ui.workspace.header :refer (header)]
             [uxbox.ui.workspace.rules :refer (h-rule v-rule)]
-            [uxbox.ui.workspace.workarea :refer (workarea)]))
+            [uxbox.ui.workspace.workarea :refer (workarea aside)]))
 
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; Workspace
@@ -20,27 +20,29 @@
 
 (defn workspace-render
   [own projectid]
-  (html
-   [:div
-    (header)
-    [:main.main-content
-     [:section.workspace-content
-      ;; Lateral Menu (left side)
-      (lateralmenu)
+  (let [workspace (rum/react wb/workspace-state )]
+    (html
+     [:div
+      (header)
+      [:main.main-content
+       [:section.workspace-content
+        ;; Lateral Menu (left side)
+        (lateralmenu)
 
-      ;; Pages management lightbox
-      (pagesmngr)
+        ;; Pages management lightbox
+        (pagesmngr)
 
-      ;; Rules
-      (h-rule)
-      (v-rule)
+        ;; Rules
+        (h-rule)
+        (v-rule)
 
-      ;; Canvas
-      (workarea)
+        ;; Canvas
+        (workarea)]
+
+       ;; Aside
+       (when-not (empty? (:toolboxes workspace))
+         (aside))]])))
 
-      ;; Aside
-      ;; (wa/aside)
-      ]]]))
 
 (defn workspace-will-mount
   [own]

frontend/uxbox/ui/workspace/lateralmenu.cljs

@@ -27,17 +27,17 @@
        [:ul.main-tools
         [:li.tooltip
          {:alt "Shapes (Ctrl + Shift + F)"
-          :class (when (:tools-enabled workspace false) "current")
-          :on-click (partial toggle :tools)}
+          :class (when (:draw-toolbox-enabled workspace false) "current")
+          :on-click (partial toggle :draw)}
          i/shapes]
         [:li.tooltip
          {:alt "Icons (Ctrl + Shift + I)"
-          :class (when (:icons-enabled workspace false) "current")
+          :class (when (:icons-toolbox-enabled workspace false) "current")
           :on-click (partial toggle :icons)}
          i/icon-set]
         [:li.tooltip
          {:alt "Elements (Ctrl + Shift + L)"
-          :class (when (:layers-enabled workspace false) "current")
+          :class (when (:layers-toolbox-enabled workspace false) "current")
           :on-click (partial toggle :layers)}
          i/layers]
         [:li.tooltip

frontend/uxbox/ui/workspace/toolboxes.cljs

@@ -0,0 +1,69 @@
+(ns uxbox.ui.workspace.toolboxes
+  (:require [sablono.core :as html :refer-macros [html]]
+            [rum.core :as rum]
+            [uxbox.router :as r]
+            [uxbox.rstore :as rs]
+            [uxbox.state :as s]
+            [uxbox.data.workspace :as dw]
+            [uxbox.ui.workspace.base :as wb]
+            [uxbox.ui.icons :as i]
+            [uxbox.ui.mixins :as mx]
+            [uxbox.ui.util :as util]))
+
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; Draw Tools
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+
+(def ^:staric draw-tools
+  {:rect
+   {:icon i/box
+    :help "Box (Ctrl + B)"
+    :priority 10}
+   :circle
+   {:icon i/circle
+    :help "Circle (Ctrl + E)"
+    :priority 20}
+   :line
+   {:icon i/line
+    :help "Line (Ctrl + L)"
+    :priority 30}})
+
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; Draw Tool Box
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+
+(defn draw-toolbox-render
+  [open-toolboxes]
+  (let [workspace (rum/react wb/workspace-state)
+        close #(rs/emit! (dw/toggle-toolbox :draw))
+        tools (->> (into [] draw-tools)
+                   (sort-by (comp :priority second)))]
+    (html
+     [:div#form-tools.tool-window
+      [:div.tool-window-bar
+       [:div.tool-window-icon i/window]
+       [:span "Tools"]
+       [:div.tool-window-close {:on-click close} i/close]]
+      [:div.tool-window-content
+       (for [[key props] tools]
+         [:div.tool-btn.tooltip.tooltip-hover
+          {:alt (:help props)
+           :key (name key)
+           :on-click (constantly nil)}
+          (:icon props)])]])))
+
+;; #_(for [tool (t/sorted-tools (rum/react t/drawing-tools))]
+;;   [:div.tool-btn.tooltip.tooltip-hover
+;;    {:alt (:text tool)
+;;     :class (when (= (rum/react ws/selected-tool)
+;;                     [(:key tool)])
+;;              "selected")
+;;     :key (:key tool)
+;;     :on-click #(ws/toggle-tool! [(:key tool)])}
+;;    (:icon tool)])]])))
+
+(def ^:static draw-toolbox
+  (util/component
+   {:render draw-toolbox-render
+    :name "draw-toolbox"
+    :mixins [mx/static rum/reactive]}))

frontend/uxbox/ui/workspace/workarea.cljs

@@ -4,11 +4,12 @@
             [uxbox.router :as r]
             [uxbox.rstore :as rs]
             [uxbox.state :as s]
+            [uxbox.ui.mixins :as mx]
+            [uxbox.ui.util :as util]
             [uxbox.data.projects :as dp]
             [uxbox.ui.workspace.base :as wb]
             [uxbox.ui.workspace.rules :as wr]
-            [uxbox.ui.mixins :as mx]
-            [uxbox.ui.util :as util]))
+            [uxbox.ui.workspace.toolboxes :refer (draw-toolbox)]))
 
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; Coordinates Debug
@@ -214,20 +215,17 @@
 (defn aside-render
   [own]
   (let [workspace (rum/react wb/workspace-state)]
-    [:aside#settings-bar.settings-bar
-     [:div.settings-bar-inside
-      [:p "foo bar"]
-      #_(when (:tools open-setting-boxes)
-        (tools open-toolboxes))
-
-      #_(when (:icons open-setting-boxes)
-        (icon-sets open-toolboxes))
-
-      #_(when (:components open-setting-boxes)
-        (components open-toolboxes components))
-
-      #_(when (:layers open-setting-boxes)
-        (layers conn open-toolboxes page shapes))]]))
+    (html
+     [:aside#settings-bar.settings-bar
+      [:div.settings-bar-inside
+       (when (:draw-toolbox-enabled workspace false)
+         (draw-toolbox))
+       #_(when (:icons open-setting-boxes)
+           (icon-sets open-toolboxes))
+       #_(when (:components open-setting-boxes)
+           (components open-toolboxes components))
+       #_(when (:layers open-setting-boxes)
+           (layers conn open-toolboxes page shapes))]])))
 
 (def aside
   (util/component