function on_down(e) {
    if (e.button === 1) {
        const event = undo_event();
        queue_event(event);
        return;
    }

    if (e.button != 0) {
        return;
    }

    const x = Math.round(e.clientX + window.scrollX);
    const y = Math.round(e.clientY + window.scrollY);

    storage.state.drawing = true;

    if (storage.ctx1.lineWidth !== storage.cursor.width) {
        storage.ctx1.lineWidth = storage.cursor.width;
    }

    storage.cursor.x = x;
    storage.cursor.y = y;

    const predraw = predraw_event(x, y);
    storage.current_stroke.push(predraw);

    fire_event(predraw);
}

function on_move(e) {
    const last_x = storage.cursor.x;
    const last_y = storage.cursor.y;

    const x = storage.cursor.x = Math.round(e.clientX + window.scrollX);
    const y = storage.cursor.y = Math.round(e.clientY + window.scrollY);
    const width = storage.cursor.width;

    elements.cursor.style.transform = `translate3D(${Math.round(x - width / 2)}px, ${Math.round(y - width / 2)}px, 0)`;

    if (storage.state.drawing) {
        storage.ctx1.beginPath();

        storage.ctx1.moveTo(last_x, last_y);
        storage.ctx1.lineTo(x, y);
        
        storage.ctx1.stroke();

        const predraw = predraw_event(x, y);
        storage.current_stroke.push(predraw);

        fire_event(predraw);
    }
}

async function on_up(e) {
    if (e.button != 0) {
        return;
    }

    storage.state.drawing = false;
    
    const event = stroke_event();
    storage.current_stroke = [];
    await queue_event(event);
}

function on_keydown(e) {
    if (e.code === 'Space' && !storage.state.drawing) {
        elements.cursor.classList.add('dhide');
        elements.canvas0.classList.add('moving');
        storage.state.moving = true;
    }
}

function on_keyup(e) {
    if (e.code === 'Space' && storage.state.moving) {
        elements.cursor.classList.remove('dhide');
        elements.canvas0.classList.remove('moving');
        storage.state.moving = false;
    }   
}

function on_leave(e) {
    if (storage.state.drawing) {
        on_up(e);
        storage.state.drawing = false;
        return;
    }

    if (storage.state.moving) {
        elements.cursor.classList.remove('dhide');
        elements.canvas0.classList.remove('moving');
        storage.state.moving = false;
        return;
    }
}