3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-06 19:51:41 +02:00
Code Issues Projects Releases Packages Wiki Activity

💄 Show rounded corners when rulers hiden

Browse source
This commit is contained in:
alonso.torres 2023-11-07 11:25:03 +01:00
parent 967c89a2d3
commit aa36d162f2
2 changed files with 36 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -226,7 +226,8 @@
(not node-editing?) (not node-editing?)
(or show-distances? mode-inspect?)) (or show-distances? mode-inspect?))
show-artboard-names? (contains? layout :display-artboard-names) 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) disabled-guides? (or drawing-tool transform)
@ -525,14 +526,15 @@
:zoom zoom :zoom zoom
:vbox vbox}] :vbox vbox}]
(when show-rules? (when-not hide-ui?
[:& rules/rules [:& rules/rules
{:zoom zoom {:zoom zoom
:zoom-inverse zoom-inverse :zoom-inverse zoom-inverse
:vbox vbox :vbox vbox
:selected-shapes selected-shapes :selected-shapes selected-shapes
:offset-x offset-x :offset-x offset-x
:offset-y offset-y}]) :offset-y offset-y
:show-rules? show-rules?}])
(when show-rules? (when show-rules?
[:& guides/viewport-guides [:& guides/viewport-guides

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

@ -156,33 +156,12 @@
(let [rules-width (* rules-width zoom-inverse) (let [rules-width (* rules-width zoom-inverse)
step (calculate-step-size zoom) step (calculate-step-size zoom)
clip-id (str "clip-rule-" (d/name axis)) clip-id (str "clip-rule-" (d/name axis))
new-css-system (mf/use-ctx ctx/new-css-system) 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)]
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)]
[:* [:*
(let [{:keys [x y width height]} (get-background-area vbox zoom-inverse axis)] (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}}])
[: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}}]]))])
[:g.rules {:clipPath (str "url(#" clip-id ")")} [:g.rules {:clipPath (str "url(#" clip-id ")")}
@ -315,7 +294,7 @@
(mf/defc rules (mf/defc rules
{::mf/wrap-props false {::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] [props]
(let [zoom (obj/get props "zoom") (let [zoom (obj/get props "zoom")
zoom-inverse (obj/get props "zoom-inverse") zoom-inverse (obj/get props "zoom-inverse")
@ -324,6 +303,11 @@
offset-y (obj/get props "offset-y") offset-y (obj/get props "offset-y")
selected-shapes (-> (obj/get props "selected-shapes") selected-shapes (-> (obj/get props "selected-shapes")
(hooks/use-equal-memo)) (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 selection-rect
(mf/use-memo (mf/use-memo
@ -333,10 +317,29 @@
(when (some? vbox) (when (some? vbox)
[:g.rules {:pointer-events "none"} [:g.rules {:pointer-events "none"}
[:& rules-axis {:zoom zoom :zoom-inverse zoom-inverse :vbox vbox :axis :x :offset offset-x}] (when show-rules?
[:& rules-axis {:zoom zoom :zoom-inverse zoom-inverse :vbox vbox :axis :y :offset offset-y}] [:*
[:& 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 [:& selection-area {:zoom zoom
:zoom-inverse zoom-inverse :zoom-inverse zoom-inverse
:vbox vbox :vbox vbox