@vectoriox/iox-builder 1.4.35 → 1.4.36

package/fesm2022/vectoriox-iox-builder.mjs

@@ -348,6 +348,8 @@ class DragEngineService {
         this._flipEls = new Set();
         // ── Viewport scale ────────────────────────────────────────
         this._scale = 1;
+        // ── Dropzone rect cache — snapshotted at drag start and on scroll ─────────
+        this._dropzoneRectCache = new Map();
         // ── Root-escape ───────────────────────────────────────────
         this.ROOT_ESCAPE_PX = 14;
         this._rootEscapeActiveFor = null;
@@ -403,6 +405,14 @@ class DragEngineService {
     }
     /** Called by BuilderComponent whenever the viewport scale changes. */
     setScale(scale) { this._scale = scale; }
+    _snapshotRects() {
+        this._dropzoneRectCache.clear();
+        for (const id of this.ids) {
+            const el = this._getEl(id);
+            if (el)
+                this._dropzoneRectCache.set(id, el.getBoundingClientRect());
+        }
+    }
     // ─────────────────────────────────────────────────────────
     // Element lookup — elMap first, DOM id fallback
     // ─────────────────────────────────────────────────────────
@@ -558,6 +568,7 @@ class DragEngineService {
             this._createExternalChip(this._payload, event.client.x, event.client.y);
             el.classList.add('iox-drag-source');
         }
+        this._snapshotRects();
     }
     _onDragMove(event) {
         this._lastPointerX = event.client.x;
@@ -652,7 +663,7 @@ class DragEngineService {
             // whose DOM element lives inside the dragged source wrapper.
             if (this._sourceEl?.contains(el))
                 continue;
-            const rect = el.getBoundingClientRect();
+            const rect = this._dropzoneRectCache.get(id) ?? el.getBoundingClientRect();
             if (px >= rect.left && px <= rect.right && py >= rect.top && py <= rect.bottom) {
                 const area = rect.width * rect.height;
                 if (area < bestArea) {
@@ -674,7 +685,7 @@ class DragEngineService {
         if (this._rootEscapeActiveFor) {
             const escEl = this._getEl(this._rootEscapeActiveFor);
             if (escEl) {
-                const r = escEl.getBoundingClientRect();
+                const r = this._dropzoneRectCache.get(this._rootEscapeActiveFor) ?? escEl.getBoundingClientRect();
                 const inside = px >= r.left && px <= r.right && py >= r.top && py <= r.bottom;
                 if (inside) {
                     bestId = 'canvas-preview';
@@ -691,7 +702,7 @@ class DragEngineService {
             bestId && bestId !== 'canvas-preview' && this._isRootContainer(bestId)) {
             const el = this._getEl(bestId);
             if (el) {
-                const rect = el.getBoundingClientRect();
+                const rect = this._dropzoneRectCache.get(bestId) ?? el.getBoundingClientRect();
                 const nearEdge = py <= rect.top + this.ROOT_ESCAPE_PX ||
                     py >= rect.bottom - this.ROOT_ESCAPE_PX;
                 // Only escape if we were already targeting this section or
@@ -731,6 +742,7 @@ class DragEngineService {
     refreshDragOverlays() {
         if (!this._isDragging)
             return;
+        this._snapshotRects();
         this._moveTargetOverlay(this._deepTargetId);
     }
     _moveTargetOverlay(targetId) {
@@ -2613,6 +2625,11 @@ class OverlayComponent {
         this.moreMenuStyle = {};
         this.subs = [];
         this.boundUpdate = () => this.updateAll();
+        this._scrollRaf = 0;
+        this.boundScrollUpdate = () => {
+            cancelAnimationFrame(this._scrollRaf);
+            this._scrollRaf = requestAnimationFrame(() => this.updateAll());
+        };
         this.activeScrollContainer = null;
     }
     ngOnInit() {
@@ -2647,9 +2664,9 @@ class OverlayComponent {
         // its wrapper element after each raf tick — listen to that to reposition
         // overlay boxes as the canvas scrolls.
         this.subs.push(this.overlayService.scrollContainer$.subscribe(el => {
-            this.activeScrollContainer?.removeEventListener('scroll', this.boundUpdate);
+            this.activeScrollContainer?.removeEventListener('scroll', this.boundScrollUpdate);
             this.activeScrollContainer = el;
-            el.addEventListener('scroll', this.boundUpdate, { passive: true });
+            el.addEventListener('scroll', this.boundScrollUpdate, { passive: true });
         }));
         // Open the more menu when a canvas element is right-clicked.
         this.subs.push(this.overlayService.contextMenu$.subscribe(({ x, y }) => {
@@ -2663,8 +2680,9 @@ class OverlayComponent {
         this.resizeObserver?.disconnect();
         this.containerResizeObserver?.disconnect();
         this.mutationObserver?.disconnect();
+        cancelAnimationFrame(this._scrollRaf);
         window.removeEventListener('resize', this.boundUpdate);
-        this.activeScrollContainer?.removeEventListener('scroll', this.boundUpdate);
+        this.activeScrollContainer?.removeEventListener('scroll', this.boundScrollUpdate);
         this.activeScrollContainer = null;
     }
     // ── Toolbar actions ──────────────────────────────────────