♻️ Wasm-bin Color enum

ewen-lbh · May 2, 2024 · 28c436c · 28c436c
1 parent 9b95cd6
commit 28c436c
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 38 deletions.
diff --git a/src/color.rs b/src/color.rs
@@ -5,9 +5,10 @@ use std::{
     path::PathBuf,
 };
 
-use itertools::Itertools;
 use serde::Deserialize;
+use wasm_bindgen::prelude::*;
 
+#[wasm_bindgen]
 #[derive(Debug, Clone, Copy, PartialEq)]
 pub enum Color {
     Black,
@@ -50,6 +51,43 @@ impl From<&str> for Color {
     }
 }
 
+impl Color {
+    pub fn to_string(self, mapping: &ColorMapping) -> String {
+        match self {
+            Color::Black => mapping.black.to_string(),
+            Color::White => mapping.white.to_string(),
+            Color::Red => mapping.red.to_string(),
+            Color::Green => mapping.green.to_string(),
+            Color::Blue => mapping.blue.to_string(),
+            Color::Yellow => mapping.yellow.to_string(),
+            Color::Orange => mapping.orange.to_string(),
+            Color::Purple => mapping.purple.to_string(),
+            Color::Brown => mapping.brown.to_string(),
+            Color::Cyan => mapping.cyan.to_string(),
+            Color::Pink => mapping.pink.to_string(),
+            Color::Gray => mapping.gray.to_string(),
+        }
+    }
+
+    pub fn name(&self) -> String {
+        match self {
+            Color::Black => "black",
+            Color::White => "white",
+            Color::Red => "red",
+            Color::Green => "green",
+            Color::Blue => "blue",
+            Color::Yellow => "yellow",
+            Color::Orange => "orange",
+            Color::Purple => "purple",
+            Color::Brown => "brown",
+            Color::Cyan => "cyan",
+            Color::Pink => "pink",
+            Color::Gray => "gray",
+        }
+        .to_string()
+    }
+}
+
 #[derive(Debug, Deserialize, Clone)]
 pub struct ColorMapping {
     pub black: String,
@@ -203,22 +241,3 @@ impl ColorMapping {
         }
     }
 }
-
-impl Color {
-    pub fn to_string(self, mapping: &ColorMapping) -> String {
-        match self {
-            Color::Black => mapping.black.to_string(),
-            Color::White => mapping.white.to_string(),
-            Color::Red => mapping.red.to_string(),
-            Color::Green => mapping.green.to_string(),
-            Color::Blue => mapping.blue.to_string(),
-            Color::Yellow => mapping.yellow.to_string(),
-            Color::Orange => mapping.orange.to_string(),
-            Color::Purple => mapping.purple.to_string(),
-            Color::Brown => mapping.brown.to_string(),
-            Color::Cyan => mapping.cyan.to_string(),
-            Color::Pink => mapping.pink.to_string(),
-            Color::Gray => mapping.gray.to_string(),
-        }
-    }
-}
diff --git a/src/web.rs b/src/web.rs
@@ -5,12 +5,18 @@ use crate::{Canvas, Color, ColorMapping, Fill};
 
 #[wasm_bindgen(start)]
 pub fn main() -> Result<(), JsValue> {
-    render_image(0.0, "black")?;
+    render_image(0.0, Color::Black)?;
     Ok(())
 }
 
+// Can't bind Color.name directly, see https://github.com/rustwasm/wasm-bindgen/issues/1715
 #[wasm_bindgen]
-pub fn render_image(opacity: f32, color: &str) -> Result<(), JsValue> {
+pub fn color_name(c: Color) -> String {
+    c.name()
+}
+
+#[wasm_bindgen]
+pub fn render_image(opacity: f32, color: Color) -> Result<(), JsValue> {
     let mut canvas = Canvas::default_settings();
     canvas.colormap = ColorMapping {
         black: "#ffffff".into(),
@@ -29,7 +35,7 @@ pub fn render_image(opacity: f32, color: &str) -> Result<(), JsValue> {
 
     canvas.set_grid_size(4, 4);
 
-    let mut layer = canvas.random_layer(&color);
+    let mut layer = canvas.random_layer(&color.name());
     layer.paint_all_objects(Fill::Translucent(color.into(), opacity));
     canvas.add_or_replace_layer(layer);
 
@@ -39,7 +45,7 @@ pub fn render_image(opacity: f32, color: &str) -> Result<(), JsValue> {
 
     let output = document.create_element("div")?;
     output.set_class_name("frame");
-    output.set_attribute("data-color", color)?;
+    output.set_attribute("data-color", &color.name())?;
     output.set_inner_html(&canvas.render(&vec!["*"], false));
     body.append_child(&output)?;
     Ok(())

diff --git a/web/index.html b/web/index.html
@@ -7,12 +7,12 @@
   </head>
   <body>
     <script type="module">
-      import init, { render_image } from "./shapemaker.js"
+      import init, { render_image, Color, color_name } from "./shapemaker.js"
       async function run() {
         await init()
-        window.render_image = (vel, col) => {
+        window.renderImage = (vel, col) => {
           console.log([...arguments])
-          document.querySelector(`.frame[data-color=${col}]`)?.remove()
+          document.querySelector(`.frame[data-color=${color_name(col)}]`)?.remove()
           render_image(vel, col)
         }
       }
@@ -22,7 +22,7 @@
 
       window.addEventListener("keypress", (e) => {
         if (e.key === " ") {
-          window.render_image(1, "white")
+          window.renderImage(1, Color.White)
         }
       })
 
@@ -46,22 +46,22 @@
             const [pitch, velocity] = args
             if (velocity === 0) return
             const colors = [
-              "blue",
-              "purple",
-              "pink",
-              "red",
-              "orange",
-              "yellow",
-              "green",
-              "cyan",
-              "white",
+              Color.Blue,
+              Color.Purple,
+              Color.Pink,
+              Color.Red,
+              Color.Orange,
+              Color.Yellow,
+              Color.Green,
+              Color.Cyan,
+              Color.White,
             ]
             // get color uniformly in this range from 28 (lowest pitch) to 103 (highest pitch)
 
             const color =
               colors[Math.floor(((pitch - 28) / (103 - 28)) * colors.length)]
             console.log(pitch, color)
-            window.render_image(velocity / 128, color ?? "white")
+            window.renderImage(velocity / 128, color ?? "white")
           }
         })
       })