⎇ 7728013012444c20c7fe7c4248c0bc7c296f43f7
crates/apps/gioser-web/src/lib.rs
History
Who touched what
raw
feat(gioser/web): fix mobile swipe, taskbar agnóstica, trazos zodiacales
1//! Entrypoint WASM de la landing GioSer.
2//!
3//! Capas:
4//! - **Canvas WebGL**: chacana animada (gioser-canvas-web).
5//! - **Tips**: 4 botones DOM en los cardinales, posicionados cada frame.
6//! - **Deck** (vista-web): contenedor único con páginas swipeable estilo
7//! Flutter `PageView`. Cada elemento del logo es una página dinámica.
8//! - **Taskbar**: barra abajo con home + brand "GioSer" + tabs activas +
9//! copyleft/email a la derecha. Sincronizada por WASM.
10//!
11//! Acciones (todas pasan por `AppState`):
12//! - `open_or_switch` — click en tip o abrir nueva pestaña.
13//! - `restore_from_tab` — click en cajita de la taskbar.
14//! - `minimize` — botón ─ de la página o Escape.
15//! - `close` — botón × de la página, remueve del taskbar.
16//! - `home` — botón casa o brand, minimiza todo (mantiene tabs).
17//! - `on_swipe` — callback de vista-web cuando el snap cambia.
18
19use std::cell::RefCell;
20use std::rc::Rc;
21
22use barra_web::{Task, TaskList};
23use gioser_canvas_web::{tips, Renderer};
24use pluma_reader_web::Reader;
25use vista_web::Deck;
26use wasm_bindgen::prelude::*;
27use wasm_bindgen::JsCast;
28use web_sys::{
29 Document, Element, Event, HtmlCanvasElement, HtmlElement, KeyboardEvent, MouseEvent,
30 PointerEvent, Window,
31};
32
33const BUTTON_RADIUS_FACTOR: f32 = 1.32;
34const TASKBAR_HEIGHT_PX: f32 = 52.0;
35const BUTTON_HALF_W_PX: f32 = 90.0;
36const BUTTON_HALF_H_PX: f32 = 64.0;
37const VIEWPORT_MARGIN_PX: f32 = 14.0;
38const ELEMENTS: [&str; 4] = ["aire", "fuego", "tierra", "agua"];
39
40#[derive(Default)]
41struct DeckState {
42 /// Pestañas abiertas en orden de apertura. Coincide con páginas en el strip.
43 pages: Vec<String>,
44 /// Cuál es la página visible. `None` = deck minimizado (pestañas siguen
45 /// en la taskbar) o sin pestañas.
46 active: Option<String>,
47}
48
49struct AppState {
50 document: Document,
51 deck: Deck,
52 taskbar: TaskList,
53 state: RefCell<DeckState>,
54}
55
56impl AppState {
57 fn open_or_switch(&self, element: &str, origin_x: f64, origin_y: f64, md_url: &str) {
58 let was_visible = self.state.borrow().active.is_some();
59 let was_in_pages = self.state.borrow().pages.iter().any(|e| e == element);
60 if !was_in_pages {
61 self.ensure_page_dom(element);
62 self.state.borrow_mut().pages.push(element.to_string());
63 }
64 self.state.borrow_mut().active = Some(element.to_string());
65 let idx = self
66 .state
67 .borrow()
68 .pages
69 .iter()
70 .position(|e| e == element)
71 .unwrap_or(0);
72 if was_visible {
73 self.deck.goto(idx, true);
74 } else {
75 self.deck.goto(idx, false);
76 self.show_deck(origin_x, origin_y);
77 }
78 self.sync_active_class();
79 self.sync_taskbar();
80 self.load_md_if_empty(element, md_url);
81 }
82
83 fn restore_from_tab(&self, element: &str, origin_x: f64, origin_y: f64) {
84 let idx_opt = self
85 .state
86 .borrow()
87 .pages
88 .iter()
89 .position(|e| e == element);
90 let Some(idx) = idx_opt else { return };
91 let was_visible = self.state.borrow().active.is_some();
92 self.state.borrow_mut().active = Some(element.to_string());
93 if was_visible {
94 self.deck.goto(idx, true);
95 } else {
96 self.deck.goto(idx, false);
97 self.show_deck(origin_x, origin_y);
98 }
99 self.sync_active_class();
100 self.sync_taskbar();
101 }
102
103 fn minimize(&self, origin_x: f64, origin_y: f64) {
104 self.state.borrow_mut().active = None;
105 self.sync_active_class();
106 self.sync_taskbar();
107 self.hide_deck(origin_x, origin_y);
108 }
109
110 fn close(&self, element: &str, origin_x: f64, origin_y: f64) {
111 let was_active = self.state.borrow().active.as_deref() == Some(element);
112 self.state.borrow_mut().pages.retain(|e| e != element);
113 self.remove_page_dom(element);
114 if was_active {
115 let pages_now: Vec<String> = self.state.borrow().pages.clone();
116 let new_active = pages_now.last().cloned();
117 self.state.borrow_mut().active = new_active.clone();
118 if let Some(new_active) = new_active {
119 let idx = pages_now
120 .iter()
121 .position(|e| e == &new_active)
122 .unwrap_or(0);
123 self.deck.goto(idx, true);
124 } else {
125 self.hide_deck(origin_x, origin_y);
126 }
127 }
128 self.sync_active_class();
129 self.sync_taskbar();
130 }
131
132 fn home(&self) {
133 // Minimiza el deck sin cerrar las pestañas (estilo "show desktop").
134 let (ox, oy) = self
135 .element_center(".taskbar-home")
136 .unwrap_or((24.0, self.viewport_height() - 26.0));
137 self.minimize(ox, oy);
138 }
139
140 fn on_swipe(&self, new_index: usize) {
141 let element = self.state.borrow().pages.get(new_index).cloned();
142 if let Some(element) = element {
143 self.state.borrow_mut().active = Some(element);
144 self.sync_active_class();
145 self.sync_taskbar();
146 }
147 }
148
149 fn show_deck(&self, x: f64, y: f64) {
150 self.set_deck_origin(x, y);
151 if let Some(deck) = self.deck_el() {
152 let _ = deck.class_list().add_1("open");
153 let _ = deck.set_attribute("aria-hidden", "false");
154 }
155 if let Some(body) = self.document.body() {
156 let _ = body.class_list().add_1("deck-visible");
157 }
158 }
159
160 fn hide_deck(&self, x: f64, y: f64) {
161 self.set_deck_origin(x, y);
162 if let Some(deck) = self.deck_el() {
163 let _ = deck.class_list().remove_1("open");
164 let _ = deck.set_attribute("aria-hidden", "true");
165 }
166 if let Some(body) = self.document.body() {
167 let _ = body.class_list().remove_1("deck-visible");
168 }
169 }
170
171 fn deck_el(&self) -> Option<HtmlElement> {
172 self.document
173 .get_element_by_id("deck")
174 .and_then(|e| e.dyn_into::<HtmlElement>().ok())
175 }
176
177 fn set_deck_origin(&self, x: f64, y: f64) {
178 if let Some(deck) = self.deck_el() {
179 let _ = deck.style().set_property("--origin-x", &format!("{:.1}px", x));
180 let _ = deck.style().set_property("--origin-y", &format!("{:.1}px", y));
181 }
182 }
183
184 fn sync_active_class(&self) {
185 if let Some(body) = self.document.body() {
186 let active = self.state.borrow().active.clone();
187 for &e in &ELEMENTS {
188 let cls = format!("deck-active-{}", e);
189 if active.as_deref() == Some(e) {
190 let _ = body.class_list().add_1(&cls);
191 } else {
192 let _ = body.class_list().remove_1(&cls);
193 }
194 }
195 }
196 }
197
198 fn sync_taskbar(&self) {
199 let s = self.state.borrow();
200 let tasks: Vec<Task> = s
201 .pages
202 .iter()
203 .map(|e| {
204 let mut t = Task::new(e.clone(), e.to_uppercase());
205 if s.active.as_deref() == Some(e.as_str()) {
206 t = t.active();
207 }
208 t
209 })
210 .collect();
211 self.taskbar.set_tasks(&tasks);
212 }
213
214 fn ensure_page_dom(&self, element: &str) {
215 let sel = format!(".deck-page[data-element=\"{}\"]", element);
216 if self
217 .document
218 .query_selector(&sel)
219 .ok()
220 .flatten()
221 .is_some()
222 {
223 return;
224 }
225 let Some(strip) = self.document.get_element_by_id("deck-strip") else {
226 return;
227 };
228 let (title, tag) = match element {
229 "aire" => ("Aire", "Software · IA · Aspiración"),
230 "fuego" => ("Fuego", "Inspiración"),
231 "tierra" => ("Tierra", "Cuerpo"),
232 "agua" => ("Agua", "Espiritualidad aplicada"),
233 _ => return,
234 };
235 let html = format!(
236 "<article class=\"deck-page\" data-element=\"{el}\" id=\"deck-page-{el}\">\
237 <div class=\"page-controls\">\
238 <button class=\"page-control-btn page-minimize\" data-minimize=\"{el}\" type=\"button\" aria-label=\"Minimizar {title}\">\
239 <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M5 19 H19\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\"/></svg>\
240 </button>\
241 <button class=\"page-control-btn page-close\" data-close-page=\"{el}\" type=\"button\" aria-label=\"Cerrar {title}\">×</button>\
242 </div>\
243 <div class=\"page-ambience\" aria-hidden=\"true\"></div>\
244 <header class=\"page-head\">\
245 <span class=\"page-mark\">{el}</span>\
246 <h2 class=\"page-title\">{title}</h2>\
247 <span class=\"page-tag\">{tag}</span>\
248 </header>\
249 <section class=\"page-content\" id=\"page-{el}-content\"></section>\
250 </article>",
251 el = element, title = title, tag = tag
252 );
253 let _ = strip.insert_adjacent_html("beforeend", &html);
254 }
255
256 fn remove_page_dom(&self, element: &str) {
257 let id = format!("deck-page-{}", element);
258 if let Some(el) = self.document.get_element_by_id(&id) {
259 el.remove();
260 }
261 }
262
263 fn load_md_if_empty(&self, element: &str, md_url: &str) {
264 let content_id = format!("page-{}-content", element);
265 let Some(content_el) = self.document.get_element_by_id(&content_id) else {
266 return;
267 };
268 let Ok(content): Result<HtmlElement, _> = content_el.dyn_into() else {
269 return;
270 };
271 let inner = content.inner_html();
272 if inner.contains("pluma-doc") {
273 return; // ya hidratado
274 }
275 let reader = Reader::new(content);
276 let element_owned = element.to_string();
277 let url_owned = md_url.to_string();
278 wasm_bindgen_futures::spawn_local(async move {
279 if let Err(e) = reader.open_url(&url_owned, &element_owned).await {
280 web_sys::console::warn_1(&e);
281 }
282 });
283 }
284
285 fn element_center(&self, selector: &str) -> Option<(f64, f64)> {
286 let el = self.document.query_selector(selector).ok().flatten()?;
287 let rect = el.get_bounding_client_rect();
288 Some((
289 rect.left() + rect.width() / 2.0,
290 rect.top() + rect.height() / 2.0,
291 ))
292 }
293
294 fn taskbar_item_center(&self, element: &str) -> Option<(f64, f64)> {
295 self.taskbar.task_center(element)
296 }
297
298 fn viewport_height(&self) -> f64 {
299 web_sys::window()
300 .and_then(|w| w.inner_height().ok())
301 .and_then(|v| v.as_f64())
302 .unwrap_or(720.0)
303 }
304}
305
306#[wasm_bindgen(start)]
307pub fn boot() -> Result<(), JsValue> {
308 install_panic_hook();
309 let window = web_sys::window().ok_or_else(|| JsValue::from_str("no window"))?;
310 let document = window
311 .document()
312 .ok_or_else(|| JsValue::from_str("no document"))?;
313
314 let canvas: HtmlCanvasElement = document
315 .get_element_by_id("gioser-canvas")
316 .ok_or_else(|| JsValue::from_str("no canvas#gioser-canvas"))?
317 .dyn_into()?;
318
319 fit_canvas(&canvas, &window);
320 let renderer = Rc::new(RefCell::new(Renderer::new(&canvas)?));
321 {
322 let mut r = renderer.borrow_mut();
323 r.resize(canvas.width(), canvas.height());
324 r.set_client_size(
325 canvas.client_width() as f32,
326 canvas.client_height() as f32,
327 );
328 }
329
330 // Mount vista deck
331 let strip_el: HtmlElement = document
332 .get_element_by_id("deck-strip")
333 .ok_or_else(|| JsValue::from_str("no #deck-strip"))?
334 .dyn_into()?;
335 let deck = Deck::mount(strip_el)?;
336
337 // Mount barra-web taskbar (manages the dynamic task list).
338 let list_el: HtmlElement = document
339 .get_element_by_id("taskbar-list")
340 .ok_or_else(|| JsValue::from_str("no #taskbar-list"))?
341 .dyn_into()?;
342 let taskbar = TaskList::mount(list_el)?;
343
344 let app = Rc::new(AppState {
345 document: document.clone(),
346 deck: deck.clone(),
347 taskbar: taskbar.clone(),
348 state: RefCell::default(),
349 });
350
351 // vista on_change → on_swipe del app
352 {
353 let app2 = app.clone();
354 deck.on_change(move |idx| {
355 app2.on_swipe(idx);
356 });
357 }
358
359 // barra on_click → restore / toggle minimize del app
360 {
361 let app2 = app.clone();
362 taskbar.on_click(move |id, cx, cy| {
363 let is_active = app2.state.borrow().active.as_deref() == Some(id);
364 if is_active {
365 app2.minimize(cx, cy);
366 } else {
367 app2.restore_from_tab(id, cx, cy);
368 }
369 });
370 }
371
372 install_resize(&window, &canvas, &renderer)?;
373 install_mouse(&document, &canvas, &renderer)?;
374 install_canvas_pointer(&canvas, &renderer)?;
375 install_canvas_leave(&canvas, &renderer)?;
376 install_tip_clicks(&document, &app)?;
377 install_deck_delegation(&document, &app)?;
378 install_taskbar(&document, &app)?;
379 install_keyboard(&document, &app)?;
380 install_raf(&window, &document, &canvas, &renderer);
381
382 Ok(())
383}
384
385fn install_resize(
386 window: &Window,
387 canvas: &HtmlCanvasElement,
388 renderer: &Rc<RefCell<Renderer>>,
389) -> Result<(), JsValue> {
390 let canvas = canvas.clone();
391 let win2 = window.clone();
392 let r = renderer.clone();
393 let cb = Closure::<dyn FnMut()>::new(move || {
394 fit_canvas(&canvas, &win2);
395 let mut rr = r.borrow_mut();
396 rr.resize(canvas.width(), canvas.height());
397 rr.set_client_size(
398 canvas.client_width() as f32,
399 canvas.client_height() as f32,
400 );
401 });
402 window.add_event_listener_with_callback("resize", cb.as_ref().unchecked_ref())?;
403 cb.forget();
404 Ok(())
405}
406
407fn install_mouse(
408 document: &Document,
409 canvas: &HtmlCanvasElement,
410 renderer: &Rc<RefCell<Renderer>>,
411) -> Result<(), JsValue> {
412 let canvas = canvas.clone();
413 let r = renderer.clone();
414 let cb = Closure::<dyn FnMut(MouseEvent)>::new(move |e: MouseEvent| {
415 let w = canvas.client_width().max(1) as f32;
416 let h = canvas.client_height().max(1) as f32;
417 let x = e.client_x() as f32 - w * 0.5;
418 let y = h * 0.5 - e.client_y() as f32;
419 r.borrow_mut().set_mouse_px(x, y);
420 });
421 document.add_event_listener_with_callback("mousemove", cb.as_ref().unchecked_ref())?;
422 cb.forget();
423 Ok(())
424}
425
426fn install_canvas_pointer(
427 canvas: &HtmlCanvasElement,
428 renderer: &Rc<RefCell<Renderer>>,
429) -> Result<(), JsValue> {
430 let canvas2 = canvas.clone();
431 let r = renderer.clone();
432 let cb = Closure::<dyn FnMut(PointerEvent)>::new(move |e: PointerEvent| {
433 let rect = canvas2.get_bounding_client_rect();
434 let dx = e.client_x() as f64 - (rect.left() + rect.width() / 2.0);
435 let dy = e.client_y() as f64 - (rect.top() + rect.height() / 2.0);
436 let dist2 = dx * dx + dy * dy;
437 let ring = {
438 let rb = r.borrow();
439 rb.click_radius_css_px() as f64
440 };
441 if dist2 <= ring * ring {
442 r.borrow_mut().impulse_click();
443 }
444 });
445 canvas.add_event_listener_with_callback("pointerdown", cb.as_ref().unchecked_ref())?;
446 cb.forget();
447 Ok(())
448}
449
450fn install_canvas_leave(
451 canvas: &HtmlCanvasElement,
452 renderer: &Rc<RefCell<Renderer>>,
453) -> Result<(), JsValue> {
454 let r = renderer.clone();
455 let cb = Closure::<dyn FnMut(Event)>::new(move |_e: Event| {
456 r.borrow_mut().release_tilt();
457 });
458 canvas.add_event_listener_with_callback("mouseleave", cb.as_ref().unchecked_ref())?;
459 cb.forget();
460 Ok(())
461}
462
463fn install_tip_clicks(document: &Document, app: &Rc<AppState>) -> Result<(), JsValue> {
464 let tips_nodes = document.query_selector_all(".tip[data-md]")?;
465 for i in 0..tips_nodes.length() {
466 let Some(node) = tips_nodes.item(i) else {
467 continue;
468 };
469 let Ok(el) = node.dyn_into::<HtmlElement>() else {
470 continue;
471 };
472 let id = el.id();
473 let element = id.strip_prefix("tip-").unwrap_or("").to_string();
474 let md_url = el.get_attribute("data-md").unwrap_or_default();
475 let app2 = app.clone();
476 let el_for_rect = el.clone();
477 let cb = Closure::<dyn FnMut(Event)>::new(move |e: Event| {
478 e.prevent_default();
479 let rect = el_for_rect.get_bounding_client_rect();
480 let cx = rect.left() + rect.width() / 2.0;
481 let cy = rect.top() + rect.height() / 2.0;
482 app2.open_or_switch(&element, cx, cy, &md_url);
483 });
484 el.add_event_listener_with_callback("click", cb.as_ref().unchecked_ref())?;
485 cb.forget();
486 }
487 Ok(())
488}
489
490/// Un listener en el deck delega clicks de minimize y close en cada página.
491/// Las páginas se crean dinámicamente, así que no podemos adjuntar listeners
492/// por botón en boot.
493fn install_deck_delegation(document: &Document, app: &Rc<AppState>) -> Result<(), JsValue> {
494 let Some(deck_el) = document.get_element_by_id("deck") else {
495 return Ok(());
496 };
497 let app2 = app.clone();
498 let cb = Closure::<dyn FnMut(MouseEvent)>::new(move |e: MouseEvent| {
499 let Some(target) = e.target() else { return };
500 let Ok(target_el): Result<Element, _> = target.dyn_into() else {
501 return;
502 };
503 // Minimize
504 if let Ok(Some(btn)) = target_el.closest("[data-minimize]") {
505 e.stop_propagation();
506 let element = btn.get_attribute("data-minimize").unwrap_or_default();
507 // Origin = la cajita correspondiente en la taskbar (efecto
508 // visual: la página se "encoge" hacia su entrada del taskbar).
509 let origin = app2
510 .taskbar_item_center(&element)
511 .unwrap_or_else(|| center_of_element(&btn));
512 app2.minimize(origin.0, origin.1);
513 return;
514 }
515 // Close
516 if let Ok(Some(btn)) = target_el.closest("[data-close-page]") {
517 e.stop_propagation();
518 let element = btn.get_attribute("data-close-page").unwrap_or_default();
519 let origin = app2
520 .taskbar_item_center(&element)
521 .unwrap_or_else(|| center_of_element(&btn));
522 app2.close(&element, origin.0, origin.1);
523 }
524 });
525 deck_el.add_event_listener_with_callback("click", cb.as_ref().unchecked_ref())?;
526 cb.forget();
527 Ok(())
528}
529
530fn center_of_element(el: &Element) -> (f64, f64) {
531 let rect = el.get_bounding_client_rect();
532 (
533 rect.left() + rect.width() / 2.0,
534 rect.top() + rect.height() / 2.0,
535 )
536}
537
538/// Home button + brand link (data-home) — toda la lógica de tabs vive en
539/// barra-web::TaskList. Acá sólo se instalan los handlers para [data-home].
540fn install_taskbar(document: &Document, app: &Rc<AppState>) -> Result<(), JsValue> {
541 let homes = document.query_selector_all("[data-home]")?;
542 for i in 0..homes.length() {
543 let Some(node) = homes.item(i) else { continue };
544 let Ok(el) = node.dyn_into::<HtmlElement>() else {
545 continue;
546 };
547 let app2 = app.clone();
548 let cb = Closure::<dyn FnMut(Event)>::new(move |e: Event| {
549 e.prevent_default();
550 app2.home();
551 });
552 el.add_event_listener_with_callback("click", cb.as_ref().unchecked_ref())?;
553 cb.forget();
554 }
555 Ok(())
556}
557
558fn install_keyboard(document: &Document, app: &Rc<AppState>) -> Result<(), JsValue> {
559 let app2 = app.clone();
560 let cb = Closure::<dyn FnMut(KeyboardEvent)>::new(move |e: KeyboardEvent| {
561 if e.key() == "Escape" {
562 if app2.state.borrow().active.is_some() {
563 app2.home();
564 }
565 }
566 });
567 document.add_event_listener_with_callback("keydown", cb.as_ref().unchecked_ref())?;
568 cb.forget();
569 Ok(())
570}
571
572fn install_raf(
573 window: &Window,
574 document: &Document,
575 canvas: &HtmlCanvasElement,
576 renderer: &Rc<RefCell<Renderer>>,
577) {
578 let f = Rc::new(RefCell::new(None::<Closure<dyn FnMut(f64)>>));
579 let g = f.clone();
580 let renderer = renderer.clone();
581 let canvas = canvas.clone();
582 let document = document.clone();
583 let window2 = window.clone();
584 *g.borrow_mut() = Some(Closure::<dyn FnMut(f64)>::new(move |time_ms: f64| {
585 renderer.borrow_mut().render(time_ms);
586 let r = renderer.borrow();
587 position_tips(&document, &canvas, &r);
588 drop(r);
589 if let Some(cb) = f.borrow().as_ref() {
590 let _ = window2.request_animation_frame(cb.as_ref().unchecked_ref());
591 }
592 }));
593 let _ = window.request_animation_frame(g.borrow().as_ref().unwrap().as_ref().unchecked_ref());
594}
595
596fn fit_canvas(canvas: &HtmlCanvasElement, window: &Window) {
597 let dpr = window.device_pixel_ratio() as f32;
598 let w = window
599 .inner_width()
600 .ok()
601 .and_then(|v| v.as_f64())
602 .unwrap_or(1280.0) as f32;
603 let h = window
604 .inner_height()
605 .ok()
606 .and_then(|v| v.as_f64())
607 .unwrap_or(720.0) as f32;
608 canvas.set_width((w * dpr) as u32);
609 canvas.set_height((h * dpr) as u32);
610 let el: &HtmlElement = canvas.unchecked_ref();
611 let style = el.style();
612 let _ = style.set_property("width", &format!("{}px", w));
613 let _ = style.set_property("height", &format!("{}px", h));
614}
615
616fn position_tips(document: &Document, canvas: &HtmlCanvasElement, renderer: &Renderer) {
617 let clips = renderer.cardinal_positions_ndc(BUTTON_RADIUS_FACTOR);
618 let cw = canvas.client_width().max(1) as f32;
619 let ch = canvas.client_height().max(1) as f32;
620 let min_x = VIEWPORT_MARGIN_PX + BUTTON_HALF_W_PX;
621 let max_x = (cw - VIEWPORT_MARGIN_PX - BUTTON_HALF_W_PX).max(min_x);
622 let min_y = VIEWPORT_MARGIN_PX + BUTTON_HALF_H_PX;
623 let max_y = (ch - TASKBAR_HEIGHT_PX - VIEWPORT_MARGIN_PX - BUTTON_HALF_H_PX).max(min_y);
624 for (i, (id, _color, _label)) in tips::ORDER.iter().enumerate() {
625 let (nx, ny) = clips[i];
626 let raw_x = (nx + 1.0) * 0.5 * cw;
627 let raw_y = (1.0 - (ny + 1.0) * 0.5) * ch;
628 let px = raw_x.clamp(min_x, max_x);
629 let py = raw_y.clamp(min_y, max_y);
630 let sel = format!("tip-{}", id);
631 if let Some(el) = document.get_element_by_id(&sel) {
632 if let Ok(el) = el.dyn_into::<HtmlElement>() {
633 let _ = el.style().set_property(
634 "transform",
635 &format!("translate({:.2}px, {:.2}px) translate(-50%, -50%)", px, py),
636 );
637 }
638 }
639 }
640}
641
642fn install_panic_hook() {
643 static SET: std::sync::Once = std::sync::Once::new();
644 SET.call_once(|| {
645 std::panic::set_hook(Box::new(|info| {
646 let msg = format!("{}", info);
647 web_sys::console::error_1(&JsValue::from_str(&msg));
648 }));
649 });
650}