145 lines
5.4 KiB
Rust
145 lines
5.4 KiB
Rust
//! Avatar thumbnail component for rendering avatar previews.
|
|
//!
|
|
//! A simplified canvas-based component for rendering avatars in the
|
|
//! avatar store grid. Uses the same layer compositing as the main
|
|
//! avatar renderer but at thumbnail size.
|
|
|
|
use leptos::prelude::*;
|
|
use leptos::web_sys;
|
|
|
|
/// Avatar thumbnail component for the avatar store.
|
|
///
|
|
/// Renders a small preview of an avatar using canvas compositing.
|
|
/// Takes layer paths directly as props.
|
|
///
|
|
/// Props:
|
|
/// - `skin_layer`: Asset paths for skin layer positions 0-8
|
|
/// - `clothes_layer`: Asset paths for clothes layer positions 0-8
|
|
/// - `accessories_layer`: Asset paths for accessories layer positions 0-8
|
|
/// - `emotion_layer`: Asset paths for emotion layer positions 0-8
|
|
/// - `size`: Optional canvas size in pixels (default: 80)
|
|
#[component]
|
|
pub fn AvatarThumbnail(
|
|
#[prop(into)] skin_layer: Signal<[Option<String>; 9]>,
|
|
#[prop(into)] clothes_layer: Signal<[Option<String>; 9]>,
|
|
#[prop(into)] accessories_layer: Signal<[Option<String>; 9]>,
|
|
#[prop(into)] emotion_layer: Signal<[Option<String>; 9]>,
|
|
#[prop(default = 80)] size: u32,
|
|
) -> impl IntoView {
|
|
let canvas_ref = NodeRef::<leptos::html::Canvas>::new();
|
|
let cell_size = size / 3;
|
|
|
|
#[cfg(feature = "hydrate")]
|
|
{
|
|
use std::cell::RefCell;
|
|
use std::collections::HashMap;
|
|
use std::rc::Rc;
|
|
use wasm_bindgen::JsCast;
|
|
use wasm_bindgen::closure::Closure;
|
|
|
|
use crate::utils::normalize_asset_path;
|
|
|
|
// Image cache for this thumbnail
|
|
let image_cache: Rc<RefCell<HashMap<String, web_sys::HtmlImageElement>>> =
|
|
Rc::new(RefCell::new(HashMap::new()));
|
|
|
|
// Redraw trigger - incremented when images load
|
|
let (redraw_trigger, set_redraw_trigger) = signal(0u32);
|
|
|
|
Effect::new(move |_| {
|
|
// Subscribe to redraw trigger
|
|
let _ = redraw_trigger.get();
|
|
|
|
let Some(canvas) = canvas_ref.get() else {
|
|
return;
|
|
};
|
|
|
|
let skin = skin_layer.get();
|
|
let clothes = clothes_layer.get();
|
|
let accessories = accessories_layer.get();
|
|
let emotion = emotion_layer.get();
|
|
|
|
let canvas_el: &web_sys::HtmlCanvasElement = &canvas;
|
|
canvas_el.set_width(size);
|
|
canvas_el.set_height(size);
|
|
|
|
let Ok(Some(ctx)) = canvas_el.get_context("2d") else {
|
|
return;
|
|
};
|
|
let ctx: web_sys::CanvasRenderingContext2d = ctx.dyn_into().unwrap();
|
|
|
|
// Clear canvas
|
|
ctx.clear_rect(0.0, 0.0, size as f64, size as f64);
|
|
|
|
// Draw background
|
|
ctx.set_fill_style_str("#374151");
|
|
ctx.fill_rect(0.0, 0.0, size as f64, size as f64);
|
|
|
|
// Helper to load and draw an image at a grid position
|
|
let draw_at_position =
|
|
|path: &str,
|
|
pos: usize,
|
|
cache: &Rc<RefCell<HashMap<String, web_sys::HtmlImageElement>>>,
|
|
ctx: &web_sys::CanvasRenderingContext2d| {
|
|
let normalized_path = normalize_asset_path(path);
|
|
let mut cache_borrow = cache.borrow_mut();
|
|
let row = pos / 3;
|
|
let col = pos % 3;
|
|
let x = (col * cell_size as usize) as f64;
|
|
let y = (row * cell_size as usize) as f64;
|
|
let sz = cell_size as f64;
|
|
|
|
if let Some(img) = cache_borrow.get(&normalized_path) {
|
|
if img.complete() && img.natural_width() > 0 {
|
|
let _ = ctx.draw_image_with_html_image_element_and_dw_and_dh(
|
|
img, x, y, sz, sz,
|
|
);
|
|
}
|
|
} else {
|
|
let img = web_sys::HtmlImageElement::new().unwrap();
|
|
let trigger = set_redraw_trigger;
|
|
let onload = Closure::once(Box::new(move || {
|
|
trigger.update(|v| *v += 1);
|
|
}) as Box<dyn FnOnce()>);
|
|
img.set_onload(Some(onload.as_ref().unchecked_ref()));
|
|
onload.forget();
|
|
img.set_src(&normalized_path);
|
|
cache_borrow.insert(normalized_path, img);
|
|
}
|
|
};
|
|
|
|
// Draw layers in order: skin -> clothes -> accessories -> emotion
|
|
for (pos, path) in skin.iter().enumerate() {
|
|
if let Some(p) = path {
|
|
draw_at_position(p, pos, &image_cache, &ctx);
|
|
}
|
|
}
|
|
|
|
for (pos, path) in clothes.iter().enumerate() {
|
|
if let Some(p) = path {
|
|
draw_at_position(p, pos, &image_cache, &ctx);
|
|
}
|
|
}
|
|
|
|
for (pos, path) in accessories.iter().enumerate() {
|
|
if let Some(p) = path {
|
|
draw_at_position(p, pos, &image_cache, &ctx);
|
|
}
|
|
}
|
|
|
|
for (pos, path) in emotion.iter().enumerate() {
|
|
if let Some(p) = path {
|
|
draw_at_position(p, pos, &image_cache, &ctx);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
view! {
|
|
<canvas
|
|
node_ref=canvas_ref
|
|
style=format!("width: {}px; height: {}px;", size, size)
|
|
class="rounded"
|
|
/>
|
|
}
|
|
}
|