@perspective-dev/viewer 4.3.0 → 4.4.1

package/src/rust/custom_elements/viewer.rs

@@ -31,14 +31,34 @@ use crate::config::*;
 use crate::custom_events::*;
 use crate::dragdrop::*;
 use crate::js::*;
-use crate::model::*;
 use crate::presentation::*;
 use crate::renderer::*;
 use crate::root::Root;
-use crate::session::{ResetOptions, Session};
+use crate::session::{ResetOptions, Session, TableLoadState};
+use crate::tasks::*;
 use crate::utils::*;
 use crate::*;
 
+#[wasm_bindgen]
+extern "C" {
+    #[wasm_bindgen(typescript_type = "Promise<ViewerConfig>")]
+    pub type JsViewerConfigPromise;
+
+    #[wasm_bindgen(typescript_type = "ViewerConfigUpdate")]
+    pub type JsViewerConfigUpdate;
+}
+
+#[derive(serde::Deserialize, Default)]
+struct ResizeOptions {
+    dimensions: Option<ResizeDimensions>,
+}
+
+#[derive(serde::Deserialize, Clone, Copy)]
+struct ResizeDimensions {
+    width: f64,
+    height: f64,
+}
+
 /// The `<perspective-viewer>` custom element.
 ///
 /// # JavaScript Examples
@@ -63,7 +83,7 @@ use crate::*;
 /// await viewer.load(worker);
 /// await viewer.restore({table: "table_one"});
 /// ```
-#[derive(Clone, PerspectiveProperties!)]
+#[derive(Clone)]
 #[wasm_bindgen]
 pub struct PerspectiveViewerElement {
     elem: HtmlElement,
@@ -77,9 +97,41 @@ pub struct PerspectiveViewerElement {
     _subscriptions: Rc<[Subscription; 2]>,
 }
 
+impl HasCustomEvents for PerspectiveViewerElement {
+    fn custom_events(&self) -> &CustomEvents {
+        &self.custom_events
+    }
+}
+
+impl HasPresentation for PerspectiveViewerElement {
+    fn presentation(&self) -> &Presentation {
+        &self.presentation
+    }
+}
+
+impl HasRenderer for PerspectiveViewerElement {
+    fn renderer(&self) -> &Renderer {
+        &self.renderer
+    }
+}
+
+impl HasSession for PerspectiveViewerElement {
+    fn session(&self) -> &Session {
+        &self.session
+    }
+}
+
+impl StateProvider for PerspectiveViewerElement {
+    type State = PerspectiveViewerElement;
+
+    fn clone_state(&self) -> Self::State {
+        self.clone()
+    }
+}
+
 impl CustomElementMetadata for PerspectiveViewerElement {
     const CUSTOM_ELEMENT_NAME: &'static str = "perspective-viewer";
-    const STATICS: &'static [&'static str] = ["registerPlugin", "getExprTKCommands"].as_slice();
+    const STATICS: &'static [&'static str] = ["registerPlugin"].as_slice();
 }
 
 #[wasm_bindgen]
@@ -109,7 +161,7 @@ impl PerspectiveViewerElement {
             session: session.clone(),
             renderer: renderer.clone(),
             presentation: presentation.clone(),
-            dragdrop: DragDrop::default(),
+            dragdrop: DragDrop::new(&elem),
             custom_events: custom_events.clone(),
         });
 
@@ -136,7 +188,9 @@ impl PerspectiveViewerElement {
             move |_| ApiFuture::spawn(state.delete_all(&root))
         });
 
-        let resize_handle = ResizeObserverHandle::new(&elem, &renderer, &session, &root);
+        let resize_handle =
+            ResizeObserverHandle::new(&elem, &renderer, &session, &presentation, &root);
+
         let intersect_handle =
             IntersectionObserverHandle::new(&elem, &presentation, &session, &renderer);
 
@@ -241,28 +295,18 @@ impl PerspectiveViewerElement {
             .unwrap_or_else(|_| js_sys::Promise::resolve(&table));
 
         let _plugin = self.renderer.get_active_plugin()?;
-        let task = self.session.reset(ResetOptions {
+        let reset_task = self.session.reset(ResetOptions {
             config: true,
             expressions: true,
             stats: true,
-            ..ResetOptions::default()
+            table: Some(session::TableIntermediateState::Reloaded),
         });
 
-        let mut config = ViewConfigUpdate {
-            columns: Some(self.session.get_view_config().columns.clone()),
-            ..ViewConfigUpdate::default()
-        };
-
-        let metadata = self.renderer.metadata();
-        self.session
-            .set_update_column_defaults(&mut config, &metadata);
-        self.session.update_view_config(config)?;
-
         clone!(self.renderer, self.session);
         Ok(ApiFuture::new_throttled(async move {
             let task = async {
                 // Ignore this error, which is blown away by the table anyway.
-                let _ = task.await;
+                let _ = reset_task.await;
                 let jstable = JsFuture::from(promise)
                     .await
                     .map_err(|x| apierror!(TableError(x)))?;
@@ -326,7 +370,7 @@ impl PerspectiveViewerElement {
     /// await viewer.delete();
     /// ```
     pub fn delete(self) -> ApiFuture<()> {
-        self.delete_all(self.root())
+        self.delete_all(&self.root)
     }
 
     /// Restart this `<perspective-viewer>` to its initial state, before
@@ -336,7 +380,7 @@ impl PerspectiveViewerElement {
     /// again, or alternatively `Self::delete` if this viewer is no longer
     /// needed.
     pub fn eject(&mut self) -> ApiFuture<()> {
-        if self.session.has_table() {
+        if matches!(self.session.has_table(), Some(TableLoadState::Loaded)) {
             let mut state = Self::new_from_shadow(
                 self.elem.clone(),
                 self.elem.shadow_root().unwrap().unchecked_into(),
@@ -528,7 +572,7 @@ impl PerspectiveViewerElement {
     /// ```javascript
     /// await viewer.restore({group_by: ["State"]});
     /// ```
-    pub fn restore(&self, update: JsValue) -> ApiFuture<()> {
+    pub fn restore(&self, update: JsViewerConfigUpdate) -> ApiFuture<()> {
         let this = self.clone();
         ApiFuture::new_throttled(async move {
             let decoded_update = ViewerConfigUpdate::decode(&update)?;
@@ -540,11 +584,26 @@ impl PerspectiveViewerElement {
                 PerspectiveViewerMsg::ToggleSettingsComplete(settings, sender),
             );
 
+            let task = if let OptionalUpdate::Update(_) = &decoded_update.table {
+                Some(this.session.reset(ResetOptions {
+                    config: true,
+                    expressions: true,
+                    stats: true,
+                    ..ResetOptions::default()
+                }))
+            } else {
+                None
+            };
+
             let result = this
                 .restore_and_render(decoded_update.clone(), {
                     clone!(this, decoded_update.table);
                     async move {
                         if let OptionalUpdate::Update(name) = table {
+                            if let Some(task) = task {
+                                task.await?;
+                            }
+
                             this.session.set_table(name).await?;
                             this.session
                                 .update_column_defaults(&this.renderer.metadata());
@@ -596,9 +655,9 @@ impl PerspectiveViewerElement {
     ///     await viewer.restore(token);
     /// });
     /// ```
-    pub fn save(&self) -> ApiFuture<JsValue> {
+    pub fn save(&self) -> JsViewerConfigPromise {
         let this = self.clone();
-        ApiFuture::new(async move {
+        let fut = ApiFuture::new(async move {
             let viewer_config = this
                 .renderer
                 .clone()
@@ -606,7 +665,9 @@ impl PerspectiveViewerElement {
                 .await?;
 
             viewer_config.encode()
-        })
+        });
+
+        js_sys::Promise::from(fut).unchecked_into()
     }
 
     /// Download this viewer's internal [`View`] data via a browser download
@@ -746,24 +807,25 @@ impl PerspectiveViewerElement {
     ///
     /// # Arguments
     ///
-    /// - `force` - If [`Self::resize`] is called with `false` or without an
-    ///   argument, and _auto-size_ mode is enabled via [`Self::setAutoSize`],
-    ///   [`Self::resize`] will log a warning and auto-disable auto-size mode.
+    /// - `options` - An optional object with the following fields:
+    ///   - `dimensions` - An optional object `{width, height}` providing
+    ///     explicit size hints (in pixels) for the plugin container. When
+    ///     provided, the plugin element will be temporarily sized to these
+    ///     dimensions during resize, then reset.
     ///
     /// # JavaScript Examples
     ///
     /// ```javascript
-    /// await viewer.resize(true)
+    /// await viewer.resize()
+    /// await viewer.resize({dimensions: {width: 800, height: 600}})
     /// ```
     #[wasm_bindgen]
-    pub fn resize(&self, force: Option<bool>) -> ApiFuture<()> {
-        if !force.unwrap_or_default() && self.resize_handle.borrow().is_some() {
-            let msg: JsValue = "`resize(false)` called, disabling auto-size.  It can be \
-                                re-enabled with `setAutoSize(true)`."
-                .into();
-            web_sys::console::warn_1(&msg);
-            *self.resize_handle.borrow_mut() = None;
-        }
+    pub fn resize(&self, options: Option<JsValue>) -> ApiFuture<()> {
+        let opts: ResizeOptions = options
+            .map(|v| v.into_serde_ext())
+            .transpose()
+            .unwrap_or_default()
+            .unwrap_or_default();
 
         let state = self.clone_state();
         ApiFuture::new_throttled(async move {
@@ -771,6 +833,11 @@ impl PerspectiveViewerElement {
                 state
                     .update_and_render(ViewConfigUpdate::default())?
                     .await?;
+            } else if let Some(dims) = opts.dimensions {
+                state
+                    .renderer()
+                    .resize_with_dimensions(dims.width, dims.height)
+                    .await?;
             } else {
                 state.renderer().resize().await?;
             }
@@ -806,6 +873,7 @@ impl PerspectiveViewerElement {
                 &self.elem,
                 &self.renderer,
                 &self.session,
+                &self.presentation,
                 &self.root,
             ));
             *self.resize_handle.borrow_mut() = handle;
@@ -833,7 +901,7 @@ impl PerspectiveViewerElement {
     /// viewer.setAutoPause(false);
     /// ```
     #[wasm_bindgen]
-    pub fn setAutoPause(&self, autopause: bool) {
+    pub fn setAutoPause(&self, autopause: bool) -> ApiFuture<()> {
         if autopause {
             let handle = Some(IntersectionObserverHandle::new(
                 &self.elem,
@@ -845,7 +913,14 @@ impl PerspectiveViewerElement {
             *self.intersection_handle.borrow_mut() = handle;
         } else {
             *self.intersection_handle.borrow_mut() = None;
+            if self.session.set_pause(false) {
+                return ApiFuture::new(
+                    self.restore_and_render(ViewerConfigUpdate::default(), async move { Ok(()) }),
+                );
+            }
         }
+
+        ApiFuture::new(async move { Ok(()) })
     }
 
     /// Return a [`perspective_js::JsViewWindow`] for the currently selected
@@ -890,7 +965,7 @@ impl PerspectiveViewerElement {
     /// # JavaScript Examples
     ///
     /// ```javascript
-    /// viewer.style = "--icon--color: red";
+    /// viewer.style = "--psp--color: red";
     /// await viewer.restyleElement();
     /// ```
     #[wasm_bindgen]

package/src/rust/custom_events.rs

@@ -22,10 +22,10 @@ use yew::html::ImplicitClone;
 
 use crate::config::*;
 use crate::js::JsPerspectiveViewerPlugin;
-use crate::model::*;
 use crate::presentation::Presentation;
 use crate::renderer::*;
 use crate::session::Session;
+use crate::tasks::*;
 use crate::utils::*;
 use crate::*;
 
@@ -55,7 +55,6 @@ impl Deref for CustomEventsDataRc {
     }
 }
 
-#[derive(PerspectiveProperties!)]
 struct CustomEventsData {
     elem: HtmlElement,
     session: Session,
@@ -64,6 +63,24 @@ struct CustomEventsData {
     last_dispatched: RefCell<Option<ViewerConfig>>,
 }
 
+impl HasPresentation for CustomEventsData {
+    fn presentation(&self) -> &Presentation {
+        &self.presentation
+    }
+}
+
+impl HasRenderer for CustomEventsData {
+    fn renderer(&self) -> &Renderer {
+        &self.renderer
+    }
+}
+
+impl HasSession for CustomEventsData {
+    fn session(&self) -> &Session {
+        &self.session
+    }
+}
+
 impl CustomEvents {
     pub fn new(
         elem: &HtmlElement,
@@ -171,6 +188,10 @@ impl CustomEvents {
     {
         self.0.0.dispatch_event(name, event)
     }
+
+    pub fn dispatch_raw_event(&self, event: &web_sys::CustomEvent) -> ApiResult<bool> {
+        self.0.0.elem.dispatch_event(event).map_err(|e| e.into())
+    }
 }
 
 impl CustomEventsDataRc {

package/src/rust/dragdrop.rs

@@ -10,7 +10,7 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-use std::cell::RefCell;
+use std::cell::{Cell, RefCell};
 use std::ops::Deref;
 use std::rc::Rc;
 
@@ -20,9 +20,18 @@ use web_sys::*;
 use yew::html::ImplicitClone;
 use yew::prelude::*;
 
+use crate::js::{IntersectionObserver, IntersectionObserverEntry};
 use crate::utils::*;
 use crate::*;
 
+/// Value-semantic snapshot of the drag/drop state threaded through the
+/// component tree for visual feedback (drag-highlight CSS classes).
+#[derive(Clone, Debug, PartialEq, Default)]
+pub struct DragDropProps {
+    /// Column name currently being dragged, if a drag is in progress.
+    pub column: Option<String>,
+}
+
 #[derive(Clone, Debug)]
 struct DragFrom {
     column: String,
@@ -49,20 +58,52 @@ impl DragState {
     }
 }
 
-#[derive(Default)]
+pub type DragEndCallback = Closure<dyn FnMut(DragEvent)>;
+
 pub struct DragDropState {
     drag_state: RefCell<DragState>,
     pub drop_received: PubSub<(String, DragTarget, DragEffect, usize)>,
-    pub dragstart_received: PubSub<DragEffect>,
-    pub dragend_received: PubSub<()>,
+
+    /// Injected callback from the root component, replacing the former
+    /// `dragstart_received: PubSub` field.
+    pub on_dragstart: RefCell<Option<Callback<DragEffect>>>,
+
+    /// Injected callback from the root component, replacing the former
+    /// `dragend_received: PubSub` field.
+    pub on_dragend: RefCell<Option<Callback<()>>>,
+
+    /// The host `<perspective-viewer>` element, used to attach the fallback
+    /// `dragend` listener on a stable DOM node outside the virtual DOM.
+    elem: HtmlElement,
+
+    /// Host-level `dragend` listener closure, stored so it can be removed
+    /// when a new drag starts.  Attached to `elem` rather than `document`
+    /// to keep the listener scoped to this component instance.
+    host_dragend: RefCell<Option<DragEndCallback>>,
+
+    drag_target: RefCell<Option<DragTargetState>>,
 }
 
 /// The `<perspective-viewer>` drag/drop service, which manages drag/drop user
 /// interactions across components.  It is a component-level service, since only
 /// one drag/drop action can be executed by the user at a time.
-#[derive(Clone, Default)]
+#[derive(Clone)]
 pub struct DragDrop(Rc<DragDropState>);
 
+impl DragDrop {
+    pub fn new(elem: &HtmlElement) -> Self {
+        Self(Rc::new(DragDropState {
+            drag_state: Default::default(),
+            drop_received: Default::default(),
+            on_dragstart: Default::default(),
+            on_dragend: Default::default(),
+            elem: elem.clone(),
+            host_dragend: Default::default(),
+            drag_target: Default::default(),
+        }))
+    }
+}
+
 impl Deref for DragDrop {
     type Target = Rc<DragDropState>;
 
@@ -80,6 +121,14 @@ impl PartialEq for DragDrop {
 impl ImplicitClone for DragDrop {}
 
 impl DragDrop {
+    /// Snapshot the drag state as a [`DragDropProps`] value for threading
+    /// through the component tree without PubSub subscriptions.
+    pub fn to_props(&self) -> DragDropProps {
+        DragDropProps {
+            column: self.get_drag_column(),
+        }
+    }
+
     /// Get the column name currently being drag/dropped.
     pub fn get_drag_column(&self) -> Option<String> {
         match *self.drag_state.borrow() {
@@ -110,7 +159,7 @@ impl DragDrop {
         event.stop_propagation();
         if let Some(dt) = event.data_transfer() {
             dt.set_drop_effect("move");
-            dt.set_data("text/plain", "{}").unwrap();
+            // dt.set_data("text/plain", "{}").unwrap();
         }
 
         let original: HtmlElement = event.target().into_apierror()?.unchecked_into();
@@ -129,6 +178,10 @@ impl DragDrop {
             event.offset_y(),
         );
 
+        *self.drag_target.borrow_mut() =
+            Some(DragTargetState::new(self.elem.clone(), original.clone()));
+
+        // Drag image does not register correctly unless we wait.
         ApiFuture::spawn(async move {
             request_animation_frame().await;
             original.remove_child(&elem)?;
@@ -152,6 +205,7 @@ impl DragDrop {
     pub fn notify_drop(&self, event: &DragEvent) {
         event.prevent_default();
         event.stop_propagation();
+
         let action = match &*self.drag_state.borrow() {
             DragState::DragOverInProgress(
                 DragFrom { column, effect },
@@ -160,6 +214,7 @@ impl DragDrop {
             _ => None,
         };
 
+        self.drag_target.borrow_mut().take();
         *self.drag_state.borrow_mut() = DragState::NoDrag;
         if let Some(action) = action {
             self.drop_received.emit(action);
@@ -169,10 +224,14 @@ impl DragDrop {
     /// Start the drag/drop action with the name of the column being dragged.
     pub fn notify_drag_start(&self, column: String, effect: DragEffect) {
         *self.drag_state.borrow_mut() = DragState::DragInProgress(DragFrom { column, effect });
-        let emit = self.dragstart_received.callback();
+        self.register_host_dragend();
+        let emit = self.on_dragstart.borrow().clone();
         ApiFuture::spawn(async move {
             request_animation_frame().await;
-            emit.emit(effect);
+            if let Some(cb) = emit {
+                cb.emit(effect);
+            }
+
             Ok(())
         });
     }
@@ -180,12 +239,38 @@ impl DragDrop {
     /// End the drag/drop action by resetting the state to default.
     pub fn notify_drag_end(&self) {
         if self.drag_state.borrow().is_drag_in_progress() {
+            self.drag_target.borrow_mut().take();
             *self.drag_state.borrow_mut() = DragState::NoDrag;
-            let emit = self.dragend_received.callback();
-            emit.emit(());
+            if let Some(cb) = self.on_dragend.borrow().as_ref() {
+                cb.emit(());
+            }
         }
     }
 
+    /// Register a `dragend` listener on the host `<perspective-viewer>`
+    /// element so that drag-end cleanup fires even when Yew re-renders
+    /// remove the original dragged element from the shadow DOM.  The host
+    /// element is outside the virtual DOM and therefore stable.
+    fn register_host_dragend(&self) {
+        // Remove any previously registered listener.
+        if let Some(prev) = self.host_dragend.borrow_mut().take() {
+            let _ = self
+                .elem
+                .remove_event_listener_with_callback("dragend", prev.as_ref().unchecked_ref());
+        }
+
+        let this = self.clone();
+        let closure = Closure::wrap(Box::new(move |_event: DragEvent| {
+            this.notify_drag_end();
+        }) as Box<dyn FnMut(DragEvent)>);
+
+        self.elem
+            .add_event_listener_with_callback("dragend", closure.as_ref().unchecked_ref())
+            .unwrap();
+
+        *self.host_dragend.borrow_mut() = Some(closure);
+    }
+
     /// Leave the `action` zone.
     pub fn notify_drag_leave(&self, drag_target: DragTarget) {
         let reset = match *self.drag_state.borrow() {
@@ -340,3 +425,57 @@ impl DragDropContainer {
         }
     }
 }
+
+/// A really, really unfortunate hack that is needed to guarantee that `dragend`
+/// is called even under aggressive DOM mutation after `dragstart` is fired.
+struct DragTargetState {
+    target: HtmlElement,
+    shadow_root: ShadowRoot,
+    alive: Rc<Cell<bool>>,
+    observer: IntersectionObserver,
+}
+
+impl DragTargetState {
+    fn new(host: HtmlElement, target: HtmlElement) -> Self {
+        let shadow_root = host.shadow_root().unwrap();
+        let alive = Rc::new(Cell::new(true));
+        let observer = IntersectionObserver::new(
+            &Closure::<dyn FnMut(js_sys::Array)>::new({
+                clone!(target, shadow_root, alive);
+                move |records: js_sys::Array| {
+                    if !alive.get() {
+                        return;
+                    }
+
+                    for record in records.iter() {
+                        let record: IntersectionObserverEntry = record.unchecked_into();
+                        if !record.is_intersecting() {
+                            shadow_root.append_child(&target).unwrap();
+                            return;
+                        }
+                    }
+                }
+            })
+            .into_js_value()
+            .unchecked_into(),
+        );
+
+        observer.observe(target.as_ref());
+        Self {
+            target,
+            shadow_root,
+            alive,
+            observer,
+        }
+    }
+}
+
+impl Drop for DragTargetState {
+    fn drop(&mut self) {
+        self.alive.set(false);
+        self.observer.unobserve(&self.target);
+        if self.target.is_connected() {
+            let _ = self.shadow_root.remove_child(&self.target);
+        }
+    }
+}

package/src/{less/containers/scroll-panel.less → rust/engines.rs}

@@ -10,17 +10,19 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-:host {
-    .scroll-panel-container {
-        width: 100%;
-    }
+//! Engine-handle types for the four major state singletons.
+//!
+//! These are the async-machinery halves of the engine/value split described in
+//! the props modules.  They own JS object handles, draw locks, async
+//! subscriptions, and PubSub channels — i.e. anything that cannot be cheaply
+//! cloned into a plain `PartialEq` prop.
+//!
+//! **Current status (Step 3 of the migration):** Each `*Engine` type is a thin
+//! type alias for the existing `Rc<*Handle>` wrapper.  They will be replaced
+//! with true struct types in later migration steps once the component tree has
+//! been updated to consume value-semantic props instead of the old handles.
 
-    .scroll-panel-auto-width {
-        height: 1px;
-        margin-top: -1px;
-    }
-
-    .scroll-panel-content {
-        position: relative;
-    }
-}
+pub use crate::dragdrop::DragDrop as DragDropEngine;
+pub use crate::presentation::Presentation as PresentationEngine;
+pub use crate::renderer::Renderer as RendererEngine;
+pub use crate::session::Session as SessionEngine;

package/src/rust/js/plugin.rs

@@ -141,7 +141,7 @@ impl ColumnSelectMode {
     }
 }
 
-#[derive(Clone, Debug, Default)]
+#[derive(Clone, Debug, Default, PartialEq)]
 pub struct ViewConfigRequirements {
     pub min: Option<usize>,
     pub names: Option<Vec<String>>,