🐛 Fix pixel grid and board pixel grid shown on top of rulers (#10430)

* 🐛 Fix pixel grid shown on top of rulers

* 🐛 Fix board pixel grid being rendered above rulers

frontend/src/app/main/ui/workspace/viewport/frame_grid.cljs

@@ -15,6 +15,7 @@
    [app.common.types.shape-tree :as ctst]
    [app.common.uuid :as uuid]
    [app.main.refs :as refs]
+   [app.main.ui.workspace.viewport.rulers :as rulers]
    [rumext.v2 :as mf]))
 
 (mf/defc square-grid* [{:keys [frame zoom grid]}]
@@ -165,12 +166,15 @@
 
 (mf/defc frame-grid*
   {::mf/wrap [mf/memo]}
-  [{:keys [zoom transform selected focus]}]
+  [{:keys [zoom transform selected focus vbox clip-rulers] :or {clip-rulers false}}]
   (let [frames        (->> (mf/deref refs/workspace-frames)
                            (filter has-grid?))
         transforming  (when (some? transform) selected)]
 
-    [:g.grid-display {:style {:pointer-events "none"}}
+    [:g.grid-display {:style {:pointer-events "none"}
+                      :clip-path (when clip-rulers "url(#clip-frame-grid)")}
+     (when clip-rulers
+       [:> rulers/rulers-clip-path* {:id "clip-frame-grid" :vbox vbox :zoom zoom}])
      (for [frame frames]
        (when (and #_(not (is-transform? frame))
               (not (ctst/rotated-frame? frame))

frontend/src/app/main/ui/workspace/viewport/rulers.cljs

@@ -35,6 +35,19 @@
 ;;   RULERS
 ;; ----------------
 
+(mf/defc rulers-clip-path*
+  "Defines a clip path (referenced by `id`) that excludes the ruler bars from the
+   given `vbox`. Used to keep SVG overlays from painting over the rulers that are
+   drawn by the wasm render engine on the canvas."
+  [{:keys [id vbox zoom]}]
+  (let [ruler-size (/ ruler-area-size zoom)]
+    [:defs
+     [:clipPath {:id id}
+      [:rect {:x (+ (:x vbox) ruler-size)
+              :y (+ (:y vbox) ruler-size)
+              :width (max 0 (- (:width vbox) ruler-size))
+              :height (max 0 (- (:height vbox) ruler-size))}]]]))
+
 (defn- calculate-step-size
   [zoom]
   (cond

frontend/src/app/main/ui/workspace/viewport/widgets.cljs

@@ -23,6 +23,7 @@
    [app.main.ui.context :as ctx]
    [app.main.ui.ds.foundations.assets.icon :as i :refer [icon*]]
    [app.main.ui.hooks :as hooks]
+   [app.main.ui.workspace.viewport.rulers :as rulers]
    [app.main.ui.workspace.viewport.utils :as vwu]
    [app.util.debug :as dbg]
    [app.util.dom :as dom]
@@ -32,7 +33,7 @@
    [rumext.v2 :as mf]))
 
 (mf/defc pixel-grid*
-  [{:keys [vbox zoom]}]
+  [{:keys [vbox zoom clip-rulers] :or {clip-rulers false}}]
   (let [page         (mf/deref refs/workspace-page)
         custom-color (:pixel-grid-color page)
         custom-alpha (:pixel-grid-opacity page)
@@ -57,11 +58,14 @@
                        :stroke stroke
                        :stroke-opacity opacity
                        :stroke-width (str (/ 1 zoom))}}]]]
+     (when clip-rulers
+       [:> rulers/rulers-clip-path* {:id "clip-pixel-grid" :vbox vbox :zoom zoom}])
      [:rect {:x (:x vbox)
              :y (:y vbox)
              :width (:width vbox)
              :height (:height vbox)
              :fill (str "url(#pixel-grid)")
+             :clip-path (when clip-rulers "url(#clip-pixel-grid)")
              :style {:pointer-events "none"}}]]))
 
 (mf/defc cursor-tooltip*

frontend/src/app/main/ui/workspace/viewport_wasm.cljs

@@ -851,11 +851,14 @@
           {:zoom zoom
            :selected selected
            :transform transform
-           :focus focus}])
+           :focus focus
+           :vbox vbox
+           :clip-rulers show-rulers?}])
 
        (when show-pixel-grid?
          [:> widgets/pixel-grid* {:vbox vbox
-                                  :zoom zoom}])
+                                  :zoom zoom
+                                  :clip-rulers show-rulers?}])
 
        (when show-snap-points?
          [:> snap-points/snap-points*