Merge pull request #247 from uxbox/488/snap_grid_imprecision

Fixes problem with snap imprecisions

frontend/src/uxbox/main/data/workspace/drawing.cljs

@@ -64,8 +64,9 @@
         (rx/of handle-drawing-generic)))))
 
 (def handle-drawing-generic
-  (letfn [(resize-shape [{:keys [x y] :as shape} point lock? point-snap]
+  (letfn [(resize-shape [{:keys [x y width height] :as shape} point lock? point-snap]
-            (let [initial (gpt/point x y)
+            (let [;; The new shape behaves like a resize on the bottom-right corner
+                  initial (gpt/point (+ x width) (+ y height))
                   shape' (geom/shape->rect-shape shape)
                   shapev (gpt/point (:width shape') (:height shape'))
                   deltav (gpt/to-vec initial point-snap)

frontend/src/uxbox/main/data/workspace/transforms.cljs

@@ -76,7 +76,7 @@
 
 ;; -- RESIZE
 (defn start-resize
-  [handler ids shape]
+  [handler initial ids shape]
   (letfn [(resize [shape initial resizing-shapes [point lock? point-snap]]
             (let [{:keys [width height rotation]} shape
                   shapev (-> (gpt/point width height))
@@ -132,7 +132,8 @@
 
       ptk/WatchEvent
       (watch [_ state stream]
-        (let [initial @ms/mouse-position
+        (let [current-pointer @ms/mouse-position
+              initial-position (merge current-pointer initial)
               stoper (rx/filter ms/mouse-up? stream)
               page-id (get state :current-page-id)
               resizing-shapes (map #(get-in state [:workspace-data page-id :objects %]) ids)
@@ -144,7 +145,7 @@
                 (rx/switch-map (fn [[point :as current]]
                                (->> (snap/closest-snap-point page-id resizing-shapes layout point)
                                     (rx/map #(conj current %)))))
-                (rx/mapcat (partial resize shape initial resizing-shapes))
+                (rx/mapcat (partial resize shape initial-position resizing-shapes))
                 (rx/take-until stoper))
            #_(rx/empty)
            (rx/of (apply-modifiers ids)

frontend/src/uxbox/main/snap.cljs

@@ -178,7 +178,7 @@
     (->> (closest-snap page-id frame-id [point] filter-shapes)
          (rx/map #(or % (gpt/point 0 0)))
          (rx/map #(gpt/add point %))
-         (rx/map gpt/round))))
+)))
 
 (defn closest-snap-move
   [page-id shapes objects layout movev]

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

@@ -147,12 +147,12 @@
              :width (/ resize-point-rect-size zoom)
              :height (/ resize-point-rect-size zoom)
              :fill (if (debug? :resize-handler) "red" "transparent")
-             :on-mouse-down on-resize
+             :on-mouse-down #(on-resize {:x cx' :y cy'} %)
              :style {:cursor (if (#{:top-left :bottom-right} position)
                                (cur/resize-nesw rotation) (cur/resize-nwse rotation))}
              :transform (gmt/multiply transform
                                       (gmt/rotate-matrix rot-square (gpt/point cx cy)))}]
-     [:circle {:on-mouse-down on-resize
+     [:circle {:on-mouse-down #(on-resize {:x cx' :y cy'} %)
                :r (/ resize-point-circle-radius zoom)
                :fill (if (debug? :resize-handler) "red" "transparent")
                :cx cx'
@@ -162,17 +162,20 @@
      ]))
 
 (mf/defc resize-side-handler [{:keys [x y length angle zoom position rotation transform on-resize]}]
-  [:rect {:x (+ x (/ resize-point-rect-size zoom))
+  (let [res-point (if (#{:top :bottom} position)
-          :y (- y (/ resize-side-height 2 zoom))
+                    {:y y}
-          :width (max 0 (- length (/ (* resize-point-rect-size 2) zoom)))
+                    {:x x})]
-          :height (/ resize-side-height zoom)
+    [:rect {:x (+ x (/ resize-point-rect-size zoom))
-          :transform (gmt/multiply transform
+            :y (- y (/ resize-side-height 2 zoom))
-                                   (gmt/rotate-matrix angle (gpt/point x y)))
+            :width (max 0 (- length (/ (* resize-point-rect-size 2) zoom)))
-          :on-mouse-down on-resize
+            :height (/ resize-side-height zoom)
-          :style {:fill (if (debug? :resize-handler) "yellow" "transparent")
+            :transform (gmt/multiply transform
-                  :cursor (if (#{:left :right} position)
+                                     (gmt/rotate-matrix angle (gpt/point x y)))
-                            (cur/resize-ew rotation)
+            :on-mouse-down #(on-resize res-point %)
-                            (cur/resize-ns rotation)) }}])
+            :style {:fill (if (debug? :resize-handler) "yellow" "transparent")
+                    :cursor (if (#{:left :right} position)
+                              (cur/resize-ew rotation)
+                              (cur/resize-ns rotation)) }}]))
 
 (mf/defc controls
   {::mf/wrap-props false}
@@ -268,8 +271,9 @@
   [{:keys [shapes selected zoom] :as props}]
   (let [shape (geom/selection-rect shapes)
         shape-center (geom/center shape)
-        on-resize #(do (dom/stop-propagation %2)
+        on-resize (fn [current-position initial-position event]
-                       (st/emit! (dw/start-resize %1 selected shape)))
+                    (dom/stop-propagation event)
+                    (st/emit! (dw/start-resize current-position initial-position selected shape)))
 
         on-rotate #(do (dom/stop-propagation %)
                        (st/emit! (dw/start-rotate shapes)))]
@@ -287,9 +291,9 @@
   (let [shape-id (:id shape)
         shape (geom/transform-shape shape)
         shape' (if (debug? :simple-selection) (geom/selection-rect [shape]) shape)
-        on-resize
+        on-resize (fn [current-position initial-position event]
-        #(do (dom/stop-propagation %2)
+                    (dom/stop-propagation event)
-             (st/emit! (dw/start-resize %1 #{shape-id} shape')))
+                    (st/emit! (dw/start-resize current-position initial-position #{shape-id} shape')))
 
         on-rotate
         #(do (dom/stop-propagation %)

frontend/src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs

@@ -91,7 +91,7 @@
                 frame-length (if (= :column (:type grid)) (:width frame) (:height frame))
                 item-length (if (or (nil? size) (= :auto size))
                               (-> (gg/calculate-default-item-length frame-length margin gutter)
-                                  (mth/round))
+                                  (mth/precision 2))
                               item-length)]
             (emit-changes! #(-> %
                                 (assoc-in [:params :size] size)

frontend/src/uxbox/main/ui/workspace/sidebar/options/measures.cljs

@@ -94,7 +94,7 @@
                               :on-change on-width-change
                               :value (str (-> (:width shape)
                                               (d/coalesce 0)
-                                              (math/round)))}]]
+                                              (math/precision 2)))}]]
 
 
          [:div.input-element.height
@@ -105,7 +105,7 @@
                               :on-change on-height-change
                               :value (str (-> (:height shape)
                                               (d/coalesce 0)
-                                              (math/round)))}]]])
+                                              (math/precision 2)))}]]])
 
       ;; POSITION
       (when (options :position)
@@ -140,7 +140,7 @@
             :on-change on-rotation-change
             :value (str (-> (:rotation shape)
                             (d/coalesce 0)
-                            (math/round)))}]]
+                            (math/precision 2)))}]]
          [:input.slidebar
           {:type "range"
            :min "0"
@@ -150,7 +150,7 @@
            :on-change on-rotation-change
            :value (str (-> (:rotation shape)
                            (d/coalesce 0)
-                           (math/round)))}]])
+                           (math/precision 2)))}]])
 
       (when (options :radius)
         [:div.row-flex
@@ -163,5 +163,5 @@
             :on-change on-radius-change
             :value (str (-> (:rx shape)
                             (d/coalesce 0)
-                            (math/round)))}]]
+                            (math/precision 2)))}]]
          [:div.input-element]])]]))