@perspective-dev/viewer 5.5.1 → 5.6.0

package/src/rust/tasks/update_theme.rs

@@ -13,26 +13,62 @@
 //! Theme reset / set task.
 
 use futures::future::join_all;
+use perspective_client::clone;
 use perspective_js::utils::*;
 
 use crate::presentation::Presentation;
-use crate::renderer::Renderer;
+use crate::renderer::{Renderer, StagedEdit};
+use crate::session::{EditDelta, OpKind, Session};
 use crate::workspace::Workspace;
 
 /// Give `renderer` the concrete registry default IF it has none yet — the
 /// cold-boot case, where the panel was created before the registry first
 /// parsed and `active_theme_name_sync` had nothing to resolve. Only ever
 /// FILLS IN, never overwrites, so it cannot repaint a themed panel.
-pub(crate) async fn seed_panel_theme(presentation: &Presentation, renderer: &Renderer) {
+pub(crate) async fn seed_panel_theme(
+    presentation: &Presentation,
+    session: &Session,
+    renderer: &Renderer,
+) {
     if renderer.theme().is_none() {
-        renderer.set_theme(presentation.get_default_theme_name().await);
+        submit_theme(
+            session,
+            renderer,
+            presentation.get_default_theme_name().await,
+        );
     }
 }
 
+/// Submit a theme pick as a UI edit, visible to the UI from this call.
+pub fn submit_theme(session: &Session, renderer: &Renderer, theme: Option<String>) {
+    let staged = renderer.stage(StagedEdit::Theme(theme.clone()));
+    let kind = OpKind::Edit {
+        delta: EditDelta::Renderer,
+        swaps_plugin: false,
+    };
+
+    let _ticket = session.submit(kind, {
+        clone!(renderer);
+        move |_ctx| {
+            Box::pin(async move {
+                renderer.commit_theme(theme);
+                drop(staged);
+                Ok(None)
+            })
+        }
+    });
+}
+
+/// [`submit_theme`] plus a synchronous [`Renderer::stamp_theme`].
+pub fn submit_theme_stamped(session: &Session, renderer: &Renderer, theme: Option<String>) {
+    submit_theme(session, renderer, theme);
+    renderer.stamp_theme(None);
+}
+
 /// [`seed_panel_theme`] for every panel.
 pub(crate) async fn seed_default_themes(presentation: &Presentation, workspace: &Workspace) {
     for panel in workspace.panels() {
-        seed_panel_theme(presentation, &panel.renderer).await;
+        seed_panel_theme(presentation, &panel.session, &panel.renderer).await;
     }
 }
 
@@ -55,6 +91,7 @@ pub(crate) async fn seed_default_themes(presentation: &Presentation, workspace:
 /// stamped at the plugin's last capture): the picked panel when the value
 /// is genuinely new, and never a panel that has yet to first-paint.
 pub fn update_theme(
+    session: &Session,
     renderer: &Renderer,
     presentation: &Presentation,
     workspace: &Workspace,
@@ -65,12 +102,13 @@ pub fn update_theme(
     // cascade styles. Only "reset to default" has to await the registry, and
     // it records the resolved NAME, never an empty theme.
     if let Some(name) = &theme {
-        renderer.set_theme_stamped(Some(name.clone()));
+        submit_theme_stamped(session, renderer, Some(name.clone()));
     }
 
     let presentation = presentation.clone();
     let workspace = workspace.clone();
     let renderer = renderer.clone();
+    let session = session.clone();
     ApiFuture::spawn(async move {
         match theme {
             Some(name) => {
@@ -78,7 +116,8 @@ pub fn update_theme(
             },
             None => {
                 presentation.reset_theme().await?;
-                renderer.set_theme_stamped(presentation.get_default_theme_name().await);
+                let default = presentation.get_default_theme_name().await;
+                submit_theme_stamped(&session, &renderer, default);
             },
         }
 

package/src/rust/ui/containers/scroll_panel.rs

@@ -195,6 +195,22 @@ impl Component for ScrollPanel {
         };
 
         let width_style = format!("width:{}px", self.viewport_width.max(0.0));
+        let mut rows = windowed_items
+            .iter()
+            .cloned()
+            .map(Html::from)
+            .collect::<Vec<_>>();
+
+        if !ctx.props().omit_autosize_div {
+            rows.push(html! {
+                <div
+                    key="__scroll-panel-auto-width__"
+                    class="scroll-panel-auto-width"
+                    style={width_style}
+                />
+            });
+        }
+
         let items = if !windowed_items.is_empty() {
             let onscroll = ctx.link().batch_callback(|_| {
                 vec![
@@ -214,16 +230,7 @@ impl Component for ScrollPanel {
                     ondrop={&ctx.props().drop}
                     class={ctx.props().class.clone()}
                 >
-                    <div class="scroll-panel-container" style={window_style}>
-                        { for windowed_items.iter().cloned().map(Html::from) }
-                        if !ctx.props().omit_autosize_div {
-                            <div
-                                key="__scroll-panel-auto-width__"
-                                class="scroll-panel-auto-width"
-                                style={width_style}
-                            />
-                        }
-                    </div>
+                    <div class="scroll-panel-container" style={window_style}>{ for rows }</div>
                     <div class="scroll-panel-content" style={content_style} />
                 </div>
             }

package/src/rust/ui/containers/split_panel.rs

@@ -496,44 +496,3 @@ impl ResizingState {
         Ok(self.body_style.set_property("cursor", &self.cursor)?)
     }
 }
-
-#[cfg(test)]
-mod tests {
-    use super::*;
-
-    #[test]
-    fn html_if_empty_branch_is_not_literally_empty() {
-        let via_if: Html = html! { if false { <div /> } else { <></> } };
-        assert_ne!(via_if, html! { <></> });
-    }
-
-    #[test]
-    fn empty_fragment_is_empty() {
-        assert!(is_empty_html(&html! { <></> }));
-    }
-
-    #[test]
-    fn html_if_empty_branch_is_semantically_empty() {
-        assert!(is_empty_html(&html! { if false { <div/> } else { <></> } }));
-    }
-
-    #[test]
-    fn nested_empty_fragments_are_empty() {
-        assert!(is_empty_html(&html! { <><><></></></> }));
-    }
-
-    #[test]
-    fn tag_is_not_empty() {
-        assert!(!is_empty_html(&html! { <div/> }));
-    }
-
-    #[test]
-    fn fragment_containing_a_tag_is_not_empty() {
-        assert!(!is_empty_html(&html! { <><div/></> }));
-    }
-
-    #[test]
-    fn text_is_not_empty() {
-        assert!(!is_empty_html(&html! { { "" } }));
-    }
-}

package/src/rust/ui/context_menu.rs

@@ -10,7 +10,9 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-use web_sys::MouseEvent;
+use perspective_js::utils::global;
+use wasm_bindgen::JsCast;
+use web_sys::{HtmlElement, MouseEvent, Node};
 use yew::prelude::*;
 
 /// A single command row in a `ContextMenu`.
@@ -101,25 +103,162 @@ fn render_entry(entry: &ContextMenuEntry, on_close: &Callback<()>) -> Html {
             on_select,
             entries,
         } => {
-            let onclick = {
-                let on_select = on_select.clone();
-                let on_close = on_close.clone();
-                Callback::from(move |e: MouseEvent| {
-                    e.stop_propagation();
-                    if let Some(on_select) = &on_select {
-                        on_select.emit(());
-                        on_close.emit(());
-                    }
-                })
-            };
-
-            let children = entries.iter().map(|entry| render_entry(entry, on_close));
             html! {
-                <span class="context-menu-item has-submenu" {onclick}>
-                    { label.clone() }
-                    <div class="context-menu context-menu-submenu">{ for children }</div>
-                </span>
+                <Submenu
+                    label={label.clone()}
+                    on_select={on_select.clone()}
+                    entries={entries.clone()}
+                    on_close={on_close.clone()}
+                />
             }
         },
     }
 }
+
+#[derive(Properties, PartialEq)]
+pub struct SubmenuProps {
+    pub label: String,
+    pub on_select: Option<Callback<()>>,
+    pub entries: Vec<ContextMenuEntry>,
+    pub on_close: Callback<()>,
+}
+
+pub enum SubmenuMsg {
+    Enter,
+    Leave,
+    Measure,
+}
+
+/// A hover-opened flyout row that opens toward whichever side of its parent
+/// has room for it, tracked through the bubbling `mouseover`/`mouseout` pair
+/// because Chrome withholds `mouseenter` from listeners on a shadow root.
+pub struct Submenu {
+    flyout: NodeRef,
+    open: bool,
+    flip_x: bool,
+    flip_y: bool,
+}
+
+impl Submenu {
+    /// Which sides the flyout must open toward to stay on-screen, or `None`
+    /// while it is hidden and has no size to measure.
+    fn decide(&self) -> Option<(bool, bool)> {
+        let flyout = self.flyout.cast::<HtmlElement>()?;
+        let item = flyout.parent_element()?;
+        let flyout_rect = flyout.get_bounding_client_rect();
+        if flyout_rect.width() == 0.0 {
+            return None;
+        }
+
+        let window = global::window();
+        let inner_width = window.inner_width().unwrap().as_f64().unwrap();
+        let inner_height = window.inner_height().unwrap().as_f64().unwrap();
+        let item_rect = item.get_bounding_client_rect();
+        let over_x = inner_width < item_rect.right() + flyout_rect.width();
+        let over_y = inner_height < item_rect.top() - 1.0 + flyout_rect.height();
+        let flip_x = over_x && item_rect.left() > inner_width - item_rect.right();
+        let flip_y = over_y && item_rect.bottom() > inner_height - item_rect.top();
+        Some((flip_x, flip_y))
+    }
+}
+
+impl Component for Submenu {
+    type Message = SubmenuMsg;
+    type Properties = SubmenuProps;
+
+    fn create(_ctx: &Context<Self>) -> Self {
+        Self {
+            flyout: NodeRef::default(),
+            open: false,
+            flip_x: false,
+            flip_y: false,
+        }
+    }
+
+    fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
+        match msg {
+            SubmenuMsg::Enter => {
+                let changed = !self.open;
+                self.open = true;
+                changed
+            },
+            SubmenuMsg::Leave => {
+                let changed = self.open;
+                self.open = false;
+                changed
+            },
+            SubmenuMsg::Measure => match self.decide() {
+                Some((flip_x, flip_y)) => {
+                    let changed = (flip_x, flip_y) != (self.flip_x, self.flip_y);
+                    self.flip_x = flip_x;
+                    self.flip_y = flip_y;
+                    changed
+                },
+                None => false,
+            },
+        }
+    }
+
+    fn rendered(&mut self, ctx: &Context<Self>, _first_render: bool) {
+        if self.open
+            && self
+                .decide()
+                .is_some_and(|d| d != (self.flip_x, self.flip_y))
+        {
+            ctx.link().send_message(SubmenuMsg::Measure);
+        }
+    }
+
+    fn view(&self, ctx: &Context<Self>) -> Html {
+        let props = ctx.props();
+        let onclick = {
+            let on_select = props.on_select.clone();
+            let on_close = props.on_close.clone();
+            Callback::from(move |e: MouseEvent| {
+                e.stop_propagation();
+                if let Some(on_select) = &on_select {
+                    on_select.emit(());
+                    on_close.emit(());
+                }
+            })
+        };
+
+        let onmouseover = ctx.link().callback(|_: MouseEvent| SubmenuMsg::Enter);
+        let onmouseout = ctx.link().batch_callback({
+            let flyout = self.flyout.clone();
+            move |event: MouseEvent| {
+                let item = flyout.cast::<HtmlElement>()?.parent_element()?;
+                let related = event
+                    .related_target()
+                    .and_then(|target| target.dyn_into::<Node>().ok());
+
+                let stays = related.is_some_and(|node| item.contains(Some(&node)));
+                (!stays).then_some(SubmenuMsg::Leave)
+            }
+        });
+        let mut class = classes!("context-menu", "context-menu-submenu");
+        if self.open {
+            class.push("open");
+        }
+
+        if self.flip_x {
+            class.push("flip-x");
+        }
+
+        if self.flip_y {
+            class.push("flip-y");
+        }
+
+        let children = props
+            .entries
+            .iter()
+            .map(|entry| render_entry(entry, &props.on_close));
+
+        html! {
+            <span class="context-menu-item has-submenu" {onclick} {onmouseover} {onmouseout}>
+                { props.label.clone() }
+                <div {class} ref={self.flyout.clone()}>{ for children }</div>
+            </span>
+        }
+    }
+}

package/src/rust/ui/font_loader.rs

@@ -12,13 +12,11 @@
 
 use std::cell::{Cell, Ref, RefCell};
 use std::future::Future;
-use std::iter::{Iterator, repeat_with};
 use std::rc::Rc;
 
 use futures::future::{join_all, select_all};
 use perspective_js::utils::{global, *};
 use wasm_bindgen::prelude::*;
-use wasm_bindgen::{JsCast, intern};
 use wasm_bindgen_futures::JsFuture;
 use yew::prelude::*;
 
@@ -119,31 +117,15 @@ impl FontLoaderProps {
         self.state.on_update.emit(());
 
         for (family, weight) in preload_fonts.iter() {
-            let task = timeout_font_task(family, weight);
-            let mut block_fonts: PromiseSet = vec![ApiFuture::new(task)];
-
-            for entry in font_iter(global::document().fonts().values()) {
-                let font_face = js_sys::Reflect::get(&entry, &intern("value").into())?
-                    .dyn_into::<web_sys::FontFace>()?;
-
-                if family == &font_face.family().replace('"', "")
-                    && (weight == &font_face.weight()
-                        || (font_face.weight() == "normal" && weight == "400"))
-                {
-                    block_fonts.push(ApiFuture::new(async move {
-                        Ok(JsFuture::from(font_face.loaded()?).await?)
-                    }));
-                }
-            }
+            let block_fonts: PromiseSet = vec![
+                ApiFuture::new(timeout_font_task(family, weight)),
+                ApiFuture::new(await_font(family.clone(), weight.clone())),
+            ];
 
             let fut = async { select_all(block_fonts).await.0 };
             block_promises.push(ApiFuture::new(fut))
         }
 
-        if block_promises.len() != preload_fonts.len() {
-            web_sys::console::warn_1(&format!("Missing preload fonts {:?}", preload_fonts).into());
-        }
-
         let res = join_all(block_promises)
             .await
             .into_iter()
@@ -156,6 +138,25 @@ impl FontLoaderProps {
     }
 }
 
+/// Resolve once the `@font-face`s needed to render [`FONT_TEST_SAMPLE`] in
+/// `(family, weight)` are loaded — `FontFaceSet.load(spec, text)` both
+/// triggers and awaits exactly those SUBSET faces, never a sibling
+/// unicode-range face the page may never use. It resolves EMPTY while the
+/// family has no registration at all (its stylesheet may still be fetching,
+/// and Firefox registers lazily-parsed faces later than Chrome), so poll.
+async fn await_font(family: String, weight: String) -> ApiResult<JsValue> {
+    let spec = format!("{weight} 12px \"{family}\"");
+    loop {
+        let fonts = global::document().fonts();
+        let loaded = JsFuture::from(fonts.load_with_text(&spec, FONT_TEST_SAMPLE)).await?;
+        if js_sys::Array::from(&loaded).length() > 0 {
+            return Ok(JsValue::UNDEFINED);
+        }
+
+        set_timeout(100).await?;
+    }
+}
+
 fn timeout_font_task(
     family: &str,
     weight: &str,
@@ -198,16 +199,3 @@ fn parse_fonts(txt: &str) -> Vec<(String, String)> {
         .flatten()
         .collect::<Vec<_>>()
 }
-
-fn font_iter(
-    iter: web_sys::FontFaceSetIterator,
-) -> impl Iterator<Item = web_sys::FontFaceSetIteratorResult> {
-    repeat_with(move || iter.next())
-        .filter_map(|x| x.ok())
-        .take_while(|entry| {
-            !js_sys::Reflect::get(entry, &intern("done").into())
-                .unwrap()
-                .as_bool()
-                .unwrap()
-        })
-}

package/src/rust/ui/form/mirrored_textarea.rs

@@ -98,15 +98,3 @@ pub fn MirroredTextarea(props: &MirroredTextareaProps) -> Html {
         </div>
     }
 }
-
-#[cfg(test)]
-mod tests {
-    use super::*;
-
-    #[test]
-    fn mirror_never_compares_equal() {
-        let mirror = Mirror(Html::default());
-        assert!(mirror != mirror.clone());
-        assert!(Mirror(Html::default()) != Mirror(Html::default()));
-    }
-}

package/src/rust/ui/form/multi_stop_gradient_selector.rs

@@ -384,92 +384,3 @@ pub fn multi_stop_gradient_selector(props: &MultiStopGradientProps) -> Html {
         </>
     }
 }
-
-#[cfg(test)]
-mod tests {
-    use super::*;
-
-    fn stop(color: &str, offset: f64) -> GradientStopSpec {
-        GradientStopSpec {
-            color: color.to_owned(),
-            offset,
-        }
-    }
-
-    #[test]
-    fn sample_clamps_outside_stop_range() {
-        let stops = vec![stop("#000000", 0.25), stop("#ff0000", 0.75)];
-        assert_eq!(sample_gradient_hex(&stops, 0.0), "#000000");
-        assert_eq!(sample_gradient_hex(&stops, 1.0), "#ff0000");
-    }
-
-    #[test]
-    fn sample_interpolates_linearly() {
-        let stops = vec![stop("#000000", 0.0), stop("#ff0000", 1.0)];
-        assert_eq!(sample_gradient_hex(&stops, 0.5), "#800000");
-
-        let stops = vec![
-            stop("#000000", 0.0),
-            stop("#ffffff", 0.5),
-            stop("#ff0000", 1.0),
-        ];
-
-        assert_eq!(sample_gradient_hex(&stops, 0.25), "#808080");
-        assert_eq!(sample_gradient_hex(&stops, 0.75), "#ff8080");
-    }
-
-    #[test]
-    fn track_positions_pad_the_bar_edges() {
-        assert_eq!(track_position(0.0), "calc(8px + (100% - 16px) * 0.0000)");
-        assert_eq!(track_position(1.0), "calc(8px + (100% - 16px) * 1.0000)");
-        assert_eq!(track_position(0.333), "calc(8px + (100% - 16px) * 0.3330)");
-    }
-
-    #[test]
-    fn gradient_interpolates_on_padded_track() {
-        let stops = vec![
-            stop("#333333", 1.0),
-            stop("#111111", 0.0),
-            stop("#222222", 0.5),
-        ];
-
-        assert_eq!(
-            css_gradient(&stops),
-            format!(
-                "background:linear-gradient(to right, #111111 {}, #222222 {}, #333333 {})",
-                track_position(0.0),
-                track_position(0.5),
-                track_position(1.0)
-            )
-        );
-    }
-
-    #[test]
-    fn equalize_centers_between_neighbors_or_edges() {
-        let stops = vec![
-            stop("#111111", 0.2),
-            stop("#222222", 0.25),
-            stop("#333333", 0.4),
-        ];
-
-        assert_eq!(equalized_offset(&stops, 1), (0.2 + 0.4) / 2.0);
-
-        assert_eq!(equalized_offset(&stops, 0), 0.125);
-        assert_eq!(equalized_offset(&stops, 2), (0.25 + 1.0) / 2.0);
-
-        let single = vec![stop("#111111", 0.9)];
-        assert_eq!(equalized_offset(&single, 0), 0.5);
-    }
-
-    #[test]
-    fn sample_degenerate_cases() {
-        assert_eq!(sample_gradient_hex(&[], 0.5), "#000000");
-        let stops = vec![stop("#123456", 0.5)];
-        assert_eq!(sample_gradient_hex(&stops, 0.1), "#123456");
-        assert_eq!(sample_gradient_hex(&stops, 0.9), "#123456");
-
-        let stops = vec![stop("red", 0.0), stop("blue", 1.0)];
-        assert_eq!(sample_gradient_hex(&stops, 0.25), "red");
-        assert_eq!(sample_gradient_hex(&stops, 0.75), "blue");
-    }
-}

package/src/rust/ui/form/palette_selector.rs

@@ -386,54 +386,3 @@ pub fn palette_selector(props: &PaletteProps) -> Html {
         </>
     }
 }
-
-#[cfg(test)]
-mod tests {
-    use super::*;
-
-    fn v(items: &[&str]) -> Vec<String> {
-        items.iter().map(|x| x.to_string()).collect()
-    }
-
-    #[test]
-    fn insertion_index_splits_at_centers_and_resolves_rows() {
-        let centers = [(12.0, 12.0), (40.0, 12.0), (68.0, 12.0), (12.0, 40.0)];
-        assert_eq!(insertion_index(&centers, 0.0, 12.0), 0);
-        assert_eq!(insertion_index(&centers, 13.0, 12.0), 1);
-        assert_eq!(insertion_index(&centers, 39.0, 12.0), 1);
-        assert_eq!(insertion_index(&centers, 41.0, 12.0), 2);
-        assert_eq!(insertion_index(&centers, 90.0, 12.0), 3);
-        assert_eq!(insertion_index(&centers, 10.0, 41.0), 3);
-        assert_eq!(insertion_index(&centers, 30.0, 41.0), 4);
-        assert_eq!(insertion_index(&[], 5.0, 5.0), 0);
-    }
-
-    #[test]
-    fn slot_from_display_maps_previewed_slots_back_to_original_order() {
-        assert_eq!(slot_from_display(3, 2, 0), 3);
-        assert_eq!(slot_from_display(2, 2, 0), 3);
-        assert_eq!(slot_from_display(1, 2, 0), 2);
-        assert_eq!(slot_from_display(0, 2, 0), 0);
-        assert_eq!(slot_from_display(0, 0, 2), 0);
-        assert_eq!(slot_from_display(1, 0, 2), 0);
-        assert_eq!(slot_from_display(2, 0, 2), 1);
-        assert_eq!(slot_from_display(3, 0, 2), 2);
-        assert_eq!(slot_from_display(4, 0, 2), 4);
-        assert_eq!(slot_from_display(1, 1, 1), 1);
-        assert_eq!(slot_from_display(2, 1, 1), 1);
-        assert_eq!(slot_from_display(3, 1, 1), 3);
-    }
-
-    #[test]
-    fn reordered_moves_and_rejects_no_ops() {
-        let values = v(&["a", "b", "c", "d"]);
-        assert_eq!(reordered(&values, 0, 4), Some(v(&["b", "c", "d", "a"])));
-        assert_eq!(reordered(&values, 3, 0), Some(v(&["d", "a", "b", "c"])));
-        assert_eq!(reordered(&values, 0, 2), Some(v(&["b", "a", "c", "d"])));
-        assert_eq!(reordered(&values, 2, 1), Some(v(&["a", "c", "b", "d"])));
-        assert_eq!(reordered(&values, 1, 1), None);
-        assert_eq!(reordered(&values, 1, 2), None);
-        assert_eq!(reordered(&values, 4, 0), None);
-        assert_eq!(reordered(&values, 0, 5), None);
-    }
-}

package/src/rust/ui/portal.rs

@@ -135,19 +135,13 @@ impl PortalModal {
 
     fn position_against_target(&mut self, target: &HtmlElement) {
         let target_rect = target.get_bounding_client_rect();
-        let height = target_rect.height();
-        let width = target_rect.width();
-        let top = target_rect.top();
-        let left = target_rect.left();
-
         if !self.visible {
-            self.top = top + height - 1.0;
-            self.left = left;
-            self.visible = false;
+            self.top = target_rect.top() + target_rect.height() - 1.0;
+            self.left = target_rect.left();
         } else {
-            let anchor = calc_relative_position(&self.host, top, left, height, width);
-            self.anchor.set(anchor);
             let modal_rect = self.host.get_bounding_client_rect();
+            let anchor = calc_relative_position(&target_rect, &modal_rect);
+            self.anchor.set(anchor);
             let (new_top, new_left) = calc_anchor_position(anchor, &target_rect, &modal_rect);
             self.top = new_top;
             self.left = new_left;

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

@@ -15,14 +15,13 @@
 mod blob;
 mod download;
 mod dragdrop;
+mod mouse;
 mod request_animation_frame;
 mod selection;
 
-#[cfg(test)]
-mod tests;
-
 pub use self::blob::*;
 pub use self::download::*;
 pub use self::dragdrop::*;
+pub use self::mouse::*;
 pub use self::request_animation_frame::*;
 pub use self::selection::*;