Move images (local only)

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;
+}

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)

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);
-}
+}

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;
         }
     }
 

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;
     }