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

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

@ -238,9 +238,16 @@
;; --- 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]
(let [radius (if (> (max width height) handler-size-threshold) 6.0 4.0)]
[:g.controls [:g.controls
[:rect.main {:x x1 :y y1 [:rect.main {:x x1 :y y1
:width width :width width
@ -251,51 +258,51 @@
[:circle.top [:circle.top
(merge +circle-props+ (merge +circle-props+
{:on-mouse-down #(on-mouse-down :top %) {:on-mouse-down #(on-mouse-down :top %)
:r (/ 6.0 zoom) :r (/ radius zoom)
:cx (+ x1 (/ width 2)) :cx (+ x1 (/ width 2))
:cy (- y1 2)})] :cy (- y1 2)})]
[:circle.right [:circle.right
(merge +circle-props+ (merge +circle-props+
{:on-mouse-down #(on-mouse-down :right %) {:on-mouse-down #(on-mouse-down :right %)
:r (/ 6.0 zoom) :r (/ radius zoom)
:cy (+ y1 (/ height 2)) :cy (+ y1 (/ height 2))
:cx (+ x1 width 1)})] :cx (+ x1 width 1)})]
[:circle.bottom [:circle.bottom
(merge +circle-props+ (merge +circle-props+
{:on-mouse-down #(on-mouse-down :bottom %) {:on-mouse-down #(on-mouse-down :bottom %)
:r (/ 6.0 zoom) :r (/ radius zoom)
:cx (+ x1 (/ width 2)) :cx (+ x1 (/ width 2))
:cy (+ y1 height 2)})] :cy (+ y1 height 2)})]
[:circle.left [:circle.left
(merge +circle-props+ (merge +circle-props+
{:on-mouse-down #(on-mouse-down :left %) {:on-mouse-down #(on-mouse-down :left %)
:r (/ 6.0 zoom) :r (/ radius zoom)
:cy (+ y1 (/ height 2)) :cy (+ y1 (/ height 2))
:cx (- x1 3)})] :cx (- x1 3)})]
[:circle.top-left [:circle.top-left
(merge +circle-props+ (merge +circle-props+
{:on-mouse-down #(on-mouse-down :top-left %) {:on-mouse-down #(on-mouse-down :top-left %)
:r (/ 6.0 zoom) :r (/ radius zoom)
:cx x1 :cx x1
:cy y1})] :cy y1})]
[:circle.top-right [:circle.top-right
(merge +circle-props+ (merge +circle-props+
{:on-mouse-down #(on-mouse-down :top-right %) {:on-mouse-down #(on-mouse-down :top-right %)
:r (/ 6.0 zoom) :r (/ radius zoom)
:cx (+ x1 width) :cx (+ x1 width)
:cy y1})] :cy y1})]
[:circle.bottom-left [:circle.bottom-left
(merge +circle-props+ (merge +circle-props+
{:on-mouse-down #(on-mouse-down :bottom-left %) {:on-mouse-down #(on-mouse-down :bottom-left %)
:r (/ 6.0 zoom) :r (/ radius zoom)
:cx x1 :cx x1
:cy (+ y1 height)})] :cy (+ y1 height)})]
[:circle.bottom-right [:circle.bottom-right
(merge +circle-props+ (merge +circle-props+
{:on-mouse-down #(on-mouse-down :bottom-right %) {:on-mouse-down #(on-mouse-down :bottom-right %)
:r (/ 6.0 zoom) :r (/ radius zoom)
:cx (+ x1 width) :cx (+ x1 width)
:cy (+ y1 height)})]]) :cy (+ y1 height)})]]))
;; --- Selection Handlers (Component) ;; --- Selection Handlers (Component)