diff --git a/client/default.css b/client/default.css index cbde82b..f30aff7 100644 --- a/client/default.css +++ b/client/default.css @@ -26,14 +26,18 @@ html, body { cursor: move; } -#canvas0 { +#canvas-images { z-index: 0; +} + +#canvas0 { + z-index: 1; box-sizing: border-box; border: 1px solid black; } #canvas1 { - z-index: 1; + z-index: 2; pointer-events: none; opacity: 0.3; } @@ -82,4 +86,9 @@ html, body { .toolbar #brush-color::-moz-color-swatch { border: none; +} + +.floating-image { + position: absolute; + pointer-events: none; } \ No newline at end of file diff --git a/client/index.html b/client/index.html index 4b09fbd..69191db 100644 --- a/client/index.html +++ b/client/index.html @@ -22,5 +22,6 @@ +
diff --git a/client/index.js b/client/index.js index 9548b3f..fede53a 100644 --- a/client/index.js +++ b/client/index.js @@ -107,6 +107,7 @@ function event_size(event) { function move_canvas() { elements.canvas0.style.transform = `translate(${-storage.canvas.offset_x}px, ${-storage.canvas.offset_y}px) scale(${storage.canvas.zoom})`; elements.canvas1.style.transform = `translate(${-storage.canvas.offset_x}px, ${-storage.canvas.offset_y}px) scale(${storage.canvas.zoom})`; + elements.images.style.transform = `translate(${-storage.canvas.offset_x}px, ${-storage.canvas.offset_y}px) scale(${storage.canvas.zoom})`; } function predraw_event(x, y) { @@ -153,6 +154,7 @@ function main() { elements.canvas0 = document.getElementById('canvas0'); elements.canvas1 = document.getElementById('canvas1'); + elements.images = document.getElementById('canvas-images'); elements.brush_color = document.getElementById('brush-color'); elements.brush_width = document.getElementById('brush-width'); elements.brush_preview = document.getElementById('brush-preview'); @@ -170,6 +172,7 @@ function main() { storage.ctx0 = elements.canvas0.getContext('2d'); storage.ctx1 = elements.canvas1.getContext('2d'); + storage.ctx1.canvas.width = storage.ctx0.canvas.width = storage.canvas.width; storage.ctx1.canvas.height = storage.ctx0.canvas.height = storage.canvas.height; diff --git a/client/recv.js b/client/recv.js index 040beee..788095b 100644 --- a/client/recv.js +++ b/client/recv.js @@ -127,13 +127,13 @@ async function handle_event(event) { const other_event = storage.events[i]; if (other_event.type === EVENT.STROKE && other_event.user_id === event.user_id && !other_event.deleted) { other_event.deleted = true; - const stats = stroke_stats(other_event.points, storage.cursor.width); - redraw_region(stats.bbox); + // const stats = stroke_stats(other_event.points, storage.cursor.width); + // redraw_region(stats.bbox); break; } else if (other_event.type === EVENT.IMAGE && other_event.user_id === event.user_id && !other_event.deleted) { - other_event.deleted = true; - const bbox = bitmap_bbox(other_event); - redraw_region(bbox); + // other_event.deleted = true; + // const bbox = bitmap_bbox(other_event); + // redraw_region(bbox); break; } } @@ -142,14 +142,19 @@ async function handle_event(event) { } case EVENT.IMAGE: { - 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); - storage.ctx0.drawImage(bitmap, bbox.xmin, bbox.ymin); + const url = config.image_url + event.image_id; + const item = document.createElement('img'); + item.classList.add('floating-image'); + item.style.left = `${event.x}px`; + item.style.top = `${event.y}px`; + item.setAttribute('src', url); + elements.images.appendChild(item); + // 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); + // storage.ctx0.drawImage(bitmap, bbox.xmin, bbox.ymin); break; }