From 7ab3d86bc669653f9519a5411cef940edbfe7b6f Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Wed, 29 Apr 2020 09:59:12 +0200 Subject: [PATCH] :tada: Changed the user origin for shapes to their corner --- frontend/src/uxbox/main.cljs | 4 - .../uxbox/main/data/workspace/transforms.cljs | 10 +- frontend/src/uxbox/main/refs.cljs | 8 + .../uxbox/main/ui/shapes/bounding_box.cljs | 17 +- frontend/src/uxbox/main/ui/shapes/circle.cljs | 5 +- frontend/src/uxbox/main/ui/shapes/frame.cljs | 2 +- frontend/src/uxbox/main/ui/shapes/group.cljs | 6 +- frontend/src/uxbox/main/ui/shapes/image.cljs | 8 +- frontend/src/uxbox/main/ui/shapes/path.cljs | 5 +- frontend/src/uxbox/main/ui/shapes/rect.cljs | 5 +- frontend/src/uxbox/main/ui/shapes/shape.cljs | 31 +-- frontend/src/uxbox/main/ui/shapes/text.cljs | 19 +- .../src/uxbox/main/ui/viewer/thumbnails.cljs | 2 +- .../src/uxbox/main/ui/workspace/drawarea.cljs | 2 +- .../uxbox/main/ui/workspace/selection.cljs | 29 +-- .../workspace/sidebar/options/measures.cljs | 189 ++++++++++-------- frontend/src/uxbox/util/debug.cljs | 18 +- frontend/src/uxbox/util/geom/point.cljs | 5 - frontend/src/uxbox/util/geom/shapes.cljs | 12 +- 19 files changed, 195 insertions(+), 182 deletions(-) diff --git a/frontend/src/uxbox/main.cljs b/frontend/src/uxbox/main.cljs index 75f4f7413..0e18738c8 100644 --- a/frontend/src/uxbox/main.cljs +++ b/frontend/src/uxbox/main.cljs @@ -88,7 +88,3 @@ (when (= "main" (unchecked-get js/window app-sym)) (reinit))) -(defn ^:export toggle-debug - [] - (swap! st/*debug* not)) - diff --git a/frontend/src/uxbox/main/data/workspace/transforms.cljs b/frontend/src/uxbox/main/data/workspace/transforms.cljs index 79346b684..28a500522 100644 --- a/frontend/src/uxbox/main/data/workspace/transforms.cljs +++ b/frontend/src/uxbox/main/data/workspace/transforms.cljs @@ -70,7 +70,6 @@ (let [frame (get objects (:frame-id shape)) {:keys [width height rotation]} shape - center (gpt/center shape) shapev (-> (gpt/point width height)) ;; Vector modifiers depending on the handler @@ -140,7 +139,7 @@ (watch [_ state stream] (let [stoper (rx/filter ms/mouse-up? stream) group (gsh/selection-rect shapes) - group-center (gpt/center group) + group-center (gsh/center group) initial-angle (gpt/angle (apply-zoom @ms/mouse-position) group-center) calculate-angle (fn [pos ctrl?] (let [angle (- (gpt/angle pos group-center) initial-angle) @@ -161,7 +160,7 @@ (rx/with-latest vector ms/mouse-position-ctrl) (rx/map (fn [[pos ctrl?]] (let [delta-angle (calculate-angle pos ctrl?)] - (set-rotation delta-angle shapes)))) + (set-rotation delta-angle shapes group-center)))) (rx/take-until stoper)) (rx/of (apply-modifiers (map :id shapes)))))))) @@ -275,7 +274,7 @@ ;; Set-rotation is custom because applies different modifiers to each shape adjusting their position (defn set-rotation - [delta-rotation shapes] + [delta-rotation shapes center] (ptk/reify ::set-rotation IUpdateGroup (get-ids [_] (map :id shapes)) @@ -293,8 +292,7 @@ (rotate-around-center [state angle center shapes] (reduce #(rotate-shape %1 angle %2 center) state shapes))] - (let [center (-> shapes gsh/selection-rect gpt/center) - objects (get-in state [:workspace-data page-id :objects]) + (let [objects (get-in state [:workspace-data page-id :objects]) id->obj #(get objects %) get-children (fn [shape] (map id->obj (helpers/get-children (:id shape) objects))) shapes (concat shapes (mapcat get-children shapes))] diff --git a/frontend/src/uxbox/main/refs.cljs b/frontend/src/uxbox/main/refs.cljs index 9c05d3c0a..3795da3a9 100644 --- a/frontend/src/uxbox/main/refs.cljs +++ b/frontend/src/uxbox/main/refs.cljs @@ -57,6 +57,14 @@ (get-in % [:workspace-data page-id])) (l/derived st/state))) +(defn object-by-id + [id] + (letfn [(selector [state] + (let [page-id (get-in state [:workspace-page :id]) + objects (get-in state [:workspace-data page-id :objects])] + (->> (get objects id))))] + (l/derived selector st/state =))) + (defn objects-by-id [ids] (letfn [(selector [state] diff --git a/frontend/src/uxbox/main/ui/shapes/bounding_box.cljs b/frontend/src/uxbox/main/ui/shapes/bounding_box.cljs index 42b3c4628..35ec32486 100644 --- a/frontend/src/uxbox/main/ui/shapes/bounding_box.cljs +++ b/frontend/src/uxbox/main/ui/shapes/bounding_box.cljs @@ -23,11 +23,10 @@ (when (debug? :bounding-boxes) (let [shape (unchecked-get props "shape") frame (unchecked-get props "frame") - selrect (geom/transform-selrect frame shape) - shape-path (-> shape - (geom/transform-apply-modifiers) - (geom/translate-to-frame frame)) - shape-center (geom/center shape-path)] + selrect (-> shape + (geom/selection-rect-shape) + (geom/translate-to-frame frame)) + shape-center (geom/center selrect)] [:g [:text {:x (:x selrect) :y (- (:y selrect) 5) @@ -37,10 +36,12 @@ :stroke-width 0.1} (str/format "%s - (%s, %s)" (str/slice (str (:id shape)) 0 8) (fix (:x shape)) (fix (:y shape)))] - [:circle {:cx (:x shape-center) :cy (:y shape-center) :r 5 :fill "yellow"}] - [:rect {:x (:x selrect) :y (:y selrect) :width (:width selrect) :height (:height selrect) - :style {:stroke "red" :fill "transparent" :stroke-width "1px" :stroke-opacity 0.5}}]]))) + :style {:stroke "red" + :fill "transparent" + :stroke-width "1px" + :stroke-opacity 0.5 + :pointer-events "none"}}]]))) diff --git a/frontend/src/uxbox/main/ui/shapes/circle.cljs b/frontend/src/uxbox/main/ui/shapes/circle.cljs index a93bdaf39..f524bc45b 100644 --- a/frontend/src/uxbox/main/ui/shapes/circle.cljs +++ b/frontend/src/uxbox/main/ui/shapes/circle.cljs @@ -22,7 +22,7 @@ (declare circle-shape) (mf/defc circle-wrapper - [{:keys [shape frame] :as props}] + [{:keys [shape] :as props}] (let [selected (mf/deref refs/selected-shapes) selected? (contains? selected (:id shape)) on-mouse-down #(common/on-mouse-down % shape) @@ -30,8 +30,7 @@ [:g.shape {:class (when selected? "selected") :on-mouse-down on-mouse-down :on-context-menu on-context-menu} - [:& circle-shape {:shape (geom/transform-shape frame shape)}] - [:& bounding-box {:shape shape :frame frame}]])) + [:& circle-shape {:shape shape}]])) ;; --- Circle Shape diff --git a/frontend/src/uxbox/main/ui/shapes/frame.cljs b/frontend/src/uxbox/main/ui/shapes/frame.cljs index 3e034a787..76d372537 100644 --- a/frontend/src/uxbox/main/ui/shapes/frame.cljs +++ b/frontend/src/uxbox/main/ui/shapes/frame.cljs @@ -75,7 +75,7 @@ inv-zoom (/ 1 zoom) childs (mapv #(get objects %) (:shapes shape)) - ds-modifier (:displacement-modifier shape) + ds-modifier (get-in shape [:modifiers :displacement]) label-pos (cond-> (gpt/point x (- y 10)) (gmt/matrix? ds-modifier) (gpt/transform ds-modifier)) diff --git a/frontend/src/uxbox/main/ui/shapes/group.cljs b/frontend/src/uxbox/main/ui/shapes/group.cljs index 3f6e0f421..28feee6e5 100644 --- a/frontend/src/uxbox/main/ui/shapes/group.cljs +++ b/frontend/src/uxbox/main/ui/shapes/group.cljs @@ -73,11 +73,9 @@ [:& group-shape {:frame frame - :shape (geom/transform-shape frame shape) + :shape shape :children children - :is-child-selected? is-child-selected?}] - (when (not is-child-selected?) - [:& bounding-box {:shape shape :frame frame}])])))) + :is-child-selected? is-child-selected?}]])))) (defn group-shape [shape-wrapper] diff --git a/frontend/src/uxbox/main/ui/shapes/image.cljs b/frontend/src/uxbox/main/ui/shapes/image.cljs index b475ba801..bc35be20a 100644 --- a/frontend/src/uxbox/main/ui/shapes/image.cljs +++ b/frontend/src/uxbox/main/ui/shapes/image.cljs @@ -15,15 +15,14 @@ [uxbox.main.ui.shapes.attrs :as attrs] [uxbox.main.ui.shapes.common :as common] [uxbox.util.interop :as itr] - [uxbox.util.geom.matrix :as gmt] - [uxbox.main.ui.shapes.bounding-box :refer [bounding-box]])) + [uxbox.util.geom.matrix :as gmt])) ;; --- Image Wrapper (declare image-shape) (mf/defc image-wrapper - [{:keys [shape frame] :as props}] + [{:keys [shape] :as props}] (let [selected (mf/deref refs/selected-shapes) selected? (contains? selected (:id shape)) on-mouse-down (mf/use-callback @@ -37,8 +36,7 @@ [:g.shape {:class (when selected? "selected") :on-mouse-down on-mouse-down :on-context-menu on-context-menu} - [:& image-shape {:shape (geom/transform-shape frame shape)}] - [:& bounding-box {:shape shape :frame frame}]])) + [:& image-shape {:shape shape}]])) ;; --- Image Shape diff --git a/frontend/src/uxbox/main/ui/shapes/path.cljs b/frontend/src/uxbox/main/ui/shapes/path.cljs index 20ffba953..be2ce15e8 100644 --- a/frontend/src/uxbox/main/ui/shapes/path.cljs +++ b/frontend/src/uxbox/main/ui/shapes/path.cljs @@ -24,7 +24,7 @@ (declare path-shape) (mf/defc path-wrapper - [{:keys [shape frame] :as props}] + [{:keys [shape] :as props}] (let [selected (mf/deref refs/selected-shapes) selected? (contains? selected (:id shape)) on-mouse-down (mf/use-callback @@ -42,8 +42,7 @@ [:g.shape {:on-double-click on-double-click :on-mouse-down on-mouse-down :on-context-menu on-context-menu} - [:& path-shape {:shape (geom/transform-shape frame shape) :background? true}] - [:& bounding-box {:shape shape :frame frame}]])) + [:& path-shape {:shape shape :background? true}]])) ;; --- Path Shape diff --git a/frontend/src/uxbox/main/ui/shapes/rect.cljs b/frontend/src/uxbox/main/ui/shapes/rect.cljs index 9a6db3f01..299dbc1ae 100644 --- a/frontend/src/uxbox/main/ui/shapes/rect.cljs +++ b/frontend/src/uxbox/main/ui/shapes/rect.cljs @@ -15,7 +15,6 @@ [uxbox.main.ui.shapes.attrs :as attrs] [uxbox.main.ui.shapes.common :as common] [uxbox.util.interop :as itr] - [uxbox.main.ui.shapes.bounding-box :refer [bounding-box]] [uxbox.main.ui.shapes.custom-stroke :refer [shape-custom-stroke]])) ;; --- Rect Wrapper @@ -26,7 +25,6 @@ {::mf/wrap-props false} [props] (let [shape (unchecked-get props "shape") - frame (unchecked-get props "frame") on-mouse-down (mf/use-callback (mf/deps shape) #(common/on-mouse-down % shape)) @@ -35,8 +33,7 @@ #(common/on-context-menu % shape))] [:g.shape {:on-mouse-down on-mouse-down :on-context-menu on-context-menu} - [:& rect-shape {:shape (geom/transform-shape frame shape) }] - [:& bounding-box {:shape shape :frame frame}]])) + [:& rect-shape {:shape shape}]])) ;; --- Rect Shape diff --git a/frontend/src/uxbox/main/ui/shapes/shape.cljs b/frontend/src/uxbox/main/ui/shapes/shape.cljs index 412b610ea..31f50ad06 100644 --- a/frontend/src/uxbox/main/ui/shapes/shape.cljs +++ b/frontend/src/uxbox/main/ui/shapes/shape.cljs @@ -19,6 +19,8 @@ [uxbox.main.ui.shapes.text :as text] [uxbox.main.ui.shapes.group :as group] [uxbox.main.ui.shapes.frame :as frame] + [uxbox.main.ui.shapes.bounding-box :refer [bounding-box]] + [uxbox.util.geom.shapes :as gsh] [uxbox.main.refs :as refs])) (defn- shape-wrapper-memo-equals? @@ -42,21 +44,24 @@ [props] (let [shape (unchecked-get props "shape") frame (unchecked-get props "frame") - opts #js {:shape shape :frame frame}] + opts #js {:shape (->> shape (gsh/transform-shape frame)) + :frame frame}] (when (and shape (not (:hidden shape))) - (case (:type shape) - :group [:> group-wrapper opts] - :curve [:> path/path-wrapper opts] - :text [:> text/text-wrapper opts] - :icon [:> icon/icon-wrapper opts] - :rect [:> rect/rect-wrapper opts] - :path [:> path/path-wrapper opts] - :image [:> image/image-wrapper opts] - :circle [:> circle/circle-wrapper opts] + [:* + (case (:type shape) + :group [:> group-wrapper opts] + :curve [:> path/path-wrapper opts] + :text [:> text/text-wrapper opts] + :icon [:> icon/icon-wrapper opts] + :rect [:> rect/rect-wrapper opts] + :path [:> path/path-wrapper opts] + :image [:> image/image-wrapper opts] + :circle [:> circle/circle-wrapper opts] - ;; Only used when drawing a new frame. - :frame [:> frame-wrapper opts] - nil)))) + ;; Only used when drawing a new frame. + :frame [:> frame-wrapper {:shape shape}] + nil) + [:& bounding-box {:shape shape :frame frame}]]))) (def group-wrapper (group/group-wrapper shape-wrapper)) (def frame-wrapper (frame/frame-wrapper shape-wrapper)) diff --git a/frontend/src/uxbox/main/ui/shapes/text.cljs b/frontend/src/uxbox/main/ui/shapes/text.cljs index ea5ce8596..877d5c481 100644 --- a/frontend/src/uxbox/main/ui/shapes/text.cljs +++ b/frontend/src/uxbox/main/ui/shapes/text.cljs @@ -46,7 +46,7 @@ (declare text-shape) (mf/defc text-wrapper - [{:keys [shape frame] :as props}] + [{:keys [shape] :as props}] (let [{:keys [id x1 y1 content group]} shape selected (mf/deref refs/selected-shapes) edition (mf/deref refs/selected-edition) @@ -67,8 +67,8 @@ :on-mouse-down on-mouse-down :on-context-menu on-context-menu} (if edition? - [:& text-shape-edit {:shape (geom/transform-shape frame shape)}] - [:& text-shape {:shape (geom/transform-shape frame shape) + [:& text-shape-edit {:shape shape}] + [:& text-shape {:shape shape :selected? selected?}])])) ;; --- Text Rendering @@ -284,7 +284,8 @@ (mf/use-effect on-mount) - [:foreignObject {:x x :y y :width width :height height :ref self-ref} + [:foreignObject {:transform (geom/transform-matrix shape) + :x x :y y :width width :height height :ref self-ref} [:> rslate/Slate {:editor editor :value @state :on-change on-change} @@ -305,13 +306,7 @@ (mf/defc text-shape [{:keys [shape selected?] :as props}] - (let [{:keys [id x y width height rotation content]} shape - transform (when (and rotation (pos? rotation)) - (str/format "rotate(%s %s %s)" - rotation - (+ x (/ width 2)) - (+ y (/ height 2)))) - + (let [{:keys [id x y width height content]} shape content (parse-content content) editor (mf/use-memo #(rslate/withReact (slate/createEditor))) @@ -334,7 +329,7 @@ [:foreignObject {:x x :y y - :transform transform + :transform (geom/transform-matrix shape) :id (str id) :width width :height height} diff --git a/frontend/src/uxbox/main/ui/viewer/thumbnails.cljs b/frontend/src/uxbox/main/ui/viewer/thumbnails.cljs index 167da81aa..992632c76 100644 --- a/frontend/src/uxbox/main/ui/viewer/thumbnails.cljs +++ b/frontend/src/uxbox/main/ui/viewer/thumbnails.cljs @@ -83,7 +83,7 @@ (let [modifier (-> (gpt/point (:x frame) (:y frame)) (gpt/negate) (gmt/translate-matrix)) - frame (assoc frame :displacement-modifier modifier) + frame (assoc-in frame [:modifiers :displacement] modifier ) width (* (:width frame) zoom) height (* (:height frame) zoom) diff --git a/frontend/src/uxbox/main/ui/workspace/drawarea.cljs b/frontend/src/uxbox/main/ui/workspace/drawarea.cljs index 492c25d63..65a16ce0c 100644 --- a/frontend/src/uxbox/main/ui/workspace/drawarea.cljs +++ b/frontend/src/uxbox/main/ui/workspace/drawarea.cljs @@ -305,7 +305,7 @@ (mf/defc generic-draw-area [{:keys [shape zoom]}] - (let [{:keys [x y width height]} (geom/transform-selrect nil shape)] + (let [{:keys [x y width height]} (geom/selection-rect-shape shape)] (when (and x y) [:g [:& shapes/shape-wrapper {:shape shape}] diff --git a/frontend/src/uxbox/main/ui/workspace/selection.cljs b/frontend/src/uxbox/main/ui/workspace/selection.cljs index 1e0452cad..10b9492a1 100644 --- a/frontend/src/uxbox/main/ui/workspace/selection.cljs +++ b/frontend/src/uxbox/main/ui/workspace/selection.cljs @@ -72,6 +72,7 @@ [{:keys [shape zoom on-resize on-rotate] :as props}] (let [{:keys [x y width height rotation] :as shape} (geom/shape->rect-shape shape) radius (if (> (max width height) handler-size-threshold) 4.0 4.0) + transform (geom/transform-matrix shape) resize-handlers {:top [(+ x (/ width 2 )) y] @@ -85,14 +86,12 @@ [:g.controls [:rect.main {:transform transform - :x x :y y - :width width - :height height - ;;:stroke-dasharray (str (/ 8.0 zoom) "," (/ 5 zoom)) - :vector-effect "non-scaling-stroke" + :x (- x 1) :y (- y 1) + :width (+ width 2) + :height (+ height 2) :style {:stroke "#1FDEA7" - :fill "transparent" - :stroke-opacity "1"}}] + :stroke-width "1" + :fill "transparent"}}] (for [[position [cx cy]] resize-handlers] (let [tp (gpt/transform (gpt/point cx cy) transform)] @@ -156,12 +155,12 @@ (mf/defc text-edition-selection-handlers [{:keys [shape zoom] :as props}] - (let [{:keys [x y width height] :as shape} shape] + (let [{:keys [x y width height]} shape] [:g.controls [:rect.main {:x x :y y + :transform (geom/transform-matrix shape) :width width :height height - ;; :stroke-dasharray (str (/ 5.0 zoom) "," (/ 5 zoom)) :style {:stroke "#1FDEA7" :stroke-width "0.5" :stroke-opacity "1" @@ -170,16 +169,20 @@ (mf/defc multiple-selection-handlers [{:keys [shapes selected zoom objects] :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 objects))) on-rotate #(do (dom/stop-propagation %) (st/emit! (dw/start-rotate shapes)))] - [:& controls {:shape shape - :zoom zoom - :on-resize on-resize - :on-rotate on-rotate}])) + [:* + [:& controls {:shape shape + :zoom zoom + :on-resize on-resize + :on-rotate on-rotate}] + (when (debug? :selection-center) + [:circle {:cx (:x shape-center) :cy (:y shape-center) :r 5 :fill "yellow"}])])) (mf/defc single-selection-handlers [{:keys [shape zoom objects] :as props}] 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 6d2d46028..a6751b7f4 100644 --- a/frontend/src/uxbox/main/ui/workspace/sidebar/options/measures.cljs +++ b/frontend/src/uxbox/main/ui/workspace/sidebar/options/measures.cljs @@ -15,25 +15,43 @@ [uxbox.main.refs :as refs] [uxbox.common.data :as d] [uxbox.util.dom :as dom] + [uxbox.util.geom.shapes :as gsh] + [uxbox.util.geom.point :as gpt] [uxbox.main.data.workspace :as udw] [uxbox.util.math :as math] [uxbox.util.i18n :refer [t] :as i18n])) + +;; -- User/drawing coords +(defn user-coords-vector [shape] + (let [{sel-x :x sel-y :y :as selrect} + (-> shape + gsh/shape->path + (gsh/center-transform (:transform shape)) + gsh/shape->rect-shape) + {rec-x :x rec-y :y} (-> shape gsh/shape->rect-shape) + + dx (- rec-x sel-x) + dy (- rec-y sel-y)] + (gpt/point dx dy))) + +(defn user->draw [{:keys [x y width height] :as shape}] + (let [dv (user-coords-vector shape)] + (-> shape (gsh/move dv)))) + +(defn draw->user [{:keys [x y width height] :as shape}] + (let [dv (user-coords-vector shape)] + (-> shape (gsh/move (gpt/negate dv))))) + (mf/defc measures-menu [{:keys [shape options] :as props}] (let [options (or options #{:size :position :rotation :radius}) locale (i18n/use-locale) + frame (deref (refs/object-by-id (:frame-id shape))) - data (deref refs/workspace-data) - parent (get-in data [:objects (:frame-id shape)]) - - x (cond - (:x shape) :x - (:cx shape) :cx) - - y (cond - (:y shape) :y - (:cy shape) :cy) + shape (->> shape + (gsh/transform-shape frame) + (draw->user)) on-size-change (fn [event attr] @@ -58,9 +76,12 @@ (fn [event attr] (let [value (-> (dom/get-target event) (dom/get-value) - (d/parse-integer 0) - (+ (attr parent)))] ; Convert back to absolute position before update - (st/emit! (udw/update-position (:id shape) {attr value})))) + (d/parse-integer 0)) + new-shape (-> shape + (assoc attr value) + (gsh/translate-from-frame frame) + (user->draw))] + (st/emit! (udw/update-position (:id shape) (select-keys new-shape [attr]))))) on-rotation-change (fn [event] @@ -89,31 +110,31 @@ ;; WIDTH & HEIGHT (when (options :size) - [:div.row-flex - [:span.element-set-subtitle (t locale "workspace.options.size")] - [:div.lock-size {:class (when (:proportion-lock shape) "selected") - :on-click on-proportion-lock-change} - (if (:proportion-lock shape) - i/lock - i/unlock)] - [:div.input-element.pixels - [:input.input-text {:type "number" - :min "0" - :no-validate true - :on-change on-width-change - :value (str (-> (:width shape) - (d/coalesce 0) - (math/round)))}]] + [:div.row-flex + [:span.element-set-subtitle (t locale "workspace.options.size")] + [:div.lock-size {:class (when (:proportion-lock shape) "selected") + :on-click on-proportion-lock-change} + (if (:proportion-lock shape) + i/lock + i/unlock)] + [:div.input-element.pixels + [:input.input-text {:type "number" + :min "0" + :no-validate true + :on-change on-width-change + :value (str (-> (:width shape) + (d/coalesce 0) + (math/round)))}]] - [:div.input-element.pixels - [:input.input-text {:type "number" - :min "0" - :no-validate true - :on-change on-height-change - :value (str (-> (:height shape) - (d/coalesce 0) - (math/round)))}]]]) + [:div.input-element.pixels + [:input.input-text {:type "number" + :min "0" + :no-validate true + :on-change on-height-change + :value (str (-> (:height shape) + (d/coalesce 0) + (math/round)))}]]]) ;; Circle RX RY (when (options :circle-size) @@ -142,57 +163,61 @@ ;; POSITION (when (options :position) [:div.row-flex - [:span.element-set-subtitle (t locale "workspace.options.position")] - [:div.input-element.pixels - [:input.input-text {:placeholder "x" - :type "number" - :no-validate true - :on-change on-pos-x-change - :value (str (-> (- (x shape) (:x parent)) ; Show to user position relative to frame - (d/coalesce 0) - (math/round)))}]] - [:div.input-element.pixels - [:input.input-text {:placeholder "y" - :type "number" - :no-validate true - :on-change on-pos-y-change - :value (str (-> (- (y shape) (:y parent)) - (d/coalesce 0) - (math/round)))}]]]) + [:span.element-set-subtitle (t locale "workspace.options.position")] + [:div.input-element.pixels + [:input.input-text {:placeholder "x" + :type "number" + :no-validate true + :on-change on-pos-x-change + :value (:x shape) + ;;:value (str (-> (- (x shape) (:x parent)) ; Show to user position relative to frame + ;; (d/coalesce 0) + ;; (math/round))) + }]] + [:div.input-element.pixels + [:input.input-text {:placeholder "y" + :type "number" + :no-validate true + :on-change on-pos-y-change + :value (:y shape) + ;;:value (str (-> (- (y shape) (:y parent)) + ;; (d/coalesce 0) + ;; (math/round))) + }]]]) (when (options :rotation) - [:div.row-flex - [:span.element-set-subtitle (t locale "workspace.options.rotation")] - [:div.input-element.degrees - [:input.input-text - {:placeholder "" - :type "number" - :no-validate true + [:div.row-flex + [:span.element-set-subtitle (t locale "workspace.options.rotation")] + [:div.input-element.degrees + [:input.input-text + {:placeholder "" + :type "number" + :no-validate true + :min "0" + :max "360" + :on-change on-rotation-change + :value (str (-> (:rotation shape) + (d/coalesce 0) + (math/round)))}]] + [:input.slidebar + {:type "range" :min "0" :max "360" + :step "1" + :no-validate true :on-change on-rotation-change :value (str (-> (:rotation shape) - (d/coalesce 0) - (math/round)))}]] - [:input.slidebar - {:type "range" - :min "0" - :max "360" - :step "1" - :no-validate true - :on-change on-rotation-change - :value (str (-> (:rotation shape) - (d/coalesce 0)))}]]) + (d/coalesce 0)))}]]) (when (options :radius) - [:div.row-flex - [:span.element-set-subtitle (t locale "workspace.options.radius")] - [:div.input-element.pixels - [:input.input-text - {:placeholder "rx" - :type "number" - :on-change on-radius-change - :value (str (-> (:rx shape) - (d/coalesce 0) - (math/round)))}]] - [:div.input-element]])]])) + [:div.row-flex + [:span.element-set-subtitle (t locale "workspace.options.radius")] + [:div.input-element.pixels + [:input.input-text + {:placeholder "rx" + :type "number" + :on-change on-radius-change + :value (str (-> (:rx shape) + (d/coalesce 0) + (math/round)))}]] + [:div.input-element]])]])) diff --git a/frontend/src/uxbox/util/debug.cljs b/frontend/src/uxbox/util/debug.cljs index 2c3407788..1d6e6a0a4 100644 --- a/frontend/src/uxbox/util/debug.cljs +++ b/frontend/src/uxbox/util/debug.cljs @@ -1,9 +1,7 @@ (ns uxbox.util.debug - "Debugging utils" - (:require - [uxbox.main.store :as store])) + "Debugging utils") -(def debug-options #{:bounding-boxes :group :events :rotation-handler #_:simple-selection }) +(def debug-options #{:bounding-boxes :group :events :rotation-handler :selection-center #_:simple-selection }) (defonce ^:dynamic *debug* (atom #{})) @@ -13,6 +11,13 @@ (defn -debug! [option] (swap! *debug* disj option)) (defn debug? [option] (@*debug* option)) + +(defn ^:export toggle-debug [name] (let [option (keyword name)] + (if (debug? option) + (-debug! option) + (debug! option)))) +(defn ^:export debug-all [name] (debug-all!)) + (defn tap "Transducer function that can execute a side-effect `effect-fn` per input" [effect-fn] @@ -31,9 +36,4 @@ (js/console.log str (clj->js val)) val)) -(defn dump-state [] - (logjs "state" @store/state)) -(defn dump-objects [] - (let [page-id (get @store/state :current-page-id)] - (logjs "state" (get-in @store/state [:workspace-data page-id :objects])))) diff --git a/frontend/src/uxbox/util/geom/point.cljs b/frontend/src/uxbox/util/geom/point.cljs index 4e9bc7e88..0e2d9b7f3 100644 --- a/frontend/src/uxbox/util/geom/point.cljs +++ b/frontend/src/uxbox/util/geom/point.cljs @@ -40,11 +40,6 @@ (throw (ex-info "Invalid arguments" {:v v})))) ([x y] (Point. x y))) -(defn center - [{:keys [x y width height]}] - (point (+ x (/ width 2)) - (+ y (/ height 2)))) - (defn add "Returns the addition of the supplied value to both coordinates of the point as a new point." diff --git a/frontend/src/uxbox/util/geom/shapes.cljs b/frontend/src/uxbox/util/geom/shapes.cljs index 485177d36..6f08ba976 100644 --- a/frontend/src/uxbox/util/geom/shapes.cljs +++ b/frontend/src/uxbox/util/geom/shapes.cljs @@ -376,6 +376,7 @@ maxx (transduce (map :x) max segments) maxy (transduce (map :y) max segments)] (assoc shape + :type :rect :x1 minx :y1 miny :x2 maxx @@ -495,7 +496,7 @@ (defn translate-from-frame [shape {:keys [x y] :as frame}] - (move shape (gpt/point (+ x) (+ y)))) + (move shape (gpt/point x y))) ;; --- Alignment @@ -736,13 +737,6 @@ (gpt/divide (gpt/point (:width shape-path-temp-rec) (:height shape-path-temp-rec)) (gpt/point (:width shape-path-temp-dim) (:height shape-path-temp-dim))))) -(defn transform-selrect - [frame shape] - (-> shape - (transform-apply-modifiers) - (translate-to-frame frame) - (shape->rect-shape))) - (defn transform-rect-shape [shape] (let [;; Apply modifiers to the rect as a path so we have the end shape expected @@ -788,6 +782,8 @@ new-shape (-> shape (merge rec) + (update :x #(mth/precision % 2)) + (update :y #(mth/precision % 2)) (update :transform #(gmt/multiply (or % (gmt/matrix)) stretch-matrix)) (update :transform-inverse #(gmt/multiply stretch-matrix-inverse (or % (gmt/matrix)))))]