From 47b791e93826738aae19f4a6417542532b36dd55 Mon Sep 17 00:00:00 2001 From: Alejandro Alonso Date: Wed, 12 Apr 2023 16:16:56 +0200 Subject: [PATCH] :sparkles: Board as ruler origin --- CHANGES.md | 3 +- .../src/app/main/ui/workspace/viewport.cljs | 25 +++++++++++--- .../main/ui/workspace/viewport/guides.cljs | 3 +- .../app/main/ui/workspace/viewport/rules.cljs | 34 ++++++++++++------- 4 files changed, 47 insertions(+), 18 deletions(-) diff --git a/CHANGES.md b/CHANGES.md index 62b671180..c72e2f666 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -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 diff --git a/frontend/src/app/main/ui/workspace/viewport.cljs b/frontend/src/app/main/ui/workspace/viewport.cljs index 773d975f5..58514a8c6 100644 --- a/frontend/src/app/main/ui/workspace/viewport.cljs +++ b/frontend/src/app/main/ui/workspace/viewport.cljs @@ -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 diff --git a/frontend/src/app/main/ui/workspace/viewport/guides.cljs b/frontend/src/app/main/ui/workspace/viewport/guides.cljs index 42459e7c2..b1d4a6c2b 100644 --- a/frontend/src/app/main/ui/workspace/viewport/guides.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/guides.cljs @@ -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?]}] diff --git a/frontend/src/app/main/ui/workspace/viewport/rules.cljs b/frontend/src/app/main/ui/workspace/viewport/rules.cljs index 88eeb0da5..272e1f02e 100644 --- a/frontend/src/app/main/ui/workspace/viewport/rules.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/rules.cljs @@ -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}])])))