@lv-x-software-house/x_view 1.2.6-dev.45 → 1.2.6-dev.47

package/dist/index.js

@@ -14403,7 +14403,8 @@ function XViewScene({
     maxAncestryRenderIndex: 0,
     lastRenderedAncestryId: null,
     lastDescriptionLength: 0,
-    highlightedNodeId: null
+    highlightedNodeId: null,
+    keysPressed: {}
   });
   const maxReadPanelW = typeof window !== "undefined" ? window.innerWidth * 0.92 : 1200;
   const {
@@ -14574,20 +14575,20 @@ function XViewScene({
   };
   const tweenToTarget = (0, import_react31.useCallback)(
     (target, zoomFactor = 1, forcedDirection = null) => {
-      const { camera, controls, tweenGroup } = stateRef.current;
-      if (!camera || !controls || !tweenGroup) return;
+      const { camera: sceneCamera, controls: sceneControls, tweenGroup } = stateRef.current;
+      if (!sceneCamera || !sceneControls || !tweenGroup) return;
       const targetPos = target instanceof THREE3.Mesh ? target.getWorldPosition(new THREE3.Vector3()) : target;
-      const controlsTween = new import_tween2.Tween(controls.target).to(targetPos, 1500).easing(import_tween2.Easing.Cubic.Out);
+      const controlsTween = new import_tween2.Tween(sceneControls.target).to(targetPos, 1500).easing(import_tween2.Easing.Cubic.Out);
       tweenGroup.add(controlsTween);
       controlsTween.start();
       let offset;
       if (forcedDirection) {
         offset = forcedDirection.clone().normalize().multiplyScalar(x_view_config.CAMERA_ZOOM_DISTANCE / zoomFactor);
       } else {
-        offset = camera.position.clone().sub(controls.target).normalize().multiplyScalar(x_view_config.CAMERA_ZOOM_DISTANCE / zoomFactor);
+        offset = sceneCamera.position.clone().sub(sceneControls.target).normalize().multiplyScalar(x_view_config.CAMERA_ZOOM_DISTANCE / zoomFactor);
       }
       const targetCameraPos = targetPos.clone().add(offset);
-      const cameraTween = new import_tween2.Tween(camera.position).to(targetCameraPos, 1500).easing(import_tween2.Easing.Cubic.Out);
+      const cameraTween = new import_tween2.Tween(sceneCamera.position).to(targetCameraPos, 1500).easing(import_tween2.Easing.Cubic.Out);
       tweenGroup.add(cameraTween);
       cameraTween.start();
     },
@@ -15333,14 +15334,14 @@ function XViewScene({
       });
     });
     if (questCount > 0) {
-      const { camera, controls } = stateRef.current;
+      const { camera: sceneCamera, controls: sceneControls } = stateRef.current;
       const centerX = sumX / questCount;
       const centerY = sumY / questCount;
       const targetFocus = new THREE3.Vector3(centerX, centerY, 0);
-      const targetTween = new import_tween2.Tween(controls.target).to({ x: targetFocus.x, y: targetFocus.y, z: targetFocus.z }, 1500).easing(import_tween2.Easing.Cubic.InOut);
+      const targetTween = new import_tween2.Tween(sceneControls.target).to({ x: targetFocus.x, y: targetFocus.y, z: targetFocus.z }, 1500).easing(import_tween2.Easing.Cubic.InOut);
       tweenGroup.add(targetTween);
       targetTween.start();
-      const camTween = new import_tween2.Tween(camera.position).to({ x: targetFocus.x, y: targetFocus.y, z: 140 }, 1500).easing(import_tween2.Easing.Cubic.InOut);
+      const camTween = new import_tween2.Tween(sceneCamera.position).to({ x: targetFocus.x, y: targetFocus.y, z: 140 }, 1500).easing(import_tween2.Easing.Cubic.InOut);
       tweenGroup.add(camTween);
       camTween.start();
     }
@@ -16020,6 +16021,28 @@ function XViewScene({
         ancestryData: ancestryDataRef.current
       });
       (_b2 = stateRef.current.tweenGroup) == null ? void 0 : _b2.update(time);
+      const { keysPressed, controls: sceneControls, camera: sceneCamera } = stateRef.current;
+      if (sceneControls && keysPressed) {
+        const panSpeed = 0.8;
+        const rotateSpeed = 0.025;
+        const zoomSpeed = 1.025;
+        const isShift = !!keysPressed["shiftKey"];
+        const isCtrl = !!keysPressed["ctrlKey"];
+        if (isCtrl) {
+          if (keysPressed["ArrowLeft"]) sceneControls._rotateLeft(rotateSpeed);
+          if (keysPressed["ArrowRight"]) sceneControls._rotateLeft(-rotateSpeed);
+          if (keysPressed["ArrowUp"]) sceneControls._rotateUp(rotateSpeed);
+          if (keysPressed["ArrowDown"]) sceneControls._rotateUp(-rotateSpeed);
+        } else if (isShift) {
+          if (keysPressed["ArrowUp"]) sceneControls._dollyIn(zoomSpeed);
+          if (keysPressed["ArrowDown"]) sceneControls._dollyOut(zoomSpeed);
+        } else {
+          if (keysPressed["ArrowLeft"]) sceneControls.panLeft(panSpeed, sceneCamera.matrix);
+          if (keysPressed["ArrowRight"]) sceneControls.panLeft(-panSpeed, sceneCamera.matrix);
+          if (keysPressed["ArrowUp"]) sceneControls.panUp(panSpeed, sceneCamera.matrix);
+          if (keysPressed["ArrowDown"]) sceneControls.panUp(-panSpeed, sceneCamera.matrix);
+        }
+      }
       stateRef.current.controls.update();
       renderer.autoClear = false;
       renderer.clear();
@@ -18495,9 +18518,9 @@ function XViewScene({
         if (isUiClear) {
           const isView = ((_c2 = viewParams == null ? void 0 : viewParams.type) == null ? void 0 : _c2.toLowerCase()) === "view";
           if (!isView) return;
-          const { graphGroup, glowTexture, controls, nodeObjects } = stateRef.current;
+          const { graphGroup, glowTexture, controls: sceneControls, nodeObjects } = stateRef.current;
           if (graphGroup) {
-            let ghostPosition = controls.target.clone();
+            let ghostPosition = sceneControls.target.clone();
             const existingNodes = Object.values(nodeObjects);
             let isOccupied = true;
             let radius = 18;
@@ -18509,9 +18532,9 @@ function XViewScene({
                 (mesh) => mesh.position.distanceTo(ghostPosition) < MIN_CLEARANCE
               );
               if (isOccupied) {
-                ghostPosition.x = controls.target.x + Math.cos(angle) * radius;
-                ghostPosition.y = controls.target.y + (Math.random() - 0.5) * 8;
-                ghostPosition.z = controls.target.z + Math.sin(angle) * radius;
+                ghostPosition.x = sceneControls.target.x + Math.cos(angle) * radius;
+                ghostPosition.y = sceneControls.target.y + (Math.random() - 0.5) * 8;
+                ghostPosition.z = sceneControls.target.z + Math.sin(angle) * radius;
                 angle += Math.PI / 3;
                 radius += 2.5;
                 attempts++;
@@ -18555,35 +18578,26 @@ function XViewScene({
       if (isArrowKey) {
         const isUiClear = !stateRef.current.creation.isActive && !stateRef.current.connection.isActive && !stateRef.current.relink.isActive && !stateRef.current.ancestry.isActive && !((_d2 = context.versionMode) == null ? void 0 : _d2.isActive) && !contextMenu.visible && !multiContextMenu.visible && !relationshipMenu.visible && !readingMode.isActive && !isImportModalOpen && !isBoardsOpen && !isSidebarOpen && !isMilestoneManagerOpen && !detailsNode && !detailsLink && !ancestryLinkDetails && !imageViewer.visible && !editingAncestryRel.visible && !questMode.isActive;
         if (isUiClear) {
-          const { controls } = stateRef.current;
-          if (controls) {
-            event.preventDefault();
-            const rotateAngle = Math.PI / 36;
-            const zoomScale = 1.1;
-            if (event.key === "ArrowLeft") {
-              controls._rotateLeft(rotateAngle);
-            } else if (event.key === "ArrowRight") {
-              controls._rotateLeft(-rotateAngle);
-            } else if (event.key === "ArrowUp") {
-              if (event.shiftKey) {
-                controls._dollyIn(zoomScale);
-              } else {
-                controls._rotateUp(rotateAngle);
-              }
-            } else if (event.key === "ArrowDown") {
-              if (event.shiftKey) {
-                controls._dollyOut(zoomScale);
-              } else {
-                controls._rotateUp(-rotateAngle);
-              }
-            }
-            controls.update();
-          }
+          event.preventDefault();
+          stateRef.current.keysPressed[event.key] = true;
+          stateRef.current.keysPressed["shiftKey"] = event.shiftKey;
+          stateRef.current.keysPressed["ctrlKey"] = event.ctrlKey || event.metaKey;
         }
       }
     }
+    function handleKeyUp(event) {
+      if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(event.key)) {
+        stateRef.current.keysPressed[event.key] = false;
+      }
+      stateRef.current.keysPressed["shiftKey"] = event.shiftKey;
+      stateRef.current.keysPressed["ctrlKey"] = event.ctrlKey || event.metaKey;
+    }
     window.addEventListener("keydown", handleKeyDown);
-    return () => window.removeEventListener("keydown", handleKeyDown);
+    window.addEventListener("keyup", handleKeyUp);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+      window.removeEventListener("keyup", handleKeyUp);
+    };
   }, [
     contextMenu.visible,
     multiContextMenu.visible,

package/dist/index.mjs

@@ -14459,7 +14459,8 @@ function XViewScene({
     maxAncestryRenderIndex: 0,
     lastRenderedAncestryId: null,
     lastDescriptionLength: 0,
-    highlightedNodeId: null
+    highlightedNodeId: null,
+    keysPressed: {}
   });
   const maxReadPanelW = typeof window !== "undefined" ? window.innerWidth * 0.92 : 1200;
   const {
@@ -14630,20 +14631,20 @@ function XViewScene({
   };
   const tweenToTarget = useCallback6(
     (target, zoomFactor = 1, forcedDirection = null) => {
-      const { camera, controls, tweenGroup } = stateRef.current;
-      if (!camera || !controls || !tweenGroup) return;
+      const { camera: sceneCamera, controls: sceneControls, tweenGroup } = stateRef.current;
+      if (!sceneCamera || !sceneControls || !tweenGroup) return;
       const targetPos = target instanceof THREE3.Mesh ? target.getWorldPosition(new THREE3.Vector3()) : target;
-      const controlsTween = new Tween2(controls.target).to(targetPos, 1500).easing(Easing2.Cubic.Out);
+      const controlsTween = new Tween2(sceneControls.target).to(targetPos, 1500).easing(Easing2.Cubic.Out);
       tweenGroup.add(controlsTween);
       controlsTween.start();
       let offset;
       if (forcedDirection) {
         offset = forcedDirection.clone().normalize().multiplyScalar(x_view_config.CAMERA_ZOOM_DISTANCE / zoomFactor);
       } else {
-        offset = camera.position.clone().sub(controls.target).normalize().multiplyScalar(x_view_config.CAMERA_ZOOM_DISTANCE / zoomFactor);
+        offset = sceneCamera.position.clone().sub(sceneControls.target).normalize().multiplyScalar(x_view_config.CAMERA_ZOOM_DISTANCE / zoomFactor);
       }
       const targetCameraPos = targetPos.clone().add(offset);
-      const cameraTween = new Tween2(camera.position).to(targetCameraPos, 1500).easing(Easing2.Cubic.Out);
+      const cameraTween = new Tween2(sceneCamera.position).to(targetCameraPos, 1500).easing(Easing2.Cubic.Out);
       tweenGroup.add(cameraTween);
       cameraTween.start();
     },
@@ -15389,14 +15390,14 @@ function XViewScene({
       });
     });
     if (questCount > 0) {
-      const { camera, controls } = stateRef.current;
+      const { camera: sceneCamera, controls: sceneControls } = stateRef.current;
       const centerX = sumX / questCount;
       const centerY = sumY / questCount;
       const targetFocus = new THREE3.Vector3(centerX, centerY, 0);
-      const targetTween = new Tween2(controls.target).to({ x: targetFocus.x, y: targetFocus.y, z: targetFocus.z }, 1500).easing(Easing2.Cubic.InOut);
+      const targetTween = new Tween2(sceneControls.target).to({ x: targetFocus.x, y: targetFocus.y, z: targetFocus.z }, 1500).easing(Easing2.Cubic.InOut);
       tweenGroup.add(targetTween);
       targetTween.start();
-      const camTween = new Tween2(camera.position).to({ x: targetFocus.x, y: targetFocus.y, z: 140 }, 1500).easing(Easing2.Cubic.InOut);
+      const camTween = new Tween2(sceneCamera.position).to({ x: targetFocus.x, y: targetFocus.y, z: 140 }, 1500).easing(Easing2.Cubic.InOut);
       tweenGroup.add(camTween);
       camTween.start();
     }
@@ -16076,6 +16077,28 @@ function XViewScene({
         ancestryData: ancestryDataRef.current
       });
       (_b2 = stateRef.current.tweenGroup) == null ? void 0 : _b2.update(time);
+      const { keysPressed, controls: sceneControls, camera: sceneCamera } = stateRef.current;
+      if (sceneControls && keysPressed) {
+        const panSpeed = 0.8;
+        const rotateSpeed = 0.025;
+        const zoomSpeed = 1.025;
+        const isShift = !!keysPressed["shiftKey"];
+        const isCtrl = !!keysPressed["ctrlKey"];
+        if (isCtrl) {
+          if (keysPressed["ArrowLeft"]) sceneControls._rotateLeft(rotateSpeed);
+          if (keysPressed["ArrowRight"]) sceneControls._rotateLeft(-rotateSpeed);
+          if (keysPressed["ArrowUp"]) sceneControls._rotateUp(rotateSpeed);
+          if (keysPressed["ArrowDown"]) sceneControls._rotateUp(-rotateSpeed);
+        } else if (isShift) {
+          if (keysPressed["ArrowUp"]) sceneControls._dollyIn(zoomSpeed);
+          if (keysPressed["ArrowDown"]) sceneControls._dollyOut(zoomSpeed);
+        } else {
+          if (keysPressed["ArrowLeft"]) sceneControls.panLeft(panSpeed, sceneCamera.matrix);
+          if (keysPressed["ArrowRight"]) sceneControls.panLeft(-panSpeed, sceneCamera.matrix);
+          if (keysPressed["ArrowUp"]) sceneControls.panUp(panSpeed, sceneCamera.matrix);
+          if (keysPressed["ArrowDown"]) sceneControls.panUp(-panSpeed, sceneCamera.matrix);
+        }
+      }
       stateRef.current.controls.update();
       renderer.autoClear = false;
       renderer.clear();
@@ -18551,9 +18574,9 @@ function XViewScene({
         if (isUiClear) {
           const isView = ((_c2 = viewParams == null ? void 0 : viewParams.type) == null ? void 0 : _c2.toLowerCase()) === "view";
           if (!isView) return;
-          const { graphGroup, glowTexture, controls, nodeObjects } = stateRef.current;
+          const { graphGroup, glowTexture, controls: sceneControls, nodeObjects } = stateRef.current;
           if (graphGroup) {
-            let ghostPosition = controls.target.clone();
+            let ghostPosition = sceneControls.target.clone();
             const existingNodes = Object.values(nodeObjects);
             let isOccupied = true;
             let radius = 18;
@@ -18565,9 +18588,9 @@ function XViewScene({
                 (mesh) => mesh.position.distanceTo(ghostPosition) < MIN_CLEARANCE
               );
               if (isOccupied) {
-                ghostPosition.x = controls.target.x + Math.cos(angle) * radius;
-                ghostPosition.y = controls.target.y + (Math.random() - 0.5) * 8;
-                ghostPosition.z = controls.target.z + Math.sin(angle) * radius;
+                ghostPosition.x = sceneControls.target.x + Math.cos(angle) * radius;
+                ghostPosition.y = sceneControls.target.y + (Math.random() - 0.5) * 8;
+                ghostPosition.z = sceneControls.target.z + Math.sin(angle) * radius;
                 angle += Math.PI / 3;
                 radius += 2.5;
                 attempts++;
@@ -18611,35 +18634,26 @@ function XViewScene({
       if (isArrowKey) {
         const isUiClear = !stateRef.current.creation.isActive && !stateRef.current.connection.isActive && !stateRef.current.relink.isActive && !stateRef.current.ancestry.isActive && !((_d2 = context.versionMode) == null ? void 0 : _d2.isActive) && !contextMenu.visible && !multiContextMenu.visible && !relationshipMenu.visible && !readingMode.isActive && !isImportModalOpen && !isBoardsOpen && !isSidebarOpen && !isMilestoneManagerOpen && !detailsNode && !detailsLink && !ancestryLinkDetails && !imageViewer.visible && !editingAncestryRel.visible && !questMode.isActive;
         if (isUiClear) {
-          const { controls } = stateRef.current;
-          if (controls) {
-            event.preventDefault();
-            const rotateAngle = Math.PI / 36;
-            const zoomScale = 1.1;
-            if (event.key === "ArrowLeft") {
-              controls._rotateLeft(rotateAngle);
-            } else if (event.key === "ArrowRight") {
-              controls._rotateLeft(-rotateAngle);
-            } else if (event.key === "ArrowUp") {
-              if (event.shiftKey) {
-                controls._dollyIn(zoomScale);
-              } else {
-                controls._rotateUp(rotateAngle);
-              }
-            } else if (event.key === "ArrowDown") {
-              if (event.shiftKey) {
-                controls._dollyOut(zoomScale);
-              } else {
-                controls._rotateUp(-rotateAngle);
-              }
-            }
-            controls.update();
-          }
+          event.preventDefault();
+          stateRef.current.keysPressed[event.key] = true;
+          stateRef.current.keysPressed["shiftKey"] = event.shiftKey;
+          stateRef.current.keysPressed["ctrlKey"] = event.ctrlKey || event.metaKey;
         }
       }
     }
+    function handleKeyUp(event) {
+      if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(event.key)) {
+        stateRef.current.keysPressed[event.key] = false;
+      }
+      stateRef.current.keysPressed["shiftKey"] = event.shiftKey;
+      stateRef.current.keysPressed["ctrlKey"] = event.ctrlKey || event.metaKey;
+    }
     window.addEventListener("keydown", handleKeyDown);
-    return () => window.removeEventListener("keydown", handleKeyDown);
+    window.addEventListener("keyup", handleKeyUp);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+      window.removeEventListener("keyup", handleKeyUp);
+    };
   }, [
     contextMenu.visible,
     multiContextMenu.visible,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lv-x-software-house/x_view",
-  "version": "1.2.6-dev.45",
+  "version": "1.2.6-dev.47",
   "description": "Pacote privado contendo os componentes e lógica de renderização 3D do X View.",
   "author": "iv.x - Engenharia de Software - ivxsoftwarehouse@gmail.com",
   "license": "UNLICENSED",