diff --git a/client/client_recv.js b/client/client_recv.js
index c62a9b9..82b82b1 100644
--- a/client/client_recv.js
+++ b/client/client_recv.js
@@ -214,27 +214,23 @@ function handle_event(state, context, event, relax = false) {
}
case EVENT.IMAGE: {
- need_draw = true;
- console.error('todo');
- // const url = config.image_url + event.image_id;
- // const item = document.createElement('img');
-
- // item.classList.add('floating-image');
- // item.style['z-index'] = state.events.length;
- // item.setAttribute('data-image-id', event.image_id);
- // item.setAttribute('src', url);
- // item.style.transform = `translate(${event.x}px, ${event.y}px)`;
-
- // elements.images.appendChild(item);
- // state.images[event.image_id] = {
- // 'x': event.x, 'y': event.y
- // };
- // const r = await fetch(config.image_url + event.image_id);
- // const blob = await r.blob();
- // const bitmap = await createImageBitmap(blob);
- // event.bitmap = bitmap;
- // const bbox = bitmap_bbox(event);
- // state.ctx0.drawImage(bitmap, bbox.xmin, bbox.ymin);
+ try {
+ (async () => {
+ const url = config.image_url + event.image_id;
+ const r = await fetch(config.image_url + event.image_id);
+ const blob = await r.blob();
+ const bitmap = await createImageBitmap(blob);
+ const p = {'x': event.x, 'y': event.y};
+
+ add_image(context, bitmap, p);
+
+ // God knows when this will actually complete (it loads the image from the server)
+ // so do not set need_draw. Instead just schedule the draw ourselves when done
+ schedule_draw(state, context);
+ })();
+ } catch (e) {
+ console.log('Could not load image bitmap:', e);
+ }
break;
}
diff --git a/client/client_send.js b/client/client_send.js
index 24e146e..25b728f 100644
--- a/client/client_send.js
+++ b/client/client_send.js
@@ -245,6 +245,15 @@ function width_event(width) {
};
}
+function image_event(image_id, x, y) {
+ return {
+ 'type': EVENT.IMAGE,
+ 'image_id': image_id,
+ 'x': x,
+ 'y': y,
+ };
+}
+
function stroke_event(state) {
return {
'type': EVENT.STROKE,
diff --git a/client/default.css b/client/default.css
index 741ecab..5dff167 100644
--- a/client/default.css
+++ b/client/default.css
@@ -283,6 +283,7 @@ input[type=range]::-moz-range-track {
font-weight: bold;
user-select: none;
transition: transform .1s ease-in-out, opacity .1s;
+ pointer-events: none;
}
.offline-toast.hidden {
diff --git a/client/index.html b/client/index.html
index 77df1a3..d695e68 100644
--- a/client/index.html
+++ b/client/index.html
@@ -7,20 +7,20 @@
-
+
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
-
-
-
+
+
+
diff --git a/client/webgl_listeners.js b/client/webgl_listeners.js
index 018efff..cff9adf 100644
--- a/client/webgl_listeners.js
+++ b/client/webgl_listeners.js
@@ -363,20 +363,19 @@ async function on_drop(e, state, context) {
canvasp.y -= bitmap.height / 2;
add_image(context, bitmap, canvasp);
- // storage.ctx0.drawImage(bitmap, x, y);
const form_data = new FormData();
form_data.append('file', file);
- const resp = await fetch(`/api/image?deskId=333`, {
+ 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, x, y);
- // await queue_event(event);
+ const image_id = await resp.text();
+ const event = image_event(image_id, canvasp.x, canvasp.y);
+ await queue_event(state, event);
}
schedule_draw(state, context);
diff --git a/client/websocket.js b/client/websocket.js
index 123ecbf..fadc567 100644
--- a/client/websocket.js
+++ b/client/websocket.js
@@ -27,7 +27,9 @@ async function ws_connect(state, context, first_connect = false) {
return;
}
}
- } catch (e) {}
+ } catch (e) {
+ console.log('Could not ping the server:', e);
+ }
state.timers.offline_toast = setTimeout(() => ws_connect(state, context, first_connect), config.ws_reconnect_timeout);
}