Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-24 23:49:45 -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 {
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;

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

@ -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)]])))

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

@ -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)]))