|
|
|
function ui_offline() {
|
|
|
|
document.body.classList.add('offline');
|
|
|
|
document.querySelector('.offline-toast').classList.remove('hidden');
|
|
|
|
}
|
|
|
|
|
|
|
|
function ui_online() {
|
|
|
|
document.body.classList.remove('offline');
|
|
|
|
document.querySelector('.offline-toast').classList.add('hidden');
|
|
|
|
}
|
|
|
|
|
|
|
|
async function insert_image(state, context, file) {
|
|
|
|
const bitmap = await createImageBitmap(file);
|
|
|
|
|
|
|
|
const p = { 'x': state.cursor.x, 'y': state.cursor.y };
|
|
|
|
const canvasp = screen_to_canvas(state, p);
|
|
|
|
|
|
|
|
canvasp.x -= bitmap.width / 2;
|
|
|
|
canvasp.y -= bitmap.height / 2;
|
|
|
|
|
|
|
|
const form_data = new FormData();
|
|
|
|
form_data.append('file', file);
|
|
|
|
|
|
|
|
const resp = await fetch(`/api/image?deskId=${state.desk_id}`, {
|
|
|
|
method: 'post',
|
|
|
|
body: form_data,
|
|
|
|
})
|
|
|
|
|
|
|
|
if (resp.ok) {
|
|
|
|
const image_id = await resp.text();
|
|
|
|
const event = image_event(image_id, canvasp.x, canvasp.y);
|
|
|
|
await queue_event(state, event);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
function event_size(event) {
|
|
|
|
let size = 1 + 3; // type + padding
|
|
|
|
|
|
|
|
switch (event.type) {
|
|
|
|
case EVENT.PREDRAW: {
|
|
|
|
size += 4 * 2;
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
|
|
|
|
case EVENT.CLEAR: {
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
|
|
|
|
case EVENT.SET_COLOR: {
|
|
|
|
size += 4;
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
|
|
|
|
case EVENT.SET_WIDTH: {
|
|
|
|
size += 2;
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
|
|
|
|
case EVENT.STROKE: {
|
|
|
|
size += 4 + 2 + 2 + 4 + event.points.length * 4 * 2; // u32 stroke id + u16 (count) + u16 (width) + u32 (color + count * (f32, f32) points
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
|
|
|
|
case EVENT.UNDO:
|
|
|
|
case EVENT.REDO: {
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
|
|
|
|
case EVENT.IMAGE:
|
|
|
|
case EVENT.IMAGE_MOVE: {
|
|
|
|
size += 4 + 4 + 4; // file id + x + y
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
|
|
|
|
case EVENT.ERASER: {
|
|
|
|
size += 4; // stroke id
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
|
|
|
|
default: {
|
|
|
|
console.error('fuck');
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
return size;
|
|
|
|
}
|
|
|
|
|
|
|
|
function find_touch(touchlist, id) {
|
|
|
|
for (const touch of touchlist) {
|
|
|
|
if (touch.identifier === id) {
|
|
|
|
return touch;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
|
|
|
|
function find_image(state, image_id) {
|
|
|
|
for (let i = state.events.length - 1; i >= 0; --i) {
|
|
|
|
const event = state.events[i];
|
|
|
|
if (event.type === EVENT.IMAGE && !event.deleted && event.image_id === image_id) {
|
|
|
|
return event;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// TODO: move these to a file? TypedVector
|
|
|
|
function tv_create(class_name, capacity) {
|
|
|
|
return {
|
|
|
|
'class_name': class_name,
|
|
|
|
'data': new class_name(capacity),
|
|
|
|
'capacity': capacity,
|
|
|
|
'size': 0,
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
function tv_data(tv) {
|
|
|
|
return tv.data.subarray(0, tv.size);
|
|
|
|
}
|
|
|
|
|
|
|
|
function tv_ensure(tv, capacity) {
|
|
|
|
if (tv.capacity < capacity) {
|
|
|
|
const new_tv = tv_create(tv.class_name, capacity);
|
|
|
|
|
|
|
|
new_tv.data.set(tv_data(tv));
|
|
|
|
new_tv.size = tv.size;
|
|
|
|
|
|
|
|
return new_tv;
|
|
|
|
}
|
|
|
|
|
|
|
|
return tv;
|
|
|
|
}
|
|
|
|
|
|
|
|
function tv_ensure_by(tv, by) {
|
|
|
|
return tv_ensure(tv, tv.capacity + by);
|
|
|
|
}
|
|
|
|
|
|
|
|
function tv_add(tv, item) {
|
|
|
|
tv.data[tv.size++] = item;
|
|
|
|
}
|
|
|
|
|
|
|
|
function tv_clear(tv) {
|
|
|
|
tv.size = 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
|