Refactor shapes and selection rendering in order to be aware of rotation.

frontend/src/uxbox/main/data/shapes.cljs

@@ -5,21 +5,31 @@
 ;; Copyright (c) 2015-2016 Andrey Antukh <niwi@niwi.nz>
 
 (ns uxbox.main.data.shapes
-  (:require [beicon.core :as rx]
+  (:require [cljs.spec :as s :include-macros true]
+            [beicon.core :as rx]
             [uxbox.util.uuid :as uuid]
             [potok.core :as ptk]
             [uxbox.store :as st]
-            [uxbox.util.forms :as sc]
-            [uxbox.util.geom.point :as gpt]
-            [uxbox.util.geom.matrix :as gmt]
-            [uxbox.util.router :as r]
-            [uxbox.util.rlocks :as rlocks]
-            [uxbox.util.workers :as uw]
             [uxbox.main.constants :as c]
             [uxbox.main.geom :as geom]
             [uxbox.main.data.core :refer (worker)]
             [uxbox.main.data.shapes-impl :as impl]
-            [uxbox.main.data.pages :as udp]))
+            [uxbox.main.data.pages :as udp]
+            [uxbox.util.forms :as sc]
+            [uxbox.util.spec :as us]
+            [uxbox.util.geom.point :as gpt]
+            [uxbox.util.geom.matrix :as gmt]
+            [uxbox.util.router :as r]
+            [uxbox.util.rlocks :as rlocks]
+            [uxbox.util.workers :as uw]))
+
+(s/def ::x1 number?)
+(s/def ::y1 number?)
+(s/def ::x2 number?)
+(s/def ::y2 number?)
+(s/def ::type keyword?)
+
+(s/def ::rect-shape (s/keys :req-un [::x1 ::y1 ::x2 ::y2 ::type]))
 
 ;; --- Shapes CRUD
 
@@ -56,16 +66,6 @@
 
 ;; --- Shape Transformations
 
-(defn move-shape
-  "Move shape using relative position (delta)."
-  [sid delta]
-  (reify
-    udp/IPageUpdate
-    ptk/UpdateEvent
-    (update [_ state]
-      (let [shape (get-in state [:shapes sid])]
-        (update-in state [:shapes sid] geom/move delta)))))
-
 (declare align-point)
 
 (def ^:private canvas-coords
@@ -126,11 +126,23 @@
 
 ;; --- Apply Temporal Displacement
 
+(defn rotate
+  [{:keys [x1 y1 x2 y2 rotation] :as shape}]
+  (let [x-center (+ x1 (/ (- x2 x1) 2))
+        y-center (+ y1 (/ (- y2 y1) 2))]
+    (-> (gmt/matrix)
+        #_(gmt/translate  x-center y-center)
+        (gmt/rotate 15)
+        #_(gmt/translate (- x-center) (- y-center)))))
+
 (deftype ApplyTemporalDisplacement [id delta]
+  udp/IPageUpdate
   ptk/UpdateEvent
   (update [_ state]
-    (let [current-delta (get-in state [:shapes id :tmp-displacement] (gpt/point 0 0))
+    (let [shape (get-in state [:shapes id])
-          delta (gpt/add current-delta delta)]
+          displ (:tmp-displacement shape (gpt/point 0 0))
+          ;; delta (gpt/transform delta (rotate shape))
+          delta (gpt/add displ delta)]
       (assoc-in state [:shapes id :tmp-displacement] delta))))
 
 (defn apply-temporal-displacement
@@ -141,6 +153,7 @@
 ;; --- Apply Displacement
 
 (deftype ApplyDisplacement [id]
+  udp/IPageUpdate
   ptk/UpdateEvent
   (update [_ state]
     (let [{:keys [tmp-displacement type] :as shape} (get-in state [:shapes id])
@@ -170,6 +183,7 @@
 ;; --- Apply Temporal Resize Matrix
 
 (deftype ApplyTemporalResizeMatrix [id mx]
+  udp/IPageUpdate
   ptk/UpdateEvent
   (update [_ state]
     (assoc-in state [:shapes id :tmp-resize-xform] mx)))
@@ -184,6 +198,7 @@
 (declare apply-resize-matrix)
 
 (deftype ApplyResizeMatrix [id]
+  udp/IPageUpdate
   ptk/UpdateEvent
   (update [_ state]
     (let [{:keys [type tmp-resize-xform]
@@ -210,26 +225,6 @@
   {:pre [(uuid? id)]}
   (ApplyResizeMatrix. id))
 
-(defn update-vertex-position
-  [id {:keys [vid delta]}]
-  (reify
-    udp/IPageUpdate
-    ptk/UpdateEvent
-    (update [_ state]
-      (update-in state [:shapes id] geom/move-vertex vid delta))))
-
-(defn initial-vertext-align
-  [id vid]
-  (reify
-    ptk/WatchEvent
-    (watch [_ state s]
-      (let [shape (get-in state [:shapes id])
-            point (geom/get-vertex-point shape vid)
-            point (gpt/add point canvas-coords)]
-        (->> (align-point point)
-             (rx/map #(gpt/subtract % point))
-             (rx/map #(update-vertex-position id {:vid vid :delta %})))))))
-
 (defn update-position
   "Update the start position coordenate of the shape."
   [sid {:keys [x y] :as opts}]
@@ -481,21 +476,23 @@
 (defn select-shape
   "Mark a shape selected for drawing in the canvas."
   [id]
+  {:pre [(uuid? id)]}
   (SelectShape. id))
 
 ;; --- Select Shapes
 
-(defrecord SelectShapes [selrect]
+(deftype SelectShapesBySelrect [selrect]
   ptk/UpdateEvent
   (update [_ state]
     (let [page (get-in state [:workspace :page])
           shapes (impl/match-by-selrect state page selrect)]
       (assoc-in state [:workspace :selected] shapes))))
 
-(defn select-shapes
+(defn select-shapes-by-selrect
   "Select shapes that matches the select rect."
   [selrect]
-  (SelectShapes. selrect))
+  {:pre [(us/valid? ::rect-shape selrect)]}
+  (SelectShapesBySelrect. selrect))
 
 ;; --- Update Interaction
 
@@ -636,23 +633,6 @@
         (rx/from-coll
          (into [(deselect-all)] (map #(delete-shape %) selected)))))))
 
-(defn move-selected
-  "Move a minimal position unit the selected shapes."
-  ([dir] (move-selected dir 1))
-  ([dir n]
-   {:pre [(contains? #{:up :down :right :left} dir)]}
-   (reify
-     ptk/WatchEvent
-     (watch [_ state s]
-       (let [selected (get-in state [:workspace :selected])
-             delta (case dir
-                    :up (gpt/point 0 (- n))
-                    :down (gpt/point 0 n)
-                    :right (gpt/point n 0)
-                    :left (gpt/point (- n) 0))]
-         (rx/from-coll
-          (map #(move-shape % delta) selected)))))))
-
 (defn update-selected-shapes-fill
   "Update the fill related attributed on
   selected shapes."

frontend/src/uxbox/main/data/shapes_impl.cljs

@@ -276,7 +276,7 @@
   (let [xf (comp (map #(get-in state [:shapes %]))
                  (remove :hidden)
                  (remove :blocked)
-                 (map geom/outer-rect))
+                 (map geom/selection-rect))
         match (partial try-match-shape xf selrect)
         shapes (get-in state [:pages page :shapes])]
     (reduce match #{} (sequence xf shapes))))

frontend/src/uxbox/main/ui/shapes/circle.cljs

@@ -32,11 +32,18 @@
 
 (mx/defc circle-shape
   {:mixins [mx/static]}
-  [{:keys [id tmp-resize-xform tmp-displacement] :as shape}]
+  [{:keys [id tmp-resize-xform tmp-displacement rotation cx cy] :as shape}]
-  (let [xfmt (cond-> (or tmp-resize-xform (gmt/matrix))
+  (let [shape (cond-> shape
-               tmp-displacement (gmt/translate tmp-displacement))
+                tmp-displacement (geom/transform (gmt/translate-matrix tmp-displacement))
+                tmp-resize-xform (geom/transform tmp-resize-xform))
+        center (gpt/point (:cx shape)
+                          (:cy shape))
+        rotation (or rotation 0)
 
-        props {:transform (str xfmt) :id (str id)}
+        xfmt (-> (gmt/matrix)
+                 (gmt/rotate* rotation center))
+
+        props {:id (str id) :transform (str xfmt)}
         attrs (merge props
                      (attrs/extract-style-attrs shape)
                      (select-keys shape [:cx :cy :rx :ry]))]

frontend/src/uxbox/main/ui/shapes/group.cljs

@@ -19,7 +19,6 @@
             [uxbox.util.geom.matrix :as gmt]
             [uxbox.util.mixins :as mx :include-macros true]))
 
-
 ;; --- Helpers
 
 (declare group-component)
@@ -70,8 +69,7 @@
   (let [xfmt (cond-> (or tmp-resize-xform (gmt/matrix))
                tmp-displacement (gmt/translate tmp-displacement))
 
-        props {:id (str id)
+        props {:id (str id) :transform (str xfmt)}
-               :transform (str xfmt)}
 
         attrs (merge props (attrs/extract-style-attrs shape))]
     [:g attrs

frontend/src/uxbox/main/ui/shapes/icon.cljs

@@ -9,7 +9,8 @@
             [uxbox.main.ui.shapes.attrs :as attrs]
             [uxbox.main.geom :as geom]
             [uxbox.util.mixins :as mx :include-macros true]
-            [uxbox.util.geom.matrix :as gmt]))
+            [uxbox.util.geom.matrix :as gmt]
+            [uxbox.util.geom.point :as gpt]))
 
 ;; --- Icon Component
 
@@ -31,28 +32,27 @@
   {:mixins [mx/static]}
   [shape]
   (let [{:keys [x1 y1 content id metadata
-                width height
+                width height rotation
                 tmp-resize-xform
                 tmp-displacement]} (geom/size shape)
 
-        [_ _ orw orh] (:view-box metadata)
-        scalex (/ width orw)
-        scaley (/ height orh)
-
         view-box (apply str (interpose " " (:view-box metadata)))
 
-        xfmt (cond-> (or tmp-resize-xform (gmt/matrix))
+        xfmt (cond-> (gmt/matrix)
+               tmp-resize-xform (gmt/multiply tmp-resize-xform)
                tmp-displacement (gmt/translate tmp-displacement)
-               true (gmt/translate x1 y1)
+               rotation (gmt/rotate* rotation (gpt/point (+ x1 (/ width 2))
-               true (gmt/scale scalex scaley))
+                                                         (+ y1 (/ height 2)))))
 
         props {:id (str id)
+               :x x1 :y y1 :view-box view-box
+               :width width :height height
                :preserve-aspect-ratio "none"
-               :dangerouslySetInnerHTML {:__html content}
+               :dangerouslySetInnerHTML {:__html content}}
-               :transform (str xfmt)}
 
         attrs (merge props (attrs/extract-style-attrs shape))]
-    [:g attrs]))
+    [:g {:transform (str xfmt)}
+     [:svg attrs]]))
 
 ;; --- Icon SVG
 

frontend/src/uxbox/main/ui/shapes/path.cljs

@@ -12,6 +12,7 @@
             [uxbox.main.data.shapes :as uds]
             [uxbox.main.geom :as geom]
             [uxbox.util.geom.matrix :as gmt]
+            [uxbox.util.geom.point :as gpt]
             [uxbox.util.mixins :as mx :include-macros true]))
 
 ;; --- Path Component
@@ -46,11 +47,13 @@
 
 (mx/defc path-shape
   {:mixins [mx/static]}
-  [{:keys [id tmp-resize-xform tmp-displacement] :as shape}]
+  [{:keys [id tmp-resize-xform tmp-displacement rotation] :as shape}]
-  (let [xfmt (cond-> (or tmp-resize-xform (gmt/matrix))
+  (let [shape (cond-> shape
-               tmp-displacement (gmt/translate tmp-displacement))
+                tmp-displacement (geom/transform (gmt/translate-matrix tmp-displacement))
-        props {:transform (str xfmt)
+                tmp-resize-xform (geom/transform tmp-resize-xform)
-               :id (str id)
+                (pos? rotation) (geom/rotate-shape))
+
+        props {:id (str id)
                :d (render-path shape)}
         attrs (merge props (attrs/extract-style-attrs shape))]
     [:path attrs]))

frontend/src/uxbox/main/ui/shapes/rect.cljs

@@ -25,21 +25,30 @@
         selected? (contains? selected id)
         on-mouse-down #(common/on-mouse-down % shape selected)]
     [:g.shape {:class (when selected? "selected")
-               :on-mouse-down on-mouse-down
+               :on-mouse-down on-mouse-down}
-               }
      (rect-shape shape identity)]))
 
 ;; --- Rect Shape
 
+(defn- rotate
+  [mt {:keys [x1 y1 x2 y2 width height rotation] :as shape}]
+  (let [x-center (+ x1 (/ width 2))
+        y-center (+ y1 (/ height 2))
+        center (gpt/point x-center y-center)]
+    (gmt/rotate* mt rotation center)))
+
 (mx/defc rect-shape
   {:mixins [mx/static]}
-  [shape]
+  [{:keys [id tmp-displacement tmp-resize-xform rotation] :as shape}]
-  (let [{:keys [id x1 y1 width height
+  (let [xfmt (cond-> (gmt/matrix)
-                tmp-resize-xform
+                tmp-displacement (gmt/translate tmp-displacement)
-                tmp-displacement]} (geom/size shape)
+                tmp-resize-xform (gmt/multiply tmp-resize-xform))
 
-        xfmt (cond-> (or tmp-resize-xform (gmt/matrix))
+        {:keys [x1 y1 width height] :as shape} (-> (geom/transform shape xfmt)
-               tmp-displacement (gmt/translate tmp-displacement))
+                                                   (geom/size))
+
+        xfmt (cond-> (gmt/matrix)
+               (pos? rotation) (rotate shape))
 
         props {:x x1 :y y1  :id id
                :width width

frontend/src/uxbox/main/ui/shapes/selection.cljs

@@ -43,95 +43,163 @@
 
 (def edition-ref scommon/edition-ref)
 
-(defn transform-rect
-  [{:keys [x1 y1 x2 y2] :as shape} xfmt]
-  (if xfmt
-    (let [tl (gpt/transform [x1 y1] xfmt)
-          tr (gpt/transform [x2 y1] xfmt)
-          bl (gpt/transform [x1 y2] xfmt)
-          br (gpt/transform [x2 y2] xfmt)
-          minx (apply min (map :x [tl tr bl br]))
-          maxx (apply max (map :x [tl tr bl br]))
-          miny (apply min (map :y [tl tr bl br]))
-          maxy (apply max (map :y [tl tr bl br]))]
-      (assoc shape
-             :x1 minx
-             :y1 miny
-             :x2 maxx
-             :y2 maxy))
-    shape))
-
 ;; --- Resize Implementation
 
+(defn- rotate
+  [shape]
+  (let [{:keys [x1 y1 width height rotation]} (-> (geom/shape->rect-shape shape)
+                                                  (assoc :type :rect)
+                                                  (geom/size))
+        x-center (+ x1 (/ width 2))
+        y-center (+ y1 (/ height 2))
+        mt (-> (gmt/matrix)
+               (gmt/translate  x-center y-center)
+               (gmt/rotate rotation)
+               (gmt/translate (- x-center) (- y-center)))]
+    (geom/transform shape mt)))
+
 (defn- start-resize
   [vid ids shape]
   (letfn [(gen-matrix [shape {scalex :x scaley :y}]
+            (let [shape shape #_(rotate shape)]
+              (case vid
+                :top-left
+                (-> (gmt/matrix)
+                    (gmt/translate (+ (:x2 shape))
+                                   (+ (:y2 shape)))
+                    (gmt/scale scalex scaley)
+                    (gmt/translate (- (:x2 shape))
+                                   (- (:y2 shape))))
+
+                :top-right
+                (-> (gmt/matrix)
+                    (gmt/translate (+ (:x1 shape))
+                                   (+ (:y2 shape)))
+                    (gmt/scale scalex scaley)
+                    (gmt/translate (- (:x1 shape))
+                                   (- (:y2 shape))))
+
+                :top
+                (-> (gmt/matrix)
+                    (gmt/translate (+ (:x1 shape))
+                                   (+ (:y2 shape)))
+                    (gmt/scale scalex scaley)
+                    (gmt/translate (- (:x1 shape))
+                                   (- (:y2 shape))))
+
+                :bottom-left
+                (-> (gmt/matrix)
+                    (gmt/translate (+ (:x2 shape))
+                                   (+ (:y1 shape)))
+                    (gmt/scale scalex scaley)
+                    (gmt/translate (- (:x2 shape))
+                                   (- (:y1 shape))))
+
+                :bottom-right
+                (-> (gmt/matrix)
+                    (gmt/translate (+ (:x1 shape))
+                                   (+ (:y1 shape)))
+                    (gmt/scale scalex scaley)
+                    (gmt/translate (- (:x1 shape))
+                                   (- (:y1 shape))))
+
+                :bottom
+                (-> (gmt/matrix)
+                    (gmt/translate (+ (:x1 shape))
+                                   (+ (:y1 shape)))
+                    (gmt/scale scalex scaley)
+                    (gmt/translate (- (:x1 shape))
+                                   (- (:y1 shape))))
+
+                :right
+                (-> (gmt/matrix)
+                    (gmt/translate (+ (:x1 shape))
+                                   (+ (:y1 shape)))
+                    (gmt/scale scalex scaley)
+                    (gmt/translate (- (:x1 shape))
+                                   (- (:y1 shape))))
+
+                :left
+                (-> (gmt/matrix)
+                    (gmt/translate (+ (:x2 shape))
+                                   (+ (:y1 shape)))
+                    (gmt/scale scalex scaley)
+                    (gmt/translate (- (:x2 shape))
+                                   (- (:y1 shape))))
+                )))
+
+          (calculate-ratio [orig-shape {:keys [width height] :as shape}]
+            (let [result {:x (/ width (:width orig-shape))
+                          :y (/ height (:height orig-shape))}]
+              result))
+
+          (accumulate-width [shape [{:keys [x y] :as point} ctrl?]]
             (case vid
               :top-left
-              (-> (gmt/matrix)
+              (let [width (- (:x2 shape) x)
-                  (gmt/translate (+ (:x2 shape))
+                    height (- (:y2 shape) y)
-                                 (+ (:y2 shape)))
+                    proportion (:proportion shape)]
-                  (gmt/scale scalex scaley)
+                (assoc shape
-                  (gmt/translate (- (:x2 shape))
+                       :width width
-                                 (- (:y2 shape))))
+                       :height (if ctrl? (/ width proportion) height)))
 
               :top-right
-              (-> (gmt/matrix)
+              (let [width (- x (:x1 shape))
-                  (gmt/translate (+ (:x1 shape))
+                    height (- (:y2 shape) y)
-                                 (+ (:y2 shape)))
+                    proportion (:proportion shape)]
-                  (gmt/scale scalex scaley)
+                (assoc shape
-                  (gmt/translate (- (:x1 shape))
+                       :width width
-                                 (- (:y2 shape))))
+                       :height (if ctrl? (/ width proportion) height)))
 
               :top
-              (-> (gmt/matrix)
+              (let [width (- (:x2 shape) (:x1 shape))
-                  (gmt/translate (+ (:x1 shape))
+                    height (- (:y2 shape) y)
-                                 (+ (:y2 shape)))
+                    proportion (:proportion shape)]
-                  (gmt/scale scalex scaley)
+                (assoc shape
-                  (gmt/translate (- (:x1 shape))
+                       :width width
-                                 (- (:y2 shape))))
+                       :height (if ctrl? (/ width proportion) height)))
 
               :bottom-left
-              (-> (gmt/matrix)
+              (let [width (- (:x2 shape) x)
-                  (gmt/translate (+ (:x2 shape))
+                    height (- y (:y1 shape))
-                                 (+ (:y1 shape)))
+                    proportion (:proportion shape)]
-                  (gmt/scale scalex scaley)
+                (assoc shape
-                  (gmt/translate (- (:x2 shape))
+                       :width width
-                                 (- (:y1 shape))))
+                       :height (if ctrl? (/ width proportion) height)))
 
               :bottom-right
-              (-> (gmt/matrix)
+              (let [width (- x (:x1 shape))
-                  (gmt/translate (+ (:x1 shape))
+                    height (- y (:y1 shape))
-                                 (+ (:y1 shape)))
+                    proportion (:proportion shape)]
-                  (gmt/scale scalex scaley)
+                (assoc shape
-                  (gmt/translate (- (:x1 shape))
+                       :width width
-                                 (- (:y1 shape))))
+                       :height (if ctrl? (/ width proportion) height)))
 
               :bottom
-              (-> (gmt/matrix)
+              (let [width (- (:x2 shape) (:x1 shape))
-                  (gmt/translate (+ (:x1 shape))
+                    height (- y (:y1 shape))
-                                 (+ (:y1 shape)))
+                    proportion (:proportion shape)]
-                  (gmt/scale scalex scaley)
+                (assoc shape
-                  (gmt/translate (- (:x1 shape))
+                       :width width
-                                 (- (:y1 shape))))
+                       :height (if ctrl? (/ width proportion) height)))
-
-              :right
-              (-> (gmt/matrix)
-                  (gmt/translate (+ (:x1 shape))
-                                 (+ (:y1 shape)))
-                  (gmt/scale scalex scaley)
-                  (gmt/translate (- (:x1 shape))
-                                 (- (:y1 shape))))
 
               :left
-              (-> (gmt/matrix)
+              (let [width (- (:x2 shape) x)
-                  (gmt/translate (+ (:x2 shape))
+                    height (- (:y2 shape) (:y1 shape))
-                                 (+ (:y1 shape)))
+                    proportion (:proportion shape)]
-                  (gmt/scale scalex scaley)
+                (assoc shape
-                  (gmt/translate (- (:x2 shape))
+                       :width width
-                                 (- (:y1 shape))))
+                       :height (if ctrl? (/ width proportion) height)))
-              ))
 
+              :right
+              (let [width (- x (:x1 shape))
+                    height (- (:y2 shape) (:y1 shape))
+                    proportion (:proportion shape)]
+                (assoc shape
+                       :width width
+                       :height (if ctrl? (/ width proportion) height)))
+
+              ))
           (on-resize [shape scale]
             (let [mt (gen-matrix shape scale)
                   xf (map #(uds/apply-temporal-resize-matrix % mt))]
@@ -139,79 +207,11 @@
 
           (on-end []
             (apply st/emit! (map uds/apply-resize-matrix ids))
-            (rlocks/release! :shape/resize))
+            (rlocks/release! :shape/resize))]
-          (calculate-ratio [orig-shape {:keys [width height] :as shape}]
-            {:x (/ width (:width orig-shape))
-             :y (/ height (:height orig-shape))})
-          (apply-delta [shape [{:keys [x y] :as point} ctrl?]]
-            (case vid
-              :top-left
-              (let [width (- (:x2 shape) x)
-                    height (- (:y2 shape) y)
-                    proportion (:proportion shape)]
-                (assoc shape
-                       :width width
-                       :height (if ctrl? (/ width proportion) height)))
 
-              :top-right
+    (let [shape  (->> (geom/shape->rect-shape shape)
-              (let [width (- x (:x1 shape))
+                      (geom/size))
-                    height (- (:y2 shape) y)
+          stoper (->> wb/events-s
-                    proportion (:proportion shape)]
-                (assoc shape
-                       :width width
-                       :height (if ctrl? (/ width proportion) height)))
-
-              :top
-              (let [width (- (:x2 shape) (:x1 shape))
-                    height (- (:y2 shape) y)
-                    proportion (:proportion shape)]
-                (assoc shape
-                       :width width
-                       :height (if ctrl? (/ width proportion) height)))
-
-              :bottom-left
-              (let [width (- (:x2 shape) x)
-                    height (- y (:y1 shape))
-                    proportion (:proportion shape)]
-                (assoc shape
-                       :width width
-                       :height (if ctrl? (/ width proportion) height)))
-
-              :bottom-right
-              (let [width (- x (:x1 shape))
-                    height (- y (:y1 shape))
-                    proportion (:proportion shape)]
-                (assoc shape
-                       :width width
-                       :height (if ctrl? (/ width proportion) height)))
-
-              :bottom
-              (let [width (- (:x2 shape) (:x1 shape))
-                    height (- y (:y1 shape))
-                    proportion (:proportion shape)]
-                (assoc shape
-                       :width width
-                       :height (if ctrl? (/ width proportion) height)))
-
-              :left
-              (let [width (- (:x2 shape) x)
-                    height (- (:y2 shape) (:y1 shape))
-                    proportion (:proportion shape)]
-                (assoc shape
-                       :width width
-                       :height (if ctrl? (/ width proportion) height)))
-
-              :right
-              (let [width (- x (:x1 shape))
-                    height (- (:y2 shape) (:y1 shape))
-                    proportion (:proportion shape)]
-                (assoc shape
-                       :width width
-                       :height (if ctrl? (/ width proportion) height)))
-
-              ))]
-
-    (let [stoper (->> wb/events-s
                       (rx/map first)
                       (rx/filter #(= % :mouse/up))
                       (rx/take 1))
@@ -223,7 +223,7 @@
                                      (rx/of point))))
                       (rx/take-until stoper)
                       (rx/with-latest-from vector wb/mouse-ctrl-s)
-                      (rx/scan apply-delta shape)
+                      (rx/scan accumulate-width shape)
                       (rx/map (partial calculate-ratio shape)))]
       (rlocks/acquire! :shape/resize)
       (rx/subscribe stream
@@ -233,9 +233,27 @@
 
 ;; --- Controls (Component)
 
+(defn selection-rect
+  [{:keys [x1 y1 x2 y2 width height rotation] :as shape}]
+  {:x x1
+   :y y1
+   :rotation rotation
+   :width width
+   :height height})
+
+(defn- render-path
+  [points]
+  {:pre [(pos? (count points))]}
+  (let [start (first points)
+        close? false
+        init  (str "M " (:x start) " " (:y start))
+        path  (reduce #(str %1 " L" (:x %2) " " (:y %2)) init points)]
+    (cond-> path
+      close? (str " Z"))))
+
 (mx/defc controls
   {:mixins [mx/static]}
-  [{:keys [width height x1 y1]} zoom on-mouse-down]
+  [{:keys [x1 y1 width height] :as shape} zoom on-mouse-down]
   [:g.controls
    [:rect.main {:x x1 :y y1
                 :width width
@@ -328,39 +346,21 @@
 (mx/defc multiple-selection-handlers
   {:mixins [mx/static]}
   [[shape & rest :as shapes] zoom]
-  (let [resize-xf (:tmp-resize-xform shape (gmt/matrix))
+  (let [selection (-> (map #(geom/selection-rect %) shapes)
-        displc-xf (-> (:tmp-displacement shape (gpt/point 0 0))
+                      (geom/shapes->rect-shape)
-                      (gmt/translate-matrix))
+                      (geom/selection-rect))
-        selection (-> (geom/shapes->rect-shape shapes)
+        shape (geom/shapes->rect-shape shapes)
-                      (assoc :type :rect)
-                      (geom/transform resize-xf)
-                      (geom/transform displc-xf)
-                      (geom/size))
         on-click #(do (dom/stop-propagation %2)
-                      (start-resize %1 (map :id shapes) selection))]
+                      (start-resize %1 (map :id shapes) shape))]
-    ;; (println "single-selection-handlers" displc-xf)
-    ;; (println "single-selection-handlers" (select-keys selection [:x1 :y1 :x2 :y2]))
-    ;; (println "single-selection-handlers" (select-keys selection [:x1 :y1 :width :height]))
     (controls selection zoom on-click)))
 
 (mx/defc single-selection-handlers
   {:mixins [mx/static]}
   [{:keys [id] :as shape} zoom]
-  (let [resize-xf (:tmp-resize-xform shape (gmt/matrix))
+  (let [on-click #(do (dom/stop-propagation %2)
-        displc-xf (-> (:tmp-displacement shape (gpt/point 0 0))
+                      (start-resize %1 #{id} shape))
-                      (gmt/translate-matrix))
+        shape (geom/selection-rect shape)]
-        selection (-> (geom/shape->rect-shape shape)
+    (controls shape zoom on-click)))
-                      ;; (transform-rect resize-xf)
-                      (assoc :type :rect)
-                      (geom/transform resize-xf)
-                      (geom/transform displc-xf)
-                      (geom/size))
-        on-click #(do (dom/stop-propagation %2)
-                      (start-resize %1 #{id} selection))]
-    ;; (println "single-selection-handlers" displc-xf)
-    ;; (println "single-selection-handlers" (select-keys selection [:x1 :y1 :x2 :y2]))
-    ;; (println "single-selection-handlers" (select-keys selection [:x1 :y1 :width :height]))
-    (controls selection zoom on-click)))
 
 (mx/defc selection-handlers
   {:mixins [mx/reactive mx/static]}

frontend/src/uxbox/main/ui/workspace/selrect.cljs

@@ -15,6 +15,7 @@
             [uxbox.main.data.workspace :as dw]
             [uxbox.main.data.shapes :as uds]
             [uxbox.main.ui.workspace.base :as wb]
+            [uxbox.main.geom :as geom]
             [uxbox.util.rlocks :as rlocks]))
 
 (defonce position (atom nil))
@@ -39,29 +40,26 @@
    :mixins [mx/static mx/reactive]}
   []
   (when-let [data (mx/react position)]
-    (let [{:keys [x y width height]} (selrect->rect data)]
+    (let [{:keys [x1 y1 width height]} (geom/size (selrect->rect data))]
       [:rect.selection-rect
-       {:x x
+       {:x x1
-        :y y
+        :y y1
         :width width
         :height height}])))
 
 ;; --- Interaction
 
 (defn- selrect->rect
-  [data]
+  [{:keys [start current] :as data}]
-  (let [start (:start data)
+  (let [start-x (min (:x start) (:x current))
-        current (:current data)
-        start-x (min (:x start) (:x current))
         start-y (min (:y start) (:y current))
-        current-x (max (:x start) (:x current))
+        end-x (max (:x start) (:x current))
-        current-y (max (:y start) (:y current))
+        end-y (max (:y start) (:y current))]
-        width (- current-x start-x)
+    {:x1 start-x
-        height (- current-y start-y)]
+     :y1 start-y
-    {:x start-x
+     :x2 end-x
-     :y start-y
+     :y2 end-y
-     :width (- current-x start-x)
+     :type :rect}))
-     :height (- current-y start-y)}))
 
 (defn- translate-to-canvas
   "Translate the given rect to the canvas coordinates system."
@@ -70,10 +68,10 @@
         startx (* c/canvas-start-x zoom)
         starty (* c/canvas-start-y zoom)]
     (assoc rect
-           :x (/ (- (:x rect) startx) zoom)
+           :x1 (/ (- (:x1 rect) startx) zoom)
-           :y (/ (- (:y rect) starty) zoom)
+           :y1 (/ (- (:y1 rect) starty) zoom)
-           :width (/ (:width rect) zoom)
+           :x2 (/ (- (:x2 rect) startx) zoom)
-           :height (/ (:height rect) zoom))))
+           :y2 (/ (- (:y2 rect) starty) zoom))))
 
 (declare on-start)
 
@@ -96,7 +94,7 @@
   (let [rect (-> (selrect->rect @position)
                  (translate-to-canvas))]
     (st/emit! (uds/deselect-all)
-              (uds/select-shapes rect))
+              (uds/select-shapes-by-selrect rect))
     (rlocks/release! :ui/selrect)
     (reset! position nil)))