🐛 Fix selrect misplacement on grid and flex layouts (#10832)

* 🐛 Fix selrect misplacement on grid and flex layouts

* ♻️ Refactor clear-transform-preview to use it from both ui and data layers

frontend/src/app/main/data/workspace/grid_layout/editor.cljs

@@ -11,6 +11,7 @@
    [app.common.types.shape.layout :as ctl]
    [app.main.data.helpers :as dsh]
    [app.main.data.workspace.viewport-wasm :as dwvw]
+   [app.main.streams :as ms]
    [potok.v2.core :as ptk]))
 
 (defn hover-grid-cell
@@ -88,7 +89,11 @@
   (ptk/reify ::stop-grid-layout-editing
     ptk/UpdateEvent
     (update [_ state]
-      (update state :workspace-grid-edition dissoc grid-id))))
+      (update state :workspace-grid-edition dissoc grid-id))
+
+    ptk/EffectEvent
+    (effect [_ _ _]
+      (ms/clear-transform-preview!))))
 
 (defn locate-board
   [grid-id]

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

@@ -143,8 +143,7 @@
 
     ptk/EffectEvent
     (effect [_ _ _]
-      (rx/push! ms/wasm-modifiers nil)
-      (rx/push! ms/workspace-selrect nil))))
+      (ms/clear-transform-preview!))))
 
 ;; -- Resize --------------------------------------------------------
 

frontend/src/app/main/streams.cljs

@@ -32,6 +32,17 @@
 (defonce workspace-selrect
   (rx/behavior-subject nil))
 
+(defn clear-transform-preview!
+  "Reset the interactive-transform preview behaviour-subjects. Controls
+  that drive a live preview (drag/resize/rotate, flex spacing handles,
+  grid track/cell gestures) set these via `set-wasm-modifiers` and clear
+  them at gesture end. If the control unmounts mid-gesture that clearing
+  never runs, so the stale selrect keeps displacing the DOM selection
+  overlay of the next selection. Call from gesture end / unmount cleanup."
+  []
+  (rx/push! wasm-modifiers nil)
+  (rx/push! workspace-selrect nil))
+
 ;; --- Derived streams
 
 (defonce ^:private pointer

frontend/src/app/main/ui/flex_controls/common.cljs

@@ -1,9 +1,19 @@
 (ns app.main.ui.flex-controls.common
   (:require
    [app.main.constants :as mconst]
+   [app.main.streams :as ms]
    [app.main.ui.formats :as fmt]
    [rumext.v2 :as mf]))
 
+;; ------------------------------------------------
+;; INTERACTIVE TRANSFORM CLEANUP
+;; ------------------------------------------------
+
+;; Flex spacing controls (padding/margin/gap) call this from their
+;; unmount cleanup, guarded on the resizing flag. See
+;; `ms/clear-transform-preview!` for the rationale.
+(def clear-transform-preview! ms/clear-transform-preview!)
+
 ;; ------------------------------------------------
 ;; CONSTANTS
 ;; ------------------------------------------------

frontend/src/app/main/ui/flex_controls/gap.cljs

@@ -98,6 +98,11 @@
                  (when on-change
                    (on-change modifiers)))))))]
 
+    (mf/with-effect []
+      (fn []
+        (when (some? @resizing)
+          (fcc/clear-transform-preview!))))
+
     [:g.gap-rect
      [:rect.info-area
       {:x (:x rect-data)

frontend/src/app/main/ui/flex_controls/margin.cljs

@@ -105,6 +105,11 @@
                  (when on-change
                    (on-change modifiers)))))))]
 
+    (mf/with-effect []
+      (fn []
+        (when @resizing?
+          (fcc/clear-transform-preview!))))
+
     [:rect.margin-rect
      {:x (:x rect-data)
       :y (:y rect-data)

frontend/src/app/main/ui/flex_controls/padding.cljs

@@ -105,6 +105,11 @@
                  (when on-change
                    (on-change modifiers)))))))]
 
+    (mf/with-effect []
+      (fn []
+        (when @resizing?
+          (fcc/clear-transform-preview!))))
+
     [:g.padding-rect
      [:rect.info-area
       {:x (:x rect-data)