Add basic icons rendering on canvas.

frontend/uxbox/data/workspace.cljs

@@ -6,11 +6,22 @@
             [uxbox.time :as time]
             [bouncer.validators :as v]))
 
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; Schemas
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+
+(def ^:static +shape-props-schema+
+  {:x [v/required v/integer]
+   :y [v/required v/integer]
+   :width [v/required v/integer]
+   :height [v/required v/integer]})
+
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; Events
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 
 (defn toggle-tool
+  "Toggle the enabled flag of the specified tool."
   [toolname]
   (reify
     rs/UpdateEvent
@@ -20,9 +31,10 @@
 
     IPrintWithWriter
     (-pr-writer [mv writer _]
-      (-write writer "#<event:u.s.p/toggle-tool>"))))
+      (-write writer "#<event:u.d.w/toggle-tool>"))))
 
 (defn toggle-toolbox
+  "Toggle the visibility flag of the specified toolbox."
   [toolname]
   (reify
     rs/UpdateEvent
@@ -36,9 +48,44 @@
 
     IPrintWithWriter
     (-pr-writer [mv writer _]
-      (-write writer "#<event:u.s.p/toggle-toolbox>"))))
+      (-write writer "#<event:u.d.w/toggle-toolbox>"))))
+
+(defn select-for-drawing
+  "Mark a shape selected for drawing in the canvas."
+  [shape]
+  (reify
+    rs/UpdateEvent
+    (-apply-update [_ state]
+      (println "select-for-drawing" shape)
+      (if shape
+        (assoc-in state [:workspace :drawing] shape)
+        (update-in state [:workspace] dissoc :drawing)))
+
+    IPrintWithWriter
+    (-pr-writer [mv writer _]
+      (-write writer "#<event:u.d.w/select-for-drawing>"))))
+
+;; TODO: validate shape
+
+(defn add-shape
+  "Mark a shape selected for drawing in the canvas."
+  [shape props]
+  (sc/validate! +shape-props-schema+ props)
+  (reify
+    rs/UpdateEvent
+    (-apply-update [_ state]
+      (println "add-shape")
+      (if-let [pageid (get-in state [:workspace :page])]
+        (update-in state [:pages-by-id pageid :shapes] conj
+                   (merge shape props))
+        state))
+
+    IPrintWithWriter
+    (-pr-writer [mv writer _]
+      (-write writer "#<event:u.d.w/add-shape>"))))
 
 (defn initialize
+  "Initialize the workspace state."
   [projectid pageid]
   (reify
     rs/UpdateEvent
@@ -52,4 +99,5 @@
 
     IPrintWithWriter
     (-pr-writer [mv writer _]
-      (-write writer "#<event:u.s.p/initialize>"))))
+      (-write writer "#<event:u.d.w/initialize>"))))
+

frontend/uxbox/ui/workspace/canvas.cljs

@@ -111,7 +111,8 @@
        }
       (background)
       [:svg.page-layout
-       #_(shape item)]
+       (for [item (:shapes page)]
+         (shape item))]
       #_(apply vector :svg#page-layout (map shapes/shape->svg raw-shapes))
       #_(when-let [shape (rum/react drawing)]
           (shapes/shape->drawing-svg shape))

frontend/uxbox/ui/workspace/toolboxes.cljs

@@ -106,16 +106,28 @@
 ;; Icons
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 
+(defn- select-icon
+  [icon]
+  (if (= (:drawing @wb/workspace-state) icon)
+    (rs/emit! (dw/select-for-drawing nil))
+    (rs/emit! (dw/select-for-drawing icon))))
+
+(defn- change-icon-coll
+  [local event]
+  (let [value (-> (dom/event->value event)
+                  (read-string))]
+    (swap! local assoc :collid value)
+    (rs/emit! (dw/select-for-drawing nil))))
+
 (defn icons-render
   [own]
   (let [local (:rum/local own)
+        workspace (rum/react wb/workspace-state)
         collid (:collid @local)
         icons (get-in library/+icon-collections-by-id+ [collid :icons])
         on-close #(rs/emit! (dw/toggle-toolbox :icons))
-        on-change (fn [e]
+        on-select #(select-icon %)
-                    (let [value (dom/event->value e)
+        on-change #(change-icon-coll local %)]
-                          value (read-string value)]
-                      (swap! local assoc :collid value)))]
     (html
      [:div#form-figures.tool-window
       [:div.tool-window-bar
@@ -132,9 +144,10 @@
            [:option {:key (str "icon-coll" (:id icon-coll))
                      :value (pr-str (:id icon-coll))}
             (:name icon-coll)])]]
-       (for [icon icons]
+       (for [icon icons
-         [:div.figure-btn {:class nil #_"selected"
+             :let [selected? (= (:drawing workspace) icon)]]
-                           :on-click (constantly nil)}
+         [:div.figure-btn {:class (when selected? "selected")
+                           :on-click #(on-select icon)}
           (shapes/render icon)])]])))
 
 (def ^:static icons

frontend/uxbox/ui/workspace/workarea.cljs

@@ -6,22 +6,39 @@
             [uxbox.state :as s]
             [uxbox.ui.mixins :as mx]
             [uxbox.ui.util :as util]
+            [uxbox.data.workspace :as dw]
             [uxbox.ui.workspace.canvas :refer (canvas)]
             [uxbox.ui.workspace.grid :refer (grid)]
             [uxbox.ui.workspace.base :as wb]))
 
+;; TODO: implement as streams
+
+(defn- on-click
+  [event wstate]
+  (let [mousepos @wb/mouse-position
+        shape (:drawing wstate)]
+    (when shape
+      (let [props {:x (first mousepos)
+                   :y (second mousepos)
+                   :width 100
+                   :height 100}]
+        (rs/emit!
+         (dw/add-shape shape props)
+         (dw/select-for-drawing nil))))))
+
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
-;; Viewport
+;; Viewport Component
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 
 (defn viewport-render
-  []
+  [own]
   (let [workspace (rum/react wb/workspace-state)
         drawing? (:drawing workspace)
         zoom 1]
     (html
      [:svg.viewport {:width wb/viewport-height
                      :height wb/viewport-width
+                     :on-click #(on-click % workspace)
                      :class (when drawing? "drawing")}
       [:g.zoom {:transform (str "scale(" zoom ", " zoom ")")}
        (canvas)