From aa36d162f234a516f5646f466ccebee783c09844 Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Tue, 7 Nov 2023 11:25:03 +0100 Subject: [PATCH] :lipstick: Show rounded corners when rulers hiden --- .../src/app/main/ui/workspace/viewport.cljs | 8 ++- .../app/main/ui/workspace/viewport/rules.cljs | 59 ++++++++++--------- 2 files changed, 36 insertions(+), 31 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/viewport.cljs b/frontend/src/app/main/ui/workspace/viewport.cljs index 5814a2b0e..a4a557a2a 100644 --- a/frontend/src/app/main/ui/workspace/viewport.cljs +++ b/frontend/src/app/main/ui/workspace/viewport.cljs @@ -226,7 +226,8 @@ (not node-editing?) (or show-distances? mode-inspect?)) show-artboard-names? (contains? layout :display-artboard-names) - show-rules? (and (contains? layout :rules) (not (contains? layout :hide-ui))) + hide-ui? (contains? layout :hide-ui) + show-rules? (and (contains? layout :rules) (not hide-ui?)) disabled-guides? (or drawing-tool transform) @@ -525,14 +526,15 @@ :zoom zoom :vbox vbox}] - (when show-rules? + (when-not hide-ui? [:& rules/rules {:zoom zoom :zoom-inverse zoom-inverse :vbox vbox :selected-shapes selected-shapes :offset-x offset-x - :offset-y offset-y}]) + :offset-y offset-y + :show-rules? show-rules?}]) (when show-rules? [:& guides/viewport-guides diff --git a/frontend/src/app/main/ui/workspace/viewport/rules.cljs b/frontend/src/app/main/ui/workspace/viewport/rules.cljs index 251ded7e6..0e4420eaf 100644 --- a/frontend/src/app/main/ui/workspace/viewport/rules.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/rules.cljs @@ -156,33 +156,12 @@ (let [rules-width (* rules-width zoom-inverse) step (calculate-step-size zoom) clip-id (str "clip-rule-" (d/name axis)) - new-css-system (mf/use-ctx ctx/new-css-system) - rules-background (if new-css-system new-css-rules-background rules-background) - font-color (if new-css-system new-css-font-color font-color) - rule-area-size (/ rule-area-size zoom) - border-radius (/ new-css-canvas-border-radius zoom)] + new-css-system (mf/use-ctx ctx/new-css-system) + font-color (if new-css-system new-css-font-color font-color)] [:* (let [{:keys [x y width height]} (get-background-area vbox zoom-inverse axis)] - [:* - [:rect {:x x :y y :width width :height height :style {:fill rules-background}}] - - ;; Draw the rules' rounded corners in the viewport corners - (when new-css-system - (if (= axis :x) - [:* - [:path {:d (round-corner-path-tl (+ x rule-area-size) (+ y rule-area-size) border-radius) - :style {:fill rules-background}}] - - [:path {:d (round-corner-path-tr (+ x width (- border-radius)) (+ y rule-area-size) border-radius) - :style {:fill rules-background}}]] - - [:* - [:path {:d (round-corner-path-bl (+ x rule-area-size) (+ y height (- border-radius)) border-radius) - :style {:fill rules-background}}] - - [:path {:d (round-corner-path-br (+ x (:width vbox) (- border-radius)) (+ y height (- border-radius)) border-radius) - :style {:fill rules-background}}]]))]) + [:rect {:x x :y y :width width :height height :style {:fill rules-background}}]) [:g.rules {:clipPath (str "url(#" clip-id ")")} @@ -315,7 +294,7 @@ (mf/defc rules {::mf/wrap-props false - ::mf/wrap [#(mf/memo' % (mf/check-props ["zoom" "vbox" "selected-shapes"]))]} + ::mf/wrap [#(mf/memo' % (mf/check-props ["zoom" "vbox" "selected-shapes" "show-rules?"]))]} [props] (let [zoom (obj/get props "zoom") zoom-inverse (obj/get props "zoom-inverse") @@ -324,6 +303,11 @@ offset-y (obj/get props "offset-y") selected-shapes (-> (obj/get props "selected-shapes") (hooks/use-equal-memo)) + show-rules? (obj/get props "show-rules?") + + new-css-system (mf/use-ctx ctx/new-css-system) + rules-background (if new-css-system new-css-rules-background rules-background) + border-radius (/ new-css-canvas-border-radius zoom) selection-rect (mf/use-memo @@ -333,10 +317,29 @@ (when (some? vbox) [:g.rules {:pointer-events "none"} - [:& rules-axis {:zoom zoom :zoom-inverse zoom-inverse :vbox vbox :axis :x :offset offset-x}] - [:& rules-axis {:zoom zoom :zoom-inverse zoom-inverse :vbox vbox :axis :y :offset offset-y}] + (when show-rules? + [:* + [:& rules-axis {:zoom zoom :zoom-inverse zoom-inverse :vbox vbox :axis :x :offset offset-x}] + [:& rules-axis {:zoom zoom :zoom-inverse zoom-inverse :vbox vbox :axis :y :offset offset-y}]]) - (when (some? selection-rect) + ;; Draw the rules' rounded corners in the viewport corners + (when new-css-system + (let [{:keys [x y width height]} vbox + rule-area-size (if show-rules? (/ rule-area-size zoom) 0)] + [:* + [:path {:d (round-corner-path-tl (+ x rule-area-size) (+ y rule-area-size) border-radius) + :style {:fill rules-background}}] + + [:path {:d (round-corner-path-tr (+ x width (- border-radius)) (+ y rule-area-size) border-radius) + :style {:fill rules-background}}] + + [:path {:d (round-corner-path-bl (+ x rule-area-size) (+ y height (- border-radius)) border-radius) + :style {:fill rules-background}}] + + [:path {:d (round-corner-path-br (+ x (:width vbox) (- border-radius)) (+ y height (- border-radius)) border-radius) + :style {:fill rules-background}}]])) + + (when (and show-rules? (some? selection-rect)) [:& selection-area {:zoom zoom :zoom-inverse zoom-inverse :vbox vbox