@perspective-dev/viewer 5.3.0 → 5.4.0

package/src/rust/{components → ui}/form/mirrored_textarea.rs

@@ -10,31 +10,6 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-//! A `<textarea>` whose box is sized by its own text.
-//!
-//! A textarea cannot grow with its content — it scrolls at whatever height
-//! it was given. The technique here, shared by [`CodeEditor`] and the chat
-//! prompt, is to make the textarea a purely functional layer: it takes the
-//! keystrokes, the selection and the caret, but paints no glyphs
-//! (`color: transparent`). Underneath sits a `<pre>` mirror of the same
-//! characters which IS painted and IS in flow, so the ordinary layout
-//! engine sizes the box.
-//!
-//! This is deliberately not a JS measure-and-resize loop
-//! (`scrollHeight` → inline `height`): that re-measures on a reflow it
-//! just forced, drifts whenever font-size or the loaded font changes
-//! without an `input` event to re-trigger it, and jitters at fractional
-//! line heights. Here the two layers share their text metrics, so growth
-//! is exact by construction and free at runtime.
-//!
-//! Consumers decide the AXES: the mirror's `white-space` governs growth,
-//! so `pre-wrap` grows only downward (the chat prompt) while `pre` also
-//! grows sideways (the expression editor). They also own the box —
-//! padding, borders, min/max size — with `mirrored-textarea.css` fixing
-//! only what MUST agree between the two layers.
-//!
-//! [`CodeEditor`]: super::code_editor::CodeEditor
-
 use yew::html::IntoPropValue;
 use yew::prelude::*;
 
@@ -55,20 +30,13 @@ impl IntoPropValue<Mirror> for Html {
 
 #[derive(Properties, PartialEq)]
 pub struct MirroredTextareaProps {
-    /// `id` of the `<textarea>` itself — consumer CSS and tests key on it.
     pub id: AttrValue,
 
-    /// The mirror's content: the same characters the textarea holds,
-    /// as plain text, or marked up (`CodeEditor` passes highlighted
-    /// spans). A stale mirror means a caret that drifts from the glyphs,
-    /// so this is re-rendered unconditionally — see [`Mirror`].
     pub mirror: Mirror,
 
-    /// `id` of the mirror `<pre>`, for consumers that style it directly.
     #[prop_or_default]
     pub mirror_id: Option<AttrValue>,
 
-    /// Extra classes for the positioned container.
     #[prop_or_default]
     pub class: Classes,
 
@@ -78,19 +46,9 @@ pub struct MirroredTextareaProps {
     #[prop_or_default]
     pub mirror_ref: NodeRef,
 
-    /// The `placeholder` ATTRIBUTE, which exists for assistive tech: it
-    /// is painted transparent, because a CSS-`content` label cannot be
-    /// written into an attribute and so cannot be localized. The text a
-    /// sighted user reads comes from the mirror instead — see
-    /// [`Self::is_empty`].
     #[prop_or_default]
     pub placeholder: AttrValue,
 
-    /// Whether [`Self::mirror`] is empty, which the component cannot see
-    /// for itself (the mirror is opaque `Html`). Tags the mirror with
-    /// `is-empty` so a consumer's stylesheet can supply placeholder text
-    /// through `content`, and therefore through the intl label
-    /// mechanism, rather than through the untranslatable attribute.
     #[prop_or_default]
     pub is_empty: bool,
 
@@ -106,8 +64,6 @@ pub struct MirroredTextareaProps {
     #[prop_or_default]
     pub onscroll: Callback<Event>,
 
-    /// Extra nodes inside the positioned container, e.g. `CodeEditor`'s
-    /// minimum-height sizer.
     #[prop_or_default]
     pub children: Children,
 }
@@ -116,11 +72,6 @@ pub struct MirroredTextareaProps {
 pub fn MirroredTextarea(props: &MirroredTextareaProps) -> Html {
     html! {
         <div class={classes!("mirrored-textarea", props.class.clone())}>
-            // `scrollable` is the viewer's webkit scrollbar styling: the
-            // input layer scrolls wherever a consumer lets it (the
-            // expression editor syncs its `scrollTop` to the mirror and
-            // line numbers), and is inert where it does not (the chat
-            // prompt, whose wrapper scrolls instead).
             <textarea
                 id={props.id.clone()}
                 ref={props.textarea_ref.clone()}
@@ -142,10 +93,6 @@ pub fn MirroredTextarea(props: &MirroredTextareaProps) -> Html {
                 )}
             >
                 { props.mirror.0.clone() }
-                // A trailing newline opens a line box in the textarea but
-                // not in the `<pre>` (which has no caret to place there),
-                // so the mirror would come up one line short exactly when
-                // the text is about to overflow. The space forces it.
                 { " " }
             </pre>
         </div>

package/src/rust/{components → ui}/form/mod.rs

@@ -10,15 +10,8 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-//! A module for form controls (though form controls like `<Select>` which are
-//! also container elements should go in the `containers` module).
-//!
-//! Components in this module should not be imported from the `components`
-//! parent module directly.
-
-pub mod code_editor;
 pub mod color_selector;
-pub mod debug;
+pub mod intl_label;
 pub mod mirrored_textarea;
 pub mod multi_stop_gradient_selector;
 pub mod named_value_picker;
@@ -29,5 +22,3 @@ pub mod optional_field;
 pub mod palette_selector;
 pub mod select_enum_field;
 pub mod select_value_field;
-
-mod highlight;

package/src/rust/{components → ui}/form/multi_stop_gradient_selector.rs

@@ -15,10 +15,9 @@ use wasm_bindgen::JsCast;
 use web_sys::*;
 use yew::prelude::*;
 
-use crate::config::{GradientStopSpec, canonicalize_gradient_stops};
+use crate::ui::form::intl_label::IntlLabel;
+use crate::utils::{GradientStopSpec, canonicalize_gradient_stops};
 
-/// The widget for [`crate::config::ControlSpec::GradientStops`]: a
-/// horizontal gradient preview bar with one handle per stop.
 #[derive(Properties, PartialEq)]
 pub struct MultiStopGradientProps {
     pub stops: Vec<GradientStopSpec>,
@@ -30,7 +29,7 @@ pub struct MultiStopGradientProps {
     pub discrete: bool,
 
     #[prop_or_default]
-    pub title: Option<String>,
+    pub label: Option<String>,
 }
 
 fn event_index(target: &Element) -> Option<usize> {
@@ -335,7 +334,7 @@ pub fn multi_stop_gradient_selector(props: &MultiStopGradientProps) -> Html {
     let pinned = props.discrete && !can_remove;
     html! {
         <>
-            <label id={props.title.as_deref().unwrap_or("gradient-label").to_owned()} />
+            <IntlLabel name={props.label.clone().unwrap_or_else(|| "gradient".to_owned())} />
             <div class="color-gradient-container gradient-stops-selector">
                 <div
                     class={if props.discrete {"gradient-stops-bar discrete"} else {"gradient-stops-bar"}}

package/src/rust/{components → ui}/form/named_value_picker.rs

@@ -16,18 +16,13 @@ use wasm_bindgen::JsCast;
 use web_sys::{Event, HtmlSelectElement, MouseEvent};
 use yew::prelude::*;
 
-use crate::config::{CssKind, NamedValue};
+use crate::utils::{CssKind, NamedValue};
 
-/// The named-value controls above a CSS-valued style field: a stateless
-/// quick-action `<select>` over every named value of the field's kind,
-/// and a Pin button that force-adds the field's value to the workspace
-/// palette.
 #[derive(Properties, PartialEq)]
 pub struct NamedValuePickerProps {
     pub kind: CssKind,
     pub entries: Rc<Vec<NamedValue>>,
 
-    /// Loads the named entry's value into the field.
     pub on_select: Callback<String>,
 
     #[prop_or_default]

package/src/rust/{components → ui}/form/number_field.rs

@@ -13,7 +13,7 @@
 use web_sys::{HtmlInputElement, InputEvent};
 use yew::{Callback, Properties, TargetCast, function_component, html};
 
-use crate::components::form::optional_field::OptionalField;
+use crate::ui::form::optional_field::OptionalField;
 
 #[derive(Properties, Debug, PartialEq, Clone)]
 pub struct NumberFieldProps {

package/src/rust/{components → ui}/form/number_range_field.rs

@@ -13,7 +13,7 @@
 use web_sys::HtmlInputElement;
 use yew::{Callback, Properties, function_component, html, use_callback, use_node_ref};
 
-use crate::components::form::optional_field::OptionalField;
+use crate::ui::form::optional_field::OptionalField;
 
 #[derive(Properties, Debug, PartialEq, Clone)]
 pub struct NumberRangeFieldProps {

package/src/rust/{components → ui}/form/optional_field.rs

@@ -12,6 +12,8 @@
 
 use yew::{Callback, Children, Html, MouseEvent, Properties, classes, function_component, html};
 
+use crate::ui::form::intl_label::IntlLabel;
+
 #[derive(Properties, PartialEq)]
 pub struct OptionalFieldProps {
     pub checked: bool,
@@ -30,7 +32,7 @@ pub struct OptionalFieldProps {
 pub fn optional_field(props: &OptionalFieldProps) -> Html {
     html! {
         <>
-            <label id={format!("{}-label", props.label)} />
+            <IntlLabel name={props.label.clone()} />
             <div
                 class={classes!(props.class.clone(), props.checked.then_some("is-default-value"))}
             >

package/src/rust/{components → ui}/form/palette_selector.rs

@@ -14,9 +14,8 @@ use wasm_bindgen::JsCast;
 use web_sys::*;
 use yew::prelude::*;
 
-/// The widget for [`crate::config::ControlSpec::Palette`]: an ordered row
-/// of discrete color swatches with per-swatch edit/remove, pointer-drag
-/// reordering, and a trailing add tile.
+use crate::ui::form::intl_label::IntlLabel;
+
 #[derive(Properties, PartialEq)]
 pub struct PaletteProps {
     pub values: Vec<String>,
@@ -28,7 +27,7 @@ pub struct PaletteProps {
     pub max: Option<usize>,
 
     #[prop_or_default]
-    pub title: Option<String>,
+    pub label: Option<String>,
 }
 
 const DRAG_THRESHOLD_PX: f64 = 4.0;
@@ -340,7 +339,7 @@ pub fn palette_selector(props: &PaletteProps) -> Html {
 
     html! {
         <>
-            <label id={props.title.as_deref().unwrap_or("palette-label").to_owned()} />
+            <IntlLabel name={props.label.clone().unwrap_or_else(|| "palette".to_owned())} />
             <div class="color-gradient-container palette-selector">
                 <div
                     class={classes!("palette-swatches", drag.is_some().then_some("reordering"))}

package/src/rust/{components → ui}/form/select_enum_field.rs

@@ -16,8 +16,8 @@ use itertools::Itertools;
 use strum::IntoEnumIterator;
 use yew::{Callback, Properties, function_component, html};
 
-use crate::components::containers::select::{Select, SelectItem};
-use crate::components::form::optional_field::OptionalField;
+use crate::ui::containers::select::{Select, SelectItem};
+use crate::ui::form::optional_field::OptionalField;
 
 #[derive(Properties, Debug, PartialEq, Clone)]
 pub struct SelectEnumFieldProps<T>

package/src/rust/{components → ui}/form/select_value_field.rs

@@ -16,8 +16,8 @@ use std::rc::Rc;
 use itertools::Itertools;
 use yew::{Callback, Properties, function_component, html};
 
-use crate::components::containers::select::{Select, SelectItem};
-use crate::components::form::optional_field::OptionalField;
+use crate::ui::containers::select::{Select, SelectItem};
+use crate::ui::form::optional_field::OptionalField;
 
 #[derive(Properties, Debug, PartialEq, Clone)]
 pub struct SelectValueFieldProps<T>

package/src/rust/ui/mod.rs

@@ -0,0 +1,56 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+//! Generic widgets and DOM infrastructure with no dependency on viewer
+//! state: nothing here may import `config`, `session`, `renderer`,
+//! `presentation`, `tasks`, `queries`, `workspace`, `agent`,
+//! `custom_elements`, `components`, or `js::plugin`.
+
+pub mod containers;
+pub mod context_menu;
+pub mod dragdrop;
+pub mod font_loader;
+pub mod form;
+pub mod modal;
+pub use modal::{ModalLink, SetModalLink};
+pub mod portal;
+pub mod style;
+
+pub use containers::control_group::ControlGroup;
+pub use containers::dropdown_menu::{DropDownMenu, DropDownMenuItem};
+pub use containers::scroll_panel::ScrollPanel;
+pub use containers::scroll_panel_item::ScrollPanelItem;
+pub use containers::select::{Select, SelectItem};
+pub use containers::sidebar::Sidebar;
+pub use containers::sidebar_close_button::SidebarCloseButton;
+pub use containers::split_panel::{Orientation, SplitPanel};
+pub use containers::tab_list::{TabItem, TabList};
+pub use context_menu::{ContextMenu, ContextMenuEntry, ContextMenuItem};
+pub use dragdrop::{
+    DragDropContainer, DragEndCallback, DragTargetState, PointerDownCallback,
+    clear_document_selection, closest_draggable,
+};
+pub use font_loader::{FontLoader, FontLoaderProps, FontLoaderStatus};
+pub use form::color_selector::ColorSelector;
+pub use form::intl_label::{IntlLabel, intl_content_style, intl_slug};
+pub use form::mirrored_textarea::MirroredTextarea;
+pub use form::multi_stop_gradient_selector::MultiStopGradientSelector;
+pub use form::named_value_picker::NamedValuePicker;
+pub use form::number_field::NumberField;
+pub use form::number_input::NumberInput;
+pub use form::number_range_field::NumberRangeField;
+pub use form::optional_field::OptionalField;
+pub use form::palette_selector::PaletteSelector;
+pub use form::select_enum_field::SelectEnumField;
+pub use form::select_value_field::SelectValueField;
+pub use portal::{MODAL_SLOT, PortalModal};
+pub use style::StyleProvider;

package/src/rust/ui/modal.rs

@@ -0,0 +1,61 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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 yew::html::ImplicitClone;
+use yew::prelude::*;
+
+use crate::utils::WeakScope;
+
+/// Whether a modal has been flipped to open upward from its anchor, provided
+/// as a Yew context by `PortalModal`.
+#[derive(Clone, Default, Eq, PartialEq)]
+pub struct ModalOrientation(Rc<Cell<bool>>);
+
+impl ImplicitClone for ModalOrientation {}
+
+impl ModalOrientation {
+    pub fn set(&self, value: bool) {
+        self.0.set(value);
+    }
+}
+
+impl From<ModalOrientation> for bool {
+    fn from(x: ModalOrientation) -> Self {
+        x.0.get()
+    }
+}
+
+/// Props that expose a weak link to their component, so an owner can send it
+/// messages after the fact (the column-style editors hosted in a modal).
+pub trait ModalLink<T>
+where
+    T: Component,
+{
+    fn weak_link(&self) -> &'_ WeakScope<T>;
+}
+
+pub trait SetModalLink {
+    fn set_modal_link(&self);
+}
+
+impl<T> SetModalLink for &Context<T>
+where
+    T: Component,
+    T::Properties: ModalLink<T>,
+{
+    fn set_modal_link(&self) {
+        *self.props().weak_link().borrow_mut() = Some(self.link().clone());
+    }
+}