lido-player 0.0.2-alpha-51-dev → 0.0.2-alpha-53-dev

package/dist/components/{p-d7693f47.js → p-3e8ae1c5.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, V as TraceMode, e as convertUrlToRelative, d as setVisibilityWithDelay, W as speakIcon, o as executeActions, O as triggerNextContainer, L as LidoContainer, k as parseProp, h, j as Host, X as fingerUrl } from './p-d0131159.js';
+import { p as proxyCustomElement, H, W as TraceMode, e as convertUrlToRelative, d as setVisibilityWithDelay, X as speakIcon, o as executeActions, J as triggerNextContainer, L as LidoContainer, k as parseProp, h, j as Host, Y as fingerUrl } from './p-511377d2.js';
 
 const lidoTraceCss = ":host{display:block;position:relative}#lido-svgContainer{display:flex;justify-content:center;align-items:center;overflow:hidden}svg{width:100%;height:100%;touch-action:none}#lido-draggableCircle{cursor:pointer;fill:#CF1565;transition:fill 0.2s, r 0.2s}.lido-blindTracing{stroke:none !important}.lido-blindFreeTrace{stroke:none !important}.lido-hovered{cursor:grab;fill:darkred}#lido-controls{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:space-between;padding:10px;background-color:#f0f0f0;border-top:1px solid #ccc}button{padding:10px;font-size:16px}@media (max-width: 600px){button{padding:8px;font-size:14px}}.lido-trace-path-green{}.lido-flow-indicator{stroke:blue;stroke-width:2;stroke-dasharray:6, 6;fill:none}.lido-trace{height:700px;width:700px;z-index:1;justify-items:center;align-content:center}.trace-animate{animation:trace-bounce 0.5s}@keyframes trace-bounce{0%{transform:scale(1)}30%{transform:scale(1.05)}60%{transform:scale(0.95)}100%{transform:scale(1)}}";
 const LidoTraceStyle0 = lidoTraceCss;
@@ -36,6 +36,7 @@ const LidoTrace = /*@__PURE__*/ proxyCustomElement(class LidoTrace extends H {
         this.fileIndex = -1;
         this.isDragging = false;
         this.activePointerId = null;
+        this.freeTraceUpdateCounter = 0;
         this.idleTimer = null;
         this.fingerImg = null;
     }
@@ -52,8 +53,8 @@ const LidoTrace = /*@__PURE__*/ proxyCustomElement(class LidoTrace extends H {
             circle: null,
             paths: [],
             svg: null,
-            proximityThreshold: 100, // General proximity threshold
-            freeTraceProximityThreshold: 50, // Reduced proximity threshold for free trace
+            proximityThreshold: 375, // Increased general proximity threshold (was 100)
+            freeTraceProximityThreshold: 350, // Increased proximity for free trace (was 50)
             rafId: null,
             pointerMoveEvent: null,
             activePointerId: null,
@@ -389,7 +390,7 @@ const LidoTrace = /*@__PURE__*/ proxyCustomElement(class LidoTrace extends H {
     }
     // Modified handlePointerMove function
     handlePointerMove(state) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e, _f;
         if (!state.isDragging)
             return;
         if (!state.circle || !state.paths || state.paths.length === 0)
@@ -401,6 +402,15 @@ const LidoTrace = /*@__PURE__*/ proxyCustomElement(class LidoTrace extends H {
             x: parseFloat(state.circle.getAttribute('cx')),
             y: parseFloat(state.circle.getAttribute('cy')),
         };
+        // Only update if pointer moved a minimum distance (to reduce unnecessary updates)
+        const MOVE_THRESHOLD = 1; // px
+        if (state.lastPointerPos) {
+            const dx = pointerPos.x - state.lastPointerPos.x;
+            const dy = pointerPos.y - state.lastPointerPos.y;
+            if (dx * dx + dy * dy < MOVE_THRESHOLD * MOVE_THRESHOLD) {
+                return;
+            }
+        }
         const currentPath = state.paths[state.currentPathIndex];
         if (!currentPath) {
             console.error('No valid path found at the current index');
@@ -428,48 +438,76 @@ const LidoTrace = /*@__PURE__*/ proxyCustomElement(class LidoTrace extends H {
         }
         // For free trace mode and blind free trace mode, allow free drawing only if within the reduced proximity threshold
         if (state.mode === TraceMode.FreeTrace || state.mode === TraceMode.BlindFreeTrace) {
+            // Throttle: Only update every 2nd event (for reducing excessive dom updates)
+            this.freeTraceUpdateCounter = (this.freeTraceUpdateCounter || 0) + 1;
+            if (this.freeTraceUpdateCounter % 2 !== 0) {
+                return;
+            }
             // Initialize the currentFreePath array if it's not created
             if (!state.currentFreePath) {
                 state.currentFreePath = [];
             }
-            // Create a new path element if it's the first trace for the current path index
+            // Create a new polyline element if it's the first trace for the current path index
             if (!state.currentFreePath[state.currentPathIndex]) {
-                const newPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-                // newPath.setAttribute('stroke', 'green');
+                const newPolyline = document.createElementNS('http://www.w3.org/2000/svg', 'polyline');
                 const strokeWidth = state.paths[state.currentPathIndex].style['stroke-width'] || state.paths[state.currentPathIndex].getAttribute('stroke-width');
-                newPath.setAttribute('stroke-width', strokeWidth);
-                newPath.setAttribute('fill', 'none');
-                newPath.setAttribute('stroke-linecap', 'round');
-                newPath.setAttribute('stroke', 'lightgreen');
-                // Start the new path at the current pointer position
-                newPath.setAttribute('d', `M${pointerPos.x},${pointerPos.y}`);
-                (_a = state.svg) === null || _a === void 0 ? void 0 : _a.appendChild(newPath);
-                state.currentFreePath[state.currentPathIndex] = newPath;
+                newPolyline.setAttribute('stroke-width', strokeWidth);
+                newPolyline.setAttribute('fill', 'none');
+                newPolyline.setAttribute('stroke-linecap', 'round');
+                newPolyline.setAttribute('stroke', 'lightgreen');
+                newPolyline.setAttribute('points', `${pointerPos.x},${pointerPos.y}`);
+                (_a = state.svg) === null || _a === void 0 ? void 0 : _a.appendChild(newPolyline);
+                state.currentFreePath[state.currentPathIndex] = newPolyline;
+                // Store points array for this polyline
+                state.currentFreePolylinePoints = state.currentFreePolylinePoints || [];
+                state.currentFreePolylinePoints[state.currentPathIndex] = [
+                    { x: pointerPos.x, y: pointerPos.y }
+                ];
                 // Reset lastPointerPos for the new path
                 state.lastPointerPos = pointerPos;
+                // Add a points counter to limit path growth
+                state.freeTracePointsCount = 1;
             }
-            // Get the previous position to draw a smooth curve
-            const previousPos = state.lastPointerPos || pointerPos;
-            // Create a quadratic curve from the previous point to the current point
-            const newPathData = state.currentFreePath[state.currentPathIndex].getAttribute('d');
-            const midPointX = (previousPos.x + pointerPos.x) / 2;
-            const midPointY = (previousPos.y + pointerPos.y) / 2;
-            const updatedPathData = `${newPathData} Q ${previousPos.x},${previousPos.y} ${midPointX},${midPointY}`;
-            // Update the path's 'd' attribute with the new curve
-            state.currentFreePath[state.currentPathIndex].setAttribute('d', updatedPathData);
+            // Limit the number of points in the free trace path for performance
+            const MAX_FREE_TRACE_POINTS = 10;
+            state.freeTracePointsCount = (state.freeTracePointsCount || 1) + 1;
+            if (state.freeTracePointsCount > MAX_FREE_TRACE_POINTS) {
+                // If limit reached, skip adding more points
+                return;
+            }
+            // Add the new point to the polyline's points array
+            state.currentFreePolylinePoints = state.currentFreePolylinePoints || [];
+            let pointsArr = state.currentFreePolylinePoints[state.currentPathIndex] || [];
+            pointsArr.push({ x: pointerPos.x, y: pointerPos.y });
+            state.currentFreePolylinePoints[state.currentPathIndex] = pointsArr;
+            // Update the polyline's points attribute
+            const pointsStr = pointsArr.map(pt => `${pt.x},${pt.y}`).join(' ');
+            state.currentFreePath[state.currentPathIndex].setAttribute('points', pointsStr);
             // Move the draggable circle with the freehand trace
             state.circle.setAttribute('cx', pointerPos.x.toString());
             state.circle.setAttribute('cy', pointerPos.y.toString());
-            // Make sure the red dot (circle) is always on top
-            (_b = state.svg) === null || _b === void 0 ? void 0 : _b.appendChild(state.circle); // This moves the circle to the last child, making it the topmost
+            // Only re-append if not already children list
+            const childNodes = (_b = state.svg) === null || _b === void 0 ? void 0 : _b.childNodes;
+            let circleFound = false;
+            for (let i = 0; i < ((childNodes === null || childNodes === void 0 ? void 0 : childNodes.length) || 0); i++) {
+                const child = childNodes === null || childNodes === void 0 ? void 0 : childNodes.item(i);
+                if (child && child.tagName === 'circle') {
+                    circleFound = true;
+                    break; // No need to continue once found
+                }
+            }
+            // If not found, append the circle
+            if (!circleFound && state.circle) {
+                (_c = state.svg) === null || _c === void 0 ? void 0 : _c.appendChild(state.circle);
+            }
             // Update the last pointer position
             state.lastPointerPos = pointerPos;
-            const currentPathLength = currentPath.getTotalLength();
-            const distanceToEnd = currentPathLength - closestPoint.length;
-            // If close to the end of the path, move to the next path
-            if (distanceToEnd < 5) {
+            // For polyline, estimate the end by number of points (not path length)
+            if (pointsArr.length >= MAX_FREE_TRACE_POINTS) {
                 this.moveToNextPath(state);
                 state.currentFreePath[state.currentPathIndex] = null; // Reset free path for next path
+                state.currentFreePolylinePoints[state.currentPathIndex] = [];
+                state.freeTracePointsCount = 0;
             }
             // this.resetIdleTimer(state); // ← keep timer alive
             return; // Exit early since we're in free trace or blind free trace mode
@@ -477,24 +515,57 @@ const LidoTrace = /*@__PURE__*/ proxyCustomElement(class LidoTrace extends H {
         // In normal modes, allow movement and drawing only within the general proximity threshold
         if (state.isDragging && closestPoint.length >= state.lastLength) {
             state.lastLength = closestPoint.length;
-            state.circle.setAttribute('cx', closestPoint.x.toString());
-            state.circle.setAttribute('cy', closestPoint.y.toString());
-            // Make sure the red dot (circle) is always on top
-            (_c = state.svg) === null || _c === void 0 ? void 0 : _c.appendChild(state.circle); // This moves the circle to the last child, making it the topmost
-            (_d = currentPath.greenPath) === null || _d === void 0 ? void 0 : _d.setAttribute('stroke-dashoffset', (state.totalPathLength - state.lastLength).toString());
-        }
-        // Check if the current path is completed
-        if (state.totalPathLength - 1 - state.lastLength < 5 && state.currentPathIndex < state.paths.length - 1) {
-            this.moveToNextPath(state);
-        }
-        else if (state.totalPathLength - 1 - state.lastLength < 5 && state.currentPathIndex === state.paths.length - 1) {
-            //   this.loadAnotherSVG(state, true);
-            this.moveToNextContainer();
+            // Only update the circle if it moved enough
+            if (Math.abs(closestPoint.x - circlePos.x) > MOVE_THRESHOLD || Math.abs(closestPoint.y - circlePos.y) > MOVE_THRESHOLD) {
+                state.circle.setAttribute('cx', closestPoint.x.toString());
+                state.circle.setAttribute('cy', closestPoint.y.toString());
+            }
+            // Only re-append if not already children list
+            const childNodes = (_d = state.svg) === null || _d === void 0 ? void 0 : _d.childNodes;
+            let circleFound = false;
+            for (let i = 0; i < ((childNodes === null || childNodes === void 0 ? void 0 : childNodes.length) || 0); i++) {
+                const child = childNodes === null || childNodes === void 0 ? void 0 : childNodes.item(i);
+                if (child && child.tagName === 'circle') {
+                    circleFound = true;
+                    break; // No need to continue once found
+                }
+            }
+            // If not found, append the circle
+            if (!circleFound && state.circle) {
+                (_e = state.svg) === null || _e === void 0 ? void 0 : _e.appendChild(state.circle);
+            }
+            (_f = currentPath.greenPath) === null || _f === void 0 ? void 0 : _f.setAttribute('stroke-dashoffset', (state.totalPathLength - state.lastLength).toString());
+            // Completion logic for closed paths: only allow completion if almost all points are traced
+            const COMPLETION_THRESHOLD = 0.90; // 90% of the path must be traced
+            let percentComplete = state.lastLength / state.totalPathLength;
+            let startPoint = currentPath.getPointAtLength(0);
+            let endPoint = currentPath.getPointAtLength(currentPath.getTotalLength());
+            let pathIsClosed = this.getDistanceSquared(startPoint, endPoint) < 200; // threshold for overlap
+            if (pathIsClosed && state.totalPathLength > 50) {
+                if (percentComplete >= COMPLETION_THRESHOLD) {
+                    if (state.currentPathIndex < state.paths.length - 1) {
+                        this.moveToNextPath(state);
+                    }
+                    else if (state.currentPathIndex === state.paths.length - 1) {
+                        this.moveToNextContainer();
+                    }
+                }
+            }
+            else {
+                // For open paths, allow completion if near the end
+                if (state.totalPathLength - 1 - state.lastLength < 5 && state.currentPathIndex < state.paths.length - 1) {
+                    this.moveToNextPath(state);
+                }
+                else if (state.totalPathLength - 1 - state.lastLength < 5 && state.currentPathIndex === state.paths.length - 1) {
+                    this.moveToNextContainer();
+                }
+            }
         }
         // this.resetIdleTimer(state); // ← keep timer alive
     }
     // Move to the next container after completing the current SVG
     async moveToNextContainer() {
+        this.isDragging = false;
         if (this.moving)
             return; // Prevent multiple calls
         this.moving = true; // Set moving to true to prevent re-entrance
@@ -513,9 +584,12 @@ const LidoTrace = /*@__PURE__*/ proxyCustomElement(class LidoTrace extends H {
             this.moving = false;
             return;
         }
+        console.log('onCorrect:', this.onCorrect);
+        console.log('el :', this.el);
         if (this.el && this.onCorrect) {
             await executeActions(this.onCorrect, this.el);
         }
+        console.log('All SVGs completed, hiding component.');
         triggerNextContainer();
     }
     // Get the pointer position relative to the SVG
@@ -533,13 +607,13 @@ const LidoTrace = /*@__PURE__*/ proxyCustomElement(class LidoTrace extends H {
         const dy = p1.y - p2.y;
         return dx * dx + dy * dy;
     }
-    // Find the closest point on the given path to the specified point using two-pass sampling
+    // Find the closest point on the given path to the specified point using two-pass sampling (optimized)
     getClosestPointOnPath(pathNode, point) {
         const pathLength = pathNode.getTotalLength();
         let closestPoint = { x: 0, y: 0, length: 0 };
         let minDistanceSquared = Infinity;
-        // First pass: coarse sampling
-        const coarseStep = 20; // Increased step for better performance
+        // Optimized: Increase coarse steps for better performance
+        const coarseStep = 40; // was 20
         let coarseClosestPoint = { x: 0, y: 0, length: 0 };
         let coarseMinDistanceSquared = Infinity;
         for (let i = 0; i <= pathLength; i += coarseStep) {
@@ -555,7 +629,7 @@ const LidoTrace = /*@__PURE__*/ proxyCustomElement(class LidoTrace extends H {
             }
         }
         // Second pass: fine sampling around coarseClosestPoint
-        const fineStep = 2; // Increased step to reduce computations
+        const fineStep = 6; // was 2
         const searchStart = Math.max(coarseClosestPoint.length - coarseStep, 0);
         const searchEnd = Math.min(coarseClosestPoint.length + coarseStep, pathLength);
         for (let i = searchStart; i <= searchEnd; i += fineStep) {
@@ -715,7 +789,7 @@ const LidoTrace = /*@__PURE__*/ proxyCustomElement(class LidoTrace extends H {
         };
     }
     render() {
-        return (h(Host, { key: 'b562e07d98a06f422ce5b8ca1d08f9c4307a313c', 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: 'fc2cb8355a26e5b483c24c59641bd20fa37e853b', style: this.style, id: "lido-svgContainer" })));
+        return (h(Host, { key: '3f12119394502b6750874aaa50f43bf42e9f63cc', 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: '4fddd90d12251c4020006690f8c769ab452c8f6a', style: this.style, id: "lido-svgContainer" })));
     }
     static get assetsDirs() { return ["svg", "images"]; }
     get el() { return this; }
@@ -754,6 +828,7 @@ const LidoTrace = /*@__PURE__*/ proxyCustomElement(class LidoTrace extends H {
         "fileIndex": [32],
         "isDragging": [32],
         "activePointerId": [32],
+        "freeTraceUpdateCounter": [32],
         "idleTimer": [32],
         "fingerImg": [32]
     }, undefined, {

package/dist/components/{p-6be6c5eb.js → p-3f0e4436.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, i as initEventsForElement, q as handlingChildElements, r as attachSpeakIcon, e as convertUrlToRelative, k as parseProp, h, j as Host } from './p-d0131159.js';
+import { p as proxyCustomElement, H, i as initEventsForElement, q as handlingChildElements, r as attachSpeakIcon, e as convertUrlToRelative, k as parseProp, h, j as Host } from './p-511377d2.js';
 
 const lidoColCss = ".lido-col{top:var(--y, 0);left:var(--x, 0);height:var(--height, 100%);width:var(--width, 100%);background-color:var(--bgColor, #eeeeee);padding:15px;border-radius:10px;display:flex;justify-content:space-around;flex-direction:column;align-items:center}.lido-col>*{}";
 const LidoColStyle0 = lidoColCss;
@@ -80,7 +80,7 @@ const LidoCol = /*@__PURE__*/ proxyCustomElement(class LidoCol extends H {
         };
     }
     render() {
-        return (h(Host, { key: 'fe37cc1654101a3d347e2cef52872467ae078139', id: this.id, class: "lido-col", type: this.type, "tab-index": this.tabIndex, value: this.value, style: this.style, minDrops: this.minDrops, maxDrops: this.maxDrops, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, h("slot", { key: 'b27f20f62c30398c343d7aa472a0a211af5eed0e' })));
+        return (h(Host, { key: '7845d3364dd13cb42959f67610254ee892119c39', id: this.id, class: "lido-col", type: this.type, "tab-index": this.tabIndex, value: this.value, style: this.style, minDrops: this.minDrops, maxDrops: this.maxDrops, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, h("slot", { key: '09a68a30534c5ea83d7166acd720b4b8f23f494e' })));
     }
     get el() { return this; }
     static get style() { return LidoColStyle0; }