From fb66d005ba4a76f13c19cfaaeb15093c0b37d8b4 Mon Sep 17 00:00:00 2001 From: Jerry Date: Tue, 25 Feb 2025 19:14:02 -0500 Subject: [PATCH] Temp fix for desktop --- app/scout/routes.py | 2 +- app/static/js/scout/add.js | 14 +++-- app/static/js/scout/edit.js | 74 +++++++++++++++++++--- app/static/js/scout/list.js | 120 +++++++++++++++++++++++++++++------- 4 files changed, 171 insertions(+), 39 deletions(-) diff --git a/app/scout/routes.py b/app/scout/routes.py index 21a3f99..a3127e6 100644 --- a/app/scout/routes.py +++ b/app/scout/routes.py @@ -38,7 +38,7 @@ def add(): if "auto_path" in data: try: if isinstance(data["auto_path"], str): - if data["auto_path"].strip(): # If not empty string + if data["auto_path"].strip(): data["auto_path"] = json.loads(data["auto_path"]) else: data["auto_path"] = [] diff --git a/app/static/js/scout/add.js b/app/static/js/scout/add.js index f5806c2..5f8a98d 100644 --- a/app/static/js/scout/add.js +++ b/app/static/js/scout/add.js @@ -19,7 +19,6 @@ let paths = []; function initCanvas() { canvas = document.getElementById('autoPath'); if (!canvas) { - console.error('Canvas element not found'); return; } @@ -39,7 +38,6 @@ function initCanvas() { canvas.addEventListener('touchstart', handleTouchStart, { passive: false }); canvas.addEventListener('touchmove', handleTouchMove, { passive: false }); canvas.addEventListener('touchend', handleTouchEnd); - } function resizeCanvas() { @@ -111,7 +109,6 @@ function handleTouchEnd(e) { } function getPointFromEvent(e) { - const rect = canvas.getBoundingClientRect(); return coordSystem.getDrawCoords(e.clientX, e.clientY); } @@ -127,13 +124,19 @@ function redrawPaths() { function updateHiddenInput() { const input = document.getElementById('auto_path'); - input.value = paths.length > 0 ? JSON.stringify(paths) : JSON.stringify([]); + const pathData = { + paths: paths, + canvasWidth: canvas.width, + canvasHeight: canvas.height, + timestamp: new Date().toISOString() + }; + input.value = JSON.stringify(pathData); } function undoLastPath() { paths.pop(); redrawPaths(); - updateHiddenInput();w + updateHiddenInput(); } function clearCanvas() { @@ -235,7 +238,6 @@ document.addEventListener('DOMContentLoaded', function() { form.submit(); } catch (error) { - console.error('Error checking team:', error); form.submit(); } }); diff --git a/app/static/js/scout/edit.js b/app/static/js/scout/edit.js index c69885b..49d8fe6 100644 --- a/app/static/js/scout/edit.js +++ b/app/static/js/scout/edit.js @@ -32,23 +32,70 @@ function initCanvas() { if (pathDataInput && pathDataInput.value) { try { const rawValue = pathDataInput.value; + let parsedData; + + console.log('Loading path data:', rawValue); + // First, try parsing directly try { - paths = JSON.parse(rawValue); - } catch { + parsedData = JSON.parse(rawValue); + console.log('Direct parse successful:', parsedData); + } catch (err) { + console.log('Direct parse failed, trying cleanup:', err); // If direct parsing fails, try cleaning the string const cleanValue = rawValue.replace(/^"(.*)"$/, '$1'); const unescapedValue = cleanValue.replace(/\\"/g, '"'); - paths = JSON.parse(unescapedValue); + parsedData = JSON.parse(unescapedValue); + console.log('Parse after cleanup:', parsedData); } - // Ensure paths is an array of arrays - if (!Array.isArray(paths)) { - paths = [[paths]]; - } else if (!Array.isArray(paths[0])) { - paths = [paths]; + // Check if we have the new format with metadata + if (parsedData && typeof parsedData === 'object' && 'paths' in parsedData) { + console.log('Using new format with metadata'); + const { paths: loadedPaths, canvasWidth, canvasHeight } = parsedData; + + // Scale points if canvas dimensions have changed + if (canvasWidth && canvasHeight) { + // Calculate scaling factors based on the current canvas dimensions + const scaleX = canvas.width / canvasWidth; + const scaleY = canvas.height / canvasHeight; + + console.log('Scaling factors:', { + originalWidth: canvasWidth, + originalHeight: canvasHeight, + currentWidth: canvas.width, + currentHeight: canvas.height, + scaleX: scaleX, + scaleY: scaleY + }); + + // Reset the coordinate system first to ensure clean state + coordSystem.resetView(); + + // Scale the points based on the ratio of dimensions + paths = loadedPaths.map(path => + path.map(point => ({ + x: (point.x - 23) * scaleX, // WONTFIX: Added offset to x + y: (point.y - 1) * scaleY // WONTFIX: Added offset to y + })) + ); + } else { + paths = loadedPaths; + } + } else { + console.log('Using legacy format'); + // Handle legacy format (just an array of paths) + if (!Array.isArray(parsedData)) { + paths = [[parsedData]]; + } else if (!Array.isArray(parsedData[0])) { + paths = [parsedData]; + } else { + paths = parsedData; + } } + console.log('Pre-validation paths:', paths); + // Validate path structure paths = paths.map(path => { if (Array.isArray(path)) { @@ -65,6 +112,8 @@ function initCanvas() { return []; }).filter(path => path.length > 0); + console.log('Final validated paths:', paths); + redrawPaths(); } catch (error) { console.error('Error parsing path data:', error); @@ -142,7 +191,6 @@ function stopDrawing(e) { } function getPointFromEvent(e) { - const rect = canvas.getBoundingClientRect(); return coordSystem.getDrawCoords(e.clientX, e.clientY); } @@ -158,7 +206,13 @@ function redrawPaths() { function updateHiddenInput() { const input = document.getElementById('auto_path'); - input.value = JSON.stringify(paths); + const pathData = { + paths: paths, + canvasWidth: canvas.width, + canvasHeight: canvas.height, + timestamp: new Date().toISOString() + }; + input.value = JSON.stringify(pathData); } function undoLastPath() { diff --git a/app/static/js/scout/list.js b/app/static/js/scout/list.js index 620d2f2..c904cd5 100644 --- a/app/static/js/scout/list.js +++ b/app/static/js/scout/list.js @@ -33,40 +33,116 @@ function resizeModalCanvas() { function redrawPaths() { if (!modalCoordSystem || !currentPathData) { - return; + console.log('Missing required data:', { modalCoordSystem: !!modalCoordSystem, currentPathData: !!currentPathData }); + return; } modalCoordSystem.clear(); + console.log('Initial currentPathData:', currentPathData); + + let parsedData; - let paths = currentPathData; + // Parse the path data if it's a string if (typeof currentPathData === 'string') { try { - paths = JSON.parse(currentPathData); + // First, try parsing directly + try { + parsedData = JSON.parse(currentPathData); + console.log('Direct parse successful:', parsedData); + } catch (err) { + console.log('Direct parse failed, trying cleanup:', err); + // If direct parsing fails, try cleaning the string + const cleanValue = currentPathData.replace(/^"(.*)"$/, '$1'); + const unescapedValue = cleanValue.replace(/\\"/g, '"'); + parsedData = JSON.parse(unescapedValue); + console.log('Parse after cleanup:', parsedData); + } } catch (e) { - console.error('Error parsing path data:', e); + console.error('All parsing attempts failed:', e); return; } + } else { + parsedData = currentPathData; } - if (Array.isArray(paths)) { - paths.forEach(path => { - if (Array.isArray(path) && path.length > 0) { - const formattedPath = path.map(point => { - if (typeof point === 'object' && 'x' in point && 'y' in point) { - return { - x: (point.x / 1000) * modalCanvas.width, - y: (point.y / 300) * modalCanvas.height - }; - } - return null; - }).filter(point => point !== null); - - if (formattedPath.length > 0) { - modalCoordSystem.drawPath(formattedPath, '#3b82f6', 3); - } - } - }); + let paths = []; + console.log('Canvas dimensions:', { width: modalCanvas.width, height: modalCanvas.height }); + + // Check if we have the new format with metadata + if (parsedData && typeof parsedData === 'object' && 'paths' in parsedData) { + console.log('Using new format with metadata'); + const { paths: loadedPaths, canvasWidth, canvasHeight } = parsedData; + + // Scale points if canvas dimensions have changed + if (canvasWidth && canvasHeight) { + // Calculate scaling factors based on the current canvas dimensions + const scaleX = modalCanvas.width / canvasWidth; + const scaleY = modalCanvas.height / canvasHeight; + + console.log('Scaling factors:', { + originalWidth: canvasWidth, + originalHeight: canvasHeight, + currentWidth: modalCanvas.width, + currentHeight: modalCanvas.height, + scaleX: scaleX, + scaleY: scaleY + }); + + // Reset the coordinate system first to ensure clean state + modalCoordSystem.resetView(); + + // Scale the points directly based on the ratio of current to original dimensions + paths = loadedPaths.map(path => + path.map(point => ({ + x: (point.x + 145) * scaleX, // WONTFIX: Added offset to x + y: (point.y - 1) * scaleY // WONTFIX: Added offset to y + })) + ); + } else { + paths = loadedPaths; + } + } else { + console.log('Using legacy format'); + // Handle legacy format (just an array of paths) + if (!Array.isArray(parsedData)) { + paths = [[parsedData]]; + } else if (!Array.isArray(parsedData[0])) { + paths = [parsedData]; + } else { + paths = parsedData; + } } + + console.log('Pre-validation paths:', paths); + + // Validate path structure + paths = paths.map(path => { + if (Array.isArray(path)) { + return path.map(point => { + if (typeof point === 'object' && 'x' in point && 'y' in point) { + return { + x: parseFloat(point.x), + y: parseFloat(point.y) + }; + } + return null; + }).filter(point => point !== null); + } + return []; + }).filter(path => path.length > 0); + + console.log('Final validated paths:', paths); + + // Reset zoom level to ensure consistent display + modalCoordSystem.resetView(); + + // Draw each path + paths.forEach((path, index) => { + if (path.length > 0) { + console.log(`Drawing path ${index}:`, path); + modalCoordSystem.drawPath(path, '#3b82f6', 3); + } + }); } function zoomIn(event) {