@mstone6969/graph 0.0.0-stage → 0.1.0

package/dist/core/Chart3D.js

@@ -0,0 +1,292 @@
+import { Chart } from "./Chart.js";
+import { ChartExportError, ExportErrorCode } from "./ChartExportError.js";
+import { ChartExporter } from "./ChartExporter.js";
+import { Context3D } from "./Context3D.js";
+import { LegendPosition } from "./enums.js";
+import { SceneOverlay } from "./SceneOverlay.js";
+import { AmbientLight, Color, DirectionalLight, Group, HemisphereLight, Mesh, PCFSoftShadowMap, PerspectiveCamera, Raycaster, Scene, Timer, Vector2, WebGLRenderer } from "three";
+import { OrbitControls } from "three/addons/controls/OrbitControls.js";
+import { CSS2DRenderer } from "three/addons/renderers/CSS2DRenderer.js";
+// src/core/Chart3D.ts
+var rad = Math.PI / 180;
+/** three.js stage: renderer, camera, lights, orbit controls, picking, HTML overlay and disposal. Subclasses implement `build`. */
+var Chart3D = class Chart3D extends Chart {
+	static shared = null;
+	renderer = null;
+	overlay = null;
+	controls = null;
+	camera = new PerspectiveCamera(38, 1.6, .01, 100);
+	scene = null;
+	ctx = null;
+	frame = 0;
+	timer = new Timer();
+	ray = new Raycaster();
+	legendEl = null;
+	compose(animated) {
+		const scene = new Scene();
+		scene.background = new Color(this.theme.surface);
+		const ctx = new Context3D(new Group(), this.theme, this.palette, animated);
+		scene.add(ctx.root);
+		this.light(scene);
+		if (this.options.data != null) this.build(ctx);
+		return {
+			scene,
+			ctx
+		};
+	}
+	light(scene) {
+		const key = new DirectionalLight("#ffffff", 2.2);
+		key.position.set(2.5, 4, 3);
+		key.castShadow = true;
+		key.shadow.mapSize.set(1024, 1024);
+		Object.assign(key.shadow.camera, {
+			left: -2,
+			right: 2,
+			top: 2,
+			bottom: -2
+		});
+		key.shadow.bias = -5e-4;
+		scene.add(key, new AmbientLight("#ffffff", .5), new HemisphereLight("#ffffff", this.theme.surface, .8));
+	}
+	place(camera) {
+		const { azimuth = 38, elevation = 26, distance = 5.4 } = this.options;
+		const cos = Math.cos(elevation * rad);
+		camera.position.set(distance * cos * Math.sin(azimuth * rad), distance * Math.sin(elevation * rad), distance * cos * Math.cos(azimuth * rad));
+		camera.lookAt(0, -.05, 0);
+	}
+	paint() {
+		const { width, height } = this.size;
+		this.clearScene();
+		if (!this.renderer) {
+			const renderer = this.renderer = new WebGLRenderer({ antialias: true });
+			renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
+			renderer.shadowMap.enabled = true;
+			renderer.shadowMap.type = PCFSoftShadowMap;
+			this.host.appendChild(renderer.domElement);
+			renderer.domElement.setAttribute("role", "img");
+			renderer.domElement.style.display = "block";
+			const overlay = this.overlay = new CSS2DRenderer();
+			Object.assign(overlay.domElement.style, {
+				position: "absolute",
+				inset: "0",
+				pointerEvents: "none"
+			});
+			this.host.appendChild(overlay.domElement);
+			this.controls = new OrbitControls(this.camera, renderer.domElement);
+			this.controls.enableDamping = true;
+			this.controls.target.set(0, -.05, 0);
+			this.controls.addEventListener("start", () => {
+				this.controls.autoRotate = false;
+			});
+			renderer.domElement.addEventListener("pointermove", this.onPointer);
+			renderer.domElement.addEventListener("pointerleave", () => this.untip());
+			this.place(this.camera);
+			renderer.setAnimationLoop(() => this.tick());
+		}
+		this.renderer.domElement.setAttribute("aria-label", this.label);
+		this.renderer.setSize(width, height);
+		this.overlay.setSize(width, height);
+		this.camera.aspect = width / height;
+		this.camera.updateProjectionMatrix();
+		this.controls.autoRotate = this.options.autoRotate ?? false;
+		const { scene, ctx } = this.compose(this.animated);
+		this.scene = scene;
+		this.ctx = ctx;
+		this.timer.reset();
+		this.drawLegend();
+	}
+	tick() {
+		if (!this.scene || !this.renderer) return;
+		this.timer.update();
+		const t = this.timer.getElapsed();
+		for (const fn of this.ctx.frames) fn(t);
+		this.controls.update();
+		this.renderer.render(this.scene, this.camera);
+		this.overlay.render(this.scene, this.camera);
+	}
+	onPointer = (event) => {
+		const box = event.target.getBoundingClientRect();
+		this.ray.setFromCamera(new Vector2((event.clientX - box.left) / box.width * 2 - 1, -((event.clientY - box.top) / box.height) * 2 + 1), this.camera);
+		const picks = this.ctx?.picks;
+		const hit = picks?.size ? this.ray.intersectObjects([...picks.keys()], true)[0] : void 0;
+		if (!hit) return this.untip();
+		let owner = hit.object;
+		while (owner && !picks.has(owner)) owner = owner.parent;
+		if (owner) this.tip(event, picks.get(owner)(hit.instanceId ?? 0));
+	};
+	drawLegend() {
+		this.legendEl?.remove();
+		const items = this.palette.items();
+		const header = [this.options.title, this.options.subtitle].filter(Boolean);
+		if (!header.length && (items.length < 2 || this.legendPosition === LegendPosition.None)) return;
+		const el = this.legendEl = document.createElement("div");
+		Object.assign(el.style, {
+			position: "absolute",
+			top: "10px",
+			left: "14px",
+			font: `12px ${this.theme.fontFamily}`,
+			color: this.theme.inkSecondary,
+			pointerEvents: "none"
+		});
+		header.forEach((text, i) => {
+			const line = el.appendChild(document.createElement("div"));
+			line.textContent = text;
+			if (i === 0 && this.options.title) Object.assign(line.style, {
+				font: `600 15px ${this.theme.fontFamily}`,
+				color: this.theme.ink
+			});
+		});
+		if (items.length >= 2 && this.legendPosition !== LegendPosition.None) {
+			const row = el.appendChild(document.createElement("div"));
+			Object.assign(row.style, {
+				display: "flex",
+				gap: "12px",
+				marginTop: "6px",
+				flexWrap: "wrap"
+			});
+			for (const item of items) {
+				const entry = row.appendChild(document.createElement("span"));
+				const swatch = entry.appendChild(document.createElement("i"));
+				Object.assign(swatch.style, {
+					display: "inline-block",
+					width: "10px",
+					height: "10px",
+					borderRadius: "3px",
+					background: item.color,
+					marginRight: "5px"
+				});
+				entry.append(item.label ?? item.key);
+			}
+		}
+		this.host.appendChild(el);
+	}
+	clearScene() {
+		this.scene?.traverse((object) => {
+			if (object instanceof Mesh || "geometry" in object) object.geometry?.dispose?.();
+			const material = object.material;
+			for (const item of [material].flat()) item?.dispose?.();
+			if ("element" in object) object.element?.remove?.();
+		});
+		this.scene = null;
+		this.ctx = null;
+	}
+	teardown() {
+		this.renderer?.setAnimationLoop(null);
+		this.clearScene();
+		this.controls?.dispose();
+		this.legendEl?.remove();
+		this.overlay?.domElement.remove();
+		this.renderer?.domElement.remove();
+		this.renderer?.dispose();
+		this.renderer = this.overlay = this.controls = null;
+	}
+	/** Works without WebGL: builds the scene and hashes its geometry and transforms. */
+	signature() {
+		this.render();
+		const { scene } = this.compose(false);
+		scene.updateMatrixWorld(true);
+		const parts = [];
+		scene.traverse((object) => {
+			const geometry = object.geometry;
+			if (!geometry && !object.isCSS2DObject) return;
+			const position = geometry?.getAttribute("position");
+			const instances = object.instanceMatrix?.array;
+			parts.push(`${object.type}:${position?.count ?? 0}:${checksum(position?.array)}:${checksum(instances)}:${checksum(object.matrixWorld.elements)}`);
+		});
+		return parts.join("|");
+	}
+	/** PNG data URL from one shared renderer, so galleries never run out of WebGL contexts. */
+	thumbnail(width = 320, height = 200) {
+		this.render();
+		const renderer = Chart3D.shared ??= new WebGLRenderer({
+			antialias: true,
+			preserveDrawingBuffer: true
+		});
+		renderer.shadowMap.enabled = true;
+		renderer.setSize(width, height);
+		const camera = new PerspectiveCamera(38, width / height, .01, 100);
+		this.place(camera);
+		const { scene } = this.compose(false);
+		renderer.render(scene, camera);
+		return renderer.domElement.toDataURL("image/png");
+	}
+	/**
+	* The current camera view. A mounted chart redraws from its own renderer at `scale`, with any entry
+	* animation finished, then returns to its normal resolution in the same task, so the page never shows it.
+	*/
+	async rasterize(scale) {
+		await this.ready();
+		const { renderer, scene, camera } = this;
+		if (!renderer || !scene) return this.#rasterizeOffscreen(scale);
+		this.ctx.settle();
+		const ratio = renderer.getPixelRatio();
+		try {
+			renderer.setPixelRatio(scale);
+			return this.#capture(renderer, scene, camera, scale);
+		} finally {
+			renderer.setPixelRatio(ratio);
+			renderer.render(scene, camera);
+		}
+	}
+	#rasterizeOffscreen(scale) {
+		this.render();
+		const renderer = Chart3D.#exportRenderer();
+		const { width, height } = this.size;
+		renderer.setPixelRatio(scale);
+		renderer.setSize(width, height, false);
+		const camera = new PerspectiveCamera(38, width / height, .01, 100);
+		this.place(camera);
+		const { scene } = this.compose(false);
+		this.scene = scene;
+		try {
+			return this.#capture(renderer, scene, camera, scale);
+		} finally {
+			renderer.setPixelRatio(1);
+			this.clearScene();
+		}
+	}
+	static #exportRenderer() {
+		try {
+			const renderer = Chart3D.shared ??= new WebGLRenderer({
+				antialias: true,
+				preserveDrawingBuffer: true
+			});
+			renderer.shadowMap.enabled = true;
+			return renderer;
+		} catch (cause) {
+			throw new ChartExportError(ExportErrorCode.Encoding, "PNG export of a 3D chart needs WebGL, which this browser could not provide.", { cause });
+		}
+	}
+	/** Copies the frame in the task that drew it: the renderer does not keep its drawing buffer between frames. Sizes come from the renderer, which a resize reaches a frame after the host. */
+	#capture(renderer, scene, camera, scale) {
+		const { x: width, y: height } = renderer.getSize(new Vector2());
+		const context = renderer.getContext(), { drawingBufferWidth, drawingBufferHeight } = context;
+		if (context.isContextLost()) throw new ChartExportError(ExportErrorCode.Encoding, "This chart lost its WebGL context, usually because the page opened too many. Reload it to export.");
+		if (drawingBufferWidth < Math.floor(width * scale) || drawingBufferHeight < Math.floor(height * scale)) throw new ChartExportError(ExportErrorCode.Encoding, `Scale ${scale} is beyond this GPU's ${drawingBufferWidth}×${drawingBufferHeight} limit for a ${width}×${height} chart. Try a smaller scale.`);
+		renderer.render(scene, camera);
+		const output = ChartExporter.canvas(renderer.domElement.width, renderer.domElement.height);
+		const paint = ChartExporter.paint(output);
+		paint.drawImage(renderer.domElement, 0, 0);
+		const { title, subtitle } = this.options;
+		const items = this.legendPosition === LegendPosition.None || this.palette.items().length < 2 ? [] : this.palette.items();
+		SceneOverlay.paint(paint, scene, camera, {
+			width,
+			height
+		}, output.width / width, this.theme, {
+			title,
+			subtitle,
+			items
+		});
+		return output;
+	}
+};
+function checksum(values) {
+	if (!values) return "-";
+	let hash = 0;
+	for (let i = 0; i < values.length; i++) {
+		if (!Number.isFinite(values[i])) return "NaN";
+		hash = hash * 31 + Math.round(values[i] * 1e3) | 0;
+	}
+	return `${values.length}:${hash}`;
+}
+export { Chart3D };

package/dist/core/ChartBrush.js

@@ -0,0 +1,162 @@
+import { AxisWindow } from "./AxisWindow.js";
+import { brush, brushX, brushY } from "d3";
+// src/core/ChartBrush.ts
+var FORWARD = "mousedown.viewbrush touchstart.viewbrush";
+/** A touch stays with the mark it began on, so its moves never reach the brush unless they are passed on too. */
+var TRAIL = "touchmove.viewbrush touchend.viewbrush touchcancel.viewbrush";
+/** Presses that start a brush: on the plot and its marks, not on axes or buttons. */
+var PLOT = ".g-plot > g:not(.m-axis-x,.m-axis-y,.m-axis-title,.m-brush,.m-zoom-controls)";
+var ordered = (part) => part.length === 2 && typeof part[0] !== "string" ? [...part].sort((a, b) => +a - +b) : part;
+/** Safari has no `TouchEvent` constructor, and d3-brush reads only the touch lists. */
+var relay = (event) => event.touches ? Object.assign(new Event(event.type, {
+	bubbles: true,
+	cancelable: true
+}), {
+	touches: event.touches,
+	targetTouches: event.targetTouches,
+	changedTouches: event.changedTouches
+}) : new event.constructor(event.type, event);
+/**
+* A d3-brush that remembers its selection in data terms, so it follows the scales as they zoom.
+* Its overlay ignores the pointer so marks keep their tooltips; presses on the plot are passed to it instead.
+*/
+var ChartBrush = class {
+	#host;
+	#behavior = null;
+	#mode = "";
+	#group = null;
+	#node = null;
+	#x = null;
+	#y = null;
+	#size = [0, 0];
+	#range = null;
+	#held = false;
+	#live = false;
+	#touching = false;
+	constructor(host) {
+		this.#host = host;
+	}
+	get range() {
+		return this.#range;
+	}
+	/** `x` and `y` are the scales the brush runs along; leave one out for a one-axis brush. */
+	draw(ctx, x, y) {
+		const { width, height } = ctx.plot, { theme } = ctx;
+		const mode = `${x ? "x" : ""}${y ? "y" : ""}`;
+		const group = ctx.group("brush");
+		this.#x = x;
+		this.#y = y;
+		this.#size = [width, height];
+		this.#group = group;
+		if (mode !== this.#mode || group.node() !== this.#node) this.#bind(ctx, mode, group);
+		this.#behavior.extent([[0, 0], [width, height]]);
+		if (this.#live) return;
+		group.call(this.#behavior);
+		group.select(".overlay").attr("pointer-events", "none");
+		group.select(".selection").attr("fill", theme.inkMuted).attr("fill-opacity", .18).attr("stroke", theme.axis);
+		this.#place();
+	}
+	/** Removes the brush and forgets its selection. */
+	remove(root) {
+		if (!this.#behavior && !this.#range) return;
+		root.on(`${FORWARD} ${TRAIL}`, null);
+		this.#group?.remove();
+		this.#endDrag();
+		this.#behavior = this.#group = this.#node = this.#range = null;
+		this.#mode = "";
+	}
+	/** The chart left the page. The selection stays for a later mount; a drag still under way reports nothing more. */
+	release() {
+		this.#behavior = this.#group = this.#node = null;
+		this.#live = this.#touching = false;
+	}
+	/** Axes this brush does not run along are ignored; a range on none of them changes nothing. */
+	set(range) {
+		const kept = range && this.#onAxes(range);
+		if (range && !kept) return;
+		this.#range = kept;
+		this.#place();
+		this.#host.brushed(kept, true);
+	}
+	#onAxes({ x, y }) {
+		const kept = {};
+		if (this.#x && x?.length) kept.x = ordered(x);
+		if (this.#y && y?.length) kept.y = ordered(y);
+		return kept.x || kept.y ? kept : null;
+	}
+	#endDrag() {
+		this.#touching = false;
+		if (!this.#live) return;
+		this.#live = false;
+		this.#host.gesture(false);
+	}
+	#bind(ctx, mode, group) {
+		group.on(".brush", null).selectAll("*").remove();
+		this.#endDrag();
+		this.#range &&= this.#onAxes(this.#range);
+		this.#mode = mode;
+		this.#node = group.node();
+		this.#behavior = (mode === "xy" ? brush() : mode === "x" ? brushX() : brushY()).on("start brush end", (event) => this.#moved(event));
+		ctx.root.on(FORWARD, (event) => {
+			const overlay = group.select(".overlay").node();
+			if (!overlay || event.button || event.ctrlKey || event.shiftKey || !event.target.closest(PLOT)) return;
+			event.preventDefault();
+			event.stopImmediatePropagation();
+			this.#touching = !!event.touches;
+			overlay.dispatchEvent(relay(event));
+		});
+		ctx.root.on(TRAIL, (event) => {
+			if (!this.#touching || event.target.closest(".m-brush")) return;
+			event.preventDefault();
+			if (!event.touches.length) this.#touching = false;
+			group.select(".overlay").node()?.dispatchEvent(relay(event));
+		});
+	}
+	#moved(event) {
+		if (!event.sourceEvent || event.target !== this.#behavior) return;
+		if (event.type === "start") {
+			this.#live = true;
+			this.#held = !!this.#range;
+			this.#host.gesture(true);
+			return;
+		}
+		const range = this.#read(event.selection);
+		this.#range = range;
+		if (event.type === "brush") {
+			if (range) this.#host.brushed(range, false);
+			return;
+		}
+		this.#live = false;
+		this.#place();
+		this.#host.gesture(false);
+		if (range || this.#held) this.#host.brushed(range, true);
+	}
+	#read(selection) {
+		if (!selection) return null;
+		const [xs, ys] = this.#split(selection);
+		const range = {};
+		if (xs) range.x = AxisWindow.range(this.#x, ...xs);
+		if (ys) range.y = AxisWindow.range(this.#y, ...ys);
+		const spent = (span) => !!span && span[0] === span[1];
+		if (spent(xs) || spent(ys) || range.x?.length === 0 || range.y?.length === 0) return null;
+		return range;
+	}
+	#split(selection) {
+		if (this.#x && this.#y) {
+			const [[x0, y0], [x1, y1]] = selection;
+			return [[x0, x1], [y0, y1]];
+		}
+		return this.#x ? [selection, null] : [null, selection];
+	}
+	/** Draws the remembered range, snapped to whole bands. Off-screen ranges stay remembered but show nothing. */
+	#place() {
+		const behavior = this.#behavior, group = this.#group;
+		if (!behavior || !group) return;
+		const [width, height] = this.#size, range = this.#range;
+		const span = (scale, part, size) => !scale || !range ? null : part ? AxisWindow.pixels(scale, part, size) : [0, size];
+		const xs = span(this.#x, range?.x, width), ys = span(this.#y, range?.y, height);
+		const pixels = this.#x && this.#y ? xs && ys ? [[xs[0], ys[0]], [xs[1], ys[1]]] : null : this.#x ? xs : ys;
+		group.call(behavior.move, pixels);
+	}
+};
+export { ChartBrush };

package/dist/core/ChartExportError.js

@@ -0,0 +1,24 @@
+// src/core/ChartExportError.ts
+var ExportErrorCode = /* @__PURE__ */ function(ExportErrorCode) {
+	/** The format does not exist for this chart, such as SVG from a 3D chart. */
+	ExportErrorCode["Unsupported"] = "unsupported";
+	/** `table()` has no rows to write. */
+	ExportErrorCode["NoData"] = "no-data";
+	/** A cross-origin resource, usually a map tile, may not be read by the page. */
+	ExportErrorCode["Tainted"] = "tainted";
+	/** The browser could not draw or encode the image, usually because it is too large. */
+	ExportErrorCode["Encoding"] = "encoding";
+	/** The React handle has no chart mounted yet. */
+	ExportErrorCode["Unmounted"] = "unmounted";
+	return ExportErrorCode;
+}({});
+/** Why an export could not be produced. Export never falls back to a blank or partial file. */
+var ChartExportError = class extends Error {
+	code;
+	constructor(code, message, options) {
+		super(message, options);
+		this.code = code;
+		this.name = "ChartExportError";
+	}
+};
+export { ChartExportError, ExportErrorCode };