@fusefactory/fuse-three-forcegraph 1.0.7 → 1.1.0

package/dist/index.d.mts

@@ -74,12 +74,10 @@ declare class CameraController {
   camera: THREE.PerspectiveCamera;
   controls: CameraControls;
   private sceneBounds;
-  private domElement;
   private autorotateEnabled;
   private autorotateSpeed;
   private userIsActive;
   constructor(domelement: HTMLElement, config?: CameraConfig);
-  private handleWheel;
   private setupDefaultControls;
   /**
        * Set camera control mode
@@ -1104,6 +1102,7 @@ declare class InputProcessor extends EventEmitter {
   private handlePointerDown;
   private handlePointerUp;
   private handlePointerLeave;
+  private handlePointerCancel;
   private updateHover;
   /**
        * Update hover state even when pointer is stationary
@@ -1126,6 +1125,7 @@ declare class InteractionManager {
   private hoverHandler;
   private clickHandler;
   private dragHandler;
+  private keyboardNavigator;
   tooltipManager: TooltipManager;
   private isDragging;
   isTooltipSticky: boolean;
@@ -1423,6 +1423,14 @@ declare class Engine {
     y: number;
     z: number;
   }, distance: number, transitionDuration?: number): Promise<void>;
+  /**
+       * Reset camera to its initial position and target
+       */
+  resetCamera(enableTransition?: boolean): Promise<void>;
+  /**
+       * Fit camera to show all currently visible nodes
+       */
+  fitToView(enableTransition?: boolean): Promise<void>;
   /**
        * Cleanup
        */

package/dist/index.mjs

@@ -557,6 +557,7 @@ var InputProcessor = class extends EventEmitter {
 		this.canvas.addEventListener("pointerdown", this.handlePointerDown);
 		this.canvas.addEventListener("pointerup", this.handlePointerUp);
 		this.canvas.addEventListener("pointerleave", this.handlePointerLeave);
+		this.canvas.addEventListener("pointercancel", this.handlePointerCancel);
 	}
 	handlePointerMove = (event) => {
 		this.updatePointer(event);
@@ -590,6 +591,7 @@ var InputProcessor = class extends EventEmitter {
 		}
 	};
 	handlePointerDown = (event) => {
+		this.canvas.setPointerCapture(event.pointerId);
 		this.updatePointer(event);
 		this.mouseDownTime = Date.now();
 		this.isPointerDown = true;
@@ -607,6 +609,7 @@ var InputProcessor = class extends EventEmitter {
 		});
 	};
 	handlePointerUp = (event) => {
+		this.updatePointer(event);
 		const clickDuration = Date.now() - this.mouseDownTime;
 		const wasClick = this.isTouch ? !this.isDragging : clickDuration < this.CLICK_THRESHOLD;
 		if (this.isDragging) this.emit("pointer:dragend", {
@@ -637,6 +640,31 @@ var InputProcessor = class extends EventEmitter {
 		this.lastClientX = null;
 		this.lastClientY = null;
 		this.updateHover(-1);
+		if (this.isDragging) {
+			this.emit("pointer:dragend", {
+				index: this.draggedIndex,
+				x: this.canvasPointer.x,
+				y: this.canvasPointer.y,
+				clientX: this.pointerDownX,
+				clientY: this.pointerDownY
+			});
+			this.isPointerDown = false;
+			this.isDragging = false;
+			this.draggedIndex = -1;
+		}
+	};
+	handlePointerCancel = (_event) => {
+		if (this.isDragging) this.emit("pointer:dragend", {
+			index: this.draggedIndex,
+			x: this.canvasPointer.x,
+			y: this.canvasPointer.y,
+			clientX: this.pointerDownX,
+			clientY: this.pointerDownY
+		});
+		this.isPointerDown = false;
+		this.isDragging = false;
+		this.draggedIndex = -1;
+		this.updateHover(-1);
 	};
 	updateHover(index) {
 		const prevIndex = this.currentHoverIndex;
@@ -720,6 +748,72 @@ var InputProcessor = class extends EventEmitter {
 		this.canvas.removeEventListener("pointerdown", this.handlePointerDown);
 		this.canvas.removeEventListener("pointerup", this.handlePointerUp);
 		this.canvas.removeEventListener("pointerleave", this.handlePointerLeave);
+		this.canvas.removeEventListener("pointercancel", this.handlePointerCancel);
+	}
+};
+
+//#endregion
+//#region controls/KeyboardNavigator.ts
+const PAN_STEP = .05;
+const ORBIT_STEP = .05;
+var KeyboardNavigator = class {
+	boundHandler;
+	constructor(camera, interactionManager, canvas) {
+		this.camera = camera;
+		this.interactionManager = interactionManager;
+		this.canvas = canvas;
+		this.boundHandler = this.handleKeyDown.bind(this);
+		canvas.setAttribute("tabindex", "0");
+		canvas.addEventListener("keydown", this.boundHandler);
+	}
+	handleKeyDown(e) {
+		if (e.metaKey || e.ctrlKey) return;
+		const c = this.camera.controls;
+		const radius = c._spherical.radius;
+		switch (e.key) {
+			case "ArrowLeft":
+				e.preventDefault();
+				e.shiftKey ? c.truck(-radius * PAN_STEP, 0, true) : c.rotate(-ORBIT_STEP, 0, true);
+				break;
+			case "ArrowRight":
+				e.preventDefault();
+				e.shiftKey ? c.truck(radius * PAN_STEP, 0, true) : c.rotate(ORBIT_STEP, 0, true);
+				break;
+			case "ArrowUp":
+				e.preventDefault();
+				e.shiftKey ? c.truck(0, -radius * PAN_STEP, true) : c.rotate(0, -ORBIT_STEP, true);
+				break;
+			case "ArrowDown":
+				e.preventDefault();
+				e.shiftKey ? c.truck(0, radius * PAN_STEP, true) : c.rotate(0, ORBIT_STEP, true);
+				break;
+			case "+":
+			case "=":
+				e.preventDefault();
+				c.dolly(-radius * .1, true);
+				break;
+			case "-":
+			case "_":
+				e.preventDefault();
+				c.dolly(radius * .1, true);
+				break;
+			case "f":
+			case "F":
+			case "Home":
+				e.preventDefault();
+				this.camera.reset(void 0, void 0, true);
+				break;
+			case "Escape":
+				if (this.interactionManager.isTooltipSticky) {
+					this.interactionManager.tooltipManager.hideFull();
+					this.interactionManager.isTooltipSticky = false;
+					this.interactionManager.stickyNodeId = null;
+				}
+				break;
+		}
+	}
+	dispose() {
+		this.canvas.removeEventListener("keydown", this.boundHandler);
 	}
 };
 
@@ -730,6 +824,7 @@ var InteractionManager = class {
 	hoverHandler;
 	clickHandler;
 	dragHandler;
+	keyboardNavigator = null;
 	tooltipManager;
 	isDragging = false;
 	isTooltipSticky = false;
@@ -750,6 +845,7 @@ var InteractionManager = class {
 		this.wireEvents();
 		this.wireTooltipEvents();
 		this.wireVisualFeedbackEvents();
+		if (cameraController) this.keyboardNavigator = new KeyboardNavigator(cameraController, this, canvas);
 	}
 	wireEvents() {
 		this.pointerInput.on("pointer:hoverstart", (data) => {
@@ -909,6 +1005,7 @@ var InteractionManager = class {
 		this.hoverHandler.dispose();
 		this.clickHandler.dispose();
 		this.dragHandler.dispose();
+		this.keyboardNavigator?.dispose();
 		this.tooltipManager.dispose();
 	}
 };
@@ -927,7 +1024,6 @@ var CameraController = class {
 	camera;
 	controls;
 	sceneBounds = null;
-	domElement;
 	autorotateEnabled = false;
 	autorotateSpeed = .5;
 	userIsActive = true;
@@ -938,22 +1034,9 @@ var CameraController = class {
 		else this.camera.position.set(0, 0, 2);
 		this.controls = new CameraControls(this.camera, domelement);
 		this.setupDefaultControls(config);
-		this.handleWheel = this.handleWheel.bind(this);
-		domelement.addEventListener("wheel", this.handleWheel, {
-			capture: true,
-			passive: true
-		});
-	}
-	handleWheel() {
-		if (!this.controls.dollyToCursor) return;
-		const c = this.controls;
-		if (c._spherical && c._sphericalEnd) {
-			c._spherical.theta = c._sphericalEnd.theta;
-			c._spherical.phi = c._sphericalEnd.phi;
-		}
 	}
 	setupDefaultControls(config) {
-		this.controls.smoothTime = .8;
+		this.controls.smoothTime = .5;
 		this.controls.dollyToCursor = true;
 		this.controls.minDistance = config?.minDistance ?? 100;
 		this.controls.maxDistance = config?.maxDistance ?? 4e3;
@@ -1059,7 +1142,6 @@ var CameraController = class {
 	* Dispose camera manager and clean up
 	*/
 	dispose() {
-		this.domElement.removeEventListener("wheel", this.handleWheel, { capture: true });
 		this.controls.dispose();
 	}
 	/**
@@ -4515,6 +4597,33 @@ var Engine = class {
 		await this.setCameraLookAt(newPos, targetVec, transitionDuration);
 	}
 	/**
+	* Reset camera to its initial position and target
+	*/
+	async resetCamera(enableTransition = true) {
+		await this.graphScene.camera.reset(void 0, void 0, enableTransition);
+	}
+	/**
+	* Fit camera to show all currently visible nodes
+	*/
+	async fitToView(enableTransition = true) {
+		if (!this.simulationBuffers.isReady()) return;
+		const positions = this.simulationBuffers.readPositions();
+		const nodes = this.graphStore.getNodes();
+		const box = new THREE.Box3();
+		nodes.forEach((_node, i) => {
+			if (positions[i * 4 + 3] === 0) return;
+			box.expandByPoint(new THREE.Vector3(positions[i * 4], positions[i * 4 + 1], positions[i * 4 + 2]));
+		});
+		if (box.isEmpty()) return;
+		const center = box.getCenter(new THREE.Vector3());
+		const size = box.getSize(new THREE.Vector3());
+		const maxDim = Math.max(size.x, size.y, size.z);
+		const fov = this.graphScene.camera.camera.fov * THREE.MathUtils.DEG2RAD;
+		const distance = maxDim / 2 / Math.tan(fov / 2) * 1.5;
+		const camPos = center.clone().add(this.graphScene.camera.camera.position.clone().sub(center).normalize().multiplyScalar(distance));
+		await this.graphScene.camera.setLookAt(camPos, center, enableTransition);
+	}
+	/**
 	* Cleanup
 	*/
 	dispose() {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusefactory/fuse-three-forcegraph",
   "type": "module",
-  "version": "1.0.7",
+  "version": "1.1.0",
   "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",
@@ -29,12 +29,12 @@
   },
   "dependencies": {
     "@rnbo/js": "^1.4.2",
-    "camera-controls": "^3.1.1",
-    "three": "^0.181.2"
+    "camera-controls": "https://github.com/ammlyy/camera-controls.git",
+    "three": "^0.183.2"
   },
   "devDependencies": {
-    "@types/three": "^0.181.0",
-    "tsdown": "0.20.0-beta.3",
+    "@types/three": "^0.183.1",
+    "tsdown": "^0.21.0",
     "typescript": "^5.9.3",
     "vite-plugin-glsl": "^1.5.5"
   },