@perspective-dev/viewer 4.0.0

package/src/rust/components/containers/kvpair.rs

@@ -0,0 +1,47 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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 serde::{Deserialize, Serialize};
+
+#[derive(Serialize, Deserialize, Clone, Debug, PartialEq, Default)]
+pub struct KVPair<K, V>
+where
+    K: Clone,
+    V: Clone,
+{
+    pub key: K,
+    pub value: V,
+}
+
+impl<K, V> KVPair<K, V>
+where
+    K: Clone,
+    V: Clone,
+{
+    pub fn new(key: K, value: V) -> Self {
+        Self { key, value }
+    }
+
+    pub fn update_key(&self, key: K) -> Self {
+        Self {
+            key,
+            value: self.value.clone(),
+        }
+    }
+
+    pub fn update_value(&self, value: V) -> Self {
+        Self {
+            key: self.key.clone(),
+            value,
+        }
+    }
+}

package/src/rust/components/containers/mod.rs

@@ -0,0 +1,28 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+//! `containers` are generic container-like components for collections of other
+//! `Component` types.
+
+pub mod dragdrop_list;
+pub mod dropdown_menu;
+pub mod kvpair;
+pub mod scroll_panel;
+pub mod scroll_panel_item;
+pub mod select;
+pub mod sidebar;
+pub mod split_panel;
+pub mod tab_list;
+pub mod trap_door_panel;
+
+#[cfg(test)]
+mod tests;

package/src/rust/components/containers/scroll_panel.rs

@@ -0,0 +1,311 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+// Forked from https://github.com/AircastDev/yew-virtual-scroller (Apache 2.0)
+// Adds support for Yew 0.19, auto-width and a simplified message structure.
+
+use std::ops::Range;
+use std::rc::Rc;
+
+use itertools::Itertools;
+use web_sys::Element;
+use yew::prelude::*;
+use yew::virtual_dom::VChild;
+
+use super::scroll_panel_item::ScrollPanelItem;
+use crate::components::style::LocalStyle;
+use crate::utils::*;
+use crate::*;
+
+pub struct ScrollPanel {
+    viewport_ref: NodeRef,
+    viewport_height: f64,
+    viewport_width: f64,
+    content_window: Option<ContentWindow>,
+    needs_rerender: bool,
+    total_height: f64,
+    _dimensions_reset_sub: Option<Subscription>,
+    _resize_sub: Option<Subscription>,
+}
+
+#[derive(Properties)]
+pub struct ScrollPanelProps {
+    #[prop_or_default]
+    pub children: Vec<VChild<ScrollPanelItem>>,
+
+    #[prop_or_default]
+    pub viewport_ref: Option<NodeRef>,
+
+    #[prop_or_default]
+    pub class: Classes,
+
+    #[prop_or_default]
+    pub id: &'static str,
+
+    #[prop_or_default]
+    pub dragenter: Callback<DragEvent>,
+
+    #[prop_or_default]
+    pub dragover: Callback<DragEvent>,
+
+    #[prop_or_default]
+    pub dragleave: Callback<DragEvent>,
+
+    #[prop_or_default]
+    pub on_resize: Option<Rc<PubSub<()>>>,
+
+    #[prop_or_default]
+    pub on_dimensions_reset: Option<Rc<PubSub<()>>>,
+
+    #[prop_or_default]
+    pub drop: Callback<DragEvent>,
+}
+
+impl ScrollPanelProps {
+    /// Calculate the total virtual height of this scroll panel from the `size`
+    /// prop of its children.
+    fn total_height(&self) -> f64 {
+        self.children
+            .iter()
+            .map(|x| x.props.get_size())
+            .reduce(|x, y| x + y)
+            .unwrap_or_default()
+    }
+}
+
+impl PartialEq for ScrollPanelProps {
+    fn eq(&self, _rhs: &Self) -> bool {
+        false
+    }
+}
+
+#[doc(hidden)]
+pub enum ScrollPanelMsg {
+    CalculateWindowContent,
+    UpdateViewportDimensions,
+    ResetAutoWidth,
+    ChildrenChanged,
+}
+
+impl ScrollPanel {
+    fn viewport<'a, 'b: 'a, 'c: 'a>(&'b self, ctx: &'c Context<Self>) -> &'a NodeRef {
+        ctx.props()
+            .viewport_ref
+            .as_ref()
+            .unwrap_or(&self.viewport_ref)
+    }
+
+    fn viewport_elem(&self, ctx: &Context<Self>) -> Element {
+        self.viewport(ctx).cast::<Element>().unwrap()
+    }
+}
+
+#[derive(PartialEq)]
+struct ContentWindow {
+    scroll_top: f64,
+    start_y: f64,
+    visible_range: Range<usize>,
+}
+
+impl ScrollPanel {
+    fn calculate_window_content(&mut self, ctx: &Context<Self>) -> bool {
+        let viewport = self.viewport_elem(ctx);
+        let scroll_top = viewport.scroll_top() as f64;
+        let mut start_node = 0;
+        let mut start_y = 0_f64;
+        let mut offset = 0_f64;
+        let end_node = ctx
+            .props()
+            .children
+            .iter()
+            .enumerate()
+            .find_or_last(|(i, x)| {
+                if offset + x.props.get_size() < scroll_top {
+                    start_node = *i + 1;
+                    start_y = offset + x.props.get_size();
+                }
+
+                offset += x.props.get_size();
+                offset > scroll_top + self.viewport_height
+            })
+            .map(|x| x.0)
+            .unwrap_or_default();
+
+        // Why is this `end_node + 2`, I can see you asking yourself? `end_node` is the
+        // index of the last visible child, but [`Range`] is an open interval so we must
+        // increment by 1. The next rendered element is always occluded by the parent
+        // container, it may seem unnecessary to render it, however not doing so causing
+        // scroll glitching in Chrome:
+        // * When the first pixel of the `end_node + 1` child is scrolled into view, the
+        //   container element it is embedded in will expand past the end of the scroll
+        //   container.
+        // * Chrome detects this and helpfully scrolls this new element into view,
+        //   re-triggering the on scroll callback.
+        let visible_range = start_node..min!(ctx.props().children.len(), end_node + 2);
+        let content_window = Some(ContentWindow {
+            scroll_top,
+            start_y,
+            visible_range,
+        });
+
+        let re_render = self.content_window != content_window;
+        self.content_window = content_window;
+        re_render
+    }
+}
+
+impl Component for ScrollPanel {
+    type Message = ScrollPanelMsg;
+    type Properties = ScrollPanelProps;
+
+    fn create(ctx: &Context<Self>) -> Self {
+        let _dimensions_reset_sub = ctx.props().on_dimensions_reset.as_ref().map(|pubsub| {
+            let link = ctx.link().clone();
+            pubsub.add_listener(move |_| {
+                link.send_message_batch(vec![
+                    ScrollPanelMsg::ResetAutoWidth,
+                    ScrollPanelMsg::CalculateWindowContent,
+                ])
+            })
+        });
+
+        let _resize_sub = ctx.props().on_resize.as_ref().map(|pubsub| {
+            let link = ctx.link().clone();
+            pubsub.add_listener(move |_| {
+                link.send_message_batch(vec![
+                    ScrollPanelMsg::UpdateViewportDimensions,
+                    ScrollPanelMsg::CalculateWindowContent,
+                ])
+            })
+        });
+
+        let total_height = ctx.props().total_height();
+        Self {
+            viewport_ref: Default::default(),
+            viewport_height: 0f64,
+            viewport_width: 0f64,
+            content_window: None,
+            needs_rerender: true,
+            total_height,
+            _dimensions_reset_sub,
+            _resize_sub,
+        }
+    }
+
+    fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
+        match msg {
+            ScrollPanelMsg::ResetAutoWidth => {
+                self.viewport_width = 0.0;
+                self.calculate_window_content(ctx)
+            },
+            ScrollPanelMsg::UpdateViewportDimensions => {
+                let viewport = self.viewport_elem(ctx);
+                let rect = viewport.get_bounding_client_rect();
+                let viewport_height = rect.height() - 8.0;
+                let viewport_width = max!(self.viewport_width, rect.width() - 6.0);
+                let re_render = self.viewport_height != viewport_height
+                    || self.viewport_width != viewport_width;
+
+                self.viewport_height = rect.height() - 8.0;
+                self.viewport_width = max!(self.viewport_width, rect.width() - 6.0);
+                re_render
+            },
+            ScrollPanelMsg::CalculateWindowContent => self.calculate_window_content(ctx),
+            ScrollPanelMsg::ChildrenChanged => true,
+        }
+    }
+
+    /// If the new total row height is different than last time this component
+    /// was rendered, we need to double-render to read the container's
+    /// potentially updated height.
+    fn changed(&mut self, ctx: &Context<Self>, _old: &Self::Properties) -> bool {
+        let total_height = ctx.props().total_height();
+        self.needs_rerender =
+            self.needs_rerender || (self.total_height - total_height).abs() > 0.1f64;
+        self.total_height = total_height;
+        ctx.link().send_message_batch(vec![
+            ScrollPanelMsg::UpdateViewportDimensions,
+            ScrollPanelMsg::CalculateWindowContent,
+            ScrollPanelMsg::ChildrenChanged,
+        ]);
+
+        false
+    }
+
+    fn view(&self, ctx: &Context<Self>) -> Html {
+        let content_style = format!("height:{}px", self.total_height);
+        let (window_style, windowed_items) = match &self.content_window {
+            None => ("".to_string(), &[][..]),
+            Some(cw) => (
+                format!(
+                    "position:sticky;top:0;transform:translateY({}px);",
+                    cw.start_y - cw.scroll_top
+                ),
+                (&ctx.props().children[cw.visible_range.clone()]),
+            ),
+        };
+
+        let width_style = format!("width:{}px", max!(self.viewport_width, 0.0));
+        let items = if !windowed_items.is_empty() {
+            let onscroll = ctx.link().batch_callback(|_| {
+                vec![
+                    ScrollPanelMsg::UpdateViewportDimensions,
+                    ScrollPanelMsg::CalculateWindowContent,
+                ]
+            });
+
+            // TODO This glitches - we should use the `sticky` positioning strategy that
+            // `regular-table` uses.
+            html! {
+                <div
+                    ref={self.viewport(ctx)}
+                    id={ctx.props().id}
+                    {onscroll}
+                    ondragover={&ctx.props().dragover}
+                    ondragenter={&ctx.props().dragenter}
+                    ondragleave={&ctx.props().dragleave}
+                    ondrop={&ctx.props().drop}
+                    class={ctx.props().class.clone()}
+                >
+                    <div class="scroll-panel-container" style={window_style}>
+                        { for windowed_items.iter().cloned().map(Html::from) }
+                        <div
+                            key="__scroll-panel-auto-width__"
+                            class="scroll-panel-auto-width"
+                            style={width_style}
+                        />
+                    </div>
+                    <div class="scroll-panel-content" style={content_style} />
+                </div>
+            }
+        } else {
+            html! {
+                <div
+                    ref={self.viewport(ctx)}
+                    id={ctx.props().id}
+                    class={ctx.props().class.clone()}
+                >
+                    <div style={content_style} />
+                </div>
+            }
+        };
+
+        html! { <><LocalStyle href={css!("containers/scroll-panel")} />{ items }</> }
+    }
+
+    fn rendered(&mut self, ctx: &Context<Self>, _first_render: bool) {
+        ctx.link().send_message_batch(vec![
+            ScrollPanelMsg::UpdateViewportDimensions,
+            ScrollPanelMsg::CalculateWindowContent,
+        ]);
+    }
+}

package/src/rust/components/containers/scroll_panel_item.rs

@@ -0,0 +1,111 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+// Forked from https://github.com/AircastDev/yew-virtual-scroller (Apache 2.0)
+// Adds support for Yew 0.19, auto-width and a simplified message structure.
+
+#[cfg(debug_assertions)]
+use std::cell::Cell;
+#[cfg(debug_assertions)]
+use std::rc::Rc;
+
+use yew::prelude::*;
+
+#[derive(PartialEq, Properties)]
+pub struct ScrollPanelItemProps {
+    /// The expected size of this component in pixels. Calculating this value
+    /// ahead of time makes it easier to implement a high-performance virtual
+    /// renderer without resorting to weird tricks, _but_ checking that this
+    /// hint is correct is nearly as expensive. So, we only generate the
+    /// validation code in debug builds.
+    pub size_hint: f64,
+    pub children: Children,
+
+    #[cfg(debug_assertions)]
+    #[prop_or_default]
+    measured_size: Rc<Cell<Option<f64>>>,
+}
+
+impl ScrollPanelItemProps {
+    #[cfg(debug_assertions)]
+    pub fn get_size(&self) -> f64 {
+        self.measured_size.get().unwrap_or(self.size_hint)
+    }
+
+    #[cfg(not(debug_assertions))]
+    pub fn get_size(&self) -> f64 {
+        self.size_hint
+    }
+}
+
+#[cfg(debug_assertions)]
+pub struct ScrollPanelItem {
+    node: NodeRef,
+}
+
+#[cfg(not(debug_assertions))]
+pub struct ScrollPanelItem {}
+
+impl Component for ScrollPanelItem {
+    type Message = ();
+    type Properties = ScrollPanelItemProps;
+
+    #[cfg(debug_assertions)]
+    fn create(ctx: &Context<Self>) -> Self {
+        ctx.props().measured_size.set(Some(ctx.props().size_hint));
+        Self {
+            node: NodeRef::default(),
+        }
+    }
+
+    #[cfg(not(debug_assertions))]
+    fn create(_ctx: &Context<Self>) -> Self {
+        Self {}
+    }
+
+    #[cfg(debug_assertions)]
+    fn view(&self, ctx: &Context<Self>) -> Html {
+        html! {
+            <div class="debug-size-wrapper" style="display: flow-root" ref={self.node.clone()}>
+                { for ctx.props().children.iter() }
+            </div>
+        }
+    }
+
+    #[cfg(not(debug_assertions))]
+    fn view(&self, ctx: &Context<Self>) -> Html {
+        html! { { for ctx.props().children.iter() } }
+    }
+
+    #[cfg(debug_assertions)]
+    fn changed(&mut self, ctx: &Context<Self>, _old: &Self::Properties) -> bool {
+        ctx.props().measured_size.set(Some(ctx.props().size_hint));
+        true
+    }
+
+    #[cfg(debug_assertions)]
+    fn rendered(&mut self, ctx: &Context<Self>, first_render: bool) {
+        if first_render {
+            let elem = self.node.cast::<web_sys::HtmlElement>().unwrap();
+            let new_height = elem.get_bounding_client_rect().height();
+            if ctx.props().measured_size.get() != Some(new_height) {
+                tracing::warn!(
+                    "ScrollPanel size_hint does not match element size: {} != {}",
+                    ctx.props().size_hint,
+                    new_height
+                );
+                web_sys::console::warn_1(&elem);
+                ctx.props().measured_size.set(Some(new_height));
+            }
+        }
+    }
+}