feat: add picking assets on hover (#9)

* Add structure for picking, change assets sotring from a list to hash map, add pointer

* render picking

* determine asset id under the pointer

* Draw border around picked asset

* add comment, replace passing test screneshto name as array with just a string

* remove unnecessayr buffer size during picking

* round down number of verticies

Author: mateuszJS

crate/src/lib.rs

@@ -15,85 +15,117 @@ macro_rules! err {
   // there is no way to specify panci message, so we need to do console.error and then panci any value
 }
 
-//to remove and replace with util
-macro_rules! angle_diff {
-  ($beta:expr, $alpha:expr) => {{
-    let phi = ($beta - $alpha).abs() % (2.0 * MATH_PI); // This is either the distance or 2*Math.PI - distance
-    if phi > MATH_PI {
-      (2.0 * MATH_PI) - phi
-    } else {
-      phi
-    }
-  }}
-}
-
+mod line;
 mod texture;
+mod types;
 
-use gloo_utils::format::JsValueSerdeExt; // for transforming JsValue into serde
+use std::collections::HashMap;
+
+use gloo_utils::format::JsValueSerdeExt;
+use line::Line;
 use serde::{Deserialize, Serialize};
-use texture::{Texture, VertexPoint};
+use texture::Texture;
+use types::{Point, VertexPoint};
 use wasm_bindgen::prelude::*;
 
 #[wasm_bindgen]
 pub struct State {
-    textures: Vec<Texture>,
+    assets: HashMap<usize, Texture>,
+    hovered_asset_id: usize, // 0 -> no asset is hovered
 }
 
 #[wasm_bindgen]
 impl State {
     pub fn new(width: f32, height: f32) -> State {
-        State { textures: vec![] }
+        State {
+            assets: HashMap::new(),
+            hovered_asset_id: 0,
+        }
     }
 
-    pub fn add_texture(&mut self, raw_points: JsValue, id: usize) {
+    pub fn add_texture(&mut self, id: usize, raw_points: JsValue, texture_id: usize) {
         let serde = raw_points.into_serde();
         let points: Vec<VertexPoint> = if serde.is_ok() {
             serde.unwrap()
         } else {
             err!("add_texture received not copatible data from JS. Failed at conversion to Rust types.");
         };
 
-        self.textures.push(Texture::new(points, id));
+        self.assets.insert(id, Texture::new(id, points, texture_id));
     }
 
-    pub fn get_shader_input(&self, index: usize) -> JsValue {
-        let mut vertex_data: Vec<f32> = vec![];
-        let mut texture_id: usize = 0;
-        if index < self.textures.len() {
-            texture_id = self.textures[index].id;
-            self.textures[index].add_vertex(&mut vertex_data);
-        }
+    pub fn get_shader_input(&self, id: usize) -> JsValue {
+        let asset: &Texture = if self.assets.contains_key(&id) {
+            self.assets.get(&id).unwrap()
+        } else {
+            err!("asset with id {id} not found");
+        };
 
         let payload = ShaderInput {
-            texture_id,
-            vertex_data,
+            texture_id: asset.texture_id,
+            vertex_data: asset.get_vertex_data(),
         };
+
         serde_wasm_bindgen::to_value(&payload).unwrap()
+    }
+
+    pub fn get_shader_pick_input(&self, id: usize) -> JsValue {
+        let asset: &Texture = if self.assets.contains_key(&id) {
+            self.assets.get(&id).unwrap()
+        } else {
+            err!("asset with id {id} not found");
+        };
+
+        let payload = ShaderInput {
+            texture_id: asset.texture_id,
+            vertex_data: asset.get_vertex_pick_data(),
+        };
 
-        // js_sys::Float32Array::from(&result[..])
+        serde_wasm_bindgen::to_value(&payload).unwrap()
     }
 
-    pub fn update_points(&mut self, texture_id: usize, raw_points: JsValue) {
+    pub fn update_points(&mut self, id: usize, raw_points: JsValue) {
+        let asset = self.assets.get_mut(&id).unwrap();
+
         let serde = raw_points.into_serde();
         let points: Vec<Point> = if serde.is_ok() {
             serde.unwrap()
         } else {
             err!("add_texture received not copatible data from JS. Failed at conversion to Rust types.");
         };
 
-        let texture_option = self
-            .textures
-            .iter_mut()
-            .find(|texture| texture.id == texture_id);
+        asset.update_coords(points);
+    }
 
-        texture_option.unwrap().update_coords(points);
+    pub fn update_hover(&mut self, id: usize) {
+        self.hovered_asset_id = id
     }
-}
 
-#[derive(Serialize, Deserialize)]
-struct Point {
-    x: f32,
-    y: f32,
+    pub fn get_border(&self) -> Vec<f32> {
+        if self.assets.contains_key(&self.hovered_asset_id) {
+            let asset: &Texture = self.assets.get(&self.hovered_asset_id).unwrap();
+
+            asset
+                .points
+                .iter()
+                .enumerate()
+                .flat_map(|(index, point)| {
+                    Line::get_vertex_data(
+                        point,
+                        if index == 3 {
+                            &asset.points[0]
+                        } else {
+                            &asset.points[index + 1]
+                        },
+                        20.0,
+                        (1.0, 0.0, 0.0, 1.0),
+                    )
+                })
+                .collect::<Vec<f32>>()
+        } else {
+            vec![]
+        }
+    }
 }
 
 #[derive(Serialize, Deserialize)]

crate/src/line.rs

@@ -0,0 +1,56 @@
+use crate::types::{Color, HasCoords, Point};
+
+pub struct Line {}
+
+impl Line {
+    pub fn get_vertex_data<P: HasCoords>(
+        points_a: &P,
+        point_b: &P,
+        width: f32,
+        color: Color,
+    ) -> Vec<f32> {
+        let half_width = width / 2.0;
+        let parallel_angle = (point_b.y() - points_a.y()).atan2(point_b.x() - points_a.x());
+        let angle = parallel_angle + std::f32::consts::PI / 2.0; // perpendicular angle
+        let ax = points_a.x() - half_width * parallel_angle.cos();
+        let ay = points_a.y() - half_width * parallel_angle.sin();
+        let bx = point_b.x() + half_width * parallel_angle.cos();
+        let by = point_b.y() + half_width * parallel_angle.sin();
+
+        let vertex_data: [Point; 6] = [
+            Point {
+                x: ax - half_width * angle.cos(),
+                y: ay - half_width * angle.sin(),
+            },
+            Point {
+                x: ax + half_width * angle.cos(),
+                y: ay + half_width * angle.sin(),
+            },
+            Point {
+                x: bx + half_width * angle.cos(),
+                y: by + half_width * angle.sin(),
+            },
+            Point {
+                x: bx - half_width * angle.cos(),
+                y: by - half_width * angle.sin(),
+            },
+            Point {
+                x: ax - half_width * angle.cos(),
+                y: ay - half_width * angle.sin(),
+            },
+            Point {
+                x: bx + half_width * angle.cos(),
+                y: by + half_width * angle.sin(),
+            },
+        ];
+
+        vertex_data
+            .iter()
+            .flat_map(|point| {
+                vec![
+                    point.x, point.y, 0.0, 1.0, color.0, color.1, color.2, color.3,
+                ]
+            })
+            .collect()
+    }
+}

crate/src/texture.rs

@@ -1,27 +1,21 @@
-use serde::{Deserialize, Serialize};
-use wasm_bindgen::convert::FromWasmAbi;
-
-use crate::Point;
-
-#[derive(Serialize, Deserialize)]
-pub struct VertexPoint {
-    x: f32,
-    y: f32,
-    u: f32,
-    v: f32,
-}
+use crate::{Point, VertexPoint};
 
 pub struct Texture {
-    points: Vec<VertexPoint>,
-    pub id: usize,
+    id: f32,                      // for picking
+    pub points: Vec<VertexPoint>, // for border drawing
+    pub texture_id: usize,
 }
 
 impl Texture {
-    pub fn new(points: Vec<VertexPoint>, id: usize) -> Texture {
-        Texture { points, id }
+    pub fn new(id: usize, points: Vec<VertexPoint>, texture_id: usize) -> Texture {
+        Texture {
+            id: id as f32,
+            points,
+            texture_id,
+        }
     }
 
-    pub fn add_vertex(&self, verticies: &mut Vec<f32>) {
+    pub fn get_vertex_data(&self) -> Vec<f32> {
         let points: [&VertexPoint; 6] = [
             &self.points[0],
             &self.points[1],
@@ -30,14 +24,10 @@ impl Texture {
             &self.points[3],
             &self.points[0],
         ];
-        points.iter().for_each(|point| {
-            verticies.push(point.x);
-            verticies.push(point.y);
-            verticies.push(0.0);
-            verticies.push(1.0);
-            verticies.push(point.u);
-            verticies.push(point.v);
-        });
+        points
+            .iter()
+            .flat_map(|point| vec![point.x, point.y, 0.0, 1.0, point.u, point.v])
+            .collect()
     }
 
     pub fn update_coords(&mut self, new_points: Vec<Point>) {
@@ -49,4 +39,19 @@ impl Texture {
                 point.y = new_points[index].y;
             });
     }
+
+    pub fn get_vertex_pick_data(&self) -> Vec<f32> {
+        let points: [&VertexPoint; 6] = [
+            &self.points[0],
+            &self.points[1],
+            &self.points[2],
+            &self.points[2],
+            &self.points[3],
+            &self.points[0],
+        ];
+        points
+            .iter()
+            .flat_map(|point| vec![point.x, point.y, 0.0, 1.0, point.u, point.v, self.id])
+            .collect()
+    }
 }

crate/src/types.rs

@@ -0,0 +1,41 @@
+use serde::{Deserialize, Serialize};
+
+// Define a trait for any struct that has x and y fields
+pub trait HasCoords {
+    fn x(&self) -> f32;
+    fn y(&self) -> f32;
+}
+
+#[derive(Serialize, Deserialize)]
+pub struct Point {
+    pub x: f32,
+    pub y: f32,
+}
+
+impl HasCoords for Point {
+    fn x(&self) -> f32 {
+        self.x
+    }
+    fn y(&self) -> f32 {
+        self.y
+    }
+}
+
+#[derive(Serialize, Deserialize)]
+pub struct VertexPoint {
+    pub x: f32,
+    pub y: f32,
+    pub u: f32,
+    pub v: f32,
+}
+
+impl HasCoords for VertexPoint {
+    fn x(&self) -> f32 {
+        self.x
+    }
+    fn y(&self) -> f32 {
+        self.y
+    }
+}
+
+pub type Color = (f32, f32, f32, f32);

integration-tests/index.ts

@@ -1,6 +1,8 @@
 
 import initCreator from "../src/index"
 
+const ASSET_ID = 1
+
 async function test() {
   const canvas = document.querySelector<HTMLCanvasElement>("canvas")!
   const creator = await initCreator(canvas)
@@ -13,14 +15,14 @@ async function test() {
     const img = new Image()
     img.src = URL.createObjectURL(files[0])
     img.onload = () => {
-      creator.addImage(img)
+      creator.addImage(ASSET_ID, img)
     }
   })
 
   let offset = 100
   const updateImgPositionBtn = document.querySelector<HTMLButtonElement>('#img-position')!
   updateImgPositionBtn.addEventListener('click', () => {
-    creator.updatePoints(0, [
+    creator.updatePoints(ASSET_ID, [
       { x: offset, y: offset },
       { x: offset + 400, y: offset },
       { x: offset + 400, y: offset + 400 },

integration-tests/tests/creator.spec.ts

@@ -21,20 +21,24 @@ test('visible image after upload', async ({ page }, testinfo) => {
   // await expect(page).toHaveScreenshot('webgpu-report.png');
 
   await page.goto('/')
+  await page.waitForLoadState("networkidle")
 
+  /** =========PNG IMAGE UPLOAD============ */
   const fileInput = page.locator('input[type="file"]')
   const testImagePath = path.join(__dirname, '../image-sample.png')
   await fileInput.setInputFiles(testImagePath)
 
   const canvas = page.locator('canvas')
+  await expect(canvas).toHaveScreenshot('after-upload.png')
 
-  await expect(canvas).toBeVisible()
-
-  await expect(canvas).toHaveScreenshot(['after-upload.png'])
-
+  /** =========IMAGES POSITION UPDATES============ */
   const moveImgBtn = page.locator('#img-position')
   await moveImgBtn.click()
   await expect(canvas).toHaveScreenshot('after-move.png')
+
+  /** =========DISPLAYS BORDER AROUND HOVERED ASSET============ */
+  await page.mouse.move(200, 300)
+  await expect(canvas).toHaveScreenshot('after-hover.png')
 })