@perspective-dev/viewer 5.2.0 → 5.3.1

package/dist/wasm/perspective-viewer.wasm.d.ts

@@ -46,6 +46,7 @@ export const perspectiveviewerelement_getPlugin: (a: number, b: number, c: numbe
 export const perspectiveviewerelement_getRenderStats: (a: number, b: number, c: number) => void;
 export const perspectiveviewerelement_getSelection: (a: number, b: number, c: number) => void;
 export const perspectiveviewerelement_getTable: (a: number, b: number) => number;
+export const perspectiveviewerelement_getThemes: (a: number) => number;
 export const perspectiveviewerelement_getView: (a: number, b: number) => number;
 export const perspectiveviewerelement_getViewConfig: (a: number, b: number) => number;
 export const perspectiveviewerelement_load: (a: number, b: number, c: number) => void;
@@ -59,7 +60,7 @@ export const perspectiveviewerelement_restore: (a: number, b: number, c: number)
 export const perspectiveviewerelement_restoreWorkspace: (a: number, b: number) => number;
 export const perspectiveviewerelement_restyleElement: (a: number) => number;
 export const perspectiveviewerelement_save: (a: number, b: number) => number;
-export const perspectiveviewerelement_saveWorkspace: (a: number) => number;
+export const perspectiveviewerelement_saveWorkspace: (a: number, b: number) => number;
 export const perspectiveviewerelement_setActivePanel: (a: number, b: number, c: number) => number;
 export const perspectiveviewerelement_setAutoPause: (a: number, b: number) => number;
 export const perspectiveviewerelement_setAutoSize: (a: number, b: number) => void;
@@ -99,7 +100,7 @@ export const client_table: (a: number, b: number, c: number) => number;
 export const client_terminate: (a: number, b: number) => void;
 export const genericsqlvirtualservermodel_getHostedTables: (a: number, b: number) => void;
 export const genericsqlvirtualservermodel_new: (a: number, b: number) => void;
-export const genericsqlvirtualservermodel_tableMakeView: (a: number, b: number, c: number, d: number, e: number, f: number, g: number) => void;
+export const genericsqlvirtualservermodel_tableMakeView: (a: number, b: number, c: number, d: number, e: number, f: number, g: number, h: number) => void;
 export const genericsqlvirtualservermodel_tableSchema: (a: number, b: number, c: number, d: number) => void;
 export const genericsqlvirtualservermodel_tableSize: (a: number, b: number, c: number, d: number) => void;
 export const genericsqlvirtualservermodel_tableValidateExpression: (a: number, b: number, c: number, d: number, e: number, f: number) => void;
@@ -166,21 +167,22 @@ export const virtualdataslice_setIntegerCol: (a: number, b: number, c: number, d
 export const virtualdataslice_setStringCol: (a: number, b: number, c: number, d: number, e: number, f: number, g: number) => void;
 export const virtualserver_handleRequest: (a: number, b: number, c: number) => number;
 export const virtualserver_new: (a: number, b: number) => void;
-export const __wasm_bindgen_func_elem_17003: (a: number, b: number) => void;
-export const __wasm_bindgen_func_elem_17713: (a: number, b: number) => void;
-export const __wasm_bindgen_func_elem_18571: (a: number, b: number) => void;
-export const __wasm_bindgen_func_elem_3989: (a: number, b: number) => void;
-export const __wasm_bindgen_func_elem_23208: (a: number, b: number) => void;
-export const __wasm_bindgen_func_elem_31328: (a: number, b: number, c: number, d: number) => void;
-export const __wasm_bindgen_func_elem_17122: (a: number, b: number, c: number) => void;
-export const __wasm_bindgen_func_elem_17718: (a: number, b: number, c: number) => void;
-export const __wasm_bindgen_func_elem_6981: (a: number, b: number, c: number) => void;
-export const __wasm_bindgen_func_elem_6982: (a: number, b: number, c: number) => void;
-export const __wasm_bindgen_func_elem_6983: (a: number, b: number, c: number) => void;
-export const __wasm_bindgen_func_elem_6979: (a: number, b: number, c: number) => void;
-export const __wasm_bindgen_func_elem_23225: (a: number, b: number, c: number) => void;
-export const __wasm_bindgen_func_elem_19569: (a: number, b: number) => number;
-export const __wasm_bindgen_func_elem_17717: (a: number, b: number) => void;
+export const __wasm_bindgen_func_elem_18416: (a: number, b: number) => void;
+export const __wasm_bindgen_func_elem_19123: (a: number, b: number) => void;
+export const __wasm_bindgen_func_elem_20026: (a: number, b: number) => void;
+export const __wasm_bindgen_func_elem_4350: (a: number, b: number) => void;
+export const __wasm_bindgen_func_elem_24703: (a: number, b: number) => void;
+export const __wasm_bindgen_func_elem_32844: (a: number, b: number, c: number, d: number) => void;
+export const __wasm_bindgen_func_elem_18535: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_19128: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_7657: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_7658: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_7659: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_7655: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_24720: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_21027: (a: number, b: number) => number;
+export const __wasm_bindgen_func_elem_19127: (a: number, b: number) => void;
+export const __wasm_bindgen_func_elem_21028: (a: number, b: number) => void;
 export const __wbindgen_export: (a: number, b: number) => number;
 export const __wbindgen_export2: (a: number, b: number, c: number, d: number) => number;
 export const __wbindgen_export3: (a: number) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perspective-dev/viewer",
-  "version": "5.2.0",
+  "version": "5.3.1",
   "description": "The `<perspective-viewer>` Custom Element, frontend for Perspective",
   "keywords": [
     "perspective",

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

@@ -150,15 +150,15 @@
         content: var(--psp-label--number-fg-mode--content, "Foreground");
     }
 
-    label#pos_fg_color-label:before {
+    label#fg_colors-label:before {
         content: var(--psp-label--number-fg-mode--content, "Foreground");
     }
 
     label#number_bg_mode-label:before {
-        content: var(--psp-label--number-fg-mode--content, "Background");
+        content: var(--psp-label--number-bg-mode--content, "Background");
     }
 
-    label#pos_bg_color-label:before {
+    label#bg_colors-label:before {
         content: var(--psp-label--pos-bg-color--content, "Background");
     }
 
@@ -187,8 +187,12 @@
         content: var(--psp-label--series--content, "Series");
     }
 
-    label#color-range-label:before {
-        content: var(--psp-label--color-range--content, "Color Range");
+    label#palette-label:before {
+        content: var(--psp-label--palette--content, "Palette");
+    }
+
+    label#gradient-label:before {
+        content: var(--psp-label--gradient--content, "Gradient");
     }
 
     label#style-label:before {
@@ -213,6 +217,10 @@
         content: var(--psp-label--notation--content, "Notation");
     }
 
+    label#compact-display-label:before {
+        content: var(--psp-label--compact-display--content, "Compact Display");
+    }
+
     label#use-grouping-label:before {
         content: var(--psp-label--use-grouping--content, "Use Grouping");
     }
@@ -233,6 +241,21 @@
         content: var(--psp-label--bg-gradient--content, "Max Value");
     }
 
+    label#color-group-label:before {
+        content: var(--psp-label--group-color--content, "Color");
+    }
+
+    label#format-group-label:before {
+        content: var(--psp-label--group-format--content, "Format");
+    }
+
+    label#column_size_override-label:before {
+        content: var(
+            --psp-label--column-size-override--content,
+            "Column Width"
+        );
+    }
+
     label#rounding-priority-label:before {
         content: var(
             --psp-label--rounding-priority--content,

package/src/css/column-style.css

@@ -17,6 +17,8 @@
     #window-editor-container {
         outline: none;
         user-select: none;
+        margin-right: -6px;
+        padding-right: 6px;
 
         .bool-field-desc {
             font-size: 10px;
@@ -216,39 +218,309 @@
             padding: 0px 0;
         }
 
+        details.control-group {
+            margin: 0 -8px 0 -8px;
+            padding: 0 8px 0 8px;
+
+            &:not([open]):hover {
+                color: var(--psp--background-color);
+                background-color: var(--psp--color);
+                border-color: var(--psp--color) !important;
+            }
+
+            &[open] summary:hover {
+                color: var(--psp--color);
+            }
+
+            &:not(:first-child) {
+                border-top: 1px solid var(--psp-inactive--color);
+            }
+
+            &:last-of-type {
+                border-bottom: 1px solid var(--psp-inactive--color);
+            }
+
+            &:first-child {
+                margin-top: -12px;
+            }
+
+            > summary {
+                display: flex;
+                align-items: center;
+                cursor: pointer;
+                list-style: none;
+                margin: 0;
+                padding-right: 6px;
+                outline: none;
+
+                &::-webkit-details-marker {
+                    display: none;
+                }
+
+                > span.control-group-chevron {
+                    flex: 0 0 8px;
+                    height: 4px;
+                    background-color: currentColor;
+                    mask-image: var(--psp-icon--select-arrow--mask-image);
+                    -webkit-mask-image: var(
+                        --psp-icon--select-arrow--mask-image
+                    );
+                    -webkit-mask-repeat: no-repeat;
+                    mask-repeat: no-repeat;
+                    mask-size: cover;
+                    -webkit-mask-position: center;
+                    mask-position: center;
+                    transform: rotate(-90deg);
+                    margin-right: 2px;
+                }
+
+                label {
+                    padding-top: 8px;
+                    padding-bottom: 8px;
+                    pointer-events: none;
+                    flex: 1 1 auto;
+                    width: auto;
+                    margin: 0 0 0 6px;
+                }
+            }
+
+            &[open] > summary label {
+                padding-bottom: 8px;
+            }
+
+            &[open] > summary {
+                color: var(--psp-inactive--color);
+                margin-bottom: 2px;
+            }
+
+            &[open] > summary > span.control-group-chevron {
+                transform: none;
+            }
+        }
+
         .color-gradient-container {
             display: flex;
             align-items: center;
             flex-wrap: nowrap;
             flex: 1 1 100%;
-            .color-thermometer {
+        }
+
+        .palette-selector {
+            .palette-swatches {
+                display: flex;
+                flex-wrap: wrap;
+                align-items: center;
+                gap: 4px;
                 flex: 1 1 auto;
+                width: 0px;
+                max-height: 84px;
+                overflow-y: auto;
+                overflow-x: hidden;
+                padding: 0px 0 4px 0;
+            }
+
+            .palette-swatch {
+                position: relative;
+                width: 24px;
                 height: 24px;
+                touch-action: none;
+
+                input[type="color"] {
+                    width: 24px;
+                    height: 24px;
+                    border-radius: 3px;
+                }
+
+                &.dragging {
+                    opacity: 0.5;
+                    outline: 1px dashed var(--psp--color);
+                    outline-offset: -1px;
+                    border-radius: 3px;
+                }
+
+                .palette-swatch-remove {
+                    position: absolute;
+                    top: -2px;
+                    right: -7px;
+                    width: 14px;
+                    height: 14px;
+                    cursor: pointer;
+                    display: none;
+                    background-color: var(--psp--color);
+                    -webkit-mask-size: cover;
+                    mask-size: cover;
+                    -webkit-mask-image: var(--psp-icon--close--mask-image);
+                    mask-image: var(--psp-icon--close--mask-image);
+                }
+
+                &:hover .palette-swatch-remove {
+                    display: inline-block;
+                }
+            }
+
+            .palette-swatches.reordering .palette-swatch-remove {
+                display: none;
+            }
+
+            .palette-add {
+                width: 22px;
+                height: 22px;
+                border: 1px dashed var(--psp-inactive--color);
+                border-radius: 3px;
+                cursor: pointer;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+
+                &:before {
+                    content: "+";
+                    font-size: 14px;
+                    line-height: 1;
+                    color: var(--psp-inactive--color);
+                }
+
+                &:hover {
+                    border-color: var(--psp--color);
+
+                    &:before {
+                        color: var(--psp--color);
+                    }
+                }
             }
         }
 
-        .color-selector {
-            display: grid;
+        .gradient-stops-selector {
+            padding: 12px 0 16px 0;
+
+            .gradient-stops-bar {
+                cursor: copy;
+                position: relative;
+                flex: 1 1 auto;
+                height: 24px;
+                border-radius: 2px;
+            }
 
-            input {
-                grid-column: 1;
-                grid-row: 1;
+            .gradient-stops-bar.discrete {
+                cursor: auto;
+                position: relative;
+                flex: 1 1 auto;
+                height: 24px;
+                border-radius: 2px;
             }
-            .color-label {
+
+            .gradient-stop-handle {
+                position: absolute;
+                top: 0;
+                transform: translateX(-50%);
                 display: flex;
-                justify-content: center;
+                flex-direction: column;
                 align-items: center;
-                font-size: 14px;
-                grid-column: 1;
-                grid-row: 1;
-                margin: 0;
-                font-family: var(--psp-button--font-family, inherit);
-                color: var(--sign--color, white);
-                width: 36px;
+                width: 14px;
+            }
+
+            .gradient-stop-grip {
+                width: 14px;
                 height: 24px;
-                text-align: center;
-                z-index: 1;
-                pointer-events: none;
+                cursor: ew-resize;
+                touch-action: none;
+
+                &.disabled {
+                    cursor: default;
+                }
+
+                &:before {
+                    content: "";
+                    display: block;
+                    width: 0px;
+                    height: 100%;
+                    margin: 0 auto;
+                    border: 1px solid var(--psp--background-color, #fff);
+                }
+            }
+
+            .gradient-stop-remove {
+                position: absolute;
+                top: -14px;
+                width: 14px;
+                height: 13px;
+                cursor: pointer;
+                display: inline-block;
+                background-color: var(--psp--color);
+                -webkit-mask-size: cover;
+                mask-size: cover;
+                -webkit-mask-image: var(--psp-icon--close--mask-image);
+                mask-image: var(--psp-icon--close--mask-image);
+
+                &.disabled {
+                    cursor: default;
+                    background-color: var(--psp-inactive--color);
+                }
+            }
+
+            .gradient-stop-lock {
+                position: absolute;
+                top: -14px;
+                width: 14px;
+                height: 13px;
+                display: inline-block;
+                background-color: var(--psp--color);
+                -webkit-mask-size: cover;
+                mask-size: cover;
+                -webkit-mask-image: var(--psp-icon--lock--mask-image);
+                mask-image: var(--psp-icon--lock--mask-image);
+            }
+
+            .gradient-stop-handle input[type="color"] {
+                width: 14px;
+                height: 14px;
+                margin-top: 2px;
+                border-radius: 3px;
+            }
+        }
+
+        .named-value-controls {
+            display: flex;
+            justify-content: flex-end;
+            align-items: center;
+            gap: 10px;
+            flex: 1 1 100%;
+            height: 0;
+            margin-top: 10px;
+            margin-bottom: -10px;
+            margin-right: 24px;
+            position: relative;
+            z-index: 1;
+            font-size: var(--label--font-size, 0.75em);
+            color: var(--psp-inactive--color);
+
+            select.named-value-select {
+                height: 15px;
+                padding: 0;
+                font-size: var(--label--font-size, 0.75em);
+                color: inherit;
+                background: none;
+                border: none;
+                cursor: pointer;
+
+                &:hover {
+                    color: var(--psp--color, inherit);
+                }
+            }
+
+            .named-value-pin {
+                cursor: pointer;
+                user-select: none;
+                line-height: 15px;
+
+                &:before {
+                    font-family: var(--psp-button--font-family, inherit);
+                    color: var(--psp-inactive--color, #666);
+                    content: var(--psp-label--pin-button--content, "Save");
+                }
+
+                &:hover:before {
+                    color: var(--psp--color, inherit);
+                }
             }
         }
 
@@ -259,23 +531,11 @@
             padding: 0;
             font-family: inherit;
             overflow: hidden;
-            border-radius: 12px;
+            border-radius: 3px;
 
             &:hover {
                 opacity: 0.8;
             }
-
-            &.pos-color-param {
-                width: 36px;
-                border-radius: 12px 0 0 12px;
-                margin: 0 1px 0 0;
-            }
-
-            &.neg-color-param {
-                width: 36px;
-                border-radius: 0 12px 12px 0;
-                margin: 0 0 0 1px;
-            }
         }
 
         ::-webkit-color-swatch-wrapper {

package/src/css/containers/tabs.css

@@ -13,13 +13,23 @@
 
 :host {
     #format-tab {
-        overflow: scroll;
+        overflow: auto;
+        scrollbar-gutter: stable;
+    }
+
+    #style-tab {
+        margin-right: -6px;
+        #column-style-container {
+            margin-right: 6px;
+        }
     }
 
     #plugin-tab {
         overflow-x: hidden;
-        overflow-y: scroll;
-        padding: 12px 0 0 0;
+        overflow-y: auto;
+        scrollbar-gutter: stable;
+        padding: 12px 0 0 8px;
+        margin-left: -8px;
     }
 
     .tab-content {

package/src/css/dom/select.css

@@ -16,12 +16,13 @@
         position: relative;
         flex: 1 1 auto;
         height: 100%;
+        font-size: 12px;
 
         &:after {
             content: attr(data-value) " ";
             visibility: hidden;
             white-space: nowrap;
-            padding-right: 17px;
+            padding-right: 20px;
         }
 
         select {
@@ -32,6 +33,25 @@
             bottom: 0px;
             cursor: pointer;
         }
+
+        .select-arrow {
+            position: absolute;
+            pointer-events: none;
+            top: 50%;
+            right: 6px;
+            width: 6px;
+            height: 4px;
+            transform: translateY(-50%);
+            background-color: currentColor;
+            -webkit-mask-image: var(--psp-icon--select-arrow--mask-image);
+            mask-image: var(--psp-icon--select-arrow--mask-image);
+            -webkit-mask-repeat: no-repeat;
+            mask-repeat: no-repeat;
+            -webkit-mask-position: center;
+            mask-position: center;
+            -webkit-mask-size: contain;
+            mask-size: contain;
+        }
     }
 
     select {
@@ -45,14 +65,6 @@
         /* font-size: 10px; */
         font-family: inherit;
         background-color: transparent;
-        background-image: var(--psp-icon--select-arrow--mask-image);
-        background-position: right 2px center;
-        background-repeat: no-repeat;
-
-        &.invert:focus-within,
-        &.invert:hover {
-            background-image: var(--psp-icon--select-arrow-hover--mask-image);
-        }
 
         option {
             color: var(--psp--color, inherit);

package/src/css/form/code-editor.css

@@ -12,6 +12,10 @@
  */
 
 :host {
+    #editor.contained {
+        contain: inline-size;
+    }
+
     #editor {
         display: flex;
         flex: 1 1 auto;
@@ -65,10 +69,6 @@
             white-space: pre;
             overflow: hidden;
 
-            span {
-                /* display: contents; */
-            }
-
             .comment {
                 color: var(--psp-code-editor--comment--color, orange);
             }

package/src/css/plugin-selector.css

@@ -43,6 +43,7 @@
 
             .plugin-selector-options {
                 overflow-y: auto;
+                height: 100%;
             }
 
             &.open {

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

@@ -96,4 +96,76 @@
     label#map_tile_alpha-label:before {
         content: var(--psp-label--map-tile-alpha--content);
     }
+
+    label#numeric_axes-label:before {
+        content: var(--psp-label--numeric-axes--content);
+    }
+
+    label#legend_mode-label:before {
+        content: var(--psp-label--legend-mode--content);
+    }
+
+    label#legend_size_mode-label:before {
+        content: var(--psp-label--legend-size-mode--content);
+    }
+
+    label#legend_width_px-label:before {
+        content: var(--psp-label--legend-width-px--content);
+    }
+
+    label#legend_height_px-label:before {
+        content: var(--psp-label--legend-height-px--content);
+    }
+
+    label#legend_anchor-label:before {
+        content: var(--psp-label--legend-anchor--content);
+    }
+
+    label#legend_x-label:before {
+        content: var(--psp-label--legend-x--content);
+    }
+
+    label#legend_y-label:before {
+        content: var(--psp-label--legend-y--content);
+    }
+
+    label#legend_opacity-label:before {
+        content: var(--psp-label--legend-opacity--content);
+    }
+
+    label#tooltip_max_column_px-label:before {
+        content: var(--psp-label--tooltip-max-column-px--content);
+    }
+
+    label#tooltip_opacity-label:before {
+        content: var(--psp-label--tooltip-opacity--content);
+    }
+
+    label#axes-group-label:before {
+        content: var(--psp-label--group-axes--content, "Axes");
+    }
+
+    label#facets-group-label:before {
+        content: var(--psp-label--group-facets--content, "Facets");
+    }
+
+    label#glyph-group-label:before {
+        content: var(--psp-label--group-glyph--content, "Glyphs");
+    }
+
+    label#density-group-label:before {
+        content: var(--psp-label--group-density--content, "Density");
+    }
+
+    label#basemap-group-label:before {
+        content: var(--psp-label--group-basemap--content, "Basemap");
+    }
+
+    label#legend-group-label:before {
+        content: var(--psp-label--group-legend--content, "Legend");
+    }
+
+    label#tooltip-group-label:before {
+        content: var(--psp-label--group-tooltip--content, "Tooltips");
+    }
 }