From 4c193d6026d605c15aee8399d12bda362293604b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Espino?= <jespinog@gmail.com>
Date: Thu, 12 May 2016 19:00:42 +0200
Subject: [PATCH] Bring the shape resize handlers to the front (#26)

---
 .../styles/partials/workspace-canvas.scss     |  21 ++--
 src/uxbox/ui/shapes/icon.cljs                 |  88 +--------------
 src/uxbox/ui/shapes/text.cljs                 |   4 +-
 src/uxbox/ui/workspace/canvas.cljs            |   2 +-
 src/uxbox/ui/workspace/selection.cljs         | 100 ++++++++++++++++--
 5 files changed, 103 insertions(+), 112 deletions(-)

diff --git a/resources/styles/partials/workspace-canvas.scss b/resources/styles/partials/workspace-canvas.scss
index 1ca94c885a..2c8df78e8a 100644
--- a/resources/styles/partials/workspace-canvas.scss
+++ b/resources/styles/partials/workspace-canvas.scss
@@ -44,17 +44,16 @@
       }
 
       svg {
-        g.shape {
-          &.selected {
-            circle.top-left { cursor: nwse-resize; }
-            circle.bottom-right { cursor: nwse-resize; }
-            circle.top-right { cursor: nesw-resize; }
-            circle.bottom-left { cursor: nesw-resize; }
-            rect.top { cursor: ns-resize; }
-            rect.bottom { cursor: ns-resize; }
-            rect.left { cursor: ew-resize; }
-            rect.right { cursor: ew-resize; }
-          }
+        g.controls {
+          rect.main { pointer-events: none; }
+          circle.top-left { cursor: nwse-resize; }
+          circle.bottom-right { cursor: nwse-resize; }
+          circle.top-right { cursor: nesw-resize; }
+          circle.bottom-left { cursor: nesw-resize; }
+          rect.top { cursor: ns-resize; }
+          rect.bottom { cursor: ns-resize; }
+          rect.left { cursor: ew-resize; }
+          rect.right { cursor: ew-resize; }
         }
 
       }
diff --git a/src/uxbox/ui/shapes/icon.cljs b/src/uxbox/ui/shapes/icon.cljs
index 2dad15ee77..d161755c15 100644
--- a/src/uxbox/ui/shapes/icon.cljs
+++ b/src/uxbox/ui/shapes/icon.cljs
@@ -58,8 +58,6 @@
       (dom/stop-propagation event)
       (uuc/release-action! "ui.shape"))))
 
-(declare handlers)
-
 (defmethod uusc/render-component :default ;; :icon
   [own shape]
   (let [{:keys [id x y width height group]} shape
@@ -71,91 +69,7 @@
      [:g.shape {:class (when selected? "selected")
                 :on-mouse-down on-mouse-down
                 :on-mouse-up on-mouse-up}
-      (uusc/render-shape shape #(uusc/shape %))
-      (when (and selected? (= (count selected) 1))
-        (handlers shape))])))
-
-;; --- Icon Handlers
-
-(defn- handlers-render
-  [own shape]
-  (letfn [(on-mouse-down [vid event]
-            (dom/stop-propagation event)
-            (uuc/acquire-action! "ui.shape.resize"
-                                 {:vid vid :shape (:id shape)}))
-
-          (on-mouse-up [vid event]
-            (dom/stop-propagation event)
-            (uuc/release-action! "ui.shape.resize"))]
-    (let [{:keys [x y width height]} (geom/inner-rect shape)]
-      (html
-       [:g.controls
-        [:rect {:x x :y y :width width :height height :stroke-dasharray "5,5"
-                :style {:stroke "#333" :fill "transparent"
-                        :stroke-opacity "1"}}]
-        [:rect.top
-         {:fill "#333"
-          :on-mouse-up #(on-mouse-up 5 %)
-          :on-mouse-down #(on-mouse-down 5 %)
-          :x (- (+ x (/ width 2)) 7)
-          :width 14
-          :height 3
-          :y (- y 5)}]
-        [:rect.right
-         {:fill "#333"
-          :on-mouse-up #(on-mouse-up 6 %)
-          :on-mouse-down #(on-mouse-down 6 %)
-          :y (- (+ y (/ height 2)) 7)
-          :width 3
-          :height 14
-          :x (+ x width 2)}]
-        [:rect.bottom
-         {:fill "#333"
-          :on-mouse-up #(on-mouse-up 7 %)
-          :on-mouse-down #(on-mouse-down 7 %)
-          :x (- (+ x (/ width 2)) 7)
-          :width 14
-          :height 3
-          :y (+ y height 2)}]
-        [:rect.left
-         {:fill "#333"
-          :on-mouse-up #(on-mouse-up 8 %)
-          :on-mouse-down #(on-mouse-down 8 %)
-          :y (- (+ y (/ height 2)) 7)
-          :width 3
-          :height 14
-          :x (- x 5)}]
-        [:circle.top-left
-         (merge uusc/+circle-props+
-                {:on-mouse-up #(on-mouse-up 1 %)
-                 :on-mouse-down #(on-mouse-down 1 %)
-                 :cx x
-                 :cy y})]
-        [:circle.top-right
-         (merge uusc/+circle-props+
-                {:on-mouse-up #(on-mouse-up 2 %)
-                 :on-mouse-down #(on-mouse-down 2 %)
-                 :cx (+ x width)
-                 :cy y})]
-        [:circle.bottom-left
-         (merge uusc/+circle-props+
-                {:on-mouse-up #(on-mouse-up 3 %)
-                 :on-mouse-down #(on-mouse-down 3 %)
-                 :cx x
-                 :cy (+ y height)})]
-        [:circle.bottom-right
-         (merge uusc/+circle-props+
-                {:on-mouse-up #(on-mouse-up 4 %)
-                 :on-mouse-down #(on-mouse-down 4 %)
-                 :cx (+ x width)
-                 :cy (+ y height)})]]))))
-
-(def ^:const handlers
-  (mx/component
-   {:render handlers-render
-    :name "handlers"
-    :mixins [mx/static]}))
-
+      (uusc/render-shape shape #(uusc/shape %))])))
 ;; --- Shape & Shape Svg
 
 (defmethod uusc/render-shape :icon
diff --git a/src/uxbox/ui/shapes/text.cljs b/src/uxbox/ui/shapes/text.cljs
index 00c0de5458..30c983faa4 100644
--- a/src/uxbox/ui/shapes/text.cljs
+++ b/src/uxbox/ui/shapes/text.cljs
@@ -116,9 +116,7 @@
                 :ref "main"
                 :on-mouse-down on-mouse-down
                 :on-mouse-up on-mouse-up}
-      (uusc/render-shape (assoc shape :editing? (:edition @local false)) nil)
-      (when (and selected? (not (:edition @local false)))
-        (uusi/handlers shape))])))
+      (uusc/render-shape (assoc shape :editing? (:edition @local false)) nil)])))
 
 (def ^:const text-component
   (mx/component
diff --git a/src/uxbox/ui/workspace/canvas.cljs b/src/uxbox/ui/workspace/canvas.cljs
index 01f21cebd5..93039f864f 100644
--- a/src/uxbox/ui/workspace/canvas.cljs
+++ b/src/uxbox/ui/workspace/canvas.cljs
@@ -65,11 +65,11 @@
                         :height height}
       (background)
       [:svg.page-layout {}
-       (selection-handlers)
        [:g.main {}
         (for [item (reverse (:shapes page))]
           (-> (uus/shape item)
               (rum/with-key (str item))))
+        (selection-handlers)
         (draw-area)]]])))
 
 (def canvas
diff --git a/src/uxbox/ui/workspace/selection.cljs b/src/uxbox/ui/workspace/selection.cljs
index 5ea58e20d7..ee65891e47 100644
--- a/src/uxbox/ui/workspace/selection.cljs
+++ b/src/uxbox/ui/workspace/selection.cljs
@@ -12,7 +12,10 @@
             [lentes.core :as l]
             [uxbox.state :as st]
             [uxbox.ui.mixins :as mx]
-            [uxbox.util.geom :as geom]))
+            [uxbox.ui.shapes.core :as uusc]
+            [uxbox.ui.core :as uuc]
+            [uxbox.util.geom :as geom]
+            [uxbox.util.dom :as dom]))
 
 ;; --- Lenses
 
@@ -25,17 +28,94 @@
 
 ;; --- Selection Handlers (Component)
 
+(defn- multiple-selection-handlers-render
+  [shapes]
+  (let [{:keys [width height x y]} (geom/outer-rect-coll shapes)]
+    (html
+     [:g.controls
+      [:rect.main {:x x :y y :width width :height height :stroke-dasharray "5,5"
+                   :style {:stroke "#333" :fill "transparent" :stroke-opacity "1"}}]])))
+
+(defn- single-selection-handlers-render
+  [shape]
+  (letfn [
+          (on-mouse-down [vid event]
+            (dom/stop-propagation event)
+            (uuc/acquire-action! "ui.shape.resize"
+                                 {:vid vid :shape (:id shape)}))
+
+          (on-mouse-up [vid event]
+            (dom/stop-propagation event)
+            (uuc/release-action! "ui.shape.resize"))]
+    (let [{:keys [x y width height]} (geom/outer-rect shape)]
+      (html
+       [:g.controls
+        [:rect.main {:x x :y y :width width :height height :stroke-dasharray "5,5"
+                     :style {:stroke "#333" :fill "transparent" :stroke-opacity "1"}}]
+        [:rect.top
+         {:fill "#333"
+          :on-mouse-up #(on-mouse-up 5 %)
+          :on-mouse-down #(on-mouse-down 5 %)
+          :x (- (+ x (/ width 2)) 7)
+          :width 14
+          :height 3
+          :y (- y 5)}]
+        [:rect.right
+         {:fill "#333"
+          :on-mouse-up #(on-mouse-up 6 %)
+          :on-mouse-down #(on-mouse-down 6 %)
+          :y (- (+ y (/ height 2)) 7)
+          :width 3
+          :height 14
+          :x (+ x width 2)}]
+        [:rect.bottom
+         {:fill "#333"
+          :on-mouse-up #(on-mouse-up 7 %)
+          :on-mouse-down #(on-mouse-down 7 %)
+          :x (- (+ x (/ width 2)) 7)
+          :width 14
+          :height 3
+          :y (+ y height 2)}]
+        [:rect.left
+         {:fill "#333"
+          :on-mouse-up #(on-mouse-up 8 %)
+          :on-mouse-down #(on-mouse-down 8 %)
+          :y (- (+ y (/ height 2)) 7)
+          :width 3
+          :height 14
+          :x (- x 5)}]
+        [:circle.top-left
+         (merge uusc/+circle-props+
+                {:on-mouse-up #(on-mouse-up 1 %)
+                 :on-mouse-down #(on-mouse-down 1 %)
+                 :cx x
+                 :cy y})]
+        [:circle.top-right
+         (merge uusc/+circle-props+
+                {:on-mouse-up #(on-mouse-up 2 %)
+                 :on-mouse-down #(on-mouse-down 2 %)
+                 :cx (+ x width)
+                 :cy y})]
+        [:circle.bottom-left
+         (merge uusc/+circle-props+
+                {:on-mouse-up #(on-mouse-up 3 %)
+                 :on-mouse-down #(on-mouse-down 3 %)
+                 :cx x
+                 :cy (+ y height)})]
+        [:circle.bottom-right
+         (merge uusc/+circle-props+
+                {:on-mouse-up #(on-mouse-up 4 %)
+                 :on-mouse-down #(on-mouse-down 4 %)
+                 :cx (+ x width)
+                 :cy (+ y height)})]]))))
+
 (defn selection-handlers-render
   [own]
-  (let [shapes (rum/react selected-shapes-l)]
-    (when (> (count shapes) 1)
-      (let [{:keys [width height x y]} (geom/outer-rect-coll shapes)]
-        (html
-         [:g.controls
-          [:rect {:x x :y y :width width :height height
-                  :stroke-dasharray "5,5"
-                  :style {:stroke "#333" :fill "transparent"
-                          :stroke-opacity "1"}}]])))))
+  (let [shapes (rum/react selected-shapes-l)
+        shapes-num (count shapes)]
+    (cond
+      (> shapes-num 1) (multiple-selection-handlers-render shapes)
+      (= shapes-num 1) (single-selection-handlers-render (first shapes)))))
 
 (def selection-handlers
   (mx/component