desk2/client/index.js

document.addEventListener('DOMContentLoaded', main);

const config = {
//    ws_url: 'wss://desk.some.website/ws/', 
//    ping_url: 'https://desk.some.website/api/ping',
//    image_url: 'https://desk.some.website/images/',
    ws_url: `wss://${window.location.host}/ws/`,
    ping_url: `https://${window.location.host}/api/ping`,
    image_url: `https://${window.location.host}/images/`,
    sync_timeout: 1000,
    ws_reconnect_timeout: 2000,
    brush_preview_timeout: 1000,
    second_finger_timeout: 500,
    buffer_first_touchmoves: 5,
    debug_print: false,
    zoom_delta: 0.05,
    min_zoom_level: -250,
    max_zoom_level: 100,
    initial_offline_timeout: 1000,
    default_color: 0x00,
    default_width: 8,
    bytes_per_instance: 4 * 2 + 4, // axy, stroke_id
    bytes_per_stroke: 2 * 3 + 2, // r, g, b, width
    initial_static_bytes: 4096 * 16,
    initial_dynamic_bytes: 4096,
    stroke_texture_size: 1024, // means no more than 1024^2 = 1M strokes in total (this is a LOT. HMH blackboard has like 80K)
    dynamic_stroke_texture_size: 128, // means no more than 128^2 = 16K dynamic strokes at once
    bvh_fullnode_depth: 5,
    pattern_fadeout_min: 0.3,
    pattern_fadeout_max: 0.75,
    min_pressure: 50,
    benchmark: {
        zoom_level: -75,
        offset: { x: 425, y: -1195 },
        frames: 500,
    },
};

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)
    MOVE_CURSOR: 14,

    LEAVE: 16,
    MOVE_CANVAS: 17,
    USER_JOINED: 18,
    ZOOM_CANVAS: 19,

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

// 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);
4
    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');
    }
}

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

        'canvas': {
            'offset': { 'x': 0, 'y': 0 },
            'zoom_level': 0,
            'zoom': 1.0,
            'target_zoom': 1.0,
            'zoom_screenp': {'x': 0, 'y': 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,
        'colorpicking': false,
        'zooming': false,
        'zoomdown': false,

        'moving_image': null,

        'current_strokes': {},

        'rdp_mask': new Uint8Array(1024),
        'rdp_traverse_stack': new Uint32Array(4096),

        'queue': [],
        'events': [],
        'stroke_count': 0,
        'starting_index': 0,
        'total_points': 0,

        'bvh': {
            'nodes': [],
            'root': null,
            'pqueue': new MinQueue(1024),
            'traverse_stack': tv_create(Uint32Array, 1024),
        },

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

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

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

        'players': {},

        'debug': {
            'red': false,
            'do_prepass': true,
            'limit_from': false,
            'limit_to': false,
            'render_from': 0,
            'render_to': 0,
        },

        'rdp_cache': {},

        'stats': {},
        'following_player': null,

        'color_picked': null,

        'wasm': {},

        'background_pattern': 'grid',
    };

    const context = {
        'canvas': null,
        'gl': null,

        'programs': {},
        'buffers': {},
        'locations': {},
        'textures': {},
        'images': [],

        'dynamic_serializer': serializer_create(config.initial_dynamic_bytes),
        'dynamic_index_serializer': serializer_create(config.initial_dynamic_bytes),

        'clipped_indices': tv_create(Uint32Array, 4096),

        'instance_data_points': tv_create(Float32Array, 4096),
        'instance_data_ids': tv_create(Uint32Array, 4096),
        'instance_data_pressures': tv_create(Uint8Array, 4096),
       
        'dynamic_instance_points': tv_create(Float32Array, 4096),
        'dynamic_instance_pressure': tv_create(Uint8Array, 4096),
        'dynamic_instance_ids': tv_create(Uint32Array, 4096),
        
        'stroke_data': serializer_create(config.initial_static_bytes),
        'dynamic_stroke_data': serializer_create(config.initial_static_bytes),
    
        'dynamic_stroke_count': 0,
        'dynamic_segment_count': 0,

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

        'gpu_timer_ext': null,
        'active_image': null,
        'last_frame_ts': 0,
        'last_frame_dt': 0,
    };
    
    load_player_cursor_template(state);
    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;

    await init_wasm(state);

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