Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-03 21:09:00 -05:00
Code Issues Activity

Moving coordinates to the viewport

Browse source
This commit is contained in:
Jesús Espino 2016-12-19 11:55:55 +01:00
parent 099b31c1a7
commit 7860be4a50
3 changed files with 57 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
frontend/resources/styles/main/partials/workspace-canvas.scss
View file

@ -19,12 +19,33 @@
&.no-tool-bar-right { &.no-tool-bar-right {
padding-right: 0; padding-right: 0;
.coordinates {
right: 10px;
}
} }
&.no-tool-bar-left { &.no-tool-bar-left {
padding-left: 0; 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 { .workspace-canvas {
height: calc(100vh - 50px); height: calc(100vh - 50px);
overflow: scroll; overflow: scroll;

49
frontend/src/uxbox/main/ui/workspace/canvas.cljs
View file

@ -40,6 +40,21 @@
:height "100%" :height "100%"
:fill (or background "#ffffff")}]) :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 ;; --- Canvas
(mx/defc canvas (mx/defc canvas
@ -171,21 +186,23 @@
(let [opts {:shift? (kbd/shift? event) (let [opts {:shift? (kbd/shift? event)
:ctrl? (kbd/ctrl? event)}] :ctrl? (kbd/ctrl? event)}]
(rx/push! wb/events-b [:mouse/double-click opts])))] (rx/push! wb/events-b [:mouse/double-click opts])))]
[:svg.viewport {:width (* c/viewport-width zoom) [:div
:height (* c/viewport-height zoom) (coordinates)
:ref "viewport" [:svg.viewport {:width (* c/viewport-width zoom)
:class (when drawing? "drawing") :height (* c/viewport-height zoom)
:on-context-menu on-context-menu :ref "viewport"
:on-click on-click :class (when drawing? "drawing")
:on-double-click on-double-click :on-context-menu on-context-menu
:on-mouse-down on-mouse-down :on-click on-click
:on-mouse-up on-mouse-up} :on-double-click on-double-click
[:g.zoom {:transform (str "scale(" zoom ", " zoom ")")} :on-mouse-down on-mouse-down
(if page :on-mouse-up on-mouse-up}
(canvas page)) [:g.zoom {:transform (str "scale(" zoom ", " zoom ")")}
(if (contains? flags :grid) (if page
(grid))] (canvas page))
(ruler) (if (contains? flags :grid)
(selrect)]))) (grid))]
(ruler)
(selrect)]])))

13
frontend/src/uxbox/main/ui/workspace/header.cljs
View file

@ -23,22 +23,15 @@
[uxbox.util.geom.point :as gpt] [uxbox.util.geom.point :as gpt]
[uxbox.util.math :as mth])) [uxbox.util.math :as mth]))
;; --- Coordinates Widget ;; --- Zoom Widget
(mx/defc coordinates (mx/defc zoom-widget
{:mixins [mx/reactive mx/static]} {:mixins [mx/reactive mx/static]}
[] []
(let [zoom (mx/react wb/zoom-ref) (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)) increase #(st/emit! (dw/increase-zoom))
decrease #(st/emit! (dw/decrease-zoom))] decrease #(st/emit! (dw/decrease-zoom))]
[:ul.options-view [:ul.options-view
[:li.coordinates {:alt "x"}
(str "X: " (:x coords "-"))]
[:li.coordinates {:alt "y"}
(str "Y: " (:y coords "-"))]
[:li.zoom-input [:li.zoom-input
[:span.add-zoom {:on-click increase} "+"] [:span.add-zoom {:on-click increase} "+"]
[:span (str (mth/round (* 100 zoom)) "%")] [:span (str (mth/round (* 100 zoom)) "%")]
@ -142,5 +135,5 @@
{:alt "View mode (Ctrl + P)" {:alt "View mode (Ctrl + P)"
:on-click #(on-view-clicked % project page)} :on-click #(on-view-clicked % project page)}
i/play]] i/play]]
(coordinates)] (zoom-widget)]
(ui.u/user)])) (ui.u/user)]))