Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-04-06 03:51:21 -05:00
Code Issues Activity

✨ Board as ruler origin

Browse source
This commit is contained in:
Alejandro Alonso 2023-04-12 16:16:56 +02:00 • committed by Alonso Torres
parent ce341a05e1
commit 47b791e938
4 changed files with 47 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
CHANGES.md
View file

@ -6,7 +6,8 @@
### :sparkles: New features
- Default naming of text layers [Taiga #2836](https://tree.taiga.io/project/penpot/us/2836)
- Create typography style from a selected text layer [Taiga #3041](https://tree.taiga.io/project/penpot/us/3041)
- Create typography style from a selected text layer[Taiga #3041](https://tree.taiga.io/project/penpot/us/3041)
- Board as ruler origin [Taiga #4833](https://tree.taiga.io/project/penpot/us/4833)
### :bug: Bugs fixed

25
frontend/src/app/main/ui/workspace/viewport.cljs
View file

@ -222,17 +222,32 @@
disabled-guides? (or drawing-tool transform)
one-selected-shape? (= (count selected-shapes) 1)
show-padding? (and (nil? transform)
(= (count selected-shapes) 1)
one-selected-shape?
(= (:type (first selected-shapes)) :frame)
(= (:layout (first selected-shapes)) :flex)
(zero? (:rotation (first selected-shapes))))
show-margin? (and (nil? transform)
(= (count selected-shapes) 1)
one-selected-shape?
(= (:layout selected-frame) :flex)
(zero? (:rotation (first selected-shapes))))]
(zero? (:rotation (first selected-shapes))))
first-selected-shape (first selected-shapes)
selecting-first-level-frame? (and one-selected-shape?
(cph/root-frame? first-selected-shape))
offset-x (if selecting-first-level-frame?
(:x first-selected-shape)
(:x selected-frame))
offset-y (if selecting-first-level-frame?
(:y (first selected-shapes))
(:y selected-frame))]
(hooks/setup-dom-events zoom disable-paste in-viewport? workspace-read-only?)
(hooks/setup-viewport-size vport viewport-ref)
@ -495,7 +510,9 @@
[:& rules/rules
{:zoom zoom
:vbox vbox
:selected-shapes selected-shapes}])
:selected-shapes selected-shapes
:offset-x offset-x
:offset-y offset-y}])
(when show-rules?
[:& guides/viewport-guides

3
frontend/src/app/main/ui/workspace/viewport/guides.cljs
View file

@ -379,7 +379,8 @@
:style {:font-size (/ rules/font-size zoom)
:font-family rules/font-family
:fill colors/black}}
(fmt/format-number pos)]]))])))
;; If the guide is associated to a frame we show the position relative to the frame
(fmt/format-number (- pos (if (= axis :x) (:x frame) (:y frame))))]]))])))
(mf/defc new-guide-area
[{:keys [vbox zoom axis get-hover-frame disabled-guides?]}]

34
frontend/src/app/main/ui/workspace/viewport/rules.cljs
View file

@ -113,7 +113,7 @@
:line-y2 val})))
(mf/defc rules-axis
[{:keys [zoom vbox axis]}]
[{:keys [zoom vbox axis offset]}]
(let [rules-width (/ rules-width zoom)
step (calculate-step-size zoom)
clip-id (str "clip-rule-" (d/name axis))]
@ -133,8 +133,12 @@
minv (max start -100000)
minv (* (mth/ceil (/ minv step)) step)
maxv (min end 100000)
maxv (* (mth/floor (/ maxv step)) step)]
maxv (* (mth/floor (/ maxv step)) step)
;; These extra operations ensure that we are selecting a frame its initial location is rendered in the rule
minv (+ minv (mod offset step))
maxv (+ maxv (mod offset step))]
(for [step-val (range minv (inc maxv) step)]
(let [{:keys [text-x text-y line-x1 line-y1 line-x2 line-y2]}
(get-rule-axis step-val vbox zoom axis)]
@ -147,7 +151,8 @@
:style {:font-size (/ font-size zoom)
:font-family font-family
:fill colors/gray-30}}
(fmt/format-number step-val)]
;; If the guide is associated to a frame we show the position relative to the frame
(fmt/format-number (- step-val offset))]
[:line {:key (str "line-" (d/name axis) "-" step-val)
:x1 line-x1
@ -158,7 +163,8 @@
:stroke-width rules-width}}]])))]]))
(mf/defc selection-area
[{:keys [vbox zoom selection-rect]}]
[{:keys [vbox zoom selection-rect offset-x offset-y]}]
;; When using the format-number callls we consider if the guide is associated to a frame and we show the position relative to it with the offset
[:g.selection-area
[:g
[:rect {:x (:x selection-rect)
@ -182,7 +188,7 @@
:style {:font-size (/ font-size zoom)
:font-family font-family
:fill selection-area-color}}
(fmt/format-number (:x1 selection-rect))]
(fmt/format-number (- (:x1 selection-rect) offset-x))]
[:rect {:x (:x2 selection-rect)
:y (:y vbox)
@ -198,7 +204,7 @@
:style {:font-size (/ font-size zoom)
:font-family font-family
:fill selection-area-color}}
(fmt/format-number (:x2 selection-rect))]]
(fmt/format-number (- (:x2 selection-rect) offset-x))]]
(let [center-x (+ (:x vbox) (/ rule-area-half-size zoom))
center-y (- (+ (:y selection-rect) (/ (:height selection-rect) 2)) (/ rule-area-half-size zoom))]
@ -232,7 +238,7 @@
:style {:font-size (/ font-size zoom)
:font-family font-family
:fill selection-area-color}}
(fmt/format-number (:y2 selection-rect))]
(fmt/format-number (- (:y2 selection-rect) offset-y))]
[:text {:x (+ center-x (/ (:height selection-rect) 2) )
:y center-y
@ -241,7 +247,7 @@
:style {:font-size (/ font-size zoom)
:font-family font-family
:fill selection-area-color}}
(fmt/format-number (:y1 selection-rect))]])])
(fmt/format-number (- (:y1 selection-rect) offset-y))]])])
(mf/defc rules
{::mf/wrap-props false
@ -249,6 +255,8 @@
[props]
(let [zoom (obj/get props "zoom")
vbox (obj/get props "vbox")
offset-x (obj/get props "offset-x")
offset-y (obj/get props "offset-y")
selected-shapes (-> (obj/get props "selected-shapes")
(hooks/use-equal-memo))
@ -260,10 +268,12 @@
(when (some? vbox)
[:g.rules {:pointer-events "none"}
[:& rules-axis {:zoom zoom :vbox vbox :axis :x}]
[:& rules-axis {:zoom zoom :vbox vbox :axis :y}]
[:& rules-axis {:zoom zoom :vbox vbox :axis :x :offset offset-x}]
[:& rules-axis {:zoom zoom :vbox vbox :axis :y :offset offset-y}]
(when (some? selection-rect)
[:& selection-area {:zoom zoom
:vbox vbox
:selection-rect selection-rect}])])))
:selection-rect selection-rect
:offset-x offset-x
:offset-y offset-y}])])))