@contraagent/elements 0.0.0-stage → 0.2.0

package/dist/graph/card.js

@@ -0,0 +1,185 @@
+import { PAD, placeCard } from './place-card.js';
+/** The focused element, inside the shadow roots it is in. */
+function deepActive(root) {
+    let at = root?.activeElement ?? null;
+    while (at?.shadowRoot?.activeElement)
+        at = at.shadowRoot.activeElement;
+    return at;
+}
+/**
+ * The card (`.insp`) of the selected item in the host's frame (`.main > .frame`):
+ * a table row (`tr.sel > th`), a mark (`.mark.sel`, `.taskchip.sel`, in the frame or
+ * in the view of `inner`), a node (`.node.sel`) or a cluster (`.cluster.sel`). It
+ * runs after every draw, pan, zoom and scroll (`place`), and keeps Tab and Shift+Tab
+ * between the item and its card.
+ */
+export class CardController {
+    constructor(host, o) {
+        this.host = host;
+        this.o = o;
+        /** The frame height the card needs (0 without one). */
+        this.room = 0;
+        /** Focus is being put back, not moved by the reader: it does not select. */
+        this.quiet = false;
+        /** Shift+Tab on the card's first action comes back to the item; Escape puts the focus back on the item first. */
+        this.onCardKey = (e) => {
+            if (e.key === 'Tab' && e.shiftKey && e.target === this.actions()[0]) {
+                const own = this.itemFocus();
+                if (!own)
+                    return;
+                e.preventDefault();
+                this.focusQuietly(own);
+            }
+            else if (e.key === 'Escape') {
+                // The card goes with the selection: the focus goes back to the item first.
+                this.focusQuietly(this.itemFocus());
+            }
+        };
+        /** Tab on the selected item goes on to its card. */
+        this.onTabToCard = (e) => {
+            if (e.key !== 'Tab' || e.shiftKey || e.defaultPrevented)
+                return;
+            const own = this.itemFocus();
+            if (!own || this.focused !== own)
+                return;
+            const first = this.actions()[0];
+            if (!first)
+                return;
+            e.preventDefault();
+            first.focus();
+        };
+        host.addController(this);
+    }
+    hostConnected() {
+        this.host.addEventListener('keydown', this.onTabToCard);
+    }
+    hostDisconnected() {
+        this.host.removeEventListener('keydown', this.onTabToCard);
+    }
+    get root() {
+        return this.host.shadowRoot ?? this.host;
+    }
+    get focused() {
+        return deepActive(this.host.shadowRoot);
+    }
+    /** The card, when there is a selection. */
+    card() {
+        return this.root.querySelector('.insp');
+    }
+    /** The card's content: the elements the host put in the `inspector` slot. */
+    content() {
+        return this.card()?.querySelector('slot')?.assignedElements({ flatten: true }) ?? [];
+    }
+    /** The buttons and links of the card's content, in order. */
+    actions() {
+        return this.content().flatMap((el) => [...(el.matches('button, a[href]') ? [el] : []), ...el.querySelectorAll('button, a[href]')]);
+    }
+    /**
+     * The selected item as drawn (a mark, a node, a cluster's header), what the card keeps clear of
+     * (a mark's whole node), and the box it is shown in (the frame, or a mark matrix).
+     */
+    anchor() {
+        const frame = this.root.querySelector('.main > .frame');
+        const row = frame?.querySelector('tr.sel > th');
+        if (frame && row)
+            return { item: row, clear: row, frame };
+        const sel = frame?.querySelector('.mark.sel, .taskchip.sel, .node.sel, .cluster.sel') ?? this.o.inner()?.querySelector('.mark.sel');
+        if (!frame || !sel)
+            return null;
+        // A cluster: the card points at its header, where its name is, and keeps clear of the whole cluster when there is room.
+        const item = sel.classList.contains('cluster') ? (sel.querySelector(':scope > .hd') ?? sel) : sel;
+        return { item, clear: item.closest('.node') ?? sel, frame };
+    }
+    /** Put the card beside the selected item, inside the frame; hide it while the item is out of view. */
+    place() {
+        const card = this.card();
+        const docked = this.o.docked();
+        const room = card && !docked ? card.querySelector('.scroll').scrollHeight + 24 + 2 * PAD : 0;
+        if (room !== this.room && (room > this.o.frameH() || this.room > 0)) {
+            this.room = room;
+            this.o.grow();
+        }
+        if (!card || docked)
+            return;
+        const a = this.anchor();
+        const main = this.root.querySelector('.main');
+        if (!a || !main) {
+            card.classList.remove('placed');
+            return;
+        }
+        const m = main.getBoundingClientRect();
+        const rel = (r) => ({ left: r.left - m.left, top: r.top - m.top, width: r.width, height: r.height });
+        const item = rel(a.item.getBoundingClientRect());
+        const clear = rel(a.clear.getBoundingClientRect());
+        const f = rel(a.frame.getBoundingClientRect());
+        // A mark matrix scrolls: the item hides when scrolled out of it.
+        const port = a.frame.querySelector('.mx') ?? this.o.inner()?.querySelector('.mx');
+        const inView = placeCard(item, port ? rel(port.getBoundingClientRect()) : f, { width: 0, height: 0 }).shown;
+        const scroll = card.querySelector('.scroll');
+        if (scroll)
+            scroll.style.maxHeight = `${Math.max(120, f.height - 2 * PAD - 24)}px`;
+        const size = { width: card.offsetWidth, height: card.offsetHeight };
+        let p = placeCard(clear, f, size, item);
+        if (!p.fits && a.clear !== a.item && !a.clear.classList.contains('node'))
+            p = placeCard(item, f, size);
+        card.classList.toggle('placed', p.shown && inView);
+        card.dataset['side'] = p.side;
+        card.style.left = `${p.x}px`;
+        card.style.top = `${p.y}px`;
+        card.style.setProperty('--arrow', `${p.arrow}px`);
+    }
+    /** The focusable that stands for the selected item: the mark itself, or a node's or a cluster's name. */
+    itemFocus() {
+        const a = this.anchor();
+        if (!a)
+            return null;
+        return a.item.matches('button') ? a.item : a.item.querySelector('.name');
+    }
+    /**
+     * The selected item's focusable described by the card, and what a live region says
+     * of the item: its name and its status (the card content's first heading and its
+     * `[data-status]`), '' without a selection.
+     */
+    describe() {
+        const roots = [this.root, this.o.inner()].filter((r) => !!r);
+        for (const r of roots)
+            for (const el of r.querySelectorAll('[aria-describedby="insp"]'))
+                el.removeAttribute('aria-describedby');
+        const own = this.itemFocus();
+        const card = this.card();
+        if (own && card) {
+            // An item in the view of another element (a mark matrix) names the card by reference: an id does not cross shadow roots.
+            if (own.getRootNode() === card.getRootNode())
+                own.setAttribute('aria-describedby', 'insp');
+            else if ('ariaDescribedByElements' in own)
+                own.ariaDescribedByElements = [card];
+        }
+        const content = this.content();
+        const find = (sel) => content.map((el) => (el.matches(sel) ? el : el.querySelector(sel))).find(Boolean) ?? null;
+        return [find('h1, h2, h3, h4, h5, h6')?.textContent?.trim() ?? '', find('[data-status]')?.textContent?.trim() ?? ''];
+    }
+    /** Focus `el` without selecting what it is on. */
+    focusQuietly(el) {
+        this.quiet = true;
+        el?.focus();
+        this.quiet = false;
+    }
+    /** Run `f` now, or, while a pointer is down on the frame, once it is released (a scroll under a pressed pointer would move the click elsewhere). */
+    whenReleased(f) {
+        if (!this.o.pressed())
+            return f();
+        globalThis.addEventListener('pointerup', () => setTimeout(f), { once: true });
+    }
+    /** On a narrow screen: scroll the selected item into view when it is out of it or under the sheet. */
+    revealOverSheet() {
+        const item = this.anchor()?.item;
+        if (!item)
+            return;
+        const r = item.getBoundingClientRect();
+        const sheet = this.card()?.getBoundingClientRect();
+        const bottom = Math.min(globalThis.innerHeight, sheet?.top ?? Infinity);
+        if (r.top < 0 || r.bottom > bottom)
+            item.scrollIntoView({ block: 'center' });
+    }
+}
+//# sourceMappingURL=card.js.map

package/dist/graph/card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.js","sourceRoot":"","sources":["../../src/graph/card.ts"],"names":[],"mappings":"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"}

package/dist/graph/host.d.ts

@@ -0,0 +1,82 @@
+import type { ReactiveControllerHost } from 'lit';
+import type { StateStyles } from '../primitives/states.js';
+import type { CardController } from './card.js';
+import type { GraphLayout } from './layout.js';
+import type { PanZoomController } from './pan-zoom.js';
+import type { LayeredGraphStrings } from './strings.js';
+import type { Arrangement, DrawnGraph, GraphClusterInput, GraphMark, GraphNode } from './types.js';
+/** The failed marks a node drawn as a bar lists by name. */
+export declare const BAR_LIST = 8;
+/**
+ * The element as its views see it: what it shows, the state the views change
+ * (each change renders the element again), its controllers and what it sends.
+ */
+export interface GraphHost extends ReactiveControllerHost, HTMLElement {
+    readonly renderRoot: ParentNode;
+    /** The graph, its nodes with their defaults. */
+    readonly drawn: DrawnGraph;
+    readonly arr: Arrangement;
+    readonly states: StateStyles;
+    readonly words: LayeredGraphStrings;
+    readonly selected: string | null;
+    readonly nodes: ReadonlyMap<string, GraphNode>;
+    readonly clusters: ReadonlyMap<string, GraphClusterInput>;
+    /** Where everything is drawn, and whether it was drawn for this graph (`key`). */
+    readonly lay: GraphLayout | null;
+    readonly laidOut: boolean;
+    /** Top to bottom. */
+    readonly down: boolean;
+    readonly barAt: number;
+    /** The node table is shown. */
+    readonly asTable: boolean;
+    /** The series (or a mark's id, for a mark outside any series) under the pointer or focus. */
+    hover: string | null;
+    /** Each group's focused mark (roving tabindex): one tab stop per group. */
+    readonly active: Map<string, number>;
+    readonly pz: PanZoomController;
+    readonly card: CardController;
+    renderIcon(name: string): unknown;
+    /** The series (or mark id) highlighted, and the marks it lights. */
+    lit(): {
+        key: string | null;
+        on: ReadonlySet<string> | null;
+    };
+    /** Select an item by its id (null: none). */
+    select(id: string | null): void;
+    /** Focus moved by the reader selects what it is on; focus put back does not. */
+    focusSelect(id: string): void;
+    /** An item's action: Enter, a double click, a card's first link. */
+    act(id: string): void;
+    /** Enter a cluster's inner view. */
+    drill(id: string): void;
+    /** Open (`open`) or close an item that can be drawn open. */
+    toggle(id: string, open: boolean): void;
+    /** The view switch. */
+    showView(view: 'graph' | 'table'): void;
+}
+/** A mark in a node, with its series id ('' outside any series). */
+export interface Slot {
+    m: GraphMark;
+    series: string;
+}
+/** How a group of marks lays out. */
+export interface Grid {
+    cols: number;
+    size: number;
+    gap: number;
+}
+/** A group of marks with one tab stop: a node's marks, or the failed marks a node drawn as a bar lists. */
+export interface MarkGroup {
+    id: string;
+    slots: (Slot | null)[];
+    grid: Grid;
+}
+/** A node's marks in slot order: one per series (null where the series has none here), then those outside any series. */
+export declare const slotsOf: (n: Pick<GraphNode, "marks" | "loose">, series: readonly string[]) => (Slot | null)[];
+/** A group's grid: the graph's, so a series sits at one place in every node; a group without series lays out its own few marks. */
+export declare function gridOf(n: Pick<GraphNode, 'marks' | 'loose'>, series: number): Grid;
+/** The first slot that holds a mark. */
+export declare function firstMark(slots: readonly (Slot | null)[]): number;
+/** What a mark highlights: its series, or itself outside any series. */
+export declare const hlKeyOf: (s: Slot) => string;
+//# sourceMappingURL=host.d.ts.map

package/dist/graph/host.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"host.d.ts","sourceRoot":"","sources":["../../src/graph/host.ts"],"names":[],"mappings":"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"}

package/dist/graph/host.js

@@ -0,0 +1,21 @@
+import { markGrid } from './marks.js';
+/** The failed marks a node drawn as a bar lists by name. */
+export const BAR_LIST = 8;
+/** A node's marks in slot order: one per series (null where the series has none here), then those outside any series. */
+export const slotsOf = (n, series) => [
+    ...n.marks.map((m, i) => (m ? { m, series: series[i] ?? '' } : null)),
+    ...n.loose.map((m) => ({ m, series: '' })),
+];
+/** A group's grid: the graph's, so a series sits at one place in every node; a group without series lays out its own few marks. */
+export function gridOf(n, series) {
+    const slots = n.marks.length + n.loose.length;
+    const g = markGrid(n.marks.length ? series : slots);
+    return { cols: Math.min(g.cols, Math.max(1, slots)), size: g.size, gap: g.size >= 10 ? 4 : 2 };
+}
+/** The first slot that holds a mark. */
+export function firstMark(slots) {
+    return Math.max(0, slots.findIndex((m) => m !== null));
+}
+/** What a mark highlights: its series, or itself outside any series. */
+export const hlKeyOf = (s) => s.series || s.m.id;
+//# sourceMappingURL=host.js.map

package/dist/graph/host.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"host.js","sourceRoot":"","sources":["../../src/graph/host.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAKtC,4DAA4D;AAC5D,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,CAAC;AAmE1B,yHAAyH;AACzH,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,CAAqC,EAAE,MAAyB,EAAmB,EAAE,CAAC;IAC5G,GAAG,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IACrE,GAAG,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC;CAC3C,CAAC;AAEF,mIAAmI;AACnI,MAAM,UAAU,MAAM,CAAC,CAAqC,EAAE,MAAc;IAC1E,MAAM,KAAK,GAAG,CAAC,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC;IAC9C,MAAM,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;IACpD,OAAO,EAAE,IAAI,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;AACjG,CAAC;AAED,wCAAwC;AACxC,MAAM,UAAU,SAAS,CAAC,KAA+B;IACvD,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC;AACzD,CAAC;AAED,wEAAwE;AACxE,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,CAAO,EAAU,EAAE,CAAC,CAAC,CAAC,MAAM,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC"}

package/dist/graph/icons.d.ts

@@ -0,0 +1,7 @@
+/** A cycle: a circle that comes back round to where it started, its head at the top right. */
+export declare const cycleIcon: (size?: number) => import("lit").TemplateResult<1>;
+/** Something with an inner view: two cards, one behind the other, as a node with one is drawn. */
+export declare const innerIcon: () => import("lit").TemplateResult<1>;
+/** Show inside (a plus) or hide inside (a minus), in a square: the control of an item that can be drawn open. */
+export declare const toggleIcon: (open: boolean) => import("lit").TemplateResult<1>;
+//# sourceMappingURL=icons.d.ts.map

package/dist/graph/icons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../src/graph/icons.ts"],"names":[],"mappings":"AAGA,8FAA8F;AAC9F,eAAO,MAAM,SAAS,GAAI,aAAS,oCAI1B,CAAC;AAEV,kGAAkG;AAClG,eAAO,MAAM,SAAS,uCAIb,CAAC;AAEV,iHAAiH;AACjH,eAAO,MAAM,UAAU,GAAI,MAAM,OAAO,oCAI/B,CAAC"}

package/dist/graph/icons.js

@@ -0,0 +1,18 @@
+// The graph's own icons: a cluster that repeats, and an inner view.
+import { html } from 'lit';
+/** A cycle: a circle that comes back round to where it started, its head at the top right. */
+export const cycleIcon = (size = 14) => html `<svg class="ic loop-ic" width=${size} height=${size} viewBox="0 0 16 16" aria-hidden="true" focusable="false">
+    <path d="M12.7,9.71 A5,5 0 1 1 11.21,4.17" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"></path>
+    <path d="M12.44,5.2 L9.15,5.06 L11.73,2 z" fill="currentColor"></path>
+  </svg>`;
+/** Something with an inner view: two cards, one behind the other, as a node with one is drawn. */
+export const innerIcon = () => html `<svg class="ic in-ic" width="12" height="12" viewBox="0 0 12 12" aria-hidden="true" focusable="false">
+    <rect x="3.4" y="0.7" width="7.9" height="7.9" rx="1.6" fill="none" stroke="currentColor" stroke-width="1.2"></rect>
+    <path d="M0.7,3.6 V9.7 Q0.7,11.3 2.3,11.3 H8.4" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"></path>
+  </svg>`;
+/** Show inside (a plus) or hide inside (a minus), in a square: the control of an item that can be drawn open. */
+export const toggleIcon = (open) => html `<svg class="ic tog-ic" width="12" height="12" viewBox="0 0 12 12" aria-hidden="true" focusable="false">
+    <rect x="0.7" y="0.7" width="10.6" height="10.6" rx="2.2" fill="none" stroke="currentColor" stroke-width="1.2"></rect>
+    <path d=${open ? 'M3.5,6 H8.5' : 'M3.5,6 H8.5 M6,3.5 V8.5'} fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"></path>
+  </svg>`;
+//# sourceMappingURL=icons.js.map

package/dist/graph/icons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.js","sourceRoot":"","sources":["../../src/graph/icons.ts"],"names":[],"mappings":"AAAA,oEAAoE;AACpE,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAE3B,8FAA8F;AAC9F,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,IAAI,GAAG,EAAE,EAAE,EAAE,CACrC,IAAI,CAAA,iCAAiC,IAAI,WAAW,IAAI;;;SAGjD,CAAC;AAEV,kGAAkG;AAClG,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE,CAC5B,IAAI,CAAA;;;SAGG,CAAC;AAEV,iHAAiH;AACjH,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,IAAa,EAAE,EAAE,CAC1C,IAAI,CAAA;;cAEQ,IAAI,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,yBAAyB;SACrD,CAAC"}

package/dist/graph/index.d.ts

@@ -0,0 +1,15 @@
+export * from './types.js';
+export { arrange, extentOf, isPoint, orderRows, rankLayers, type GraphShape } from './arrange.js';
+export * from './layout.js';
+export * from './paths.js';
+export * from './view.js';
+export * from './nav.js';
+export * from './marks.js';
+export * from './place-card.js';
+export * from './pan-zoom.js';
+export * from './card.js';
+export * from './icons.js';
+export * from './strings.js';
+export * from './styles.js';
+export * from './layered-graph.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/graph/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/graph/index.ts"],"names":[],"mappings":"AAEA,cAAc,YAAY,CAAC;AAC3B,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAClG,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,oBAAoB,CAAC"}

package/dist/graph/index.js

@@ -0,0 +1,17 @@
+// A layered graph: `@contraagent/elements/graph`. `CaeLayeredGraph` is registered
+// by `@contraagent/elements/graph/define` (with the elements it renders).
+export * from './types.js';
+export { arrange, extentOf, isPoint, orderRows, rankLayers } from './arrange.js';
+export * from './layout.js';
+export * from './paths.js';
+export * from './view.js';
+export * from './nav.js';
+export * from './marks.js';
+export * from './place-card.js';
+export * from './pan-zoom.js';
+export * from './card.js';
+export * from './icons.js';
+export * from './strings.js';
+export * from './styles.js';
+export * from './layered-graph.js';
+//# sourceMappingURL=index.js.map

package/dist/graph/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/graph/index.ts"],"names":[],"mappings":"AAAA,kFAAkF;AAClF,0EAA0E;AAC1E,cAAc,YAAY,CAAC;AAC3B,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAmB,MAAM,cAAc,CAAC;AAClG,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,oBAAoB,CAAC"}

package/dist/graph/layered-graph.d.ts

@@ -0,0 +1,226 @@
+import { LitElement, type CSSResult, type PropertyValueMap, type PropertyValues } from 'lit';
+import type { MarkMatrixInput, MarkMatrixStrings } from '../matrix/types.js';
+import type { StateStyles } from '../primitives/states.js';
+import { type LayeredGraphStrings } from './strings.js';
+import type { GraphInput, GraphOrder } from './types.js';
+/** Below this width, `direction: 'auto'` draws top to bottom, without zoom. */
+export declare const NARROW = 640;
+/** The changes `willUpdate` reads: the properties, and the private `down`. */
+type Changed = PropertyValues<CaeLayeredGraph> & PropertyValueMap<{
+    down: boolean;
+}>;
+/**
+ * A layered graph: each node in a layer by the longest path to it, edges bending only
+ * in the gaps between layers and never passing a node or a cluster's label; a cluster
+ * of nodes in a box (a cluster in a cluster: a box in a box), with, when it `cycle`s,
+ * a dotted return from its last layer to its first; an edge from outside the graph
+ * from a named stub. Inside each node, one mark per series id, at the same place in
+ * every node, so a series can be followed across the graph; a mark is drawn in its
+ * state's look (`states`). Above `barAt` marks, a node shows a bar of its counts and
+ * lists its failed marks. The order depends on the structure only, and keeps a
+ * previous `order`: nodes that appear later are added at the end of their layer.
+ *
+ * A click selects a mark, a node or a cluster (`cae-select`); a card beside it (the
+ * host's content, in the `inspector` slot) moves with it as the graph pans and zooms,
+ * and hides while it is out of the frame; on a narrow screen it is a sheet under the
+ * frame. A double click or Enter is the item's action (`cae-activate`), or opens its
+ * inner view (`cae-drill`, for an item with `drill`). Hovering or focusing a mark
+ * highlights its series and what `related` names. The frame first shows the whole
+ * graph; Ctrl (or ⌘) and the wheel, or the buttons, zoom; dragging pans; "Show all"
+ * goes back. "Graph | Table" changes the view (`cae-view-change`): the table is a row
+ * per node, with its status and the nodes it is joined to. With `matrix`, the frame
+ * shows that `<cae-mark-matrix>` as the table instead.
+ *
+ * Size: the element is as wide as its container. Without a height set on it, the
+ * frame is as tall as the whole drawing at that width (never scaled up), up to 70% of
+ * the window's height or 360 px, whichever is more, and taller when the card needs
+ * it; top to bottom, as tall as the drawing. A height set on the element
+ * (or given it by a flex or grid container) is shared: the `crumbs` slot and the row
+ * under the frame keep theirs, and the frame takes the rest, the drawing fitted in it.
+ *
+ * Keyboard: Tab moves between nodes; the arrow keys, Home and End move between a
+ * node's marks, and a mark out of the frame is brought into it; Shift and an arrow
+ * key move along an edge to an earlier or a later node, on the same series; what has
+ * the focus is selected (Tab goes on to the card); Enter is the item's action; Escape
+ * clears the selection (and, with none, is left to the host).
+ *
+ * @tagname cae-layered-graph
+ * @fires cae-select - `{id}`: a mark, a node, a cluster or a table row was selected; `{id: null}`: the selection was cleared
+ * @fires cae-activate - `{id}`: an item's action (a double click or Enter)
+ * @fires cae-drill - `{id}`: an item's inner view (a double click or Enter on an item with `drill`, a cluster's chip in the table, a later part of a cluster's `path`)
+ * @fires cae-toggle - `{id, open}`: an item's open or close control (`toggle`) was used
+ * @fires cae-view-change - `{view}`: "Graph" or "Table" was chosen
+ * @slot inspector - the selected item's card: its first heading and its `[data-status]` name it to a screen reader
+ * @slot crumbs - a line above the frame (where the graph is)
+ * @csspart frame - the frame every view is drawn in
+ * @csspart stage - what pans and zooms
+ * @csspart node - each node
+ * @csspart node-header - a node's first line
+ * @csspart node-name - a node's name
+ * @csspart mark - each mark
+ * @csspart cluster - each cluster
+ * @csspart cluster-label - a cluster's header
+ * @csspart edge - each edge
+ * @csspart stub - each stub
+ * @csspart legend - the legend
+ * @csspart keys - the line of key hints under the legend
+ * @csspart inspector - the selected item's card
+ * @csspart table - the node table
+ * @csspart row - each row of the node table
+ */
+export declare class CaeLayeredGraph extends LitElement {
+    static styles: (CSSResult | CSSResult[])[];
+    static properties: {
+        graph: {
+            attribute: boolean;
+        };
+        states: {
+            attribute: boolean;
+        };
+        selected: {
+            attribute: boolean;
+        };
+        highlight: {
+            attribute: boolean;
+        };
+        order: {
+            attribute: boolean;
+        };
+        key: {};
+        direction: {};
+        view: {};
+        matrix: {
+            attribute: boolean;
+        };
+        barAt: {
+            type: NumberConstructor;
+        };
+        related: {
+            attribute: boolean;
+        };
+        strings: {
+            attribute: boolean;
+        };
+        matrixStrings: {
+            attribute: boolean;
+        };
+        renderIcon: {
+            attribute: boolean;
+        };
+        iconStyles: {
+            attribute: boolean;
+        };
+        hover: {
+            state: boolean;
+        };
+        down: {
+            state: boolean;
+        };
+        lay: {
+            state: boolean;
+        };
+        announced: {
+            state: boolean;
+        };
+    };
+    graph: GraphInput;
+    states: StateStyles;
+    /** The selected item's id (a mark's, a node's or a cluster's), or null. */
+    selected: string | null;
+    /** The series highlighted while no mark is hovered, focused or selected. */
+    highlight: string | null;
+    /** The order of an earlier drawing of this graph (`arrange(...).order`): its items stay where they are. */
+    order: GraphOrder | undefined;
+    /** The graph's identity: a new key is a new graph (the frame shows all of it again); the same key while the graph changes keeps the zoom and pan. */
+    key: string;
+    /** Left to right, top to bottom, or by the width (`auto`: top to bottom below `NARROW` px). */
+    direction: 'auto' | 'across' | 'down';
+    /** The node table instead of the drawing. */
+    view: 'graph' | 'table';
+    /** A mark matrix shown in the frame as the table, or null. */
+    matrix: MarkMatrixInput | null;
+    /** Above this many marks, a node shows a bar of its counts. */
+    barAt: number;
+    /** The marks a hovered or selected series (or a mark's id, outside any series) lights; default: its own. */
+    related: ((key: string) => ReadonlySet<string>) | undefined;
+    strings: Partial<LayeredGraphStrings>;
+    matrixStrings: Partial<MarkMatrixStrings>;
+    /** Draws an icon of a node, a matrix header and the legend; default: `icon(name)`. */
+    renderIcon: (name: string) => unknown;
+    /** Styles for what `renderIcon` draws, added to the element's own. */
+    iconStyles: readonly CSSResult[];
+    /** The series (or a mark's id) under the pointer or focus. */
+    private hover;
+    /** Top to bottom. */
+    private down;
+    /** Where everything is drawn, from the sizes measured after the last render. */
+    private lay;
+    /** What the live region says: the item just selected, and its status. */
+    private announced;
+    private arr;
+    private words;
+    /** The graph, its nodes with their defaults. */
+    private drawn;
+    private nodes;
+    private clusters;
+    /** Each mark's series ('' outside any series), by its id. */
+    private markSeries;
+    /** Each group's focused mark (roving tabindex): one tab stop per group. */
+    private readonly active;
+    /** What the sizes were last measured for, what the layout was computed from, and the graph it is of. */
+    private measured;
+    private layKey;
+    private layFor;
+    private litCache;
+    private scrolled;
+    private readonly pz;
+    private readonly card;
+    /** This element as its views see it (`host.ts`), its private members included. */
+    private readonly h;
+    private matrixEl;
+    protected willUpdate(changed: Changed): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changed: PropertyValues<this>): void;
+    /**
+     * Put the focus on an item without selecting it: a node (its focused mark, else its
+     * name) or a cluster (its name); with null, or when it is not drawn, on the first
+     * thing to focus (in the `crumbs` slot, else the first node).
+     */
+    /** Put the focus on an item's open or close control (`toggle`), else on the item: where it was after the item was drawn again. */
+    focusToggle(id: string, tries?: number): void;
+    focusItem(id: string | null): void;
+    /** After a new selection: the card describes the item, the live region names it, and on a narrow screen the item is scrolled into view. */
+    private selectionChanged;
+    /** Measure what was drawn when the graph or the width changed; lay it out again when the structure or a size changed. */
+    private place;
+    /** Top to bottom on a narrow screen (`auto`); otherwise the whole graph in a frame, until the reader zooms or pans. */
+    private fit;
+    private readonly onEscape;
+    private select;
+    /** An item's action: its inner view when it has one. */
+    protected act(id: string): void;
+    private findMark;
+    /** The series (or mark id) highlighted: the one hovered or focused, else the selected mark's, else `highlight`; and the marks it lights. */
+    protected lit(): {
+        key: string | null;
+        on: ReadonlySet<string> | null;
+    };
+    private known;
+    render(): import("lit").TemplateResult<1>;
+    /** A mark matrix in the frame, at least as tall as the drawing was (and as the card needs), centred in it. */
+    private matrixView;
+    protected get laidOut(): boolean;
+    protected get asTable(): boolean;
+    protected focusSelect(id: string): void;
+    protected drill(id: string): void;
+    protected toggle(id: string, open: boolean): void;
+    protected showView(v: 'graph' | 'table'): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cae-layered-graph': CaeLayeredGraph;
+    }
+}
+export {};
+//# sourceMappingURL=layered-graph.d.ts.map

package/dist/graph/layered-graph.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layered-graph.d.ts","sourceRoot":"","sources":["../../src/graph/layered-graph.ts"],"names":[],"mappings":"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"}