@perspective-dev/viewer-datagrid 4.0.1 → 4.1.0

package/src/less/row-hover.less

@@ -0,0 +1,88 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+regular-table {
+    tbody {
+        tr:hover
+            th.psp-tree-leaf:not(.psp-row-selected):not(.psp-row-subselected),
+        tr:hover
+            th.psp-tree-label:not(.psp-row-selected):not(.psp-row-subselected),
+        tr:hover td:not(.psp-row-selected):not(.psp-row-subselected),
+        tr:hover:after {
+            border-color: var(--rt-hover--border-color, #c5c9d080) !important;
+            box-shadow: 0px 1px 0px var(--rt-hover--border-color, #c5c9d080);
+
+            &.psp-menu-open {
+                box-shadow:
+                    inset -2px 0px 0px var(--icon--color),
+                    inset 2px 0px 0px var(--icon--color),
+                    0px 1px 0px var(--rt-hover--border-color, #c5c9d080);
+            }
+        }
+
+        tr:last-child:hover
+            td:not(.psp-row-selected):not(.psp-row-subselected).psp-menu-open {
+            box-shadow:
+                inset -2px 0px 0px var(--icon--color),
+                inset 2px 0px 0px var(--icon--color),
+                inset 0px -2px 0px var(--icon--color),
+                0px 1px 0px var(--rt-hover--border-color, #c5c9d080);
+        }
+
+        tr:hover
+            + tr
+            th.psp-tree-leaf:not(.psp-row-selected):not(.psp-row-subselected),
+        tr:hover
+            + tr
+            th.psp-tree-label:not(.psp-row-selected):not(.psp-row-subselected),
+        tr:hover + tr td:not(.psp-row-selected):not(.psp-row-subselected) {
+            border-top-color: transparent;
+        }
+
+        tr {
+            th:first-child:not(:empty),
+            th:first-child:empty + th:not(:empty),
+            th:first-child:empty ~ th:empty + th:not(:empty),
+            td:first-child {
+                border-left-width: 1px;
+                border-left-color: transparent;
+            }
+
+            th:last-child,
+            td:last-child {
+                border-right-width: 0px;
+                border-right-color: transparent;
+            }
+        }
+
+        tr:hover {
+            color: inherit;
+            th:first-child:not(:empty),
+            th:first-child:empty + th:not(:empty),
+            th:first-child:empty ~ th:empty + th:not(:empty),
+            td:first-child {
+                border-left-color: var(
+                    --rt-hover--border-color,
+                    #c5c9d080
+                ) !important;
+            }
+
+            th:last-child,
+            td:last-child {
+                border-right-color: var(
+                    --rt-hover--border-color,
+                    #c5c9d080
+                ) !important;
+            }
+        }
+    }
+}

package/{index.d.ts → src/less/scrollbar.less}

@@ -10,26 +10,25 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-import type { IPerspectiveViewerPlugin } from "@perspective-dev/viewer";
+// Scrollbar styling
+regular-table {
+    outline: none;
 
-declare global {
-    interface CustomElementRegistry {
-        get(
-            tagName: "perspective-viewer-datagrid",
-        ): typeof HTMLPerspectiveViewerDatagridPluginElement;
-
-        // TODO is this needed?
-        whenDefined(tagName: "perspective-viewer-datagrid"): Promise<void>;
+    // webkit (chrome, safari, etc) scrollbar styling
+    &::-webkit-scrollbar,
+    &::-webkit-scrollbar-corner {
+        background-color: transparent;
+        height: 12px;
+        width: 12px;
     }
-}
 
-interface HTMLPerspectiveViewerDatagridPluginElement
-    extends IPerspectiveViewerPlugin {}
-
-export declare class HTMLPerspectiveViewerDatagridPluginElement
-    extends HTMLElement
-    implements IPerspectiveViewerPlugin
-{
-    // Controls whether datagrid renders its children into a shadow DOM tree
-    public static renderTarget: "shadow" | "light";
+    &::-webkit-scrollbar-thumb {
+        background-clip: content-box;
+        background: var(--icon--color);
+        border: 5.5px solid var(--plugin--background);
+        max-height: 50%;
+        max-width: 50%;
+        min-width: 10%;
+        min-height: 10%;
+    }
 }

package/src/less/sub-cell-scroll.less

@@ -0,0 +1,82 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+// Handles sub-cell scrolling via CSS transform offset by variables set during
+// rendering.
+perspective-viewer-datagrid:not(.sub-cell-scroll-disabled) regular-table table,
+:host(:not(.sub-cell-scroll-disabled)) regular-table table {
+    tbody td,
+    thead th:not(.rt-group-corner) {
+        transform: translate(var(--regular-table--transform-x, 0px));
+    }
+
+    tbody {
+        transform: translate(0, var(--regular-table--transform-y, 0px));
+    }
+
+    tbody tr:first-child {
+        td,
+        th,
+        &:after {
+            clip-path: polygon(
+                0 var(--regular-table--clip-y, 0),
+                0 200%,
+                200% 200%,
+                200% var(--regular-table--clip-y, 0)
+            );
+        }
+    }
+
+    tbody tr td:first-of-type {
+        clip-path: polygon(
+            var(--regular-table--clip-x, 0) 0,
+            var(--regular-table--clip-x, 0) 200%,
+            200% 200%,
+            200% 0
+        );
+    }
+
+    tbody tr:first-child td:first-of-type {
+        clip-path: polygon(
+            var(--regular-table--clip-x, 0) var(--regular-table--clip-y, 0),
+            var(--regular-table--clip-x, 0) 200%,
+            200% 200%,
+            200% var(--regular-table--clip-y, 0)
+        );
+    }
+
+    thead tr:last-child:after {
+        transform: translate(var(--regular-table--transform-x, 0px));
+    }
+
+    tbody tr:not(:first-child):after {
+        transform: translate(var(--regular-table--transform-x, 0px));
+    }
+
+    tbody tr:hover:first-child:after {
+        clip-path: polygon(
+            0 var(--regular-table--clip-y, 0),
+            0 200%,
+            200% 200%,
+            200% var(--regular-table--clip-y, 0)
+        );
+    }
+
+    thead tr th.rt-group-corner + th:not(.rt-group-corner) {
+        clip-path: polygon(
+            var(--regular-table--clip-x, 0) 0,
+            var(--regular-table--clip-x, 0) 200%,
+            200% 200%,
+            200% 0
+        );
+    }
+}

package/src/less/toolbar.less

@@ -0,0 +1,201 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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 {
+    position: relative;
+    display: block;
+    height: 100%;
+}
+
+:host #container {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    justify-content: stretch;
+    align-items: stretch;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
+:host #toolbar {
+    display: flex;
+    align-items: stretch;
+    height: 100%;
+}
+
+:host #toolbar .hover-target {
+    margin: 0;
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+
+    &:hover {
+        box-shadow:
+            -4px 0 0 var(--icon--color),
+            4px 0 0 var(--icon--color);
+        background-color: var(--icon--color);
+    }
+}
+
+:host #slot-container {
+    flex: 1;
+    position: relative;
+}
+
+#scroll_lock.lock-scroll:before {
+    -webkit-mask-image: var(--toolbar-scroll-lock-active--content);
+}
+
+#scroll_lock:before {
+    -webkit-mask-image: var(--toolbar-scroll-lock--content);
+}
+
+#select_mode:before {
+    content: "highlight_alt";
+}
+
+#edit_mode:before {
+    -webkit-mask-image: "";
+}
+
+#edit_mode[data-edit-mode="READ_ONLY"]:before {
+    -webkit-mask-image: var(--toolbar-edit-mode--read-only--content);
+}
+
+#edit_mode[data-edit-mode="EDIT"]:before {
+    -webkit-mask-image: var(--toolbar-edit-mode--edit--content);
+}
+
+:host(.aggregated) #toolbar #edit_mode[data-edit-mode="EDIT"]:before {
+    -webkit-mask-image: var(--toolbar-edit-mode--read-only--content);
+}
+
+#edit_mode[data-edit-mode="SELECT_ROW"]:before {
+    -webkit-mask-image: var(--toolbar-edit-mode--select-row--content);
+}
+
+#edit_mode[data-edit-mode="SELECT_COLUMN"]:before {
+    -webkit-mask-image: var(--toolbar-edit-mode--select-column--content);
+}
+
+#edit_mode[data-edit-mode="SELECT_REGION"]:before {
+    -webkit-mask-image: var(--toolbar-edit-mode--select-region--content);
+}
+
+// #edit_mode span:before {
+//     content: var(--edit-mode-toggle--content, "N/A");
+// }
+
+#edit_mode[data-edit-mode="READ_ONLY"] span:before {
+    content: var(--edit-mode--read-only--content, "Read Only");
+}
+
+#edit_mode[data-edit-mode="EDIT"] span:before {
+    content: var(--edit-mode--edit--content, "Editable");
+}
+
+#edit_mode[data-edit-mode="SELECT_ROW"] span:before {
+    content: var(--edit-mode--select-row--content, "Row Select");
+}
+
+#edit_mode[data-edit-mode="SELECT_COLUMN"] span:before {
+    content: var(--edit-mode--select-column--content, "Column Select");
+}
+
+#edit_mode[data-edit-mode="SELECT_REGION"] span:before {
+    content: var(--edit-mode--select-region--content, "Region Select");
+}
+
+#scroll_lock span:before {
+    content: var(--scroll-lock-toggle--content, "Free Scroll");
+}
+
+#scroll_lock.lock-scroll span:before {
+    content: var(--scroll-lock-alt-toggle--content, "Align Scroll");
+}
+
+// The icon.
+.button:before {
+    width: 21px;
+    height: 21px;
+    content: "";
+    -webkit-mask-size: cover;
+    mask-size: cover;
+    background-color: var(--icon--color);
+}
+
+.button.editable:before,
+.button.lock-scroll:before {
+    color: inherit;
+}
+
+.button {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    user-select: none;
+    padding: 0 5px;
+    border: 1px solid transparent;
+    border-radius: 3px;
+    border: 1px solid transparent;
+    box-sizing: border-box;
+    display: inline-flex;
+    font-size: var(--label--font-size, 0.75em);
+    height: 22px;
+    user-select: none;
+    white-space: nowrap;
+    width: 37px;
+}
+
+.button > span {
+    display: none;
+    margin: 0;
+    padding: 0;
+}
+
+.hover-target:focus-within .button,
+.hover-target:hover .button {
+    position: relative;
+    background-color: var(--icon--color);
+    color: var(--plugin--background);
+    opacity: 1;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+}
+
+.hover-target:focus-within .button:before,
+.hover-target:hover .button:before {
+    background-color: var(--plugin--background);
+}
+
+// The label.
+.hover-target:focus-within .button > span,
+.hover-target:hover .button > span {
+    display: block;
+    position: absolute;
+    top: calc(100% + 3px);
+    left: 50%;
+    translate: -50%;
+    margin: 0;
+    padding: 5px;
+    height: auto;
+    white-space: pre-wrap;
+    line-height: 1;
+    font-size: 9px;
+    background-color: var(--icon--color);
+    width: 35px;
+    text-align: center;
+    border-radius: 0 0 3px 3px;
+}

package/src/ts/color_utils.ts

@@ -0,0 +1,70 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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 chroma from "chroma-js";
+import type { ColorRecord } from "./types.js";
+
+export function blend(a: string, b: number[]): string {
+    return chroma.mix(a, `rgb(${b[0]},${b[1]},${b[2]})`, 0.5).hex();
+}
+
+// AFAICT `chroma-js` has no alpha-aware blending? So we need a function to get
+// the color of a heatmap cell over the background.
+export function rgbaToRgb(
+    [r, g, b, a]: [number, number, number, number],
+    source: [number, number, number] = [255, 255, 255],
+): [number, number, number] {
+    function f(i: number, c: number): number {
+        return ((1 - a) * (source[i] / 255) + a * (c / 255)) * 255;
+    }
+
+    return [f(0, r), f(1, g), f(2, b)];
+}
+
+// Chroma does this but why bother?
+export function infer_foreground_from_background([r, g, b]: [
+    number,
+    number,
+    number,
+]): string {
+    // TODO Implement dark/light themes.
+    return Math.sqrt(r * r * 0.299 + g * g * 0.587 + b * b * 0.114) > 130
+        ? "#161616"
+        : "#ffffff";
+}
+
+function make_gradient(chromahex: chroma.Color): string {
+    const [r, g, b] = chromahex.rgb();
+    const [r1, g1, b1] = chromahex
+        .set("hsl.h", (chromahex.get("hsl.h") - 15) % 360)
+        .rgb();
+    const [r2, g2, b2] = chromahex
+        .set("hsl.h", (chromahex.get("hsl.h") + 15) % 360)
+        .rgb();
+    return `linear-gradient(to right top,rgb(${r1},${g1},${b1}),rgb(${r},${g},${b}) 50%,rgb(${r2},${g2},${b2}))`;
+}
+
+export function make_color_record(color: string): ColorRecord {
+    const chroma_neg = chroma(color);
+    const _neg_grad = make_gradient(chroma_neg);
+    const rgb = chroma_neg.rgb();
+
+    return [
+        color,
+        rgb[0],
+        rgb[1],
+        rgb[2],
+        _neg_grad,
+        `rgba(${rgb[0]},${rgb[1]},${rgb[2]},1)`,
+        `rgba(${rgb[0]},${rgb[1]},${rgb[2]},0)`,
+    ];
+}