@cocorof/graphier 1.2.0 → 1.3.1

package/dist/index.js

@@ -34,8 +34,8 @@ function hexToRgb(hex) {
   return [(n >> 16) / 255, (n >> 8 & 255) / 255, (n & 255) / 255];
 }
 function rgbToHex(r, g, b) {
-  const clamp2 = (v) => Math.round(Math.max(0, Math.min(1, v)) * 255);
-  const hex = clamp2(r) << 16 | clamp2(g) << 8 | clamp2(b);
+  const clamp = (v) => Math.round(Math.max(0, Math.min(1, v)) * 255);
+  const hex = clamp(r) << 16 | clamp(g) << 8 | clamp(b);
   return "#" + hex.toString(16).padStart(6, "0");
 }
 function brighten(hex, factor) {
@@ -1954,61 +1954,45 @@ function disposeLabelSystem(state) {
   }
   state.textureCache.clear();
 }
-const ORBIT_ACCEL = 12e-4;
-const ORBIT_MAX_SPEED = 0.06;
-const ORBIT_DAMPING = 0.88;
+const ORBIT_ROTATE_SPEED = 0.034;
 const ORBIT_ZOOM_FACTOR = 0.015;
-const ORBIT_DEAD_ZONE = 1e-4;
-const FLY_ACCEL = 6e-3;
-const FLY_FRICTION = 0.92;
-const FLY_MAX_THRUST = 0.18;
-const FLY_TURN_RATE = 8e-3;
-const FLY_DEAD_ZONE = 2e-4;
+const FLY_THRUST_SPEED = 0.056;
+const FLY_TURN_RATE = 0.0136;
 const _offset = new THREE.Vector3();
 const _right = new THREE.Vector3();
 const _q = new THREE.Quaternion();
 const _dir = new THREE.Vector3();
 const _worldUp = new THREE.Vector3(0, 1, 0);
-function clamp(v, min, max) {
-  return v < min ? min : v > max ? max : v;
-}
 function createOrbitUpdate(camera, controls, keys) {
-  const vel = { zoom: 0, azimuth: 0, polar: 0 };
   return function update() {
-    if (keys["z"] || keys["Z"]) vel.zoom -= ORBIT_ACCEL;
-    if (keys["x"] || keys["X"]) vel.zoom += ORBIT_ACCEL;
-    if (keys["ArrowLeft"]) vel.azimuth -= ORBIT_ACCEL;
-    if (keys["ArrowRight"]) vel.azimuth += ORBIT_ACCEL;
-    if (keys["ArrowUp"]) vel.polar -= ORBIT_ACCEL;
-    if (keys["ArrowDown"]) vel.polar += ORBIT_ACCEL;
-    vel.zoom = clamp(vel.zoom, -ORBIT_MAX_SPEED, ORBIT_MAX_SPEED);
-    vel.azimuth = clamp(vel.azimuth, -ORBIT_MAX_SPEED, ORBIT_MAX_SPEED);
-    vel.polar = clamp(vel.polar, -ORBIT_MAX_SPEED, ORBIT_MAX_SPEED);
-    vel.zoom *= ORBIT_DAMPING;
-    vel.azimuth *= ORBIT_DAMPING;
-    vel.polar *= ORBIT_DAMPING;
-    if (Math.abs(vel.zoom) < ORBIT_DEAD_ZONE) vel.zoom = 0;
-    if (Math.abs(vel.azimuth) < ORBIT_DEAD_ZONE) vel.azimuth = 0;
-    if (Math.abs(vel.polar) < ORBIT_DEAD_ZONE) vel.polar = 0;
-    const hasMotion = vel.zoom !== 0 || vel.azimuth !== 0 || vel.polar !== 0;
+    let zoom = 0;
+    let azimuth = 0;
+    let polar = 0;
+    if (keys["z"] || keys["Z"]) zoom -= ORBIT_ROTATE_SPEED;
+    if (keys["x"] || keys["X"]) zoom += ORBIT_ROTATE_SPEED;
+    if (keys["ArrowLeft"]) azimuth -= ORBIT_ROTATE_SPEED;
+    if (keys["ArrowRight"]) azimuth += ORBIT_ROTATE_SPEED;
+    if (keys["ArrowUp"]) polar -= ORBIT_ROTATE_SPEED;
+    if (keys["ArrowDown"]) polar += ORBIT_ROTATE_SPEED;
+    const hasMotion = zoom !== 0 || azimuth !== 0 || polar !== 0;
     if (!hasMotion) return false;
     const target = controls.target;
     _offset.copy(camera.position).sub(target);
     let radius = _offset.length();
-    if (vel.zoom !== 0) {
-      radius *= 1 + vel.zoom * ORBIT_ZOOM_FACTOR * radius * 0.01;
+    if (zoom !== 0) {
+      radius *= 1 + zoom * ORBIT_ZOOM_FACTOR * radius * 0.01;
       radius = Math.max(controls.minDistance, Math.min(controls.maxDistance, radius));
     }
-    if (vel.azimuth !== 0) {
-      _q.setFromAxisAngle(camera.up, -vel.azimuth);
+    if (azimuth !== 0) {
+      _q.setFromAxisAngle(camera.up, -azimuth);
       _offset.applyQuaternion(_q);
     }
-    if (vel.polar !== 0) {
+    if (polar !== 0) {
       _right.copy(_offset).normalize().cross(camera.up).normalize();
       if (_right.lengthSq() < 1e-3) {
         _right.setFromMatrixColumn(camera.matrixWorld, 0);
       }
-      _q.setFromAxisAngle(_right, vel.polar);
+      _q.setFromAxisAngle(_right, polar);
       _offset.applyQuaternion(_q);
       camera.up.applyQuaternion(_q).normalize();
     }
@@ -2020,44 +2004,37 @@ function createOrbitUpdate(camera, controls, keys) {
   };
 }
 function createFlyUpdate(camera, controls, keys, state) {
-  const vel = { thrust: 0, yaw: 0, pitch: 0 };
   return function update() {
     const speedMul = state.flySpeed;
-    if (keys["z"] || keys["Z"]) vel.thrust += FLY_ACCEL * speedMul;
-    if (keys["x"] || keys["X"]) vel.thrust -= FLY_ACCEL * speedMul;
-    if (keys["a"] || keys["A"] || keys["ArrowLeft"]) vel.yaw += FLY_TURN_RATE;
-    if (keys["d"] || keys["D"] || keys["ArrowRight"]) vel.yaw -= FLY_TURN_RATE;
-    if (keys["w"] || keys["W"] || keys["ArrowUp"]) vel.pitch += FLY_TURN_RATE;
-    if (keys["s"] || keys["S"] || keys["ArrowDown"]) vel.pitch -= FLY_TURN_RATE;
-    const lookDist = camera.position.distanceTo(controls.target);
-    const distScale = Math.max(0.3, lookDist * 3e-3);
-    vel.thrust = clamp(vel.thrust, -FLY_MAX_THRUST * distScale * speedMul, FLY_MAX_THRUST * distScale * speedMul);
-    vel.yaw = clamp(vel.yaw, -FLY_TURN_RATE * 2, FLY_TURN_RATE * 2);
-    vel.pitch = clamp(vel.pitch, -FLY_TURN_RATE * 2, FLY_TURN_RATE * 2);
-    vel.thrust *= FLY_FRICTION;
-    vel.yaw *= FLY_FRICTION;
-    vel.pitch *= FLY_FRICTION;
-    if (Math.abs(vel.thrust) < FLY_DEAD_ZONE) vel.thrust = 0;
-    if (Math.abs(vel.yaw) < FLY_DEAD_ZONE) vel.yaw = 0;
-    if (Math.abs(vel.pitch) < FLY_DEAD_ZONE) vel.pitch = 0;
-    const hasMotion = vel.thrust !== 0 || vel.yaw !== 0 || vel.pitch !== 0;
+    let thrust = 0;
+    let yaw = 0;
+    let pitch = 0;
+    if (keys["z"] || keys["Z"]) thrust += FLY_THRUST_SPEED * speedMul;
+    if (keys["x"] || keys["X"]) thrust -= FLY_THRUST_SPEED * speedMul;
+    if (keys["a"] || keys["A"] || keys["ArrowLeft"]) yaw += FLY_TURN_RATE;
+    if (keys["d"] || keys["D"] || keys["ArrowRight"]) yaw -= FLY_TURN_RATE;
+    if (keys["w"] || keys["W"] || keys["ArrowUp"]) pitch += FLY_TURN_RATE;
+    if (keys["s"] || keys["S"] || keys["ArrowDown"]) pitch -= FLY_TURN_RATE;
+    const hasMotion = thrust !== 0 || yaw !== 0 || pitch !== 0;
     if (!hasMotion) return false;
-    if (vel.yaw !== 0) {
+    if (yaw !== 0) {
       const upDot = camera.up.dot(_worldUp);
       const yawSign = upDot < 0 ? -1 : 1;
-      _q.setFromAxisAngle(_worldUp, vel.yaw * yawSign);
+      _q.setFromAxisAngle(_worldUp, yaw * yawSign);
       camera.quaternion.premultiply(_q);
       camera.up.applyQuaternion(_q).normalize();
     }
-    if (vel.pitch !== 0) {
+    if (pitch !== 0) {
       _right.setFromMatrixColumn(camera.matrixWorld, 0).normalize();
-      _q.setFromAxisAngle(_right, vel.pitch);
+      _q.setFromAxisAngle(_right, pitch);
       camera.quaternion.premultiply(_q);
       camera.up.applyQuaternion(_q).normalize();
     }
-    if (vel.thrust !== 0) {
+    if (thrust !== 0) {
+      const lookDist = camera.position.distanceTo(controls.target);
+      const distScale = Math.max(0.3, lookDist * 3e-3);
       camera.getWorldDirection(_dir);
-      _dir.multiplyScalar(vel.thrust * distScale * 100);
+      _dir.multiplyScalar(thrust * distScale * 100);
       camera.position.add(_dir);
       controls.target.add(_dir);
     }
@@ -2130,6 +2107,21 @@ function createScene(container, backgroundColor, style, rendererConfig) {
   scene.add(labels.group);
   const cameraMode = (rendererConfig == null ? void 0 : rendererConfig.cameraMode) ?? "fly";
   const keyboard = setupKeyboardControls(camera, controls, container, cameraMode, style.flySpeed ?? 1);
+  controls.enableZoom = false;
+  const _wheelDir = new THREE.Vector3();
+  const onWheel = (e) => {
+    e.preventDefault();
+    let delta = -e.deltaY;
+    if (e.deltaMode === 1) delta *= 40;
+    if (e.deltaMode === 2) delta *= 800;
+    camera.getWorldDirection(_wheelDir);
+    const dist = camera.position.distanceTo(controls.target);
+    const moveAmount = delta * 2e-3 * Math.max(dist * 0.1, 1);
+    camera.position.addScaledVector(_wheelDir, moveAmount);
+    controls.target.addScaledVector(_wheelDir, moveAmount);
+  };
+  canvas.addEventListener("wheel", onWheel, { passive: false });
+  const scrollCleanup = () => canvas.removeEventListener("wheel", onWheel);
   return {
     scene,
     camera,
@@ -2140,7 +2132,8 @@ function createScene(container, backgroundColor, style, rendererConfig) {
     labels,
     composer: null,
     bloomPass: null,
-    keyboard
+    keyboard,
+    scrollCleanup
   };
 }
 function initBloom(state, nodeCount, style) {
@@ -2167,9 +2160,21 @@ function initBloom(state, nodeCount, style) {
 }
 function startAnimationLoop(state, onTick) {
   let animFrame;
+  let wasKeyboardActive = false;
+  const _syncDir = new THREE.Vector3();
   function animate() {
     animFrame = requestAnimationFrame(animate);
     const keyboardActive = state.keyboard.update();
+    if (wasKeyboardActive && !keyboardActive) {
+      const dist = state.camera.position.distanceTo(
+        state.controls.target
+      );
+      state.camera.getWorldDirection(_syncDir);
+      state.controls.target.copy(state.camera.position).add(_syncDir.multiplyScalar(dist));
+      state.camera.up.set(0, 1, 0);
+      state.camera.lookAt(state.controls.target);
+    }
+    wasKeyboardActive = keyboardActive;
     if (!keyboardActive) state.controls.update();
     if (state.selectionRing.visible) {
       state.selectionRing.quaternion.copy(state.camera.quaternion);
@@ -2970,6 +2975,7 @@ function NetworkGraph3DInner(props, ref) {
       resizeObserver.disconnect();
       interaction.cleanup();
       state.keyboard.cleanup();
+      state.scrollCleanup();
       state.controls.dispose();
       disposeObject(state.stars);
       disposeObject(state.selectionRing);