desk2/client/index.js

// NEXT: pan with m3, place dot, cursor size and color, YELLOW and gray

document.addEventListener('DOMContentLoaded', main);

const config = {
    ws_url: 'wss://192.168.100.2/ws/', 
    ping_url: 'https://192.168.100.2/api/ping',
    image_url: 'https://192.168.100.2/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,
    CLEAR: 13, // clear predraw events from me (because I started a pan instead of drawing)

    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,
});

// Source:
// https://stackoverflow.com/a/18473154
function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
  var angleInRadians = (angleInDegrees-90) * Math.PI / 180.0;

  return {
    x: centerX + (radius * Math.cos(angleInRadians)),
    y: centerY + (radius * Math.sin(angleInRadians))
  };
}

function describeArc(x, y, radius, startAngle, endAngle) {
    var start = polarToCartesian(x, y, radius, endAngle);
    var end = polarToCartesian(x, y, radius, startAngle);
    
    var largeArcFlag = (Math.abs(endAngle - startAngle) % 360) <= 180 ? "0" : "1";

    var d = [
        "M", start.x, start.y, 
        "A", radius, radius, 0, largeArcFlag, 0, end.x, end.y
    ].join(" ");

    return d;       
}

let iii = 0;
let a_angel = 0;
let b_angel = 180;
let speed_a = 2;
let speed_b = 6;
let b_fast = true;

function start_spinner(state) {
    const str = describeArc(64, 64, 32, a_angel, b_angel);

    a_angel += speed_a;
    b_angel += speed_b;

    const diff = b_angel - a_angel;

    if (diff > 320) {
        speed_a = 6;
        speed_b = 2;
    } else if (diff < 40) {
        speed_a = 2;
        speed_b = 6;
    }

    // if ((speed_a === 1) && Math.abs(a_angel - b_angel) % 360 < 90) {
    //     speed_a = 3;
    //     speed_b = 1;
    // } else if (Math.abs(a_angel - b_angel) % 360 > 180) {
    //     speed_a = 1;
    //     speed_b = 3;
    // }

    document.querySelector('#spinner-path').setAttribute('d', str);

    if (!state.online) {
        window.requestAnimationFrame(() => start_spinner(state));
    } else {
        document.querySelector('.loader').classList.add('hidden');
    }
}

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': {},
        'onscreen_segments': null,
    };

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

        'static_upload_from': 0,
        'need_static_allocate': true,
        'need_static_upload': true,
        'need_dynamic_upload': false,

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

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

        'active_image': null,
    };

    start_spinner(state);

    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);
}