diff --git a/frontend/resources/styles/main/partials/workspace-canvas.scss b/frontend/resources/styles/main/partials/workspace-canvas.scss index 2edb0d98b..fbc5c8ba7 100644 --- a/frontend/resources/styles/main/partials/workspace-canvas.scss +++ b/frontend/resources/styles/main/partials/workspace-canvas.scss @@ -19,12 +19,33 @@ &.no-tool-bar-right { padding-right: 0; + + .coordinates { + right: 10px; + } } &.no-tool-bar-left { padding-left: 0; } + .coordinates { + background-color: $color-dark-bg; + border-radius: $br-small; + bottom: 0px; + padding-left: 5px; + position: fixed; + right: 240px; + text-align: center; + width: 80px; + + span { + color: $color-white; + font-size: $fs12; + padding-right: 5px; + } + } + .workspace-canvas { height: calc(100vh - 50px); overflow: scroll; diff --git a/frontend/src/uxbox/main/ui/workspace/canvas.cljs b/frontend/src/uxbox/main/ui/workspace/canvas.cljs index e21fb83ea..3a1eccce7 100644 --- a/frontend/src/uxbox/main/ui/workspace/canvas.cljs +++ b/frontend/src/uxbox/main/ui/workspace/canvas.cljs @@ -40,6 +40,21 @@ :height "100%" :fill (or background "#ffffff")}]) +;; --- Coordinates Widget + +(mx/defc coordinates + {:mixins [mx/reactive mx/static]} + [] + (let [zoom (mx/react wb/zoom-ref) + coords (some-> (mx/react wb/mouse-canvas-a) + (gpt/divide zoom) + (gpt/round 0))] + [:ul.coordinates + [:span {:alt "x"} + (str "X: " (:x coords "-"))] + [:span {:alt "y"} + (str "Y: " (:y coords "-"))]])) + ;; --- Canvas (mx/defc canvas @@ -171,21 +186,23 @@ (let [opts {:shift? (kbd/shift? event) :ctrl? (kbd/ctrl? event)}] (rx/push! wb/events-b [:mouse/double-click opts])))] - [:svg.viewport {:width (* c/viewport-width zoom) - :height (* c/viewport-height zoom) - :ref "viewport" - :class (when drawing? "drawing") - :on-context-menu on-context-menu - :on-click on-click - :on-double-click on-double-click - :on-mouse-down on-mouse-down - :on-mouse-up on-mouse-up} - [:g.zoom {:transform (str "scale(" zoom ", " zoom ")")} - (if page - (canvas page)) - (if (contains? flags :grid) - (grid))] - (ruler) - (selrect)]))) + [:div + (coordinates) + [:svg.viewport {:width (* c/viewport-width zoom) + :height (* c/viewport-height zoom) + :ref "viewport" + :class (when drawing? "drawing") + :on-context-menu on-context-menu + :on-click on-click + :on-double-click on-double-click + :on-mouse-down on-mouse-down + :on-mouse-up on-mouse-up} + [:g.zoom {:transform (str "scale(" zoom ", " zoom ")")} + (if page + (canvas page)) + (if (contains? flags :grid) + (grid))] + (ruler) + (selrect)]]))) diff --git a/frontend/src/uxbox/main/ui/workspace/header.cljs b/frontend/src/uxbox/main/ui/workspace/header.cljs index c504115dd..0b14ab10d 100644 --- a/frontend/src/uxbox/main/ui/workspace/header.cljs +++ b/frontend/src/uxbox/main/ui/workspace/header.cljs @@ -23,22 +23,15 @@ [uxbox.util.geom.point :as gpt] [uxbox.util.math :as mth])) -;; --- Coordinates Widget +;; --- Zoom Widget -(mx/defc coordinates +(mx/defc zoom-widget {:mixins [mx/reactive mx/static]} [] (let [zoom (mx/react wb/zoom-ref) - coords (some-> (mx/react wb/mouse-canvas-a) - (gpt/divide zoom) - (gpt/round 1)) increase #(st/emit! (dw/increase-zoom)) decrease #(st/emit! (dw/decrease-zoom))] [:ul.options-view - [:li.coordinates {:alt "x"} - (str "X: " (:x coords "-"))] - [:li.coordinates {:alt "y"} - (str "Y: " (:y coords "-"))] [:li.zoom-input [:span.add-zoom {:on-click increase} "+"] [:span (str (mth/round (* 100 zoom)) "%")] @@ -142,5 +135,5 @@ {:alt "View mode (Ctrl + P)" :on-click #(on-view-clicked % project page)} i/play]] - (coordinates)] + (zoom-widget)] (ui.u/user)]))