@perspective-dev/viewer 5.1.0 → 5.3.0

package/src/rust/components/form/code_editor.rs

@@ -18,6 +18,7 @@ use web_sys::*;
 use yew::prelude::*;
 
 use crate::components::form::highlight::highlight;
+use crate::components::form::mirrored_textarea::MirroredTextarea;
 use crate::components::function_dropdown::{FunctionDropDownElement, FunctionDropDownPortal};
 use crate::exprtk::{Cursor, tokenize};
 use crate::utils::*;
@@ -44,6 +45,9 @@ pub struct CodeEditorProps {
     #[prop_or_default]
     pub error: Option<ExprValidationError>,
 
+    #[prop_or_default]
+    pub contained: bool,
+
     /// Selected theme name, threaded for PortalModal consumers.
     #[prop_or_default]
     pub theme: String,
@@ -164,40 +168,37 @@ pub fn code_editor(props: &CodeEditorProps) -> Html {
         ))
         .collect::<Html>();
 
-    let class = if props.wordwrap {
-        "wordwrap scrollable"
-    } else {
-        "scrollable"
+    let mut outer_class = classes!("scrollable");
+    let mut inner_class = classes!("editor-inner", "scrollable");
+
+    if props.wordwrap {
+        outer_class.push("wordwrap");
+        inner_class.push("wordwrap");
     };
+
+    if props.contained {
+        outer_class.push("contained")
+    }
+
     clone!(props.disabled);
     html! {
         <>
-            <div id="editor" {class}>
+            <div id="editor" class={outer_class}>
                 <div id="line_numbers" ref={lineno_ref}>{ line_numbers }</div>
-                <div id="editor-inner" {class}>
-                    <textarea
-                        {disabled}
-                        id="textarea_editable"
-                        class="scrollable"
-                        ref={textarea_ref}
-                        spellcheck="false"
-                        {oninput}
-                        {onscroll}
-                        {onkeydown}
-                    />
+                <MirroredTextarea
+                    id="textarea_editable"
+                    mirror_id="content"
+                    class={inner_class}
+                    mirror={terms}
+                    {textarea_ref}
+                    mirror_ref={content_ref}
+                    {disabled}
+                    {oninput}
+                    {onscroll}
+                    {onkeydown}
+                >
                     <div id="editor-height-sizer" />
-                    <pre id="content" ref={content_ref}>
-                        { terms }
-                        { {
-                        // A linebreak which pushs a textarea into scroll overflow
-                        // may not necessarily do so in the `<pre>`, because there is
-                        // no cursor when the last line has no content, so add
-                        // some space here to make sure overlfow is in sync
-                        // with the text area.
-                        " "
-                    } }
-                    </pre>
-                </div>
+                </MirroredTextarea>
             </div>
             <FunctionDropDownPortal
                 element={(*portal_dropdown).clone()}

package/src/rust/components/form/debug.rs

@@ -23,12 +23,14 @@ use crate::presentation::*;
 use crate::renderer::*;
 use crate::session::*;
 use crate::utils::*;
+use crate::workspace::Workspace;
 
 #[derive(Clone, PartialEq, Properties)]
 pub struct DebugPanelProps {
     pub presentation: Presentation,
     pub renderer: Renderer,
     pub session: Session,
+    pub workspace: Workspace,
 
     /// Trap-door width pinned by the parent `SettingsPanel` so switching
     /// tabs doesn't shrink the panel. Threaded into the hidden sizer
@@ -176,6 +178,7 @@ pub fn debug_panel(props: &DebugPanelProps) -> Html {
                         <CodeEditor
                             expr={&*expr}
                             disabled=false
+                            contained=true
                             {oninput}
                             {onsave}
                             select_all={select_all.subscriber()}
@@ -236,15 +239,16 @@ impl DebugPanelProps {
         ApiFuture::spawn(async move {
             match serde_json::from_str(&text) {
                 Ok(config) => {
-                    match crate::tasks::restore_and_render(
+                    let active =
+                        props.workspace.active_renderer().as_ref() == Some(&props.renderer);
+                    match crate::tasks::restore_panel(
                         &props.session,
                         &props.renderer,
                         &props.presentation,
-                        // A user-pasted config apply — an explicit request,
-                        // same affordance as the public `restore()`.
-                        crate::tasks::RunOrigin::Public,
+                        &props.workspace,
+                        crate::tasks::RestoreMode::Existing { active },
                         config,
-                        async { Ok(()) },
+                        crate::tasks::RestoreErrors::Suppress,
                     )
                     .await
                     {

package/src/rust/components/form/mirrored_textarea.rs

@@ -0,0 +1,165 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+//! 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::*;
+
+#[derive(Clone)]
+pub struct Mirror(pub Html);
+
+impl PartialEq for Mirror {
+    fn eq(&self, _other: &Self) -> bool {
+        false
+    }
+}
+
+impl IntoPropValue<Mirror> for Html {
+    fn into_prop_value(self) -> Mirror {
+        Mirror(self)
+    }
+}
+
+#[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,
+
+    #[prop_or_default]
+    pub textarea_ref: NodeRef,
+
+    #[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,
+
+    #[prop_or_default]
+    pub disabled: bool,
+
+    #[prop_or_default]
+    pub oninput: Callback<InputEvent>,
+
+    #[prop_or_default]
+    pub onkeydown: Callback<KeyboardEvent>,
+
+    #[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,
+}
+
+#[function_component]
+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()}
+                class="mirrored-textarea-input scrollable"
+                spellcheck="false"
+                placeholder={props.placeholder.clone()}
+                disabled={props.disabled}
+                oninput={props.oninput.clone()}
+                onkeydown={props.onkeydown.clone()}
+                onscroll={props.onscroll.clone()}
+            />
+            { props.children.iter().collect::<Html>() }
+            <pre
+                id={props.mirror_id.clone()}
+                ref={props.mirror_ref.clone()}
+                class={classes!(
+                    "mirrored-textarea-mirror",
+                    props.is_empty.then_some("is-empty"),
+                )}
+            >
+                { 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>
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn mirror_never_compares_equal() {
+        let mirror = Mirror(Html::default());
+        assert!(mirror != mirror.clone());
+        assert!(Mirror(Html::default()) != Mirror(Html::default()));
+    }
+}

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

@@ -17,13 +17,16 @@
 //! parent module directly.
 
 pub mod code_editor;
-pub mod color_range_selector;
 pub mod color_selector;
 pub mod debug;
+pub mod mirrored_textarea;
+pub mod multi_stop_gradient_selector;
+pub mod named_value_picker;
 pub mod number_field;
 pub mod number_input;
 pub mod number_range_field;
 pub mod optional_field;
+pub mod palette_selector;
 pub mod select_enum_field;
 pub mod select_value_field;