@vectoriox/iox-builder 3.3.1 → 3.3.3

package/fesm2022/vectoriox-iox-builder.mjs

@@ -1189,6 +1189,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
             type: Injectable
         }] });
 
+// Ease-out-quint — fast start, precise stop, no overshoot. Used for FLIP sibling
+// reflow and the insertion indicator open/close. Deliberately NOT a spring/back
+// curve (e.g. cubic-bezier(0.34,1.56,0.64,1)): multiple siblings animating with
+// overshoot at once reads as jitter, not polish — reserve overshoot for single-
+// element motion (ghost drop-settle, a later phase).
+const MOTION_EASE = 'cubic-bezier(0.22, 1, 0.36, 1)';
+// Per-frame exponential smoothing factor for the drag ghost's cursor-follow.
+// Was: ghost position set 1:1 to the pointer every dragmove (rigid/teleporty).
+// Lower = more lag/weight, higher = snappier. 0.35 catches up to the pointer
+// within ~5-6 frames (~80-100ms) — reads as "responsive but weighted".
+const GHOST_FOLLOW_SMOOTHING = 0.35;
 function deepCloneNode(node) {
     const clone = JSON.parse(JSON.stringify(node));
     // Fresh ids + remap intra-subtree references (stateTriggers, interaction targets) so a cloned
@@ -1225,6 +1236,12 @@ class DragEngineService {
         /** Where on the element the user grabbed it (for accurate ghost positioning). */
         this._grabOffsetX = 0;
         this._grabOffsetY = 0;
+        // ── Ghost cursor-follow (eased, not 1:1) ───────────────────
+        this._ghostX = 0;
+        this._ghostY = 0;
+        this._ghostTargetX = 0;
+        this._ghostTargetY = 0;
+        this._ghostRaf = 0;
         // ── Pointer tracking ──────────────────────────────────────
         this._lastPointerX = 0;
         this._lastPointerY = 0;
@@ -1246,6 +1263,17 @@ class DragEngineService {
         // ── Root-escape ───────────────────────────────────────────
         this.ROOT_ESCAPE_PX = 14;
         this._rootEscapeActiveFor = null;
+        this._ghostFollowStep = () => {
+            if (!this._overlay) {
+                this._ghostRaf = 0;
+                return;
+            }
+            this._ghostX += (this._ghostTargetX - this._ghostX) * GHOST_FOLLOW_SMOOTHING;
+            this._ghostY += (this._ghostTargetY - this._ghostY) * GHOST_FOLLOW_SMOOTHING;
+            this._overlay.style.left = this._ghostX + 'px';
+            this._overlay.style.top = this._ghostY + 'px';
+            this._ghostRaf = requestAnimationFrame(this._ghostFollowStep);
+        };
     }
     // ── Shared drop handler — used by all layout components ───────────────────
     handleDrop(children, event, dropListId, cdr, afterDrop) {
@@ -1418,6 +1446,9 @@ class DragEngineService {
         this._sourceEl = el;
         this._isDragging = true;
         this._rootEscapeActiveFor = null;
+        // Suppress native text selection for the duration of the drag — without this,
+        // dragging the pointer across any text (canvas or sidebar) selects/highlights it.
+        document.body.classList.add('iox-dragging');
         this._lastPointerX = event.client.x;
         this._lastPointerY = event.client.y;
         this.isDragging$.next(true);
@@ -1479,6 +1510,7 @@ class DragEngineService {
             clone.classList.add('iox-drag-moving');
             document.body.appendChild(clone);
             this._overlay = clone;
+            this._startGhostFollow(rect.left, rect.top);
             // Hide original wrapper in-place (keeps layout space so container size is stable).
             el.classList.add('iox-drag-active-source');
         }
@@ -1492,15 +1524,17 @@ class DragEngineService {
     _onDragMove(event) {
         this._lastPointerX = event.client.x;
         this._lastPointerY = event.client.y;
-        // Move the clone (or chip) under the cursor.
+        // Update the ghost's follow target; the rAF loop (_ghostFollowStep) eases
+        // the clone/chip toward it rather than snapping to it every dragmove.
         if (this._overlay) {
-            this._overlay.style.left = (event.client.x - this._grabOffsetX) + 'px';
-            this._overlay.style.top = (event.client.y - this._grabOffsetY) + 'px';
+            this._ghostTargetX = event.client.x - this._grabOffsetX;
+            this._ghostTargetY = event.client.y - this._grabOffsetY;
         }
         this._updateDeepTarget();
         this._updateIndicator();
     }
     _onDragEnd(event) {
+        document.body.classList.remove('iox-dragging');
         // Restore original element visibility BEFORE Angular re-renders on drop.
         if (this._sourceEl) {
             this._sourceEl.classList.remove('iox-drag-active-source');
@@ -1559,14 +1593,30 @@ class DragEngineService {
         chip.style.top = (pointerY + 14) + 'px';
         document.body.appendChild(chip);
         this._overlay = chip;
+        this._startGhostFollow(pointerX + 14, pointerY + 14);
     }
     _removeOverlay() {
+        this._stopGhostFollow();
         this._overlay?.remove();
         this._overlay = null;
         this._grabOffsetX = 0;
         this._grabOffsetY = 0;
     }
     // ─────────────────────────────────────────────────────────
+    // Ghost cursor-follow — eased toward the pointer via rAF instead of
+    // snapped to it every dragmove event.
+    // ─────────────────────────────────────────────────────────
+    _startGhostFollow(initialLeft, initialTop) {
+        this._ghostX = this._ghostTargetX = initialLeft;
+        this._ghostY = this._ghostTargetY = initialTop;
+        cancelAnimationFrame(this._ghostRaf);
+        this._ghostRaf = requestAnimationFrame(this._ghostFollowStep);
+    }
+    _stopGhostFollow() {
+        cancelAnimationFrame(this._ghostRaf);
+        this._ghostRaf = 0;
+    }
+    // ─────────────────────────────────────────────────────────
     // Deep-target detection (smallest bounding-rect area)
     // ─────────────────────────────────────────────────────────
     _updateDeepTarget() {
@@ -1763,13 +1813,13 @@ class DragEngineService {
                 this._indicator.style.cssText =
                     'flex-shrink:0;width:0;align-self:stretch;' +
                         'background:#6366f1;border-radius:2px;pointer-events:none;margin:0;' +
-                        'transition:width 140ms ease,margin 140ms ease;overflow:hidden;';
+                        `transition:width 140ms ${MOTION_EASE},margin 140ms ${MOTION_EASE};overflow:hidden;`;
             }
             else {
                 this._indicator.style.cssText =
                     'height:0;width:100%;background:#6366f1;border-radius:2px;' +
                         'pointer-events:none;margin:0;display:block;' +
-                        'transition:height 140ms ease,margin 140ms ease;overflow:hidden;';
+                        `transition:height 140ms ${MOTION_EASE},margin 140ms ${MOTION_EASE};overflow:hidden;`;
             }
         }
         this._indicatorContainerId = containerId;
@@ -1815,7 +1865,7 @@ class DragEngineService {
                 el.style.transition = 'none';
                 el.style.transform = `translate(${dx}px,${dy}px)`;
                 requestAnimationFrame(() => {
-                    el.style.transition = 'transform 140ms ease';
+                    el.style.transition = `transform 140ms ${MOTION_EASE}`;
                     el.style.transform = '';
                 });
             });