@perspective-dev/viewer 4.2.0 → 4.4.0

package/src/rust/components/plugin_selector.rs

@@ -10,96 +10,52 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-use perspective_client::config::ViewConfigUpdate;
-use perspective_js::utils::ApiFuture;
 use yew::prelude::*;
 
-use super::containers::select::*;
 use super::style::LocalStyle;
-use crate::config::*;
-use crate::js::*;
-use crate::model::*;
-use crate::presentation::Presentation;
-use crate::renderer::*;
-use crate::session::*;
-use crate::utils::*;
-use crate::{css, *};
-
-#[derive(Properties, PartialEq, PerspectiveProperties!)]
+use crate::css;
+use crate::utils::PtrEqRc;
+
+/// Pure value props — no engine handles, no PubSub subscriptions.
+/// The parent passes updated values whenever the renderer state changes.
+#[derive(Properties, PartialEq)]
 pub struct PluginSelectorProps {
-    pub presentation: Presentation,
-    pub renderer: Renderer,
-    pub session: Session,
+    /// Name of the currently active plugin.
+    pub plugin_name: Option<String>,
+
+    /// Flat list of all registered plugin names (all categories merged).
+    pub available_plugins: PtrEqRc<Vec<String>>,
+
+    /// Called when the user selects a different plugin.
+    pub on_select_plugin: Callback<String>,
 }
 
 #[derive(Debug)]
 pub enum PluginSelectorMsg {
     ComponentSelectPlugin(String),
-    RendererSelectPlugin(String),
     OpenMenu,
 }
 
 use PluginSelectorMsg::*;
 
 pub struct PluginSelector {
-    options: Vec<SelectItem<String>>,
     is_open: bool,
-    _plugin_sub: Subscription,
 }
 
 impl Component for PluginSelector {
     type Message = PluginSelectorMsg;
     type Properties = PluginSelectorProps;
 
-    fn create(ctx: &Context<Self>) -> Self {
-        let PluginSelectorProps { renderer, .. } = ctx.props();
-        let options = generate_plugin_optgroups(renderer);
-        let _plugin_sub = renderer.plugin_changed.add_listener({
-            let link = ctx.link().clone();
-            move |plugin: JsPerspectiveViewerPlugin| {
-                let name = plugin.name();
-                link.send_message(PluginSelectorMsg::RendererSelectPlugin(name))
-            }
-        });
-
-        Self {
-            options,
-            is_open: false,
-            _plugin_sub,
-        }
+    fn create(_ctx: &Context<Self>) -> Self {
+        Self { is_open: false }
     }
 
     fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
-        let PluginSelectorProps {
-            presentation,
-            renderer,
-            session,
-            ..
-        } = ctx.props();
         match msg {
-            RendererSelectPlugin(_plugin_name) => true,
             ComponentSelectPlugin(plugin_name) => {
-                if !session.is_errored() {
-                    let metadata =
-                        renderer.get_next_plugin_metadata(&PluginUpdate::Update(plugin_name));
-
-                    let mut update = ViewConfigUpdate::default();
-                    session.set_update_column_defaults(
-                        &mut update,
-                        metadata.as_ref().unwrap_or(&*renderer.metadata()),
-                    );
-
-                    if let Ok(task) = ctx.props().update_and_render(update) {
-                        ApiFuture::spawn(task);
-                    }
-
-                    presentation.set_open_column_settings(None);
-                    self.is_open = false;
-                    false
-                } else {
-                    self.is_open = false;
-                    true
-                }
+                ctx.props().on_select_plugin.emit(plugin_name);
+                self.is_open = false;
+                false
             },
             OpenMenu => {
                 self.is_open = !self.is_open;
@@ -114,22 +70,18 @@ impl Component for PluginSelector {
 
     fn view(&self, ctx: &Context<Self>) -> Html {
         let callback = ctx.link().callback(|_| OpenMenu);
-        let plugin_name = ctx.props().renderer.get_active_plugin().unwrap().name();
+        let plugin_name = ctx.props().plugin_name.clone().unwrap_or_default();
         let plugin_name2 = plugin_name.clone();
         let class = if self.is_open { "open" } else { "" };
-        let items = self.options.iter().map(|item| match item {
-            SelectItem::OptGroup(_cat, items) => html! {
-                items.iter().filter(|x| *x != &plugin_name2).map(|x| {
-                    let callback = ctx.link().callback(ComponentSelectPlugin);
-                    html! {
-                        <PluginSelect
-                            name={ x.to_owned() }
-                            on_click={ callback } />
-                    }
-                }).collect::<Html>()
-            },
-            SelectItem::Option(_item) => html! {},
-        });
+        let items = ctx
+            .props()
+            .available_plugins
+            .iter()
+            .filter(|x| x.as_str() != plugin_name2.as_str())
+            .map(|x| {
+                let callback = ctx.link().callback(ComponentSelectPlugin);
+                html! { <PluginSelect name={x.to_owned()} on_click={callback} /> }
+            });
 
         html! {
             <>
@@ -138,7 +90,9 @@ impl Component for PluginSelector {
                     <PluginSelect name={plugin_name} on_click={callback} />
                     <div id="plugin_selector_border" />
                     if self.is_open {
-                        <div class="plugin-selector-options">{ items.collect::<Html>() }</div>
+                        <div class="plugin-selector-options scrollable">
+                            { items.collect::<Html>() }
+                        </div>
                     }
                 </div>
             </>
@@ -146,19 +100,6 @@ impl Component for PluginSelector {
     }
 }
 
-/// Generate the opt groups for the plugin selector by collecting by category
-/// then sorting.
-fn generate_plugin_optgroups(renderer: &Renderer) -> Vec<SelectItem<String>> {
-    let mut options = renderer
-        .get_all_plugin_categories()
-        .into_iter()
-        .map(|(category, value)| SelectItem::OptGroup(category.into(), value))
-        .collect::<Vec<_>>();
-
-    options.sort_by_key(|x| x.name());
-    options
-}
-
 #[derive(Properties, PartialEq)]
 struct PluginSelectProps {
     name: String,
@@ -184,9 +125,10 @@ fn PluginSelect(props: &PluginSelectProps) -> Html {
         <div
             class="plugin-select-item"
             data-plugin={name.clone()}
-            style={format!("--default-column-title:var(--plugin-name-{}--content, \"{}\")", path, props.name)}
+            style={format!("--default-column-title:var(--psp-plugin-name--{}--content, \"{}\")", path, props.name)}
             onclick={props.on_click.reform(move |_| name.clone())}
         >
+            <span class="icon" />
             <span class="plugin-select-item-name" />
         </div>
     }

package/src/rust/components/portal.rs

@@ -0,0 +1,274 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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 std::cell::Cell;
+use std::rc::Rc;
+
+use perspective_js::utils::global;
+use wasm_bindgen::JsCast;
+use wasm_bindgen::prelude::*;
+use web_sys::*;
+use yew::prelude::*;
+
+use crate::components::modal::ModalOrientation;
+use crate::components::style::StyleProvider;
+use crate::utils::*;
+
+#[derive(Properties, PartialEq)]
+pub struct PortalModalProps {
+    pub children: Children,
+
+    /// The element to position relative to. `None` means closed.
+    pub target: Option<HtmlElement>,
+
+    /// Whether the portal manages its own focus and closes on blur.
+    #[prop_or(true)]
+    pub own_focus: bool,
+
+    /// Called when the portal closes (blur, etc).
+    #[prop_or_default]
+    pub on_close: Callback<()>,
+
+    pub tag_name: &'static str,
+
+    pub theme: String,
+}
+
+pub enum PortalModalMsg {
+    Reposition,
+}
+
+pub struct PortalModal {
+    host: HtmlElement,
+    shadow_root: Element,
+    top: f64,
+    left: f64,
+    visible: bool,
+    rev_vert: ModalOrientation,
+    anchor: Rc<Cell<ModalAnchor>>,
+    _blur_closure: Option<Closure<dyn FnMut(FocusEvent)>>,
+}
+
+impl PortalModal {
+    fn attach_to_body(&self) {
+        if !self.host.is_connected() {
+            let _ = global::body().append_child(&self.host);
+        }
+    }
+
+    fn detach_from_body(&mut self) {
+        if self.host.is_connected() {
+            let _ = global::body().remove_child(&self.host);
+        }
+
+        if let Some(closure) = self._blur_closure.as_ref() {
+            self.host
+                .remove_event_listener_with_callback("blur", closure.as_ref().unchecked_ref())
+                .unwrap()
+        }
+
+        self._blur_closure = None;
+    }
+
+    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 {
+            // First pass: position at default anchor, invisible
+            self.top = top + height - 1.0;
+            self.left = left;
+            self.visible = false;
+        } else {
+            // Second pass: compute actual anchor and reposition
+            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 (new_top, new_left) = calc_anchor_position(anchor, &target_rect, &modal_rect);
+            self.top = new_top;
+            self.left = new_left;
+            self.rev_vert.set(anchor.is_rev_vert());
+        }
+    }
+
+    fn setup_blur_handler(&mut self, ctx: &Context<Self>) {
+        let on_close = {
+            let target = ctx.props().target.clone();
+            ctx.props().on_close.reform(move |_| {
+                if let Some(target) = &target {
+                    target.class_list().remove_1("modal-target").unwrap();
+                }
+            })
+        };
+
+        let closure = Closure::wrap(Box::new(move |_: FocusEvent| {
+            on_close.emit(());
+        }) as Box<dyn FnMut(FocusEvent)>);
+
+        let _ = self
+            .host
+            .add_event_listener_with_callback("blur", closure.as_ref().unchecked_ref());
+
+        self._blur_closure = Some(closure);
+    }
+}
+
+impl Component for PortalModal {
+    type Message = PortalModalMsg;
+    type Properties = PortalModalProps;
+
+    fn create(ctx: &Context<Self>) -> Self {
+        let host: HtmlElement = global::document()
+            .create_element(ctx.props().tag_name)
+            .unwrap()
+            .unchecked_into();
+
+        host.style().set_property("position", "fixed").unwrap();
+        host.style().set_property("z-index", "10000").unwrap();
+        let init = ShadowRootInit::new(ShadowRootMode::Open);
+        let shadow_root = if let Some(elem) = host.shadow_root() {
+            elem
+        } else {
+            host.attach_shadow(&init).unwrap()
+        }
+        .unchecked_into::<Element>();
+
+        Self {
+            host,
+            shadow_root,
+            top: 0.0,
+            left: 0.0,
+            visible: false,
+            rev_vert: Default::default(),
+            anchor: Default::default(),
+            _blur_closure: None,
+        }
+    }
+
+    fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
+        match msg {
+            PortalModalMsg::Reposition => {
+                self.visible = true;
+                true
+            },
+        }
+    }
+
+    fn changed(&mut self, ctx: &Context<Self>, old_props: &Self::Properties) -> bool {
+        let new_target = &ctx.props().target;
+        let old_target = &old_props.target;
+
+        match (old_target, new_target, self._blur_closure.as_ref()) {
+            (None, Some(_), Some(closure)) => {
+                self.visible = false;
+                self.host
+                    .remove_event_listener_with_callback("blur", closure.as_ref().unchecked_ref())
+                    .unwrap();
+
+                self._blur_closure = None;
+            },
+            (None, Some(_), None) => {
+                self.visible = false;
+                self._blur_closure = None;
+            },
+            (Some(_), None, _) => {
+                self.detach_from_body();
+                return true;
+            },
+            _ => {},
+        }
+
+        true
+    }
+
+    fn view(&self, ctx: &Context<Self>) -> Html {
+        let target = &ctx.props().target;
+        if target.is_none() {
+            return html! {};
+        }
+
+        let opacity = if self.visible { "" } else { ";opacity:0" };
+        let css = format!(
+            ":host{{top:{}px;left:{}px{}}}",
+            self.top, self.left, opacity
+        );
+
+        let portal_content = html! {
+            <>
+                <style>{ css }</style>
+                <ContextProvider<ModalOrientation> context={self.rev_vert.clone()}>
+                    <StyleProvider root={self.host.clone()}>
+                        { for ctx.props().children.iter() }
+                    </StyleProvider>
+                </ContextProvider<ModalOrientation>>
+            </>
+        };
+
+        yew::create_portal(portal_content, self.shadow_root.clone())
+    }
+
+    fn rendered(&mut self, ctx: &Context<Self>, _first_render: bool) {
+        if let Some(target) = &ctx.props().target {
+            if !self.host.is_connected() {
+                let theme = ctx.props().theme.as_str();
+                self.host.set_attribute("theme", theme).unwrap();
+
+                // First render with a target: attach to body, position invisible
+                self.position_against_target(target);
+                self.attach_to_body();
+
+                // Propagate theme from target
+                if let Some(theme) = target.get_attribute("theme") {
+                    let _ = self.host.set_attribute("theme", &theme);
+                }
+
+                target.class_list().add_1("modal-target").unwrap();
+
+                if ctx.props().own_focus {
+                    self.host.set_attribute("tabindex", "0").unwrap();
+                    self.setup_blur_handler(ctx);
+                }
+
+                // Schedule second positioning pass
+                let link = ctx.link().clone();
+                wasm_bindgen_futures::spawn_local(async move {
+                    request_animation_frame().await;
+                    link.send_message(PortalModalMsg::Reposition);
+                });
+            } else if self.visible {
+                // Second pass: reposition with correct anchor
+                self.position_against_target(target);
+
+                if ctx.props().own_focus && self._blur_closure.is_some() {
+                    let _ = self.host.focus();
+                }
+            }
+        }
+    }
+
+    fn destroy(&mut self, ctx: &Context<Self>) {
+        if let Some(target) = &ctx.props().target {
+            target.class_list().remove_1("modal-target").unwrap();
+            if target.get_attribute("theme").is_some() {
+                let _ = self.host.remove_attribute("theme");
+            }
+
+            let event = CustomEvent::new("-perspective-close-expression").unwrap();
+            let _ = target.dispatch_event(&event);
+        }
+
+        self.detach_from_body();
+    }
+}

package/src/rust/components/render_warning.rs

@@ -13,144 +13,93 @@
 use yew::prelude::*;
 
 use super::style::LocalStyle;
-use crate::model::*;
-use crate::renderer::*;
-use crate::session::*;
-use crate::*;
+use crate::css;
+use crate::renderer::limits::RenderLimits;
 
-#[derive(Properties, PerspectiveProperties!)]
+#[derive(Properties, PartialEq)]
 pub struct RenderWarningProps {
-    // Current dimensions
-    pub dimensions: Option<(usize, usize, Option<usize>, Option<usize>)>,
+    pub dimensions: Option<RenderLimits>,
 
-    // State
-    pub renderer: Renderer,
-    pub session: Session,
+    /// Called when the user clicks "Render all points".  The parent disables
+    /// the render warning on the active plugin and re-draws.
+    pub on_dismiss: Callback<()>,
 }
 
-impl PartialEq for RenderWarningProps {
-    fn eq(&self, other: &Self) -> bool {
-        self.dimensions == other.dimensions
-    }
-}
-
-pub enum RenderWarningMsg {
-    DismissWarning,
-}
-
-pub struct RenderWarning {
-    col_warn: Option<(usize, usize)>,
-    row_warn: Option<(usize, usize)>,
-}
-
-impl RenderWarning {
-    fn update_warnings(&mut self, ctx: &Context<Self>) {
-        if let Some((num_cols, num_rows, max_cols, max_rows)) = ctx.props().dimensions {
-            let count = num_cols * num_rows;
-            if max_cols.is_some_and(|x| x < num_cols) {
-                self.col_warn = Some((max_cols.unwrap(), num_cols));
-            } else {
-                self.col_warn = None;
-            }
-
-            if max_rows.is_some_and(|x| x < num_rows) {
-                self.row_warn = Some((num_cols * max_rows.unwrap(), count));
-            } else {
-                self.row_warn = None;
-            }
+#[function_component(RenderWarning)]
+pub fn render_warning(props: &RenderWarningProps) -> Html {
+    let dimensions = props.dimensions;
+    let (col_warn, row_warn) = if let Some(limits) = dimensions {
+        let col_warn = if limits.max_cols.is_some_and(|x| x < limits.num_cols) {
+            Some((limits.max_cols.unwrap(), limits.num_cols))
         } else {
-            self.col_warn = None;
-            self.row_warn = None;
-        }
-    }
-}
-
-impl Component for RenderWarning {
-    type Message = RenderWarningMsg;
-    type Properties = RenderWarningProps;
-
-    fn create(ctx: &Context<Self>) -> Self {
-        let mut elem = Self {
-            col_warn: None,
-            row_warn: None,
+            None
         };
 
-        elem.update_warnings(ctx);
-        elem
-    }
+        let row_warn = if limits.max_rows.is_some_and(|x| x < limits.num_rows) {
+            Some((
+                limits.num_cols * limits.max_rows.unwrap(),
+                limits.num_cols * limits.num_rows,
+            ))
+        } else {
+            None
+        };
 
-    fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
-        match msg {
-            RenderWarningMsg::DismissWarning => {
-                let state = ctx.props().clone_state();
-                ApiFuture::spawn(async move {
-                    state.renderer().disable_active_plugin_render_warning();
-                    let view_task = state.session().get_view();
-                    state.renderer().update(view_task).await
-                });
+        (col_warn, row_warn)
+    } else {
+        (None, None)
+    };
+
+    if col_warn.is_some() || row_warn.is_some() {
+        let warning = match (col_warn, row_warn) {
+            (Some((x, y)), Some((a, b))) => html! {
+                <span style="white-space: nowrap">
+                    { "Rendering" }
+                    { render_pair(x, y) }
+                    { "of columns and" }
+                    { render_pair(a, b) }
+                    { "of points." }
+                </span>
+            },
+            (Some((x, y)), None) => html! {
+                <span style="white-space: nowrap">
+                    { "Rendering" }
+                    { render_pair(x, y) }
+                    { "of columns." }
+                </span>
+            },
+            (None, Some((x, y))) => html! {
+                <span style="white-space: nowrap">
+                    { "Rendering" }
+                    { render_pair(x, y) }
+                    { "of points." }
+                </span>
             },
+            _ => html! { <div /> },
         };
-        true
-    }
-
-    fn changed(&mut self, ctx: &Context<Self>, _old: &Self::Properties) -> bool {
-        self.update_warnings(ctx);
-        true
-    }
 
-    fn view(&self, ctx: &Context<Self>) -> Html {
-        if self.col_warn.is_some() || self.row_warn.is_some() {
-            let warning = match (self.col_warn, self.row_warn) {
-                (Some((x, y)), Some((a, b))) => html! {
-                    <span style="white-space: nowrap">
-                        { "Rendering" }
-                        { render_pair(x, y) }
-                        { "of columns and" }
-                        { render_pair(a, b) }
-                        { "of points." }
+        let on_dismiss = props.on_dismiss.clone();
+        let onclick = Callback::from(move |_: MouseEvent| on_dismiss.emit(()));
+        html! {
+            <>
+                <LocalStyle href={css!("render-warning")} />
+                <div
+                    class="plugin_information plugin_information--warning"
+                    id="plugin_information--size"
+                >
+                    <span class="plugin_information__icon" />
+                    <span class="plugin_information__text" id="plugin_information_count">
+                        { warning }
                     </span>
-                },
-                (Some((x, y)), None) => html! {
-                    <span style="white-space: nowrap">
-                        { "Rendering" }
-                        { render_pair(x, y) }
-                        { "of columns." }
-                    </span>
-                },
-                (None, Some((x, y))) => html! {
-                    <span style="white-space: nowrap">
-                        { "Rendering" }
-                        { render_pair(x, y) }
-                        { "of points." }
-                    </span>
-                },
-                _ => html! { <div /> },
-            };
-
-            let onclick = ctx.link().callback(|_| RenderWarningMsg::DismissWarning);
-
-            html! {
-                <>
-                    <LocalStyle href={css!("render-warning")} />
-                    <div
-                        class="plugin_information plugin_information--warning"
-                        id="plugin_information--size"
-                    >
-                        <span class="plugin_information__icon" />
-                        <span class="plugin_information__text" id="plugin_information_count">
-                            { warning }
+                    <span class="plugin_information__actions">
+                        <span class="plugin_information__action" onmousedown={onclick}>
+                            { "Render all points" }
                         </span>
-                        <span class="plugin_information__actions">
-                            <span class="plugin_information__action" onmousedown={onclick}>
-                                { "Render all points" }
-                            </span>
-                        </span>
-                    </div>
-                </>
-            }
-        } else {
-            html! {}
+                    </span>
+                </div>
+            </>
         }
+    } else {
+        html! {}
     }
 }