diff --git a/frontend/src/uxbox/main/data/workspace/drawing.cljs b/frontend/src/uxbox/main/data/workspace/drawing.cljs index 91e079435..7e1cf7dee 100644 --- a/frontend/src/uxbox/main/data/workspace/drawing.cljs +++ b/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] - (let [initial (gpt/point x y) + (letfn [(resize-shape [{:keys [x y width height] :as shape} point lock? point-snap] + (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) diff --git a/frontend/src/uxbox/main/data/workspace/transforms.cljs b/frontend/src/uxbox/main/data/workspace/transforms.cljs index 74a27a63a..2ad286aae 100644 --- a/frontend/src/uxbox/main/data/workspace/transforms.cljs +++ b/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) diff --git a/frontend/src/uxbox/main/snap.cljs b/frontend/src/uxbox/main/snap.cljs index e42d46a86..239524d83 100644 --- a/frontend/src/uxbox/main/snap.cljs +++ b/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] diff --git a/frontend/src/uxbox/main/ui/workspace/selection.cljs b/frontend/src/uxbox/main/ui/workspace/selection.cljs index 828d6ce2d..d8b777902 100644 --- a/frontend/src/uxbox/main/ui/workspace/selection.cljs +++ b/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)) - :y (- y (/ resize-side-height 2 zoom)) - :width (max 0 (- length (/ (* resize-point-rect-size 2) zoom))) - :height (/ resize-side-height zoom) - :transform (gmt/multiply transform - (gmt/rotate-matrix angle (gpt/point x y))) - :on-mouse-down on-resize - :style {:fill (if (debug? :resize-handler) "yellow" "transparent") - :cursor (if (#{:left :right} position) - (cur/resize-ew rotation) - (cur/resize-ns rotation)) }}]) + (let [res-point (if (#{:top :bottom} position) + {:y y} + {:x x})] + [:rect {:x (+ x (/ resize-point-rect-size zoom)) + :y (- y (/ resize-side-height 2 zoom)) + :width (max 0 (- length (/ (* resize-point-rect-size 2) zoom))) + :height (/ resize-side-height zoom) + :transform (gmt/multiply transform + (gmt/rotate-matrix angle (gpt/point x y))) + :on-mouse-down #(on-resize res-point %) + :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) - (st/emit! (dw/start-resize %1 selected shape))) + on-resize (fn [current-position initial-position event] + (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 - #(do (dom/stop-propagation %2) - (st/emit! (dw/start-resize %1 #{shape-id} shape'))) + on-resize (fn [current-position initial-position event] + (dom/stop-propagation event) + (st/emit! (dw/start-resize current-position initial-position #{shape-id} shape'))) on-rotate #(do (dom/stop-propagation %) diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs index 280a889c8..4ea386cde 100644 --- a/frontend/src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs +++ b/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) diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/options/measures.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/options/measures.cljs index 67df6b9ce..d28b3c302 100644 --- a/frontend/src/uxbox/main/ui/workspace/sidebar/options/measures.cljs +++ b/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]])]]))