@lv-x-software-house/x_view 1.2.5-dev.44 → 1.2.5-dev.46

package/dist/index.js

@@ -1098,6 +1098,7 @@ function XViewSidebar({
         onClick: () => {
           onActivateQuestLens({ assigneeId: questFilterAssignee, status: questFilterStatus });
           setIsQuestLensMenuOpen(false);
+          onToggle(false);
         },
         className: "flex-[2] py-2 bg-indigo-600 hover:bg-indigo-500 text-white text-[11px] font-bold rounded-lg shadow-lg shadow-indigo-500/20 transition-all hover:scale-[1.02] active:scale-95"
       },
@@ -14059,6 +14060,27 @@ function XViewScene({
       timeToYMap.set(ms, idx * TIMELINE_LAYER_SPACING_Y);
     });
     const startX = -((QUEST_STATUS_ORDER.length - 1) * QUEST_LENS_COLUMN_SPACING) / 2;
+    let sumX = 0;
+    let sumY = 0;
+    let questCount = 0;
+    const positionGroups = /* @__PURE__ */ new Map();
+    const NODE_X_GAP = 22;
+    QUEST_STATUS_ORDER.forEach((statusName) => {
+      const questsInCol = questsByStatus[statusName];
+      questsInCol.forEach((q, rowIndex) => {
+        const timeInfo = questTimeInfos.get(String(q.id)) || { isUndated: true };
+        let nodeY;
+        if (!timeInfo.isUndated) {
+          nodeY = timeToYMap.get(timeInfo.startDate.getTime());
+        } else {
+          const undatedOffset = sortedTimePoints.length > 0 ? sortedTimePoints.length * 5 : 0;
+          nodeY = -40 - rowIndex * QUEST_LENS_ROW_SPACING - undatedOffset;
+        }
+        const posKey = `${statusName}_${nodeY}`;
+        if (!positionGroups.has(posKey)) positionGroups.set(posKey, []);
+        positionGroups.get(posKey).push(String(q.id));
+      });
+    });
     Object.values(nodeObjects).forEach((mesh) => {
       const oldLabel = mesh.getObjectByName("questDateLabel") || mesh.getObjectByName("timelineLabel");
       if (oldLabel) {
@@ -14074,21 +14096,40 @@ function XViewScene({
         mesh.userData.timelineEndLabel = null;
       }
     });
-    Object.keys(nodeObjects).forEach((id) => {
+    const nonFilteredNodeIds = Object.keys(nodeObjects).filter((id) => !filteredQuests.some((q) => String(q.id) === String(id)));
+    const COMMON_START_X = startX - 100;
+    const COMMON_COL_SPACING = 30;
+    const COMMON_ROW_SPACING = 35;
+    const MAX_COMMON_ROWS = 15;
+    nonFilteredNodeIds.forEach((id, idx) => {
       const mesh = nodeObjects[id];
-      const isFilteredQuest = filteredQuests.some(
-        (q) => String(q.id) === String(id)
-      );
-      if (!isFilteredQuest) {
-        if (mesh.material) {
-          const fadeTween = new import_tween2.Tween(mesh.material).to({ opacity: 0.15 }, 1200).easing(import_tween2.Easing.Cubic.Out);
-          tweenGroup.add(fadeTween);
-          fadeTween.start();
-        }
-        if (mesh.userData.labelObject) {
-          mesh.userData.labelObject.visible = false;
-        }
-      } else {
+      if (!mesh) return;
+      const col = Math.floor(idx / MAX_COMMON_ROWS);
+      const row = idx % MAX_COMMON_ROWS;
+      const targetX = COMMON_START_X - col * COMMON_COL_SPACING;
+      const targetY = -(row * COMMON_ROW_SPACING) + 50;
+      const targetZ = 0;
+      if (mesh.material) {
+        const opacityTween = new import_tween2.Tween(mesh.material).to({ opacity: 1 }, 1200).easing(import_tween2.Easing.Cubic.Out);
+        tweenGroup.add(opacityTween);
+        opacityTween.start();
+      }
+      if (mesh.userData.labelObject) {
+        mesh.userData.labelObject.visible = true;
+        const labelTargetPos = new THREE3.Vector3(targetX, targetY, targetZ).add(
+          mesh.userData.labelOffset || new THREE3.Vector3(0, 3.8, 0)
+        );
+        const labelTween = new import_tween2.Tween(mesh.userData.labelObject.position).to(labelTargetPos, 1500).easing(import_tween2.Easing.Cubic.InOut);
+        tweenGroup.add(labelTween);
+        labelTween.start();
+      }
+      const sideTween = new import_tween2.Tween(mesh.position).to({ x: targetX, y: targetY, z: targetZ }, 1500).easing(import_tween2.Easing.Cubic.InOut);
+      tweenGroup.add(sideTween);
+      sideTween.start();
+    });
+    filteredQuests.forEach((q) => {
+      const mesh = nodeObjects[String(q.id)];
+      if (mesh) {
         if (mesh.material) {
           const fadeInTween = new import_tween2.Tween(mesh.material).to({ opacity: 1 }, 1200).easing(import_tween2.Easing.Cubic.Out);
           tweenGroup.add(fadeInTween);
@@ -14106,9 +14147,6 @@ function XViewScene({
       questsInCol.forEach((q, rowIndex) => {
         const nodeId = String(q.id);
         let mesh = nodeObjects[nodeId];
-        if (!mesh) {
-          mesh = addOrUpdateNodeMesh(q, new THREE3.Vector3(colX, 150, 0), true);
-        }
         const timeInfo = questTimeInfos.get(nodeId) || { isUndated: true };
         let targetY;
         if (!timeInfo.isUndated) {
@@ -14117,9 +14155,20 @@ function XViewScene({
           const undatedOffset = sortedTimePoints.length > 0 ? sortedTimePoints.length * 5 : 0;
           targetY = -40 - rowIndex * QUEST_LENS_ROW_SPACING - undatedOffset;
         }
-        const lensTween = new import_tween2.Tween(mesh.position).to({ x: colX, y: targetY, z: 0 }, 1500).easing(import_tween2.Easing.Cubic.InOut);
+        const posKey = `${statusName}_${targetY}`;
+        const group = positionGroups.get(posKey) || [nodeId];
+        const indexInGroup = group.indexOf(nodeId);
+        const xOffset = (indexInGroup - (group.length - 1) / 2) * NODE_X_GAP;
+        const finalX = colX + xOffset;
+        if (!mesh) {
+          mesh = addOrUpdateNodeMesh(q, new THREE3.Vector3(finalX, 150, 0), true);
+        }
+        const lensTween = new import_tween2.Tween(mesh.position).to({ x: finalX, y: targetY, z: 0 }, 1500).easing(import_tween2.Easing.Cubic.InOut);
         tweenGroup.add(lensTween);
         lensTween.start();
+        sumX += finalX;
+        sumY += targetY;
+        questCount++;
         if (!timeInfo.isUndated && timeInfo.label && !mesh.getObjectByName("questDateLabel")) {
           const dateSprite = createTextSprite(timeInfo.label, 36);
           dateSprite.name = "questDateLabel";
@@ -14147,20 +14196,19 @@ function XViewScene({
             });
             const intervalBar = new THREE3.Mesh(barGeometry, barMaterial);
             intervalBar.userData.associatedNodeId = mesh.userData.id;
-            const endPosition = new THREE3.Vector3(colX, endY, -0.5);
-            intervalBar.position.set(colX, (targetY + endY) / 2, -0.5);
+            intervalBar.position.set(finalX, (targetY + endY) / 2, -0.5);
             intervalBar.scale.y = barHeight;
             graphGroup.add(intervalBar);
             mesh.userData.timelineIntervalBar = intervalBar;
             const endLabel = createTextSprite(timeInfo.label.split(" - ")[1] || "", 30);
             endLabel.name = "timelineEndLabel";
-            endLabel.position.set(colX, endY + 4, 0);
+            endLabel.position.set(finalX, endY + 4, 0);
             graphGroup.add(endLabel);
             mesh.userData.timelineEndLabel = endLabel;
           }
         }
         if (mesh.userData.labelObject) {
-          const labelTargetPos = new THREE3.Vector3(colX, targetY, 0).add(
+          const labelTargetPos = new THREE3.Vector3(finalX, targetY, 0).add(
             mesh.userData.labelOffset || new THREE3.Vector3(0, 3.8, 0)
           );
           const labelTween = new import_tween2.Tween(mesh.userData.labelObject.position).to(labelTargetPos, 1500).easing(import_tween2.Easing.Cubic.InOut);
@@ -14169,6 +14217,18 @@ function XViewScene({
         }
       });
     });
+    if (questCount > 0) {
+      const { camera, controls } = 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);
+      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);
+      tweenGroup.add(camTween);
+      camTween.start();
+    }
   }, [addOrUpdateNodeMesh]);
   (0, import_react28.useEffect)(() => {
     if (!isInitialized || !sceneDataRef.current) return;

package/dist/index.mjs

@@ -1059,6 +1059,7 @@ function XViewSidebar({
         onClick: () => {
           onActivateQuestLens({ assigneeId: questFilterAssignee, status: questFilterStatus });
           setIsQuestLensMenuOpen(false);
+          onToggle(false);
         },
         className: "flex-[2] py-2 bg-indigo-600 hover:bg-indigo-500 text-white text-[11px] font-bold rounded-lg shadow-lg shadow-indigo-500/20 transition-all hover:scale-[1.02] active:scale-95"
       },
@@ -14103,6 +14104,27 @@ function XViewScene({
       timeToYMap.set(ms, idx * TIMELINE_LAYER_SPACING_Y);
     });
     const startX = -((QUEST_STATUS_ORDER.length - 1) * QUEST_LENS_COLUMN_SPACING) / 2;
+    let sumX = 0;
+    let sumY = 0;
+    let questCount = 0;
+    const positionGroups = /* @__PURE__ */ new Map();
+    const NODE_X_GAP = 22;
+    QUEST_STATUS_ORDER.forEach((statusName) => {
+      const questsInCol = questsByStatus[statusName];
+      questsInCol.forEach((q, rowIndex) => {
+        const timeInfo = questTimeInfos.get(String(q.id)) || { isUndated: true };
+        let nodeY;
+        if (!timeInfo.isUndated) {
+          nodeY = timeToYMap.get(timeInfo.startDate.getTime());
+        } else {
+          const undatedOffset = sortedTimePoints.length > 0 ? sortedTimePoints.length * 5 : 0;
+          nodeY = -40 - rowIndex * QUEST_LENS_ROW_SPACING - undatedOffset;
+        }
+        const posKey = `${statusName}_${nodeY}`;
+        if (!positionGroups.has(posKey)) positionGroups.set(posKey, []);
+        positionGroups.get(posKey).push(String(q.id));
+      });
+    });
     Object.values(nodeObjects).forEach((mesh) => {
       const oldLabel = mesh.getObjectByName("questDateLabel") || mesh.getObjectByName("timelineLabel");
       if (oldLabel) {
@@ -14118,21 +14140,40 @@ function XViewScene({
         mesh.userData.timelineEndLabel = null;
       }
     });
-    Object.keys(nodeObjects).forEach((id) => {
+    const nonFilteredNodeIds = Object.keys(nodeObjects).filter((id) => !filteredQuests.some((q) => String(q.id) === String(id)));
+    const COMMON_START_X = startX - 100;
+    const COMMON_COL_SPACING = 30;
+    const COMMON_ROW_SPACING = 35;
+    const MAX_COMMON_ROWS = 15;
+    nonFilteredNodeIds.forEach((id, idx) => {
       const mesh = nodeObjects[id];
-      const isFilteredQuest = filteredQuests.some(
-        (q) => String(q.id) === String(id)
-      );
-      if (!isFilteredQuest) {
-        if (mesh.material) {
-          const fadeTween = new Tween2(mesh.material).to({ opacity: 0.15 }, 1200).easing(Easing2.Cubic.Out);
-          tweenGroup.add(fadeTween);
-          fadeTween.start();
-        }
-        if (mesh.userData.labelObject) {
-          mesh.userData.labelObject.visible = false;
-        }
-      } else {
+      if (!mesh) return;
+      const col = Math.floor(idx / MAX_COMMON_ROWS);
+      const row = idx % MAX_COMMON_ROWS;
+      const targetX = COMMON_START_X - col * COMMON_COL_SPACING;
+      const targetY = -(row * COMMON_ROW_SPACING) + 50;
+      const targetZ = 0;
+      if (mesh.material) {
+        const opacityTween = new Tween2(mesh.material).to({ opacity: 1 }, 1200).easing(Easing2.Cubic.Out);
+        tweenGroup.add(opacityTween);
+        opacityTween.start();
+      }
+      if (mesh.userData.labelObject) {
+        mesh.userData.labelObject.visible = true;
+        const labelTargetPos = new THREE3.Vector3(targetX, targetY, targetZ).add(
+          mesh.userData.labelOffset || new THREE3.Vector3(0, 3.8, 0)
+        );
+        const labelTween = new Tween2(mesh.userData.labelObject.position).to(labelTargetPos, 1500).easing(Easing2.Cubic.InOut);
+        tweenGroup.add(labelTween);
+        labelTween.start();
+      }
+      const sideTween = new Tween2(mesh.position).to({ x: targetX, y: targetY, z: targetZ }, 1500).easing(Easing2.Cubic.InOut);
+      tweenGroup.add(sideTween);
+      sideTween.start();
+    });
+    filteredQuests.forEach((q) => {
+      const mesh = nodeObjects[String(q.id)];
+      if (mesh) {
         if (mesh.material) {
           const fadeInTween = new Tween2(mesh.material).to({ opacity: 1 }, 1200).easing(Easing2.Cubic.Out);
           tweenGroup.add(fadeInTween);
@@ -14150,9 +14191,6 @@ function XViewScene({
       questsInCol.forEach((q, rowIndex) => {
         const nodeId = String(q.id);
         let mesh = nodeObjects[nodeId];
-        if (!mesh) {
-          mesh = addOrUpdateNodeMesh(q, new THREE3.Vector3(colX, 150, 0), true);
-        }
         const timeInfo = questTimeInfos.get(nodeId) || { isUndated: true };
         let targetY;
         if (!timeInfo.isUndated) {
@@ -14161,9 +14199,20 @@ function XViewScene({
           const undatedOffset = sortedTimePoints.length > 0 ? sortedTimePoints.length * 5 : 0;
           targetY = -40 - rowIndex * QUEST_LENS_ROW_SPACING - undatedOffset;
         }
-        const lensTween = new Tween2(mesh.position).to({ x: colX, y: targetY, z: 0 }, 1500).easing(Easing2.Cubic.InOut);
+        const posKey = `${statusName}_${targetY}`;
+        const group = positionGroups.get(posKey) || [nodeId];
+        const indexInGroup = group.indexOf(nodeId);
+        const xOffset = (indexInGroup - (group.length - 1) / 2) * NODE_X_GAP;
+        const finalX = colX + xOffset;
+        if (!mesh) {
+          mesh = addOrUpdateNodeMesh(q, new THREE3.Vector3(finalX, 150, 0), true);
+        }
+        const lensTween = new Tween2(mesh.position).to({ x: finalX, y: targetY, z: 0 }, 1500).easing(Easing2.Cubic.InOut);
         tweenGroup.add(lensTween);
         lensTween.start();
+        sumX += finalX;
+        sumY += targetY;
+        questCount++;
         if (!timeInfo.isUndated && timeInfo.label && !mesh.getObjectByName("questDateLabel")) {
           const dateSprite = createTextSprite(timeInfo.label, 36);
           dateSprite.name = "questDateLabel";
@@ -14191,20 +14240,19 @@ function XViewScene({
             });
             const intervalBar = new THREE3.Mesh(barGeometry, barMaterial);
             intervalBar.userData.associatedNodeId = mesh.userData.id;
-            const endPosition = new THREE3.Vector3(colX, endY, -0.5);
-            intervalBar.position.set(colX, (targetY + endY) / 2, -0.5);
+            intervalBar.position.set(finalX, (targetY + endY) / 2, -0.5);
             intervalBar.scale.y = barHeight;
             graphGroup.add(intervalBar);
             mesh.userData.timelineIntervalBar = intervalBar;
             const endLabel = createTextSprite(timeInfo.label.split(" - ")[1] || "", 30);
             endLabel.name = "timelineEndLabel";
-            endLabel.position.set(colX, endY + 4, 0);
+            endLabel.position.set(finalX, endY + 4, 0);
             graphGroup.add(endLabel);
             mesh.userData.timelineEndLabel = endLabel;
           }
         }
         if (mesh.userData.labelObject) {
-          const labelTargetPos = new THREE3.Vector3(colX, targetY, 0).add(
+          const labelTargetPos = new THREE3.Vector3(finalX, targetY, 0).add(
             mesh.userData.labelOffset || new THREE3.Vector3(0, 3.8, 0)
           );
           const labelTween = new Tween2(mesh.userData.labelObject.position).to(labelTargetPos, 1500).easing(Easing2.Cubic.InOut);
@@ -14213,6 +14261,18 @@ function XViewScene({
         }
       });
     });
+    if (questCount > 0) {
+      const { camera, controls } = 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);
+      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);
+      tweenGroup.add(camTween);
+      camTween.start();
+    }
   }, [addOrUpdateNodeMesh]);
   useEffect22(() => {
     if (!isInitialized || !sceneDataRef.current) return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lv-x-software-house/x_view",
-  "version": "1.2.5-dev.44",
+  "version": "1.2.5-dev.46",
   "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",