@perspective-dev/viewer 5.5.1 → 5.6.0

package/src/{ts/perspective-viewer.inline.ts → rust/utils/browser/mouse.rs}

@@ -10,14 +10,15 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-import perspective_viewer from "./perspective-viewer.ts";
-export * from "./perspective-viewer.ts";
+use web_sys::MouseEvent;
+use yew::Callback;
 
-// @ts-ignore
-import client_wasm from "../../dist/wasm/perspective-viewer.wasm";
-
-await perspective_viewer.init_client(client_wasm as any as ArrayBuffer);
-
-console.warn("Perspective wasn been initialized in inline mode");
-
-export default perspective_viewer;
+/// Gate a `mousedown` callback to the primary button, so a right-click (which
+/// opens the viewer context menu) never also triggers the control under it.
+pub fn left_click(callback: Callback<MouseEvent>) -> Callback<MouseEvent> {
+    Callback::from(move |event: MouseEvent| {
+        if event.button() == 0 {
+            callback.emit(event);
+        }
+    })
+}

package/src/rust/utils/browser/request_animation_frame.rs

@@ -49,15 +49,34 @@ pub async fn request_animation_frame() {
 
 /// An `async` which awaits the browser's `load` event, which is automatically
 /// bypassed if `document.readyState` indicates this has already occurred.
+/// Resolve once the DOM is interactive and every linked stylesheet has
+/// APPLIED (`link.sheet` set) — the point at which computed styles are
+/// readable. Never await the `load` EVENT here: an in-flight `@font-face`
+/// request delays `load` on Firefox, and the font loader that depends on
+/// this function is itself what manages those requests.
 pub async fn await_dom_loaded() -> ApiResult<()> {
-    let state = global::document().ready_state();
-    if state == "complete" || state == "loaded" {
-        Ok(())
-    } else {
-        let (sender, receiver) = channel::<()>();
-        let jsfun = Closure::once_into_js(move || sender.send(()).unwrap());
-        global::window().add_event_listener_with_callback("load", jsfun.unchecked_ref())?;
-        Ok(receiver.await?)
+    loop {
+        let document = global::document();
+        let state = document.ready_state();
+        if state == "complete" || state == "loaded" {
+            return Ok(());
+        }
+
+        if state != "loading" {
+            let links = document.query_selector_all("link[rel=stylesheet]")?;
+            let applied = (0..links.length()).all(|i| {
+                links
+                    .item(i)
+                    .and_then(|node| node.dyn_into::<web_sys::HtmlLinkElement>().ok())
+                    .is_none_or(|link| link.sheet().is_some())
+            });
+
+            if applied {
+                return Ok(());
+            }
+        }
+
+        set_timeout(50).await?;
     }
 }
 

package/src/rust/utils/css.rs

@@ -523,363 +523,3 @@ pub fn resolve_css_refs(
 
     dropped
 }
-
-#[cfg(test)]
-mod tests {
-    use serde_json::json;
-
-    use super::*;
-
-    fn stop(color: &str, offset: f64) -> GradientStopSpec {
-        GradientStopSpec {
-            color: color.to_owned(),
-            offset,
-        }
-    }
-
-    #[test]
-    fn colors_normalize_to_lowercase_hex() {
-        assert_eq!(normalize_css_color("#ABC").unwrap(), "#aabbcc");
-        assert_eq!(normalize_css_color("#abcd").unwrap(), "#aabbcc");
-        assert_eq!(normalize_css_color(" #FF7F0E ").unwrap(), "#ff7f0e");
-        assert_eq!(normalize_css_color("#ff7f0e80").unwrap(), "#ff7f0e");
-        assert_eq!(normalize_css_color("rgb(255, 127, 14)").unwrap(), "#ff7f0e");
-        assert_eq!(
-            normalize_css_color("rgba(255,127,14,0.5)").unwrap(),
-            "#ff7f0e"
-        );
-        assert_eq!(
-            normalize_css_color("rgb(255 127 14 / 50%)").unwrap(),
-            "#ff7f0e"
-        );
-        assert_eq!(
-            normalize_css_color("rgb(100%, 0%, 50%)").unwrap(),
-            "#ff0080"
-        );
-        assert_eq!(normalize_css_color("rgb(300, -5, 14)").unwrap(), "#ff000e");
-        assert!(normalize_css_color("red").is_err());
-        assert!(normalize_css_color("#12345").is_err());
-        assert!(normalize_css_color("hsl(0, 100%, 50%)").is_err());
-        assert!(normalize_css_color("#gggggg").is_err());
-        assert!(normalize_css_color("").is_err());
-    }
-
-    #[test]
-    fn var_refs_are_whole_value_and_namespaced() {
-        assert_eq!(
-            parse_var_ref("var(--psp-user--gradient-1)"),
-            Some("--psp-user--gradient-1")
-        );
-        assert_eq!(
-            parse_var_ref("  var( --psp-user--color-hot )  "),
-            Some("--psp-user--color-hot")
-        );
-        assert_eq!(parse_var_ref("var(--psp-charts--gradient)"), None);
-        assert_eq!(parse_var_ref("var(--psp-user--)"), None);
-        assert_eq!(parse_var_ref("var(--psp-user--gradient-1, red)"), None);
-        assert_eq!(parse_var_ref("#ff0000"), None);
-        assert_eq!(
-            parse_var_ref("linear-gradient(var(--psp-user--color-1), #fff)"),
-            None
-        );
-    }
-
-    #[test]
-    fn kind_is_carried_by_the_reference_prefix() {
-        assert_eq!(
-            CssKind::of_var("--psp-user--gradient-1"),
-            Some(CssKind::Gradient)
-        );
-        assert_eq!(
-            CssKind::of_var("--psp-user--palette-warm"),
-            Some(CssKind::Palette)
-        );
-        assert_eq!(CssKind::of_var("--psp-user--color-1"), Some(CssKind::Color));
-        assert_eq!(CssKind::of_var("--psp-user--other-1"), None);
-        assert_eq!(
-            CssKind::Palette.short_name("--psp-user--palette-warm"),
-            "warm"
-        );
-
-        assert_eq!(
-            CssGradient::parse("var(--psp-user--gradient-1)").unwrap(),
-            CssGradient::Var("--psp-user--gradient-1".to_owned())
-        );
-        assert!(CssGradient::parse("var(--psp-user--palette-1)").is_err());
-        assert!(CssPalette::parse("var(--psp-user--gradient-1)").is_err());
-        assert!(CssColor::parse("var(--psp-user--palette-1)").is_err());
-        assert_eq!(
-            CssColor::parse("var(--psp-user--color-1)")
-                .unwrap()
-                .to_css(),
-            "var(--psp-user--color-1)"
-        );
-
-        assert_eq!(
-            canonicalize_css_palette("var(--psp-user--palette-1)").unwrap(),
-            "var(--psp-user--palette-1)"
-        );
-    }
-
-    #[test]
-    fn gradient_round_trip_is_canonical_and_idempotent() {
-        let src = "linear-gradient(to right, #0366d6 0%, #ffffff 33.3%, #ff7f0e 100%)";
-        let canon = canonicalize_css_gradient(src).unwrap();
-        assert_eq!(canon, src);
-        assert_eq!(canonicalize_css_gradient(&canon).unwrap(), canon);
-
-        let CssGradient::Literal(stops) = CssGradient::parse(src).unwrap() else {
-            panic!("expected literal");
-        };
-
-        assert_eq!(stops, vec![
-            stop("#0366d6", 0.0),
-            stop("#ffffff", 0.333),
-            stop("#ff7f0e", 1.0),
-        ]);
-
-        let css = gradient_to_css(&[
-            stop("#222222", 1.7),
-            stop("#111111", 1.0 / 3.0),
-            stop("#000000", -0.5),
-        ]);
-
-        assert_eq!(
-            css,
-            "linear-gradient(to right, #000000 0%, #111111 33.3%, #222222 100%)"
-        );
-
-        assert_eq!(format_percent(0.375), "37.5%");
-        assert_eq!(format_percent(0.1), "10%");
-        assert_eq!(format_percent(1.0), "100%");
-    }
-
-    #[test]
-    fn gradient_accepts_loose_input() {
-        assert_eq!(
-            canonicalize_css_gradient("linear-gradient(#0366d6 0%, #ff7f0e 100%)").unwrap(),
-            "linear-gradient(to right, #0366d6 0%, #ff7f0e 100%)"
-        );
-
-        assert_eq!(
-            canonicalize_css_gradient("LINEAR-GRADIENT(90deg, RGB(3, 102, 214), #FFF, #ff7f0e)")
-                .unwrap(),
-            "linear-gradient(to right, #0366d6 0%, #ffffff 50%, #ff7f0e 100%)"
-        );
-
-        assert_eq!(
-            canonicalize_css_gradient(
-                "linear-gradient(to bottom, #000 10%, #111, #222, #333 70%, #444)"
-            )
-            .unwrap(),
-            "linear-gradient(to right, #000000 10%, #111111 30%, #222222 50%, #333333 70%, \
-             #444444 100%)"
-        );
-
-        assert_eq!(
-            canonicalize_css_gradient("linear-gradient(#fff 120%, #000 -5%)").unwrap(),
-            "linear-gradient(to right, #000000 0%, #ffffff 100%)"
-        );
-    }
-
-    #[test]
-    fn gradient_rejects_malformed_input() {
-        assert!(canonicalize_css_gradient("#ff0000").is_err());
-        assert!(canonicalize_css_gradient("linear-gradient(#ff0000)").is_err());
-        assert!(canonicalize_css_gradient("linear-gradient(#ff0000 0px, #fff 10px)").is_err());
-        assert!(canonicalize_css_gradient("linear-gradient(red, blue)").is_err());
-        assert!(canonicalize_css_gradient("radial-gradient(#000, #fff)").is_err());
-        assert!(canonicalize_css_gradient("linear-gradient(#000, , #fff)").is_err());
-        assert!(canonicalize_css_gradient("").is_err());
-    }
-
-    #[test]
-    fn palette_round_trip_and_rules() {
-        let src = "linear-gradient(to right, #0366d6, #ff7f0e, #2ca02c)";
-        assert_eq!(canonicalize_css_palette(src).unwrap(), src);
-        assert_eq!(
-            CssPalette::parse(src).unwrap(),
-            CssPalette::Literal(vec![
-                "#0366d6".to_owned(),
-                "#ff7f0e".to_owned(),
-                "#2ca02c".to_owned()
-            ])
-        );
-
-        assert_eq!(
-            canonicalize_css_palette("linear-gradient(90deg, rgb(3,102,214), #FFF)").unwrap(),
-            "linear-gradient(to right, #0366d6, #ffffff)"
-        );
-
-        assert_eq!(
-            canonicalize_css_palette("linear-gradient(#abc)").unwrap(),
-            "linear-gradient(to right, #aabbcc)"
-        );
-
-        assert_eq!(
-            palette_to_css(&["#000000".to_owned(), "#ffffff".to_owned()]),
-            "linear-gradient(to right, #000000, #ffffff)"
-        );
-    }
-
-    #[test]
-    fn palette_rejects_positions() {
-        let gradient = gradient_to_css(&[stop("#000000", 0.0), stop("#ffffff", 1.0)]);
-        assert!(CssPalette::parse(&gradient).is_err());
-        assert!(canonicalize_css_palette("linear-gradient(#000, #fff 50%)").is_err());
-        assert!(canonicalize_css_palette("linear-gradient()").is_err());
-        assert!(canonicalize_css_palette("#000000").is_err());
-
-        let palette = palette_to_css(&["#000000".to_owned(), "#ffffff".to_owned()]);
-        assert_eq!(
-            canonicalize_css_gradient(&palette).unwrap(),
-            "linear-gradient(to right, #000000 0%, #ffffff 100%)"
-        );
-    }
-
-    #[test]
-    fn color_canonicalizes_literals_and_passes_refs() {
-        assert_eq!(canonicalize_css_color("#ABC").unwrap(), "#aabbcc");
-        assert_eq!(
-            canonicalize_css_color("var(--psp-user--color-hot)").unwrap(),
-            "var(--psp-user--color-hot)"
-        );
-        assert!(canonicalize_css_color("var(--psp-user--gradient-1)").is_err());
-        assert!(canonicalize_css_color("linear-gradient(#000, #fff)").is_err());
-    }
-
-    #[test]
-    fn palette_set_unions_restored_and_in_use_with_stable_names() {
-        let mut restored = BTreeMap::new();
-        restored.insert(
-            "--psp-user--gradient-heat".to_owned(),
-            "linear-gradient(to right, #000000 0%, #ffffff 100%)".to_owned(),
-        );
-        restored.insert("--psp-user--color-unused".to_owned(), "#123456".to_owned());
-        let host = vec![NamedValue {
-            name: "--psp-user--palette-1".to_owned(),
-            value: "linear-gradient(to right, #ff0000, #00ff00)".to_owned(),
-        }];
-        let taken =
-            |name: &str| name == "--psp-user--gradient-1" || name == "--psp-user--palette-1";
-        let in_use = vec![
-            (
-                CssKind::Gradient,
-                "linear-gradient(to right, #000000 0%, #ffffff 100%)".to_owned(),
-            ),
-            (
-                CssKind::Gradient,
-                "linear-gradient(to right, #111111 0%, #222222 100%)".to_owned(),
-            ),
-            (
-                CssKind::Gradient,
-                "linear-gradient(to right, #111111 0%, #222222 100%)".to_owned(),
-            ),
-            (
-                CssKind::Palette,
-                "linear-gradient(to right, #ff0000, #00ff00)".to_owned(),
-            ),
-            (CssKind::Color, "#abcdef".to_owned()),
-        ];
-
-        let set = assign_palette_names(&restored, &host, &in_use, &taken);
-        assert_eq!(
-            set.iter()
-                .map(|(k, v)| (k.as_str(), v.as_str()))
-                .collect::<Vec<_>>(),
-            vec![
-                ("--psp-user--color-1", "#abcdef"),
-                ("--psp-user--color-unused", "#123456"),
-                (
-                    "--psp-user--gradient-2",
-                    "linear-gradient(to right, #111111 0%, #222222 100%)"
-                ),
-                (
-                    "--psp-user--gradient-heat",
-                    "linear-gradient(to right, #000000 0%, #ffffff 100%)"
-                ),
-                (
-                    "--psp-user--palette-1",
-                    "linear-gradient(to right, #ff0000, #00ff00)"
-                ),
-            ]
-        );
-
-        assert_eq!(
-            palette_name_for(
-                &set,
-                CssKind::Gradient,
-                "linear-gradient(to right, #111111 0%, #222222 100%)"
-            )
-            .as_deref(),
-            Some("--psp-user--gradient-2")
-        );
-        assert_eq!(palette_name_for(&set, CssKind::Gradient, "#abcdef"), None);
-
-        assert_eq!(assign_palette_names(&set, &host, &in_use, &taken), set);
-    }
-
-    #[test]
-    fn resolver_inlines_known_refs_and_drops_the_rest() {
-        let host = |name: &str| -> Option<String> {
-            match name {
-                "--psp-user--gradient-1" => Some("linear-gradient(#000, #fff)".to_owned()),
-                "--psp-user--palette-warm" => Some("linear-gradient(#f00, #ff0)".to_owned()),
-                "--psp-user--color-hot" => Some("rgb(255, 0, 0)".to_owned()),
-                "--psp-user--palette-bad" => Some("linear-gradient(#000 0%, #fff 100%)".to_owned()),
-                "--psp-user--color-empty" => Some("   ".to_owned()),
-                _ => None,
-            }
-        };
-
-        let mut entry = json!({
-            "gradient": "var(--psp-user--gradient-1)",
-            "palette": "var(--psp-user--palette-warm)",
-            "color": "var(--psp-user--color-hot)",
-            "bad_palette": "var(--psp-user--palette-bad)",
-            "missing": "var(--psp-user--gradient-missing)",
-            "empty": "var(--psp-user--color-empty)",
-            "unknown_kind": "var(--psp-user--other-1)",
-            "literal": "#123456",
-            "number": 3,
-        })
-        .as_object()
-        .unwrap()
-        .clone();
-
-        let mut dropped = resolve_css_refs(&mut entry, &host);
-        dropped.sort();
-        assert_eq!(dropped, vec![
-            (
-                "bad_palette".to_owned(),
-                "--psp-user--palette-bad".to_owned()
-            ),
-            ("empty".to_owned(), "--psp-user--color-empty".to_owned()),
-            (
-                "missing".to_owned(),
-                "--psp-user--gradient-missing".to_owned()
-            ),
-            ("unknown_kind".to_owned(), "--psp-user--other-1".to_owned()),
-        ]);
-
-        assert_eq!(
-            entry,
-            json!({
-                "gradient": "linear-gradient(to right, #000000 0%, #ffffff 100%)",
-                "palette": "linear-gradient(to right, #ff0000, #ffff00)",
-                "color": "#ff0000",
-                "literal": "#123456",
-                "number": 3,
-            })
-            .as_object()
-            .unwrap()
-            .clone()
-        );
-
-        assert!(entry.values().all(|v| {
-            v.as_str()
-                .map(|s| parse_var_ref(s).is_none())
-                .unwrap_or(true)
-        }));
-    }
-}

package/src/rust/utils/local_fonts.rs

@@ -357,39 +357,3 @@ fn measure_width(ctx: &web_sys::CanvasRenderingContext2d, family: &str) -> f64 {
         .map(|x| x.width())
         .unwrap_or_default()
 }
-
-#[cfg(test)]
-mod tests {
-    use super::*;
-
-    fn owned(xs: &[&str]) -> Vec<String> {
-        xs.iter().map(|x| (*x).to_owned()).collect()
-    }
-
-    #[test]
-    fn generic_families_lead_and_current_appends_when_missing() {
-        let options = compose_font_family_options("Zapf Chancery", &owned(&["Arial", "Menlo"]));
-        assert_eq!(
-            options,
-            owned(&[
-                "inherit",
-                "monospace",
-                "sans-serif",
-                "serif",
-                "system-ui",
-                "Arial",
-                "Menlo",
-                "Zapf Chancery"
-            ])
-        );
-    }
-
-    #[test]
-    fn current_is_not_duplicated() {
-        let options = compose_font_family_options("Arial", &owned(&["Arial"]));
-        assert_eq!(options.iter().filter(|x| *x == "Arial").count(), 1);
-
-        let options = compose_font_family_options("inherit", &[]);
-        assert_eq!(options, owned(&GENERIC_FONT_FAMILIES));
-    }
-}

package/src/rust/utils/mod.rs

@@ -29,14 +29,12 @@ mod local_fonts;
 mod modal_position;
 mod number_format;
 mod pending_effects;
+mod plugin_host_state;
 mod ptr_eq_rc;
 mod pubsub;
 mod spawn;
 mod weak_scope;
 
-#[cfg(test)]
-mod tests;
-
 pub use browser::*;
 pub use completion::*;
 pub use css::*;
@@ -51,6 +49,7 @@ pub use modal_position::*;
 pub use number_format::*;
 pub use pending_effects::*;
 pub use perspective_client::clone;
+pub use plugin_host_state::*;
 pub use ptr_eq_rc::*;
 pub use pubsub::*;
 pub use spawn::*;

package/src/rust/utils/modal_position.rs

@@ -39,36 +39,30 @@ impl ModalAnchor {
     }
 }
 
-/// Given the bounds of the target element as previously computed, as well as
-/// the browser's viewport and the bounds of the already-connected modal element
-/// itself, determine the best anchor point to keep the element on-screen.
-pub fn calc_relative_position(
-    elem: &HtmlElement,
-    _top: f64,
-    left: f64,
-    height: f64,
-    width: f64,
-) -> ModalAnchor {
+/// Pick the anchor that keeps a modal of `modal`'s size on-screen when opened
+/// against `target`, from those rects alone so repeated calls agree.
+pub fn calc_relative_position(target: &DomRect, modal: &DomRect) -> ModalAnchor {
     let window = global::window();
-    let rect = elem.get_bounding_client_rect();
     let inner_width = window.inner_width().unwrap().as_f64().unwrap();
     let inner_height = window.inner_height().unwrap().as_f64().unwrap();
-    let rect_top = rect.top();
-    let rect_height = rect.height();
-    let rect_width = rect.width();
-    let rect_left = rect.left();
+    let top = target.top();
+    let left = target.left();
+    let height = target.height();
+    let width = target.width();
+    let modal_height = modal.height();
+    let modal_width = modal.width();
 
-    let elem_over_y = inner_height < rect_top + rect_height;
-    let elem_over_x = inner_width < rect_left + rect_width;
-    let target_over_x = inner_width < rect_left + width;
-    let target_over_y = inner_height < rect_top + height;
+    let elem_over_y = inner_height < top + height - 1.0 + modal_height;
+    let elem_over_x = inner_width < left + modal_width;
+    let target_over_x = inner_width < left + width;
+    let target_over_y = inner_height < top + height;
 
     // modal/target
     match (elem_over_y, elem_over_x, target_over_x, target_over_y) {
         (true, _, true, true) => ModalAnchor::BottomRightTopLeft,
         (true, _, true, false) => ModalAnchor::BottomRightBottomLeft,
         (true, true, false, _) => {
-            if left + width - rect_width > 0.0 {
+            if left + width - modal_width > 0.0 {
                 ModalAnchor::BottomRightTopRight
             } else {
                 ModalAnchor::BottomLeftTopLeft
@@ -77,7 +71,7 @@ pub fn calc_relative_position(
         (true, false, false, _) => ModalAnchor::BottomLeftTopLeft,
         (false, true, true, _) => ModalAnchor::TopRightTopLeft,
         (false, true, false, _) => {
-            if left + width - rect_width > 0.0 {
+            if left + width - modal_width > 0.0 {
                 ModalAnchor::TopRightBottomRight
             } else {
                 ModalAnchor::TopLeftBottomLeft

package/src/rust/utils/{browser/tests/mod.rs → plugin_host_state.rs}

@@ -10,4 +10,34 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-mod debounce;
+use web_sys::Element;
+
+/// Mirror the host `<perspective-viewer>`'s `settings` attribute and
+/// `shift-active` class onto one slotted plugin element so plugin stylesheets
+/// can match them with `:host(...)`.
+pub fn stamp_plugin_host_state(viewer: &Element, plugin: &Element) {
+    let _ = plugin.toggle_attribute_with_force("settings", viewer.has_attribute("settings"));
+    let _ = plugin
+        .class_list()
+        .toggle_with_force("shift-active", viewer.class_list().contains("shift-active"));
+}
+
+/// Apply [`stamp_plugin_host_state`] to every plugin element slotted into
+/// `viewer`.
+pub fn stamp_plugin_host_state_all(viewer: &Element) {
+    let children = viewer.children();
+    for i in 0..children.length() {
+        let Some(el) = children.item(i) else {
+            continue;
+        };
+
+        let is_plugin = el.tag_name().starts_with("PERSPECTIVE-VIEWER-")
+            && el
+                .get_attribute("slot")
+                .is_some_and(|slot| !slot.starts_with("tab-"));
+
+        if is_plugin {
+            stamp_plugin_host_state(viewer, &el);
+        }
+    }
+}

package/src/rust/utils/pubsub.rs

@@ -127,7 +127,6 @@ impl<T: Clone + 'static> PubSub<T> {
     }
 
     /// Convert [`PubSub::emit`] to a `Box<dyn Fn(T)>`.
-    #[must_use]
     pub fn as_boxfn(&self) -> Box<dyn Fn(T) + 'static> {
         let internal = PubSub(self.0.clone());
         Box::new(move |val: T| internal.emit(val))