✨ Hide guide lines when moving overlay marker

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

@@ -74,6 +74,7 @@
         cursor            (mf/use-state (utils/get-cursor :pointer-inner))
         hover-ids         (mf/use-state nil)
         hover             (mf/use-state nil)
+        hover-disabled?   (mf/use-state false)
         frame-hover       (mf/use-state nil)
         active-frames     (mf/use-state {})
 
@@ -153,7 +154,7 @@
     (hooks/setup-cursor cursor alt? panning drawing-tool drawing-path? node-editing?)
     (hooks/setup-resize layout viewport-ref)
     (hooks/setup-keyboard alt? ctrl? space?)
-    (hooks/setup-hover-shapes page-id move-stream objects transform selected ctrl? hover hover-ids zoom)
+    (hooks/setup-hover-shapes page-id move-stream objects transform selected ctrl? hover hover-ids @hover-disabled? zoom)
     (hooks/setup-viewport-modifiers modifiers selected objects render-ref)
     (hooks/setup-shortcuts node-editing? drawing-path?)
     (hooks/setup-active-frames objects vbox hover active-frames)
@@ -320,7 +321,8 @@
 
        (when show-prototypes?
          [:& interactions/interactions
-          {:selected selected}])
+          {:selected selected
+           :hover-disabled? hover-disabled?}])
 
        (when show-selrect?
          [:& widgets/selection-rect {:data selrect

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

@@ -89,11 +89,12 @@
   (hooks/use-stream ms/keyboard-ctrl #(reset! ctrl? %))
   (hooks/use-stream ms/keyboard-space #(reset! space? %)))
 
-(defn setup-hover-shapes [page-id move-stream objects transform selected ctrl? hover hover-ids zoom]
+(defn setup-hover-shapes [page-id move-stream objects transform selected ctrl? hover hover-ids hover-disabled? zoom]
   (let [;; We use ref so we don't recreate the stream on a change
         zoom-ref (mf/use-ref zoom)
         transform-ref (mf/use-ref nil)
         selected-ref (mf/use-ref selected)
+        hover-disabled-ref (mf/use-ref hover-disabled?)
 
         query-point
         (mf/use-callback
@@ -101,21 +102,22 @@
          (fn [point]
            (let [zoom (mf/ref-val zoom-ref)
                  rect (gsh/center->rect point (/ 5 zoom) (/ 5 zoom))]
-             (uw/ask-buffered!
+             (if (mf/ref-val hover-disabled-ref)
-              {:cmd :selection/query
+               (rx/of nil)
-               :page-id page-id
+               (uw/ask-buffered!
-               :rect rect
+                 {:cmd :selection/query
-               :include-frames? true
+                  :page-id page-id
-               :reverse? true})))) ;; we want the topmost shape to be selected first
+                  :rect rect
+                  :include-frames? true
+                  :reverse? true}))))) ;; we want the topmost shape to be selected first
 
         over-shapes-stream
         (mf/use-memo
-         (fn []
+          (fn []
-           (->> move-stream
+            (->> move-stream
-                ;; When transforming shapes we stop querying the worker
+                 ;; When transforming shapes we stop querying the worker
-                (rx/filter #(not (some? (mf/ref-val transform-ref))))
+                 (rx/filter #(not (some? (mf/ref-val transform-ref))))
-                (rx/switch-map query-point))))
+                 (rx/switch-map query-point))))]
-        ]
 
     ;; Refresh the refs on a value change
 
@@ -131,6 +133,10 @@
      (mf/deps selected)
      #(mf/set-ref-val! selected-ref selected))
 
+    (mf/use-effect
+     (mf/deps hover-disabled?)
+     #(mf/set-ref-val! hover-disabled-ref hover-disabled?))
+
     (hooks/use-stream
      over-shapes-stream
      (mf/deps page-id objects @ctrl?)

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

@@ -192,7 +192,7 @@
 
 
 (mf/defc overlay-marker
-  [{:keys [index orig-shape dest-shape position objects] :as props}]
+  [{:keys [index orig-shape dest-shape position objects hover-disabled?] :as props}]
   (let [start-move-position
         (fn [_]
           (st/emit! (dw/start-move-overlay-pos index)))]
@@ -203,7 +203,9 @@
             marker-y   (+ (:y orig-frame) (:y position))
             width      (:width dest-shape)
             height     (:height dest-shape)]
-        [:g {:on-mouse-down start-move-position}
+        [:g {:on-mouse-down start-move-position
+             :on-mouse-enter #(reset! hover-disabled? true)
+             :on-mouse-leave #(reset! hover-disabled? false)}
          [:path {:stroke "#31EFB8"
                  :fill "#000000"
                  :fill-opacity 0.3
@@ -223,7 +225,7 @@
          ]))))
 
 (mf/defc interactions
-  [{:keys [selected] :as props}]
+  [{:keys [selected hover-disabled?] :as props}]
   (let [local (mf/deref refs/workspace-local)
         zoom (mf/deref refs/selected-zoom)
         current-transform (:transform local)
@@ -294,13 +296,15 @@
                                           :orig-shape shape
                                           :dest-shape dest-shape
                                           :position move-overlay-to
-                                          :objects objects}]
+                                          :objects objects
+                                          :hover-disabled? hover-disabled?}]
                       [:& overlay-marker {:key (str "pos" (:id shape) "-" index)
                                           :index index
                                           :orig-shape shape
                                           :dest-shape dest-shape
                                           :position (:overlay-position interaction)
-                                          :objects objects}]))])))
+                                          :objects objects
+                                          :hover-disabled? hover-disabled?}]))])))
           (when (not (#{:move :rotate} current-transform))
             [:& interaction-handle {:key (:id shape)
                                     :index nil