@parallelworks/ui 0.40.0 → 0.40.1

package/dist/graph/lineage.js

@@ -0,0 +1,94 @@
+import { Store, useStore } from "./store.js";
+import { createContext, useContext } from "react";
+//#region src/graph/lineage.ts
+/**
+* The hovered job's lineage on one graph level: the jobs it leads to or follows from, by hops. Each
+* node, connector and dot reads only its own part of it, so hovering re-renders those whose highlight
+* changes and nothing else, however large the graph.
+*/
+var Lineage = class extends Store {
+	/** Hops from the hovered job, or none while no job is. */
+	hovered = null;
+	/** The lineage shown, kept after unhover while its highlight draws back out. */
+	shown = null;
+	furthest = 0;
+	timer;
+	walk;
+	/** Seconds each hop of the highlight takes. */
+	animT;
+	/** How deeply the level nests, which names the classes that dim it. */
+	depth;
+	/** Whether its nodes fade as they dim, rather than dim at once. */
+	fade;
+	constructor(walk, { animT, depth = 0, fade = true }) {
+		super();
+		this.walk = walk;
+		this.animT = animT;
+		this.depth = depth;
+		this.fade = fade;
+	}
+	get hovering() {
+		return this.hovered !== null;
+	}
+	/** Whether a lineage shows, hovered or drawing out. */
+	get showing() {
+		return this.shown !== null;
+	}
+	hover = (job) => {
+		clearTimeout(this.timer);
+		this.hovered = job === null ? null : this.walk(job);
+		if (this.hovered) {
+			this.shown = this.hovered;
+			this.furthest = 0;
+			for (const hops of this.hovered.values()) this.furthest = Math.max(this.furthest, hops);
+		} else if (this.shown) this.timer = setTimeout(() => {
+			this.shown = null;
+			this.furthest = 0;
+			this.notify();
+		}, ((this.furthest + 1) * this.animT + .2) * 1e3);
+		this.notify();
+	};
+	/** Stops a draw-out still to finish, as the level goes. */
+	dispose() {
+		clearTimeout(this.timer);
+	}
+	/** A node's highlight: 2 in the hovered lineage, 1 drawing out of it, 0 neither. */
+	node(job) {
+		return this.hovered?.has(job) ? 2 : this.shown?.has(job) ? 1 : 0;
+	}
+	/**
+	* A dot's or connector's highlight between `from` and `to` (a dot's both the same job), as one
+	* value React compares: none, or lit or drawing out, its delay, and whether it draws from `to`.
+	*/
+	between(from, to) {
+		const shown = this.shown;
+		const fromHops = shown?.get(from);
+		const toHops = shown?.get(to);
+		if (fromHops === void 0 || toHops === void 0) return "";
+		const lit = !!this.hovered?.has(from) && this.hovered.has(to);
+		const closer = Math.min(fromHops, toHops);
+		const delay = (lit ? closer : this.furthest - closer) * this.animT;
+		return `${lit ? "lit" : "out"} ${delay} ${toHops < fromHops ? "back" : "on"}`;
+	}
+};
+/** A highlight `between` describes, read back. */
+function highlightOf(value) {
+	const [state = "", delay = "0", direction] = value.split(" ");
+	return {
+		lit: state === "lit",
+		out: state === "out",
+		delay: Number(delay),
+		back: direction === "back"
+	};
+}
+var LineageContext = createContext(null);
+/** Part of the enclosing level's lineage, re-rendering only when that part changes. */
+function useLineage(read, none) {
+	return useStore(useContext(LineageContext), read, none);
+}
+/** The enclosing level's lineage, for what hovers it. */
+function useLineageStore() {
+	return useContext(LineageContext);
+}
+//#endregion
+export { Lineage, LineageContext, highlightOf, useLineage, useLineageStore };

package/dist/graph/store.d.ts

@@ -0,0 +1,10 @@
+/** State components read part of, each re-rendering only when its part changes. */
+export declare class Store {
+    /** Counts changes, so what follows the whole of a store can tell one happened. */
+    version: number;
+    private readonly listeners;
+    subscribe: (listener: () => void) => () => void;
+    protected notify(): void;
+}
+/** What `read` takes from `store`, re-rendering when it changes; `none` without a store. */
+export declare function useStore<S extends Store, T extends string | number>(store: S | null, read: (store: S) => T, none: T): T;

package/dist/graph/store.js

@@ -0,0 +1,25 @@
+import { useSyncExternalStore } from "react";
+//#region src/graph/store.ts
+/** State components read part of, each re-rendering only when its part changes. */
+var Store = class {
+	/** Counts changes, so what follows the whole of a store can tell one happened. */
+	version = 0;
+	listeners = /* @__PURE__ */ new Set();
+	subscribe = (listener) => {
+		this.listeners.add(listener);
+		return () => {
+			this.listeners.delete(listener);
+		};
+	};
+	notify() {
+		this.version++;
+		for (const listener of this.listeners) listener();
+	}
+};
+var noSubscription = () => () => {};
+/** What `read` takes from `store`, re-rendering when it changes; `none` without a store. */
+function useStore(store, read, none) {
+	return useSyncExternalStore(store?.subscribe ?? noSubscription, () => store ? read(store) : none, () => none);
+}
+//#endregion
+export { Store, useStore };

package/dist/graph/viewport.d.ts

@@ -0,0 +1,40 @@
+/** How far out the view zooms: far enough to show the shape of a graph of thousands of jobs. */
+export declare const MIN_SCALE = 0.01;
+/** How far in the view zooms, past where a fit stops, to read a node up close. */
+export declare const MAX_SCALE = 2;
+/** The closest a fit comes, where a small graph's nodes read at a comfortable size. */
+export declare const FIT_MAX_SCALE = 0.6;
+/** An exponent of the scale, so presses in and out change it by the same factor. */
+export declare const ZOOM_STEP = 0.25;
+export interface View {
+    x: number;
+    y: number;
+    scale: number;
+}
+export interface Bounds {
+    minX: number;
+    minY: number;
+    maxX: number;
+    maxY: number;
+}
+/** The way the view can zoom no further, if it is at a limit. */
+export declare function zoomLimit(scale: number): 'in' | 'out' | null;
+/** The view scaled by `factor` about `at`, a point in the panel, which stays where it is. */
+export declare function zoomAround(view: View, at: {
+    x: number;
+    y: number;
+}, factor: number): View;
+/** The factor a wheel event scales the view by, the same at every zoom. */
+export declare function wheelFactor(event: Pick<WheelEvent, 'deltaY' | 'deltaMode' | 'ctrlKey'>): number;
+/** The space a fit leaves around a graph in a panel. */
+export declare function fitMargin(panel: {
+    width: number;
+    height: number;
+}): number;
+/** The view that shows all of `bounds` in a panel from its top left, no closer than a fit comes. */
+export declare function fitView(bounds: Bounds, panel: {
+    width: number;
+    height: number;
+}): View | null;
+/** The least shift that brings [start, end] inside [low, high]; none when it can't all fit, so the view stays. */
+export declare function intoView(start: number, end: number, low: number, high: number): number;

package/dist/graph/viewport.js

@@ -0,0 +1,56 @@
+//#region src/graph/viewport.ts
+/** How far out the view zooms: far enough to show the shape of a graph of thousands of jobs. */
+var MIN_SCALE = .01;
+/** The closest a fit comes, where a small graph's nodes read at a comfortable size. */
+var FIT_MAX_SCALE = .6;
+/** An exponent of the scale, so presses in and out change it by the same factor. */
+var ZOOM_STEP = .25;
+var clampScale = (scale) => Math.min(2, Math.max(MIN_SCALE, scale));
+/** The way the view can zoom no further, if it is at a limit. */
+function zoomLimit(scale) {
+	return scale >= 1.998 ? "in" : scale <= .01001 ? "out" : null;
+}
+/** The view scaled by `factor` about `at`, a point in the panel, which stays where it is. */
+function zoomAround(view, at, factor) {
+	const scale = clampScale(view.scale * factor);
+	return {
+		x: at.x - (at.x - view.x) / view.scale * scale,
+		y: at.y - (at.y - view.y) / view.scale * scale,
+		scale
+	};
+}
+var LINE_PX = 16;
+var PAGE_PX = 800;
+var WHEEL_RATE = .002;
+var PINCH_RATE = .01;
+var MAX_WHEEL_PX = 120;
+/** The factor a wheel event scales the view by, the same at every zoom. */
+function wheelFactor(event) {
+	const px = event.deltaY * (event.deltaMode === 1 ? LINE_PX : event.deltaMode === 2 ? PAGE_PX : 1);
+	return Math.exp(-Math.max(-120, Math.min(MAX_WHEEL_PX, px)) * (event.ctrlKey ? PINCH_RATE : WHEEL_RATE));
+}
+/** The space a fit leaves around a graph in a panel. */
+function fitMargin(panel) {
+	return Math.min(panel.width, panel.height) * .05;
+}
+/** The view that shows all of `bounds` in a panel from its top left, no closer than a fit comes. */
+function fitView(bounds, panel) {
+	const width = bounds.maxX - bounds.minX;
+	const height = bounds.maxY - bounds.minY;
+	if (width <= 0 || height <= 0) return null;
+	const margin = fitMargin(panel);
+	const scale = Math.max(MIN_SCALE, Math.min((panel.width - margin * 2) / width, (panel.height - margin * 2) / height, FIT_MAX_SCALE));
+	return {
+		x: margin - bounds.minX * scale,
+		y: margin - bounds.minY * scale,
+		scale
+	};
+}
+/** The least shift that brings [start, end] inside [low, high]; none when it can't all fit, so the view stays. */
+function intoView(start, end, low, high) {
+	if (end - start > high - low) return 0;
+	if (start < low) return low - start;
+	return end > high ? high - end : 0;
+}
+//#endregion
+export { FIT_MAX_SCALE, MIN_SCALE, ZOOM_STEP, fitMargin, fitView, intoView, wheelFactor, zoomAround, zoomLimit };