almost got height previews working

Author: knzai

src/file_data.rs

@@ -32,6 +32,17 @@ impl Raw {
         Image(parser.process_input(&self.0, width))
     }
 
+    pub fn height_previews(&self, parser: ParserType, width: usize) -> Vec<Image> {
+        let image = self.parse(parser, width);
+        let mut previews = self
+            .heights(parser.image_type(), width)
+            .iter()
+            .map(|h| image.as_row(*h as usize))
+            .collect::<Vec<Image>>();
+        previews.push(image.as_row(200));
+        previews
+    }
+
     pub fn width_previews(&self, parser: ParserType) -> Vec<Image> {
         let mut previews = self
             .widths(parser.image_type())

src/image.rs

@@ -58,11 +58,8 @@ impl Image {
         }
     }
 
-    pub fn sprites(&self, height: usize) -> Vec<Image> {
-        self.data()
-            .chunks(height)
-            .map(|chunk| Image(chunk.to_vec()))
-            .collect()
+    pub fn as_row(&self, tile_height: usize) -> Image {
+        Image(concat_tiles(self.data(), tile_height))
     }
 }
 

src/wasm/index.html

@@ -39,15 +39,15 @@
       });
 
       class PreviewItem extends HTMLElement {
-         constructor(src) {
+         constructor(src, height=false) {
             super();
             const shadow = this.attachShadow({mode: "open"});
             const fragment = D.createRange().createContextualFragment('<h3></h3><img/>');
             const h3 = $('h3', fragment);
             this.img = $('img', fragment);
 
             this.img.onload = function () {
-               h3.innerText = this.width;
+               h3.innerText = height ? this.height : this.width;
             }
             this.img.src = src;
             this.addEventListener('click', this.onClick);
@@ -58,7 +58,16 @@
             let parser = $('h2', this.parentElement).innerText;
             $('#width').value = width;
             $('#parser').value = parser
-            //alert(window.wasmBindings.tile_previews(parser, width));
+
+            let wrapper = $('preview-wrapper');
+            wrapper.textContent = "";
+            const container = D.createElement("preview-area");
+            container.className = "rows";
+            container.innerHTML = `<h2>heights</h2>`
+
+            let images = window.wasmBindings.tile_previews($('#file-input').data, parser, parseInt(width));
+            images.forEach(src => container.appendChild(new PreviewItem(src, true)));
+            wrapper.appendChild(container);
          }
       }
       customElements.define("preview-item", PreviewItem);

src/wasm/main.rs

@@ -34,10 +34,22 @@ pub fn previews(data: &[u8]) -> JsValue {
     JsValue::from_serde(&hm).unwrap()
 }
 
-// #[wasm_bindgen]
-// pub fn tile_previews(data: &[u8], parser: String, width: usize) -> String {
-//     format!("{} {}", parser, width)
-// }
+#[wasm_bindgen]
+pub fn tile_previews(data: &[u8], parser: String, width: usize) -> Vec<String> {
+    let parser = ParserType::type_str(&parser);
+    let palette = parser.image_type().default_color_palette();
+    let file_data = Raw::new(data);
+    file_data
+        .height_previews(parser, width)
+        .iter()
+        .map(|p| {
+            format!(
+                "data:application/png;base64,{}",
+                STANDARD.encode(png::write2(p.data(), palette.clone()))
+            )
+        })
+        .collect()
+}
 
 pub fn preview(data: &Raw, parser: ParserType) -> Vec<String> {
     let palette = parser.image_type().default_color_palette();

src/wasm/styles.css

@@ -50,6 +50,13 @@ preview-area {
   height: 300px;
   overflow-y: scroll;
 }
+preview-area.rows {
+  flex-flow: column nowrap;
+  height: auto;
+  max-width: 300px;
+  overflow-x: scroll;
+  overflow-y: auto;
+}
 preview-item {
   margin: 1rem;
   padding: .5rem .5rem .8rem .5rem;