app/static/scripts/globalScripts.js
// add grab movement to tree_container when on a desktop
add grab movement to tree_container when on a desktop
add grab movement to tree_container when on a desktop
function panning_movement() {
    let pos = { top: 0, left: 0, x: 0, y: 0 };
    const mouseDownHandler = function(e) {
        if(e.target.id == 'tree_container' || e.target.className == 'leaf') {
            tree_container.style.cursor = 'grabbing';
            tree_container.style.userSelect = 'none';
            pos = {
                left: tree_container.scrollLeft,
                top: tree_container.scrollTop,
                x: e.clientX,
                y: e.clientY,
            };
            document.addEventListener('mousemove', mouseMoveHandler);
            document.addEventListener('mouseup', mouseUpHandler);
        }
    };
    const mouseMoveHandler = function(e) {
        const dx = e.clientX - pos.x;
        const dy = e.clientY - pos.y;
        tree_container.scrollTop = pos.top - dy;
        tree_container.scrollLeft = pos.left - dx;
    };
    const mouseUpHandler = function() {
        tree_container.style.cursor = 'grab';
        tree_container.style.removeProperty('user-select');
        document.removeEventListener('mousemove', mouseMoveHandler);
        document.removeEventListener('mouseup', mouseUpHandler);
    };
    document.addEventListener('mousedown', mouseDownHandler);
}
function panning_movement ( ) { let pos = { top : 0 , left : 0 , x : 0 , y : 0 } ; const mouseDownHandler = function ( e ) { if ( e . target . id == 'tree_container' || e . target . className == 'leaf' ) { tree_container . style . cursor = 'grabbing' ; tree_container . style . userSelect = 'none' ; pos = { left : tree_container . scrollLeft , top : tree_container . scrollTop , x : e . clientX , y : e . clientY , } ; document . addEventListener ( 'mousemove' , mouseMoveHandler ) ; document . addEventListener ( 'mouseup' , mouseUpHandler ) ; } } ; const mouseMoveHandler = function ( e ) { const dx = e . clientX - pos . x ; const dy = e . clientY - pos . y ; tree_container . scrollTop = pos . top - dy ; tree_container . scrollLeft = pos . left - dx ; } ; const mouseUpHandler = function ( ) { tree_container . style . cursor = 'grab' ; tree_container . style . removeProperty ( 'user-select' ) ; document . removeEventListener ( 'mousemove' , mouseMoveHandler ) ; document . removeEventListener ( 'mouseup' , mouseUpHandler ) ; } ; document . addEventListener ( 'mousedown' , mouseDownHandler ) ; }
add grab movement to tree_container when on a desktop
add grab movement to tree_container when on a desktop
//position object with the nec properties //console.log(e); // makes sure mouse down is in the tree container // Change the cursor and prevent user from selecting the text // The current scroll  // Get the current mouse position // How far the mouse has been moved // Scroll the element