@perspective-dev/viewer 4.5.2 → 5.0.0

package/src/rust/components/main_panel/frame_theme.rs

@@ -0,0 +1,186 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+//! `MainPanel::stamp_frame_themes`: mirror each panel's effective theme
+//! *background* onto its `<regular-layout-frame>`.
+//!
+//! The frames live in the viewer's shadow DOM, so the document theme rules
+//! (`perspective-viewer [theme="X"]`) can never match them — the
+//! `--psp--background-color` their `::part(container)` background resolves
+//! (viewer.css) inherits down from the viewer host, i.e. always the *host*
+//! theme. A frame is normally covered by its slotted plugin (which paints its
+//! own per-panel themed background), but while the plugin is missing — not yet
+//! mounted, first draw pending, or torn down — the host-theme container shows
+//! through a panel themed differently, as a visible artifact.
+//!
+//! There is no native cascade channel from the light-DOM plugin to the frame
+//! (siblings in the flattened tree), so the value is mirrored imperatively:
+//! each panel's *plugin element* — light-DOM, slotted under the panel's slot,
+//! mounted eagerly at panel creation (`create_panel_model` /
+//! `Renderer::mount_active_plugin`) — is where the document theme rules
+//! actually resolve, so its computed `--psp--background-color` is copied onto
+//! the frame's inline style, where the frame's shadow parts inherit it. The
+//! plugin is the ONLY sound source element:
+//!
+//! - An owned hidden probe child of the viewer does NOT work: an *unslotted*
+//!   light-DOM child of a shadow host is outside the flattened tree, and
+//!   `getComputedStyle` returns all-empty for it even though the document rules
+//!   match it syntactically (selector matching is DOM-tree; style computation
+//!   is flat-tree).
+//! - The `<perspective-viewer-tab>` is slotted, but stamps its own `theme` attr
+//!   in `PanelTab::rendered` — an unordered sibling lifecycle relative to this
+//!   pass (the theme-stamp-lag class of bug).
+//! - The plugin's `theme` attr, by contrast, is stamped *synchronously at the
+//!   mutation sites* (`update_theme`, `restorePanel`, …) before the events that
+//!   schedule this render, so it is current when this pass reads it.
+//!
+//! A read is trusted ONLY when the plugin's stamped attr equals the theme
+//! being mirrored: a freshly-created panel's plugin is mounted *unstamped*
+//! (the attr first lands inside its first locked dispatch), and reading it
+//! early would silently mirror the HOST theme's values. Trusted reads seed
+//! [`MainPanel::theme_backgrounds`], the fallback for frames with no readable
+//! plugin (an unregistered plugin name stays lazily unmounted; plugin-switch
+//! and teardown transients). A frame with neither leaves the pass gate
+//! unlatched, so it retries on subsequent renders until the dispatch stamp
+//! lands (the render that follows that dispatch's `update_count` bump).
+//!
+//! Unlike the plugin `theme`/`active` stamps (see the NOTE in [`reconcile`]),
+//! the frame is pure viewer chrome — no plugin dispatch reads it — so
+//! stamping it from this async `rendered` pass cannot split a plugin draw
+//! across paints, and it needs no lock.
+
+use wasm_bindgen::prelude::*;
+use yew::prelude::*;
+
+use super::MainPanel;
+use crate::utils::PtrEqRc;
+use crate::workspace::PanelId;
+
+/// The custom property mirrored onto each frame: what viewer.css's
+/// `.rl-panel::part(container)` background resolves.
+const BACKGROUND_VAR: &str = "--psp--background-color";
+
+/// The inputs the frame backgrounds were last computed from; re-mirroring is
+/// skipped while these are unchanged, so the forced style recalcs of
+/// `getComputedStyle` don't run on every render (e.g. the per-update
+/// `update_count` renders of a streaming table). `available_themes` is part of
+/// the key because theme CSS registering late changes the *computed* value
+/// under an unchanged theme name.
+pub(super) type FrameThemeSnapshot = (
+    Vec<PanelId>,
+    Vec<(String, Option<String>)>,
+    PtrEqRc<Vec<String>>,
+);
+
+impl MainPanel {
+    /// Mirror each panel's effective theme background (its own theme, else the
+    /// registry default — the same fallback the tab/menu use) onto its
+    /// `<regular-layout-frame>`'s inline `--psp--background-color`, read off
+    /// the panel's stamped plugin element (else the theme-keyed cache of prior
+    /// reads). A panel with no resolvable theme has the property removed,
+    /// falling back to the inherited host-theme value.
+    pub(super) fn stamp_frame_themes(&mut self, ctx: &Context<Self>) {
+        let Some(layout) = self.layout_ref.cast::<web_sys::Element>() else {
+            return;
+        };
+
+        let props = ctx.props();
+        let snapshot: FrameThemeSnapshot = (
+            props.panel_ids.clone(),
+            props.panel_themes.clone(),
+            props.presentation_props.available_themes.clone(),
+        );
+
+        if self.stamped_frame_themes.as_ref() == Some(&snapshot) {
+            return;
+        }
+
+        // A theme-registry change can re-value an unchanged theme name, so
+        // cached reads from the previous registry are unsound.
+        if let Some((_, _, prev_themes)) = &self.stamped_frame_themes
+            && prev_themes != &snapshot.2
+        {
+            self.theme_backgrounds.clear();
+        }
+
+        let viewer = props.presentation.viewer_elem().clone();
+        let mut complete = true;
+        let children = layout.children();
+        for i in 0..children.length() {
+            let Some(frame) = children.item(i) else {
+                continue;
+            };
+
+            if !frame
+                .tag_name()
+                .eq_ignore_ascii_case("regular-layout-frame")
+            {
+                continue;
+            }
+
+            let Some(name) = frame.get_attribute("name") else {
+                continue;
+            };
+
+            let theme = props.effective_panel_theme(&name);
+
+            let background = theme.as_ref().and_then(|theme| {
+                let fresh = read_plugin_background(&viewer, &name, theme);
+                if let Some(color) = &fresh {
+                    self.theme_backgrounds.insert(theme.clone(), color.clone());
+                }
+
+                let value = fresh.or_else(|| self.theme_backgrounds.get(theme).cloned());
+                complete &= value.is_some();
+                value
+            });
+
+            let style = frame.unchecked_ref::<web_sys::HtmlElement>().style();
+            match background {
+                Some(color) => {
+                    let _ = style.set_property(BACKGROUND_VAR, &color);
+                },
+                None => {
+                    let _ = style.remove_property(BACKGROUND_VAR);
+                },
+            }
+        }
+
+        // Latch only a fully-resolved pass; an unresolved frame (unmounted or
+        // not-yet-stamped plugin) retries each render until its dispatch
+        // stamp lands.
+        self.stamped_frame_themes = complete.then_some(snapshot);
+    }
+}
+
+/// Read the computed [`BACKGROUND_VAR`] off `slot`'s plugin element — the
+/// viewer light-DOM child mounted under exactly that slot name (the tab and
+/// toolbar use `tab-`/`statusbar-extra-` prefixed slots). Requires the
+/// plugin's `theme` attr to already equal `theme` — during a plugin switch
+/// two elements briefly share the slot, and a freshly-mounted plugin is not
+/// yet stamped; both are disambiguated by the attr check.
+fn read_plugin_background(viewer: &web_sys::Element, slot: &str, theme: &str) -> Option<String> {
+    let children = viewer.children();
+    let plugin = (0..children.length())
+        .filter_map(|i| children.item(i))
+        .filter(|el| el.get_attribute("slot").as_deref() == Some(slot))
+        .find(|el| el.get_attribute("theme").as_deref() == Some(theme))?;
+
+    let value = web_sys::window()?
+        .get_computed_style(&plugin)
+        .ok()??
+        .get_property_value(BACKGROUND_VAR)
+        .ok()?;
+
+    let value = value.trim();
+    (!value.is_empty()).then(|| value.to_owned())
+}

package/src/rust/components/main_panel/msg.rs

@@ -0,0 +1,62 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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 crate::components::panel_menu::PanelCommand;
+
+#[derive(Debug)]
+pub enum MainPanelMsg {
+    PointerEvent(web_sys::PointerEvent),
+
+    /// The `Workspace` staged-panel set changed (`staged_changed` PubSub —
+    /// see `Workspace::stage_panel`): re-render so cells/tabs/wrappers
+    /// reflect it and `reconcile` inserts a promoted panel. Subscribed on
+    /// MainPanel's OWN scope — the root's `LayoutChanged` delivery proved
+    /// unreliable from element-API task contexts (promoted panels stranded
+    /// in their hidden wrappers), while this component's own messages
+    /// deliver in every observed context.
+    StagedChanged,
+
+    /// The `<regular-layout>` tree changed (fired by its
+    /// `regular-layout-update` event). Used to detect panels removed from
+    /// the layout (e.g. a frame's close button) so they can be disposed.
+    LayoutUpdated,
+
+    /// A tab was selected (fired by `regular-layout-select`, `detail.name`);
+    /// the selected panel becomes the active panel. This is
+    /// regular-layout's own selection signal, so it resolves the correct
+    /// panel within a stack.
+    TabSelected(String),
+
+    /// The layout is about to resize its cells (fired by the cancelable
+    /// `regular-layout-before-resize`). Carries the event so its
+    /// `PresizeDetail` can pre-size each panel's plugin to its target box
+    /// before the layout commits — avoiding the post-commit resize
+    /// shear/clip. The handler (`onbeforeresize` closure) has already
+    /// `preventDefault()`-ed it.
+    BeforeResize(web_sys::Event),
+
+    /// A right-click opened the panel context menu (target panel id, client
+    /// x, y). Fired by the imperative `contextmenu` listener on the panel
+    /// container — see `_contextmenu_listener` — and by each `PanelTab`.
+    /// `Some(id)` activates that panel and opens its
+    /// [`PanelMenu`](crate::components::panel_menu::PanelMenu) at the
+    /// cursor; `None` is the EMPTY stage (zero panels) — a target-less menu
+    /// offering only "New", whose items create the first panel.
+    ContextMenu(Option<String>, f64, f64),
+
+    /// Dismiss the panel context menu (the menu session ended).
+    CloseContextMenu,
+
+    /// The open context menu selected a command. Maximize/Restore act on the
+    /// layout here; the rest forward to `on_panel_command`.
+    Command(PanelCommand),
+}

package/src/rust/components/main_panel/presize.rs

@@ -0,0 +1,220 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+//! The `MainPanelMsg::BeforeResize` handler: pre-size every panel's plugin to
+//! its *target* cell box before the `<regular-layout>` commit, so content is
+//! ready ahead of the geometry change (no post-commit shear/clip).
+
+use std::collections::HashMap;
+
+use futures::future::join_all;
+use perspective_client::utils::PerspectiveResultExt;
+use perspective_js::utils::JsValueSerdeExt;
+use wasm_bindgen::prelude::*;
+use yew::prelude::*;
+
+use super::MainPanel;
+use crate::ApiFuture;
+use crate::js::{PresizeDetail, RegularLayout};
+use crate::renderer::Renderer;
+use crate::tasks::PanelResizeObserverHandle;
+use crate::workspace::PanelId;
+
+fn set_tab_presize(tab: &web_sys::HtmlElement, dx: f64, dy: f64) {
+    if dx.abs() > crate::renderer::SUBPIXEL_EPSILON || dy.abs() > crate::renderer::SUBPIXEL_EPSILON
+    {
+        let _ = tab
+            .style()
+            .set_property("transform", &format!("translate({dx}px, {dy}px)"));
+    }
+}
+
+/// Remove the inline presize translate applied by [`set_tab_presize`] (a no-op
+/// when none was set). Cleared in the SAME synchronous run as the plugin clear
+/// and `resumeResize`, so the tab and its plugin land at the committed grid
+/// position together with no intermediate paint.
+fn clear_tab_presize(tab: &web_sys::HtmlElement) {
+    let _ = tab.style().remove_property("transform");
+}
+
+#[derive(serde::Deserialize)]
+struct PresizePath {
+    #[serde(with = "serde_wasm_bindgen::preserve")]
+    view_window: JsValue,
+}
+
+/// The current screen origin of a frame's grid TRACK (its margin box — the
+/// coordinate space `real_coordinates` reports), measured live from the frame.
+/// `target_track − current_track` is the presize translate delta: the plugin's
+/// offset *within* its track is constant across a layout transition, so the
+/// track delta is exactly the plugin delta (see `Renderer::presize_with_box`).
+fn frame_track_origin(frame: &web_sys::Element) -> Option<(f64, f64)> {
+    let style = web_sys::window()?.get_computed_style(frame).ok()??;
+    let px = |prop: &str| {
+        style
+            .get_property_value(prop)
+            .ok()
+            .and_then(|v| v.trim().trim_end_matches("px").parse::<f64>().ok())
+            .unwrap_or(0.0)
+    };
+    let rect = frame.get_bounding_client_rect();
+    Some((
+        rect.left() - px("margin-left"),
+        rect.top() - px("margin-top"),
+    ))
+}
+
+impl MainPanel {
+    pub(super) fn on_before_resize(&mut self, ctx: &Context<Self>, event: web_sys::Event) -> bool {
+        let Some(el) = self.layout_ref.cast::<web_sys::HtmlElement>() else {
+            return false;
+        };
+
+        let layout: RegularLayout = el.unchecked_into();
+        let detail = event
+            .unchecked_ref::<web_sys::CustomEvent>()
+            .detail()
+            .unchecked_into::<PresizeDetail>();
+
+        let paths: HashMap<String, PresizePath> = detail
+            .calculate_presize_paths()
+            .into_serde_ext()
+            .unwrap_or_default();
+
+        // Bind a drag ResizeObserver on the panel being dragged: it's
+        // the one present in the layout but EXCLUDED from the presize
+        // paths. A STAGED panel is absent from the layout for a different
+        // reason than the dragged panel — never bind the per-drag observer
+        // to its staging wrapper.
+        for id in &ctx.props().panel_ids {
+            let name = id.as_str();
+            if !paths.contains_key(name)
+                && !self.panel_resize_observers.contains_key(name)
+                && !ctx.props().workspace.is_staged(id)
+                && let Some(panel) = ctx.props().workspace.panel(id)
+                && let Some(plugin) = panel.renderer.active_plugin()
+            {
+                let plugin_el = plugin.unchecked_ref::<web_sys::HtmlElement>();
+                self.panel_resize_observers.insert(
+                    name.to_owned(),
+                    PanelResizeObserverHandle::new(plugin_el, &panel.renderer),
+                );
+            }
+        }
+
+        let workspace = ctx.props().workspace.clone();
+        let viewer = ctx.props().presentation.viewer_elem().clone();
+        let effect = workspace.effects().guard();
+        ApiFuture::spawn(async move {
+            let _effect = effect;
+            let mut targets: Vec<(Renderer, f64, f64, f64, f64)> = Vec::new();
+            let mut tab_targets: Vec<(web_sys::HtmlElement, f64, f64)> = Vec::new();
+            let mut last_chrome: Option<(f64, f64)> = None;
+            for (name, path) in &paths {
+                let cell: web_sys::DomRect =
+                    layout.real_coordinates(&path.view_window).unchecked_into();
+
+                // Only presize panels with a drawn plugin. Critically,
+                // `insertPanel`/`removePanel` *also* fire `before-resize`
+                // (they `restore()` through the presize queue), and a
+                // just-inserted panel has no plugin yet — presizing it
+                // would stall on the draw lock and `resumeResize` would
+                // never fire, freezing the layout mid-mutation. (Mirrors
+                // the old workspace's `if (!plugin_box) continue`.)
+                if let Some(panel) = workspace.panel(&PanelId::from(name.as_str()))
+                    && panel.renderer.is_plugin_activated().unwrap_or(false)
+                    && let Some(plugin) = panel.renderer.active_plugin()
+                {
+                    let plugin_el = plugin.unchecked_ref::<web_sys::Element>();
+                    let frame = layout
+                        .unchecked_ref::<web_sys::Element>()
+                        .query_selector(&format!("regular-layout-frame[name=\"{name}\"]"))
+                        .ok()
+                        .flatten();
+                    let chrome = frame
+                        .as_ref()
+                        .and_then(|frame| crate::tasks::plugin_chrome(frame, plugin_el));
+                    last_chrome = chrome.or(last_chrome);
+                    let (cw, ch) = last_chrome.unwrap_or(crate::tasks::CHROME_FALLBACK);
+                    let width = (cell.width() - cw).max(0.0);
+                    let height = (cell.height() - ch).max(0.0);
+                    let (dx, dy) = frame
+                        .as_ref()
+                        .and_then(frame_track_origin)
+                        .map(|(x, y)| (cell.left() - x, cell.top() - y))
+                        .unwrap_or((0.0, 0.0));
+                    targets.push((panel.renderer, dx, dy, width, height));
+
+                    if let Some(tab) = viewer
+                        .query_selector(&format!("perspective-viewer-tab[slot=\"tab-{name}\"]"))
+                        .ok()
+                        .flatten()
+                    {
+                        tab_targets.push((tab.unchecked_into::<web_sys::HtmlElement>(), dx, dy));
+                    }
+                }
+            }
+
+            let renderers = targets.iter().map(|(r, ..)| r.clone()).collect::<Vec<_>>();
+            let tabs = tab_targets
+                .iter()
+                .map(|(t, ..)| t.clone())
+                .collect::<Vec<_>>();
+            for (tab, dx, dy) in &tab_targets {
+                set_tab_presize(tab, *dx, *dy);
+            }
+
+            let presents = crate::tasks::staged_presents_with_deadline(
+                workspace.effects().guard(),
+                async move {
+                    join_all(
+                        targets
+                            .iter()
+                            .map(|(r, dx, dy, w, h)| r.presize_with_box(*dx, *dy, *w, *h)),
+                    )
+                    .await
+                    .into_iter()
+                    .filter_map(|r| r.ok().flatten())
+                    .collect()
+                },
+                {
+                    let renderers = renderers.clone();
+                    let tabs = tabs.clone();
+                    move || {
+                        for renderer in &renderers {
+                            let _ = renderer.clear_presize();
+                        }
+
+                        for tab in &tabs {
+                            clear_tab_presize(tab);
+                        }
+                    }
+                },
+            )
+            .await;
+
+            for renderer in &renderers {
+                renderer.clear_presize().unwrap_or_log();
+            }
+
+            for tab in &tabs {
+                clear_tab_presize(tab);
+            }
+
+            presents.reveal();
+            layout.resume_resize();
+            Ok(())
+        });
+
+        false
+    }
+}