diff --git a/client/aux.js b/client/aux.js index fa95888..399af9a 100644 --- a/client/aux.js +++ b/client/aux.js @@ -238,3 +238,13 @@ async function load_player_cursor_template(state) { state.cursor_path = path; } + +function get_image(context, key) { + for (const entry of context.images) { + if (entry.key === key) { + return entry; + } + } + + return null; +} diff --git a/client/client_recv.js b/client/client_recv.js index 440f729..c64541a 100644 --- a/client/client_recv.js +++ b/client/client_recv.js @@ -374,6 +374,7 @@ function handle_event(state, context, event, options = {}) { event.width = bitmap.width; event.height = bitmap.height; + // TODO: preserve image order add_image(context, event.image_id, bitmap, p); // God knows when this will actually complete (it loads the image from the server) diff --git a/client/cursor.js b/client/cursor.js index 9780f74..cfe31ce 100644 --- a/client/cursor.js +++ b/client/cursor.js @@ -19,7 +19,7 @@ function on_down(e) { // Left mouse button if (e.button === 0) { - const image_hit = image_at(x, y); + const image_hit = image_at(context, x, y); if (elements.active_image !== null && image_hit !== null) { const image_id = image_hit.getAttribute('data-image-id'); @@ -324,4 +324,4 @@ function update_brush() { storage.timers.brush_preview = setTimeout(() => { elements.brush_preview.classList.add('dhide'); }, 1000); -} \ No newline at end of file +} diff --git a/client/webgl_geometry.js b/client/webgl_geometry.js index f0ded13..c2876b9 100644 --- a/client/webgl_geometry.js +++ b/client/webgl_geometry.js @@ -221,45 +221,18 @@ function add_image(context, image_id, bitmap, p) { gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); } -function move_image(context, image_event) { - const x = image_event.x; - const y = image_event.y; - - const count = Object.keys(context.textures['image']).length; - - for (let id = 0; id < count; ++id) { - const image = context.textures['image'][id]; - if (image.image_id === image_event.image_id) { - context.quad_positions[id * 12 + 0] = x; - context.quad_positions[id * 12 + 1] = y; - context.quad_positions[id * 12 + 2] = x; - context.quad_positions[id * 12 + 3] = y + image_event.height; - context.quad_positions[id * 12 + 4] = x + image_event.width; - context.quad_positions[id * 12 + 5] = y + image_event.height; - - context.quad_positions[id * 12 + 6] = x + image_event.width; - context.quad_positions[id * 12 + 7] = y; - context.quad_positions[id * 12 + 8] = x; - context.quad_positions[id * 12 + 9] = y; - context.quad_positions[id * 12 + 10] = x + image_event.width; - context.quad_positions[id * 12 + 11] = y + image_event.height; - - context.quad_positions_f32 = new Float32Array(context.quad_positions); - - break; - } - } +function move_image(context, image, dx, dy) { + consol.error('wtf is this'); } -function image_at(state, x, y) { - for (let i = state.events.length - 1; i >= 0; --i) { - const event = state.events[i]; - if (event.type === EVENT.IMAGE && !event.deleted) { - if ('height' in event && 'width' in event) { - if (event.x <= x && x <= event.x + event.width && event.y <= y && y <= event.y + event.height) { - return event; - } - } +function image_at(context, x, y) { + for (const image of context.images) { + const at = image.at; + const w = image.width; + const h = image.height; + + if (at.x <= x && x <= at.x + w && at.y <= y && y <= at.y + h) { + return image; } } diff --git a/client/webgl_listeners.js b/client/webgl_listeners.js index de37e77..d595485 100644 --- a/client/webgl_listeners.js +++ b/client/webgl_listeners.js @@ -145,7 +145,7 @@ function keydown(e, state, context) { } else if (e.code === 'Tab') { e.preventDefault(); zenmode(); - } else if (e.code === 'ControlLeft' || e.code === 'ControlRight') { + } else if (e.code === 'ControlLeft' || e.paddingcode === 'ControlRight') { enter_picker_mode(state, context); } else if (e.code === 'KeyD') { document.querySelector('.debug-window').classList.toggle('dhide'); @@ -217,10 +217,11 @@ function mousedown(e, state, context) { } else if (state.tools.active === 'eraser') { state.erasing = true; } else if (state.tools.active === 'pointer') { - const image_event = image_at(state, canvasp.x, canvasp.y); + const image_event = image_at(context, canvasp.x, canvasp.y); if (image_event) { - context.active_image = image_event.image_id; + context.active_image = image_event.key; + state.moving_image = image_event.key; } else { context.active_image = null; } @@ -308,10 +309,19 @@ function mousemove(e, state, context) { } if (state.moving_image) { - state.moving_image.x += e.movementX / state.canvas.zoom; - state.moving_image.y += e.movementY / state.canvas.zoom; - move_image(context, state.moving_image); - do_draw = true; + const image = get_image(context, state.moving_image); + + if (image !== null) { + const dx = e.movementX / state.canvas.zoom; + const dy = e.movementY / state.canvas.zoom; + + image.at.x += dx; + image.at.y += dy; + + //move_image(context, state.moving_image); + + do_draw = true; + } } if (state.drawing) { @@ -356,7 +366,7 @@ function mouseup(e, state, context) { if (state.moving_image) { schedule_draw(state, context); - queue_event(state, image_move_event(context.active_image, state.moving_image.x, state.moving_image.y)); + //queue_event(state, image_move_event(context.active_image, state.moving_image.x, state.moving_image.y)); state.moving_image = null; return; }