desk2/client/index.js

document.addEventListener('DOMContentLoaded', main);

const config = {
    ws_url: 'wss://desk.local/ws/', 
    ping_url: 'https://desk.local/api/ping',
    image_url: 'https://desk.local/images/',
    sync_timeout: 1000,
    ws_reconnect_timeout: 2000,
    brush_preview_timeout: 1000,
    second_finger_timeout: 500,
    buffer_first_touchmoves: 5,
    debug_print: true,
    min_zoom: 0.05,
    max_zoom: 10.0,
    initial_offline_timeout: 1000,
    default_color: 0x00,
    default_width: 8,
    bytes_per_point: 8 * 4,
    initial_static_bytes: 4096 * 16,
    initial_dynamic_bytes: 4096,
    frametime_window_size: 100,
};

const EVENT = Object.freeze({
    PREDRAW: 10,
    SET_COLOR: 11,
    SET_WIDTH: 12,

    STROKE: 20,
    RULER: 21, /* gets re-written with EVENT.STROKE before sending to server */

    UNDO: 30,
    REDO: 31,

    IMAGE: 40,
    IMAGE_MOVE: 41,

    ERASER: 50,
});

const MESSAGE = Object.freeze({
    INIT: 100,
    SYN: 101,
    ACK: 102,
    FULL: 103,
    FIRE: 104,
    JOIN: 105,
});

function main() {
    const state = {
        'online': false,
        'me': null,

        'canvas': {
            'offset': { 'x': 0, 'y': 0 },
            'zoom': 1.0,
        },

        'cursor': {
            'x': 0,
            'y': 0,
        },

        'sn': 0,
        'lsn': 0,
        'server_lsn': 0,

        'touch': {
            'moves': 0,
            'drawing': false,
            'moving': false,
            'erasing': false,
            'waiting_for_second_finger': false,
            'first_finger_position': null,
            'second_finger_position': null,
            'buffered': [],
            'ids': [],
        },

        'moving': false,
        'drawing': false,
        'spacedown': false,

        'moving_image': null,

        'current_strokes': {},

        'queue': [],
        'events': [],

        'tools': {
            'active': null,
            'active_element': null,
        },

        'colors': {
            'active_element': null,
        },

        'timers': {
            'hide_preview': null,
            'offline_toast': null,
            'raf': false,
        },

        'players': {},
    };

    const context = {
        'canvas': null,
        'gl': null,
        'debug_mode': false,
        'frametime_window': [],
        'frametime_window_head': 0,

        'need_static_upload': true,
        'need_dynamic_upload': false,

        'programs': {},
        'buffers': {},
        'locations': {},
        'textures': {},
        
        'static_serializer': serializer_create(config.initial_static_bytes),
        'dynamic_serializer': serializer_create(config.initial_dynamic_bytes),

        'bgcolor': {'r': 1.0, 'g': 1.0, 'b': 1.0},

        'active_image': null,
    };

    const url = new URL(window.location.href);
    const parts = url.pathname.split('/');
    
    state.desk_id = parts.length > 0 ? parts[parts.length - 1] : 0;

    init_webgl(state, context);
    init_listeners(state, context);
    init_tools(state);
    
    ws_connect(state, context, true);

    schedule_draw(state, context);

    state.timers.offline_toast = setTimeout(() => ui_offline(), config.initial_offline_timeout);
}