Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-10 08:50:57 -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

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

@ -246,8 +246,9 @@
(st/emit! (uev/mouse-event :double-click ctrl? shift?))))] (st/emit! (uev/mouse-event :double-click ctrl? shift?))))]
[:div [:div
(coordinates) (coordinates)
[:div.tooltip-container
(when tooltip (when tooltip
(cursor-tooltip tooltip)) (cursor-tooltip tooltip))]
[:svg.viewport {:width (* c/viewport-width zoom) [:svg.viewport {:width (* c/viewport-width zoom)
:height (* c/viewport-height zoom) :height (* c/viewport-height zoom)
:ref "viewport" :ref "viewport"
@ -258,7 +259,7 @@
:on-mouse-down on-mouse-down :on-mouse-down on-mouse-down
:on-mouse-up on-mouse-up} :on-mouse-up on-mouse-up}
[:g.zoom {:transform (str "scale(" zoom ", " zoom ")")} [:g.zoom {:transform (str "scale(" zoom ", " zoom ")")}
(if page (when page
(canvas page zoom)) (canvas page zoom))
(if (contains? flags :grid) (if (contains? flags :grid)
(grid))] (grid))]

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

@ -24,28 +24,41 @@
(-> (l/key :ruler) (-> (l/key :ruler)
(l/derive refs/workspace))) (l/derive refs/workspace)))
(mx/defc ruler-line (mx/defc ruler-text
{:mixins [mx/static]} {:mixins [mx/static]}
[zoom [center pt]] [zoom [center pt]]
(let [distance (-> (gpt/distance (gpt/divide pt zoom) (let [distance (-> (gpt/distance (gpt/divide pt zoom)
(gpt/divide center zoom)) (gpt/divide center zoom))
(mth/precision 2)) (mth/precision 2))
angle (-> (gpt/angle pt center) 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 [:g
[: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) [:line {:x1 (:x center)
:y1 (:y center) :y1 (:y center)
:x2 (:x pt) :x2 (:x pt)
:y2 (:y pt) :y2 (:y pt)
:style {:cursor "cell"} :style {:cursor "cell"}
:stroke-width "1" :stroke-width "1"
:stroke "red"}] :stroke "red"}])
[:text
{:transform (str "translate(" (+ (:x pt) 15) "," (- (:y pt) 10) ")")}
[:tspan {:x "0"}
(str distance " px")]
[:tspan {:x "0" :y "20"}
(str angle "°")]]]))
(mx/defc ruler (mx/defc ruler
{:mixins [mx/static mx/reactive] {:mixins [mx/static mx/reactive]
@ -57,6 +70,7 @@
(letfn [(on-mouse-down [event] (letfn [(on-mouse-down [event]
(dom/stop-propagation event) (dom/stop-propagation event)
(st/emit! ::uev/interrupt (st/emit! ::uev/interrupt
(udw/set-tooltip nil)
(udw/start-ruler))) (udw/start-ruler)))
(on-mouse-up [event] (on-mouse-up [event]
(dom/stop-propagation event) (dom/stop-propagation event)
@ -69,4 +83,8 @@
:width c/viewport-width :width c/viewport-width
:height c/viewport-height}] :height c/viewport-height}]
(when-let [points (mx/react ruler-points-ref)] (when-let [points (mx/react ruler-points-ref)]
(ruler-line zoom points))])) (println points)
[:g
(ruler-line zoom points)
(ruler-text zoom points)])]))