@fusion.dev/helix-headless 0.116.0 → 0.118.0

package/dist/graph/root/graph-root.js

@@ -0,0 +1,342 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { customElement, fillTemplate, formatNumbers, HelixElement, HelixGraphLayoutEvent, HelixGraphPanEvent, HelixGraphPartChangeEvent, HelixGraphReadyEvent, HelixGraphZoomEvent, MixinControllerActive, MixinViewport, VirtualizeController, } from '@fusion.dev/helix-core';
+import { magnifyingGlass } from '@fusion.dev/helix-icons';
+import { html, nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
+import { adjacencyOf, entriesOf, nameOf, sortedOf, within, } from './graph-model.js';
+const PAGE = 10;
+let HelixHeadlessGraph = class HelixHeadlessGraph extends MixinViewport(MixinControllerActive(HelixElement)) {
+    constructor() {
+        super(...arguments);
+        this.countLabel = '{count} notes';
+        this.label = '';
+        this.linkedBothLabel = 'Linked both ways with {note}';
+        this.linkedFromLabel = 'Linked from {note}';
+        this.links = [];
+        this.linksToLabel = 'Links to {note}';
+        this.nodes = [];
+        this.notesLabel = 'Notes';
+        this.searchLabel = 'Find a note';
+        this.selectedLabel = 'Selected';
+        this.query = '';
+        this.cursor = 0;
+        this.adjacency = new Map();
+        this.sorted = [];
+        this.entries = [];
+        this.whole = false;
+        this.said = '';
+        this.virtualize = new VirtualizeController(this, {
+            container: () => this.partNamed('list'),
+            count: () => this.entries.length,
+            estimate: () => 32,
+            rows: () => [...(this.renderRoot.querySelectorAll?.('[data-index]') ?? [])].map((element) => ({
+                element: element,
+                index: Number(element.dataset.index),
+            })),
+        });
+        this.handleListKeydown = (event) => {
+            const moves = {
+                ArrowDown: this.cursor + 1,
+                ArrowUp: this.cursor - 1,
+                End: this.entries.length - 1,
+                Home: 0,
+                PageDown: this.cursor + PAGE,
+                PageUp: this.cursor - PAGE,
+            };
+            if (event.key in moves) {
+                event.preventDefault();
+                event.stopPropagation();
+                this.moveTo(moves[event.key]);
+                return;
+            }
+            if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault();
+                event.stopPropagation();
+                this.choose(this.cursor);
+            }
+        };
+        this.handleSearchKeydown = (event) => {
+            if (event.key === 'ArrowDown') {
+                event.preventDefault();
+                this.partNamed('list')?.focus();
+            }
+            if (event.key === 'Escape') {
+                if (this.query === '') {
+                    return;
+                }
+                event.preventDefault();
+                this.query = '';
+            }
+            event.stopPropagation();
+        };
+        this.handleSearch = (event) => {
+            this.query = event.target.value;
+        };
+    }
+    get shown() {
+        return this.kept;
+    }
+    get ready() {
+        return this.whole;
+    }
+    drawn(whole = true) {
+        if (whole === this.whole) {
+            return;
+        }
+        this.whole = whole;
+        this.toggleState('ready', whole);
+        if (whole) {
+            this.dispatchEvent(new HelixGraphReadyEvent());
+        }
+    }
+    laidOut(positions) {
+        this.dispatchEvent(new HelixGraphLayoutEvent({ positions }));
+    }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        this.toggleState('fullscreen', this.filled);
+        this.toggleState('idle', this.resting);
+        if (changed.has('links')) {
+            this.adjacency = adjacencyOf(this.links);
+        }
+        if (changed.has('nodes')) {
+            this.sorted = sortedOf(this.nodes, this.closest?.('[lang]')?.getAttribute('lang') ?? '');
+        }
+        if (changed.has('active') || changed.has('depth') || changed.has('links')) {
+            this.kept =
+                typeof this.depth === 'number' && this.active !== ''
+                    ? within(this.adjacency, this.active, Math.max(0, this.depth))
+                    : undefined;
+        }
+        if (['nodes', 'links', 'active', 'depth', 'query'].some((name) => changed.has(name))) {
+            this.entries = entriesOf(this.sorted, this.adjacency, this.active, this.query, this.kept);
+            this.cursor = 0;
+            const list = this.partNamed('list');
+            if (list) {
+                list.scrollTop = 0;
+            }
+        }
+    }
+    updated(changed) {
+        super.updated(changed);
+        this.virtualize.measure();
+        if (changed.has('nodes') || changed.has('links')) {
+            this.dispatchEvent(new HelixGraphPartChangeEvent({ kind: 'data' }));
+        }
+        else if (changed.has('active') || changed.has('depth')) {
+            this.dispatchEvent(new HelixGraphPartChangeEvent({ kind: 'focus' }));
+        }
+        if (changed.has('query') && changed.get('query') !== undefined) {
+            this.said = this.countText();
+        }
+    }
+    panEvent(detail) {
+        return new HelixGraphPanEvent(detail);
+    }
+    zoomEvent(detail) {
+        return new HelixGraphZoomEvent(detail);
+    }
+    get restingControls() {
+        return 'zoom fullscreen';
+    }
+    get restingControlsLabel() {
+        return 'Graph controls';
+    }
+    gesturesChanged() {
+        this.dispatchEvent(new HelixGraphPartChangeEvent({ kind: 'gestures' }));
+    }
+    get restingGestureLabels() {
+        return {
+            activate: 'Press the graph to use it',
+            twoFinger: 'Use two fingers to move the graph',
+            using: 'Using the graph. Press Escape to scroll the page again.',
+            wheel: 'Use {key} and scroll to zoom the graph',
+        };
+    }
+    countText() {
+        const lang = this.closest?.('[lang]')?.getAttribute('lang') ?? '';
+        return fillTemplate(this.countLabel, { count: formatNumbers(lang)(this.entries.length) });
+    }
+    relationText(entry) {
+        const selected = this.nodes.find((node) => node.id === this.active);
+        const note = selected ? nameOf(selected) : '';
+        switch (entry.relation) {
+            case 'selected':
+                return this.selectedLabel;
+            case 'to':
+                return fillTemplate(this.linkedFromLabel, { note });
+            case 'from':
+                return fillTemplate(this.linksToLabel, { note });
+            case 'both':
+                return fillTemplate(this.linkedBothLabel, { note });
+            default:
+                return '';
+        }
+    }
+    choose(index) {
+        const entry = this.entries[index];
+        if (entry) {
+            this.requestActive(entry.node.id);
+        }
+    }
+    moveTo(index) {
+        const last = this.entries.length - 1;
+        this.cursor = Math.min(Math.max(index, 0), Math.max(last, 0));
+        const list = this.partNamed('list');
+        if (!list) {
+            return;
+        }
+        const row = this.renderRoot.querySelector?.(`[data-index="${this.cursor}"]`);
+        if (row) {
+            row.scrollIntoView?.({ block: 'nearest' });
+        }
+        else {
+            list.scrollTop = this.cursor * 32;
+        }
+        this.virtualize.measure();
+    }
+    renderFilterIcon() {
+        return html `<slot name="filter-icon">
+      <svg part="filter-mark" fill="currentColor" viewBox=${magnifyingGlass.viewBox}>
+        ${unsafeSVG(magnifyingGlass.content)}
+      </svg>
+    </slot>`;
+    }
+    renderRows() {
+        const { first, last } = this.virtualize.window;
+        const total = this.entries.length;
+        return this.entries.slice(first, last).map((entry, offset) => {
+            const index = first + offset;
+            const relation = this.relationText(entry);
+            const chosen = entry.relation === 'selected';
+            return html `<div
+        part="note${chosen ? ' note-selected' : entry.relation ? ' note-linked' : ''}${index === this.cursor ? ' note-cursor' : ''}"
+        role="option"
+        id=${`note-${index}`}
+        data-index=${index}
+        aria-selected=${chosen ? 'true' : 'false'}
+        aria-posinset=${index + 1}
+        aria-setsize=${total}
+        aria-description=${relation || nothing}
+        @click=${() => {
+                this.cursor = index;
+                this.choose(index);
+            }}
+      >
+        <span part="note-name">${nameOf(entry.node)}</span>
+        ${relation ? html `<span part="note-relation" aria-hidden="true">${relation}</span>` : nothing}
+      </div>`;
+        });
+    }
+    render() {
+        const { after, before } = this.virtualize.window;
+        const cursor = this.entries.length > 0 ? `note-${this.cursor}` : nothing;
+        return html `<div
+      part="region"
+      role="group"
+      aria-label=${this.label || this.getAttribute?.('aria-label') || 'Graph'}
+      tabindex="0"
+      @focusin=${this.idle.stir}
+      @keydown=${this.handleKeydown}
+      @pointerleave=${this.handlePointerLeave}
+      @pointermove=${this.idle.stir}
+    >
+      <div part="header">
+        <slot name="header"></slot>
+      </div>
+      <div part="body">
+        <div part="stage">
+          <div part="viewport">
+            <slot></slot>
+            ${this.renderGestures()}
+          </div>
+          ${this.renderControls()}
+        </div>
+        <div part="panel">
+          <div part="search">
+            <span part="filter-icon" aria-hidden="true">${this.renderFilterIcon()}</span>
+            <input
+              part="search-field"
+              type="text"
+              autocomplete="off"
+              spellcheck="false"
+              aria-label=${this.searchLabel}
+              placeholder=${this.searchLabel}
+              .value=${this.query}
+              @input=${this.handleSearch}
+              @keydown=${this.handleSearchKeydown}
+            />
+            <span part="count" aria-hidden="true">${this.countText()}</span>
+          </div>
+          <div
+            part="list"
+            role="listbox"
+            tabindex="0"
+            data-scroller
+            aria-label=${this.notesLabel}
+            aria-activedescendant=${cursor}
+            @keydown=${this.handleListKeydown}
+            @scroll=${() => this.virtualize.measure()}
+          >
+            <div part="before" style="block-size: ${before}px"></div>
+            ${this.renderRows()}
+            <div part="after" style="block-size: ${after}px"></div>
+          </div>
+        </div>
+      </div>
+      <div part="footer">
+        <slot name="footer"></slot>
+      </div>
+      <span part="live" role="status">${this.said}</span>
+    </div>`;
+    }
+};
+__decorate([
+    property({ attribute: 'count-label' })
+], HelixHeadlessGraph.prototype, "countLabel", void 0);
+__decorate([
+    property({ type: Number })
+], HelixHeadlessGraph.prototype, "depth", void 0);
+__decorate([
+    property()
+], HelixHeadlessGraph.prototype, "label", void 0);
+__decorate([
+    property({ attribute: 'linked-both-label' })
+], HelixHeadlessGraph.prototype, "linkedBothLabel", void 0);
+__decorate([
+    property({ attribute: 'linked-from-label' })
+], HelixHeadlessGraph.prototype, "linkedFromLabel", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessGraph.prototype, "links", void 0);
+__decorate([
+    property({ attribute: 'links-to-label' })
+], HelixHeadlessGraph.prototype, "linksToLabel", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessGraph.prototype, "nodes", void 0);
+__decorate([
+    property({ attribute: 'notes-label' })
+], HelixHeadlessGraph.prototype, "notesLabel", void 0);
+__decorate([
+    property({ attribute: 'search-label' })
+], HelixHeadlessGraph.prototype, "searchLabel", void 0);
+__decorate([
+    property({ attribute: 'selected-label' })
+], HelixHeadlessGraph.prototype, "selectedLabel", void 0);
+__decorate([
+    state()
+], HelixHeadlessGraph.prototype, "query", void 0);
+__decorate([
+    state()
+], HelixHeadlessGraph.prototype, "cursor", void 0);
+HelixHeadlessGraph = __decorate([
+    customElement('helix-headless-graph')
+], HelixHeadlessGraph);
+export { HelixHeadlessGraph };

package/dist/index.d.ts

@@ -47,6 +47,7 @@ export * from './empty/index.js';
 export * from './file-input/index.js';
 export * from './filter-input/index.js';
 export * from './format-date/index.js';
+export * from './graph/index.js';
 export * from './heatmap/index.js';
 export * from './icon/index.js';
 export * from './icon-button/index.js';

package/dist/index.js

@@ -38,6 +38,7 @@ export * from './empty/index.js';
 export * from './file-input/index.js';
 export * from './filter-input/index.js';
 export * from './format-date/index.js';
+export * from './graph/index.js';
 export * from './heatmap/index.js';
 export * from './icon/index.js';
 export * from './icon-button/index.js';

package/dist/map/root/map-root.d.ts

@@ -1,4 +1,4 @@
-import { HelixElement, KeyboardNavigationController, type ViewportControlsPlacement, type ViewportPanDetail, type ViewportZoomDetail } from '@fusion.dev/helix-core';
+import { HelixElement, KeyboardNavigationController, type ViewportControlsPlacement, type ViewportGestureLabels, type ViewportPanDetail, type ViewportZoomDetail } from '@fusion.dev/helix-core';
 import { nothing, type PropertyValues, type TemplateResult } from 'lit';
 /**
  * What `ViewportControlsPlacement` is called for a map.
@@ -115,14 +115,10 @@ declare const HelixHeadlessMap_base: (new (...args: any[]) => import("@fusion.de
  * @cssstate fullscreen - The map fills the screen.
  * @cssstate idle - The user has been still long enough for the header and footer to fade.
  * @cssstate ready - The map has been drawn whole, after `helix-map-ready`.
+ * @cssstate sharing - The page keeps the plain wheel and one finger, with `gestures="cooperative"` or while a map with `gestures="activate"` waits to be pressed.
  * @cssstate using - A map with `gestures="activate"` has been pressed and has the gestures.
  */
 export declare class HelixHeadlessMap extends HelixHeadlessMap_base {
-    /**
-     * The hint shown when a map waiting to be pressed is scrolled or swiped
-     * over, with `gestures="activate"`.
-     */
-    activateHintLabel: string;
     /**
      * The map's rotation, in degrees clockwise from north. `connectMap` keeps it
      * current, and the Face north button's needle turns with it.
@@ -137,21 +133,6 @@ export declare class HelixHeadlessMap extends HelixHeadlessMap_base {
     faceNorthLabel: string;
     /** What screen readers hear when the map is tilted back to looking straight down. */
     flatLabel: string;
-    /**
-     * Which gestures the map takes from the page.
-     *
-     * - `always`, which unset is: the wheel zooms the map and one finger pans
-     *   it, for a map that is the page, such as a full-screen view.
-     * - `cooperative`: the wheel and one finger scroll the page, and the map
-     *   takes Ctrl or ⌘ with the wheel, and two fingers. The frame says so
-     *   when a gesture passes to the page. Best for a map embedded in a page.
-     * - `activate`: the map takes nothing until it is pressed, and gives it
-     *   back on Escape, when the pointer leaves it, or on a press elsewhere.
-     *
-     * The keyboard and the frame's buttons work in every mode. The renderer is
-     * told through the connector, so MapLibre and Leaflet behave alike.
-     */
-    gestures?: 'activate' | 'always' | 'cooperative';
     /** The Hybrid map type's name. */
     hybridLabel: string;
     /**
@@ -213,16 +194,6 @@ export declare class HelixHeadlessMap extends HelixHeadlessMap_base {
      * top of the map faces, clockwise from north.
      */
     turnedLabel: string;
-    /** The hint shown when one finger swipes over a map with `gestures="cooperative"`. */
-    twoFingerHintLabel: string;
-    /** The line shown while a map with `gestures="activate"` has the gestures. */
-    usingLabel: string;
-    /**
-     * The hint shown when the wheel scrolls past a map with
-     * `gestures="cooperative"`, with `{key}`, which is ⌘ on a Mac and Ctrl
-     * elsewhere, as the renderer reads it.
-     */
-    wheelHintLabel: string;
     /**
      * What screen readers hear after a zoom. `{level}` is the zoom level.
      */
@@ -348,51 +319,10 @@ export declare class HelixHeadlessMap extends HelixHeadlessMap_base {
      */
     private readonly handleMarkerKeydown;
     private readonly handleMarkerKeyup;
-    /** The hint on the map while one shows, put there by a gesture the map let pass. */
-    private hint;
-    /** When the hint goes. */
-    private hinting;
-    /**
-     * Where the gesture was, in the map's box, which the hint is shown at:
-     * where the reader is looking, and on the map wherever a page laid its own
-     * content over the rest of it.
-     */
-    private hintAt;
-    /** Whether a map with `gestures="activate"` has been pressed, and has the gestures. */
-    private taken;
-    /**
-     * @internal Which gestures the renderer takes, which `connectMap` tells it:
-     * all of them, the cooperative set, or none, while an `activate` map waits
-     * to be pressed.
-     */
-    get gestureMode(): 'cooperative' | 'free' | 'off';
-    /** Shows a hint over the map for a moment, where the gesture was. */
-    private showHint;
-    /**
-     * A wheel the map let pass to the page, which is said: a reader scrolling
-     * the page past a map that did not zoom is told why, and how to zoom it.
-     * **Ctrl or ⌘ with the wheel is the map's**, and is what a trackpad's pinch
-     * arrives as.
-     */
-    private readonly handleWheel;
-    /** One finger moving over the map, which scrolls the page, and is said. */
-    private readonly handleTouchMove;
-    /** A press on the map itself, which hands a waiting map the gestures. */
-    private readonly handleTake;
-    /** Escape, which gives the page its scroll back. */
-    private readonly handleGiveBackKey;
-    /** A press anywhere else on the page, which gives it its scroll back. */
-    private readonly handleGiveBackOutside;
-    /** The window losing focus, as a reader switching away does. */
-    private readonly handleGiveBackBlur;
-    /**
-     * The pointer leaving the frame. **Heard on the frame and not the map's
-     * canvas**, which a pointer resting on a marker has left, since markers
-     * stand outside it. **A mouse or a pen and never a finger**, whose
-     * `pointerleave` is the finger lifting: a tap took the map and gave it back
-     * in one.
-     */
-    private readonly handleLeave;
+    /** What the map says about its gestures where the page does not say it. */
+    protected get restingGestureLabels(): ViewportGestureLabels;
+    /** Which gestures the renderer takes, which `connectMap` hears from here. */
+    protected gesturesChanged(): void;
     /** A marker added or taken away is a walk of a different length. */
     private readonly handleSlotChange;
     connectedCallback(): void;