@perspective-dev/viewer 4.2.0 → 4.4.0

package/src/rust/custom_elements/copy_dropdown.rs

@@ -13,24 +13,91 @@
 use std::cell::RefCell;
 use std::rc::Rc;
 
-use ::perspective_js::utils::{global, *};
+use perspective_js::utils::global;
 use wasm_bindgen::prelude::*;
 use wasm_bindgen_futures::spawn_local;
 use web_sys::*;
-use yew::*;
+use yew::prelude::*;
 
-use super::modal::*;
 use super::viewer::PerspectiveViewerElement;
-use crate::components::copy_dropdown::{CopyDropDownMenu, CopyDropDownMenuProps};
+use crate::components::copy_dropdown::CopyDropDownMenu;
+use crate::components::portal::PortalModal;
+use crate::components::style::StyleProvider;
 use crate::js::*;
-use crate::model::*;
+use crate::renderer::*;
+use crate::tasks::*;
 use crate::utils::*;
+use crate::*;
+
+type TargetState = Rc<RefCell<Option<HtmlElement>>>;
+
+#[derive(Properties, PartialEq)]
+struct CopyDropDownWrapperProps {
+    renderer: Renderer,
+    callback: Callback<ExportFile>,
+    target: TargetState,
+    custom_element: HtmlElement,
+    #[prop_or_default]
+    theme: String,
+}
+
+enum CopyDropDownWrapperMsg {
+    Open,
+    Close,
+}
+
+struct CopyDropDownWrapper {
+    target: Option<HtmlElement>,
+}
+
+impl Component for CopyDropDownWrapper {
+    type Message = CopyDropDownWrapperMsg;
+    type Properties = CopyDropDownWrapperProps;
+
+    fn create(_ctx: &Context<Self>) -> Self {
+        Self { target: None }
+    }
+
+    fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
+        match msg {
+            CopyDropDownWrapperMsg::Open => {
+                self.target = ctx.props().target.borrow().clone();
+                true
+            },
+            CopyDropDownWrapperMsg::Close => {
+                self.target = None;
+                true
+            },
+        }
+    }
+
+    fn view(&self, ctx: &Context<Self>) -> Html {
+        let on_close = ctx.link().callback(|_| CopyDropDownWrapperMsg::Close);
+        html! {
+            <StyleProvider root={ctx.props().custom_element.clone()}>
+                <PortalModal
+                    tag_name="perspective-copy-menu"
+                    target={self.target.clone()}
+                    own_focus=true
+                    {on_close}
+                    theme={ctx.props().theme.clone()}
+                >
+                    <CopyDropDownMenu
+                        renderer={ctx.props().renderer.clone()}
+                        callback={ctx.props().callback.clone()}
+                    />
+                </PortalModal>
+            </StyleProvider>
+        }
+    }
+}
 
 #[wasm_bindgen]
 #[derive(Clone)]
 pub struct CopyDropDownMenuElement {
     elem: HtmlElement,
-    modal: Rc<RefCell<Option<ModalElement<CopyDropDownMenu>>>>,
+    target: TargetState,
+    root: Rc<RefCell<Option<AppHandle<CopyDropDownWrapper>>>>,
 }
 
 impl CustomElementMetadata for CopyDropDownMenuElement {
@@ -43,24 +110,25 @@ impl CopyDropDownMenuElement {
     pub fn new(elem: HtmlElement) -> Self {
         Self {
             elem,
-            modal: Default::default(),
+            target: Default::default(),
+            root: Default::default(),
         }
     }
 
     pub fn open(&self, target: HtmlElement) {
-        if let Some(x) = &*self.modal.borrow() {
-            ApiFuture::spawn(x.clone().open(target, None));
+        *self.target.borrow_mut() = Some(target);
+        if let Some(root) = self.root.borrow().as_ref() {
+            root.send_message(CopyDropDownWrapperMsg::Open);
         }
     }
 
     pub fn hide(&self) -> ApiResult<()> {
-        let borrowed = self.modal.borrow();
-        borrowed.as_ref().into_apierror()?.hide()
+        if let Some(root) = self.root.borrow().as_ref() {
+            root.send_message(CopyDropDownWrapperMsg::Close);
+        }
+        Ok(())
     }
 
-    /// Internal Only.
-    ///
-    /// Set this custom element model's raw pointer.
     pub fn __set_model(&self, parent: &PerspectiveViewerElement) {
         self.set_config_model(parent)
     }
@@ -91,30 +159,43 @@ impl CopyDropDownMenuElement {
     {
         let callback = Callback::from({
             let model = model.clone_state();
-            let modal_rc = self.modal.clone();
+            let target = self.target.clone();
+            let root = self.root.clone();
             move |x: ExportFile| {
                 let model = model.clone();
-                let modal = modal_rc.borrow().clone().unwrap();
+                let target = target.clone();
+                let root = root.clone();
                 spawn_local(async move {
                     let mime = x.method.mimetype(x.is_chart);
                     let task = model.export_method_to_blob(x.method);
                     let result = copy_to_clipboard(task, mime).await;
                     crate::maybe_log!({
                         result?;
-                        modal.hide()?;
+                        *target.borrow_mut() = None;
+                        if let Some(root) = root.borrow().as_ref() {
+                            root.send_message(CopyDropDownWrapperMsg::Close);
+                        }
                     })
                 })
             }
         });
 
         let renderer = model.renderer().clone();
-        let props = props!(CopyDropDownMenuProps {
+        let init = ShadowRootInit::new(ShadowRootMode::Open);
+        let shadow_root = self
+            .elem
+            .attach_shadow(&init)
+            .unwrap()
+            .unchecked_into::<Element>();
+
+        let props = yew::props!(CopyDropDownWrapperProps {
             renderer,
             callback,
-            root: self.elem.clone()
+            target: self.target.clone(),
+            custom_element: self.elem.clone()
         });
 
-        let modal = ModalElement::new(self.elem.clone(), props, true, None);
-        *self.modal.borrow_mut() = Some(modal);
+        let handle = yew::Renderer::with_root_and_props(shadow_root, props).render();
+        *self.root.borrow_mut() = Some(handle);
     }
 }

package/src/rust/custom_elements/export_dropdown.rs

@@ -17,20 +17,89 @@ use perspective_js::utils::global;
 use wasm_bindgen::prelude::*;
 use wasm_bindgen_futures::spawn_local;
 use web_sys::*;
-use yew::*;
+use yew::prelude::*;
 
 use super::viewer::PerspectiveViewerElement;
-use crate::components::export_dropdown::*;
-use crate::custom_elements::modal::*;
-use crate::model::*;
+use crate::components::export_dropdown::ExportDropDownMenu;
+use crate::components::portal::PortalModal;
+use crate::components::style::StyleProvider;
+use crate::renderer::*;
+use crate::session::*;
+use crate::tasks::*;
 use crate::utils::*;
 use crate::*;
 
+type TargetState = Rc<RefCell<Option<HtmlElement>>>;
+
+#[derive(Properties, PartialEq)]
+struct ExportDropDownWrapperProps {
+    renderer: Renderer,
+    session: Session,
+    callback: Callback<ExportFile>,
+    target: TargetState,
+    custom_element: HtmlElement,
+    #[prop_or_default]
+    theme: String,
+}
+
+enum ExportDropDownWrapperMsg {
+    Open,
+    Close,
+}
+
+struct ExportDropDownWrapper {
+    target: Option<HtmlElement>,
+}
+
+impl Component for ExportDropDownWrapper {
+    type Message = ExportDropDownWrapperMsg;
+    type Properties = ExportDropDownWrapperProps;
+
+    fn create(_ctx: &Context<Self>) -> Self {
+        Self { target: None }
+    }
+
+    fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
+        match msg {
+            ExportDropDownWrapperMsg::Open => {
+                self.target = ctx.props().target.borrow().clone();
+                true
+            },
+            ExportDropDownWrapperMsg::Close => {
+                self.target = None;
+                true
+            },
+        }
+    }
+
+    fn view(&self, ctx: &Context<Self>) -> Html {
+        let on_close = ctx.link().callback(|_| ExportDropDownWrapperMsg::Close);
+        html! {
+            <StyleProvider root={ctx.props().custom_element.clone()}>
+                <PortalModal
+                    tag_name="perspective-export-menu"
+                    target={self.target.clone()}
+                    own_focus=true
+                    {on_close}
+                    theme={ctx.props().theme.clone()}
+                >
+                    <ExportDropDownMenu
+                        renderer={ctx.props().renderer.clone()}
+                        session={ctx.props().session.clone()}
+                        callback={ctx.props().callback.clone()}
+                    />
+                </PortalModal>
+            </StyleProvider>
+        }
+    }
+}
+
 #[wasm_bindgen]
 #[derive(Clone)]
 pub struct ExportDropDownMenuElement {
     elem: HtmlElement,
-    modal: Rc<RefCell<Option<ModalElement<ExportDropDownMenu>>>>,
+    target: TargetState,
+    root: Rc<RefCell<Option<AppHandle<ExportDropDownWrapper>>>>,
 }
 
 impl CustomElementMetadata for ExportDropDownMenuElement {
@@ -43,24 +112,25 @@ impl ExportDropDownMenuElement {
     pub fn new(elem: HtmlElement) -> Self {
         Self {
             elem,
-            modal: Default::default(),
+            target: Default::default(),
+            root: Default::default(),
         }
     }
 
     pub fn open(&self, target: HtmlElement) {
-        if let Some(x) = &*self.modal.borrow() {
-            ApiFuture::spawn(x.clone().open(target, None));
+        *self.target.borrow_mut() = Some(target);
+        if let Some(root) = self.root.borrow().as_ref() {
+            root.send_message(ExportDropDownWrapperMsg::Open);
         }
     }
 
     pub fn hide(&self) -> ApiResult<()> {
-        let borrowed = self.modal.borrow();
-        borrowed.as_ref().into_apierror()?.hide()
+        if let Some(root) = self.root.borrow().as_ref() {
+            root.send_message(ExportDropDownWrapperMsg::Close);
+        }
+        Ok(())
     }
 
-    /// Internal Only.
-    ///
-    /// Set this custom element model's raw pointer.
     pub fn __set_model(&self, parent: &PerspectiveViewerElement) {
         self.set_config_model(parent)
     }
@@ -91,15 +161,19 @@ impl ExportDropDownMenuElement {
     {
         let callback = Callback::from({
             let model = model.clone_state();
-            let modal_rc = self.modal.clone();
+            let target = self.target.clone();
+            let root = self.root.clone();
             move |x: ExportFile| {
                 if !x.name.is_empty() {
-                    clone!(modal_rc, model);
+                    clone!(target, root, model);
                     spawn_local(async move {
                         let val = model.export_method_to_blob(x.method).await.unwrap();
                         let is_chart = model.renderer().is_chart();
                         download(&x.as_filename(is_chart), &val).unwrap();
-                        modal_rc.borrow().clone().unwrap().hide().unwrap();
+                        *target.borrow_mut() = None;
+                        if let Some(root) = root.borrow().as_ref() {
+                            root.send_message(ExportDropDownWrapperMsg::Close);
+                        }
                     })
                 }
             }
@@ -107,14 +181,22 @@ impl ExportDropDownMenuElement {
 
         let renderer = model.renderer().clone();
         let session = model.session().clone();
-        let props = props!(ExportDropDownMenuProps {
+        let init = ShadowRootInit::new(ShadowRootMode::Open);
+        let shadow_root = self
+            .elem
+            .attach_shadow(&init)
+            .unwrap()
+            .unchecked_into::<Element>();
+
+        let props = yew::props!(ExportDropDownWrapperProps {
             renderer,
             session,
             callback,
-            root: self.elem.clone()
+            target: self.target.clone(),
+            custom_element: self.elem.clone(),
         });
 
-        let modal = ModalElement::new(self.elem.clone(), props, true, None);
-        *self.modal.borrow_mut() = Some(modal);
+        let handle = yew::Renderer::with_root_and_props(shadow_root, props).render();
+        *self.root.borrow_mut() = Some(handle);
     }
 }

package/src/rust/custom_elements/mod.rs

@@ -13,15 +13,8 @@
 //! Each file in `custom_elements` exports a single struct which will be the
 //! public [`wasm_bindgen`] API to a JavaScript Custom Element.
 
-mod column_dropdown;
 pub mod copy_dropdown;
 pub mod debug_plugin;
 pub mod export_dropdown;
-mod filter_dropdown;
-mod function_dropdown;
 pub mod modal;
 pub mod viewer;
-
-pub use self::column_dropdown::*;
-pub use self::filter_dropdown::*;
-pub use self::function_dropdown::*;

package/src/rust/custom_elements/modal.rs

@@ -56,81 +56,6 @@ where
     on_blur: Option<Callback<()>>,
 }
 
-/// Anchor point enum, `ModalCornerTargetCorner`
-#[derive(Clone, Copy, Debug, Default)]
-enum ModalAnchor {
-    BottomRightTopLeft,
-    BottomRightBottomLeft,
-    BottomRightTopRight,
-    BottomLeftTopLeft,
-    TopRightTopLeft,
-    TopRightBottomRight,
-
-    #[default]
-    TopLeftBottomLeft,
-}
-
-impl ModalAnchor {
-    const fn is_rev_vert(&self) -> bool {
-        matches!(
-            self,
-            Self::BottomLeftTopLeft
-                | Self::BottomRightBottomLeft
-                | Self::BottomRightTopLeft
-                | Self::BottomRightTopRight
-        )
-    }
-}
-
-/// Given the bounds of the target element as previous computed, as well as the
-/// browser's viewport and the bounds of the already-connected
-/// `<perspectuve-style-menu>` element itself, determine a new (top, left)
-/// coordinates that keeps the element on-screen.
-fn calc_relative_position(
-    elem: &HtmlElement,
-    _top: f64,
-    left: f64,
-    height: f64,
-    width: f64,
-) -> 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 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;
-
-    // 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 {
-                ModalAnchor::BottomRightTopRight
-            } else {
-                ModalAnchor::BottomLeftTopLeft
-            }
-        },
-        (true, false, false, _) => ModalAnchor::BottomLeftTopLeft,
-        (false, true, true, _) => ModalAnchor::TopRightTopLeft,
-        (false, true, false, _) => {
-            if left + width - rect_width > 0.0 {
-                ModalAnchor::TopRightBottomRight
-            } else {
-                ModalAnchor::TopLeftBottomLeft
-            }
-        },
-        _ => ModalAnchor::TopLeftBottomLeft,
-    }
-}
-
 impl<T> ModalElement<T>
 where
     T: Component,
@@ -172,31 +97,10 @@ where
         }
     }
 
-    fn calc_anchor_position(&self, target: &HtmlElement) -> (f64, f64) {
-        let elem = target.unchecked_ref::<HtmlElement>();
-        let rect = elem.get_bounding_client_rect();
-        let height = rect.height();
-        let width = rect.width();
-        let top = rect.top();
-        let left = rect.left();
-
-        let self_rect = self.custom_element.get_bounding_client_rect();
-        let rect_height = self_rect.height();
-        let rect_width = self_rect.width();
-
-        match self.anchor.get() {
-            ModalAnchor::BottomRightTopLeft => (top - rect_height, left - rect_width + 1.0),
-            ModalAnchor::BottomRightBottomLeft => {
-                (top - rect_height + height, left - rect_width + 1.0)
-            },
-            ModalAnchor::BottomRightTopRight => {
-                (top - rect_height + 1.0, left + width - rect_width)
-            },
-            ModalAnchor::BottomLeftTopLeft => (top - rect_height + 1.0, left),
-            ModalAnchor::TopRightTopLeft => (top, left - rect_width + 1.0),
-            ModalAnchor::TopRightBottomRight => (top + height - 1.0, left + width - rect_width),
-            ModalAnchor::TopLeftBottomLeft => ((top + height - 1.0), left),
-        }
+    fn calc_anchor_pos(&self, target: &HtmlElement) -> (f64, f64) {
+        let target_rect = target.get_bounding_client_rect();
+        let modal_rect = self.custom_element.get_bounding_client_rect();
+        calc_anchor_position(self.anchor.get(), &target_rect, &modal_rect)
     }
 
     async fn open_within_viewport(&self, target: HtmlElement) -> ApiResult<()> {
@@ -229,7 +133,7 @@ where
             width,
         ));
 
-        let (top, left) = self.calc_anchor_position(&target);
+        let (top, left) = self.calc_anchor_pos(&target);
         let msg = ModalMsg::SetPos {
             top,
             left,
@@ -310,7 +214,7 @@ where
             let target = target.clone();
             let anchor = self.anchor.clone();
             *self.resize_sub.borrow_mut() = Some(resize.add_listener(move |()| {
-                let (top, left) = this.calc_anchor_position(&target);
+                let (top, left) = this.calc_anchor_pos(&target);
                 let msg = ModalMsg::SetPos {
                     top,
                     left,
@@ -382,7 +286,7 @@ where
 fn get_theme(elem: &HtmlElement) -> Option<String> {
     let styles = global::window().get_computed_style(elem).unwrap().unwrap();
     styles
-        .get_property_value("--theme-name")
+        .get_property_value("--psp-theme-name")
         .ok()
         .and_then(|x| {
             let trimmed = x.trim();