@perspective-dev/viewer 4.4.0 → 4.5.0

package/src/rust/lib.rs

@@ -33,15 +33,16 @@ pub mod components;
 pub mod config;
 pub mod custom_elements;
 mod custom_events;
-mod dragdrop;
 pub mod exprtk;
 mod js;
+mod presentation;
 mod root;
 
-pub mod engines;
-mod presentation;
+#[doc(hidden)]
+pub mod queries;
 mod renderer;
 mod session;
+
 #[doc(hidden)]
 pub mod tasks;
 pub mod utils;
@@ -50,6 +51,8 @@ pub mod utils;
 extern crate macro_rules_attribute;
 extern crate alloc;
 
+use std::cell::RefCell;
+
 use perspective_js::utils::*;
 use wasm_bindgen::prelude::*;
 
@@ -63,9 +66,10 @@ use crate::utils::define_web_component;
 const TS_APPEND_CONTENT: &'static str = r#"
 import type {
     ColumnType,
-    TableInitOptions, 
+    TableInitOptions,
     ColumnWindow,
     ViewWindow, 
+    TypedArrayWindow,
     OnUpdateOptions,
     JoinOptions,
     UpdateOptions,
@@ -73,6 +77,12 @@ import type {
     ViewConfigUpdate,
     SystemInfo,
 } from "@perspective-dev/client";
+
+export type * from "../../src/ts/ts-rs/ViewerConfig.d.ts";
+export type * from "../../src/ts/ts-rs/ViewerConfigUpdate.d.ts";
+export type * from "../../src/ts/ts-rs/PluginStaticConfig.d.ts";
+import type {ViewerConfig} from "../../src/ts/ts-rs/ViewerConfig.d.ts";
+import type {ViewerConfigUpdate} from "../../src/ts/ts-rs/ViewerConfigUpdate.d.ts";
 "#;
 
 /// Register a plugin globally.
@@ -91,13 +101,37 @@ pub fn registerPlugin(name: &str) {
 /// preserve backwards-compatible synchronous API).
 #[cfg(not(feature = "external-bootstrap"))]
 #[wasm_bindgen(js_name = "init")]
-pub fn js_init() {
+pub fn js_init(module: js_sys::WebAssembly::Module, url: web_sys::Url) {
     console_error_panic_hook::set_once();
     perspective_js::utils::set_global_logging();
     define_web_components!("export * as psp from '../../perspective-viewer.js'");
+    MODULE.with_borrow_mut(|f| {
+        *f = Some((module, url));
+    });
+
     tracing::info!("Perspective initialized.");
 }
 
+thread_local! {
+    static MODULE: RefCell<Option<(js_sys::WebAssembly::Module, web_sys::Url)>> = RefCell::default();
+}
+
+#[cfg(not(feature = "external-bootstrap"))]
+#[wasm_bindgen(js_name = "get_wasm_module")]
+pub fn js_get_module() -> Result<js_sys::WebAssembly::Module, JsValue> {
+    MODULE
+        .with_borrow(|f| f.clone().map(|x| x.0))
+        .ok_or_else(|| "Uninited module".into())
+}
+
+#[cfg(not(feature = "external-bootstrap"))]
+#[wasm_bindgen(js_name = "get_worker_url")]
+pub fn js_get_worker_url() -> Result<web_sys::Url, JsValue> {
+    MODULE
+        .with_borrow(|f| f.clone().map(|x| x.1))
+        .ok_or_else(|| "Uninited module".into())
+}
+
 /// Register Web Components with the global registry, given a Perspective
 /// module.
 ///

package/src/rust/presentation/drag_helpers.rs

@@ -0,0 +1,206 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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_client::clone;
+use perspective_js::utils::*;
+use wasm_bindgen::prelude::*;
+use web_sys::*;
+use yew::prelude::*;
+
+use crate::js::{IntersectionObserver, IntersectionObserverEntry};
+
+pub type DragEndCallback = Closure<dyn FnMut(DragEvent)>;
+
+/// Safari does not set `relatedTarget` on `"dragleave"`, which makes it
+/// impossible to determine whether a logical drag leave has happened with just
+/// this event, so use function on `"dragenter"` to capture the `relatedTarget`.
+pub fn dragenter_helper(callback: impl Fn() + 'static, target: NodeRef) -> Callback<DragEvent> {
+    Callback::from({
+        move |event: DragEvent| {
+            let r = (|| -> ApiResult<()> {
+                event.stop_propagation();
+                event.prevent_default();
+                if event.related_target().is_none() {
+                    target
+                        .cast::<HtmlElement>()
+                        .into_apierror()?
+                        .dataset()
+                        .set("safaridragleave", "true")?;
+                }
+                Ok(())
+            })();
+
+            if let Err(e) = r {
+                web_sys::console::warn_1(&e.into());
+            }
+
+            callback();
+        }
+    })
+}
+
+/// HTML drag/drop will fire a bubbling `dragleave` event over all children of a
+/// `dragleave`-listened-to element, so we need to filter out the events from
+/// the children elements with this esoteric DOM arcana.
+pub fn dragleave_helper(callback: impl Fn() + 'static, drag_ref: NodeRef) -> Callback<DragEvent> {
+    Callback::from({
+        clone!(drag_ref);
+        move |event: DragEvent| {
+            let r = (|| -> ApiResult<()> {
+                event.stop_propagation();
+                event.prevent_default();
+
+                let mut related_target = event
+                    .related_target()
+                    .or_else(|| Some(JsValue::UNDEFINED.unchecked_into::<EventTarget>()))
+                    .and_then(|x| x.dyn_into::<Element>().ok());
+
+                // This is a wild chrome bug. `dragleave` can fire with the `relatedTarget`
+                // property set to an element inside the closed `ShadowRoot` hosted by a
+                // browser-native `<select>` tag, which fails the `.contains()` check
+                // below.  This mystery `ShadowRoot` has a structure that looks like this
+                // (tested in Chrome 92), which we try to detect as best we can below.
+                //
+                // ```html
+                // <div aria-hidden="true">Selected Text Here</siv>
+                // <slot name="user-agent-custom-assign-slot"></slot>
+                // ```
+                //
+                // This is pretty course though, since there is no guarantee this structure
+                // will be maintained in future Chrome versions; the `.expect()` in this
+                // method chain should at least warn us if this regresses.
+                //
+                // Wait - you don't believe me?  Throw a debugger statement inside this
+                // conditional and drag a column over a pivot-mode active columns list.
+                if related_target
+                    .as_ref()
+                    .map(|x| x.has_attribute("aria-hidden"))
+                    .unwrap_or_default()
+                {
+                    related_target = Some(
+                        related_target
+                            .into_apierror()?
+                            .parent_node()
+                            .into_apierror()?
+                            .dyn_ref::<ShadowRoot>()
+                            .ok_or_else(|| JsValue::from("Chrome drag/drop bug detection failed"))?
+                            .host()
+                            .unchecked_into::<Element>(),
+                    )
+                }
+
+                let current_target = drag_ref.cast::<HtmlElement>().unwrap();
+                match related_target {
+                    Some(ref related) => {
+                        // Due to virtual dom these events sometimes fire after
+                        // the node is removed ...
+                        if !current_target.contains(Some(related))
+                            && related.parent_element().is_some()
+                        {
+                            callback();
+                        }
+                    },
+                    None => {
+                        // Safari (OSX and iOS) don't set `relatedTarget`, so we need to
+                        // read a memoized value from the `"dragenter"` event.
+                        let dataset = current_target.dataset();
+                        if dataset.get("safaridragleave").is_some() {
+                            dataset.delete("safaridragleave");
+                        } else {
+                            callback();
+                        }
+                    },
+                };
+                Ok(())
+            })();
+
+            if let Err(e) = r {
+                web_sys::console::warn_1(&e.into());
+            }
+        }
+    })
+}
+
+#[derive(Clone)]
+pub struct DragDropContainer {
+    pub noderef: NodeRef,
+    pub dragenter: Callback<DragEvent>,
+    pub dragleave: Callback<DragEvent>,
+}
+
+impl DragDropContainer {
+    pub fn new<F: Fn() + 'static, G: Fn() + 'static>(ondragenter: F, ondragleave: G) -> Self {
+        let noderef = NodeRef::default();
+        Self {
+            dragenter: dragenter_helper(ondragenter, noderef.clone()),
+            dragleave: dragleave_helper(ondragleave, noderef.clone()),
+            noderef,
+        }
+    }
+}
+
+/// A really, really unfortunate hack that is needed to guarantee that `dragend`
+/// is called even under aggressive DOM mutation after `dragstart` is fired.
+pub(super) struct DragTargetState {
+    target: HtmlElement,
+    shadow_root: ShadowRoot,
+    alive: Rc<Cell<bool>>,
+    observer: IntersectionObserver,
+}
+
+impl DragTargetState {
+    pub(super) 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/rust/presentation/props.rs

@@ -13,6 +13,14 @@
 use crate::presentation::OpenColumnSettings;
 use crate::utils::PtrEqRc;
 
+/// 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>,
+}
+
 /// Value-semantic snapshot of the presentation/UI state used by the root
 /// component to drive `is_settings_open`, `selected_theme`, and
 /// `available_themes` into child components via plain props.

package/src/rust/presentation.rs

@@ -11,27 +11,28 @@
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
 mod column_locator;
+pub mod drag_helpers;
 mod props;
 mod sheets;
 
 use std::cell::RefCell;
-use std::collections::{HashMap, HashSet};
+use std::collections::HashSet;
 use std::ops::Deref;
 use std::rc::Rc;
 
 use async_lock::Mutex;
-use perspective_js::utils::{ApiFuture, ApiResult};
+use perspective_js::utils::*;
+use wasm_bindgen::prelude::*;
 use web_sys::*;
 use yew::html::ImplicitClone;
 use yew::prelude::*;
 
 pub use self::column_locator::{ColumnLocator, ColumnSettingsTab, ColumnTab, OpenColumnSettings};
-pub use self::props::PresentationProps;
-use crate::config::{ColumnConfigUpdate, ColumnConfigValueUpdate, ColumnConfigValues};
+use self::drag_helpers::DragTargetState;
+pub use self::drag_helpers::{DragDropContainer, DragEndCallback};
+pub use self::props::{DragDropProps, PresentationProps};
 use crate::utils::*;
 
-pub type ColumnConfigMap = HashMap<String, ColumnConfigValues>;
-
 /// The available themes as detected in the browser environment or set
 /// explicitly when CORS prevents detection.  Detection is expensive and
 /// typically must be performed only once, when `document.styleSheets` is
@@ -41,14 +42,71 @@ struct ThemeData {
     themes: Option<Vec<String>>,
 }
 
+#[derive(Clone, Debug)]
+struct DragFrom {
+    column: String,
+    effect: DragEffect,
+}
+
+#[derive(Debug)]
+struct DragOver {
+    target: DragTarget,
+    index: usize,
+}
+
+#[derive(Debug, Default)]
+enum DragState {
+    #[default]
+    NoDrag,
+    DragInProgress(DragFrom),
+    DragOverInProgress(DragFrom, DragOver),
+}
+
+impl DragState {
+    const fn is_drag_in_progress(&self) -> bool {
+        !matches!(self, Self::NoDrag)
+    }
+}
+
 /// Actual presentations tate struct with some fields hidden.
 pub struct PresentationHandle {
     viewer_elem: HtmlElement,
     theme_data: Mutex<ThemeData>,
     is_settings_open: RefCell<bool>,
     open_column_settings: RefCell<OpenColumnSettings>,
-    columns_config: RefCell<ColumnConfigMap>,
     is_workspace: RefCell<Option<bool>>,
+
+    /// Drag/drop in-progress state. Empty (`NoDrag`) when no user drag is
+    /// active. Mutated by `notify_drag_*` / `notify_drop`; read by component
+    /// CSS-class derivations (`is_dragover`, `get_drag_column`).
+    drag_state: RefCell<DragState>,
+    pub drop_received: PubSub<(String, DragTarget, DragEffect, usize)>,
+
+    /// Injected callback from the root component fired after a drag begins
+    /// (one frame later, to let the drag image latch). Replaces the former
+    /// `dragstart_received: PubSub` field on `DragDrop`.
+    pub on_dragstart: RefCell<Option<Callback<DragEffect>>>,
+
+    /// Injected callback from the root component fired when the drag ends,
+    /// regardless of drop outcome.
+    pub on_dragend: RefCell<Option<Callback<()>>>,
+
+    /// Host-level `dragend` listener closure, attached to `viewer_elem` to
+    /// guarantee `dragend` fires even when virtual DOM updates remove the
+    /// dragged element from the shadow tree.
+    host_dragend: RefCell<Option<DragEndCallback>>,
+
+    /// IntersectionObserver-based fallback for the drag image, kept alive for
+    /// the duration of the drag.
+    drag_target: RefCell<Option<DragTargetState>>,
+
+    /// Per-element dedup cell for `perspective-config-update` event
+    /// dispatch. Read+written by `crate::custom_events::dispatch_*`
+    /// helpers; living here means every consumer with a `&Presentation`
+    /// (subscriptions in `wire_custom_events`, `tasks::send_plugin_config`,
+    /// `setSelection`) sees the same cache without separate plumbing.
+    pub last_dispatched_config: RefCell<Option<crate::config::ViewerConfig>>,
+
     pub settings_open_changed: PubSub<bool>,
 
     /// Injected callback from the root component, replacing the former
@@ -58,6 +116,11 @@ pub struct PresentationHandle {
     pub column_settings_open_changed: PubSub<(bool, Option<String>)>,
     pub theme_config_updated: PubSub<(PtrEqRc<Vec<String>>, Option<usize>)>,
     pub on_eject: PubSub<()>,
+
+    /// Fires for status-bar / main-panel pointer events that target the
+    /// statusbar element. `wire_custom_events` formats the `PointerEvent`'s
+    /// `type_()` into a `perspective-statusbar-{type}` `CustomEvent` name.
+    pub statusbar_pointer_event: PubSub<PointerEvent>,
 }
 
 /// State object responsible for the non-persistable/gui element state,
@@ -91,17 +154,28 @@ impl Presentation {
             settings_before_open_changed: Default::default(),
             column_settings_open_changed: Default::default(),
             on_is_workspace_changed: Default::default(),
-            columns_config: Default::default(),
             is_settings_open: Default::default(),
             open_column_settings: Default::default(),
             theme_config_updated: PubSub::default(),
             on_eject: PubSub::default(),
+            statusbar_pointer_event: PubSub::default(),
+            last_dispatched_config: Default::default(),
+            drag_state: Default::default(),
+            drop_received: Default::default(),
+            on_dragstart: Default::default(),
+            on_dragend: Default::default(),
+            host_dragend: Default::default(),
+            drag_target: Default::default(),
         }));
 
         ApiFuture::spawn(theme.clone().init());
         theme
     }
 
+    pub fn viewer_elem(&self) -> &HtmlElement {
+        &self.viewer_elem
+    }
+
     pub fn is_visible(&self) -> bool {
         self.viewer_elem
             .offset_parent()
@@ -276,51 +350,192 @@ impl Presentation {
         Ok(true)
     }
 
-    /// Returns an owned copy of the curent column configuration map.
-    pub fn all_columns_configs(&self) -> ColumnConfigMap {
-        self.columns_config.borrow().clone()
+    /// Snapshot the drag state as a [`DragDropProps`] value for threading
+    /// through the component tree without PubSub subscriptions.
+    pub fn drag_drop_props(&self) -> DragDropProps {
+        DragDropProps {
+            column: self.get_drag_column(),
+        }
     }
 
-    pub fn reset_columns_configs(&self) {
-        *self.columns_config.borrow_mut() = ColumnConfigMap::new();
+    /// Get the column name currently being drag/dropped.
+    pub fn get_drag_column(&self) -> Option<String> {
+        match *self.drag_state.borrow() {
+            DragState::DragInProgress(DragFrom { ref column, .. })
+            | DragState::DragOverInProgress(DragFrom { ref column, .. }, _) => Some(column.clone()),
+            _ => None,
+        }
     }
 
-    /// Gets a clone of the ColumnConfig for the given column name.
-    pub fn get_columns_config(&self, column_name: &str) -> Option<ColumnConfigValues> {
-        self.columns_config.borrow().get(column_name).cloned()
+    pub fn get_drag_target(&self) -> Option<DragTarget> {
+        match *self.drag_state.borrow() {
+            DragState::DragInProgress(DragFrom {
+                effect: DragEffect::Move(target),
+                ..
+            })
+            | DragState::DragOverInProgress(
+                DragFrom {
+                    effect: DragEffect::Move(target),
+                    ..
+                },
+                _,
+            ) => Some(target),
+            _ => None,
+        }
     }
 
-    /// Updates the entire column config struct. (like from a restore() call)
-    pub fn update_columns_configs(&self, update: ColumnConfigUpdate) {
-        match update {
-            crate::config::OptionalUpdate::SetDefault => {
-                let mut config = self.columns_config.borrow_mut();
-                *config = HashMap::default()
-            },
-            crate::config::OptionalUpdate::Missing => {},
-            crate::config::OptionalUpdate::Update(update) => {
-                for (col_name, new_config) in update.into_iter() {
-                    self.columns_config
-                        .borrow_mut()
-                        .insert(col_name, new_config);
-                }
-            },
+    pub fn set_drag_image(&self, event: &DragEvent) -> ApiResult<()> {
+        event.stop_propagation();
+        if let Some(dt) = event.data_transfer() {
+            dt.set_drop_effect("move");
         }
+
+        let original: HtmlElement = event.target().into_apierror()?.unchecked_into();
+        let elem: HtmlElement = original
+            .children()
+            .get_with_index(0)
+            .unwrap()
+            .clone_node_with_deep(true)?
+            .unchecked_into();
+
+        elem.class_list().toggle("snap-drag-image")?;
+        original.append_child(&elem)?;
+        event.data_transfer().into_apierror()?.set_drag_image(
+            &elem,
+            event.offset_x(),
+            event.offset_y(),
+        );
+
+        *self.drag_target.borrow_mut() = Some(DragTargetState::new(
+            self.viewer_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)?;
+            Ok(())
+        });
+
+        Ok(())
     }
 
-    pub fn update_columns_config_value(
-        &self,
-        column_name: String,
-        update: ColumnConfigValueUpdate,
-    ) {
-        let mut config = self.columns_config.borrow_mut();
-        let value = config.remove(&column_name).unwrap_or_default();
-        let update = value.update(update);
-        if !update.is_empty() {
-            config.insert(column_name, update);
+    /// Is the drag/drop state currently in `action`?
+    pub fn is_dragover(&self, drag_target: DragTarget) -> Option<(usize, String)> {
+        match *self.drag_state.borrow() {
+            DragState::DragOverInProgress(
+                DragFrom { ref column, .. },
+                DragOver { target, index },
+            ) if target == drag_target => Some((index, column.clone())),
+            _ => None,
+        }
+    }
+
+    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 },
+                DragOver { target, index },
+            ) => Some((column.to_string(), *target, *effect, *index)),
+            _ => None,
+        };
+
+        self.drag_target.borrow_mut().take();
+        *self.drag_state.borrow_mut() = DragState::NoDrag;
+        if let Some(action) = action {
+            self.drop_received.emit(action);
         }
     }
 
+    /// 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 });
+        self.register_host_dragend();
+        let emit = self.on_dragstart.borrow().clone();
+        ApiFuture::spawn(async move {
+            request_animation_frame().await;
+            if let Some(cb) = emit {
+                cb.emit(effect);
+            }
+
+            Ok(())
+        });
+    }
+
+    /// 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;
+            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) {
+        if let Some(prev) = self.host_dragend.borrow_mut().take() {
+            let _ = self
+                .viewer_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.viewer_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() {
+            DragState::DragOverInProgress(
+                DragFrom { ref column, effect },
+                DragOver { target, .. },
+            ) if target == drag_target => Some((column.clone(), effect)),
+            _ => None,
+        };
+
+        if let Some((column, effect)) = reset {
+            self.notify_drag_start(column, effect);
+        }
+    }
+
+    /// Enter the `action` zone at `index`, which must be <= the number of
+    /// children in the container.
+    pub fn notify_drag_enter(&self, target: DragTarget, index: usize) -> bool {
+        let mut drag_state = self.drag_state.borrow_mut();
+        let should_render = match &*drag_state {
+            DragState::DragOverInProgress(_, drag_to) => {
+                drag_to.target != target || drag_to.index != index
+            },
+            _ => true,
+        };
+
+        *drag_state = match &*drag_state {
+            DragState::DragOverInProgress(drag_from, _) | DragState::DragInProgress(drag_from) => {
+                DragState::DragOverInProgress(drag_from.clone(), DragOver { target, index })
+            },
+            _ => DragState::NoDrag,
+        };
+
+        should_render
+    }
+
     /// Snapshot the current presentation state as a [`PresentationProps`]
     /// value suitable for passing as a Yew prop.  Called by the root component
     /// whenever a presentation-related PubSub event fires.