You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
150 lines
3.3 KiB
150 lines
3.3 KiB
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, |
|
}); |
|
|
|
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, |
|
|
|
'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), |
|
'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); |
|
} |