@perspective-dev/viewer 5.3.0 → 5.4.0

package/src/rust/tasks/presize_panels.rs

@@ -166,13 +166,14 @@ pub async fn presize_visible_panels_open(
 pub async fn presize_visible_panels_pane_width(
     workspace: &Workspace,
     elem: &web_sys::HtmlElement,
+    pane_sel: &str,
     pane_width: f64,
 ) -> StagedPresents {
     let Some(mpc) = shadow_rect(elem, "#main_panel_container") else {
         return StagedPresents::default();
     };
 
-    let Some(pane) = shadow_rect(elem, "#app_panel > .split-panel-child") else {
+    let Some(pane) = shadow_rect(elem, pane_sel) else {
         return StagedPresents::default();
     };
 
@@ -308,6 +309,28 @@ fn shadow_rect(elem: &web_sys::HtmlElement, sel: &str) -> Option<web_sys::DomRec
     )
 }
 
+/// The width the `SplitPanel` pane at `pane_sel` takes with no divider
+/// override, measured under one forced synchronous layout that no paint or
+/// `ResizeObserver` can observe, or `None` when the pane isn't in the DOM.
+pub fn measure_pane_natural_width(elem: &web_sys::HtmlElement, pane_sel: &str) -> Option<f64> {
+    let pane = elem
+        .shadow_root()?
+        .query_selector(pane_sel)
+        .ok()??
+        .dyn_into::<web_sys::HtmlElement>()
+        .ok()?;
+
+    let style = pane.style();
+    let css_text = style.css_text();
+    let class_name = pane.class_name();
+    style.set_css_text("");
+    let _ = pane.class_list().remove_1("is-width-override");
+    let width = pane.get_bounding_client_rect().width();
+    style.set_css_text(&css_text);
+    pane.set_class_name(&class_name);
+    Some(width)
+}
+
 /// The open-state geometry deltas cached for the next settings *open* (P2):
 /// `(layout_area.w − mpc.w, main_column.h − mpc.h)`. Only meaningful while the
 /// settings pane is open (i.e. measured at close time).

package/src/rust/tasks/restore_and_render.rs

@@ -10,10 +10,6 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-//! Apply a full [`ViewerConfigUpdate`] (settings, theme, title, plugin,
-//! plugin_config, columns_config, view_config) and re-draw, on the snapshot
-//! pipeline (see `tasks/pipeline.rs` / `SESSION_CONFIG_COHERENCE_PLAN.md`).
-
 use futures::Future;
 use perspective_client::clone;
 
@@ -28,19 +24,6 @@ use crate::*;
 /// Apply a full [`ViewerConfigUpdate`] (theme, title, plugin selection,
 /// plugin config, columns config, view config) to the engines and re-draw.
 /// Returns an [`ApiFuture<()>`] which resolves when the draw completes.
-///
-/// `origin` says who initiated the restore ([`RunOrigin`]): a `Public`
-/// element-API call keeps the no-op-restore refresh affordance (an
-/// `Unchanged` reconcile still repaints via `update`); an `Internal`
-/// restore that reconciles `Unchanged` and changes no plugin state
-/// dispatches nothing.
-///
-/// This function owns the PRE-LOCK prologue only (element-level settings /
-/// title / host-theme mirror, plugin resolution, the synchronous config
-/// commit and spinner token); the run itself is
-/// [`locked_run`] with the caller's `task` awaited inside the lock. The
-/// `update`'s `table` field is NOT applied here — table binding is the
-/// `task`'s job (see `restore_panel` / `table_lifecycle`).
 pub fn restore_and_render(
     session: &Session,
     renderer: &Renderer,

package/src/rust/tasks/send_column_config.rs

@@ -49,7 +49,7 @@ pub fn send_column_config(
 
         clone!(session);
         renderer
-            .update_lazy(async move { Ok(session.get_view()) })
+            .update_lazy(async move { Ok(session.get_view_with_dimensions()) })
             .await?;
         renderer.column_style_changed.emit(columns_configs);
         Ok(())

package/src/rust/tasks/send_plugin_config.rs

@@ -44,7 +44,7 @@ pub fn send_plugin_config(session: &Session, renderer: &Renderer, update: Column
                 .restore(&plugin_token, Some(&columns_configs))?;
             clone!(session);
             renderer
-                .update_lazy(async move { Ok(session.get_view()) })
+                .update_lazy(async move { Ok(session.get_view_with_dimensions()) })
                 .await?;
             renderer.plugin_config_changed.emit(plugin_config);
         }

package/src/rust/tasks/set_edit_mode.rs

@@ -51,7 +51,7 @@ pub fn set_edit_mode(session: &Session, renderer: &Renderer, mode: &str) {
                 .restore(&plugin_token, Some(&columns_configs))?;
             clone!(session);
             renderer
-                .update_lazy(async move { Ok(session.get_view()) })
+                .update_lazy(async move { Ok(session.get_view_with_dimensions()) })
                 .await?;
             renderer.plugin_config_changed.emit(plugin_config);
         }

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

@@ -0,0 +1,113 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+use wasm_bindgen::JsCast;
+use web_sys::{Event, MouseEvent};
+use yew::{
+    Callback, Html, Properties, function_component, html, use_callback, use_effect_with,
+    use_mut_ref, use_node_ref,
+};
+
+use crate::ui::form::intl_label::IntlLabel;
+
+#[derive(Properties, PartialEq)]
+pub struct ControlGroupProps {
+    pub group_key: String,
+
+    pub open: bool,
+
+    pub on_toggle: Callback<(String, bool)>,
+
+    pub children: Html,
+}
+
+#[function_component]
+pub fn ControlGroup(props: &ControlGroupProps) -> Html {
+    let ontoggle = use_callback(
+        (props.group_key.clone(), props.on_toggle.clone()),
+        |event: Event, (group_key, on_toggle)| {
+            if let Some(el) = event
+                .target()
+                .and_then(|x| x.dyn_into::<web_sys::Element>().ok())
+            {
+                on_toggle.emit((group_key.clone(), el.has_attribute("open")));
+            }
+        },
+    );
+
+    let onclick = use_callback((), |event: MouseEvent, _| {
+        if !event.shift_key() {
+            return;
+        }
+
+        event.prevent_default();
+        let Some(details) = event
+            .target()
+            .and_then(|x| x.dyn_into::<web_sys::Element>().ok())
+            .and_then(|x| x.closest("details.control-group").ok().flatten())
+        else {
+            return;
+        };
+
+        let Some(scope) = details.closest(".tab-section").ok().flatten() else {
+            return;
+        };
+
+        let expand = !details.has_attribute("open");
+        let Ok(groups) = scope.query_selector_all("details.control-group") else {
+            return;
+        };
+
+        for i in 0..groups.length() {
+            let Some(el) = groups
+                .item(i)
+                .and_then(|x| x.dyn_into::<web_sys::Element>().ok())
+            else {
+                continue;
+            };
+
+            if expand {
+                let _ = el.set_attribute("open", "");
+            } else {
+                let _ = el.remove_attribute("open");
+            }
+        }
+    });
+
+    let details_ref = use_node_ref();
+    {
+        let details_ref = details_ref.clone();
+        use_effect_with(
+            (props.group_key.clone(), props.on_toggle.clone()),
+            move |(group_key, on_toggle)| {
+                let group_key = group_key.clone();
+                let on_toggle = on_toggle.clone();
+                move || {
+                    if let Some(el) = details_ref.cast::<web_sys::Element>() {
+                        on_toggle.emit((group_key, el.has_attribute("open")));
+                    }
+                }
+            },
+        );
+    }
+
+    let open = *use_mut_ref(|| props.open).borrow();
+    html! {
+        <details ref={details_ref} class="control-group" {open} {ontoggle}>
+            <summary {onclick}>
+                <span class="control-group-chevron shift-alt-icon" />
+                <IntlLabel name={props.group_key.clone()} group=true />
+            </summary>
+            { props.children.clone() }
+        </details>
+    }
+}

package/src/rust/{components → ui}/containers/dropdown_menu.rs

@@ -27,6 +27,7 @@ where
     pub callback: Callback<T>,
 }
 
+/// A clickable item list, optionally grouped (`DropDownMenuItem::OptGroup`).
 pub struct DropDownMenu<T>
 where
     T: Into<Html> + Clone + PartialEq + 'static,
@@ -64,7 +65,9 @@ where
                         });
 
                         html! {
-                            <span onmousedown={click} class="selected">{ x.clone().into() }</span>
+                            <span onmousedown={click} class="dropdown-menu-item">
+                                { x.clone().into() }
+                            </span>
                         }
                     },
                     DropDownMenuItem::OptGroup(name, xs) => {
@@ -78,7 +81,7 @@ where
                                         move |_: MouseEvent| value.clone()
                                     });
                                     html! {
-                                        <span onmousedown={ click }>
+                                        <span onmousedown={ click } class="dropdown-menu-item">
                                             { x.clone().into() }
                                         </span>
                                     }

package/src/rust/{components → ui}/containers/mod.rs

@@ -10,10 +10,7 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-//! `containers` are generic container-like components for collections of other
-//! `Component` types.
-
-pub mod dragdrop_list;
+pub mod control_group;
 pub mod dropdown_menu;
 pub mod scroll_panel;
 pub mod scroll_panel_item;

package/src/rust/{components → ui}/containers/scroll_panel.rs

@@ -10,9 +10,6 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-// Forked from https://github.com/AircastDev/yew-virtual-scroller (Apache 2.0)
-// Adds support for Yew 0.19, auto-width and a simplified message structure.
-
 use std::ops::Range;
 use std::rc::Rc;
 
@@ -67,8 +64,6 @@ pub struct ScrollPanelProps {
 }
 
 impl ScrollPanelProps {
-    /// Calculate the total virtual height of this scroll panel from the `size`
-    /// prop of its children.
     fn total_height(&self) -> f64 {
         self.children
             .iter()
@@ -148,8 +143,6 @@ impl Component for ScrollPanel {
                 self.calculate_window_content(ctx)
             },
 
-            // TODO don't hardcode pixel offsets - fix the CSS container to not
-            // require pixel offsets to work.
             ScrollPanelMsg::UpdateViewportDimensions => {
                 let viewport = self.viewport_elem(ctx);
                 let rect = viewport.get_bounding_client_rect();
@@ -174,9 +167,6 @@ impl Component for ScrollPanel {
         }
     }
 
-    /// If the new total row height is different than last time this component
-    /// was rendered, we need to double-render to read the container's
-    /// potentially updated height.
     fn changed(&mut self, ctx: &Context<Self>, _old: &Self::Properties) -> bool {
         let total_height = ctx.props().total_height();
         self.needs_rerender =
@@ -213,8 +203,6 @@ impl Component for ScrollPanel {
                 ]
             });
 
-            // TODO This glitches - we should use the `sticky` positioning strategy that
-            // `regular-table` uses.
             html! {
                 <div
                     ref={self.viewport(ctx)}
@@ -306,16 +294,6 @@ impl ScrollPanel {
             .map(|x| x.0)
             .unwrap_or_default();
 
-        // Why is this `end_node + 2`, I can see you asking yourself? `end_node` is the
-        // index of the last visible child, but [`Range`] is an open interval so we must
-        // increment by 1. The next rendered element is always occluded by the parent
-        // container, it may seem unnecessary to render it, however not doing so causing
-        // scroll glitching in Chrome:
-        // * When the first pixel of the `end_node + 1` child is scrolled into view, the
-        //   container element it is embedded in will expand past the end of the scroll
-        //   container.
-        // * Chrome detects this and helpfully scrolls this new element into view,
-        //   re-triggering the on scroll callback.
         let visible_range = start_node..ctx.props().children.len().min(end_node + 2);
         let content_window = Some(ContentWindow {
             scroll_top,

package/src/rust/{components → ui}/containers/scroll_panel_item.rs

@@ -10,9 +10,6 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-// Forked from https://github.com/AircastDev/yew-virtual-scroller (Apache 2.0)
-// Adds support for Yew 0.19, auto-width and a simplified message structure.
-
 use std::cell::Cell;
 use std::rc::Rc;
 
@@ -22,21 +19,11 @@ use yew::prelude::*;
 pub struct ScrollPanelItemProps {
     pub children: Children,
 
-    /// The expected size of this component in pixels. Calculating this value
-    /// ahead of time makes it easier to implement a high-performance virtual
-    /// renderer without resorting to weird tricks, _but_ checking that this
-    /// hint is correct is nearly as expensive. So, we only generate the
-    /// validation code in debug builds.
     pub size_hint: f64,
 
-    /// Should we measure the child sizes or just rely on the hint? This
-    /// option may be enabled during debugging to validation render optimization
-    /// via [`Self::size_hint`], but will faile tests due to the extra DOM
-    /// structure it emits.
     #[prop_or_default]
     pub is_debug_mode: bool,
 
-    /// Communicate the panel size to virtual parent
     #[prop_or_default]
     measured_size: Rc<Cell<Option<f64>>>,
 }

package/src/rust/{components → ui}/containers/select.rs

@@ -88,10 +88,6 @@ where
                 true
             },
 
-            // All the up and down arrow keys to instantly select, which is
-            // useful for keyboard warrios. This is not ada without the shift
-            // key. I'm not sure if it is _with_ the shift key either, but its
-            // cool.
             SelectMsg::KeyboardInput(is_shift, idx, code) => {
                 if is_shift {
                     if code.as_str() == "ArrowUp" {
@@ -114,13 +110,11 @@ where
         }
     }
 
-    // The `<select>` has its own state not refelcted by `SelectProps`.
     fn changed(&mut self, ctx: &Context<Self>, _old: &Self::Properties) -> bool {
         self.selected = ctx.props().selected.clone();
         true
     }
 
-    // Annoyingly, `<select>` cannot be updated from its HTML alone.
     fn rendered(&mut self, _ctx: &Context<Self>, _first_render: bool) {
         if let Some(elem) = self.select_ref.cast::<web_sys::HtmlSelectElement>() {
             elem.set_value(&format!("{}", self.selected))
@@ -230,9 +224,15 @@ where
                 <label>
                     { ctx.props().label.as_ref().map(|x| x.to_string()).unwrap_or_default() }
                 </label>
-                <div class={wrapper_class} data-value={value}>{ select }</div>
+                <div class={wrapper_class} data-value={value}>
+                    { select }
+                    <span class="select-arrow" />
+                </div>
             } else {
-                <div class={wrapper_class} data-value={value}>{ select }</div>
+                <div class={wrapper_class} data-value={value}>
+                    { select }
+                    <span class="select-arrow" />
+                </div>
             }
         }
     }

package/src/rust/{components → ui}/containers/sidebar.rs

@@ -19,38 +19,25 @@ use yew::{
     use_node_ref,
 };
 
-use crate::components::containers::sidebar_close_button::SidebarCloseButton;
-use crate::components::editable_header::{EditableHeader, EditableHeaderProps};
 use crate::js::{ResizeObserver, ResizeObserverEntry};
+use crate::ui::containers::sidebar_close_button::SidebarCloseButton;
 
 #[derive(PartialEq, Clone, Properties)]
 pub struct SidebarProps {
-    /// The component's children.
     pub children: Children,
 
-    /// When this callback is called, the sidebar will close
     pub on_close: Callback<()>,
     pub id_prefix: String,
     pub width_override: Option<i32>,
     pub selected_tab: Option<usize>,
-    pub header_props: EditableHeaderProps,
-
-    /// Trap-door width shared across this sidebar's tabs: the lifted
-    /// running max of the widths this component reports through
-    /// `on_auto_width`. Held by the parent (ultimately
-    /// `PerspectiveViewer`'s geometry state, like the settings panel's
-    /// Query/Plugin/Debug trap-door) so it survives tab switches AND
-    /// sidebar re-mounts, and clears on divider reset.
+    pub header: Html,
+
     #[prop_or_default]
     pub auto_width: f64,
 
-    /// Fires with the sidebar's rendered width after each render; the
-    /// owner keeps the running max threaded back as `auto_width`.
     #[prop_or_default]
     pub on_auto_width: Callback<f64>,
 
-    /// Pinned state for the header's pin toggle; the button renders only
-    /// when `on_toggle_pin` is provided.
     #[prop_or_default]
     pub is_pinned: bool,
 
@@ -58,23 +45,12 @@ pub struct SidebarProps {
     pub on_toggle_pin: Option<Callback<()>>,
 }
 
-/// Sidebars are designed to live in a
-/// [`super::split_panel::SplitPanel`]
+/// Sidebars are designed to live in a `SplitPanel`.
 #[function_component]
 pub fn Sidebar(p: &SidebarProps) -> Html {
     let id = &p.id_prefix;
     let noderef = use_node_ref();
 
-    // The trap-door reports the sidebar's rendered width to its owner via
-    // a `ResizeObserver` on the sidebar element, NOT a render effect:
-    // width changes are driven by DOM mutations anywhere in the tab
-    // subtree (e.g. the window editor staging a long column name into a
-    // slot), which need not re-render this component at all. The observer
-    // sees every one. `contentRect` (not the border box) is load-bearing:
-    // the sizer below is a content child, so ratcheting the border box
-    // would feed any sidebar padding back into unbounded growth. A manual
-    // divider drag (`width_override`) disables the ratchet until the
-    // divider resets.
     let live_props = use_mut_ref(|| (Callback::<f64>::default(), None::<i32>));
     *live_props.borrow_mut() = (p.on_auto_width.clone(), p.width_override);
     use_effect_with((), {
@@ -139,10 +115,7 @@ pub fn Sidebar(p: &SidebarProps) -> Html {
         <>
             <SidebarCloseButton id={format!("{id}_close_button")} on_close_sidebar={&p.on_close} />
             <div class="sidebar_column" id={format!("{id}_sidebar")} ref={noderef}>
-                <div class="sidebar_header">
-                    <EditableHeader ..p.header_props.clone() />
-                    { pin_button }
-                </div>
+                <div class="sidebar_header">{ p.header.clone() }{ pin_button }</div>
                 <div class="sidebar_border" id={format!("{id}_border")} />
                 { p.children.iter().collect::<Html>() }
                 <div class="sidebar-auto-width" style={width_style} />