@perspective-dev/viewer 5.3.0 → 5.4.0

package/src/themes/solarized.css

@@ -21,6 +21,7 @@ perspective-viewer [theme="Solarized"] {
 perspective-viewer[theme="Solarized"],
 perspective-viewer [theme="Solarized"] {
     /* perspective-viewer-solarized--colors */
+    color-scheme: light;
     color: #586e75;
     background-color: #eee8d5;
     --psp--color: #586e75;
@@ -69,27 +70,3 @@ perspective-viewer [theme="Solarized"] {
 x {
     color: #cb4b16;
 }
-
-perspective-context-menu[theme="Solarized"],
-perspective-copy-menu[theme="Solarized"],
-perspective-export-menu[theme="Solarized"],
-perspective-dropdown[theme="Solarized"],
-perspective-date-column-style[theme="Solarized"],
-perspective-datetime-column-style[theme="Solarized"],
-perspective-number-column-style[theme="Solarized"],
-perspective-string-column-style[theme="Solarized"] {
-    /* perspective-viewer-solarized--colors */
-    color: #586e75;
-    --psp--color: #586e75;
-    --psp-active--color: #268bd2;
-    --psp-error--color: #cb4b16;
-    --psp-inactive--color: #93a1a1;
-    --psp-inactive--border-color: var(--psp-inactive--color);
-    --psp--background-color: #fdf6e3;
-    --psp-column-type--float--color: #268bd2;
-    --psp-column-type--string--color: #cb4b16;
-    --psp-column-type--date--color: #2aa198;
-    --psp-column-type--boolean--color: #b58900;
-
-    background-color: #fdf6e3;
-}

package/src/themes/themes.css

@@ -12,12 +12,17 @@
 
 @import "./pro.css";
 @import "./pro-dark.css";
+@import "./blueprint.css";
+@import "./botanical.css";
+@import "./dracula.css";
+@import "./eggplant.css";
+@import "./gruvbox.css";
+@import "./gruvbox-dark.css";
+@import "./ledger.css";
 @import "./monokai.css";
+@import "./nord.css";
+@import "./phosphor.css";
 @import "./solarized.css";
 @import "./solarized-dark.css";
 @import "./vaporwave.css";
-@import "./gruvbox.css";
-@import "./gruvbox-dark.css";
-@import "./dracula.css";
-@import "./botanical.css";
-@import "./phosphor.css";
+@import "./velvet.css";

package/src/themes/vaporwave.css

@@ -23,6 +23,7 @@ perspective-viewer [theme="Vaporwave"] {
     /* perspective-viewer-pro-dark--colors (overrides) */
     background-color: #242526;
     color: white;
+    color-scheme: dark;
     --psp--color: white;
     --psp-active--color: #2770a9;
     --psp-error--color: #ff9485;
@@ -38,14 +39,6 @@ perspective-viewer [theme="Vaporwave"] {
     --psp-warning--color: #242526;
     --psp-warning--background: var(--psp--color);
 
-    --psp-icon--select-arrow--mask-image: var(
-        --psp-icon--select-arrow-light--mask-image
-    );
-
-    --psp-icon--select-arrow-hover--mask-image: var(
-        --psp-icon--select-arrow-dark--mask-image
-    );
-
     --psp-code-editor--symbol--color: white;
     --psp-code-editor--literal--color: #7dc3f0;
     --psp-code-editor--operator--color: rgb(23, 166, 123);
@@ -196,52 +189,3 @@ perspective-viewer [theme="Vaporwave"] {
         #61f4fb
     ) !important;
 }
-
-perspective-context-menu[theme="Vaporwave"],
-perspective-copy-menu[theme="Vaporwave"],
-perspective-export-menu[theme="Vaporwave"],
-perspective-dropdown[theme="Vaporwave"],
-perspective-date-column-style[theme="Vaporwave"],
-perspective-datetime-column-style[theme="Vaporwave"],
-perspective-number-column-style[theme="Vaporwave"],
-perspective-string-column-style[theme="Vaporwave"] {
-    /* perspective-viewer-pro-dark--colors (overrides) */
-    background-color: #242526;
-    color: white;
-    --psp--color: white;
-    --psp-active--color: #2770a9;
-    --psp-error--color: #ff9485;
-    --psp-inactive--color: #61656e;
-    --psp-inactive--border-color: #4c505b;
-    --psp--background-color: #242526;
-    --psp-active--background: rgba(39, 113, 170, 0.5);
-    --psp-expression--operator--color: #c5c9d0;
-    --psp-expression--function--color: #22a0ce;
-    --psp-expression--psp-error--color: rgb(255, 136, 136);
-    --psp-calendar--filter: invert(1);
-    --psp-input--filter: invert(1);
-    --psp-warning--color: #242526;
-    --psp-warning--background: var(--psp--color);
-    --psp-icon--select-arrow--mask-image: var(
-        --psp-icon--select-arrow-light--mask-image
-    );
-    --psp-icon--select-arrow-hover--mask-image: var(
-        --psp-icon--select-arrow-dark--mask-image
-    );
-    --psp-code-editor--symbol--color: white;
-    --psp-code-editor--literal--color: #7dc3f0;
-    --psp-code-editor--operator--color: rgb(23, 166, 123);
-    --psp-code-editor--comment--color: rgb(204, 120, 48);
-    --psp-code-editor--column--color: #e18ee1;
-
-    border: 1px solid #4c505b;
-
-    /* perspective-viewer-vaporwave--colors */
-    color: #49acff;
-    --psp--color: #49acff;
-    --psp-inactive--color: rgb(19, 33, 50) !important;
-    --psp-inactive--border-color: var(--psp-inactive--color);
-    --psp--background-color: rgb(7, 8, 29) !important;
-
-    background-color: #07081d;
-}

package/src/themes/velvet.css

@@ -0,0 +1,132 @@
+/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+ * ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+ * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+ * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+ * ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+ * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+ * ┃ 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). ┃
+ * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ */
+
+@import "./defaults.css";
+
+perspective-viewer,
+perspective-viewer[theme="Velvet"],
+perspective-viewer [theme="Velvet"] {
+    --psp-theme-name: "Velvet";
+}
+
+perspective-viewer[theme="Velvet"],
+perspective-viewer [theme="Velvet"] {
+    --theme-bg0: #3a0d14;
+    --theme-bg1: #4a1119;
+    --theme-bg2: #5c1822;
+    --theme-bg3: #7a2431;
+    --theme-fg0: #fff5f7;
+    --theme-fg1: #f3c9d3;
+    --theme-fg2: #a8606f;
+    --theme-white: #ffffff;
+    --theme-pink: #ff8fb8;
+    --theme-pink-bright: #ffb3cf;
+    --theme-rose: #ff5c8d;
+    --theme-blush: #ffd6e2;
+    --theme-gold: #f2c078;
+    --theme-lilac: #d9b3ff;
+    --theme-peach: #ffcba4;
+    --theme-amber: #ffd166;
+    --theme-mint: #8fe3c8;
+    --theme-sky: #9ccfff;
+    --theme-periwinkle: #a3a8ff;
+    --theme-sage: #c5d99a;
+
+    background-color: var(--theme-bg0);
+    color: var(--theme-fg0);
+    color-scheme: dark;
+    --psp--color: var(--theme-fg1);
+    --psp-active--color: var(--theme-pink);
+    --psp-error--color: var(--theme-amber);
+    --psp-inactive--color: var(--theme-fg2);
+    --psp-inactive--border-color: var(--theme-bg3);
+    --psp--background-color: var(--theme-bg0);
+    --psp-active--background: rgba(255, 143, 184, 0.3);
+    --psp-expression--operator--color: var(--theme-pink-bright);
+    --psp-expression--function--color: var(--theme-pink);
+    --psp-expression--psp-error--color: var(--theme-amber);
+    --psp-calendar--filter: invert(1);
+    --psp-input--filter: invert(1);
+    --psp-warning--color: var(--theme-bg0);
+    --psp-warning--background: var(--theme-blush);
+
+    --psp-status-icon--connected--color: var(--theme-pink);
+    --psp-status-icon--initializing--color: var(--theme-blush);
+    --psp-status-icon--psp-error--color: var(--theme-amber);
+
+    --psp-code-editor--symbol--color: var(--theme-fg0);
+    --psp-code-editor--literal--color: var(--theme-pink-bright);
+    --psp-code-editor--operator--color: var(--theme-pink-bright);
+    --psp-code-editor--comment--color: var(--theme-fg2);
+    --psp-code-editor--column--color: var(--theme-lilac);
+
+    --psp-datagrid--pos-cell--color: var(--theme-white);
+    --psp-datagrid--neg-cell--color: var(--theme-rose);
+
+    --psp-charts--legend--color: var(--theme-fg1);
+    --psp-charts--treemap--labels: var(--theme-fg0);
+    --psp-charts--treemap--hover-highlight: var(--theme-fg0);
+    --psp-charts--tooltip--color: var(--theme-fg0);
+    --psp-charts--axis-ticks--color: var(--theme-fg1);
+    --psp-charts--axis-lines--color: var(--theme-bg3);
+    --psp-charts--gridline--color: var(--theme-bg2);
+    --psp-charts--tooltip--background: var(--theme-bg1);
+    --psp-charts--tooltip--border-color: var(--theme-bg3);
+    --psp-charts--legend--background: var(--psp--background-color);
+
+    --psp-charts--series--color: var(--theme-white);
+    --psp-charts--series-1--color: var(--theme-fg1);
+    --psp-charts--series-2--color: var(--theme-pink);
+    --psp-charts--series-3--color: var(--theme-gold);
+    --psp-charts--series-4--color: var(--theme-lilac);
+    --psp-charts--series-5--color: var(--theme-mint);
+    --psp-charts--series-6--color: var(--theme-rose);
+    --psp-charts--series-7--color: var(--theme-sky);
+    --psp-charts--series-8--color: var(--theme-peach);
+    --psp-charts--series-9--color: var(--theme-periwinkle);
+    --psp-charts--series-10--color: var(--theme-sage);
+    --psp-datagrid--series-1--color: var(--theme-fg1);
+    --psp-datagrid--series-2--color: var(--theme-pink);
+    --psp-datagrid--series-3--color: var(--theme-gold);
+    --psp-datagrid--series-4--color: var(--theme-lilac);
+    --psp-datagrid--series-5--color: var(--theme-mint);
+    --psp-datagrid--series-6--color: var(--theme-rose);
+    --psp-datagrid--series-7--color: var(--theme-sky);
+    --psp-datagrid--series-8--color: var(--theme-peach);
+    --psp-datagrid--series-9--color: var(--theme-periwinkle);
+    --psp-datagrid--series-10--color: var(--theme-sage);
+
+    --psp-charts--gradient--background: linear-gradient(
+        var(--theme-rose) 0%,
+        var(--theme-bg0) 50%,
+        var(--theme-white) 100%
+    );
+
+    --psp-openlayers--tile-url: "http://{a-c}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png";
+    --psp-openlayers--attribution--filter: invert(1) hue-rotate(180deg);
+    --psp-openlayers--element--background: var(--theme-bg1);
+    --psp-openlayers--category-1--color: var(--theme-fg1);
+    --psp-openlayers--category-2--color: var(--theme-pink);
+    --psp-openlayers--category-3--color: var(--theme-gold);
+    --psp-openlayers--category-4--color: var(--theme-lilac);
+    --psp-openlayers--category-5--color: var(--theme-mint);
+    --psp-openlayers--category-6--color: var(--theme-rose);
+    --psp-openlayers--category-7--color: var(--theme-sky);
+    --psp-openlayers--category-8--color: var(--theme-peach);
+    --psp-openlayers--category-9--color: var(--theme-periwinkle);
+    --psp-openlayers--category-10--color: var(--theme-sage);
+    --psp-openlayers--gradient--background: linear-gradient(
+        var(--theme-rose) 0%,
+        var(--theme-bg0) 50%,
+        var(--theme-white) 100%
+    );
+}

package/src/ts/column-format.ts

@@ -83,23 +83,67 @@ const DATE_LEGACY_DEFAULTS: Intl.DateTimeFormatOptions = {
     dateStyle: "short",
 };
 
+function mergeNumberOptions(
+    base: Intl.NumberFormatOptions,
+    cfg?: NumberFormatConfig,
+): Intl.NumberFormatOptions {
+    const explicit: Record<string, unknown> = {};
+    for (const [k, v] of Object.entries(cfg ?? {})) {
+        if (v !== undefined && v !== null) {
+            explicit[k] = v;
+        }
+    }
+
+    const merged: Record<string, unknown> = { ...base };
+    if (
+        "minimumFractionDigits" in explicit ||
+        "maximumFractionDigits" in explicit
+    ) {
+        delete merged.minimumFractionDigits;
+        delete merged.maximumFractionDigits;
+    }
+
+    if (
+        "minimumSignificantDigits" in explicit ||
+        "maximumSignificantDigits" in explicit
+    ) {
+        delete merged.minimumSignificantDigits;
+        delete merged.maximumSignificantDigits;
+    }
+
+    return Object.assign(merged, explicit) as Intl.NumberFormatOptions;
+}
+
+/**
+ * `defaults` is the calling plugin's declared default format, filling in
+ * the fields `cfg` leaves unset.
+ */
 export function createNumberFormatter(
     type: string,
     cfg?: NumberFormatConfig,
+    defaults?: NumberFormatConfig,
 ): Intl.NumberFormat {
     // ts-rs renders serde-absent keys as `T | null`; the wire never
     // carries an explicit `null` (`skip_serializing_if`), and
     // `Intl.NumberFormat` treats both absent and `undefined` the same, so
     // the cast is presentation-only.
-    const opts = (cfg ??
+    const base = ((defaults as Intl.NumberFormatOptions | undefined) ??
         NUMERIC_LEGACY_DEFAULTS[type] ??
         {}) as Intl.NumberFormatOptions;
+
+    const opts = cfg ? mergeNumberOptions(base, cfg) : base;
     return new Intl.NumberFormat(navigator.languages as string[], opts);
 }
 
+/**
+ * `defaults` is the calling plugin's declared default `date_format`,
+ * applied only when `cfg` is wholly absent.
+ */
 export function createDatetimeFormatter(
     cfg?: DateFormatConfig,
+    defaults?: DateFormatConfig,
 ): Intl.DateTimeFormat {
+    cfg = cfg ?? defaults;
     if (!cfg || !("format" in cfg)) {
         const preset = simple_config(cfg);
         const opts: Intl.DateTimeFormatOptions = {
@@ -158,10 +202,16 @@ export function createDatetimeFormatter(
     return new Intl.DateTimeFormat(navigator.languages as string[], opts);
 }
 
+/**
+ * `defaults` follows the same contract as
+ * [`createDatetimeFormatter`]: the plugin's declared default
+ * `date_format`, applied only when `cfg` is wholly absent.
+ */
 export function createDateFormatter(
     cfg?: DateFormatConfig,
+    defaults?: DateFormatConfig,
 ): Intl.DateTimeFormat {
-    const preset = simple_config(cfg);
+    const preset = simple_config(cfg ?? defaults);
     const opts: Intl.DateTimeFormatOptions = {
         timeZone: "utc",
         dateStyle:

package/src/ts/extensions.ts

@@ -52,25 +52,12 @@ export class PerspectiveSelectDetail {
     }
 }
 
-import type {
-    ExportDropDownMenuElement,
-    CopyDropDownMenuElement,
-} from "../../dist/wasm/perspective-viewer.d.ts";
-
 // DOM extensions
 
 export type HTMLPerspectiveViewerElement = PerspectiveViewerElement &
     PerspectiveViewerElementExt &
     HTMLElement;
 
-export interface HTMLPerspectiveViewerExportMenuElement
-    extends HTMLElement,
-        ExportDropDownMenuElement {}
-
-export interface HTMLPerspectiveViewerCopyMenuElement
-    extends HTMLElement,
-        CopyDropDownMenuElement {}
-
 export type PerspectiveClickEventDetail = {
     config: ViewerConfigUpdate;
     row: Record<string, any>;

package/src/ts/ts-rs/ViewOnUpdateResp.ts

@@ -1,3 +1,3 @@
 // This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
 
-export type ViewOnUpdateResp = { delta: Array<number>, port_id: number, };
+export type ViewOnUpdateResp = { delta: Uint8Array | undefined, port_id: number, };

package/src/css/plugin-settings-panel.css

@@ -1,99 +0,0 @@
-/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
- * ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
- * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
- * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
- * ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
- * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
- * ┃ 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). ┃
- * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
- */
-
-:host {
-    label#edit_mode-label:before {
-        content: var(--psp-label--edit-mode--content);
-    }
-
-    label#scroll_lock-label:before {
-        content: var(--psp-label--scroll-lock--content);
-    }
-
-    label#chart_type-label:before {
-        content: var(--psp-label--chart-type--content);
-    }
-
-    /* viewer-charts plugin_config controls */
-    label#auto_alt_y_axis-label:before {
-        content: var(--psp-label--auto-alt-y-axis--content);
-    }
-
-    label#facet_mode-label:before {
-        content: var(--psp-label--facet-mode--content);
-    }
-
-    label#facet_zoom_mode-label:before {
-        content: var(--psp-label--facet-zoom-mode--content);
-    }
-
-    label#series_zoom_mode-label:before {
-        content: var(--psp-label--series-zoom-mode--content);
-    }
-
-    label#line_width_px-label:before {
-        content: var(--psp-label--line-width-px--content);
-    }
-
-    label#point_size_px-label:before {
-        content: var(--psp-label--point-size-px--content);
-    }
-
-    label#band_inner_frac-label:before {
-        content: var(--psp-label--band-inner-frac--content);
-    }
-
-    label#bar_inner_pad-label:before {
-        content: var(--psp-label--bar-inner-pad--content);
-    }
-
-    label#wick_width_px-label:before {
-        content: var(--psp-label--wick-width-px--content);
-    }
-
-    label#ohlc_line_width_px-label:before {
-        content: var(--psp-label--ohlc-line-width-px--content);
-    }
-
-    label#include_zero-label:before {
-        content: var(--psp-label--include-zero--content);
-    }
-
-    label#domain_mode-label:before {
-        content: var(--psp-label--domain-mode--content);
-    }
-
-    label#gradient_color_mode-label:before {
-        content: var(--psp-label--gradient-color-mode--content);
-    }
-
-    label#gradient_radius_px-label:before {
-        content: var(--psp-label--gradient-radius-px--content);
-    }
-
-    label#gradient_intensity-label:before {
-        content: var(--psp-label--gradient-intensity--content);
-    }
-
-    label#gradient_heat_max-label:before {
-        content: var(--psp-label--gradient-heat-max--content);
-    }
-
-    label#map_tile_provider-label:before {
-        content: var(--psp-label--map-tile-provider--content);
-    }
-
-    label#map_tile_alpha-label:before {
-        content: var(--psp-label--map-tile-alpha--content);
-    }
-}

package/src/rust/components/modal.rs

@@ -1,177 +0,0 @@
-// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
-// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
-// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
-// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
-// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
-// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
-// ┃ 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::marker::PhantomData;
-use std::rc::Rc;
-
-use derivative::Derivative;
-use yew::html::*;
-use yew::prelude::*;
-use yew::virtual_dom::VChild;
-
-use crate::utils::WeakScope;
-
-#[derive(Properties, Derivative)]
-#[derivative(PartialEq(bound = ""))]
-pub struct ModalProps<T>
-where
-    T: Component,
-    T::Properties: ModalLink<T>,
-{
-    pub child: Option<VChild<T>>,
-}
-
-#[derive(Debug)]
-pub enum ModalMsg<T>
-where
-    T: Component,
-{
-    SetPos {
-        top: f64,
-        left: f64,
-        visible: bool,
-        rev_vert: bool,
-    },
-    SubMsg(T::Message),
-}
-
-#[derive(Default)]
-pub struct Modal<T> {
-    css: String,
-    rev_vert: ModalOrientation,
-    _comp: PhantomData<T>,
-}
-
-impl<T> Component for Modal<T>
-where
-    T: Component,
-    T::Properties: ModalLink<T>,
-{
-    type Message = ModalMsg<T>;
-    type Properties = ModalProps<T>;
-
-    fn create(_ctx: &Context<Self>) -> Self {
-        Self {
-            css: ":host{{top:0px;left:0px;opacity:0}}".to_owned(),
-            rev_vert: Default::default(),
-            _comp: PhantomData,
-        }
-    }
-
-    fn update(&mut self, ctx: &Context<Self>, msg: ModalMsg<T>) -> bool {
-        match msg {
-            ModalMsg::SetPos {
-                top,
-                left,
-                visible,
-                rev_vert,
-            } => {
-                let opacity = if visible { "" } else { ";opacity:0" };
-                self.css = format!(":host{{top:{top}px;left:{left}px{opacity}}}");
-                self.rev_vert.set(rev_vert);
-                true
-            },
-            ModalMsg::SubMsg(msg) => {
-                if let Some(child) = &ctx.props().child
-                    && let Some(link) = child.props.weak_link().borrow().as_ref()
-                {
-                    link.send_message(msg);
-                }
-
-                false
-            },
-        }
-    }
-
-    fn view(&self, ctx: &Context<Self>) -> Html {
-        let child = ctx
-            .props()
-            .child
-            .clone()
-            .map(Html::from)
-            .unwrap_or_default();
-
-        html! {
-            <>
-                <style>{ self.css.to_owned() }</style>
-                <ContextProvider<ModalOrientation> context={&self.rev_vert}>
-                    <NoRender>{ child }</NoRender>
-                </ContextProvider<ModalOrientation>>
-            </>
-        }
-    }
-}
-
-#[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()
-    }
-}
-
-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());
-    }
-}
-
-#[derive(Properties, Clone)]
-struct NoRenderProps {
-    pub children: Children,
-}
-
-impl PartialEq for NoRenderProps {
-    fn eq(&self, _other: &Self) -> bool {
-        true
-    }
-}
-
-struct NoRender {}
-
-impl Component for NoRender {
-    type Message = ();
-    type Properties = NoRenderProps;
-
-    fn create(_ctx: &Context<Self>) -> Self {
-        Self {}
-    }
-
-    fn view(&self, ctx: &Context<Self>) -> Html {
-        html! { { ctx.props().children.iter().collect::<Html>() } }
-    }
-}