Fix bugs related to shape deselection on canvas.

And put the viewport and canvas components togther.

src/uxbox/ui/workspace.cljs

@@ -17,7 +17,7 @@
             [uxbox.ui.workspace.rules :refer (h-rule v-rule)]
             [uxbox.ui.workspace.sidebar :refer (aside)]
             [uxbox.ui.workspace.colorpalette :refer (colorpalette)]
-            [uxbox.ui.workspace.workarea :refer (viewport)]))
+            [uxbox.ui.workspace.canvas :refer (viewport)]))
 
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; Coordinates Debug

src/uxbox/ui/workspace/base.cljs

@@ -35,6 +35,10 @@
   (as-> (l/in [:workspace :toolboxes]) $
     (l/focus-atom $ st/state)))
 
+(def ^:static selected-shapes-l
+  (as-> (l/in [:workspace :selected]) $
+    (l/focus-atom $ st/state)))
+
 (def ^:static flags-l
   (as-> (l/in [:workspace :flags]) $
     (l/focus-atom $ st/state)))

src/uxbox/ui/workspace/canvas.cljs

@@ -221,38 +221,27 @@
         shapes (sequence xf (:shapes page))
         shapes-selected (filter (comp workspace-selected :id) shapes)
         shapes-notselected (filter (comp not workspace-selected :id) shapes)]
-    (letfn [(on-mouse-down [event]
+    (html
-              (dom/stop-propagation event)
+     [:svg#page-canvas.page-canvas {:x wb/document-start-x
-              (when-not (empty? shapes-selected)
+                                    :y wb/document-start-y
-                (rs/emit! (dw/deselect-all)))
+                                    :ref (str "canvas" id)
-              (reset! wb/selrect-dragging? true))
+                                    :width width
-            (on-mouse-up [event]
+                                    :height height}
-              (dom/stop-propagation event)
+      (background)
-              (reset! wb/shapes-dragging? false)
+      (grid 1)
-              (reset! wb/selrect-dragging? false))]
+      [:svg.page-layout {}
-      (html
+       (for [item shapes-notselected
-       [:svg#page-canvas.page-canvas {:x wb/document-start-x
+             :let [component (shape item workspace-selected)]]
-                                      :y wb/document-start-y
+         (rum/with-key component (str (:id item))))
-                                      :ref (str "canvas" id)
-                                      :width width
-                                      :height height
-                                      :on-mouse-down on-mouse-down
-                                      :on-mouse-up on-mouse-up}
-        (background)
-        (grid 1)
-        [:svg.page-layout {}
-         (for [item shapes-notselected
-               :let [component (shape item workspace-selected)]]
-           (rum/with-key component (str (:id item))))
 
-         (cond
+       (cond
-           (= (count shapes-selected) 1)
+         (= (count shapes-selected) 1)
-           (let [item (first shapes-selected)]
+         (let [item (first shapes-selected)]
-             (shape item workspace-selected))
+           (shape item workspace-selected))
 
-           (> (count shapes-selected) 1)
+         (> (count shapes-selected) 1)
-           (selected-shapes shapes-selected))
+         (selected-shapes shapes-selected))
-         (selrect)]]))))
+       (selrect)]])))
 
 (def canvas
   (mx/component
@@ -262,3 +251,51 @@
     :transfer-state canvas-transfer-state
     :name "canvas"
     :mixins [mx/static rum/reactive]}))
+
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; Viewport Component
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+
+(defn viewport-render
+  [own]
+  (let [workspace (rum/react wb/workspace-l)
+        page (rum/react wb/page-l)
+        drawing? (:drawing workspace)
+        zoom 1]
+    (letfn [(on-mouse-down [event]
+              (dom/stop-propagation event)
+              (when-not (empty? (:selected workspace))
+                (rs/emit! (dw/deselect-all)))
+              (reset! wb/selrect-dragging? true))
+            (on-mouse-up [event]
+              (dom/stop-propagation event)
+              (reset! wb/shapes-dragging? false)
+              (reset! wb/selrect-dragging? false))
+            (on-click [event wstate]
+              (let [mousepos @wb/mouse-position
+                    scroll-top @wb/scroll-top
+                    shape (:drawing wstate)]
+                (when shape
+                  (let [props {:x (first mousepos)
+                               :y (+ (second mousepos) scroll-top)
+                               :width 100
+                               :height 100}]
+                    (rs/emit!
+                     (dw/add-shape shape props)
+                     (dw/select-for-drawing nil))))))]
+      (html
+       [:svg.viewport {:width wb/viewport-height
+                       :height wb/viewport-width
+                       :class (when drawing? "drawing")
+                       :on-click #(on-click % workspace)
+                       :on-mouse-down on-mouse-down
+                       :on-mouse-up on-mouse-up}
+        [:g.zoom {:transform (str "scale(" zoom ", " zoom ")")}
+         (if page
+           (canvas page))]]))))
+
+(def viewport
+  (mx/component
+   {:render viewport-render
+    :name "viewport"
+    :mixins [rum/reactive]}))

src/uxbox/ui/workspace/workarea.cljs

@@ -1,50 +0,0 @@
-(ns uxbox.ui.workspace.workarea
-  (: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.ui.mixins :as mx]
-            [uxbox.data.workspace :as dw]
-            [uxbox.ui.workspace.canvas :refer (canvas)]
-            [uxbox.ui.workspace.grid :refer (grid)]
-            [uxbox.ui.workspace.base :as wb]))
-
-(defn- on-click
-  [event wstate]
-  (let [mousepos @wb/mouse-position
-        scroll-top @wb/scroll-top
-        shape (:drawing wstate)]
-    (when shape
-      (let [props {:x (first mousepos)
-                   :y (+ (second mousepos) scroll-top)
-                   :width 100
-                   :height 100}]
-        (rs/emit!
-         (dw/add-shape shape props)
-         (dw/select-for-drawing nil))))))
-
-;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
-;; Viewport Component
-;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
-
-(defn viewport-render
-  [own]
-  (let [workspace (rum/react wb/workspace-l)
-        page (rum/react wb/page-l)
-        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 ")")}
-       (if page
-         (canvas page))]])))
-
-(def viewport
-  (mx/component
-   {:render viewport-render
-    :name "viewport"
-    :mixins [rum/reactive]}))