✨ Fix locked elements not selectable in viewer + add guide locking (#8949)

* 🐛 Allow viewers to select locked elements in canvas

* ✨ Add ability to lock guides to prevent accidental movement

---------

Signed-off-by: Dexterity104 <hatanokanjiro@gmail.com>
Co-authored-by: Andrey Antukh <niwi@niwi.nz>

frontend/src/app/main/data/workspace/layout.cljs

@@ -25,6 +25,7 @@
     :element-options
     :rulers
     :display-guides
+    :lock-guides
     :snap-guides
     :scale-text
     :dynamic-alignment

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

@@ -380,6 +380,17 @@
          (tr "workspace.header.menu.show-guides"))]
       [:> shortcuts* {:id :toggle-guides}]]
 
+     [:> dropdown-menu-item* {:class (stl/css :base-menu-item :submenu-item)
+                              :on-click    toggle-flag
+                              :on-key-down (fn [event]
+                                             (when (kbd/enter? event)
+                                               (toggle-flag event)))
+                              :data-testid "lock-guides"
+                              :id          "file-menu-lock-guides"}
+      [:span {:class (stl/css :item-name)}
+       (if (contains? layout :lock-guides)
+         (tr "workspace.header.menu.unlock-guides")
+         (tr "workspace.header.menu.lock-guides"))]]
 
      (when-not ^boolean read-only?
        [:*

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

@@ -259,7 +259,8 @@
         show-rulers?             (and (contains? layout :rulers) (not hide-ui?))
 
 
-        disabled-guides?         (or drawing-tool transform path-drawing? path-editing? @space? @mod?)
+        disabled-guides?         (or drawing-tool transform path-drawing? path-editing? @space? @mod?
+                                     (contains? layout :lock-guides))
 
         single-select?           (= (count selected-shapes) 1)
 
@@ -307,7 +308,7 @@
     (hooks/setup-cursor cursor alt? mod? space? panning drawing-tool path-drawing? path-editing? z? read-only?)
     (hooks/setup-keyboard alt? mod? space? z? shift?)
     (hooks/setup-hover-shapes page-id move-stream base-objects transform selected mod? hover measure-hover
-                              hover-ids hover-top-frame-id @hover-disabled? focus zoom show-measures?)
+                              hover-ids hover-top-frame-id @hover-disabled? focus zoom show-measures? read-only?)
     (hooks/setup-viewport-modifiers modifiers base-objects)
     (hooks/setup-shortcuts path-editing? path-drawing? text-editing? grid-editing?)
     (hooks/setup-active-frames base-objects hover-ids selected active-frames zoom transform vbox)

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

@@ -177,7 +177,7 @@
                            (dw/increase-zoom)))))))
 
 (defn setup-hover-shapes
-  [page-id move-stream objects transform selected mod? hover measure-hover hover-ids hover-top-frame-id hover-disabled? focus zoom show-measures?]
+  [page-id move-stream objects transform selected mod? hover measure-hover hover-ids hover-top-frame-id hover-disabled? focus zoom show-measures? read-only?]
   (let [;; We use ref so we don't recreate the stream on a change
         zoom-ref (mf/use-ref zoom)
         mod-ref (mf/use-ref @mod?)
@@ -267,7 +267,7 @@
     (let [sorted-ids-cache (mf/use-ref {})]
       (hooks/use-stream
        over-shapes-stream
-       (mf/deps page-id objects show-measures?)
+       (mf/deps page-id objects show-measures? read-only?)
        (fn [ids]
          (let [selected   (mf/ref-val selected-ref)
                focus      (mf/ref-val focus-ref)
@@ -279,7 +279,7 @@
                  (let [sorted-ids
                        (into (d/ordered-set)
                              (comp (remove (partial cfh/hidden-parent? objects))
-                                   (remove #(dm/get-in objects [% :blocked]))
+                                   (remove #(and (not read-only?) (dm/get-in objects [% :blocked])))
                                    (remove (partial cfh/svg-raw-shape? objects)))
                              (ctt/sort-z-index objects ids {:bottom-frames? mod?}))]
                    (mf/set-ref-val! sorted-ids-cache (assoc cached-ids [mod? ids] sorted-ids))

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

@@ -269,7 +269,8 @@
         show-rulers?             (and (contains? layout :rulers) (not hide-ui?))
 
 
-        disabled-guides?         (or drawing-tool transform path-drawing? path-editing?)
+        disabled-guides?         (or drawing-tool transform path-drawing? path-editing?
+                                     (contains? layout :lock-guides))
 
         single-select?           (= (count selected-shapes) 1)
 
@@ -432,7 +433,7 @@
     (hooks/setup-cursor cursor alt? mod? space? panning drawing-tool path-drawing? path-editing? z? read-only?)
     (hooks/setup-keyboard alt? mod? space? z? shift?)
     (hooks/setup-hover-shapes page-id move-stream base-objects transform selected mod? hover measure-hover
-                              hover-ids hover-top-frame-id @hover-disabled? focus zoom show-measures?)
+                              hover-ids hover-top-frame-id @hover-disabled? focus zoom show-measures? read-only?)
     (hooks/setup-shortcuts path-editing? path-drawing? text-editing? grid-editing?)
     (hooks/setup-active-frames base-objects hover-ids selected active-frames zoom transform vbox)
 

frontend/src/app/worker/selection.cljs

@@ -157,8 +157,6 @@
         match-criteria?
         (fn [shape]
           (and (not (:hidden shape))
-               (or (cfh/frame-shape? shape) ;; We return frames even if blocked
-                   (not (:blocked shape)))
                (or (not frame-id) (= frame-id (:frame-id shape)))
                (case (:type shape)
                  :frame   include-frames?

frontend/translations/en.po

@@ -5799,6 +5799,14 @@ msgstr "Hide board names"
 msgid "workspace.header.menu.hide-guides"
 msgstr "Hide guides"
 
+#: src/app/main/ui/workspace/main_menu.cljs:387
+msgid "workspace.header.menu.lock-guides"
+msgstr "Lock guides"
+
+#: src/app/main/ui/workspace/main_menu.cljs:387
+msgid "workspace.header.menu.unlock-guides"
+msgstr "Unlock guides"
+
 #: src/app/main/ui/workspace/main_menu.cljs:393
 msgid "workspace.header.menu.hide-palette"
 msgstr "Hide color palette"