@fusefactory/fuse-three-forcegraph 1.0.2 → 1.0.3

package/dist/index.d.mts

@@ -220,6 +220,7 @@ interface GraphPreset {
   };
   links?: {
     opacity?: number;
+    noiseStrength?: number;
   };
 }
 //#endregion
@@ -1013,20 +1014,15 @@ declare class TooltipManager {
    * Hide all tooltips
    */
   hideAll(): void;
-  /**
-   * Generate preview content (subset of fields)
-   */
-  private generatePreviewContent;
-  /**
-   * Generate full tooltip content (all fields)
-   */
-  private generateFullContent;
-  private escapeHtml;
   showMainTooltip(content: string, x: number, y: number): void;
   hideMainTooltip(): void;
   showChainTooltip(nodeId: string, content: string, x: number, y: number): void;
   hideChainTooltips(): void;
   updateMainTooltipPos(x: number, y: number): void;
+  /**
+   * Set main tooltip visibility (doesn't affect open state or content)
+   */
+  setMainTooltipVisibility(visible: boolean): void;
   dispose(): void;
 }
 //#endregion
@@ -1225,6 +1221,7 @@ declare class Engine {
   private isRunning;
   private boundResizeHandler;
   private groupOrder?;
+  private smoothedTooltipPos;
   constructor(canvas: HTMLCanvasElement, options?: EngineOptions);
   /**
    * Handle window resize event
@@ -1239,6 +1236,17 @@ declare class Engine {
    * This allows changing visibility/behavior without resetting the simulation
    */
   updateNodeStates(callback: (node: GraphNode) => NodeState): void;
+  /**
+   * Set target positions for elastic force (tree layout, etc.)
+   * Writes positions into the "original positions" GPU buffer that ElasticPass reads from,
+   * without touching current positions or node states.
+   * Must be called AFTER applyPreset() since updateNodeStates() overwrites original positions.
+   */
+  setTargetPositions(targets: Map<string, {
+    x: number;
+    y: number;
+    z: number;
+  }>): void;
   /**
    * Reheat the simulation
    */
@@ -1289,13 +1297,16 @@ declare class Engine {
   getNodePosition(nodeId: string): THREE.Vector3 | null;
   /**
    * Get node screen position from world position
+   * Returns position and visibility info (whether node is on screen and in front of camera)
    */
   getNodeScreenPosition(nodeId: string): {
     x: number;
     y: number;
+    visible: boolean;
   } | null;
   /**
    * Update sticky tooltip position to follow node during camera movement
+   * Uses lerp smoothing to filter out micro-jitter from force simulation
    */
   private updateStickyTooltipPosition;
   /**

package/dist/index.mjs

@@ -449,6 +449,18 @@ var Tooltip = class {
 			if (this.positionCallback) this.positionCallback(x, y);
 		}
 	}
+	/**
+	* Show tooltip (visibility only, doesn't affect open state)
+	*/
+	show() {
+		if (this.isVisible) this.element.style.visibility = "visible";
+	}
+	/**
+	* Hide tooltip (visibility only, doesn't close/cleanup)
+	*/
+	hide() {
+		this.element.style.visibility = "hidden";
+	}
 	getElement() {
 		return this.element;
 	}
@@ -466,12 +478,9 @@ var TooltipManager = class {
 		this.canvas = canvas;
 		this.chainTooltips = /* @__PURE__ */ new Map();
 		this.closeButton = null;
-		this.config = {
-			useDefaultStyles: true,
-			...config
-		};
-		this.mainTooltip = new Tooltip("main", container, this.config.useDefaultStyles);
-		this.previewTooltip = new Tooltip("preview", container, this.config.useDefaultStyles);
+		this.config = { ...config };
+		this.mainTooltip = new Tooltip("main", container);
+		this.previewTooltip = new Tooltip("preview", container);
 	}
 	/**
 	* Show grab cursor when hovering over a node
@@ -594,45 +603,16 @@ var TooltipManager = class {
 		this.hideFull();
 		this.hideChainTooltips();
 	}
-	/**
-	* Generate preview content (subset of fields)
-	*/
-	generatePreviewContent(node) {
-		return `
-            <div class="tooltip-preview" style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;">
-                <h3 style="margin: 0 0 8px 0; font-size: 16px; font-weight: 600;">${this.escapeHtml(node.title || node.id)}</h3>
-                <p style="margin: 0; font-size: 13px; opacity: 0.8;">${this.escapeHtml(node.group || "unknown")}</p>
-            </div>
-        `;
-	}
-	/**
-	* Generate full tooltip content (all fields)
-	*/
-	generateFullContent(node) {
-		return `
-            <div class="tooltip-full" style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; padding-right: 24px;">
-                <h2 style="margin: 0 0 12px 0; font-size: 18px; font-weight: 600;">${this.escapeHtml(node.title || node.id)}</h2>
-                ${node.thumbnailUrl ? `<img src="${this.escapeHtml(node.thumbnailUrl)}" alt="thumbnail" style="max-width: 100%; height: auto; border-radius: 4px; margin: 0 0 12px 0;" />` : ""}
-                <p style="margin: 0 0 8px 0; font-size: 13px;"><strong>Group:</strong> ${this.escapeHtml(node.group || "unknown")}</p>
-                ${node.description ? `<p style="margin: 0 0 8px 0; font-size: 13px; line-height: 1.5;">${this.escapeHtml(node.description)}</p>` : ""}
-                <p style="margin: 0; font-size: 12px; opacity: 0.6;"><strong>ID:</strong> ${this.escapeHtml(node.id)}</p>
-            </div>
-        `;
-	}
-	escapeHtml(text) {
-		const div = document.createElement("div");
-		div.textContent = text;
-		return div.innerHTML;
-	}
 	showMainTooltip(content, x, y) {
 		this.mainTooltip.open(content);
 		this.mainTooltip.updatePos(x, y);
+		console.log("Showing main tooltip");
 	}
 	hideMainTooltip() {
 		this.mainTooltip.close();
 	}
 	showChainTooltip(nodeId, content, x, y) {
-		if (!this.chainTooltips.has(nodeId)) this.chainTooltips.set(nodeId, new Tooltip("label", this.container, this.config.useDefaultStyles));
+		if (!this.chainTooltips.has(nodeId)) this.chainTooltips.set(nodeId, new Tooltip("label", this.container));
 		const tooltip = this.chainTooltips.get(nodeId);
 		tooltip.open(content);
 		tooltip.updatePos(x, y);
@@ -643,6 +623,13 @@ var TooltipManager = class {
 	updateMainTooltipPos(x, y) {
 		this.mainTooltip.updatePos(x, y);
 	}
+	/**
+	* Set main tooltip visibility (doesn't affect open state or content)
+	*/
+	setMainTooltipVisibility(visible) {
+		if (visible) this.mainTooltip.show();
+		else this.mainTooltip.hide();
+	}
 	dispose() {
 		this.removeCloseButton();
 		this.mainTooltip.destroy();
@@ -995,11 +982,11 @@ var CameraController = class {
 
 //#endregion
 //#region assets/glsl/lines/lines.frag
-var lines_default$1 = "precision mediump float;\n\nvarying vec3 vColor;\r\nflat varying float vAlphaIndex;\n\nuniform sampler2D uAlphaTexture;\r\nuniform vec2 uAlphaTextureSize; \n\nvec2 alphaUvFromIndex(float idx) {\r\n    float width = uAlphaTextureSize.x;\r\n    float texX = mod(idx, width);\r\n    float texY = floor(idx / width);\r\n    return (vec2(texX + 0.5, texY + 0.5) / uAlphaTextureSize);\r\n}\n\nvoid main() {\r\n    vec2 uv = alphaUvFromIndex(vAlphaIndex);\r\n    float a = texture2D(uAlphaTexture, uv).r;\n\n    gl_FragColor = vec4(vColor, a);\r\n    #include <colorspace_fragment>\r\n}";
+var lines_default$1 = "precision mediump float;\n\nvarying vec3 vColor;\r\nflat varying float vAlphaIndex;\r\nflat varying float vRank;\n\nuniform sampler2D uAlphaTexture;\r\nuniform vec2 uAlphaTextureSize; \n\nvec2 alphaUvFromIndex(float idx) {\r\n    float width = uAlphaTextureSize.x;\r\n    float texX = mod(idx, width);\r\n    float texY = floor(idx / width);\r\n    return (vec2(texX + 0.5, texY + 0.5) / uAlphaTextureSize);\r\n}\n\nvoid main() {\r\n    vec2 uv = alphaUvFromIndex(vAlphaIndex);\r\n    float a = texture2D(uAlphaTexture, uv).r;\n\n    gl_FragColor = vec4(vColor, a * vRank);\r\n    #include <colorspace_fragment>\r\n}";
 
 //#endregion
 //#region assets/glsl/lines/lines.vert
-var lines_default = "attribute float t;\n\nattribute vec2 instanceLinkA;\r\nattribute vec2 instanceLinkB;\r\nattribute vec3 instanceColorA;\r\nattribute vec3 instanceColorB;\r\nattribute float instanceAlphaIndex;\n\nuniform sampler2D uPositionsTexture;\r\nuniform vec2 uPositionsTextureSize;\r\nuniform float uNoiseStrength;\r\nuniform float uTime;\n\nvarying vec3 vColor;\r\nflat varying float vAlphaIndex;\n\nvec3 organicNoise(vec3 p, float seed) {\r\n    float frequency = 1.5;\r\n    float branchiness = 5.;\r\n    \r\n    \n    vec3 n1 = sin(p * frequency + seed) * 0.5;\r\n    vec3 n2 = sin(p * frequency * 2.3 + seed * 1.5) * 0.25 * (1.0 + branchiness);\r\n    vec3 n3 = sin(p * frequency * 4.7 + seed * 2.3) * 0.125 * (1.0 + branchiness);\r\n    \r\n    return n1 + n2 + n3;\r\n}\n\nfloat smoothCurve(float t) {\r\n    return t * t * (3.0 - 2.0 * t);\r\n}\n\nvoid main() {\r\n    \n    vColor = mix(instanceColorA, instanceColorB, t);\r\n    vAlphaIndex = instanceAlphaIndex;\n\n    \n    vec2 uvA = (instanceLinkA + vec2(0.5)) / uPositionsTextureSize;\r\n    vec2 uvB = (instanceLinkB + vec2(0.5)) / uPositionsTextureSize;\n\n    vec4 posA = texture2D(uPositionsTexture, uvA);\r\n    vec4 posB = texture2D(uPositionsTexture, uvB);\r\n    if (posA.w < 0.5 || posB.w < 0.5) {\r\n        \n        gl_Position = vec4(2.0, 2.0, 2.0, 1.0); \r\n        return;\r\n    }\r\n    vec3 linear = mix(posA.xyz, posB.xyz, t);\r\n    \r\n    \n    vec3 dir = normalize(posB.xyz - posA.xyz);\r\n    float dist = length(posB.xyz - posA.xyz);\r\n    vec3 up = abs(dir.y) < 0.99 ? vec3(0.0, 1.0, 0.0) : vec3(1.0, 0.0, 0.0);\r\n    vec3 perp = normalize(cross(dir, up));\r\n    vec3 upVec = normalize(cross(perp, dir));\n\n    \r\n    \n    float sinPhase = instanceAlphaIndex * 0.1 + uTime * 0.3;\r\n    float sinWave = sin(t * 3.14159265 * 2.0 + sinPhase);\r\n    \r\n    \n    float tSmooth = smoothCurve(t);\r\n    float curve = sin(t * 3.14159265) * tSmooth;\r\n    \r\n    \n    float curvature = 0.1;\r\n    curve = pow(curve, 1.0 - curvature * 0.5);\r\n    \r\n    float intensity = curve * uNoiseStrength;\n\n    vec3 pos = linear;\n\n    if (intensity > 0.001) {\r\n        \n        vec3 samplePos = linear * 0.5 + vec3(instanceAlphaIndex, 0.0, instanceAlphaIndex * 0.7);\r\n        vec3 noise = organicNoise(samplePos, instanceAlphaIndex);\r\n        \r\n        \n        float sinModulation = 0.5 + 0.5 * sinWave;\r\n        pos += perp * noise.x * intensity * sinModulation;\r\n        pos += upVec * noise.y * intensity * 0.7;\r\n        pos += dir * noise.z * intensity * 0.3;\r\n    }\n\n    vec4 mvPosition = modelViewMatrix * vec4(pos, 1.0);\r\n    gl_Position = projectionMatrix * mvPosition;\r\n}";
+var lines_default = "attribute float t;\n\nattribute vec2 instanceLinkA;\r\nattribute vec2 instanceLinkB;\r\nattribute vec3 instanceColorA;\r\nattribute vec3 instanceColorB;\r\nattribute float instanceAlphaIndex;\r\nattribute float instanceRank;\n\nuniform sampler2D uPositionsTexture;\r\nuniform vec2 uPositionsTextureSize;\r\nuniform float uNoiseStrength;\r\nuniform float uTime;\n\nvarying vec3 vColor;\r\nflat varying float vAlphaIndex;\r\nflat varying float vRank;\n\nvec3 organicNoise(vec3 p, float seed) {\r\n    float frequency = 1.5;\r\n    float branchiness = 5.;\r\n    \r\n    \n    vec3 n1 = sin(p * frequency + seed) * 0.5;\r\n    vec3 n2 = sin(p * frequency * 2.3 + seed * 1.5) * 0.25 * (1.0 + branchiness);\r\n    vec3 n3 = sin(p * frequency * 4.7 + seed * 2.3) * 0.125 * (1.0 + branchiness);\r\n    \r\n    return n1 + n2 + n3;\r\n}\n\nfloat smoothCurve(float t) {\r\n    return t * t * (3.0 - 2.0 * t);\r\n}\n\nvoid main() {\r\n    \n    vColor = mix(instanceColorA, instanceColorB, t);\r\n    vAlphaIndex = instanceAlphaIndex;\r\n    vRank = instanceRank;\n\n    \n    vec2 uvA = (instanceLinkA + vec2(0.5)) / uPositionsTextureSize;\r\n    vec2 uvB = (instanceLinkB + vec2(0.5)) / uPositionsTextureSize;\n\n    vec4 posA = texture2D(uPositionsTexture, uvA);\r\n    vec4 posB = texture2D(uPositionsTexture, uvB);\r\n    if (posA.w < 0.5 || posB.w < 0.5) {\r\n        \n        gl_Position = vec4(2.0, 2.0, 2.0, 1.0); \r\n        return;\r\n    }\r\n    vec3 linear = mix(posA.xyz, posB.xyz, t);\r\n    \r\n    \n    vec3 dir = normalize(posB.xyz - posA.xyz);\r\n    float dist = length(posB.xyz - posA.xyz);\r\n    vec3 up = abs(dir.y) < 0.99 ? vec3(0.0, 1.0, 0.0) : vec3(1.0, 0.0, 0.0);\r\n    vec3 perp = normalize(cross(dir, up));\r\n    vec3 upVec = normalize(cross(perp, dir));\n\n    \r\n    \n    float sinPhase = instanceAlphaIndex * 0.1 + uTime * 0.3;\r\n    float sinWave = sin(t * 3.14159265 * 2.0 + sinPhase);\r\n    \r\n    \n    float tSmooth = smoothCurve(t);\r\n    float curve = sin(t * 3.14159265) * tSmooth;\r\n    \r\n    \n    float curvature = 0.1;\r\n    curve = pow(curve, 1.0 - curvature * 0.5);\r\n    \r\n    float intensity = curve * uNoiseStrength;\n\n    vec3 pos = linear;\n\n    if (intensity > 0.001) {\r\n        \n        vec3 samplePos = linear * 0.5 + vec3(instanceAlphaIndex, 0.0, instanceAlphaIndex * 0.7);\r\n        vec3 noise = organicNoise(samplePos, instanceAlphaIndex);\r\n        \r\n        \n        float sinModulation = 0.5 + 0.5 * sinWave;\r\n        pos += perp * noise.x * intensity * sinModulation;\r\n        pos += upVec * noise.y * intensity * 0.7;\r\n        pos += dir * noise.z * intensity * 0.3;\r\n    }\n\n    vec4 mvPosition = modelViewMatrix * vec4(pos, 1.0);\r\n    gl_Position = projectionMatrix * mvPosition;\r\n}";
 
 //#endregion
 //#region core/StyleRegistry.ts
@@ -1450,7 +1437,7 @@ var LinksRenderer = class {
 		this.linkIndexMap = /* @__PURE__ */ new Map();
 		this.interpolationSteps = 24;
 		this.params = {
-			noiseStrength: .2,
+			noiseStrength: .1,
 			defaultAlpha: .02,
 			highlightAlpha: .8,
 			dimmedAlpha: .02,
@@ -1636,7 +1623,13 @@ var LinksRenderer = class {
 	/**
 	* Create link geometry with interpolated segments
 	*/
-	createLinkGeometry(links, nodes, nodeTextureSize) {
+	createLinkGeometry(links, nodes, nodeTextureSize, groupOrder = [
+		"root",
+		"series",
+		"artwork",
+		"exhibition",
+		"media"
+	]) {
 		const linkIndexMap = /* @__PURE__ */ new Map();
 		const nodeMap = /* @__PURE__ */ new Map();
 		nodes.forEach((node) => nodeMap.set(node.id, node));
@@ -1664,6 +1657,11 @@ var LinksRenderer = class {
 		const instanceColorA = new Float32Array(links.length * 3);
 		const instanceColorB = new Float32Array(links.length * 3);
 		const instanceAlphaIndex = new Float32Array(links.length);
+		const instanceRank = new Float32Array(links.length);
+		const categoryRankMap = /* @__PURE__ */ new Map();
+		groupOrder.forEach((g, i) => categoryRankMap.set(g, i));
+		let nextRank = groupOrder.length;
+		const maxRank = Math.max(groupOrder.length - 1, 1);
 		links.forEach((link, i) => {
 			const sourceId = link.source && typeof link.source === "object" ? link.source.id : link.source;
 			const targetId = link.target && typeof link.target === "object" ? link.target.id : link.target;
@@ -1698,6 +1696,9 @@ var LinksRenderer = class {
 			instanceColorB[i * 3 + 1] = tgtColor.g;
 			instanceColorB[i * 3 + 2] = tgtColor.b;
 			instanceAlphaIndex[i] = i;
+			const targetCategory = targetNode?.category ?? "";
+			if (targetCategory && !categoryRankMap.has(targetCategory)) categoryRankMap.set(targetCategory, nextRank++);
+			instanceRank[i] = 1 - .75 * ((categoryRankMap.get(targetCategory) ?? 0) / maxRank);
 			const linkId = `${sourceId}-${targetId}`;
 			linkIndexMap.set(linkId, i);
 		});
@@ -1706,6 +1707,7 @@ var LinksRenderer = class {
 		geometry.setAttribute("instanceColorA", new THREE.InstancedBufferAttribute(instanceColorA, 3));
 		geometry.setAttribute("instanceColorB", new THREE.InstancedBufferAttribute(instanceColorB, 3));
 		geometry.setAttribute("instanceAlphaIndex", new THREE.InstancedBufferAttribute(instanceAlphaIndex, 1));
+		geometry.setAttribute("instanceRank", new THREE.InstancedBufferAttribute(instanceRank, 1));
 		return {
 			geometry,
 			linkIndexMap
@@ -1780,10 +1782,8 @@ var LinksRenderer = class {
 				const category = nodeCategories[tIdx] || "";
 				if (category && !categoryRankMap.has(category)) categoryRankMap.set(category, nextRank++);
 				const rank = categoryRankMap.get(category) ?? 0;
-				const strength = 1 / (rank + 1);
-				const distance = .3 ** rank;
-				linkPropertiesData[di] = strength;
-				linkPropertiesData[di + 1] = distance;
+				1 / (rank + 1);
+				.3 ** rank;
 			}
 			nodeCursor[tIdx] = offset + 1;
 		}
@@ -2235,7 +2235,8 @@ var GraphScene = class {
 			canvas,
 			antialias: true,
 			alpha: true,
-			depth: true
+			depth: true,
+			logarithmicDepthBuffer: true
 		});
 		this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
 		this.renderer.setSize(window.innerWidth, window.innerHeight);
@@ -3137,7 +3138,7 @@ var ForceSimulation = class {
 	}
 	updateDrag(targetWorldPos) {
 		this.dragPass.updateDrag(targetWorldPos);
-		this.reheat(.01);
+		this.reheat(.1);
 	}
 	endDrag() {
 		this.dragPass.endDrag();
@@ -3850,6 +3851,7 @@ var Engine = class {
 		this.animationFrameId = null;
 		this.isRunning = false;
 		this.boundResizeHandler = null;
+		this.smoothedTooltipPos = null;
 		this.animate = () => {
 			if (!this.isRunning) return;
 			const deltaTime = this.clock.update();
@@ -3940,6 +3942,33 @@ var Engine = class {
 		this.simulationBuffers.setOriginalPositions(newOriginalPositions);
 	}
 	/**
+	* Set target positions for elastic force (tree layout, etc.)
+	* Writes positions into the "original positions" GPU buffer that ElasticPass reads from,
+	* without touching current positions or node states.
+	* Must be called AFTER applyPreset() since updateNodeStates() overwrites original positions.
+	*/
+	setTargetPositions(targets) {
+		if (!this.simulationBuffers.isReady()) return;
+		const nodes = this.graphStore.getNodes();
+		const currentPositions = this.simulationBuffers.readPositions();
+		const newOriginalPositions = new Float32Array(nodes.length * 4);
+		nodes.forEach((node, i) => {
+			const target = targets.get(node.id);
+			const state = currentPositions[i * 4 + 3];
+			if (target) {
+				newOriginalPositions[i * 4] = target.x;
+				newOriginalPositions[i * 4 + 1] = target.y;
+				newOriginalPositions[i * 4 + 2] = target.z;
+			} else {
+				newOriginalPositions[i * 4] = currentPositions[i * 4];
+				newOriginalPositions[i * 4 + 1] = currentPositions[i * 4 + 1];
+				newOriginalPositions[i * 4 + 2] = currentPositions[i * 4 + 2];
+			}
+			newOriginalPositions[i * 4 + 3] = state;
+		});
+		this.simulationBuffers.setOriginalPositions(newOriginalPositions);
+	}
+	/**
 	* Reheat the simulation
 	*/
 	reheat(alpha = 1) {
@@ -3992,13 +4021,20 @@ var Engine = class {
 				this.forceSimulation.reheat();
 			}
 		}
+		if (this.forceSimulation.config.enableRadial) {
+			const rootCategories = preset.radial?.rootCategories ?? ["root"];
+			this.computeRadialDepths(rootCategories);
+		}
 		if (preset.links) {
 			const linkRenderer = this.graphScene.getLinkRenderer();
-			if (linkRenderer) linkRenderer.setOptions({ alpha: { default: preset.links.opacity } });
+			if (linkRenderer) linkRenderer.setOptions({
+				alpha: { default: preset.links.opacity },
+				noiseStrength: preset.links.noiseStrength
+			});
 		}
 	}
 	/**
-	* 
+	*
 	* Start render loop
 	*/
 	start() {
@@ -4061,6 +4097,7 @@ var Engine = class {
 	}
 	/**
 	* Get node screen position from world position
+	* Returns position and visibility info (whether node is on screen and in front of camera)
 	*/
 	getNodeScreenPosition(nodeId) {
 		const pos = this.getNodePosition(nodeId);
@@ -4069,18 +4106,40 @@ var Engine = class {
 		const size = new THREE.Vector2();
 		this.graphScene.renderer.getSize(size);
 		const rect = this.graphScene.renderer.domElement.getBoundingClientRect();
+		const x = (screenPos.x + 1) / 2 * size.x + rect.left;
+		const y = -(screenPos.y - 1) / 2 * size.y + rect.top;
+		const behindCamera = screenPos.z > 1;
+		const outsideViewport = x < rect.left || x > rect.right || y < rect.top || y > rect.bottom;
 		return {
-			x: (screenPos.x + 1) / 2 * size.x + rect.left,
-			y: -(screenPos.y - 1) / 2 * size.y + rect.top
+			x,
+			y,
+			visible: !behindCamera && !outsideViewport
 		};
 	}
 	/**
 	* Update sticky tooltip position to follow node during camera movement
+	* Uses lerp smoothing to filter out micro-jitter from force simulation
 	*/
 	updateStickyTooltipPosition() {
-		if (!this.interactionManager.isTooltipSticky || !this.interactionManager.stickyNodeId) return;
+		if (!this.interactionManager.isTooltipSticky || !this.interactionManager.stickyNodeId) {
+			this.smoothedTooltipPos = null;
+			return;
+		}
 		const screenPos = this.getNodeScreenPosition(this.interactionManager.stickyNodeId);
-		if (screenPos) this.interactionManager.tooltipManager.updateMainTooltipPos(screenPos.x, screenPos.y);
+		if (!screenPos) return;
+		this.interactionManager.tooltipManager.setMainTooltipVisibility(screenPos.visible);
+		if (!screenPos.visible) return;
+		const targetX = screenPos.x;
+		const targetY = screenPos.y;
+		if (!this.smoothedTooltipPos || this.smoothedTooltipPos.nodeId !== this.interactionManager.stickyNodeId) this.smoothedTooltipPos = {
+			x: targetX,
+			y: targetY,
+			nodeId: this.interactionManager.stickyNodeId
+		};
+		const lerpFactor = .35;
+		this.smoothedTooltipPos.x += (targetX - this.smoothedTooltipPos.x) * lerpFactor;
+		this.smoothedTooltipPos.y += (targetY - this.smoothedTooltipPos.y) * lerpFactor;
+		this.interactionManager.tooltipManager.updateMainTooltipPos(this.smoothedTooltipPos.x, this.smoothedTooltipPos.y);
 	}
 	/**
 	* Programmatically select a node (highlight + tooltip)
@@ -4095,6 +4154,7 @@ var Engine = class {
 		const connectedIds = this.graphStore.getConnectedNodeIds(node.id);
 		connectedIds.push(node.id);
 		nodeRenderer?.highlight(connectedIds);
+		this.smoothedTooltipPos = null;
 		const screenPos = this.getNodeScreenPosition(nodeId);
 		if (screenPos) this.interactionManager.tooltipManager.showFull(node, screenPos.x, screenPos.y);
 	}

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@fusefactory/fuse-three-forcegraph",
-  "version": "1.0.2",
+  "version": "1.0.3",
+  "packageManager": "pnpm@10.6.4",
   "description": "A high-performance GPU-accelerated force-directed graph visualization library built with Three.js. Features a modular pass-based architecture for flexible and extensible force simulations.",
   "author": "Matteo Amerena",
   "license": "ISC",
@@ -14,6 +15,10 @@
   "files": [
     "dist"
   ],
+  "scripts": {
+    "build": "tsdown",
+    "watch": "tsdown --watch"
+  },
   "dependencies": {
     "@rnbo/js": "^1.4.2",
     "camera-controls": "^3.1.1",
@@ -25,6 +30,11 @@
     "typescript": "^5.9.3",
     "vite-plugin-glsl": "^1.5.5"
   },
+  "pnpm": {
+    "onlyBuiltDependencies": [
+      "esbuild"
+    ]
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/fusefactory/fuse-three-forcegraph.git"
@@ -32,9 +42,5 @@
   "bugs": {
     "url": "https://github.com/fusefactory/fuse-three-forcegraph/issues"
   },
-  "homepage": "https://github.com/fusefactory/fuse-three-forcegraph#readme",
-  "scripts": {
-    "build": "tsdown",
-    "watch": "tsdown --watch"
-  }
-}
+  "homepage": "https://github.com/fusefactory/fuse-three-forcegraph#readme"
+}