@mosaicajs/components 0.3.0 → 0.4.0

package/dist/colour-editor.js

@@ -37,8 +37,9 @@ import { property, state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { CLUSTER_PREFIX, PALETTES, artifactColour, colourLayers } from '@mosaicajs/client';
 import { CATEGORY_PALETTES } from '@mosaicajs/deck';
+import { levelOfLayer } from '@mosaicajs/client/internal';
 import { hexOf } from '@mosaicajs/deck/internal';
-import { HeldAggregate, artifactGroupings, isTree, levelOf, listedGroups, rankedGrouping } from './aggregate.js';
+import { HeldAggregate, artifactGroupings, isTree, listedGroups, rankedGrouping } from './aggregate.js';
 import { MosaicaElement, UNNAMED, columnCaption, countText, emit, idString, keyTitle } from './base.js';
 import { ColourPicker, pickerStyles } from './colour-picker.js';
 import { clusterColour, colouringOf, holdColours, paletteValueColour, setClusterColours, setValueColours, valueColour, valueMet, watchChoices } from './colouring.js';
@@ -49,8 +50,6 @@ import { ClusterPaths } from './paths.js';
 import { chrome, tokens } from './tokens.js';
 import './filter.js';
 import './cluster-filter.js';
-/** The height of a row in pixels, from which the rows in sight are worked out. */
-const ROW_HEIGHT = 40;
 /** The rows whose paths are asked for before the list has been measured. */
 const FIRST_ROWS = 8;
 /**
@@ -108,9 +107,9 @@ let MosaicaColourEditor = (() => {
     let _field_decorators;
     let _field_initializers = [];
     let _field_extraInitializers = [];
-    let _level_decorators;
-    let _level_initializers = [];
-    let _level_extraInitializers = [];
+    let _clusterLevels_decorators;
+    let _clusterLevels_initializers = [];
+    let _clusterLevels_extraInitializers = [];
     let _isOpen_decorators;
     let _isOpen_initializers = [];
     let _isOpen_extraInitializers = [];
@@ -124,12 +123,12 @@ let MosaicaColourEditor = (() => {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
             _field_decorators = [property()];
-            _level_decorators = [property({ type: Number, attribute: 'cluster-level' })];
+            _clusterLevels_decorators = [property({ attribute: false })];
             _isOpen_decorators = [state()];
             _ticked_decorators = [state()];
             _found_decorators = [state()];
             __esDecorate(this, null, _field_decorators, { kind: "accessor", name: "field", static: false, private: false, access: { has: obj => "field" in obj, get: obj => obj.field, set: (obj, value) => { obj.field = value; } }, metadata: _metadata }, _field_initializers, _field_extraInitializers);
-            __esDecorate(this, null, _level_decorators, { kind: "accessor", name: "level", static: false, private: false, access: { has: obj => "level" in obj, get: obj => obj.level, set: (obj, value) => { obj.level = value; } }, metadata: _metadata }, _level_initializers, _level_extraInitializers);
+            __esDecorate(this, null, _clusterLevels_decorators, { kind: "accessor", name: "clusterLevels", static: false, private: false, access: { has: obj => "clusterLevels" in obj, get: obj => obj.clusterLevels, set: (obj, value) => { obj.clusterLevels = value; } }, metadata: _metadata }, _clusterLevels_initializers, _clusterLevels_extraInitializers);
             __esDecorate(this, null, _isOpen_decorators, { kind: "accessor", name: "isOpen", static: false, private: false, access: { has: obj => "isOpen" in obj, get: obj => obj.isOpen, set: (obj, value) => { obj.isOpen = value; } }, metadata: _metadata }, _isOpen_initializers, _isOpen_extraInitializers);
             __esDecorate(this, null, _ticked_decorators, { kind: "accessor", name: "ticked", static: false, private: false, access: { has: obj => "ticked" in obj, get: obj => obj.ticked, set: (obj, value) => { obj.ticked = value; } }, metadata: _metadata }, _ticked_initializers, _ticked_extraInitializers);
             __esDecorate(this, null, _found_decorators, { kind: "accessor", name: "found", static: false, private: false, access: { has: obj => "found" in obj, get: obj => obj.found, set: (obj, value) => { obj.found = value; } }, metadata: _metadata }, _found_initializers, _found_extraInitializers);
@@ -189,7 +188,8 @@ let MosaicaColourEditor = (() => {
         color: var(--_mosaica-ink);
         overflow: hidden;
         text-overflow: ellipsis;
-        white-space: nowrap;
+        white-space: var(--_mosaica-long-text);
+        overflow-wrap: anywhere;
       }
       [part='sub'] {
         font-size: 12px;
@@ -227,6 +227,18 @@ let MosaicaColourEditor = (() => {
         font-weight: 600;
         margin-right: auto;
       }
+      /* Drawn as a line of text, each with a target 24 px high around it, inside the bar. */
+      [part='set-colour'],
+      [part='deselect'] {
+        position: relative;
+      }
+      [part='set-colour']::before,
+      [part='deselect']::before {
+        content: '';
+        position: absolute;
+        inset: -4px 0;
+        min-width: 24px;
+      }
       [part='set-colour'] {
         display: inline-flex;
         align-items: center;
@@ -238,6 +250,7 @@ let MosaicaColourEditor = (() => {
         height: 18px;
         border: 2px solid currentColor;
         border-radius: 5px;
+        forced-color-adjust: none;
       }
       [part='deselect'] {
         text-decoration: underline;
@@ -256,17 +269,21 @@ let MosaicaColourEditor = (() => {
         color: var(--_mosaica-ink-3);
       }
       [part='columns'] span:last-child,
-      [part='count'] {
+      .n {
         text-align: right;
       }
+      .n {
+        font-size: 12px;
+      }
       [part='rows'] {
         flex: 1 1 auto;
         min-height: 0;
         overflow-y: auto;
         padding: 2px 8px 8px;
       }
+      /* A row holds a name and a path on a line each, and grows only where a host has long names wrap. */
       [part~='row'] {
-        height: ${ROW_HEIGHT}px;
+        min-height: 40px;
         padding: 0 8px;
         border-radius: 6px;
       }
@@ -277,21 +294,43 @@ let MosaicaColourEditor = (() => {
       [part~='row'][data-found] {
         box-shadow: inset 2px 0 0 var(--_mosaica-ink-3);
       }
+      /* The checkbox's target, 24 px square around the box, which keeps its size and its place. */
+      .tick {
+        position: relative;
+        display: grid;
+        align-items: center;
+        height: 24px;
+        cursor: pointer;
+      }
+      .tick::before {
+        content: '';
+        position: absolute;
+        inset: 0 -1px 0 -5px;
+      }
       [part='check'] {
         width: 14px;
         height: 14px;
         margin: 0;
       }
+      /* Drawn 22 px square, with a 24 px target around it. */
       [part='swatch'] {
+        position: relative;
         width: 22px;
         height: 22px;
         border: 1px solid rgba(0, 0, 0, 0.12);
         border-radius: 5px;
         background: var(--c);
+        forced-color-adjust: none;
+      }
+      [part='swatch']::before {
+        content: '';
+        position: absolute;
+        inset: -2px;
       }
       [part='swatch'][data-unmet] {
         background: none;
         border-color: var(--_mosaica-line-control);
+        forced-color-adjust: auto;
       }
       .label {
         display: flex;
@@ -302,7 +341,8 @@ let MosaicaColourEditor = (() => {
       [part='path'] {
         overflow: hidden;
         text-overflow: ellipsis;
-        white-space: nowrap;
+        white-space: var(--_mosaica-long-text);
+        overflow-wrap: anywhere;
       }
       [part='path'] {
         font-size: 12px;
@@ -314,10 +354,13 @@ let MosaicaColourEditor = (() => {
         font-variant-numeric: tabular-nums;
       }
       .none {
-        padding: 12px 16px;
+        padding: 14px 24px 12px;
         font-size: 12px;
         color: var(--_mosaica-ink-3);
       }
+      .none:empty {
+        padding: 0;
+      }
       .foot {
         display: flex;
         align-items: center;
@@ -343,11 +386,15 @@ let MosaicaColourEditor = (() => {
         /** What the dialog colours: a rendered category column, or `cluster:<layer>`. */
         get field() { return this.#field_accessor_storage; }
         set field(value) { this.#field_accessor_storage = value; }
-        #level_accessor_storage = (__runInitializers(this, _field_extraInitializers), __runInitializers(this, _level_initializers, null));
-        /** The level of a `stacked` or `tiered` layer whose clusters are listed. `null` is the coarsest level. */
-        get level() { return this.#level_accessor_storage; }
-        set level(value) { this.#level_accessor_storage = value; }
-        #isOpen_accessor_storage = (__runInitializers(this, _level_extraInitializers), __runInitializers(this, _isOpen_initializers, false));
+        #clusterLevels_accessor_storage = (__runInitializers(this, _field_extraInitializers), __runInitializers(this, _clusterLevels_initializers, new Map()));
+        /**
+         * The level each `stacked` or `tiered` layer's clusters are listed at, keyed by layer name. A
+         * layer with no entry is listed at the level the map draws it at, which follows the zoom where its
+         * levels declare no zoom range. Set it as a property; it has no attribute.
+         */
+        get clusterLevels() { return this.#clusterLevels_accessor_storage; }
+        set clusterLevels(value) { this.#clusterLevels_accessor_storage = value; }
+        #isOpen_accessor_storage = (__runInitializers(this, _clusterLevels_extraInitializers), __runInitializers(this, _isOpen_initializers, false));
         /** Whether the dialog is open. @internal */
         get isOpen() { return this.#isOpen_accessor_storage; }
         set isOpen(value) { this.#isOpen_accessor_storage = value; }
@@ -368,6 +415,8 @@ let MosaicaColourEditor = (() => {
         opener = null;
         /** The frame the paths of the rows in sight are next asked for in, while one is waiting. */
         pathFrame = null;
+        /** The level the layer was listed at in the last update, chosen or followed. */
+        listedAt = undefined;
         /** Open the dialog. */
         async show() {
             this.opener = deepActive();
@@ -426,23 +475,32 @@ let MosaicaColourEditor = (() => {
             super.disconnectedCallback();
         }
         /**
-         * A change of field or level drops what was found and ticked and closes the picker, since each
-         * names the last field's values; the dialog closes where the field is now nothing it can edit.
+         * A change of field or of the level its layer is listed at, chosen or followed as the map zooms,
+         * drops what was found and ticked and closes the picker, since each names the last field's
+         * values; the dialog closes where the field is now nothing it can edit.
          */
         willUpdate(changed) {
             super.willUpdate(changed);
-            if (changed.has('field') || changed.has('level')) {
+            const meta = this.resolvedStore?.get('meta') ?? null;
+            const layer = meta ? this.layerOf(meta) : null;
+            const level = layer ? this.levelOf(layer) : undefined;
+            const levelMoved = level !== this.listedAt;
+            this.listedAt = level;
+            if (changed.has('field') || levelMoved) {
                 this.found = [];
                 this.ticked = new Set();
                 this.picker.close(false);
             }
-            const meta = this.resolvedStore?.get('meta') ?? null;
             if (this.isOpen && (meta === null || !this.editable(meta)))
                 this.close();
         }
         get layerName() {
             return this.field.startsWith(CLUSTER_PREFIX) ? this.field.slice(CLUSTER_PREFIX.length) : null;
         }
+        /** The level `layer` is listed at: its entry in `clusterLevels`, else the level the map draws it at. */
+        levelOf(layer) {
+            return levelOfLayer(layer, this.clusterLevels.get(layer.name), this.resolvedStore?.get('artifacts').followedLevels);
+        }
         /** The layer listed, where `field` names one the points can be coloured by. */
         layerOf(meta) {
             const name = this.layerName;
@@ -461,7 +519,7 @@ let MosaicaColourEditor = (() => {
             if (this.isCategory(meta))
                 return { groupings: [{ count: true, by: { field: this.field, top } }], subject: 'visible' };
             const layer = this.layerOf(meta);
-            return layer ? { groupings: [rankedGrouping(layer, top, levelOf(layer, this.level, this.resolvedStore?.get('artifacts').served ?? []) ?? null)], subject: 'visible' } : null;
+            return layer ? { groupings: [rankedGrouping(layer, top, this.levelOf(layer) ?? null)], subject: 'visible' } : null;
         }
         /** The aggregate that counts what the search box found. */
         foundSpec(meta) {
@@ -506,10 +564,18 @@ let MosaicaColourEditor = (() => {
             if (!s || !meta || !layer || !isTree(layer))
                 return;
             const list = this.renderRoot.querySelector('[part="rows"]');
-            const height = list?.clientHeight ?? 0;
-            const first = height > 0 ? Math.floor(list.scrollTop / ROW_HEIGHT) : 0;
-            const last = height > 0 ? Math.ceil((list.scrollTop + height) / ROW_HEIGHT) : FIRST_ROWS;
-            this.paths.ask(s, layer, this.rows(s, meta).slice(first, last).filter((r) => !r.found).map((r) => BigInt(r.key)));
+            const rows = this.rows(s, meta);
+            const box = list?.getBoundingClientRect();
+            // A row is as tall as its name needs, so the rows in sight are those whose boxes are.
+            const inSight = list && box && box.height > 0
+                ? new Set(Array.from(list.querySelectorAll('[part~="row"]'))
+                    .filter((el) => {
+                    const r = el.getBoundingClientRect();
+                    return r.bottom > box.top && r.top < box.bottom;
+                })
+                    .map((el) => el.dataset.key))
+                : new Set(rows.slice(0, FIRST_ROWS).map((r) => r.key));
+            this.paths.ask(s, layer, rows.filter((r) => inSight.has(r.key) && !r.found).map((r) => BigInt(r.key)));
         }
         /**
          * The rows: what the search box found, then the field's values or the layer's clusters, largest
@@ -605,6 +671,12 @@ let MosaicaColourEditor = (() => {
                 next.delete(key);
             this.ticked = next;
         }
+        /** Untick every row. The bar Deselect is on goes with them, so focus moves to the first row's checkbox. */
+        async deselect() {
+            this.ticked = new Set();
+            await this.updateComplete;
+            this.renderRoot.querySelector('[part="check"]')?.focus();
+        }
         /** A match the search box found: its row gets focus where the list holds it; else it goes at the top. */
         onFound(f, listed) {
             const at = listed.find((r) => r.key === f.key);
@@ -637,7 +709,7 @@ let MosaicaColourEditor = (() => {
             const rows = this.rows(s, meta);
             const ranked = this.ranked.entryOf(s, this.rankedSpec(meta));
             const table = ranked?.result?.tables[0];
-            const level = layer ? levelOf(layer, this.level, this.resolvedStore?.get('artifacts').served ?? []) : undefined;
+            const level = layer ? this.levelOf(layer) : undefined;
             const levelTitle = layer && level !== undefined && layer.levels.length > 1 ? (layer.levels.find((l) => l.level === level)?.title ?? `Level ${level}`) : null;
             const where = layer && isTree(layer) ? 'Clusters drawn' : levelTitle;
             const sub = [where, this.palette(s).title].filter(Boolean).join(' · ');
@@ -655,19 +727,19 @@ let MosaicaColourEditor = (() => {
                 ? html `<div part="selected" role="group" aria-label="Ticked rows">
             <b>${ticked.length.toLocaleString('en-GB')} selected</b>
             <button part="set-colour" type="button" aria-haspopup="dialog" @click=${(e) => this.pick(e, `${ticked.length.toLocaleString('en-GB')} selected`, ticked)}>Set colour<span style=${`background:${ticked[0].colour}`}></span></button>
-            <button part="deselect" type="button" @click=${() => (this.ticked = new Set())}>Deselect</button>
+            <button part="deselect" type="button" @click=${() => void this.deselect()}>Deselect</button>
           </div>`
                 : nothing;
             const row = (r) => {
                 const on = this.ticked.has(r.key);
                 return html `<div part="row" role="listitem" data-key=${r.key} ?data-found=${r.found} ?data-ticked=${on}>
-        <input part="check" type="checkbox" .checked=${on} aria-label=${`Select ${r.name}`} @change=${(e) => this.tick(r.key, e.target.checked)} />
-        <button part="swatch" type="button" style=${`--c:${r.colour}`} ?data-unmet=${r.unmet} aria-haspopup="dialog" aria-label=${`Colour of ${r.name}`} title=${r.unmet ? 'Not drawn yet' : r.colour} @click=${(e) => this.pick(e, r.name, [r])}></button>
+        <label class="tick"><input part="check" type="checkbox" .checked=${on} aria-label=${`Select ${r.name}`} @change=${(e) => this.tick(r.key, e.target.checked)} /></label>
+        <button part="swatch" type="button" style=${`--c:${r.colour}`} ?data-unmet=${r.unmet} aria-haspopup="dialog" aria-label=${`Colour of ${r.name}${r.unmet ? ', not drawn yet' : ''}`} title=${r.unmet ? 'Not drawn yet' : r.colour} @click=${(e) => this.pick(e, r.name, [r])}></button>
         <span class="label"><span part="name" title=${r.name} ?data-unnamed=${r.name === UNNAMED}>${r.name}</span>${r.path ? html `<span part="path" title=${r.path}>${r.path}</span>` : nothing}</span>
-        <span part="count">${r.count === null ? '' : countText(r.count)}</span>
+        <span class="n">${r.count === null ? nothing : html `<span part="count">${countText(r.count)}</span><span class="sr-only"> items</span>`}</span>
       </div>`;
             };
-            const empty = rows.length === 0 ? html `<div class="none">${ranked?.status === 'refused' ? `${layer ? 'Clusters' : 'Values'} unavailable` : ranked?.result ? 'Nothing to colour' : 'Loading…'}</div>` : nothing;
+            const empty = rows.length > 0 ? nothing : ranked?.status === 'refused' ? `${layer ? 'Clusters' : 'Values'} unavailable` : ranked?.result ? 'Nothing to colour' : 'Loading…';
             const chosen = this.chosenKeys(s);
             return dialog(html `<div class="box">
       <div class="head">
@@ -676,7 +748,8 @@ let MosaicaColourEditor = (() => {
       </div>
       ${search}${bar}
       <div part="columns" aria-hidden="true"><span></span><span></span><span>${layer ? 'Cluster' : 'Value'}</span><span>Items</span></div>
-      <div part="rows" role="list" aria-label=${`${name}: ${noun} by size`} @scroll=${this.onScroll}>${repeat(rows, (r) => r.key, row)}${empty}</div>
+      <div class="none" role="status">${empty}</div>
+      <div part="rows" role="list" aria-label=${`${name}: ${noun} by size`} @scroll=${this.onScroll}>${repeat(rows, (r) => r.key, row)}</div>
       <div class="foot">
         <button part="reset-all" class="btn" type="button" ?disabled=${chosen.length === 0} @click=${() => this.apply(chosen, null, true)}>Reset to palette</button>
         <span part="changed" role="status">${chosen.length === 1 ? '1 colour changed' : `${chosen.length.toLocaleString('en-GB')} colours changed`}</span>

package/dist/colour-picker.d.ts

@@ -25,10 +25,12 @@ type Host = ReactiveElement & {
  * The colour picker a swatch opens: the palette's colours and a lighter row of them, a custom area
  * with a saturation and brightness square, a hue bar and a hex field, and Reset. A choice applies
  * at once. It is shown in the top layer beside the rectangle `beside` gives, level with the swatch
- * it was opened from, and focus goes into it; Escape, or a press outside it and its swatch, closes
- * it, Escape giving focus back to the swatch. A custom colour shows on the map as it is dragged and
- * is reported as it is let go; a drag cancelled, or ended by closing the picker, puts back the
- * colour from before it.
+ * it was opened from, or under or over that swatch's row where the window has no room beside, and
+ * focus goes into it; Escape, Tab past either end of it, or a press outside
+ * it and its swatch, closes it, the keys giving focus back to the swatch. A custom colour shows on
+ * the map as it is dragged and is reported as it is let go; a drag cancelled, or ended by closing
+ * the picker, puts back the colour from before it. Text in the hex field that is not a colour is
+ * kept and marked invalid, and the line under the field says what to write.
  *
  * The host renders {@link render} where the picker belongs in its tree and adds
  * {@link pickerStyles} to its styles. The parts are the host's: `colour-popover`, `choice`, `sv`,
@@ -47,6 +49,8 @@ export declare class ColourPicker implements ReactiveController {
     private live;
     /** What puts back the colour from before a drag, while one shows a colour not yet reported. */
     private restore;
+    /** What was typed in the hex field, while it is not a colour. */
+    private typed;
     constructor(host: Host, beside: () => DOMRect);
     open(from: HTMLElement, target: PickerTarget): void;
     close(refocus: boolean): void;
@@ -60,7 +64,10 @@ export declare class ColourPicker implements ReactiveController {
     private applyLive;
     private choose;
     render(): TemplateResult | typeof nothing;
-    /** Show the picker in the top layer, beside {@link beside} and level with its swatch; focus goes into it as it opens. */
+    /**
+     * Show the picker in the top layer, beside {@link beside} and level with its swatch, or, where
+     * neither side has room, under or over its swatch's row; focus goes into it as it opens.
+     */
     private place;
 }
 /** The picker's styles, for the element that renders it. */