@yggy-tech/graphraum 0.37.0 → 0.38.0

package/dist/index.d.ts

@@ -304,6 +304,12 @@ interface GraphraumDepthOfFieldOptions {
    * `d` is its camera distance and `f` the focal distance, clamped to `maxBlur`.
    */
   strength?: number;
+  /**
+   * Aperture for surfaces between the camera and the focus, 0..1. Defaults to `strength`. Set it
+   * above `strength` (with a larger `maxBlur`) to melt the foreground while the background behind
+   * the focus keeps the softer `strength` blur.
+   */
+  nearStrength?: number;
   /** Largest blur radius in CSS pixels. Default 12. */
   maxBlur?: number;
   /** Blur radii below this many CSS pixels render sharp, which widens the in-focus band. Default 0. */
@@ -636,6 +642,8 @@ declare class Graphraum<NodeAttributes = undefined, EdgeAttributes = undefined>
   private readonly depthOfFieldFocus;
   /** Strength actually applied: fades toward `strength` while enabled and toward 0 when disabled. */
   private readonly depthOfFieldStrength;
+  /** The same for `nearStrength`, faded alongside. */
+  private readonly depthOfFieldNearStrength;
   private depthOfFieldPass;
   private depthOfFieldStatus;
   constructor(container: HTMLElement, options?: GraphraumOptions<NodeAttributes, EdgeAttributes>);
@@ -647,6 +655,13 @@ declare class Graphraum<NodeAttributes = undefined, EdgeAttributes = undefined>
   private canMutateDataInPlace;
   private mutateDataInPlace;
   private appendDataPatch;
+  /**
+   * Draws appended nodes and edges without repacking the ones already drawn. It applies only when the
+   * last pass drew the whole graph in index order, so the appended ones land after the existing ones
+   * exactly where a full pass would put them: 3D, or 2D without viewport culling, and no density or
+   * overview tier before or after. Returns false, having written nothing, when it does not apply.
+   */
+  private materializeAppended;
   private replaceData;
   updateNodes(updates: readonly GraphraumNodeUpdate[]): void;
   /** Applies a transferable XYZ layout batch. Call repeatedly as a worker produces progressive positions. */
@@ -709,6 +724,7 @@ declare class Graphraum<NodeAttributes = undefined, EdgeAttributes = undefined>
    */
   setDepthOfField(options: GraphraumDepthOfFieldOptions, update?: GraphraumDepthOfFieldUpdate): Promise<boolean>;
   private depthOfFieldTargetStrength;
+  private depthOfFieldTargetNearStrength;
   getNodePresentation(nodeId: string): CompiledGraphraumPresentation | null;
   /** Returns canvas-relative screen coordinates for a node, or null when the node does not exist. */
   getNodeScreenPosition(nodeId: string): GraphraumScreenPosition | null;
@@ -858,6 +874,16 @@ declare class Graphraum<NodeAttributes = undefined, EdgeAttributes = undefined>
   private createBackgroundTexture;
   private applyBackground;
   private materializeViewport;
+  /** A node drawn at its own position and size, which is every node outside the density tier. */
+  private plainMaterializedNode;
+  private nodeInstanceTargets;
+  /** Writes one node's matrix, pick matrix, color, shape and stroke into `slot`. */
+  private writeNodeInstance;
+  /**
+   * Writes packed edge instances at the given first slots and records what picking needs for them.
+   * Returns how many distinct edges got a segment.
+   */
+  private writeEdgeInstances;
   private materializeNodes;
   private disposeGraphObjects;
 }

package/dist/index.js

@@ -1268,6 +1268,7 @@ const DEPTH_OF_FIELD_DEFAULTS = {
 	maxBlur: 12,
 	minBlur: 0,
 	nearDistance: 0,
+	nearStrength: null,
 	strength: .5,
 	transition: {
 		durationMs: 400,
@@ -1300,15 +1301,17 @@ function resolveDepthOfFieldOptions(options, base = DEPTH_OF_FIELD_DEFAULTS) {
 		maxBlur: options.maxBlur ?? base.maxBlur,
 		minBlur: options.minBlur ?? base.minBlur,
 		nearDistance: options.nearDistance ?? base.nearDistance,
+		nearStrength: options.nearStrength ?? base.nearStrength,
 		strength: options.strength ?? base.strength,
 		transition: {
 			durationMs: options.transition?.durationMs ?? base.transition.durationMs,
 			easing: options.transition?.easing ?? base.transition.easing
 		}
 	};
-	const { enabled, farDistance, focus, maxBlur, minBlur, nearDistance, strength, transition } = resolved;
+	const { enabled, farDistance, focus, maxBlur, minBlur, nearDistance, nearStrength, strength, transition } = resolved;
 	if (typeof enabled !== "boolean") throw new Error(`Depth of field enabled must be a boolean; received ${String(enabled)}.`);
 	if (!isNonNegativeNumber(strength) || strength > 1) throw new Error(`Depth of field strength must be a number from 0 to 1; received ${String(strength)}.`);
+	if (nearStrength !== null && (!isNonNegativeNumber(nearStrength) || nearStrength > 1)) throw new Error(`Depth of field nearStrength must be a number from 0 to 1; received ${String(nearStrength)}.`);
 	if (focus !== "selection" && (typeof focus !== "number" || !Number.isFinite(focus) || focus <= 0)) throw new Error(`Depth of field focus must be "selection" or a camera distance above 0 in world units; received ${String(focus)}.`);
 	if (!isNonNegativeNumber(maxBlur) || !isNonNegativeNumber(minBlur) || minBlur > maxBlur) throw new Error(`Depth of field minBlur and maxBlur must be non-negative CSS pixel radii with minBlur <= maxBlur; received ${String(minBlur)} and ${String(maxBlur)}.`);
 	if (!isNonNegativeNumber(nearDistance) || typeof farDistance !== "number" || Number.isNaN(farDistance) || farDistance <= nearDistance) throw new Error(`Depth of field nearDistance must be a non-negative world distance below farDistance; received ${String(nearDistance)} and ${String(farDistance)}.`);
@@ -1501,6 +1504,7 @@ uniform float cameraNear;
 uniform float cameraFar;
 uniform float focusDistance;
 uniform float aperture;
+uniform float nearAperture;
 uniform float minBlur;
 uniform float maxBlur;
 
@@ -1512,7 +1516,8 @@ float surfaceDistance(ivec2 pixel) {
 }
 
 float radiusAt(float surface) {
-	float radius = aperture * abs(surface - focusDistance) / max(surface, 1e-6);
+	float lens = surface < focusDistance ? nearAperture : aperture;
+	float radius = lens * abs(surface - focusDistance) / max(surface, 1e-6);
 	return radius < minBlur ? 0.0 : min(radius, maxBlur);
 }
 
@@ -1528,27 +1533,57 @@ layout(location = 1) out highp vec4 nearColor;
 
 const float GOLDEN_ANGLE = 2.39996323;
 
+ivec2 base;
+float centreSurface;
+float rotation;
+
+float tapDistance(int index, float reach) {
+	return sqrt((float(index) + 0.5) / ${BLUR_TAPS}.0) * reach;
+}
+
+ivec2 tapPixel(int index, float distanceFromCentre) {
+	float angle = float(index) * GOLDEN_ANGLE + rotation;
+	return clamp(base + ivec2(floor(vec2(cos(angle), sin(angle)) * distanceFromCentre + 0.5)), ivec2(0), depthSize - 1);
+}
+
+vec4 nearTerm(float surface, float radius, float weight, vec4 color) {
+	if (surface >= focusDistance || surface >= centreSurface) return vec4(0.0);
+	return color * weight * (maxBlur * maxBlur / max(radius * radius, 1.0));
+}
+
 void main() {
-	ivec2 base = ivec2(gl_FragCoord.xy) * 2;
-	float centreSurface = surfaceDistance(base);
+	base = ivec2(gl_FragCoord.xy) * 2;
+	centreSurface = surfaceDistance(base);
 	vec4 sum = texelFetch(colorTexture, base, 0);
 	float total = 1.0;
 	vec4 near = vec4(0.0);
 	// Interleaved gradient noise turns the spiral's fixed tap pattern into fine noise that the
 	// composite's bilinear upsample smooths, instead of hatching along blurred edges.
-	float rotation = 6.28318531 * fract(52.9829189 * fract(dot(gl_FragCoord.xy, vec2(0.06711056, 0.00583715))));
+	rotation = 6.28318531 * fract(52.9829189 * fract(dot(gl_FragCoord.xy, vec2(0.06711056, 0.00583715))));
+	// Mirrors blurGatherRadius in depth-of-field.ts.
+	float centreRadius = radiusAt(centreSurface);
+	float blurReach = min(maxBlur, max(centreRadius, aperture));
+	bool nearInBlurLoop = blurReach >= maxBlur;
 	for (int index = 0; index < ${BLUR_TAPS}; index++) {
-		float distanceFromCentre = sqrt((float(index) + 0.5) / ${BLUR_TAPS}.0) * maxBlur;
-		float angle = float(index) * GOLDEN_ANGLE + rotation;
-		ivec2 pixel = clamp(base + ivec2(floor(vec2(cos(angle), sin(angle)) * distanceFromCentre + 0.5)), ivec2(0), depthSize - 1);
+		float distanceFromCentre = tapDistance(index, blurReach);
+		ivec2 pixel = tapPixel(index, distanceFromCentre);
 		float surface = surfaceDistance(pixel);
 		float radius = radiusAt(surface);
-		float weight = clamp(radius - distanceFromCentre + 1.0, 0.0, 1.0);
+		float reach = surface > centreSurface ? max(radius, centreRadius) : radius;
+		float weight = clamp(reach - distanceFromCentre + 1.0, 0.0, 1.0);
 		vec4 color = texelFetch(colorTexture, pixel, 0);
 		sum += color * weight;
 		total += weight;
-		if (surface < focusDistance && surface < centreSurface) {
-			near += color * weight * (maxBlur * maxBlur / max(radius * radius, 1.0));
+		if (nearInBlurLoop) near += nearTerm(surface, radius, weight, color);
+	}
+	if (!nearInBlurLoop) {
+		for (int index = 0; index < ${BLUR_TAPS}; index++) {
+			float distanceFromCentre = tapDistance(index, maxBlur);
+			ivec2 pixel = tapPixel(index, distanceFromCentre);
+			float surface = surfaceDistance(pixel);
+			float radius = radiusAt(surface);
+			float weight = clamp(radius - distanceFromCentre + 1.0, 0.0, 1.0);
+			near += nearTerm(surface, radius, weight, texelFetch(colorTexture, pixel, 0));
 		}
 	}
 	blurColor = sum / total;
@@ -1583,6 +1618,7 @@ function blurUniforms() {
 		focusDistance: { value: 1 },
 		maxBlur: { value: 0 },
 		minBlur: { value: 0 },
+		nearAperture: { value: 0 },
 		nodeDepth: { value: null }
 	};
 }
@@ -1681,6 +1717,7 @@ var DepthOfFieldPass = class {
 			focusDistance: frame.focusDistance,
 			maxBlur: frame.maxBlurPixels,
 			minBlur: frame.minBlurPixels,
+			nearAperture: frame.nearAperturePixels,
 			nodeDepth: this.sceneTarget.depthTexture
 		};
 		this.quad.material = this.blurMaterial;
@@ -2210,13 +2247,18 @@ function writeEdgeColorSlots(color, start, count, paint) {
 }
 //#endregion
 //#region src/edge-viewport-patch.ts
-/** Records GPU slot ranges for each visible edge after a full viewport materialize. */
-function buildVisibleEdgeLayouts(segments, markers, segmentInstanceCount) {
-	const layouts = /* @__PURE__ */ new Map();
-	for (const [slot, segment] of segments.entries()) {
+/**
+* Adds the slot ranges of appended edges to `layouts`. Appended segments take the place of the
+* first markers, which move up by `segments.length` slots, so every existing marker range shifts
+* with them. The result equals `buildVisibleEdgeLayouts` over the whole edge set.
+*/
+function appendVisibleEdgeLayouts(layouts, segments, markers, slots) {
+	if (segments.length > 0) for (const layout of layouts.values()) layout.markerStart += segments.length;
+	for (const [offset, segment] of segments.entries()) {
+		const slot = slots.segmentStart + offset;
 		const layout = layouts.get(segment.edgeIndex) ?? {
 			markerCount: 0,
-			markerStart: segmentInstanceCount,
+			markerStart: slots.segmentTotal,
 			segmentCount: 0,
 			segmentStart: slot
 		};
@@ -2225,7 +2267,7 @@ function buildVisibleEdgeLayouts(segments, markers, segmentInstanceCount) {
 		layouts.set(segment.edgeIndex, layout);
 	}
 	for (const [offset, marker] of markers.entries()) {
-		const slot = segmentInstanceCount + offset;
+		const slot = slots.markerStart + offset;
 		const layout = layouts.get(marker.edgeIndex) ?? {
 			markerCount: 0,
 			markerStart: slot,
@@ -2238,6 +2280,14 @@ function buildVisibleEdgeLayouts(segments, markers, segmentInstanceCount) {
 	}
 	return layouts;
 }
+/** Records GPU slot ranges for each visible edge after a full viewport materialize. */
+function buildVisibleEdgeLayouts(segments, markers, segmentInstanceCount) {
+	return appendVisibleEdgeLayouts(/* @__PURE__ */ new Map(), segments, markers, {
+		markerStart: segmentInstanceCount,
+		segmentStart: 0,
+		segmentTotal: segmentInstanceCount
+	});
+}
 /**
 * Rewrites GPU edge instances for moved endpoints without repacking the whole viewport.
 * Returns ok=false when any visible edge would change segment or marker counts.
@@ -2273,7 +2323,7 @@ function patchVisibleEdgeInstances(geometry, input, pickableSegments) {
 		for (const [offset, segment] of packed.segments.entries()) {
 			const slot = layout.segmentStart + offset;
 			writeEdgeSegmentInstance(geometry, slot, segment);
-			nextPickable[slot] = {
+			if (input.pickable !== false) nextPickable[slot] = {
 				edgeIndex,
 				hitSlop: Math.max(input.minHitSlop, segment.width * input.worldPerPixel / 2 + 2 * input.worldPerPixel),
 				x1: segment.x1,
@@ -3619,6 +3669,8 @@ var Graphraum = class {
 	depthOfFieldFocus = new DepthOfFieldFocus();
 	/** Strength actually applied: fades toward `strength` while enabled and toward 0 when disabled. */
 	depthOfFieldStrength = new Tween(0);
+	/** The same for `nearStrength`, faded alongside. */
+	depthOfFieldNearStrength = new Tween(0);
 	depthOfFieldPass = null;
 	depthOfFieldStatus = "off";
 	constructor(container, options = {}) {
@@ -3636,6 +3688,7 @@ var Graphraum = class {
 		if (options.depthOfField !== void 0) {
 			this.depthOfField = resolveDepthOfFieldOptions(options.depthOfField);
 			this.depthOfFieldStrength.retarget(this.depthOfFieldTargetStrength(), 0, resolveEasing("linear"));
+			this.depthOfFieldNearStrength.retarget(this.depthOfFieldTargetNearStrength(), 0, resolveEasing("linear"));
 		}
 		this.antialias = options.antialias ?? false;
 		this.renderer = new WebGLRenderer({
@@ -3742,77 +3795,168 @@ var Graphraum = class {
 		const addedNodes = patch.addedNodes ?? [];
 		const addedEdges = patch.addedEdges ?? [];
 		if (addedNodes.length === 0 && addedEdges.length === 0) return;
-		const nodeById = new Map(this.data.nodes.map((node) => [node.id, node]));
-		for (const node of addedNodes) nodeById.set(node.id, node);
-		const edgeEndpointNodes = addedEdges.flatMap((edge) => {
-			const source = nodeById.get(edge.source);
-			const target = nodeById.get(edge.target);
-			return source && target ? [source, target] : [];
-		});
-		const patchNodes = [...addedNodes, ...edgeEndpointNodes].filter((node, index, all) => all.findIndex((candidate) => candidate.id === node.id) === index);
+		const nodes = this.data.nodes;
+		const edges = this.data.edges;
+		const previous = {
+			edges: edges.length,
+			nodes: nodes.length
+		};
+		const added = new Map(addedNodes.map((node) => [node.id, node]));
+		const nodeById = (id) => added.get(id) ?? nodes[this.nodeIndices.get(id) ?? -1];
+		const patchNodes = new Map(added);
+		for (const edge of addedEdges) for (const id of [edge.source, edge.target]) {
+			const node = nodeById(id);
+			if (node && !patchNodes.has(id)) patchNodes.set(id, node);
+		}
 		const compiled = compileGraph({
-			nodes: patchNodes,
+			nodes: [...patchNodes.values()],
 			edges: addedEdges
 		}, this.visuals);
-		const nodeVisuals = new Map(patchNodes.map((node, index) => [node.id, compiled.nodeVisuals[index]]));
-		const nextNodes = [...this.data.nodes, ...addedNodes.map((node) => ({
-			...node,
-			...nodeVisuals.get(node.id)
-		}))];
-		const nextNodeIndices = new Map(this.nodeIndices);
-		for (const [index, node] of nextNodes.entries()) nextNodeIndices.set(node.id, index);
-		const nextEdges = [...this.data.edges, ...addedEdges.map((edge, index) => ({
-			...edge,
-			...compiled.edgeVisuals[index]
-		}))];
-		const nextEdgeIndices = new Uint32Array(nextEdges.length * 2);
-		nextEdgeIndices.set(this.edgeNodeIndices);
-		const nextEdgePositions = new Float32Array(nextEdges.length * 6);
-		nextEdgePositions.set(this.canonicalEdgePositions);
-		const nextIncidentEdges = this.incidentEdgeIndices.map((indices) => [...indices]);
-		for (const [index, edge] of nextEdges.entries()) {
-			const source = nextNodeIndices.get(edge.source);
-			const target = nextNodeIndices.get(edge.target);
-			if (source === void 0 || target === void 0) continue;
-			nextEdgeIndices[index * 2] = source;
-			nextEdgeIndices[index * 2 + 1] = target;
-			if (!nextIncidentEdges[source]) nextIncidentEdges[source] = [];
-			if (!nextIncidentEdges[target]) nextIncidentEdges[target] = [];
-			if (index >= this.data.edges.length) {
-				nextIncidentEdges[source]?.push(index);
-				nextIncidentEdges[target]?.push(index);
-				const sourceNode = nextNodes[source];
-				const targetNode = nextNodes[target];
-				if (sourceNode && targetNode) nextEdgePositions.set([
-					sourceNode.position.x,
-					sourceNode.position.y,
-					sourceNode.position.z ?? 0,
-					targetNode.position.x,
-					targetNode.position.y,
-					targetNode.position.z ?? 0
-				], index * 6);
-			}
-		}
-		this.data = {
-			nodes: nextNodes,
-			edges: nextEdges
-		};
-		this.nodeIds = nextNodes.map((node) => node.id);
-		this.hasGlowNodes = nextNodes.some(hasNodeGlow);
-		this.nodeIndices = nextNodeIndices;
-		this.edgeNodeIndices = nextEdgeIndices;
-		this.canonicalEdgePositions = nextEdgePositions;
-		this.incidentEdgeIndices = nextIncidentEdges;
+		const nodeVisuals = new Map([...patchNodes.keys()].map((id, index) => [id, compiled.nodeVisuals[index]]));
+		const nodeIds = this.nodeIds;
+		const incidentEdges = this.incidentEdgeIndices;
 		for (const node of addedNodes) {
-			const index = nextNodeIndices.get(node.id);
-			const nextNode = index === void 0 ? void 0 : this.data.nodes[index];
-			if (index !== void 0 && nextNode) this.spatialGrid2d.set(index, nextNode);
+			const index = nodes.length;
+			this.nodeIndices.set(node.id, index);
+			nodeIds.push(node.id);
+			nodes.push({
+				...node,
+				...nodeVisuals.get(node.id),
+				position: { ...node.position }
+			});
+			incidentEdges.push([]);
+			this.spatialGrid2d.set(index, nodes[index]);
+		}
+		this.edgeNodeIndices = grown(this.edgeNodeIndices, (previous.edges + addedEdges.length) * 2);
+		this.canonicalEdgePositions = grown(this.canonicalEdgePositions, (previous.edges + addedEdges.length) * 6);
+		for (const [offset, edge] of addedEdges.entries()) {
+			const index = previous.edges + offset;
+			const source = this.nodeIndices.get(edge.source);
+			const target = this.nodeIndices.get(edge.target);
+			edges.push({
+				...edge,
+				...compiled.edgeVisuals[offset]
+			});
+			if (source === void 0 || target === void 0) continue;
+			this.edgeNodeIndices[index * 2] = source;
+			this.edgeNodeIndices[index * 2 + 1] = target;
+			incidentEdges[source]?.push(index);
+			if (target !== source) incidentEdges[target]?.push(index);
+			const sourceNode = nodes[source];
+			const targetNode = nodes[target];
+			if (!sourceNode || !targetNode) continue;
+			this.canonicalEdgePositions.set([
+				sourceNode.position.x,
+				sourceNode.position.y,
+				sourceNode.position.z ?? 0,
+				targetNode.position.x,
+				targetNode.position.y,
+				targetNode.position.z ?? 0
+			], index * 6);
 		}
+		if (this.edgeIndexCache.edges === edges) for (const [offset, edge] of addedEdges.entries()) this.edgeIndexCache.indices.set(edge.id, previous.edges + offset);
+		const addedGlow = addedNodes.some(hasNodeGlow);
+		this.hasGlowNodes ||= addedGlow;
 		for (const [id, presentation] of compiled.nodePresentations) this.nodePresentations.set(id, presentation);
 		for (const [id, presentation] of compiled.edgePresentations) this.edgePresentations.set(id, presentation);
-		this.materializeViewport();
+		if (this.materializeAppended(previous)) {
+			if (addedGlow) this.syncGlow();
+		} else this.materializeViewport();
 		this.requestRender();
 	}
+	/**
+	* Draws appended nodes and edges without repacking the ones already drawn. It applies only when the
+	* last pass drew the whole graph in index order, so the appended ones land after the existing ones
+	* exactly where a full pass would put them: 3D, or 2D without viewport culling, and no density or
+	* overview tier before or after. Returns false, having written nothing, when it does not apply.
+	*/
+	materializeAppended(previous) {
+		const { edgeMesh, nodeMesh, nodePickMesh } = this;
+		if (!nodeMesh || !nodePickMesh || !edgeMesh) return false;
+		const total = {
+			edges: this.data.edges.length,
+			nodes: this.data.nodes.length
+		};
+		const drewEverything = this.visibleNodeCount === previous.nodes && this.visibleEdgeCandidateCount === previous.edges;
+		if (this.getViewportBounds2d() !== null || this.densityLodActive || this.lastEdgeLodTier !== "detail" || !drewEverything || total.nodes > this.maxVisibleNodes || total.edges > this.maxVisibleEdges) return false;
+		const segmentsBefore = this.visibleEdgeSegmentCount;
+		const markersBefore = this.visibleEdgeMarkerCount;
+		const packed = packEdgeInstances({
+			edgeIndices: Array.from({ length: total.edges - previous.edges }, (_, offset) => previous.edges + offset),
+			edgeStates: this.edgeStateStyling(),
+			edgeVisuals: this.data.edges,
+			endpointPositions: this.canonicalEdgePositions,
+			defaults: {
+				color: this.theme.edge,
+				opacity: this.theme.edgeOpacity,
+				width: this.theme.edgeWidth
+			},
+			tier: this.lastEdgeLodTier,
+			maxSegments: this.edgeSegmentCapacity - segmentsBefore,
+			endpointAttach: this.theme.endpointAttach,
+			edgeNodeIndices: this.edgeNodeIndices,
+			mode: this.mode,
+			nodeOutlines: this.data.nodes
+		});
+		const segmentsTotal = segmentsBefore + packed.segments.length;
+		const markersTotal = markersBefore + packed.markers.length;
+		if (packed.truncated || markersTotal > this.markerCapacity) return false;
+		const firstNodeSlot = this.visibleNodeCount;
+		const targets = this.nodeInstanceTargets();
+		for (let index = previous.nodes; index < total.nodes; index += 1) {
+			const materialized = this.plainMaterializedNode(index);
+			const node = this.data.nodes[index];
+			if (!materialized || !node) continue;
+			const slot = firstNodeSlot + (index - previous.nodes);
+			this.visibleNodeSlots.set(index, slot);
+			this.visibleNodeIndices.push(index);
+			this.writeNodeInstance(targets, slot, materialized, node);
+		}
+		const addedNodeCount = total.nodes - previous.nodes;
+		nodeMesh.count = total.nodes;
+		nodePickMesh.count = total.nodes;
+		nodeMesh.instanceMatrix.addUpdateRange(firstNodeSlot * 16, addedNodeCount * 16);
+		nodeMesh.instanceMatrix.needsUpdate = true;
+		nodePickMesh.instanceMatrix.addUpdateRange(firstNodeSlot * 16, addedNodeCount * 16);
+		nodePickMesh.instanceMatrix.needsUpdate = true;
+		if (nodeMesh.instanceColor) {
+			nodeMesh.instanceColor.addUpdateRange(firstNodeSlot * 3, addedNodeCount * 3);
+			nodeMesh.instanceColor.needsUpdate = true;
+		}
+		targets.shape.addUpdateRange(firstNodeSlot, addedNodeCount);
+		targets.shape.needsUpdate = true;
+		targets.strokeWidth.addUpdateRange(firstNodeSlot, addedNodeCount);
+		targets.strokeWidth.needsUpdate = true;
+		targets.strokeColor.addUpdateRange(firstNodeSlot * 3, addedNodeCount * 3);
+		targets.strokeColor.needsUpdate = true;
+		const edgeGeometry = edgeMesh.geometry;
+		if (packed.segments.length > 0 && markersBefore > 0) for (const name of EDGE_INSTANCE_ATTRIBUTES) {
+			const attribute = getInstancedAttribute(edgeGeometry, name);
+			attribute.array.copyWithin((segmentsBefore + packed.segments.length) * attribute.itemSize, segmentsBefore * attribute.itemSize, (segmentsBefore + markersBefore) * attribute.itemSize);
+		}
+		appendVisibleEdgeLayouts(this.visibleEdgeLayouts, packed.segments, packed.markers, {
+			markerStart: segmentsTotal + markersBefore,
+			segmentStart: segmentsBefore,
+			segmentTotal: segmentsTotal
+		});
+		const addedEdgeCount = this.writeEdgeInstances(packed, {
+			markerStart: segmentsTotal + markersBefore,
+			segmentStart: segmentsBefore
+		}, this.worldUnitsPerPixel());
+		edgeMesh.count = segmentsTotal + markersTotal;
+		for (const name of EDGE_INSTANCE_ATTRIBUTES) {
+			const attribute = getInstancedAttribute(edgeGeometry, name);
+			attribute.addUpdateRange(segmentsBefore * attribute.itemSize, (segmentsTotal + markersTotal - segmentsBefore) * attribute.itemSize);
+			attribute.needsUpdate = true;
+		}
+		this.visibleNodeCandidateCount = total.nodes;
+		this.visibleNodeCount = total.nodes;
+		this.visibleEdgeCandidateCount = total.edges;
+		this.visibleEdgeSegmentCount = segmentsTotal;
+		this.visibleEdgeCount += addedEdgeCount;
+		this.visibleEdgeMarkerCount = markersTotal;
+		return true;
+	}
 	replaceData(data, fitView) {
 		this.nodeDrag.cancel({ restore: false });
 		const compiled = compileGraph(data, this.visuals);
@@ -4000,13 +4144,8 @@ var Graphraum = class {
 			layouts: this.visibleEdgeLayouts,
 			minHitSlop,
 			mode: this.mode,
-			nodeOutlines: this.data.nodes.map((node) => ({
-				height: node.height,
-				shape: node.shape,
-				size: node.size,
-				strokeWidth: node.strokeWidth,
-				width: node.width
-			})),
+			nodeOutlines: this.data.nodes,
+			pickable: this.camera instanceof OrthographicCamera,
 			tier: this.lastEdgeLodTier,
 			worldPerPixel
 		}, this.pickableEdgeSegments);
@@ -4188,12 +4327,17 @@ var Graphraum = class {
 		if (this.depthOfField.enabled && !previous.enabled) this.depthOfFieldFocus.retarget(0, resolveEasing(easing));
 		const fadeMs = animate && !prefersReducedMotion() ? durationMs : 0;
 		const done = this.depthOfFieldStrength.retarget(this.depthOfFieldTargetStrength(), fadeMs, resolveEasing(easing));
+		this.depthOfFieldNearStrength.retarget(this.depthOfFieldTargetNearStrength(), fadeMs, resolveEasing(easing));
 		this.requestRender();
 		return done;
 	}
 	depthOfFieldTargetStrength() {
 		return this.depthOfField.enabled ? this.depthOfField.strength : 0;
 	}
+	depthOfFieldTargetNearStrength() {
+		const { enabled, nearStrength, strength } = this.depthOfField;
+		return enabled ? nearStrength ?? strength : 0;
+	}
 	getNodePresentation(nodeId) {
 		return this.nodePresentations.get(nodeId) ?? null;
 	}
@@ -4684,6 +4828,7 @@ var Graphraum = class {
 		if (this.gpuTimer) for (const query of this.gpuTimer.pending) this.gpuTimer.context.deleteQuery(query);
 		this.disposeBackgroundTexture();
 		this.depthOfFieldStrength.cancel();
+		this.depthOfFieldNearStrength.cancel();
 		this.disposeDepthOfFieldPass();
 		this.disposeGraphObjects();
 		this.renderer.dispose();
@@ -4734,19 +4879,22 @@ var Graphraum = class {
 	prepareDepthOfField(nowMs) {
 		const options = this.depthOfField;
 		const strengthTween = this.depthOfFieldStrength;
-		if (!options.enabled && strengthTween.settled) {
+		const nearStrengthTween = this.depthOfFieldNearStrength;
+		if (!options.enabled && strengthTween.settled && nearStrengthTween.settled) {
 			this.depthOfFieldStatus = "off";
 			this.disposeDepthOfFieldPass();
 			return null;
 		}
 		if (!(this.camera instanceof PerspectiveCamera)) {
 			strengthTween.jump();
+			nearStrengthTween.jump();
 			this.depthOfFieldStatus = options.enabled ? "inactive" : "off";
 			this.disposeDepthOfFieldPass();
 			return null;
 		}
 		if (!DepthOfFieldPass.isSupported(this.renderer)) {
 			strengthTween.jump();
+			nearStrengthTween.jump();
 			this.depthOfFieldStatus = options.enabled ? "unsupported" : "off";
 			if (options.enabled && !warnedDepthOfFieldUnsupported) {
 				warnedDepthOfFieldUnsupported = true;
@@ -4755,7 +4903,8 @@ var Graphraum = class {
 			return null;
 		}
 		const strength = strengthTween.sample(nowMs);
-		if (!strengthTween.settled) this.requestRender();
+		const nearStrength = nearStrengthTween.sample(nowMs);
+		if (!strengthTween.settled || !nearStrengthTween.settled) this.requestRender();
 		this.camera.updateMatrixWorld();
 		let focusDistance = typeof options.focus === "number" ? options.focus : null;
 		let amount = 1;
@@ -4771,9 +4920,11 @@ var Graphraum = class {
 		}
 		focusDistance = Math.max(focusDistance, this.camera.near);
 		const pixelRatio = this.renderer.getPixelRatio();
-		const aperturePixels = strength * amount * distanceFade(focusDistance, options.nearDistance, options.farDistance) * 24 * pixelRatio;
+		const pixelsPerStrength = amount * distanceFade(focusDistance, options.nearDistance, options.farDistance) * 24 * pixelRatio;
+		const aperturePixels = strength * pixelsPerStrength;
+		const nearAperturePixels = nearStrength * pixelsPerStrength;
 		const maxBlurPixels = options.maxBlur * pixelRatio;
-		if (aperturePixels < .25 || maxBlurPixels < .25) {
+		if (Math.max(aperturePixels, nearAperturePixels) < .25 || maxBlurPixels < .25) {
 			this.depthOfFieldStatus = options.enabled ? "inactive" : "off";
 			return null;
 		}
@@ -4783,7 +4934,8 @@ var Graphraum = class {
 			aperturePixels,
 			focusDistance,
 			maxBlurPixels,
-			minBlurPixels: options.minBlur * pixelRatio
+			minBlurPixels: options.minBlur * pixelRatio,
+			nearAperturePixels
 		};
 	}
 	/** Mean world position of the selected nodes, read every frame so a running layout keeps them in focus. */
@@ -4909,7 +5061,7 @@ var Graphraum = class {
 		return null;
 	}
 	pickEdge(clientX, clientY) {
-		if (!this.edgeMesh || this.pickableEdgeSegments.length === 0) return null;
+		if (!this.edgeMesh || this.visibleEdgeSegmentCount === 0) return null;
 		const bounds = this.renderer.domElement.getBoundingClientRect();
 		if (bounds.width === 0 || bounds.height === 0) return null;
 		this.pointer.set((clientX - bounds.left) / bounds.width * 2 - 1, -((clientY - bounds.top) / bounds.height) * 2 + 1);
@@ -5077,35 +5229,20 @@ var Graphraum = class {
 		const visibleNodeIndices = materializedNodes.map(({ index }) => index);
 		const edgeCandidates = bounds ? collectIncidentEdges(visibleNodeIndices, this.incidentEdgeIndices) : this.data.edges.map((_, index) => index);
 		const visibleEdgeIndices = applyEdgeBudget(edgeCandidates, this.maxVisibleEdges);
-		const matrix = new Matrix4();
 		this.visibleNodeSlots = /* @__PURE__ */ new Map();
 		this.visibleNodeIndices = visibleNodeIndices;
 		this.nodeMesh.instanceMatrix.clearUpdateRanges();
 		this.nodePickMesh.instanceMatrix.clearUpdateRanges();
 		this.nodeMesh.instanceColor?.clearUpdateRanges();
-		const nodeShape = this.nodeMesh.geometry.getAttribute("instanceShape");
-		const nodeStrokeWidth = this.nodeMesh.geometry.getAttribute("instanceStrokeWidth");
-		const nodeStrokeColor = this.nodeMesh.geometry.getAttribute("instanceStrokeColor");
-		nodeShape.clearUpdateRanges();
-		nodeStrokeWidth.clearUpdateRanges();
-		nodeStrokeColor.clearUpdateRanges();
+		const targets = this.nodeInstanceTargets();
+		targets.shape.clearUpdateRanges();
+		targets.strokeWidth.clearUpdateRanges();
+		targets.strokeColor.clearUpdateRanges();
 		for (const [slot, materialized] of materializedNodes.entries()) {
-			const nodeIndex = materialized.index;
-			const node = this.data.nodes[nodeIndex];
+			const node = this.data.nodes[materialized.index];
 			if (!node) continue;
-			this.visibleNodeSlots.set(nodeIndex, slot);
-			const { height, width } = materialized;
-			const maxAxis = Math.max(width, height);
-			matrix.makeScale(width, height, maxAxis);
-			matrix.setPosition(materialized.x, materialized.y, materialized.z);
-			this.nodeMesh.setMatrixAt(slot, matrix);
-			const pickScale = maxAxis * Math.SQRT2;
-			matrix.makeScale(pickScale, pickScale, pickScale);
-			matrix.setPosition(materialized.x, materialized.y, materialized.z);
-			this.nodePickMesh.setMatrixAt(slot, matrix);
-			this.nodeMesh.setColorAt(slot, this.getNodeColor(node));
-			setNodeShapeAt(nodeShape, slot, node.shape);
-			setNodeStrokeAt(nodeStrokeWidth, nodeStrokeColor, slot, resolveNodeStroke(node, this.theme));
+			this.visibleNodeSlots.set(materialized.index, slot);
+			this.writeNodeInstance(targets, slot, materialized, node);
 		}
 		this.nodeMesh.count = materializedNodes.length;
 		this.nodePickMesh.count = materializedNodes.length;
@@ -5117,12 +5254,12 @@ var Graphraum = class {
 			this.nodeMesh.instanceColor.addUpdateRange(0, materializedNodes.length * 3);
 			this.nodeMesh.instanceColor.needsUpdate = true;
 		}
-		nodeShape.addUpdateRange(0, materializedNodes.length);
-		nodeShape.needsUpdate = true;
-		nodeStrokeWidth.addUpdateRange(0, materializedNodes.length);
-		nodeStrokeWidth.needsUpdate = true;
-		nodeStrokeColor.addUpdateRange(0, materializedNodes.length * 3);
-		nodeStrokeColor.needsUpdate = true;
+		targets.shape.addUpdateRange(0, materializedNodes.length);
+		targets.shape.needsUpdate = true;
+		targets.strokeWidth.addUpdateRange(0, materializedNodes.length);
+		targets.strokeWidth.needsUpdate = true;
+		targets.strokeColor.addUpdateRange(0, materializedNodes.length * 3);
+		targets.strokeColor.needsUpdate = true;
 		const lodLevel = resolveLodLevel(this.densityLodActive, edgeCandidates.length, visibleEdgeIndices.length);
 		this.lastEdgeLodTier = edgeTierFromDiagnosticsLod(lodLevel);
 		const worldPerPixel = this.worldUnitsPerPixel();
@@ -5141,42 +5278,19 @@ var Graphraum = class {
 			endpointAttach: this.theme.endpointAttach,
 			edgeNodeIndices: this.edgeNodeIndices,
 			mode: this.mode,
-			nodeOutlines: this.data.nodes.map((node) => ({
-				height: node.height,
-				shape: node.shape,
-				size: node.size,
-				strokeWidth: node.strokeWidth,
-				width: node.width
-			}))
+			nodeOutlines: this.data.nodes
 		});
 		const edgeGeometry = this.edgeMesh.geometry;
 		this.visibleEdgeSlots = /* @__PURE__ */ new Map();
 		this.visibleEdgeLayouts = buildVisibleEdgeLayouts(packed.segments, packed.markers, packed.segments.length);
 		this.pickableEdgeSegments = [];
 		this.visibleEdgeSegmentEdgeIndices = [];
-		let edgeSlot = 0;
-		const distinctEdges = /* @__PURE__ */ new Set();
-		const minHitSlop = Math.max(4 * worldPerPixel, this.theme.edgeWidth * worldPerPixel);
-		for (const segment of packed.segments) {
-			writeEdgeSegmentInstance(edgeGeometry, edgeSlot, segment);
-			if (!this.visibleEdgeSlots.has(segment.edgeIndex)) this.visibleEdgeSlots.set(segment.edgeIndex, edgeSlot);
-			distinctEdges.add(segment.edgeIndex);
-			this.visibleEdgeSegmentEdgeIndices.push(segment.edgeIndex);
-			this.pickableEdgeSegments.push({
-				edgeIndex: segment.edgeIndex,
-				hitSlop: Math.max(minHitSlop, segment.width * worldPerPixel / 2 + 2 * worldPerPixel),
-				x1: segment.x1,
-				y1: segment.y1,
-				x2: segment.x2,
-				y2: segment.y2
-			});
-			edgeSlot += 1;
-		}
-		const segmentCount = edgeSlot;
-		for (const marker of packed.markers) {
-			writeEdgeMarkerInstance(edgeGeometry, edgeSlot, marker);
-			edgeSlot += 1;
-		}
+		const distinctEdgeCount = this.writeEdgeInstances(packed, {
+			markerStart: packed.segments.length,
+			segmentStart: 0
+		}, worldPerPixel);
+		const segmentCount = packed.segments.length;
+		const edgeSlot = segmentCount + packed.markers.length;
 		this.edgeMesh.count = edgeSlot;
 		for (const name of EDGE_INSTANCE_ATTRIBUTES) {
 			const attribute = edgeGeometry.getAttribute(name);
@@ -5188,28 +5302,85 @@ var Graphraum = class {
 		this.visibleNodeCount = materializedNodes.length;
 		this.visibleEdgeCandidateCount = edgeCandidates.length;
 		this.visibleEdgeSegmentCount = segmentCount;
-		this.visibleEdgeCount = distinctEdges.size;
+		this.visibleEdgeCount = distinctEdgeCount;
 		this.visibleEdgeMarkerCount = packed.markers.length;
 		this.syncGlow();
 	}
+	/** A node drawn at its own position and size, which is every node outside the density tier. */
+	plainMaterializedNode(index) {
+		const node = this.data.nodes[index];
+		if (!node) return null;
+		const { height, width } = resolveNodeAxes({
+			height: node.height,
+			nodeId: node.id,
+			size: node.size,
+			width: node.width
+		});
+		return {
+			height,
+			index,
+			width,
+			x: node.position.x,
+			y: node.position.y,
+			z: node.position.z ?? 0
+		};
+	}
+	nodeInstanceTargets() {
+		const geometry = this.nodeMesh.geometry;
+		return {
+			matrix: new Matrix4(),
+			shape: geometry.getAttribute("instanceShape"),
+			strokeColor: geometry.getAttribute("instanceStrokeColor"),
+			strokeWidth: geometry.getAttribute("instanceStrokeWidth")
+		};
+	}
+	/** Writes one node's matrix, pick matrix, color, shape and stroke into `slot`. */
+	writeNodeInstance({ matrix, shape, strokeColor, strokeWidth }, slot, materialized, node) {
+		const { height, width } = materialized;
+		const maxAxis = Math.max(width, height);
+		matrix.makeScale(width, height, maxAxis);
+		matrix.setPosition(materialized.x, materialized.y, materialized.z);
+		this.nodeMesh.setMatrixAt(slot, matrix);
+		const pickScale = maxAxis * Math.SQRT2;
+		matrix.makeScale(pickScale, pickScale, pickScale);
+		matrix.setPosition(materialized.x, materialized.y, materialized.z);
+		this.nodePickMesh.setMatrixAt(slot, matrix);
+		this.nodeMesh.setColorAt(slot, this.getNodeColor(node));
+		setNodeShapeAt(shape, slot, node.shape);
+		setNodeStrokeAt(strokeWidth, strokeColor, slot, resolveNodeStroke(node, this.theme));
+	}
+	/**
+	* Writes packed edge instances at the given first slots and records what picking needs for them.
+	* Returns how many distinct edges got a segment.
+	*/
+	writeEdgeInstances(packed, start, worldPerPixel) {
+		const edgeGeometry = this.edgeMesh.geometry;
+		const minHitSlop = Math.max(4 * worldPerPixel, this.theme.edgeWidth * worldPerPixel);
+		const distinctEdges = /* @__PURE__ */ new Set();
+		const keepPickable = this.camera instanceof OrthographicCamera;
+		for (const [offset, segment] of packed.segments.entries()) {
+			const slot = start.segmentStart + offset;
+			writeEdgeSegmentInstance(edgeGeometry, slot, segment);
+			if (!this.visibleEdgeSlots.has(segment.edgeIndex)) this.visibleEdgeSlots.set(segment.edgeIndex, slot);
+			distinctEdges.add(segment.edgeIndex);
+			this.visibleEdgeSegmentEdgeIndices.push(segment.edgeIndex);
+			if (!keepPickable) continue;
+			this.pickableEdgeSegments.push({
+				edgeIndex: segment.edgeIndex,
+				hitSlop: Math.max(minHitSlop, segment.width * worldPerPixel / 2 + 2 * worldPerPixel),
+				x1: segment.x1,
+				y1: segment.y1,
+				x2: segment.x2,
+				y2: segment.y2
+			});
+		}
+		for (const [offset, marker] of packed.markers.entries()) writeEdgeMarkerInstance(edgeGeometry, start.markerStart + offset, marker);
+		return distinctEdges.size;
+	}
 	materializeNodes(indices, bounds) {
 		if (!this.densityLodActive || !bounds) return indices.slice(0, this.maxVisibleNodes).flatMap((index) => {
-			const node = this.data.nodes[index];
-			if (!node) return [];
-			const { height, width } = resolveNodeAxes({
-				height: node.height,
-				nodeId: node.id,
-				size: node.size,
-				width: node.width
-			});
-			return [{
-				height,
-				index,
-				width,
-				x: node.position.x,
-				y: node.position.y,
-				z: node.position.z ?? 0
-			}];
+			const materialized = this.plainMaterializedNode(index);
+			return materialized ? [materialized] : [];
 		});
 		const aspect = Math.max(this.container.clientWidth, 1) / Math.max(this.container.clientHeight, 1);
 		const columns = Math.max(1, Math.floor(Math.sqrt(this.maxVisibleNodes * aspect)));
@@ -5311,6 +5482,13 @@ function setOrthographicFrustum(camera, aspect, visibleHeight) {
 function hasNodeGlow(node) {
 	return (node.glow ?? 0) > 0;
 }
+/** `array`, or a copy with room for at least `length` entries, doubling so repeated appends stay cheap. */
+function grown(array, length) {
+	if (array.length >= length) return array;
+	const next = new array.constructor(nextCapacity(length));
+	next.set(array);
+	return next;
+}
 function nextCapacity(length) {
 	let capacity = 1;
 	while (capacity < length) capacity *= 2;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@yggy-tech/graphraum",
-	"version": "0.37.0",
+	"version": "0.38.0",
 	"description": "yggy's WebGL engine for interactive graphs in 2D and 3D",
 	"type": "module",
 	"license": "Apache-2.0",