lido-player 0.0.2-beta-19-dev → 0.0.2-beta-21-dev

package/dist/collection/components/trace/lido-trace.js

@@ -111,6 +111,7 @@ export class LidoTrace {
         this.fileIndex = -1;
         this.isDragging = false;
         this.activePointerId = null;
+        this.activeTraceState = null;
         // Counter for throttling free trace updates
         // This is only an internal counter. Keeping it out of @State prevents a
         // Stencil component re-render while the user is dragging.
@@ -125,6 +126,7 @@ export class LidoTrace {
     // Handle the pointermove event with optimizations
     // Update the path trace as the red circle moves
     async initializeSVG() {
+        this.cleanupTraceState(this.activeTraceState);
         let state = {
             fileIndex: -1,
             currentPathIndex: 0,
@@ -147,7 +149,10 @@ export class LidoTrace {
             dragOffset: null,
             isCompletingPath: false,
             touchProximityThreshold: null,
+            pointerTransform: null,
+            pointerRect: null,
         };
+        this.activeTraceState = state;
         const url = this.svgUrls[this.currentSvgIndex];
         if (!url || url.trim() === '') {
             console.error('No SVG URL provided or index out of bounds.');
@@ -174,6 +179,27 @@ export class LidoTrace {
     disconnectedCallback() {
         window.removeEventListener('resize', this.handleWindowResize);
         window.removeEventListener('load', this.handleWindowLoad);
+        this.cleanupTraceState(this.activeTraceState);
+        this.activeTraceState = null;
+    }
+    /** Release listeners, pending frames, timers, and cached SVG geometry. */
+    cleanupTraceState(state) {
+        var _a;
+        if (!state)
+            return;
+        (_a = state.cleanup) === null || _a === void 0 ? void 0 : _a.call(state);
+        if (state.rafId)
+            cancelAnimationFrame(state.rafId);
+        state.rafId = null;
+        state.pointerMoveEvent = null;
+        state.pathSamples = [];
+        state.paths = [];
+        state.svg = null;
+        if (this.idleTimer !== null) {
+            clearTimeout(this.idleTimer);
+            this.idleTimer = null;
+        }
+        this.hideFingerHint();
     }
     /** ───────────────────────────────────────────────────────────
      *  Idle‑timer helpers
@@ -372,6 +398,18 @@ export class LidoTrace {
             path._lidoTraceStart = path.getPointAtLength(0);
             path._lidoTraceEnd = path.getPointAtLength(pathLength);
             path._lidoTraceIsClosed = this.getDistanceSquared(path._lidoTraceStart, path._lidoTraceEnd) < 200;
+            // Index the path once. Repeated getPointAtLength calls are expensive on
+            // low-end SVG implementations and used to dominate every pointer frame.
+            const sampleCount = 192;
+            const sampleStep = pathLength / sampleCount || 1;
+            const samples = [];
+            for (let sampleIndex = 0; sampleIndex <= sampleCount; sampleIndex++) {
+                const length = Math.min(pathLength, sampleIndex * sampleStep);
+                const point = path.getPointAtLength(length);
+                samples.push({ x: point.x, y: point.y, length });
+            }
+            path._lidoTraceSamples = samples;
+            path._lidoTraceSampleStep = sampleStep;
             // /** give every path an id so <mpath> can follow it */
             path.setAttribute('id', 'lido-path-' + index); //  ← NEW
             // Create green path for tracing effect
@@ -406,7 +444,7 @@ export class LidoTrace {
                 state.flowMarkers = this.createFlowMarkersForPath(path);
             }
         });
-        state.totalPathLength = state.paths[state.currentPathIndex].getTotalLength();
+        state.totalPathLength = state.paths[state.currentPathIndex]._lidoTraceLength;
     }
     // Set up the draggable circle at the start of the first path
     setupDraggableCircle(state) {
@@ -431,10 +469,14 @@ export class LidoTrace {
             return;
         state.svg.style.touchAction = 'none';
         state.circle.style.touchAction = 'none';
-        // Handle pointerdown on the circle to start dragging
-        state.circle.addEventListener('pointerdown', (evt) => {
+        // Keep named handlers so the detached SVG can be fully released when the
+        // next trace starts. Anonymous handlers here previously retained every
+        // completed trace for the lifetime of the page.
+        const onPointerDown = (evt) => {
             evt.preventDefault(); // Prevent default actions like text selection
-            const pointerPos = this.getPointerPosition(evt, state.svg);
+            state.pointerRect = state.svg.getBoundingClientRect();
+            state.pointerTransform = this.getSvgViewBoxTransform(state.svg, state.pointerRect);
+            const pointerPos = this.getPointerPosition(evt, state.svg, state.pointerTransform, state.pointerRect);
             const circlePos = {
                 x: parseFloat(state.circle.getAttribute('cx')),
                 y: parseFloat(state.circle.getAttribute('cy')),
@@ -459,9 +501,9 @@ export class LidoTrace {
             }
             this.hideFingerHint(); // ← NEW
             this.resetIdleTimer(state); // ← NEW
-        }, { passive: false });
+        };
         // Handle pointermove on the SVG to update the circle position
-        (_a = state.svg) === null || _a === void 0 ? void 0 : _a.addEventListener('pointermove', (evt) => {
+        const onPointerMove = (evt) => {
             if (!state.isDragging || evt.pointerId !== state.activePointerId)
                 return;
             evt.preventDefault();
@@ -472,7 +514,7 @@ export class LidoTrace {
                     state.rafId = null;
                 });
             }
-        });
+        };
         // Handle pointerup and pointercancel on the SVG to stop dragging
         const endDrag = (evt) => {
             if (evt.pointerId === state.activePointerId) {
@@ -484,12 +526,25 @@ export class LidoTrace {
                 this.resetIdleTimer(state); // ← NEW
             }
         };
-        (_b = state.svg) === null || _b === void 0 ? void 0 : _b.addEventListener('pointerup', endDrag);
-        (_c = state.svg) === null || _c === void 0 ? void 0 : _c.addEventListener('pointercancel', endDrag);
+        (_a = state.svg) === null || _a === void 0 ? void 0 : _a.addEventListener('pointerup', endDrag);
+        (_b = state.svg) === null || _b === void 0 ? void 0 : _b.addEventListener('pointercancel', endDrag);
         // Optional: Prevent context menu on long press
-        (_d = state.svg) === null || _d === void 0 ? void 0 : _d.addEventListener('contextmenu', (evt) => {
+        const onContextMenu = (evt) => {
             evt.preventDefault();
-        });
+        };
+        state.circle.addEventListener('pointerdown', onPointerDown, { passive: false });
+        (_c = state.svg) === null || _c === void 0 ? void 0 : _c.addEventListener('pointermove', onPointerMove);
+        (_d = state.svg) === null || _d === void 0 ? void 0 : _d.addEventListener('contextmenu', onContextMenu);
+        state.cleanup = () => {
+            var _a, _b, _c, _d, _e;
+            (_a = state.circle) === null || _a === void 0 ? void 0 : _a.removeEventListener('pointerdown', onPointerDown);
+            (_b = state.svg) === null || _b === void 0 ? void 0 : _b.removeEventListener('pointermove', onPointerMove);
+            (_c = state.svg) === null || _c === void 0 ? void 0 : _c.removeEventListener('pointerup', endDrag);
+            (_d = state.svg) === null || _d === void 0 ? void 0 : _d.removeEventListener('pointercancel', endDrag);
+            (_e = state.svg) === null || _e === void 0 ? void 0 : _e.removeEventListener('contextmenu', onContextMenu);
+            state.isDragging = false;
+            state.activePointerId = null;
+        };
     }
     // Modified handlePointerMove function
     async handlePointerMove(state) {
@@ -502,7 +557,7 @@ export class LidoTrace {
             return;
         this.hideFingerHint(); // user is active, remove hint
         const evt = state.pointerMoveEvent;
-        const rawPointerPos = this.getPointerPosition(evt, state.svg);
+        const rawPointerPos = this.getPointerPosition(evt, state.svg, state.pointerTransform, state.pointerRect);
         const pointerPos = state.dragOffset
             ? {
                 x: rawPointerPos.x - state.dragOffset.x,
@@ -766,9 +821,9 @@ export class LidoTrace {
         triggerNextContainer();
     }
     // Get the pointer position relative to the SVG
-    getPointerPosition(evt, svg) {
+    getPointerPosition(evt, svg, cachedTransform, cachedRect) {
         var _a;
-        const viewBoxPoint = this.getPointerPositionFromViewBox(evt, svg);
+        const viewBoxPoint = this.getPointerPositionFromViewBox(evt, svg, cachedTransform, cachedRect);
         if (viewBoxPoint)
             return viewBoxPoint;
         const svgPoint = svg.createSVGPoint();
@@ -777,13 +832,13 @@ export class LidoTrace {
         const ctm = (_a = svg.getScreenCTM()) === null || _a === void 0 ? void 0 : _a.inverse();
         return ctm ? svgPoint.matrixTransform(ctm) : { x: evt.clientX, y: evt.clientY };
     }
-    getPointerPositionFromViewBox(evt, svg) {
-        const rect = svg.getBoundingClientRect();
+    getPointerPositionFromViewBox(evt, svg, cachedTransform, cachedRect) {
+        const rect = cachedRect || svg.getBoundingClientRect();
         const viewBox = svg.viewBox.baseVal;
         if (!rect.width || !rect.height || !viewBox.width || !viewBox.height) {
             return null;
         }
-        const { offsetX, offsetY, scaleX, scaleY } = this.getSvgViewBoxTransform(svg, rect);
+        const { offsetX, offsetY, scaleX, scaleY } = cachedTransform || this.getSvgViewBoxTransform(svg, rect);
         return {
             x: viewBox.x + (evt.clientX - rect.left - offsetX) / scaleX,
             y: viewBox.y + (evt.clientY - rect.top - offsetY) / scaleY,
@@ -843,6 +898,40 @@ export class LidoTrace {
     getClosestPointOnPath(pathNode, point, lastLength) {
         var _a;
         const pathLength = (_a = pathNode._lidoTraceLength) !== null && _a !== void 0 ? _a : pathNode.getTotalLength();
+        const samples = pathNode._lidoTraceSamples;
+        const sampleStep = pathNode._lidoTraceSampleStep;
+        if ((samples === null || samples === void 0 ? void 0 : samples.length) && sampleStep) {
+            const searchWindow = lastLength === undefined ? pathLength : 150;
+            const searchStart = lastLength === undefined ? 0 : Math.max(0, lastLength - searchWindow);
+            const searchEnd = lastLength === undefined ? pathLength : Math.min(pathLength, lastLength + searchWindow);
+            let nearest = samples[Math.max(0, Math.min(samples.length - 1, Math.round((lastLength || 0) / sampleStep)))];
+            let nearestDistance = Infinity;
+            for (const sample of samples) {
+                if (sample.length < searchStart || sample.length > searchEnd)
+                    continue;
+                const distance = this.getDistanceSquared(point, sample);
+                if (distance < nearestDistance) {
+                    nearestDistance = distance;
+                    nearest = sample;
+                }
+            }
+            // Refine only around the cached winner. This keeps the path accurate
+            // while reducing hot-path geometry calls from roughly 50 to a handful.
+            const refinementStep = 6;
+            const refineStart = Math.max(searchStart, nearest.length - sampleStep);
+            const refineEnd = Math.min(searchEnd, nearest.length + sampleStep);
+            let closestPoint = Object.assign({}, nearest);
+            let minDistanceSquared = nearestDistance;
+            for (let length = refineStart; length <= refineEnd; length += refinementStep) {
+                const candidate = pathNode.getPointAtLength(length);
+                const distance = this.getDistanceSquared(point, candidate);
+                if (distance < minDistanceSquared) {
+                    minDistanceSquared = distance;
+                    closestPoint = { x: candidate.x, y: candidate.y, length };
+                }
+            }
+            return closestPoint;
+        }
         let closestPoint = { x: 0, y: 0, length: 0 };
         let minDistanceSquared = Infinity;
         const coarseStep = 40;
@@ -1035,7 +1124,7 @@ export class LidoTrace {
         };
     }
     render() {
-        return (h(Host, { key: '2f62ab117a595ba9af7f926ad7240902caf7fd99', class: "lido-trace", id: this.id, audio: this.audio, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, tabindex: this.tabIndex, "disable-speak": this.disableSpeak }, h("div", { key: '5a14b9bc1ff4d71ffc740c8afaa1d07754044a9d', style: this.style, id: "lido-svgContainer" })));
+        return (h(Host, { key: 'f4c270d9319e1115d966a6d9b697a4413ca87885', class: "lido-trace", id: this.id, audio: this.audio, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, tabindex: this.tabIndex, "disable-speak": this.disableSpeak }, h("div", { key: 'efbbaf5c796c9cfe8516fe5d47265e3a01b28a25', style: this.style, id: "lido-svgContainer" })));
     }
     static get is() { return "lido-trace"; }
     static get originalStyleUrls() {