Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-10 00:40:30 -05:00
Code Issues Activity

Add background to the ruler information tooltip.

Browse source 
Fixes #75
This commit is contained in:
Andrey Antukh 2017-03-08 19:51:34 +01:00
parent 0a70ab9c8c
commit fea85a1c1e
No known key found for this signature in database
GPG key ID: 4DFEBCB8316A8B95
2 changed files with 50 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -245,25 +245,26 @@
:ctrl? ctrl?}]
(st/emit! (uev/mouse-event :double-click ctrl? shift?))))]
[:div
(coordinates)
(coordinates)
[:div.tooltip-container
(when tooltip
(cursor-tooltip tooltip))
[: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 zoom))
(if (contains? flags :grid)
(grid))]
(when (contains? flags :ruler)
(ruler zoom))
(selrect)]])))
(cursor-tooltip tooltip))]
[: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 ")")}
(when page
(canvas page zoom))
(if (contains? flags :grid)
(grid))]
(when (contains? flags :ruler)
(ruler zoom))
(selrect)]])))

42
frontend/src/uxbox/main/ui/workspace/ruler.cljs
View file

@ -24,29 +24,42 @@
(-> (l/key :ruler)
(l/derive refs/workspace)))
(mx/defc ruler-line
(mx/defc ruler-text
{:mixins [mx/static]}
[zoom [center pt]]
(let [distance (-> (gpt/distance (gpt/divide pt zoom)
(gpt/divide center zoom))
(mth/precision 2))
angle (-> (gpt/angle pt center)
(mth/precision 2))]
(mth/precision 2))
transform1 (str "translate(" (+ (:x pt) 35) "," (- (:y pt) 10) ")")
transform2 (str "translate(" (+ (:x pt) 25) "," (- (:y pt) 30) ")")]
[:g
[:line {:x1 (:x center)
:y1 (:y center)
:x2 (:x pt)
:y2 (:y pt)
:style {:cursor "cell"}
:stroke-width "1"
:stroke "red"}]
[:text
{:transform (str "translate(" (+ (:x pt) 15) "," (- (:y pt) 10) ")")}
[:rect {:fill "black"
:fill-opacity "0.4"
:rx "3"
:ry "3"
:width "90"
:height "50"
:transform transform2}]
[:text {:transform transform1
:fill "white"}
[:tspan {:x "0"}
(str distance " px")]
[:tspan {:x "0" :y "20"}
(str angle "°")]]]))
(mx/defc ruler-line
{:mixins [mx/static]}
[zoom [center pt]]
[:line {:x1 (:x center)
:y1 (:y center)
:x2 (:x pt)
:y2 (:y pt)
:style {:cursor "cell"}
:stroke-width "1"
:stroke "red"}])
(mx/defc ruler
{:mixins [mx/static mx/reactive]
:will-unmount (fn [own]
@ -57,6 +70,7 @@
(letfn [(on-mouse-down [event]
(dom/stop-propagation event)
(st/emit! ::uev/interrupt
(udw/set-tooltip nil)
(udw/start-ruler)))
(on-mouse-up [event]
(dom/stop-propagation event)
@ -69,4 +83,8 @@
:width c/viewport-width
:height c/viewport-height}]
(when-let [points (mx/react ruler-points-ref)]
(ruler-line zoom points))]))
(println points)
[:g
(ruler-line zoom points)
(ruler-text zoom points)])]))