Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-13 10:38:13 -05:00
Code Issues Activity

✨ Adds rectangle around distance texts

Browse source
This commit is contained in:
alonso.torres 2020-05-29 08:41:44 +02:00
parent 751bd5e3d6
commit 21613e6614
2 changed files with 36 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
common/uxbox/common/math.cljc
View file

@ -120,3 +120,9 @@
dy (- y1 y2)]
(-> (sqrt (+ (pow dx 2) (pow dy 2)))
(precision 2))))
(defn log10
"Logarithm base 10"
[x]
#?(:cljs (js/Math.log10 x)
:clj (Math/log10 x)))

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

@ -38,6 +38,11 @@
half-point (+ c1 (/ (- c2 c1) 2))]
half-point))
(def pill-text-width-letter 6)
(def pill-text-width-margin 12)
(def pill-text-font-size 12)
(def pill-text-height 20)
(def pill-text-border-radius 4)
(mf/defc shape-distance-segment
"Displays a segment between two selrects with the distance between them"
@ -46,22 +51,38 @@
(get sr2 (if (= :x coord) :x2 :y2)))
to-c (max (get sr1 (if (= :x coord) :x1 :y1))
(get sr2 (if (= :x coord) :x1 :y1)))
distance (mth/round (- to-c from-c))
half-point (half-point coord sr1 sr2)]
half-point (half-point coord sr1 sr2)
text-ref (mf/use-ref nil)
width (-> distance
mth/log10 ;; number of digits
(* (/ pill-text-width-letter zoom))
(+ (/ pill-text-width-margin zoom)))]
[:g.distance-segment
(let [point [(+ from-c (/ distance 2))
(if (= coord :x)
(- half-point (/ 3 zoom))
(- half-point (/ 10 zoom))
(+ half-point (/ 5 zoom)))]
[x y] (if (= :x coord) point (reverse point))]
[:text {:x x
:y y
:font-size (/ 12 zoom)
:fill line-color
:text-anchor (if (= coord :x) "middle" "left")}
(mth/round distance)])
[:*
[:rect {:x (if (= coord :x) (- x (/ width 2)) x)
:y (- (- y (/ (/ pill-text-height zoom) 2)) (if (= coord :x) (/ 2 zoom) 0))
:width width
:height (/ pill-text-height zoom)
:rx (/ pill-text-border-radius zoom)
:fill line-color}]
[:text {:ref text-ref
:x (if (= coord :x) x (+ x (/ width 2)))
:y (- (+ y (/ (/ pill-text-height zoom) 2) (- (/ 6 zoom))) (if (= coord :x) (/ 2 zoom) 0))
:font-size (/ pill-text-font-size zoom)
:fill "white"
:text-anchor "middle"}
(mth/round distance)]])
(let [p1 [(+ from-c (/ segment-gap zoom)) (+ half-point (/ segment-gap-side zoom))]
p2 [(+ from-c (/ segment-gap zoom)) (- half-point (/ segment-gap-side zoom))]
[x1 y1] (if (= :x coord) p1 (reverse p1))