coworkunion/chattyness
SHA256
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix prop renders

Browse source 
* Incorporate prop scaling
* Props now render to a canvas
This commit is contained in:
Evan Carroll 2026-01-23 16:00:47 -06:00
parent af89394df1
commit a2841c413d
21 changed files with 942 additions and 353 deletions
Download patch file Download diff file Expand all files Collapse all files

2
crates/chattyness-admin-ui/src/api.rs
View file

@ -9,6 +9,8 @@ pub mod config;
#[cfg(feature = "ssr")]
pub mod dashboard;
#[cfg(feature = "ssr")]
pub mod loose_props;
#[cfg(feature = "ssr")]
pub mod props;
#[cfg(feature = "ssr")]
pub mod realms;

75
crates/chattyness-admin-ui/src/api/loose_props.rs Normal file
View file

@ -0,0 +1,75 @@
//! Loose props management API handlers for admin UI.
use axum::Json;
use axum::extract::Path;
use chattyness_db::{models::LooseProp, queries::loose_props};
use chattyness_error::AppError;
use serde::Deserialize;
use uuid::Uuid;
use crate::auth::AdminConn;
// =============================================================================
// API Types
// =============================================================================
/// Request to update loose prop scale.
#[derive(Debug, Deserialize)]
pub struct UpdateLoosePropScaleRequest {
/// Scale factor (0.1 - 10.0).
pub scale: f32,
}
// =============================================================================
// API Handlers
// =============================================================================
/// Get a loose prop by ID.
pub async fn get_loose_prop(
admin_conn: AdminConn,
Path(loose_prop_id): Path<Uuid>,
) -> Result<Json<LooseProp>, AppError> {
let conn = admin_conn.0;
let mut guard = conn.acquire().await;
let prop = loose_props::get_loose_prop_by_id(&mut *guard, loose_prop_id)
.await?
.ok_or_else(|| AppError::NotFound("Loose prop not found or has expired".to_string()))?;
Ok(Json(prop))
}
/// Update loose prop scale.
///
/// Server admins can update any loose prop scale.
pub async fn update_loose_prop_scale(
admin_conn: AdminConn,
Path(loose_prop_id): Path<Uuid>,
Json(req): Json<UpdateLoosePropScaleRequest>,
) -> Result<Json<LooseProp>, AppError> {
let conn = admin_conn.0;
let mut guard = conn.acquire().await;
let prop = loose_props::update_loose_prop_scale(&mut *guard, loose_prop_id, req.scale).await?;
tracing::info!(
"Updated loose prop {} scale to {}",
loose_prop_id,
req.scale
);
Ok(Json(prop))
}
/// List loose props in a scene/channel.
pub async fn list_loose_props(
admin_conn: AdminConn,
Path(scene_id): Path<Uuid>,
) -> Result<Json<Vec<LooseProp>>, AppError> {
let conn = admin_conn.0;
let mut guard = conn.acquire().await;
let props = loose_props::list_channel_loose_props(&mut *guard, scene_id).await?;
Ok(Json(props))
}

15
crates/chattyness-admin-ui/src/api/routes.rs
View file

@ -5,7 +5,7 @@ use axum::{
routing::{delete, get, post, put},
};
use super::{auth, avatars, config, dashboard, props, realms, scenes, spots, staff, users};
use super::{auth, avatars, config, dashboard, loose_props, props, realms, scenes, spots, staff, users};
use crate::app::AdminAppState;
/// Create the admin API router.
@ -85,6 +85,19 @@ pub fn admin_api_router() -> Router<AdminAppState> {
"/props/{prop_id}",
get(props::get_prop).delete(props::delete_prop),
)
// API - Loose Props (scene props)
.route(
"/scenes/{scene_id}/loose_props",
get(loose_props::list_loose_props),
)
.route(
"/loose_props/{loose_prop_id}",
get(loose_props::get_loose_prop),
)
.route(
"/loose_props/{loose_prop_id}/scale",
put(loose_props::update_loose_prop_scale),
)
// API - Server Avatars
.route(
"/avatars",

2
crates/chattyness-admin-ui/src/models.rs
View file

@ -239,6 +239,8 @@ pub struct PropDetail {
pub default_layer: Option<String>,
/// Grid position (0-8): top row 0,1,2 / middle 3,4,5 / bottom 6,7,8
pub default_position: Option<i16>,
/// Default scale factor (0.1 - 10.0) applied when prop is dropped to canvas.
pub default_scale: f32,
pub is_unique: bool,
pub is_transferable: bool,
pub is_portable: bool,

3
crates/chattyness-admin-ui/src/pages/props_detail.rs
View file

@ -95,6 +95,9 @@ fn PropDetailView(prop: PropDetail) -> impl IntoView {
None => "Not set".to_string(),
}}
</DetailItem>
<DetailItem label="Default Scale">
{format!("{}%", (prop.default_scale * 100.0) as i32)}
</DetailItem>
<DetailItem label="Status">
{if prop.is_active {
view! { <span class="status-badge status-active">"Active"</span> }.into_any()

15
crates/chattyness-db/src/models.rs
View file

@ -889,6 +889,8 @@ pub struct LooseProp {
pub realm_prop_id: Option<Uuid>,
pub position_x: f64,
pub position_y: f64,
/// Scale factor (0.1 - 10.0) inherited from prop definition at drop time.
pub scale: f32,
pub dropped_by: Option<Uuid>,
pub expires_at: Option<DateTime<Utc>>,
pub created_at: DateTime<Utc>,
@ -915,6 +917,8 @@ pub struct ServerProp {
pub default_emotion: Option<EmotionState>,
/// Grid position (0-8): top row 0,1,2 / middle 3,4,5 / bottom 6,7,8
pub default_position: Option<i16>,
/// Default scale factor (0.1 - 10.0) applied when prop is dropped to canvas.
pub default_scale: f32,
pub is_unique: bool,
pub is_transferable: bool,
pub is_portable: bool,
@ -966,6 +970,9 @@ pub struct CreateServerPropRequest {
/// Whether prop appears in the public Server inventory tab.
#[serde(default)]
pub public: Option<bool>,
/// Default scale factor (0.1 - 10.0) applied when prop is dropped to canvas.
#[serde(default)]
pub default_scale: Option<f32>,
}
#[cfg(feature = "ssr")]
@ -999,6 +1006,14 @@ impl CreateServerPropRequest {
.to_string(),
));
}
// Validate scale range (0.1 - 10.0)
if let Some(scale) = self.default_scale {
if !(0.1..=10.0).contains(&scale) {
return Err(AppError::Validation(
"default_scale must be between 0.1 and 10.0".to_string(),
));
}
}
Ok(())
}

126
crates/chattyness-db/src/queries/loose_props.rs
View file

@ -46,6 +46,7 @@ pub async fn list_channel_loose_props<'e>(
lp.realm_prop_id,
ST_X(lp.position) as position_x,
ST_Y(lp.position) as position_y,
lp.scale,
lp.dropped_by,
lp.expires_at,
lp.created_at,
@ -81,6 +82,7 @@ pub async fn drop_prop_to_canvas<'e>(
) -> Result<LooseProp, AppError> {
// Single CTE that checks existence/droppability and performs the operation atomically.
// Returns status flags plus the LooseProp data (if successful).
// Includes scale inherited from the source prop's default_scale.
let result: Option<(
bool,
bool,
@ -91,6 +93,7 @@ pub async fn drop_prop_to_canvas<'e>(
Option<Uuid>,
Option<f32>,
Option<f32>,
Option<f32>,
Option<Uuid>,
Option<chrono::DateTime<chrono::Utc>>,
Option<chrono::DateTime<chrono::Utc>>,
@ -99,9 +102,18 @@ pub async fn drop_prop_to_canvas<'e>(
)> = sqlx::query_as(
r#"
WITH item_info AS (
SELECT id, is_droppable, server_prop_id, realm_prop_id, prop_name, prop_asset_path
FROM auth.inventory
WHERE id = $1 AND user_id = $2
SELECT
inv.id,
inv.is_droppable,
inv.server_prop_id,
inv.realm_prop_id,
inv.prop_name,
inv.prop_asset_path,
COALESCE(sp.default_scale, rp.default_scale, 1.0) as default_scale
FROM auth.inventory inv
LEFT JOIN server.props sp ON inv.server_prop_id = sp.id
LEFT JOIN realm.props rp ON inv.realm_prop_id = rp.id
WHERE inv.id = $1 AND inv.user_id = $2
),
deleted_item AS (
DELETE FROM auth.inventory
@ -114,6 +126,7 @@ pub async fn drop_prop_to_canvas<'e>(
server_prop_id,
realm_prop_id,
position,
scale,
dropped_by,
expires_at
)
@ -122,6 +135,7 @@ pub async fn drop_prop_to_canvas<'e>(
di.server_prop_id,
di.realm_prop_id,
public.make_virtual_point($4::real, $5::real),
(SELECT default_scale FROM item_info),
$2,
now() + interval '30 minutes'
FROM deleted_item di
@ -132,6 +146,7 @@ pub async fn drop_prop_to_canvas<'e>(
realm_prop_id,
ST_X(position)::real as position_x,
ST_Y(position)::real as position_y,
scale,
dropped_by,
expires_at,
created_at
@ -146,6 +161,7 @@ pub async fn drop_prop_to_canvas<'e>(
ip.realm_prop_id,
ip.position_x,
ip.position_y,
ip.scale,
ip.dropped_by,
ip.expires_at,
ip.created_at,
@ -171,19 +187,19 @@ pub async fn drop_prop_to_canvas<'e>(
"Unexpected error dropping prop to canvas".to_string(),
))
}
Some((false, _, _, _, _, _, _, _, _, _, _, _, _, _)) => {
Some((false, _, _, _, _, _, _, _, _, _, _, _, _, _, _)) => {
// Item didn't exist
Err(AppError::NotFound(
"Inventory item not found or not owned by user".to_string(),
))
}
Some((true, false, _, _, _, _, _, _, _, _, _, _, _, _)) => {
Some((true, false, _, _, _, _, _, _, _, _, _, _, _, _, _)) => {
// Item existed but is not droppable
Err(AppError::Forbidden(
"This prop cannot be dropped - it is an essential prop".to_string(),
))
}
Some((true, true, false, _, _, _, _, _, _, _, _, _, _, _)) => {
Some((true, true, false, _, _, _, _, _, _, _, _, _, _, _, _)) => {
// Item was droppable but delete failed (shouldn't happen)
Err(AppError::Internal(
"Unexpected error dropping prop to canvas".to_string(),
@ -199,6 +215,7 @@ pub async fn drop_prop_to_canvas<'e>(
realm_prop_id,
Some(position_x),
Some(position_y),
Some(scale),
dropped_by,
Some(expires_at),
Some(created_at),
@ -213,6 +230,7 @@ pub async fn drop_prop_to_canvas<'e>(
realm_prop_id,
position_x: position_x.into(),
position_y: position_y.into(),
scale,
dropped_by,
expires_at: Some(expires_at),
created_at,
@ -313,6 +331,102 @@ pub async fn pick_up_loose_prop<'e>(
Ok(item)
}
/// Update the scale of a loose prop.
///
/// Server admins can update any loose prop.
/// Realm admins can update loose props in their realm.
pub async fn update_loose_prop_scale<'e>(
executor: impl PgExecutor<'e>,
loose_prop_id: Uuid,
scale: f32,
) -> Result<LooseProp, AppError> {
// Validate scale range
if !(0.1..=10.0).contains(&scale) {
return Err(AppError::Validation(
"Scale must be between 0.1 and 10.0".to_string(),
));
}
let prop = sqlx::query_as::<_, LooseProp>(
r#"
WITH updated AS (
UPDATE scene.loose_props
SET scale = $2
WHERE id = $1
AND (expires_at IS NULL OR expires_at > now())
RETURNING
id,
instance_id as channel_id,
server_prop_id,
realm_prop_id,
ST_X(position) as position_x,
ST_Y(position) as position_y,
scale,
dropped_by,
expires_at,
created_at
)
SELECT
u.id,
u.channel_id,
u.server_prop_id,
u.realm_prop_id,
u.position_x,
u.position_y,
u.scale,
u.dropped_by,
u.expires_at,
u.created_at,
COALESCE(sp.name, rp.name) as prop_name,
COALESCE(sp.asset_path, rp.asset_path) as prop_asset_path
FROM updated u
LEFT JOIN server.props sp ON u.server_prop_id = sp.id
LEFT JOIN realm.props rp ON u.realm_prop_id = rp.id
"#,
)
.bind(loose_prop_id)
.bind(scale)
.fetch_optional(executor)
.await?
.ok_or_else(|| AppError::NotFound("Loose prop not found or has expired".to_string()))?;
Ok(prop)
}
/// Get a loose prop by ID.
pub async fn get_loose_prop_by_id<'e>(
executor: impl PgExecutor<'e>,
loose_prop_id: Uuid,
) -> Result<Option<LooseProp>, AppError> {
let prop = sqlx::query_as::<_, LooseProp>(
r#"
SELECT
lp.id,
lp.instance_id as channel_id,
lp.server_prop_id,
lp.realm_prop_id,
ST_X(lp.position) as position_x,
ST_Y(lp.position) as position_y,
lp.scale,
lp.dropped_by,
lp.expires_at,
lp.created_at,
COALESCE(sp.name, rp.name) as prop_name,
COALESCE(sp.asset_path, rp.asset_path) as prop_asset_path
FROM scene.loose_props lp
LEFT JOIN server.props sp ON lp.server_prop_id = sp.id
LEFT JOIN realm.props rp ON lp.realm_prop_id = rp.id
WHERE lp.id = $1
AND (lp.expires_at IS NULL OR lp.expires_at > now())
"#,
)
.bind(loose_prop_id)
.fetch_optional(executor)
.await?;
Ok(prop)
}
/// Delete expired loose props.
///
/// Returns the number of props deleted.

20
crates/chattyness-db/src/queries/props.rs
View file

@ -48,6 +48,7 @@ pub async fn get_server_prop_by_id<'e>(
default_layer,
default_emotion,
default_position,
default_scale,
is_unique,
is_transferable,
is_portable,
@ -116,20 +117,23 @@ pub async fn create_server_prop<'e>(
let is_droppable = req.droppable.unwrap_or(true);
let is_public = req.public.unwrap_or(false);
let default_scale = req.default_scale.unwrap_or(1.0);
let prop = sqlx::query_as::<_, ServerProp>(
r#"
INSERT INTO server.props (
name, slug, description, tags, asset_path,
default_layer, default_emotion, default_position,
default_scale,
is_droppable, is_public,
created_by
)
VALUES (
$1, $2, $3, $4, $5,
$6::server.avatar_layer, $7::server.emotion_state, $8,
$9, $10,
$11
$9,
$10, $11,
$12
)
RETURNING
id,
@ -142,6 +146,7 @@ pub async fn create_server_prop<'e>(
default_layer,
default_emotion,
default_position,
default_scale,
is_unique,
is_transferable,
is_portable,
@ -163,6 +168,7 @@ pub async fn create_server_prop<'e>(
.bind(&default_layer)
.bind(&default_emotion)
.bind(default_position)
.bind(default_scale)
.bind(is_droppable)
.bind(is_public)
.bind(created_by)
@ -207,20 +213,23 @@ pub async fn upsert_server_prop<'e>(
let is_droppable = req.droppable.unwrap_or(true);
let is_public = req.public.unwrap_or(false);
let default_scale = req.default_scale.unwrap_or(1.0);
let prop = sqlx::query_as::<_, ServerProp>(
r#"
INSERT INTO server.props (
name, slug, description, tags, asset_path,
default_layer, default_emotion, default_position,
default_scale,
is_droppable, is_public,
created_by
)
VALUES (
$1, $2, $3, $4, $5,
$6::server.avatar_layer, $7::server.emotion_state, $8,
$9, $10,
$11
$9,
$10, $11,
$12
)
ON CONFLICT (slug) DO UPDATE SET
name = EXCLUDED.name,
@ -230,6 +239,7 @@ pub async fn upsert_server_prop<'e>(
default_layer = EXCLUDED.default_layer,
default_emotion = EXCLUDED.default_emotion,
default_position = EXCLUDED.default_position,
default_scale = EXCLUDED.default_scale,
is_droppable = EXCLUDED.is_droppable,
is_public = EXCLUDED.is_public,
updated_at = now()
@ -244,6 +254,7 @@ pub async fn upsert_server_prop<'e>(
default_layer,
default_emotion,
default_position,
default_scale,
is_unique,
is_transferable,
is_portable,
@ -265,6 +276,7 @@ pub async fn upsert_server_prop<'e>(
.bind(&default_layer)
.bind(&default_emotion)
.bind(default_position)
.bind(default_scale)
.bind(is_droppable)
.bind(is_public)
.bind(created_by)

14
crates/chattyness-db/src/ws_messages.rs
View file

@ -104,6 +104,14 @@ pub enum ClientMessage {
/// Request to refresh identity after registration (guest → user conversion).
/// Server will fetch updated user data and broadcast to all members.
RefreshIdentity,
/// Update a loose prop's scale (moderator only).
UpdateProp {
/// The loose prop ID to update.
loose_prop_id: Uuid,
/// New scale factor (0.1 - 10.0).
scale: f32,
},
}
/// Server-to-client WebSocket messages.
@ -221,6 +229,12 @@ pub enum ServerMessage {
prop_id: Uuid,
},
/// A prop was updated (scale changed) - clients should update their local copy.
PropRefresh {
/// The updated prop with all current values.
prop: LooseProp,
},
/// A member updated their avatar appearance.
AvatarUpdated {
/// User ID of the member.

44
crates/chattyness-user-ui/src/api/websocket.rs
View file

@ -1419,6 +1419,50 @@ async fn handle_socket(
}
}
}
ClientMessage::UpdateProp { loose_prop_id, scale } => {
// Check if user is a moderator
let is_mod = match memberships::is_moderator(&pool, user_id, realm_id).await {
Ok(result) => result,
Err(e) => {
tracing::error!("[WS] Failed to check moderator status: {:?}", e);
false
}
};
if !is_mod {
let _ = direct_tx.send(ServerMessage::Error {
code: "NOT_MODERATOR".to_string(),
message: "You do not have permission to update props".to_string(),
}).await;
continue;
}
// Update the prop scale
match loose_props::update_loose_prop_scale(
&mut *recv_conn,
loose_prop_id,
scale,
).await {
Ok(updated_prop) => {
#[cfg(debug_assertions)]
tracing::debug!(
"[WS] User {} updated prop {} scale to {}",
user_id,
loose_prop_id,
scale
);
// Broadcast the updated prop to all users in the channel
let _ = tx.send(ServerMessage::PropRefresh { prop: updated_prop });
}
Err(e) => {
tracing::error!("[WS] Update prop failed: {:?}", e);
let _ = direct_tx.send(ServerMessage::Error {
code: "UPDATE_PROP_FAILED".to_string(),
message: format!("{:?}", e),
}).await;
}
}
}
}
}
Message::Close(close_frame) => {

4
crates/chattyness-user-ui/src/components.rs
View file

@ -2,6 +2,7 @@
pub mod avatar_canvas;
pub mod avatar_editor;
pub mod canvas_utils;
pub mod avatar_store;
pub mod avatar_thumbnail;
pub mod chat;
@ -17,6 +18,7 @@ pub mod keybindings;
pub mod keybindings_popup;
pub mod layout;
pub mod log_popup;
pub mod loose_prop_canvas;
pub mod modals;
pub mod notifications;
pub mod register_modal;
@ -31,6 +33,7 @@ pub mod ws_client;
pub use avatar_canvas::*;
pub use avatar_editor::*;
pub use avatar_store::*;
pub use canvas_utils::*;
pub use avatar_thumbnail::*;
pub use chat::*;
pub use chat_types::*;
@ -45,6 +48,7 @@ pub use keybindings::*;
pub use keybindings_popup::*;
pub use layout::*;
pub use log_popup::*;
pub use loose_prop_canvas::*;
pub use modals::*;
pub use notifications::*;
pub use register_modal::*;

75
crates/chattyness-user-ui/src/components/avatar_canvas.rs
View file

@ -9,6 +9,10 @@ use uuid::Uuid;
use chattyness_db::models::{ChannelMemberWithAvatar, EmotionState};
#[cfg(feature = "hydrate")]
pub use super::canvas_utils::hit_test_canvas;
#[cfg(feature = "hydrate")]
use super::canvas_utils::normalize_asset_path;
use super::chat_types::{ActiveBubble, emotion_bubble_colors};
/// Base text size multiplier. Text at 100% slider = base_sizes * 1.4
@ -802,15 +806,6 @@ pub fn AvatarCanvas(
}
}
/// Normalize an asset path to be absolute, prefixing with /static/ if needed.
#[cfg(feature = "hydrate")]
fn normalize_asset_path(path: &str) -> String {
if path.starts_with('/') {
path.to_string()
} else {
format!("/static/{}", path)
}
}
/// Draw a speech bubble using the unified CanvasLayout.
///
@ -972,68 +967,6 @@ fn wrap_text(ctx: &web_sys::CanvasRenderingContext2d, text: &str, max_width: f64
lines
}
/// Test if a click at the given client coordinates hits a non-transparent pixel.
///
/// Returns true if the alpha channel at the clicked pixel is > 0.
/// This enables pixel-perfect hit detection on avatar canvases.
#[cfg(feature = "hydrate")]
pub fn hit_test_canvas(canvas: &web_sys::HtmlCanvasElement, client_x: f64, client_y: f64) -> bool {
use wasm_bindgen::JsCast;
// Get the canvas bounding rect to transform client coords to canvas coords
let rect = canvas.get_bounding_client_rect();
// Calculate click position relative to the canvas element
let relative_x = client_x - rect.left();
let relative_y = client_y - rect.top();
// Check if click is within canvas bounds
if relative_x < 0.0
|| relative_y < 0.0
|| relative_x >= rect.width()
|| relative_y >= rect.height()
{
return false;
}
// Transform to canvas pixel coordinates (accounting for CSS scaling)
let canvas_width = canvas.width() as f64;
let canvas_height = canvas.height() as f64;
// Avoid division by zero
if rect.width() == 0.0 || rect.height() == 0.0 {
return false;
}
let scale_x = canvas_width / rect.width();
let scale_y = canvas_height / rect.height();
let pixel_x = (relative_x * scale_x) as f64;
let pixel_y = (relative_y * scale_y) as f64;
// Get the 2D context and read the pixel data using JavaScript interop
if let Ok(Some(ctx)) = canvas.get_context("2d") {
let ctx: web_sys::CanvasRenderingContext2d = ctx.dyn_into().unwrap();
// Use web_sys::CanvasRenderingContext2d::get_image_data with proper error handling
match ctx.get_image_data(pixel_x, pixel_y, 1.0, 1.0) {
Ok(image_data) => {
// Get the pixel data as Clamped<Vec<u8>>
let data = image_data.data();
// Alpha channel is the 4th value (index 3)
if data.len() >= 4 {
return data[3] > 0;
}
}
Err(_) => {
// Security error or other issue with getImageData - assume no hit
return false;
}
}
}
false
}
/// Draw a rounded rectangle path.
#[cfg(feature = "hydrate")]

77
crates/chattyness-user-ui/src/components/canvas_utils.rs Normal file
View file

@ -0,0 +1,77 @@
//! Shared canvas utilities for avatar and prop rendering.
//!
//! Common functions used by both AvatarCanvas and LoosePropCanvas components.
/// Normalize an asset path to be absolute, prefixing with /static/ if needed.
#[cfg(feature = "hydrate")]
pub fn normalize_asset_path(path: &str) -> String {
if path.starts_with('/') {
path.to_string()
} else {
format!("/static/{}", path)
}
}
/// Test if a click at the given client coordinates hits a non-transparent pixel.
///
/// Returns true if the alpha channel at the clicked pixel is > 0.
/// This enables pixel-perfect hit detection on canvas elements.
#[cfg(feature = "hydrate")]
pub fn hit_test_canvas(
canvas: &web_sys::HtmlCanvasElement,
client_x: f64,
client_y: f64,
) -> bool {
use wasm_bindgen::JsCast;
// Get the canvas bounding rect to transform client coords to canvas coords
let rect = canvas.get_bounding_client_rect();
// Calculate click position relative to the canvas element
let relative_x = client_x - rect.left();
let relative_y = client_y - rect.top();
// Check if click is within canvas bounds
if relative_x < 0.0
|| relative_y < 0.0
|| relative_x >= rect.width()
|| relative_y >= rect.height()
{
return false;
}
// Transform to canvas pixel coordinates (accounting for CSS scaling)
let canvas_width = canvas.width() as f64;
let canvas_height = canvas.height() as f64;
// Avoid division by zero
if rect.width() == 0.0 || rect.height() == 0.0 {
return false;
}
let scale_x = canvas_width / rect.width();
let scale_y = canvas_height / rect.height();
let pixel_x = relative_x * scale_x;
let pixel_y = relative_y * scale_y;
// Get the 2D context and read the pixel data
if let Ok(Some(ctx)) = canvas.get_context("2d") {
let ctx: web_sys::CanvasRenderingContext2d = ctx.dyn_into().unwrap();
match ctx.get_image_data(pixel_x, pixel_y, 1.0, 1.0) {
Ok(image_data) => {
let data = image_data.data();
// Alpha channel is the 4th value (index 3)
if data.len() >= 4 {
return data[3] > 0;
}
}
Err(_) => {
return false;
}
}
}
false
}

188
crates/chattyness-user-ui/src/components/loose_prop_canvas.rs Normal file
View file

@ -0,0 +1,188 @@
//! Individual loose prop canvas component for per-prop rendering.
//!
//! Each loose prop gets its own canvas element positioned via CSS transforms.
//! This enables pixel-perfect hit detection using getImageData().
use leptos::prelude::*;
use uuid::Uuid;
use chattyness_db::models::LooseProp;
#[cfg(feature = "hydrate")]
pub use super::canvas_utils::hit_test_canvas;
#[cfg(feature = "hydrate")]
use super::canvas_utils::normalize_asset_path;
use super::settings::{BASE_AVATAR_SCALE, BASE_PROP_SCALE, BASE_PROP_SIZE};
/// Get a unique key for a loose prop (for Leptos For keying).
pub fn loose_prop_key(p: &LooseProp) -> Uuid {
p.id
}
/// Individual loose prop canvas component.
///
/// Renders a single prop with:
/// - CSS transform for position (GPU-accelerated, no redraw on move)
/// - Canvas for prop sprite (redraws only on appearance change)
/// - Pixel-perfect hit detection via getImageData()
#[component]
pub fn LoosePropCanvas(
/// The prop data (as a signal for reactive updates).
prop: Signal<LooseProp>,
/// X scale factor for coordinate conversion.
scale_x: Signal<f64>,
/// Y scale factor for coordinate conversion.
scale_y: Signal<f64>,
/// X offset for coordinate conversion.
offset_x: Signal<f64>,
/// Y offset for coordinate conversion.
offset_y: Signal<f64>,
/// Base prop size in screen pixels (already includes viewport scaling).
base_prop_size: Signal<f64>,
/// Z-index for stacking order.
z_index: i32,
) -> impl IntoView {
let canvas_ref = NodeRef::<leptos::html::Canvas>::new();
// Reactive style for CSS positioning (GPU-accelerated transforms)
let style = move || {
let p = prop.get();
let sx = scale_x.get();
let sy = scale_y.get();
let ox = offset_x.get();
let oy = offset_y.get();
let base_size = base_prop_size.get();
// Calculate rendered prop size
let prop_scale_ratio = BASE_PROP_SCALE / BASE_AVATAR_SCALE;
let prop_size = base_size * prop_scale_ratio * p.scale as f64;
// Screen position (center of prop)
let screen_x = p.position_x * sx + ox;
let screen_y = p.position_y * sy + oy;
// Canvas positioned at top-left corner
let canvas_x = screen_x - prop_size / 2.0;
let canvas_y = screen_y - prop_size / 2.0;
format!(
"position: absolute; \
left: 0; top: 0; \
transform: translate({}px, {}px); \
z-index: {}; \
pointer-events: auto; \
width: {}px; \
height: {}px;",
canvas_x, canvas_y, z_index, prop_size, prop_size
)
};
#[cfg(feature = "hydrate")]
{
use std::cell::RefCell;
use std::rc::Rc;
use wasm_bindgen::closure::Closure;
use wasm_bindgen::JsCast;
// Image cache for this prop
let image_cache: Rc<RefCell<Option<web_sys::HtmlImageElement>>> =
Rc::new(RefCell::new(None));
// Redraw trigger - incremented when image loads
let (redraw_trigger, set_redraw_trigger) = signal(0u32);
// Effect to draw the prop when canvas is ready or appearance changes
Effect::new(move |_| {
// Subscribe to redraw trigger
let _ = redraw_trigger.get();
let p = prop.get();
let base_size = base_prop_size.get();
let Some(canvas) = canvas_ref.get() else {
return;
};
// Calculate rendered prop size
let prop_scale_ratio = BASE_PROP_SCALE / BASE_AVATAR_SCALE;
let prop_size = base_size * prop_scale_ratio * p.scale as f64;
let canvas_el: &web_sys::HtmlCanvasElement = &canvas;
// Set canvas resolution
canvas_el.set_width(prop_size as u32);
canvas_el.set_height(prop_size as u32);
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, prop_size, prop_size);
// Draw prop sprite if asset path available
if !p.prop_asset_path.is_empty() {
let normalized_path = normalize_asset_path(&p.prop_asset_path);
let mut cache = image_cache.borrow_mut();
if let Some(ref img) = *cache {
// Image in cache - draw if loaded
if img.complete() && img.natural_width() > 0 {
let _ = ctx.draw_image_with_html_image_element_and_dw_and_dh(
img, 0.0, 0.0, prop_size, prop_size,
);
}
} else {
// Not in cache - create and load
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 = Some(img);
}
} else {
// Fallback: draw placeholder circle with prop name
ctx.begin_path();
let _ = ctx.arc(
prop_size / 2.0,
prop_size / 2.0,
prop_size / 2.0 - 2.0,
0.0,
std::f64::consts::PI * 2.0,
);
ctx.set_fill_style_str("#f59e0b");
ctx.fill();
ctx.set_stroke_style_str("#d97706");
ctx.set_line_width(2.0);
ctx.stroke();
// Draw prop name
let text_scale = prop_size / (BASE_PROP_SIZE * BASE_PROP_SCALE);
ctx.set_fill_style_str("#fff");
ctx.set_font(&format!("{}px sans-serif", 10.0 * text_scale));
ctx.set_text_align("center");
ctx.set_text_baseline("middle");
let _ = ctx.fill_text(&p.prop_name, prop_size / 2.0, prop_size / 2.0);
}
});
}
// Compute data-prop-id reactively
let data_prop_id = move || prop.get().id.to_string();
view! {
<canvas
node_ref=canvas_ref
style=style
data-prop-id=data_prop_id
/>
}
}

562
crates/chattyness-user-ui/src/components/scene_viewer.rs
View file

@ -15,13 +15,15 @@ use uuid::Uuid;
use chattyness_db::models::{ChannelMemberWithAvatar, LooseProp, Scene};
#[cfg(feature = "hydrate")]
use super::avatar_canvas::hit_test_canvas;
use super::avatar_canvas::{AvatarCanvas, member_key};
#[cfg(feature = "hydrate")]
use super::canvas_utils::hit_test_canvas;
use super::chat_types::ActiveBubble;
use super::context_menu::{ContextMenu, ContextMenuItem};
use super::loose_prop_canvas::LoosePropCanvas;
use super::settings::{
BASE_PROP_SIZE, REFERENCE_HEIGHT, REFERENCE_WIDTH, ViewerSettings, calculate_min_zoom,
BASE_AVATAR_SCALE, BASE_PROP_SCALE, BASE_PROP_SIZE, REFERENCE_HEIGHT, REFERENCE_WIDTH,
ViewerSettings, calculate_min_zoom,
};
use super::ws_client::FadingMember;
use crate::utils::parse_bounds_dimensions;
@ -60,6 +62,12 @@ pub fn RealmSceneViewer(
/// Callback when whisper is requested on a member.
#[prop(optional, into)]
on_whisper_request: Option<Callback<String>>,
/// Whether the current user is a moderator (can edit prop scales).
#[prop(optional, into)]
is_moderator: Option<Signal<bool>>,
/// Callback when prop scale is updated (moderator only).
#[prop(optional, into)]
on_prop_scale_update: Option<Callback<(Uuid, f32)>>,
) -> impl IntoView {
let is_guest = is_guest.unwrap_or_else(|| Signal::derive(|| false));
// Use default settings if none provided
@ -103,10 +111,9 @@ pub fn RealmSceneViewer(
let has_background_image = scene.background_image_path.is_some();
let image_path = scene.background_image_path.clone().unwrap_or_default();
// Canvas refs for background and props layers
// Avatar layer now uses individual canvas elements per user
// Canvas ref for background layer
// Avatar and prop layers use individual canvas elements per user/prop
let bg_canvas_ref = NodeRef::<leptos::html::Canvas>::new();
let props_canvas_ref = NodeRef::<leptos::html::Canvas>::new();
// Outer container ref for middle-mouse drag scrolling
let outer_container_ref = NodeRef::<leptos::html::Div>::new();
@ -121,25 +128,72 @@ pub fn RealmSceneViewer(
// Signal to track when scale factors have been properly calculated
let (scales_ready, set_scales_ready) = signal(false);
// Context menu state
// Context menu state (for avatar whisper)
let (context_menu_open, set_context_menu_open) = signal(false);
let (context_menu_position, set_context_menu_position) = signal((0.0_f64, 0.0_f64));
let (context_menu_target, set_context_menu_target) = signal(Option::<String>::None);
// Prop context menu state (for moderator scale editing)
let (prop_context_menu_open, set_prop_context_menu_open) = signal(false);
let (prop_context_menu_position, set_prop_context_menu_position) = signal((0.0_f64, 0.0_f64));
let (prop_context_menu_target, set_prop_context_menu_target) = signal(Option::<Uuid>::None);
// Scale mode state (when dragging to resize prop)
let (scale_mode_active, set_scale_mode_active) = signal(false);
let (scale_mode_prop_id, set_scale_mode_prop_id) = signal(Option::<Uuid>::None);
let (scale_mode_initial_scale, set_scale_mode_initial_scale) = signal(1.0_f32);
let (scale_mode_preview_scale, set_scale_mode_preview_scale) = signal(1.0_f32);
// Prop center in canvas coordinates (for scale calculation)
let (scale_mode_prop_center, set_scale_mode_prop_center) = signal((0.0_f64, 0.0_f64));
// Handle overlay click for movement or prop pickup
// TODO: Add hit-testing for avatar clicks
// Uses pixel-perfect hit testing on prop canvases
#[cfg(feature = "hydrate")]
let on_overlay_click = {
let on_move = on_move.clone();
let on_prop_click = on_prop_click.clone();
move |ev: web_sys::MouseEvent| {
// Get click position relative to the target element
use wasm_bindgen::JsCast;
let client_x = ev.client_x() as f64;
let client_y = ev.client_y() as f64;
// First check for pixel-perfect prop hits
let document = web_sys::window().unwrap().document().unwrap();
let mut clicked_prop: Option<Uuid> = None;
// Query prop canvases in the props container
if let Some(container) = document.query_selector(".props-container").ok().flatten() {
let canvases = container.get_elements_by_tag_name("canvas");
let canvas_count = canvases.length();
for i in 0..canvas_count {
if let Some(element) = canvases.item(i) {
if let Ok(canvas) = element.dyn_into::<web_sys::HtmlCanvasElement>() {
if let Some(prop_id_str) = canvas.get_attribute("data-prop-id") {
// Pixel-perfect hit test
if hit_test_canvas(&canvas, client_x, client_y) {
if let Ok(prop_id) = prop_id_str.parse::<Uuid>() {
clicked_prop = Some(prop_id);
break;
}
}
}
}
}
}
}
if let Some(prop_id) = clicked_prop {
on_prop_click.run(prop_id);
} else {
// No prop hit - handle as movement
let target = ev.current_target().unwrap();
let element: web_sys::HtmlElement = target.dyn_into().unwrap();
let rect = element.get_bounding_client_rect();
let click_x = ev.client_x() as f64 - rect.left();
let click_y = ev.client_y() as f64 - rect.top();
let click_x = client_x - rect.left();
let click_y = client_y - rect.top();
let sx = scale_x.get();
let sy = scale_y.get();
@ -153,38 +207,74 @@ pub fn RealmSceneViewer(
let scene_x = scene_x.max(0.0).min(scene_width as f64);
let scene_y = scene_y.max(0.0).min(scene_height as f64);
// Check if click is within 40px of any loose prop
let current_props = loose_props.get();
let prop_click_radius = 40.0;
let mut clicked_prop: Option<Uuid> = None;
for prop in &current_props {
let dx = scene_x - prop.position_x;
let dy = scene_y - prop.position_y;
let distance = (dx * dx + dy * dy).sqrt();
if distance <= prop_click_radius {
clicked_prop = Some(prop.id);
break;
}
}
if let Some(prop_id) = clicked_prop {
on_prop_click.run(prop_id);
} else {
on_move.run((scene_x, scene_y));
}
}
}
};
// Handle right-click for context menu on avatars
// Handle right-click for context menu on avatars or props (moderators only for props)
#[cfg(feature = "hydrate")]
let on_overlay_contextmenu = {
let current_user_id = current_user_id.clone();
move |ev: web_sys::MouseEvent| {
use wasm_bindgen::JsCast;
// Guests cannot message other users - don't show context menu
// Get click position
let client_x = ev.client_x() as f64;
let client_y = ev.client_y() as f64;
// Check if moderator and if click is on a prop (for scale editing)
let is_mod = is_moderator.map(|s| s.get()).unwrap_or(false);
if is_mod {
let document = web_sys::window().unwrap().document().unwrap();
// Query prop canvases for pixel-perfect hit testing
if let Some(container) = document.query_selector(".props-container").ok().flatten()
{
let canvases = container.get_elements_by_tag_name("canvas");
let canvas_count = canvases.length();
for i in 0..canvas_count {
if let Some(element) = canvases.item(i) {
if let Ok(canvas) = element.dyn_into::<web_sys::HtmlCanvasElement>() {
if let Some(prop_id_str) = canvas.get_attribute("data-prop-id") {
// Pixel-perfect hit test
if hit_test_canvas(&canvas, client_x, client_y) {
if let Ok(prop_id) = prop_id_str.parse::<Uuid>() {
// Found a prop - show prop context menu
ev.prevent_default();
set_prop_context_menu_position.set((client_x, client_y));
set_prop_context_menu_target.set(Some(prop_id));
set_prop_context_menu_open.set(true);
// Find the prop data for scale mode
if let Some(prop) = loose_props
.get()
.iter()
.find(|p| p.id == prop_id)
{
set_scale_mode_initial_scale.set(prop.scale);
// Get prop center from canvas bounding rect
let rect = canvas.get_bounding_client_rect();
let prop_canvas_x =
rect.left() + rect.width() / 2.0;
let prop_canvas_y =
rect.top() + rect.height() / 2.0;
set_scale_mode_prop_center
.set((prop_canvas_x, prop_canvas_y));
}
return;
}
}
}
}
}
}
}
}
// Guests cannot message other users - don't show avatar context menu
if is_guest.get() {
return;
}
@ -192,10 +282,6 @@ pub fn RealmSceneViewer(
// Get current user identity for filtering
let my_user_id = current_user_id.map(|s| s.get()).flatten();
// Get click position
let client_x = ev.client_x() as f64;
let client_y = ev.client_y() as f64;
// Query all avatar canvases and check for hit
let document = web_sys::window().unwrap().document().unwrap();
@ -485,117 +571,9 @@ pub fn RealmSceneViewer(
draw_bg.forget();
});
// =========================================================
// Props Effect - runs when loose_props or settings change
// =========================================================
Effect::new(move |_| {
// Track signals
let current_props = loose_props.get();
let current_pan_mode = is_pan_mode.get();
let current_zoom = zoom_level.get();
let current_enlarge = enlarge_props.get();
// Skip drawing if scale factors haven't been calculated yet
if !scales_ready.get() {
return;
}
// Read scale factors inside the Effect (reactive context) before the closure
let sx = scale_x.get();
let sy = scale_y.get();
let ox = offset_x.get();
let oy = offset_y.get();
let Some(canvas) = props_canvas_ref.get() else {
return;
};
let canvas_el: &web_sys::HtmlCanvasElement = &canvas;
let canvas_el = canvas_el.clone();
let draw_props_closure = Closure::once(Box::new(move || {
let canvas_width = canvas_el.width();
let canvas_height = canvas_el.height();
if canvas_width == 0 || canvas_height == 0 {
return;
}
if let Ok(Some(ctx)) = canvas_el.get_context("2d") {
let ctx: web_sys::CanvasRenderingContext2d =
ctx.dyn_into::<web_sys::CanvasRenderingContext2d>().unwrap();
// Clear with transparency
ctx.clear_rect(0.0, 0.0, canvas_width as f64, canvas_height as f64);
// Calculate prop size based on mode
let prop_size = calculate_prop_size(
current_pan_mode,
current_zoom,
current_enlarge,
sx,
sy,
scene_width_f,
scene_height_f,
);
// Draw loose props
draw_loose_props(&ctx, &current_props, sx, sy, ox, oy, prop_size);
}
}) as Box<dyn FnOnce()>);
let window = web_sys::window().unwrap();
let _ = window.request_animation_frame(draw_props_closure.as_ref().unchecked_ref());
draw_props_closure.forget();
});
// =========================================================
// Sync canvas sizes when mode or zoom changes
// =========================================================
Effect::new(move |_| {
let current_pan_mode = is_pan_mode.get();
let current_zoom = zoom_level.get();
// Wait for scales to be ready (background drawn)
if !scales_ready.get() {
return;
}
if current_pan_mode {
// Pan mode: resize props and avatar canvases to match background
let canvas_width = (scene_width_f * current_zoom) as u32;
let canvas_height = (scene_height_f * current_zoom) as u32;
if let Some(canvas) = props_canvas_ref.get() {
let canvas_el: &web_sys::HtmlCanvasElement = &canvas;
if canvas_el.width() != canvas_width || canvas_el.height() != canvas_height {
canvas_el.set_width(canvas_width);
canvas_el.set_height(canvas_height);
}
}
// Note: Avatar canvases are now individual elements that manage their own sizes
} else {
// Fit mode: sync props and avatar canvases to background canvas size
if let Some(bg_canvas) = bg_canvas_ref.get() {
let bg_el: &web_sys::HtmlCanvasElement = &bg_canvas;
let canvas_width = bg_el.width();
let canvas_height = bg_el.height();
if canvas_width > 0 && canvas_height > 0 {
if let Some(canvas) = props_canvas_ref.get() {
let canvas_el: &web_sys::HtmlCanvasElement = &canvas;
if canvas_el.width() != canvas_width
|| canvas_el.height() != canvas_height
{
canvas_el.set_width(canvas_width);
canvas_el.set_height(canvas_height);
}
}
// Note: Avatar canvases are now individual elements that manage their own sizes
}
}
}
});
// Note: Props are now rendered as individual LoosePropCanvas components
// that manage their own positioning and sizing via CSS transforms.
// No shared props canvas or effect needed.
// =========================================================
// Middle mouse button drag-to-pan (only in pan mode)
@ -865,7 +843,7 @@ pub fn RealmSceneViewer(
m
});
// Calculate prop size based on current settings
// Calculate prop size based on current settings (for avatars, uses BASE_AVATAR_SCALE)
let prop_size = Signal::derive(move || {
let current_pan_mode = is_pan_mode.get();
let current_zoom = zoom_level.get();
@ -876,16 +854,17 @@ pub fn RealmSceneViewer(
// Reference scale factor for "enlarge props" mode
let ref_scale = (scene_width_f / REFERENCE_WIDTH).max(scene_height_f / REFERENCE_HEIGHT);
// Avatar size uses BASE_AVATAR_SCALE (60px cells at native size)
if current_pan_mode {
if current_enlarge {
BASE_PROP_SIZE * ref_scale * current_zoom
BASE_PROP_SIZE * BASE_AVATAR_SCALE * ref_scale * current_zoom
} else {
BASE_PROP_SIZE * current_zoom
BASE_PROP_SIZE * BASE_AVATAR_SCALE * current_zoom
}
} else if current_enlarge {
BASE_PROP_SIZE * ref_scale * sx.min(sy)
BASE_PROP_SIZE * BASE_AVATAR_SCALE * ref_scale * sx.min(sy)
} else {
BASE_PROP_SIZE * sx.min(sy)
BASE_PROP_SIZE * BASE_AVATAR_SCALE * sx.min(sy)
}
});
@ -938,13 +917,41 @@ pub fn RealmSceneViewer(
style=move || canvas_style(0)
aria-hidden="true"
/>
// Props layer - loose props, redrawn on drop/pickup
<canvas
node_ref=props_canvas_ref
class=canvas_class
style=move || canvas_style(1)
aria-hidden="true"
// Props container - individual canvases per prop for pixel-perfect hit detection
<div
class="props-container absolute inset-0"
style="z-index: 1; pointer-events: none;"
>
<Show
when=move || scales_ready.get()
fallback=|| ()
>
{move || {
loose_props.get().into_iter().map(|prop| {
let prop_id = prop.id;
// Create a derived signal for this specific prop
let prop_signal = Signal::derive(move || {
loose_props.get()
.into_iter()
.find(|p| p.id == prop_id)
.unwrap_or_else(|| prop.clone())
});
view! {
<LoosePropCanvas
prop=prop_signal
scale_x=scale_x_signal
scale_y=scale_y_signal
offset_x=offset_x_signal
offset_y=offset_y_signal
base_prop_size=prop_size
z_index=5
/>
}
}).collect_view()
}}
</Show>
</div>
// Avatars container - individual canvases per user
<div
class="avatars-container absolute inset-0"
@ -1095,108 +1102,147 @@ pub fn RealmSceneViewer(
set_context_menu_target.set(None);
})
/>
// Context menu for prop interactions (moderators only)
<ContextMenu
open=Signal::derive(move || prop_context_menu_open.get())
position=Signal::derive(move || prop_context_menu_position.get())
header=Signal::derive(move || Some("Prop".to_string()))
items=Signal::derive(move || {
vec![
ContextMenuItem {
label: "Set Scale".to_string(),
action: "set_scale".to_string(),
},
]
})
on_select=Callback::new({
move |action: String| {
if action == "set_scale" {
if let Some(prop_id) = prop_context_menu_target.get() {
// Enter scale mode
set_scale_mode_prop_id.set(Some(prop_id));
set_scale_mode_preview_scale.set(scale_mode_initial_scale.get());
set_scale_mode_active.set(true);
}
}
// Close the menu
set_prop_context_menu_open.set(false);
}
})
on_close=Callback::new(move |_: ()| {
set_prop_context_menu_open.set(false);
set_prop_context_menu_target.set(None);
})
/>
// Scale mode overlay (shown when editing prop scale)
<Show when=move || scale_mode_active.get()>
{move || {
let prop_id = scale_mode_prop_id.get();
let preview_scale = scale_mode_preview_scale.get();
let (center_x, center_y) = scale_mode_prop_center.get();
// Find the prop to get its dimensions
let prop_data = prop_id.and_then(|id| {
loose_props.get().iter().find(|p| p.id == id).cloned()
});
view! {
<div
class="fixed inset-0 z-50 cursor-crosshair"
style="background: rgba(0,0,0,0.3);"
on:mousemove=move |ev| {
#[cfg(feature = "hydrate")]
{
use wasm_bindgen::JsCast;
// Calculate scale based on distance from prop center
let ev: web_sys::MouseEvent = ev.dyn_into().unwrap();
let mouse_x = ev.client_x() as f64;
let mouse_y = ev.client_y() as f64;
let (cx, cy) = scale_mode_prop_center.get();
let dx = mouse_x - cx;
let dy = mouse_y - cy;
let distance = (dx * dx + dy * dy).sqrt();
// Scale formula: distance / 40 gives 1x at 40px
let new_scale = (distance / 40.0).clamp(0.1, 10.0) as f32;
set_scale_mode_preview_scale.set(new_scale);
}
#[cfg(not(feature = "hydrate"))]
let _ = ev;
}
on:mouseup=move |ev| {
#[cfg(feature = "hydrate")]
{
// Apply the scale
if let (Some(prop_id), Some(ref callback)) = (scale_mode_prop_id.get(), on_prop_scale_update.as_ref()) {
let final_scale = scale_mode_preview_scale.get();
callback.run((prop_id, final_scale));
}
// Exit scale mode
set_scale_mode_active.set(false);
set_scale_mode_prop_id.set(None);
}
#[cfg(not(feature = "hydrate"))]
let _ = ev;
}
on:keydown=move |ev| {
#[cfg(feature = "hydrate")]
{
use wasm_bindgen::JsCast;
let ev: web_sys::KeyboardEvent = ev.dyn_into().unwrap();
if ev.key() == "Escape" {
// Cancel scale mode
ev.prevent_default();
set_scale_mode_active.set(false);
set_scale_mode_prop_id.set(None);
}
}
#[cfg(not(feature = "hydrate"))]
let _ = ev;
}
tabindex="0"
>
// Visual feedback: dashed border around prop
{move || {
if let Some(ref _prop) = prop_data {
let prop_size = BASE_PROP_SIZE * BASE_PROP_SCALE * preview_scale as f64;
let half_size = prop_size / 2.0;
view! {
<div
class="absolute pointer-events-none"
style=format!(
"left: {}px; top: {}px; width: {}px; height: {}px; \
border: 2px dashed #fbbf24; \
transform: translate(-50%, -50%); \
box-sizing: border-box;",
center_x, center_y, prop_size, prop_size
)
/>
// Scale indicator
<div
class="absolute bg-gray-900/90 text-yellow-400 px-2 py-1 rounded text-sm font-mono pointer-events-none"
style=format!(
"left: {}px; top: {}px; transform: translate(-50%, 8px);",
center_x, center_y + half_size
)
>
{format!("{:.2}x", preview_scale)}
</div>
}.into_any()
} else {
().into_any()
}
}}
// Instructions
<div class="absolute bottom-4 left-1/2 -translate-x-1/2 bg-gray-900/90 text-white px-4 py-2 rounded text-sm">
"Drag to resize • Release to apply • Escape to cancel"
</div>
</div>
}
}}
</Show>
</div>
</div>
}
}
#[cfg(feature = "hydrate")]
use wasm_bindgen::JsCast;
/// Calculate prop/avatar size based on current rendering mode.
///
/// - Pan mode without enlarge: BASE_PROP_SIZE * zoom_level
/// - Pan mode with enlarge: BASE_PROP_SIZE * reference_scale * zoom_level
/// - Fit mode with enlarge: Reference scaling based on 1920x1080
/// - Fit mode without enlarge: BASE_PROP_SIZE * min(scale_x, scale_y)
#[cfg(feature = "hydrate")]
fn calculate_prop_size(
pan_mode: bool,
zoom_level: f64,
enlarge_props: bool,
scale_x: f64,
scale_y: f64,
scene_width: f64,
scene_height: f64,
) -> f64 {
// Reference scale factor for "enlarge props" mode
let ref_scale = (scene_width / REFERENCE_WIDTH).max(scene_height / REFERENCE_HEIGHT);
if pan_mode {
if enlarge_props {
BASE_PROP_SIZE * ref_scale * zoom_level
} else {
BASE_PROP_SIZE * zoom_level
}
} else if enlarge_props {
// Reference scaling: scale props relative to 1920x1080 reference
BASE_PROP_SIZE * ref_scale * scale_x.min(scale_y)
} else {
// Default: base size scaled to viewport
BASE_PROP_SIZE * scale_x.min(scale_y)
}
}
/// Normalize an asset path to be absolute, prefixing with /static/ if needed.
#[cfg(feature = "hydrate")]
fn normalize_asset_path(path: &str) -> String {
if path.starts_with('/') {
path.to_string()
} else {
format!("/static/{}", path)
}
}
/// Draw loose props on the props canvas layer.
#[cfg(feature = "hydrate")]
fn draw_loose_props(
ctx: &web_sys::CanvasRenderingContext2d,
props: &[LooseProp],
scale_x: f64,
scale_y: f64,
offset_x: f64,
offset_y: f64,
prop_size: f64,
) {
for prop in props {
let x = prop.position_x * scale_x + offset_x;
let y = prop.position_y * scale_y + offset_y;
// Draw prop sprite if asset path available
if !prop.prop_asset_path.is_empty() {
let img = web_sys::HtmlImageElement::new().unwrap();
let img_clone = img.clone();
let ctx_clone = ctx.clone();
let draw_x = x - prop_size / 2.0;
let draw_y = y - prop_size / 2.0;
let size = prop_size;
let onload = wasm_bindgen::closure::Closure::once(Box::new(move || {
let _ = ctx_clone.draw_image_with_html_image_element_and_dw_and_dh(
&img_clone, draw_x, draw_y, size, size,
);
}) as Box<dyn FnOnce()>);
img.set_onload(Some(onload.as_ref().unchecked_ref()));
onload.forget();
img.set_src(&normalize_asset_path(&prop.prop_asset_path));
} else {
// Fallback: draw a placeholder circle with prop name
ctx.begin_path();
let _ = ctx.arc(x, y, prop_size / 2.0, 0.0, std::f64::consts::PI * 2.0);
ctx.set_fill_style_str("#f59e0b"); // Amber color
ctx.fill();
ctx.set_stroke_style_str("#d97706");
ctx.set_line_width(2.0);
ctx.stroke();
// Draw prop name below
let text_scale = prop_size / BASE_PROP_SIZE;
ctx.set_fill_style_str("#fff");
ctx.set_font(&format!("{}px sans-serif", 10.0 * text_scale));
ctx.set_text_align("center");
ctx.set_text_baseline("top");
let _ = ctx.fill_text(&prop.prop_name, x, y + prop_size / 2.0 + 2.0);
}
}
}

13
crates/chattyness-user-ui/src/components/settings.rs
View file

@ -8,8 +8,17 @@ use crate::utils::LocalStoragePersist;
pub const REFERENCE_WIDTH: f64 = 1920.0;
pub const REFERENCE_HEIGHT: f64 = 1080.0;
/// Base size for props and avatars in scene space.
pub const BASE_PROP_SIZE: f64 = 60.0;
/// Base size for props/avatars in scene coordinates.
/// SVG assets are 120x120 pixels - this is the native/full size.
pub const BASE_PROP_SIZE: f64 = 120.0;
/// Scale factor for avatar rendering relative to BASE_PROP_SIZE.
/// Avatars render at 50% (60px cells) to allow merit-based scaling up later.
pub const BASE_AVATAR_SCALE: f64 = 0.5;
/// Scale factor for dropped loose props relative to BASE_PROP_SIZE.
/// Props render at 75% (90px) at default scale=1.0.
pub const BASE_PROP_SCALE: f64 = 0.75;
/// Minimum zoom level (25%).
pub const ZOOM_MIN: f64 = 0.25;

9
crates/chattyness-user-ui/src/components/ws_client.rs
View file

@ -139,6 +139,8 @@ pub enum WsEvent {
PropDropped(LooseProp),
/// A prop was picked up (by prop ID).
PropPickedUp(uuid::Uuid),
/// A prop was updated (scale changed).
PropRefresh(LooseProp),
/// A member started fading out (timeout disconnect).
MemberFading(FadingMember),
/// Welcome message received with current user info.
@ -521,6 +523,7 @@ fn handle_server_message(
LoosePropsSync(Vec<LooseProp>),
PropDropped(LooseProp),
PropPickedUp(uuid::Uuid),
PropRefresh(LooseProp),
Error(WsError),
TeleportApproved(TeleportInfo),
Summoned(SummonInfo),
@ -659,6 +662,9 @@ fn handle_server_message(
// Treat expired props the same as picked up (remove from display)
PostAction::PropPickedUp(prop_id)
}
ServerMessage::PropRefresh { prop } => {
PostAction::PropRefresh(prop)
}
ServerMessage::AvatarUpdated { user_id, avatar } => {
// Find member and update their avatar layers
if let Some(m) = state.members
@ -775,6 +781,9 @@ fn handle_server_message(
PostAction::PropPickedUp(prop_id) => {
on_event.run(WsEvent::PropPickedUp(prop_id));
}
PostAction::PropRefresh(prop) => {
on_event.run(WsEvent::PropRefresh(prop));
}
PostAction::Error(err) => {
on_event.run(WsEvent::Error(err));
}

20
crates/chattyness-user-ui/src/pages/realm.rs
View file

@ -476,6 +476,14 @@ pub fn RealmPage() -> impl IntoView {
}
});
}
WsEvent::PropRefresh(prop) => {
// Update the prop in the loose_props list (replace existing or ignore if not found)
set_loose_props.update(|props| {
if let Some(existing) = props.iter_mut().find(|p| p.id == prop.id) {
*existing = prop;
}
});
}
}
});
@ -1202,6 +1210,16 @@ pub fn RealmPage() -> impl IntoView {
});
});
let is_moderator_signal = Signal::derive(move || is_moderator.get());
#[cfg(feature = "hydrate")]
let ws_for_prop_scale = ws_sender_clone.clone();
let on_prop_scale_update_cb = Callback::new(move |(prop_id, scale): (Uuid, f32)| {
#[cfg(feature = "hydrate")]
ws_for_prop_scale.with_value(|sender| {
if let Some(send_fn) = sender {
send_fn(ClientMessage::UpdateProp { loose_prop_id: prop_id, scale });
}
});
});
view! {
<div class="relative w-full">
<RealmSceneViewer
@ -1223,6 +1241,8 @@ pub fn RealmPage() -> impl IntoView {
current_user_id=Signal::derive(move || current_user_id.get())
is_guest=Signal::derive(move || is_guest.get())
on_whisper_request=on_whisper_request_cb
is_moderator=is_moderator_signal
on_prop_scale_update=on_prop_scale_update_cb
/>
<div class="absolute bottom-0 left-0 right-0 z-10 pb-4 px-4 pointer-events-none">
<ChatInput

3
db/schema/tables/020_auth.sql
View file

@ -279,6 +279,9 @@ CREATE TABLE server.props (
default_emotion server.emotion_state,
default_position SMALLINT CHECK (default_position IS NULL OR default_position BETWEEN 0 AND 8),
-- Default scale factor for dropped props (10% - 1000%)
default_scale REAL NOT NULL DEFAULT 1.0 CHECK (default_scale >= 0.1 AND default_scale <= 10.0),
is_unique BOOLEAN NOT NULL DEFAULT false,
is_transferable BOOLEAN NOT NULL DEFAULT true,
is_portable BOOLEAN NOT NULL DEFAULT true,

3
db/schema/tables/030_realm.sql
View file

@ -194,6 +194,9 @@ CREATE TABLE realm.props (
default_emotion server.emotion_state,
default_position SMALLINT CHECK (default_position IS NULL OR default_position BETWEEN 0 AND 8),
-- Default scale factor for dropped props (10% - 1000%)
default_scale REAL NOT NULL DEFAULT 1.0 CHECK (default_scale >= 0.1 AND default_scale <= 10.0),
is_unique BOOLEAN NOT NULL DEFAULT false,
is_transferable BOOLEAN NOT NULL DEFAULT true,
is_droppable BOOLEAN NOT NULL DEFAULT true,

3
db/schema/tables/045_scene.sql
View file

@ -210,6 +210,9 @@ CREATE TABLE scene.loose_props (
-- Position in scene (PostGIS point, SRID 0)
position public.virtual_point NOT NULL,
-- Scale factor (10% - 1000%), inherited from prop definition at drop time
scale REAL NOT NULL DEFAULT 1.0 CHECK (scale >= 0.1 AND scale <= 10.0),
-- Who dropped it (NULL = spawned by system/script)
dropped_by UUID REFERENCES auth.users(id) ON DELETE SET NULL,