Sindbad~EG File Manager

/* Code to handle two-finger dragging using touch events.
This code tracks touch points and calculates deltas to move graphs.
*/

let activeTouches = []; // Array to track active touch points
let lastTouchPositions = {}; // To store the previous positions of touches
let touchTransformState = new Map(); // To track cumulative transforms
let touchScrollTimer; // Timer to detect scroll completion
let currentTouchTransform; // Transform for the current touch session

function scrollGraphsWithTouch(deltaX, deltaY, clientX, clientY) {
    // Scroll all the graphs that contain the touch points
    let k = 0; 
    firstGraphIndex = -1;
    for (let graph of graphs) {
        let graphX = parseInt(graph.getAttribute("left"), 10);
        let graphY = parseInt(graph.getAttribute("top"), 10);
        let graphWidth = parseInt(graph.getAttribute("mywidth"), 10);
        let graphHeight = parseInt(graph.getAttribute("myheight"), 10);

        if (clientX >= graphX && clientX <= graphX + graphWidth && clientY >= graphY && clientY <= graphY + graphHeight) {
            if (firstGraphIndex === -1) 
                firstGraphIndex = k;

            const elmnt = graph.querySelector('g.scrollable');
            currentTouchTransform = touchTransformState.get(elmnt) || { x: 0, y: 0 };

            // Update transform values
            currentTouchTransform.x += deltaX;
            currentTouchTransform.y += deltaY;

            // Apply the updated transform
            const transform = `translate(${currentTouchTransform.x}, ${currentTouchTransform.y})`;
            elmnt.setAttribute('transform', transform);

            // Update the touch transform state
            touchTransformState.set(elmnt, currentTouchTransform);
        }
        ++k;
    }
}

// Add touchstart event listener
svgContainer.addEventListener("touchstart", function (e) {
    if (e.touches.length === 2) {
        activeTouches = Array.from(e.touches); // Track the two touch points
        lastTouchPositions = {
            [activeTouches[0].identifier]: { x: activeTouches[0].clientX, y: activeTouches[0].clientY },
            [activeTouches[1].identifier]: { x: activeTouches[1].clientX, y: activeTouches[1].clientY },
        };
    }
});

// Add touchmove event listener
svgContainer.addEventListener("touchmove", function (e) {
    if (e.touches.length === 2 && activeTouches.length === 2) {
        e.preventDefault();

        const touch1 = e.touches[0];
        const touch2 = e.touches[1];

        const deltaX1 = touch1.clientX - lastTouchPositions[touch1.identifier].x;
        const deltaY1 = touch1.clientY - lastTouchPositions[touch1.identifier].y;
        const deltaX2 = touch2.clientX - lastTouchPositions[touch2.identifier].x;
        const deltaY2 = touch2.clientY - lastTouchPositions[touch2.identifier].y;

        const avgDeltaX = (deltaX1 + deltaX2) / 2;
        const avgDeltaY = (deltaY1 + deltaY2) / 2;

        // Update last positions
        lastTouchPositions[touch1.identifier] = { x: touch1.clientX, y: touch1.clientY };
        lastTouchPositions[touch2.identifier] = { x: touch2.clientX, y: touch2.clientY };

        // Scroll the relevant graphs
        scrollGraphsWithTouch(avgDeltaX, avgDeltaY, touch1.clientX, touch1.clientY);

        // Reset the touch completion timer
        if (touchScrollTimer) {
            clearTimeout(touchScrollTimer);
        }

        touchScrollTimer = setTimeout(() => {
            console.log("Touch scrolling completed, synchronizing with the engine");
            // Send final scroll data to the engine
            const elmnt = document.getElementById("scrollable" + firstGraphIndex);

            let deltax = currentTouchTransform.x;
            let deltay = currentTouchTransform.y;
            if (deltax === 0 && deltay === 0) return;

            // Prepare the parameter 
				let graphwidth = <?php echo($_SESSION['graphWidth']);?>;
				let height = <?php echo($_SESSION['height']);?>;
            const param = `[${firstGraphIndex},${deltax},${deltay},${graphwidth},${height}]`;  

            // Submit the form to the server
            let form = document.createElement('form');
            form.method = 'POST';
            form.action = "<?php echo ($_SERVER['PHP_SELF']); ?>";

            let input = document.createElement('input');
            input.type = 'hidden';
            input.name = 'graphMovedParam';
            input.value = param;

            form.appendChild(input);
            document.body.appendChild(form);
            form.submit();
        }, 200); // Wait 200 ms to detect touch scrolling completion
    }
});

// Add touchend event listener
svgContainer.addEventListener("touchend", function (e) {
    if (e.touches.length < 2) {
        // Reset touch tracking when less than two fingers are active
        activeTouches = [];
        lastTouchPositions = {};
    }
});