@tellegen/svelte 0.4.3 → 0.4.5

package/dist/components/SchematicCanvas.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { MulticonductorCase } from '../state.svelte.js';
+import { type BasemapSpec } from '../basemap.js';
+type $$ComponentProps = {
+    mc: MulticonductorCase;
+    onselectbus: (id: string) => void;
+    onselectedge: (id: string) => void;
+    onclose: () => void;
+    /** The background map under geographic positions: the map's own basemap, light-themed. */
+    basemap?: BasemapSpec;
+};
+declare const SchematicCanvas: import("svelte").Component<$$ComponentProps, {}, "">;
+type SchematicCanvas = ReturnType<typeof SchematicCanvas>;
+export default SchematicCanvas;

package/dist/components/SolveCard.svelte

@@ -61,6 +61,12 @@
 							<dd class="mono">{iterations.length}</dd>
 						</div>
 					{/if}
+					{#if active.solveDetail}
+						<div>
+							<dt>Solve</dt>
+							<dd>{active.solveDetail}</dd>
+						</div>
+					{/if}
 					{#if server}
 						<div>
 							<dt>Solver</dt>

package/dist/components/schematic/PickCard.svelte

@@ -0,0 +1,126 @@
+<script lang="ts" generics="T extends { id: string }">
+	import type { Snippet } from 'svelte';
+	import type { HoverPin } from './view-prefs.svelte.js';
+
+	/** A card beside a point of the diagram listing what is drawn there (branches sharing a route,
+	 * buses at one point), so one can be picked. It opens on hover, stays while hovered, and is
+	 * pinned by its owner; it flips to the other side of the point near the stage's edge. */
+	let {
+		x,
+		y,
+		stage,
+		gap,
+		reach,
+		heading,
+		label,
+		rows,
+		pin,
+		selected,
+		onhover,
+		onpick,
+		cells
+	}: {
+		/** The point, in stage pixels. */
+		x: number;
+		y: number;
+		stage: { width: number; height: number };
+		/** Distance from the point to the card. */
+		gap: number;
+		/** Room the card needs to the right of the point before it flips left. */
+		reach: number;
+		heading: string;
+		label: string;
+		rows: T[];
+		pin: HoverPin;
+		selected: (row: T) => boolean;
+		onhover: (row: T | null) => void;
+		onpick: (row: T) => void;
+		cells: Snippet<[T]>;
+	} = $props();
+
+	const right = $derived(x + reach < stage.width);
+	const below = $derived(y + 180 < stage.height);
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions (Pointer bookkeeping only: the rows are buttons.) -->
+<div
+	class="card"
+	style:left={right ? `${x + gap}px` : null}
+	style:right={right ? null : `${stage.width - x + gap}px`}
+	style:top={below ? `${y + gap}px` : null}
+	style:bottom={below ? null : `${stage.height - y + gap}px`}
+	onpointerenter={() => pin.enterCard()}
+	onpointerleave={() => pin.leaveCard()}
+	onkeydown={(e) => {
+		if (e.key === 'Escape') pin.close();
+	}}
+>
+	<p>{heading}{pin.pinned !== null ? '' : ' · click to keep open'}</p>
+	<ul aria-label={label}>
+		{#each rows as row, i (i)}
+			<li>
+				<button
+					aria-pressed={selected(row)}
+					onpointerenter={() => onhover(row)}
+					onpointerleave={() => onhover(null)}
+					onclick={() => onpick(row)}>{@render cells(row)}</button
+				>
+			</li>
+		{/each}
+	</ul>
+</div>
+
+<style>
+	.card {
+		position: absolute;
+		z-index: 2;
+		width: max-content;
+		min-width: 280px;
+		max-width: 420px;
+		padding: 4px 6px;
+		font: 10px var(--font-mono);
+		color: var(--text-secondary);
+		background: var(--paper);
+		border: 1px solid var(--line);
+		border-radius: 3px;
+		box-shadow: var(--elev-1);
+	}
+	p {
+		margin: 0 0 3px;
+	}
+	ul {
+		margin: 0;
+		padding: 0;
+		list-style: none;
+	}
+	button {
+		display: grid;
+		grid-template-columns: minmax(0, 1fr) auto auto auto auto;
+		gap: 8px;
+		width: 100%;
+		padding: 2px 4px;
+		font: inherit;
+		text-align: left;
+		color: var(--ink);
+		background: none;
+		border: 0;
+		border-radius: 2px;
+		cursor: pointer;
+	}
+	button:hover,
+	button[aria-pressed='true'] {
+		background: var(--accent-soft);
+	}
+	/* Cells come from the owner's snippet. */
+	.card :global(.id) {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	.card :global(.violation) {
+		color: var(--text-danger);
+	}
+	.card :global(.warning) {
+		color: var(--accent);
+	}
+</style>

package/dist/components/schematic/PickCard.svelte.d.ts

@@ -0,0 +1,56 @@
+import type { Snippet } from 'svelte';
+import type { HoverPin } from './view-prefs.svelte.js';
+declare function $$render<T extends {
+    id: string;
+}>(): {
+    props: {
+        /** The point, in stage pixels. */
+        x: number;
+        y: number;
+        stage: {
+            width: number;
+            height: number;
+        };
+        /** Distance from the point to the card. */
+        gap: number;
+        /** Room the card needs to the right of the point before it flips left. */
+        reach: number;
+        heading: string;
+        label: string;
+        rows: T[];
+        pin: HoverPin;
+        selected: (row: T) => boolean;
+        onhover: (row: T | null) => void;
+        onpick: (row: T) => void;
+        cells: Snippet<[T]>;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends {
+    id: string;
+}> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends {
+        id: string;
+    }>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends {
+        id: string;
+    }>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const PickCard: $$IsomorphicComponent;
+type PickCard<T extends {
+    id: string;
+}> = InstanceType<typeof PickCard<T>>;
+export default PickCard;

package/dist/components/schematic/export.d.ts

@@ -0,0 +1,21 @@
+import type { Deck, OrthographicView } from '@deck.gl/core';
+import { type titleBlock } from '../../diagram/index.js';
+import type { SchematicScene } from './layers.js';
+type TitleBlock = ReturnType<typeof titleBlock>;
+export interface ExportView {
+    camera: {
+        target: [number, number, number];
+        zoom: number;
+    };
+    width: number;
+    height: number;
+}
+/** Hand a file to the viewer. */
+export declare function download(blob: Blob, name: string): void;
+/** A file name stem from a case label. */
+export declare const fileStem: (label: string) => string;
+/** The canvas as drawn, with a title block below it. */
+export declare function canvasPng(deck: Deck<OrthographicView>, canvas: HTMLCanvasElement, title: TitleBlock): Promise<Blob | null>;
+/** The visible region of a scene as vector SVG: lines, symbols, buses, the selection and labels. */
+export declare function sceneSvg(s: SchematicScene, view: ExportView, title: TitleBlock): string;
+export {};

package/dist/components/schematic/export.js

@@ -0,0 +1,110 @@
+import { fitText, TITLE_BLOCK_HEIGHT, viewportSvg } from '../../diagram/index.js';
+import { segmentColours, segmentWidths, strokeColours } from './paint.js';
+import { ACCENT, INK, PAPER, stateInk } from './palette.js';
+/** Hand a file to the viewer. */
+export function download(blob, name) {
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = name;
+    a.click();
+    setTimeout(() => URL.revokeObjectURL(url), 1000);
+}
+/** A file name stem from a case label. */
+export const fileStem = (label) => `${label.replace(/[^\w.-]+/g, '_')}-schematic`;
+/** The canvas as drawn, with a title block below it. */
+export function canvasPng(deck, canvas, title) {
+    // Read the drawing buffer in the same task as a forced draw, before it is cleared.
+    deck.redraw('export');
+    const k = canvas.width / canvas.clientWidth;
+    const out = document.createElement('canvas');
+    const ctx = out.getContext('2d');
+    if (!ctx)
+        return Promise.resolve(null);
+    out.width = canvas.width;
+    out.height = canvas.height + TITLE_BLOCK_HEIGHT * k;
+    ctx.fillStyle = 'rgb(252 251 247)';
+    ctx.fillRect(0, 0, out.width, out.height);
+    ctx.drawImage(canvas, 0, 0);
+    for (const [col, lines] of [title.left, title.right].entries())
+        lines.forEach((line, i) => {
+            const lead = col === 0 && i === 0;
+            ctx.font = `${lead ? '600 ' : ''}${(lead ? 12 : 11) * k}px "IBM Plex Mono", monospace`;
+            ctx.fillStyle = lead ? 'rgb(32 36 43)' : 'rgb(77 81 86)';
+            ctx.fillText(fitText(line, canvas.clientWidth / 2), (col * out.width) / 2 + 12 * k, canvas.height + (18 + i * 15) * k);
+        });
+    return new Promise((resolve) => out.toBlob(resolve, 'image/png'));
+}
+/** The visible region of a scene as vector SVG: lines, symbols, buses, the selection and labels. */
+export function sceneSvg(s, view, title) {
+    const { camera, width, height } = view;
+    const d = s.drawn;
+    const scale = 2 ** camera.zoom;
+    const x0 = camera.target[0] - width / 2 / scale;
+    const y0 = camera.target[1] - height / 2 / scale;
+    const css = (c) => `rgb(${c[0]} ${c[1]} ${c[2]})`;
+    const symbols = s.symbols;
+    return viewportSvg({
+        bounds: [x0, y0, x0 + width / scale, y0 + height / scale],
+        scale,
+        width: Math.round(width),
+        height: Math.round(height),
+        background: css(PAPER),
+        ink: css(INK),
+        muted: 'rgb(77 81 86)',
+        lineSets: [
+            {
+                sources: d.sources,
+                targets: d.targets,
+                colors: segmentColours(d, s.edgeColours, s.edgeMv, s.zoomedOut, s.fan),
+                count: d.segmentEdge.length,
+                widths: segmentWidths(d, s.edgeMv, s.colour !== 'none')
+            },
+            ...(symbols
+                ? [
+                    {
+                        sources: symbols.sources,
+                        targets: symbols.targets,
+                        colors: strokeColours(symbols.owner, s.fan.edges, s.live),
+                        count: symbols.sources.length / 3,
+                        width: 1.25
+                    },
+                    ...(s.ticksOn
+                        ? [
+                            {
+                                sources: symbols.ticks.sources,
+                                targets: symbols.ticks.targets,
+                                colors: strokeColours(symbols.ticks.edge, s.fan.edges, s.live),
+                                count: symbols.ticks.edge.length,
+                                width: 1
+                            }
+                        ]
+                        : [])
+                ]
+                : [])
+        ],
+        points: {
+            positions: s.geometry.positions,
+            colors: Uint8Array.from(s.busColours.flat()),
+            count: s.graph.buses.length,
+            radius: 2.6
+        },
+        markers: s.selectedBus >= 0
+            ? [
+                {
+                    position: s.geometry.positions.subarray(s.selectedBus * 3, s.selectedBus * 3 + 2),
+                    radius: 7,
+                    stroke: css(ACCENT)
+                }
+            ]
+            : [],
+        texts: s.labels.map((l) => ({
+            position: l.position,
+            text: l.text,
+            dx: 6,
+            dy: -8,
+            color: css(stateInk(l.state))
+        })),
+        title
+    });
+}

package/dist/components/schematic/layers.d.ts

@@ -0,0 +1,161 @@
+import type { Layer } from '@deck.gl/core';
+import type { RGBA } from '../../colors.js';
+import type { DistGraph } from '@tellegen/engine';
+import { type BusStacks, type EquipmentItem, type EquipmentSymbols, type FannedBranch, type LabelCandidate, type Landmark, type ResultSnapshot, type SchematicGeometry, type ZoneCorridor, type ZoneState } from '../../diagram/index.js';
+import { type FanState } from './paint.js';
+/** The deck.gl modules, imported on demand. */
+export interface DeckKit {
+    core: typeof import('@deck.gl/core');
+    layers: typeof import('@deck.gl/layers');
+}
+export type Colour = 'none' | 'voltage-band' | 'loading-heat';
+/** Screen radius of a spread stack of `n` buses: wider for more, so their symbols stay apart. */
+export declare const stackRadius: (n: number) => number;
+/** Buses gliding between layouts along straight chords. */
+export declare function morphLayers(kit: DeckKit, morph: {
+    s: Float32Array;
+    t: Float32Array;
+    cur: Float32Array;
+    endpoints: Int32Array;
+}, busCount: number): Layer[];
+/** Per-canvas memory of layer data. deck.gl compares a layer's `data` by reference, so a layer
+ * whose inputs did not change gets the same data and is left alone: a hover or selection change
+ * rebuilds only the small highlight layers, not 50,000 segment colours and every label. */
+/** Columnar layer data: a count and typed-array attributes. */
+type BinaryData = {
+    length: number;
+    attributes: Record<string, {
+        value: Float32Array | Uint8Array;
+        size: number;
+        normalized?: boolean;
+    }>;
+};
+export declare function createLayerCache(): {
+    branches: (keys: unknown[], compute: () => BinaryData) => BinaryData;
+    underlay: (keys: unknown[], compute: () => BinaryData) => BinaryData;
+    equipment: (keys: unknown[], compute: () => BinaryData) => BinaryData;
+    ticks: (keys: unknown[], compute: () => BinaryData) => BinaryData;
+    arrows: (keys: unknown[], compute: () => BinaryData) => BinaryData;
+    itemTexts: (keys: unknown[], compute: () => EquipmentItem[]) => EquipmentItem[];
+    transformerTexts: (keys: unknown[], compute: () => EquipmentItem[]) => EquipmentItem[];
+    zoneTags: (keys: unknown[], compute: () => {
+        z: number;
+        text: string;
+        position: [number, number];
+        width: number;
+    }[]) => {
+        z: number;
+        text: string;
+        position: [number, number];
+        width: number;
+    }[];
+    corridors: (keys: unknown[], compute: () => {
+        segments: {
+            z: number;
+            s: number;
+        }[];
+        buses: {
+            z: number;
+            i: number;
+        }[];
+    }) => {
+        segments: {
+            z: number;
+            s: number;
+        }[];
+        buses: {
+            z: number;
+            i: number;
+        }[];
+    };
+    segmentsOf: (keys: unknown[], compute: () => Map<number, number[]>) => Map<number, number[]>;
+};
+export type LayerCache = ReturnType<typeof createLayerCache>;
+/** Everything one frame of the diagram draws, as the canvas derives it. */
+export interface SchematicScene {
+    graph: DistGraph;
+    layout: 'schematic' | 'source';
+    colour: Colour;
+    /** The layout on screen, before stacks spread. */
+    shown: SchematicGeometry;
+    /** Bus positions as drawn (stacks spread). */
+    geometry: SchematicGeometry;
+    /** Branch segments as drawn (cut under symbols when they show). */
+    drawn: SchematicGeometry;
+    /** Equipment symbols, when they are legible. */
+    symbols: EquipmentSymbols | null;
+    ticksOn: boolean;
+    valuesOn: boolean;
+    /** Terminal and transformer labels beside the symbols, at the deepest zoom. */
+    labelsOn: boolean;
+    zoomedOut: boolean;
+    live: {
+        edges: ArrayLike<boolean | number>;
+        buses: ArrayLike<boolean | number>;
+    };
+    edgeColours: RGBA[];
+    busColours: RGBA[];
+    edgeMv: Uint8Array;
+    snapshot: ResultSnapshot | null;
+    /** Changes when attachment powers change (a text trigger). */
+    powers: unknown;
+    itemText: (d: EquipmentItem) => string;
+    arrows: {
+        edge: Int32Array;
+        sources: Float32Array;
+        targets: Float32Array;
+    } | null;
+    selectedBus: number;
+    selectedEdges: Set<number>;
+    hoveredBus: number;
+    hoveredEdges: Set<number>;
+    cursor: number;
+    labels: (LabelCandidate & {
+        position: [number, number];
+    })[];
+    marks: {
+        placed: Landmark[];
+        strokes: {
+            sources: Float32Array;
+            targets: Float32Array;
+            owner: Int32Array;
+        };
+    } | null;
+    markName: Map<string, string>;
+    mvBuses: number[];
+    allBuses: number[];
+    zones: {
+        states: ZoneState[];
+        shapes: {
+            z: number;
+            polygon: [number, number][];
+        }[];
+        tags: {
+            z: number;
+            text: string;
+            position: [number, number];
+            width: number;
+        }[];
+        tagZoom: number;
+        corridors: ZoneCorridor[];
+    };
+    /** Where the pointer is in the network: its network's branches faintly, its feeder's strongly,
+     * the path back to the source when shown, and the network's supply point. */
+    hover: {
+        network: Set<number>;
+        feeder: Set<number>;
+        path: Set<number>;
+        supply: [number, number] | null;
+        tint: RGBA;
+    } | null;
+    stacks: BusStacks | null;
+    spreadStacks: number[];
+    /** Changes whenever attachment text would (the canvas's text source). */
+    textSource: unknown;
+    cache: LayerCache;
+    fans: FannedBranch[];
+    fannedGroups: number[];
+    fan: FanState;
+}
+export declare function sceneLayers(kit: DeckKit, s: SchematicScene): Layer[];
+export {};