@yggy-tech/graphraum 0.36.0 → 0.38.0

package/dist/index.d.ts

@@ -80,6 +80,16 @@ interface GraphraumSetDataOptions {
    */
   fit?: boolean;
 }
+type GraphraumNodeDragPhase = "start" | "move" | "end" | "cancel";
+/** One step of a node drag. `cancel` carries the position the node was restored to (or left at). */
+interface GraphraumNodeDragEvent {
+  nodeId: string;
+  phase: GraphraumNodeDragPhase;
+  position: GraphraumPosition;
+}
+interface GraphraumNodeDragOptions {
+  enabled: boolean;
+}
 interface GraphraumCameraPoint3d {
   x: number;
   y: number;
@@ -294,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. */
@@ -618,12 +634,16 @@ declare class Graphraum<NodeAttributes = undefined, EdgeAttributes = undefined>
   private gpuTimer;
   private readonly viewListeners;
   private readonly focusListeners;
+  private readonly nodeDragListeners;
+  private readonly nodeDrag;
   private lastHoveredNodeId;
   private readonly antialias;
   private depthOfField;
   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>);
@@ -635,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. */
@@ -697,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;
@@ -715,6 +743,16 @@ declare class Graphraum<NodeAttributes = undefined, EdgeAttributes = undefined>
   createOverlay(options?: GraphraumOverlayOptions): GraphraumOverlay<NodeAttributes, EdgeAttributes>;
   /** Subscribes to camera and viewport changes. Returns an unsubscribe function. */
   onViewChange(listener: () => void): () => boolean;
+  /**
+   * Turns node dragging on or off (default off). A drag starts when the pointer moves past a small
+   * tolerance after a press on a node (a finger must rest on the node first, so a swipe still pans
+   * the camera), moves the node on a plane facing the camera, and ends on release. Escape or a
+   * cancelled pointer put the node back. Not available while the density LOD shows clusters.
+   */
+  setNodeDrag(options: GraphraumNodeDragOptions): void;
+  /** Subscribes to node drag steps (`start`, `move`, `end`, `cancel`). Returns an unsubscribe function. */
+  onNodeDrag(listener: (event: GraphraumNodeDragEvent) => void): () => boolean;
+  private createNodeDragHost;
   /** Subscribes to selection and hover changes that affect overlay focus chrome. */
   onFocusChange(listener: () => void): () => boolean;
   private notifyFocusChange;
@@ -836,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;
 }
@@ -983,4 +1031,4 @@ declare function isTransparentGraphraumBackground(background: GraphraumBackgroun
 /** Defines typed, serializable graph visuals without coupling application data to the render loop. */
 declare function defineVisuals<NodeAttributes = undefined, EdgeAttributes = undefined>(visuals: GraphraumVisualMapper<NodeAttributes, EdgeAttributes>): GraphraumVisualMapper<NodeAttributes, EdgeAttributes>;
 //#endregion
-export { type CompiledGraphraumPresentation, DEFAULT_ENDPOINT_ATTACH, DEFAULT_ENDPOINT_CLEARANCE, DEFAULT_FORCE_SETTINGS, type EndpointAttach, type EndpointOutline, type ForceLayoutRequest, type ForceSettings, type GraphologyEdgeAttributes, type GraphologyNodeAttributes, type GraphologyRenderer, Graphraum, type GraphraumAutoOrbitOptions, type GraphraumAutoOrbitStatus, type GraphraumBackground, type GraphraumCameraPoint3d, type GraphraumCameraState, type GraphraumCameraState2d, type GraphraumCameraState3d, type GraphraumColor, type GraphraumData, type GraphraumDataPatch, type GraphraumDepthOfFieldOptions, type GraphraumDepthOfFieldStatus, type GraphraumDepthOfFieldTransition, type GraphraumDepthOfFieldUpdate, type GraphraumDiagnostics, type GraphraumEasing, type GraphraumEdge, type GraphraumEdgeEncoding, type GraphraumEdgeMarker, type GraphraumEdgeMarkerEnd, type GraphraumEdgePath, type GraphraumEdgeState, type GraphraumEdgeStyle, type GraphraumEdgeVisual, type GraphraumFlyToOptions, type GraphraumLabelCandidate, type GraphraumLayoutPositions, type GraphraumMode, type GraphraumNode, type GraphraumNodeEncoding, type GraphraumNodeGeometry, type GraphraumNodeShape, type GraphraumNodeState, type GraphraumNodeUpdate, type GraphraumNodeVisual, type GraphraumOptions, GraphraumOverlay, type GraphraumOverlayNode, type GraphraumOverlayOptions, type GraphraumPatternBackground, type GraphraumPickHit, type GraphraumPosition, type GraphraumPresentation, type GraphraumPresentationAction, type GraphraumPresentationProperty, type GraphraumPropertyValue, type GraphraumScreenPosition, type GraphraumSetDataOptions, type GraphraumTheme, type GraphraumThemeName, type GraphraumVisualMapper, type LabelBudgetCandidate, type RichNodePolicy, type SelectBudgetedLabelIdsInput, type SelectFocusLabelIdsInput, attachPointOnOutline, bindGraphology, boundOverlayIds, computeClusteredForcePositions, computeForcePositions, createForceSimulation, defineVisuals, forceIterationCount, graphraumEdgePaths, graphraumNodeShapes, graphraumTheme, graphraumThemeDark, graphraumThemeLight, graphraumThemes, isTransparentGraphraumBackground, normalizeGraphraumBackground, orderFocusNodeIds, resolveGraphraumTheme, selectBudgetedLabelIds, selectFocusLabelIds, selectRichNodeIds, trimEdgeEndpoints };
+export { type CompiledGraphraumPresentation, DEFAULT_ENDPOINT_ATTACH, DEFAULT_ENDPOINT_CLEARANCE, DEFAULT_FORCE_SETTINGS, type EndpointAttach, type EndpointOutline, type ForceLayoutRequest, type ForceSettings, type GraphologyEdgeAttributes, type GraphologyNodeAttributes, type GraphologyRenderer, Graphraum, type GraphraumAutoOrbitOptions, type GraphraumAutoOrbitStatus, type GraphraumBackground, type GraphraumCameraPoint3d, type GraphraumCameraState, type GraphraumCameraState2d, type GraphraumCameraState3d, type GraphraumColor, type GraphraumData, type GraphraumDataPatch, type GraphraumDepthOfFieldOptions, type GraphraumDepthOfFieldStatus, type GraphraumDepthOfFieldTransition, type GraphraumDepthOfFieldUpdate, type GraphraumDiagnostics, type GraphraumEasing, type GraphraumEdge, type GraphraumEdgeEncoding, type GraphraumEdgeMarker, type GraphraumEdgeMarkerEnd, type GraphraumEdgePath, type GraphraumEdgeState, type GraphraumEdgeStyle, type GraphraumEdgeVisual, type GraphraumFlyToOptions, type GraphraumLabelCandidate, type GraphraumLayoutPositions, type GraphraumMode, type GraphraumNode, type GraphraumNodeDragEvent, type GraphraumNodeDragOptions, type GraphraumNodeDragPhase, type GraphraumNodeEncoding, type GraphraumNodeGeometry, type GraphraumNodeShape, type GraphraumNodeState, type GraphraumNodeUpdate, type GraphraumNodeVisual, type GraphraumOptions, GraphraumOverlay, type GraphraumOverlayNode, type GraphraumOverlayOptions, type GraphraumPatternBackground, type GraphraumPickHit, type GraphraumPosition, type GraphraumPresentation, type GraphraumPresentationAction, type GraphraumPresentationProperty, type GraphraumPropertyValue, type GraphraumScreenPosition, type GraphraumSetDataOptions, type GraphraumTheme, type GraphraumThemeName, type GraphraumVisualMapper, type LabelBudgetCandidate, type RichNodePolicy, type SelectBudgetedLabelIdsInput, type SelectFocusLabelIdsInput, attachPointOnOutline, bindGraphology, boundOverlayIds, computeClusteredForcePositions, computeForcePositions, createForceSimulation, defineVisuals, forceIterationCount, graphraumEdgePaths, graphraumNodeShapes, graphraumTheme, graphraumThemeDark, graphraumThemeLight, graphraumThemes, isTransparentGraphraumBackground, normalizeGraphraumBackground, orderFocusNodeIds, resolveGraphraumTheme, selectBudgetedLabelIds, selectFocusLabelIds, selectRichNodeIds, trimEdgeEndpoints };

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,
@@ -2493,6 +2543,231 @@ function prepareLayoutPositions(nodes, nodeIndices, layout) {
 		};
 	});
 }
+/**
+* Drags one node with the pointer. A press on a node arms a gesture; once the pointer leaves the
+* click tolerance (a finger must rest on the node first) the node follows it until release.
+* Camera controls are switched off for the gesture and restored when it ends, so a press that stays
+* a click behaves as before. Escape, a cancelled pointer or lost pointer capture put the node back.
+*/
+var NodeDragController = class {
+	host;
+	holdMs;
+	enabled = false;
+	gesture = null;
+	unlisten;
+	unlistenKeys = null;
+	constructor(host, holdMs = 350) {
+		this.host = host;
+		this.holdMs = holdMs;
+		this.unlisten = [
+			listen(host.element, "pointerdown", this.handleDown, { capture: true }),
+			listen(host.element, "pointermove", this.handleMove),
+			listen(host.element, "pointerup", this.handleUp),
+			listen(host.element, "pointercancel", this.handleCancel),
+			listen(host.element, "lostpointercapture", this.handleCancel)
+		];
+	}
+	/** True from the first drag step until the node is dropped or the drag is cancelled. */
+	get active() {
+		return this.gesture?.phase === "dragging";
+	}
+	setEnabled(enabled) {
+		if (!enabled) this.cancel({ restore: true });
+		this.enabled = enabled;
+	}
+	/** Ends a running gesture as cancelled. `restore` puts the node back where it was grabbed. */
+	cancel({ restore }) {
+		const gesture = this.gesture;
+		if (!gesture) return;
+		if (gesture.phase === "dragging") {
+			const restored = restore && this.host.nodePosition(gesture.nodeId) !== null;
+			if (restored) this.host.moveNode(gesture.nodeId, gesture.origin);
+			this.finish(gesture);
+			this.host.emit({
+				nodeId: gesture.nodeId,
+				phase: "cancel",
+				position: restored ? gesture.origin : gesture.last
+			});
+			return;
+		}
+		this.finish(gesture);
+	}
+	dispose() {
+		this.cancel({ restore: false });
+		this.enabled = false;
+		for (const stop of this.unlisten) stop();
+	}
+	handleDown = (event) => {
+		if (!this.enabled || this.gesture || event.button !== 0 || !this.host.canStart()) return;
+		const nodeId = this.host.pickNode(event.clientX, event.clientY);
+		if (nodeId === null) return;
+		const origin = this.host.nodePosition(nodeId);
+		if (!origin) return;
+		const surface = this.host.createSurface(origin);
+		const grabbed = surface?.(event.clientX, event.clientY);
+		if (!surface || !grabbed) return;
+		const touch = event.pointerType === "touch";
+		const gesture = {
+			controlsHeld: false,
+			holdTimer: null,
+			last: origin,
+			nodeId,
+			offset: {
+				x: origin.x - grabbed.x,
+				y: origin.y - grabbed.y,
+				z: (origin.z ?? 0) - (grabbed.z ?? 0)
+			},
+			origin,
+			phase: "pressed",
+			pointerId: event.pointerId,
+			startX: event.clientX,
+			startY: event.clientY,
+			surface,
+			touch
+		};
+		this.gesture = gesture;
+		this.unlistenKeys = listen(this.host.document, "keydown", this.handleKey);
+		if (touch) {
+			gesture.holdTimer = setTimeout(() => this.beginDrag(gesture), this.holdMs);
+			return;
+		}
+		this.holdControls(gesture);
+		capture(this.host.element, event.pointerId);
+	};
+	handleMove = (event) => {
+		const gesture = this.gesture;
+		if (!gesture || event.pointerId !== gesture.pointerId) return;
+		if (gesture.phase === "pressed") {
+			if (Math.hypot(event.clientX - gesture.startX, event.clientY - gesture.startY) <= 5) return;
+			if (gesture.touch) {
+				this.finish(gesture);
+				return;
+			}
+			this.beginDrag(gesture);
+		}
+		this.follow(gesture, event.clientX, event.clientY);
+	};
+	handleUp = (event) => {
+		const gesture = this.gesture;
+		if (!gesture || event.pointerId !== gesture.pointerId) return;
+		this.finish(gesture);
+		if (gesture.phase === "dragging") this.host.emit({
+			nodeId: gesture.nodeId,
+			phase: "end",
+			position: gesture.last
+		});
+	};
+	handleCancel = (event) => {
+		if (this.gesture && event.pointerId === this.gesture.pointerId) this.cancel({ restore: true });
+	};
+	handleKey = (event) => {
+		if (event.key === "Escape") this.cancel({ restore: true });
+	};
+	beginDrag(gesture) {
+		if (this.gesture !== gesture || gesture.phase === "dragging") return;
+		gesture.phase = "dragging";
+		clearHold(gesture);
+		this.holdControls(gesture);
+		if (gesture.touch) capture(this.host.element, gesture.pointerId);
+		this.host.emit({
+			nodeId: gesture.nodeId,
+			phase: "start",
+			position: gesture.origin
+		});
+	}
+	follow(gesture, clientX, clientY) {
+		if (!this.host.nodePosition(gesture.nodeId)) {
+			this.cancel({ restore: false });
+			return;
+		}
+		const point = gesture.surface(clientX, clientY);
+		if (!point) return;
+		const z = point.z === void 0 ? gesture.origin.z : point.z + gesture.offset.z;
+		const position = {
+			x: point.x + gesture.offset.x,
+			y: point.y + gesture.offset.y,
+			...z === void 0 ? {} : { z }
+		};
+		gesture.last = position;
+		this.host.moveNode(gesture.nodeId, position);
+		this.host.emit({
+			nodeId: gesture.nodeId,
+			phase: "move",
+			position
+		});
+	}
+	holdControls(gesture) {
+		if (gesture.controlsHeld) return;
+		gesture.controlsHeld = true;
+		this.host.setControlsEnabled(false);
+	}
+	/** Drops the gesture and everything it held: timer, pointer capture, key listener, camera controls. */
+	finish(gesture) {
+		if (this.gesture !== gesture) return;
+		this.gesture = null;
+		clearHold(gesture);
+		this.unlistenKeys?.();
+		this.unlistenKeys = null;
+		release(this.host.element, gesture.pointerId);
+		if (gesture.controlsHeld) this.host.setControlsEnabled(true);
+	}
+};
+/** Typed `addEventListener` for the pointer and key events this module handles; returns the unsubscribe. */
+function listen(target, type, handler, options) {
+	const listener = handler;
+	target.addEventListener(type, listener, options);
+	return () => target.removeEventListener(type, listener, options);
+}
+function clearHold(gesture) {
+	if (gesture.holdTimer === null) return;
+	clearTimeout(gesture.holdTimer);
+	gesture.holdTimer = null;
+}
+function capture(element, pointerId) {
+	try {
+		element.setPointerCapture(pointerId);
+	} catch {}
+}
+function release(element, pointerId) {
+	try {
+		element.releasePointerCapture(pointerId);
+	} catch {}
+}
+//#endregion
+//#region src/node-drag-surface.ts
+/**
+* Where the pointer is in world space on the plane a dragged node moves in. 2D unprojects onto the
+* view plane and reports no depth. 3D intersects the pointer ray with a plane through the anchor
+* that faces the camera as it was at the press, so the node keeps its depth and follows the pointer
+* across the screen. Returns `null` for an empty canvas, and from the surface when the ray misses.
+*/
+function createNodeDragSurface({ anchor, bounds, camera, raycaster }) {
+	const initial = bounds();
+	if (initial.width === 0 || initial.height === 0) return null;
+	const ndc = new Vector2();
+	const toNdc = (clientX, clientY) => {
+		const { height, left, top, width } = bounds();
+		return ndc.set((clientX - left) / width * 2 - 1, -((clientY - top) / height) * 2 + 1);
+	};
+	if (camera.type === "OrthographicCamera") return (clientX, clientY) => {
+		const point = toNdc(clientX, clientY);
+		const world = new Vector3(point.x, point.y, 0).unproject(camera);
+		return {
+			x: world.x,
+			y: world.y
+		};
+	};
+	const plane = new Plane().setFromNormalAndCoplanarPoint(camera.getWorldDirection(new Vector3()), new Vector3(anchor.x, anchor.y, anchor.z ?? 0));
+	const hit = new Vector3();
+	return (clientX, clientY) => {
+		raycaster.setFromCamera(toNdc(clientX, clientY), camera);
+		return raycaster.ray.intersectPlane(plane, hit) ? {
+			x: hit.x,
+			y: hit.y,
+			z: hit.z
+		} : null;
+	};
+}
 const vertexShader$1 = `
 attribute float instanceGlowOpacity;
 varying vec3 glowColor;
@@ -3386,12 +3661,16 @@ var Graphraum = class {
 	gpuTimer = null;
 	viewListeners = /* @__PURE__ */ new Set();
 	focusListeners = /* @__PURE__ */ new Set();
+	nodeDragListeners = /* @__PURE__ */ new Set();
+	nodeDrag;
 	lastHoveredNodeId = null;
 	antialias;
 	depthOfField = DEPTH_OF_FIELD_DEFAULTS;
 	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 = {}) {
@@ -3409,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({
@@ -3433,6 +3713,7 @@ var Graphraum = class {
 		this.renderer.domElement.addEventListener("pointermove", this.handlePointerMove);
 		this.renderer.domElement.addEventListener("pointerleave", this.handlePointerLeave);
 		for (const type of FLIGHT_CANCEL_EVENTS) this.renderer.domElement.addEventListener(type, this.cancelFlight);
+		this.nodeDrag = new NodeDragController(this.createNodeDragHost());
 		this.camera = this.createCamera();
 		this.controls = this.createControls();
 		this.resizeObserver = new ResizeObserver(() => this.resize());
@@ -3514,78 +3795,170 @@ 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);
 		this.disposeGraphObjects();
 		this.data = {
@@ -3771,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);
@@ -3903,6 +4271,7 @@ var Graphraum = class {
 	setMode(mode) {
 		if (mode === this.mode) return;
 		this.cancelFlight();
+		this.nodeDrag.cancel({ restore: true });
 		this.stopAutoOrbit();
 		this.mode = mode;
 		this.controls.removeEventListener("change", this.handleViewChange);
@@ -3958,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;
 	}
@@ -4030,6 +4404,51 @@ var Graphraum = class {
 		listener();
 		return () => this.viewListeners.delete(listener);
 	}
+	/**
+	* Turns node dragging on or off (default off). A drag starts when the pointer moves past a small
+	* tolerance after a press on a node (a finger must rest on the node first, so a swipe still pans
+	* the camera), moves the node on a plane facing the camera, and ends on release. Escape or a
+	* cancelled pointer put the node back. Not available while the density LOD shows clusters.
+	*/
+	setNodeDrag(options) {
+		if (typeof options?.enabled !== "boolean") throw new Error("setNodeDrag option enabled must be a boolean.");
+		this.nodeDrag.setEnabled(options.enabled);
+	}
+	/** Subscribes to node drag steps (`start`, `move`, `end`, `cancel`). Returns an unsubscribe function. */
+	onNodeDrag(listener) {
+		this.nodeDragListeners.add(listener);
+		return () => this.nodeDragListeners.delete(listener);
+	}
+	createNodeDragHost() {
+		const element = this.renderer.domElement;
+		return {
+			canStart: () => !this.destroyed && this.nodeMesh !== null && !this.densityLodActive,
+			createSurface: (anchor) => createNodeDragSurface({
+				anchor,
+				bounds: () => element.getBoundingClientRect(),
+				camera: this.camera,
+				raycaster: this.raycaster
+			}),
+			document: element.ownerDocument,
+			element,
+			emit: (event) => {
+				for (const listener of this.nodeDragListeners) listener(event);
+			},
+			moveNode: (nodeId, position) => this.updateNodes([{
+				id: nodeId,
+				position
+			}]),
+			nodePosition: (nodeId) => {
+				const index = this.nodeIndices.get(nodeId);
+				const node = index === void 0 ? void 0 : this.data.nodes[index];
+				return node ? { ...node.position } : null;
+			},
+			pickNode: (clientX, clientY) => this.pickNode(clientX, clientY),
+			setControlsEnabled: (enabled) => {
+				this.controls.enabled = enabled;
+			}
+		};
+	}
 	/** Subscribes to selection and hover changes that affect overlay focus chrome. */
 	onFocusChange(listener) {
 		this.focusListeners.add(listener);
@@ -4040,6 +4459,7 @@ var Graphraum = class {
 		for (const listener of this.focusListeners) listener();
 	}
 	handlePointerMove = (event) => {
+		if (this.nodeDrag.active) return;
 		const nodeId = this.pickNode(event.clientX, event.clientY);
 		if (nodeId === this.lastHoveredNodeId) return;
 		this.lastHoveredNodeId = nodeId;
@@ -4396,6 +4816,7 @@ var Graphraum = class {
 	destroy() {
 		this.destroyed = true;
 		this.cancelFlight();
+		this.nodeDrag.dispose();
 		this.stopAutoOrbit();
 		this.resizeObserver.disconnect();
 		this.renderer.domElement.removeEventListener("pointermove", this.handlePointerMove);
@@ -4407,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();
@@ -4457,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;
@@ -4478,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;
@@ -4494,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;
 		}
@@ -4506,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. */
@@ -4540,6 +4969,7 @@ var Graphraum = class {
 	* without a loop.
 	*/
 	stepAutoOrbit = (deltaSeconds) => {
+		if (this.nodeDrag.active) return;
 		try {
 			this.controls.autoRotate = true;
 			this.orbitUpdating = true;
@@ -4631,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);
@@ -4799,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;
@@ -4839,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();
@@ -4863,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);
@@ -4910,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)));
@@ -5033,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.36.0",
+	"version": "0.38.0",
 	"description": "yggy's WebGL engine for interactive graphs in 2D and 3D",
 	"type": "module",
 	"license": "Apache-2.0",