@cocorof/graphier 1.4.2 → 1.4.4

package/dist/index.js

@@ -2213,6 +2213,14 @@ function createScene(container, backgroundColor, style, rendererConfig) {
   renderer.toneMappingExposure = 1.2;
   const canvas = renderer.domElement;
   canvas.style.setProperty("display", "block", "important");
+  canvas.draggable = false;
+  canvas.style.userSelect = "none";
+  canvas.style.setProperty("-webkit-user-drag", "none");
+  canvas.style.touchAction = "none";
+  const onDragStart = (e) => e.preventDefault();
+  canvas.addEventListener("dragstart", onDragStart);
+  const onSelectStart = (e) => e.preventDefault();
+  canvas.addEventListener("selectstart", onSelectStart);
   container.appendChild(canvas);
   const controls = new OrbitControls(camera, canvas);
   controls.enableDamping = true;
@@ -2221,6 +2229,7 @@ function createScene(container, backgroundColor, style, rendererConfig) {
   controls.zoomSpeed = 1.2;
   controls.minDistance = 10;
   controls.maxDistance = 3e4;
+  controls.screenSpacePanning = true;
   scene.add(new THREE.AmbientLight(16777215, 0.8));
   const stars = createStarField(4e3, 8e3);
   stars.visible = style.starField;
@@ -2234,23 +2243,35 @@ function createScene(container, backgroundColor, style, rendererConfig) {
   controls.enableZoom = false;
   const flags = {
     is2D: false,
-    keyboardMode3D: cameraMode
+    keyboardMode3D: cameraMode,
+    rotateButton: null
   };
-  const _wheelDir = new THREE.Vector3();
+  const _wheelOffset = new THREE.Vector3();
   const onWheel = (e) => {
     if (flags.is2D) return;
     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 target = controls.target;
+    _wheelOffset.copy(camera.position).sub(target);
+    const dist = _wheelOffset.length();
     const moveAmount = delta * 2e-3 * Math.max(dist * 0.1, 1);
-    camera.position.addScaledVector(_wheelDir, moveAmount);
-    controls.target.addScaledVector(_wheelDir, moveAmount);
+    const newDist = Math.min(
+      Math.max(dist - moveAmount, controls.minDistance),
+      controls.maxDistance
+    );
+    _wheelOffset.setLength(newDist);
+    camera.position.copy(target).add(_wheelOffset);
   };
   canvas.addEventListener("wheel", onWheel, { passive: false });
-  const scrollCleanup = () => canvas.removeEventListener("wheel", onWheel);
+  const trackballCleanup = setupTrackballRotation(canvas, camera, controls, flags);
+  const scrollCleanup = () => {
+    canvas.removeEventListener("wheel", onWheel);
+    canvas.removeEventListener("dragstart", onDragStart);
+    canvas.removeEventListener("selectstart", onSelectStart);
+    trackballCleanup();
+  };
   return {
     scene,
     camera,
@@ -2266,24 +2287,80 @@ function createScene(container, backgroundColor, style, rendererConfig) {
     flags
   };
 }
-const MOUSE_ACTION = {
-  rotate: THREE.MOUSE.ROTATE,
-  pan: THREE.MOUSE.PAN
-};
+const TRACKBALL_SPEED = 4e-3;
+function setupTrackballRotation(canvas, camera, controls, flags) {
+  let rotating = false;
+  let lastX = 0;
+  let lastY = 0;
+  const _offset2 = new THREE.Vector3();
+  const _right2 = new THREE.Vector3();
+  const _upAxis = new THREE.Vector3();
+  const _q2 = new THREE.Quaternion();
+  const _qPitch = new THREE.Quaternion();
+  function onDown(e) {
+    if (flags.rotateButton == null || e.button !== flags.rotateButton) return;
+    rotating = true;
+    lastX = e.clientX;
+    lastY = e.clientY;
+    try {
+      canvas.setPointerCapture(e.pointerId);
+    } catch {
+    }
+  }
+  function onMove(e) {
+    if (!rotating) return;
+    const dx = e.clientX - lastX;
+    const dy = e.clientY - lastY;
+    lastX = e.clientX;
+    lastY = e.clientY;
+    if (!dx && !dy) return;
+    const target = controls.target;
+    _offset2.copy(camera.position).sub(target);
+    _right2.setFromMatrixColumn(camera.matrix, 0);
+    _upAxis.setFromMatrixColumn(camera.matrix, 1);
+    _q2.setFromAxisAngle(_upAxis, -dx * TRACKBALL_SPEED);
+    _qPitch.setFromAxisAngle(_right2, -dy * TRACKBALL_SPEED);
+    _q2.multiply(_qPitch);
+    _offset2.applyQuaternion(_q2);
+    camera.up.applyQuaternion(_q2).normalize();
+    camera.position.copy(target).add(_offset2);
+    camera.lookAt(target);
+  }
+  function onUp(e) {
+    if (!rotating) return;
+    rotating = false;
+    try {
+      canvas.releasePointerCapture(e.pointerId);
+    } catch {
+    }
+  }
+  canvas.addEventListener("pointerdown", onDown);
+  canvas.addEventListener("pointermove", onMove);
+  canvas.addEventListener("pointerup", onUp);
+  canvas.addEventListener("pointercancel", onUp);
+  return () => {
+    canvas.removeEventListener("pointerdown", onDown);
+    canvas.removeEventListener("pointermove", onMove);
+    canvas.removeEventListener("pointerup", onUp);
+    canvas.removeEventListener("pointercancel", onUp);
+  };
+}
 function applyNavigationMode(state, is2D, nav) {
   const { controls, camera, keyboard } = state;
   state.flags.is2D = is2D;
   const left = (nav == null ? void 0 : nav.leftButton) ?? (is2D ? "pan" : "rotate");
   const right = (nav == null ? void 0 : nav.rightButton) ?? (is2D ? "rotate" : "pan");
+  const NONE = -1;
   controls.mouseButtons = {
-    LEFT: MOUSE_ACTION[left],
+    LEFT: left === "pan" ? THREE.MOUSE.PAN : NONE,
     MIDDLE: THREE.MOUSE.DOLLY,
-    RIGHT: MOUSE_ACTION[right]
+    RIGHT: right === "pan" ? THREE.MOUSE.PAN : NONE
   };
-  controls.enableRotate = left === "rotate" || right === "rotate";
+  controls.enableRotate = false;
+  state.flags.rotateButton = left === "rotate" ? 0 : right === "rotate" ? 2 : null;
   controls.touches = left === "pan" ? { ONE: THREE.TOUCH.PAN, TWO: THREE.TOUCH.DOLLY_PAN } : { ONE: THREE.TOUCH.ROTATE, TWO: THREE.TOUCH.DOLLY_PAN };
   controls.enableZoom = is2D;
-  controls.screenSpacePanning = is2D;
+  controls.screenSpacePanning = true;
   const kb = (nav == null ? void 0 : nav.keyboard) ?? (is2D ? "pan" : state.flags.keyboardMode3D);
   if (kb === "off") {
     keyboard.setEnabled(false);
@@ -2619,6 +2696,7 @@ function animateCamera(camera, controls, targetPos, targetLookAt, duration) {
 function zoomToFitPositions(camera, controls, positions, duration, padding) {
   const count = positions.length / 3;
   if (count === 0) return;
+  camera.up.set(0, 1, 0);
   let cx = 0, cy = 0, cz = 0;
   for (let i = 0; i < count; i++) {
     cx += positions[i * 3];
@@ -2863,8 +2941,8 @@ function setupInteraction(canvas, camera, controls, getNodesMesh, getNodes, call
     }
   }
   function onContextMenu2(e) {
-    if (!callbacks.onContextMenu) return;
     e.preventDefault();
+    if (!callbacks.onContextMenu) return;
     const nodesMesh = getNodesMesh();
     if (!nodesMesh) return;
     const rect = canvas.getBoundingClientRect();
@@ -3786,7 +3864,14 @@ function NetworkGraph3DInner(props, ref) {
     {
       ref: containerRef,
       tabIndex: -1,
-      style: { width: "100%", height: "100%", outline: "none" }
+      style: {
+        width: "100%",
+        height: "100%",
+        outline: "none",
+        userSelect: "none",
+        WebkitUserSelect: "none"
+      },
+      onDragStart: (e) => e.preventDefault()
     }
   );
 }