Track motion of 360 image in Storyline

// Variables to track movement directions
var movedUp = false;
var movedLeft = false;
var movedDown = false;
var movedRight = false;

// Variables to track initial and current positions
var startX = 0, startY = 0;
var currentX = 0, currentY = 0;
var isDragging = false;

// Function to handle keydown events
function handleKeyDown(event) {
    switch(event.key) {
        case 'w':
        case 'ArrowUp':
            movedUp = true;
            movedLeft = false;
            movedDown = false;
            movedRight = false;
            break;
        case 'a':
        case 'ArrowLeft':
            movedUp = false;
            movedLeft = true;
            movedDown = false;
            movedRight = false;
            break;
        case 's':
        case 'ArrowDown':
            movedUp = false;
            movedLeft = false;
            movedDown = true;
            movedRight = false;
            break;
        case 'd':
        case 'ArrowRight':
            movedUp = false;
            movedLeft = false;
            movedDown = false;
            movedRight = true;
            break;
        default:
            break;
    }
    logMovement();
}

// Function to handle mouse and touch start events
function handleStart(event) {
    isDragging = true;
    startX = event.type === 'mousedown' ? event.clientX : event.touches[0].clientX;
    startY = event.type === 'mousedown' ? event.clientY : event.touches[0].clientY;
}

// Function to handle mouse and touch move events
function handleMove(event) {
    if (!isDragging) return;

    currentX = event.type === 'mousemove' ? event.clientX : event.touches[0].clientX;
    currentY = event.type === 'mousemove' ? event.clientY : event.touches[0].clientY;

    var deltaX = currentX - startX;
    var deltaY = currentY - startY;

    if (Math.abs(deltaX) > Math.abs(deltaY)) {
        if (deltaX > 0) {
            movedRight = true;
            movedLeft = false;
            movedUp = false;
            movedDown = false;
        } else {
            movedRight = false;
            movedLeft = true;
            movedUp = false;
            movedDown = false;
        }
    } else {
        if (deltaY > 0) {
            movedRight = false;
            movedLeft = false;
            movedUp = false;
            movedDown = true;
        } else {
            movedRight = false;
            movedLeft = false;
            movedUp = true;
            movedDown = false;
        }
    }
    logMovement();
}

// Function to handle mouse and touch end events
function handleEnd(event) {
    isDragging = false;
}

// Function to log movement status
function logMovement() {
    console.log(`Moved up: ${movedUp}, left: ${movedLeft}, down: ${movedDown}, right: ${movedRight}`);
    var player = GetPlayer();
    player.SetVar("MovedUp", movedUp);
    player.SetVar("MovedLeft", movedLeft);
    player.SetVar("MovedDown", movedDown);
    player.SetVar("MovedRight", movedRight);
}

// Add event listeners for keydown events
document.addEventListener('keydown', handleKeyDown);

// Add event listeners for mouse events
document.addEventListener('mousedown', handleStart);
document.addEventListener('mousemove', handleMove);
document.addEventListener('mouseup', handleEnd);

// Add event listeners for touch events
document.addEventListener('touchstart', handleStart);
document.addEventListener('touchmove', handleMove);
document.addEventListener('touchend', handleEnd);