3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-21 00:06:12 +02:00
Code Issues Projects Releases Packages Wiki 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
Download patch file Download diff file Expand all files Collapse all files

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