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

Reduce the handler point circle size when shape is small.

Browse source
This commit is contained in:
Andrey Antukh 2017-02-23 20:37:31 +01:00
parent 67974a0952
commit 4ba4fb3acb
No known key found for this signature in database
GPG key ID: 4DFEBCB8316A8B95
1 changed files with 62 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

117
frontend/src/uxbox/main/ui/shapes/selection.cljs
View file

@ -238,64 +238,71 @@
;; --- Controls (Component) ;; --- Controls (Component)
(def ^:private handler-size-threshold
"The size in pixels that shape width or height
should reach in order to increase the handler
control pointer radius from 4 to 6."
60)
(mx/defc controls (mx/defc controls
{:mixins [mx/static]} {:mixins [mx/static]}
[{:keys [x1 y1 width height] :as shape} zoom on-mouse-down] [{:keys [x1 y1 width height] :as shape} zoom on-mouse-down]
[:g.controls (let [radius (if (> (max width height) handler-size-threshold) 6.0 4.0)]
[:rect.main {:x x1 :y y1 [:g.controls
:width width [:rect.main {:x x1 :y y1
:height height :width width
:stroke-dasharray (str (/ 5.0 zoom) "," (/ 5 zoom)) :height height
:style {:stroke "#333" :fill "transparent" :stroke-dasharray (str (/ 5.0 zoom) "," (/ 5 zoom))
:stroke-opacity "1"}}] :style {:stroke "#333" :fill "transparent"
[:circle.top :stroke-opacity "1"}}]
(merge +circle-props+ [:circle.top
{:on-mouse-down #(on-mouse-down :top %) (merge +circle-props+
:r (/ 6.0 zoom) {:on-mouse-down #(on-mouse-down :top %)
:cx (+ x1 (/ width 2)) :r (/ radius zoom)
:cy (- y1 2)})] :cx (+ x1 (/ width 2))
[:circle.right :cy (- y1 2)})]
(merge +circle-props+ [:circle.right
{:on-mouse-down #(on-mouse-down :right %) (merge +circle-props+
:r (/ 6.0 zoom) {:on-mouse-down #(on-mouse-down :right %)
:cy (+ y1 (/ height 2)) :r (/ radius zoom)
:cx (+ x1 width 1)})] :cy (+ y1 (/ height 2))
[:circle.bottom :cx (+ x1 width 1)})]
(merge +circle-props+ [:circle.bottom
{:on-mouse-down #(on-mouse-down :bottom %) (merge +circle-props+
:r (/ 6.0 zoom) {:on-mouse-down #(on-mouse-down :bottom %)
:cx (+ x1 (/ width 2)) :r (/ radius zoom)
:cy (+ y1 height 2)})] :cx (+ x1 (/ width 2))
[:circle.left :cy (+ y1 height 2)})]
(merge +circle-props+ [:circle.left
{:on-mouse-down #(on-mouse-down :left %) (merge +circle-props+
:r (/ 6.0 zoom) {:on-mouse-down #(on-mouse-down :left %)
:cy (+ y1 (/ height 2)) :r (/ radius zoom)
:cx (- x1 3)})] :cy (+ y1 (/ height 2))
[:circle.top-left :cx (- x1 3)})]
(merge +circle-props+ [:circle.top-left
{:on-mouse-down #(on-mouse-down :top-left %) (merge +circle-props+
:r (/ 6.0 zoom) {:on-mouse-down #(on-mouse-down :top-left %)
:cx x1 :r (/ radius zoom)
:cy y1})] :cx x1
[:circle.top-right :cy y1})]
(merge +circle-props+ [:circle.top-right
{:on-mouse-down #(on-mouse-down :top-right %) (merge +circle-props+
:r (/ 6.0 zoom) {:on-mouse-down #(on-mouse-down :top-right %)
:cx (+ x1 width) :r (/ radius zoom)
:cy y1})] :cx (+ x1 width)
[:circle.bottom-left :cy y1})]
(merge +circle-props+ [:circle.bottom-left
{:on-mouse-down #(on-mouse-down :bottom-left %) (merge +circle-props+
:r (/ 6.0 zoom) {:on-mouse-down #(on-mouse-down :bottom-left %)
:cx x1 :r (/ radius zoom)
:cy (+ y1 height)})] :cx x1
[:circle.bottom-right :cy (+ y1 height)})]
(merge +circle-props+ [:circle.bottom-right
{:on-mouse-down #(on-mouse-down :bottom-right %) (merge +circle-props+
:r (/ 6.0 zoom) {:on-mouse-down #(on-mouse-down :bottom-right %)
:cx (+ x1 width) :r (/ radius zoom)
:cy (+ y1 height)})]]) :cx (+ x1 width)
:cy (+ y1 height)})]]))
;; --- Selection Handlers (Component) ;; --- Selection Handlers (Component)