@lv-x-software-house/x_view 1.2.5-dev.43 → 1.2.5-dev.45

package/dist/index.js

@@ -1334,6 +1334,15 @@ var createNodeMesh = (nodeData, position, glowTexture) => {
   label.name = "label";
   mesh.userData.labelObject = label;
   mesh.userData.labelOffset = new THREE.Vector3(0, 3.8, 0);
+  if (nodeData.is_quest && nodeData.Date) {
+    const timeInfo = parseDateProp(nodeData.Date);
+    if (!timeInfo.isUndated && timeInfo.label) {
+      const dateSprite = createTextSprite(timeInfo.label, 36);
+      dateSprite.name = "questDateLabel";
+      dateSprite.position.set(0, -5.5, 0);
+      mesh.add(dateSprite);
+    }
+  }
   return mesh;
 };
 var updateExistingNodeVisuals = (state, updatedNode) => {
@@ -3321,9 +3330,14 @@ var userActionHandlers = {
         };
         specificParentData.nodes.push(nextQuestNode);
         if (stateRef.current.nodeObjects[String(nodeToSave.id)]) {
-          const pos = stateRef.current.nodeObjects[String(nodeToSave.id)].position.clone();
-          pos.x += 12;
-          addStandaloneNodeToScene(stateRef.current, nextQuestNode, pos);
+          const oldMeshPosition = stateRef.current.nodeObjects[String(nodeToSave.id)].position.clone();
+          setTimeout(() => {
+            if (stateRef.current && stateRef.current.graphGroup) {
+              const pos = oldMeshPosition.clone();
+              pos.x += 12;
+              addStandaloneNodeToScene(stateRef.current, nextQuestNode, pos);
+            }
+          }, 2e3);
         }
       }
     }
@@ -4266,6 +4280,78 @@ function calculateNextRecurrenceDate(config) {
     confirmed: true
   };
 }
+var parseDate = (str) => {
+  if (!str) return null;
+  const parts = str.split("/");
+  if (parts.length === 3) {
+    const day = parseInt(parts[0], 10);
+    const month = parseInt(parts[1], 10) - 1;
+    const year = parseInt(parts[2], 10);
+    if (!isNaN(day) && !isNaN(month) && !isNaN(year)) {
+      return new Date(year, month, day);
+    }
+  }
+  return null;
+};
+var parseDateProp = (dateProp) => {
+  let info = { isUndated: true, label: "", type: "point" };
+  if (!dateProp) return info;
+  if (dateProp.type === "Data") {
+    const d = parseDate(dateProp.value);
+    if (d) {
+      info = { startDate: d, endDate: d, label: dateProp.value, type: "point", isUndated: false };
+    }
+  } else if (dateProp.type === "Date Interval" || dateProp.type === "Date Range" || dateProp.type === "interval") {
+    const sd = parseDate(dateProp.start || dateProp.value);
+    const ed = parseDate(dateProp.end);
+    if (sd) {
+      info = {
+        startDate: sd,
+        endDate: ed || sd,
+        label: `${dateProp.start || dateProp.value}${ed ? " - " + dateProp.end : ""}`,
+        type: ed ? "interval" : "point",
+        isUndated: false
+      };
+    }
+  } else if (dateProp.date) {
+    const d = parseDate(dateProp.date);
+    if (d)
+      info = {
+        startDate: d,
+        endDate: d,
+        label: dateProp.date,
+        type: "point",
+        isUndated: false
+      };
+  } else if (dateProp.year) {
+    const y = parseInt(dateProp.year, 10);
+    if (!isNaN(y)) {
+      const d = new Date(y, 0, 1);
+      info = {
+        startDate: d,
+        endDate: d,
+        label: String(y),
+        type: "point",
+        isUndated: false
+      };
+    }
+  } else if (dateProp.date_interval && dateProp.date_interval.start) {
+    const sY = parseInt(dateProp.date_interval.start, 10);
+    const eY = parseInt(dateProp.date_interval.end, 10) || sY;
+    if (!isNaN(sY)) {
+      const sd = new Date(sY, 0, 1);
+      const ed = new Date(eY, 11, 31);
+      info = {
+        startDate: sd,
+        endDate: ed,
+        label: `${sY} - ${eY}`,
+        type: "interval",
+        isUndated: false
+      };
+    }
+  }
+  return info;
+};
 
 // src/components/CustomPropertyDisplay.jsx
 var import_react4 = __toESM(require("react"));
@@ -9472,7 +9558,7 @@ function InSceneQuestForm({
       textureImageUrl: null,
       reviewStack,
       timeline: initialTimeline,
-      Date: questDate,
+      Date: questDate ? { ...questDate, confirmed: true } : null,
       recurrence_config: recurrenceConfig,
       ...additionalData
     });
@@ -10936,7 +11022,7 @@ ${noteText}` : noteText : entry.notes,
         description_sections: processedSections,
         intensity,
         recurrence_config: currentRecurrenceConfig,
-        Date: questDate,
+        Date: questDate ? { ...questDate, confirmed: true } : null,
         useImageAsTexture: false,
         textureImageUrl: null,
         is_quest: true,
@@ -13499,7 +13585,7 @@ function XViewScene({
       }
     }
     Object.values(nodeObjects).forEach((mesh) => {
-      const oldLabel = mesh.getObjectByName("timelineLabel") || mesh.getObjectByName("questDateLabel");
+      const oldLabel = mesh.getObjectByName("timelineLabel");
       if (oldLabel) {
         mesh.remove(oldLabel);
         if (oldLabel.material.map) oldLabel.material.map.dispose();
@@ -13510,7 +13596,7 @@ function XViewScene({
     });
     const timelineNodes = [];
     const allTimePoints = /* @__PURE__ */ new Set();
-    const parseDate = (str) => {
+    const parseDate2 = (str) => {
       const parts = str.split("/");
       if (parts.length === 3) {
         const day = parseInt(parts[0], 10);
@@ -13527,7 +13613,7 @@ function XViewScene({
       let nodeInfo = { mesh, type: "point", label: "", isUndated: true };
       if (dateProp) {
         if (dateProp.date) {
-          const date = parseDate(dateProp.date);
+          const date = parseDate2(dateProp.date);
           if (date) {
             nodeInfo.startDate = date;
             nodeInfo.endDate = date;
@@ -13673,7 +13759,7 @@ function XViewScene({
     });
     const timelineNodes = [];
     const allTimePoints = /* @__PURE__ */ new Set();
-    const parseDate = (str) => {
+    const parseDate2 = (str) => {
       const parts = str.split("/");
       if (parts.length === 3) {
         const day = parseInt(parts[0], 10);
@@ -13690,7 +13776,7 @@ function XViewScene({
       if (!dateProp) return;
       let nodeInfo = { mesh, type: "point", label: "" };
       if (dateProp.date) {
-        const date = parseDate(dateProp.date);
+        const date = parseDate2(dateProp.date);
         if (date) {
           nodeInfo.startDate = date;
           nodeInfo.endDate = date;
@@ -13932,16 +14018,8 @@ function XViewScene({
   );
   const handleActivateQuestLens = (0, import_react28.useCallback)(({ assigneeId, status: status2 }) => {
     var _a2;
-    const { nodeObjects, tweenGroup, graphGroup, timelineIntervalsGroup } = stateRef.current;
+    const { nodeObjects, tweenGroup, graphGroup } = stateRef.current;
     if (!nodeObjects || !tweenGroup || !graphGroup) return;
-    Object.values(nodeObjects).forEach((mesh) => {
-      const oldLabel = mesh.getObjectByName("questDateLabel") || mesh.getObjectByName("timelineLabel");
-      if (oldLabel) {
-        mesh.remove(oldLabel);
-        if (oldLabel.material.map) oldLabel.material.map.dispose();
-        oldLabel.material.dispose();
-      }
-    });
     const allQuests = ((_a2 = sceneDataRef.current) == null ? void 0 : _a2.quest_nodes) || [];
     const filteredQuests = allQuests.filter((q) => {
       const matchAssignee = !assigneeId || String(q.assignee_id) === String(assigneeId);
@@ -13963,76 +14041,91 @@ function XViewScene({
         questsByStatus[q.status].push(q);
       }
     });
-    const parseDate = (str) => {
-      if (!str) return null;
-      const parts = str.split("/");
-      if (parts.length === 3) {
-        const day = parseInt(parts[0], 10);
-        const month = parseInt(parts[1], 10) - 1;
-        const year = parseInt(parts[2], 10);
-        if (!isNaN(day) && !isNaN(month) && !isNaN(year)) {
-          return new Date(year, month, day);
-        }
-      }
-      return null;
-    };
-    const timePoints = /* @__PURE__ */ new Set();
     const questTimeInfos = /* @__PURE__ */ new Map();
+    const allActiveTimePoints = /* @__PURE__ */ new Set();
     filteredQuests.forEach((q) => {
-      const dateProp = q.Date;
-      let info = { isUndated: true, label: "" };
-      if (dateProp) {
-        if (dateProp.date) {
-          const d = parseDate(dateProp.date);
-          if (d) {
-            info = { startDate: d, endDate: d, label: dateProp.date, isUndated: false };
-            timePoints.add(d.getTime());
-          }
-        } else if (dateProp.year) {
-          const y = parseInt(dateProp.year, 10);
-          if (!isNaN(y)) {
-            const d = new Date(y, 0, 1);
-            info = { startDate: d, endDate: d, label: String(y), isUndated: false };
-            timePoints.add(d.getTime());
-          }
-        } else if (dateProp.date_interval && dateProp.date_interval.start) {
-          const sY = parseInt(dateProp.date_interval.start, 10);
-          const eY = parseInt(dateProp.date_interval.end, 10) || sY;
-          if (!isNaN(sY)) {
-            const sd = new Date(sY, 0, 1);
-            const ed = new Date(eY, 11, 31);
-            info = { startDate: sd, endDate: ed, label: `${sY}-${eY}`, isUndated: false };
-            timePoints.add(sd.getTime());
-            timePoints.add(ed.getTime());
-          }
+      const info = parseDateProp(q.Date);
+      questTimeInfos.set(String(q.id), info);
+      if (!info.isUndated) {
+        allActiveTimePoints.add(info.startDate.getTime());
+        if (info.endDate && info.type === "interval") {
+          allActiveTimePoints.add(info.endDate.getTime());
         }
       }
-      questTimeInfos.set(String(q.id), info);
     });
-    const sortedTimePoints = Array.from(timePoints).sort((a, b) => a - b);
+    const sortedTimePoints = Array.from(allActiveTimePoints).sort((a, b) => a - b);
     const timeToYMap = /* @__PURE__ */ new Map();
-    if (sortedTimePoints.length > 0) {
-      const maxIdx = sortedTimePoints.length - 1;
-      sortedTimePoints.forEach((t, i) => {
-        timeToYMap.set(t, (i - maxIdx) * (QUEST_LENS_ROW_SPACING || 30));
-      });
-    }
+    sortedTimePoints.forEach((ms, idx) => {
+      timeToYMap.set(ms, idx * TIMELINE_LAYER_SPACING_Y);
+    });
     const startX = -((QUEST_STATUS_ORDER.length - 1) * QUEST_LENS_COLUMN_SPACING) / 2;
-    Object.keys(nodeObjects).forEach((id) => {
-      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;
+    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;
         }
-      } else {
+        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) {
+        mesh.remove(oldLabel);
+        if (oldLabel.material) oldLabel.material.dispose();
+      }
+      if (mesh.userData.timelineIntervalBar) {
+        if (graphGroup) graphGroup.remove(mesh.userData.timelineIntervalBar);
+        mesh.userData.timelineIntervalBar = null;
+      }
+      if (mesh.userData.timelineEndLabel) {
+        if (graphGroup) graphGroup.remove(mesh.userData.timelineEndLabel);
+        mesh.userData.timelineEndLabel = null;
+      }
+    });
+    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];
+      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);
@@ -14050,29 +14143,66 @@ 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) {
           targetY = timeToYMap.get(timeInfo.startDate.getTime());
         } else {
           const undatedOffset = sortedTimePoints.length > 0 ? sortedTimePoints.length * 5 : 0;
-          targetY = -80 - rowIndex * (QUEST_LENS_ROW_SPACING || 30) - undatedOffset;
+          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();
-        if (!timeInfo.isUndated && timeInfo.label) {
+        if (!timeInfo.isUndated && timeInfo.label && !mesh.getObjectByName("questDateLabel")) {
           const dateSprite = createTextSprite(timeInfo.label, 36);
           dateSprite.name = "questDateLabel";
           dateSprite.position.set(0, -5.5, 0);
           mesh.add(dateSprite);
         }
+        if (timeInfo.type === "interval" && timeToYMap.has(timeInfo.endDate.getTime())) {
+          const endY = timeToYMap.get(timeInfo.endDate.getTime());
+          if (Math.abs(endY - targetY) > 0.1) {
+            const barHeight = Math.abs(endY - targetY);
+            const barGeometry = new THREE3.CylinderGeometry(
+              TIMELINE_INTERVAL_BAR_RADIUS,
+              TIMELINE_INTERVAL_BAR_RADIUS,
+              1,
+              16
+            );
+            const barMaterial = new THREE3.MeshStandardMaterial({
+              color: TIMELINE_GOLD_COLOR,
+              emissive: 12092939,
+              emissiveIntensity: 0.4,
+              transparent: true,
+              opacity: TIMELINE_INTERVAL_BAR_OPACITY,
+              roughness: 0.3,
+              metalness: 0.8
+            });
+            const intervalBar = new THREE3.Mesh(barGeometry, barMaterial);
+            intervalBar.userData.associatedNodeId = mesh.userData.id;
+            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(finalX, endY + 4, 0);
+            graphGroup.add(endLabel);
+            mesh.userData.timelineEndLabel = endLabel;
+          }
+        }
         if (mesh.userData.labelObject) {
-          const labelTargetPos = new THREE3.Vector3(colX, targetY, 0).add(
-            mesh.userData.labelOffset || new THREE3.Vector3(0, -2.5, 0)
+          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);
           tweenGroup.add(labelTween);

package/dist/index.mjs

@@ -1295,6 +1295,15 @@ var createNodeMesh = (nodeData, position, glowTexture) => {
   label.name = "label";
   mesh.userData.labelObject = label;
   mesh.userData.labelOffset = new THREE.Vector3(0, 3.8, 0);
+  if (nodeData.is_quest && nodeData.Date) {
+    const timeInfo = parseDateProp(nodeData.Date);
+    if (!timeInfo.isUndated && timeInfo.label) {
+      const dateSprite = createTextSprite(timeInfo.label, 36);
+      dateSprite.name = "questDateLabel";
+      dateSprite.position.set(0, -5.5, 0);
+      mesh.add(dateSprite);
+    }
+  }
   return mesh;
 };
 var updateExistingNodeVisuals = (state, updatedNode) => {
@@ -3282,9 +3291,14 @@ var userActionHandlers = {
         };
         specificParentData.nodes.push(nextQuestNode);
         if (stateRef.current.nodeObjects[String(nodeToSave.id)]) {
-          const pos = stateRef.current.nodeObjects[String(nodeToSave.id)].position.clone();
-          pos.x += 12;
-          addStandaloneNodeToScene(stateRef.current, nextQuestNode, pos);
+          const oldMeshPosition = stateRef.current.nodeObjects[String(nodeToSave.id)].position.clone();
+          setTimeout(() => {
+            if (stateRef.current && stateRef.current.graphGroup) {
+              const pos = oldMeshPosition.clone();
+              pos.x += 12;
+              addStandaloneNodeToScene(stateRef.current, nextQuestNode, pos);
+            }
+          }, 2e3);
         }
       }
     }
@@ -4227,6 +4241,78 @@ function calculateNextRecurrenceDate(config) {
     confirmed: true
   };
 }
+var parseDate = (str) => {
+  if (!str) return null;
+  const parts = str.split("/");
+  if (parts.length === 3) {
+    const day = parseInt(parts[0], 10);
+    const month = parseInt(parts[1], 10) - 1;
+    const year = parseInt(parts[2], 10);
+    if (!isNaN(day) && !isNaN(month) && !isNaN(year)) {
+      return new Date(year, month, day);
+    }
+  }
+  return null;
+};
+var parseDateProp = (dateProp) => {
+  let info = { isUndated: true, label: "", type: "point" };
+  if (!dateProp) return info;
+  if (dateProp.type === "Data") {
+    const d = parseDate(dateProp.value);
+    if (d) {
+      info = { startDate: d, endDate: d, label: dateProp.value, type: "point", isUndated: false };
+    }
+  } else if (dateProp.type === "Date Interval" || dateProp.type === "Date Range" || dateProp.type === "interval") {
+    const sd = parseDate(dateProp.start || dateProp.value);
+    const ed = parseDate(dateProp.end);
+    if (sd) {
+      info = {
+        startDate: sd,
+        endDate: ed || sd,
+        label: `${dateProp.start || dateProp.value}${ed ? " - " + dateProp.end : ""}`,
+        type: ed ? "interval" : "point",
+        isUndated: false
+      };
+    }
+  } else if (dateProp.date) {
+    const d = parseDate(dateProp.date);
+    if (d)
+      info = {
+        startDate: d,
+        endDate: d,
+        label: dateProp.date,
+        type: "point",
+        isUndated: false
+      };
+  } else if (dateProp.year) {
+    const y = parseInt(dateProp.year, 10);
+    if (!isNaN(y)) {
+      const d = new Date(y, 0, 1);
+      info = {
+        startDate: d,
+        endDate: d,
+        label: String(y),
+        type: "point",
+        isUndated: false
+      };
+    }
+  } else if (dateProp.date_interval && dateProp.date_interval.start) {
+    const sY = parseInt(dateProp.date_interval.start, 10);
+    const eY = parseInt(dateProp.date_interval.end, 10) || sY;
+    if (!isNaN(sY)) {
+      const sd = new Date(sY, 0, 1);
+      const ed = new Date(eY, 11, 31);
+      info = {
+        startDate: sd,
+        endDate: ed,
+        label: `${sY} - ${eY}`,
+        type: "interval",
+        isUndated: false
+      };
+    }
+  }
+  return info;
+};
 
 // src/components/CustomPropertyDisplay.jsx
 import React3, { useState as useState4, useRef as useRef3, useEffect as useEffect3 } from "react";
@@ -9491,7 +9577,7 @@ function InSceneQuestForm({
       textureImageUrl: null,
       reviewStack,
       timeline: initialTimeline,
-      Date: questDate,
+      Date: questDate ? { ...questDate, confirmed: true } : null,
       recurrence_config: recurrenceConfig,
       ...additionalData
     });
@@ -10967,7 +11053,7 @@ ${noteText}` : noteText : entry.notes,
         description_sections: processedSections,
         intensity,
         recurrence_config: currentRecurrenceConfig,
-        Date: questDate,
+        Date: questDate ? { ...questDate, confirmed: true } : null,
         useImageAsTexture: false,
         textureImageUrl: null,
         is_quest: true,
@@ -13543,7 +13629,7 @@ function XViewScene({
       }
     }
     Object.values(nodeObjects).forEach((mesh) => {
-      const oldLabel = mesh.getObjectByName("timelineLabel") || mesh.getObjectByName("questDateLabel");
+      const oldLabel = mesh.getObjectByName("timelineLabel");
       if (oldLabel) {
         mesh.remove(oldLabel);
         if (oldLabel.material.map) oldLabel.material.map.dispose();
@@ -13554,7 +13640,7 @@ function XViewScene({
     });
     const timelineNodes = [];
     const allTimePoints = /* @__PURE__ */ new Set();
-    const parseDate = (str) => {
+    const parseDate2 = (str) => {
       const parts = str.split("/");
       if (parts.length === 3) {
         const day = parseInt(parts[0], 10);
@@ -13571,7 +13657,7 @@ function XViewScene({
       let nodeInfo = { mesh, type: "point", label: "", isUndated: true };
       if (dateProp) {
         if (dateProp.date) {
-          const date = parseDate(dateProp.date);
+          const date = parseDate2(dateProp.date);
           if (date) {
             nodeInfo.startDate = date;
             nodeInfo.endDate = date;
@@ -13717,7 +13803,7 @@ function XViewScene({
     });
     const timelineNodes = [];
     const allTimePoints = /* @__PURE__ */ new Set();
-    const parseDate = (str) => {
+    const parseDate2 = (str) => {
       const parts = str.split("/");
       if (parts.length === 3) {
         const day = parseInt(parts[0], 10);
@@ -13734,7 +13820,7 @@ function XViewScene({
       if (!dateProp) return;
       let nodeInfo = { mesh, type: "point", label: "" };
       if (dateProp.date) {
-        const date = parseDate(dateProp.date);
+        const date = parseDate2(dateProp.date);
         if (date) {
           nodeInfo.startDate = date;
           nodeInfo.endDate = date;
@@ -13976,16 +14062,8 @@ function XViewScene({
   );
   const handleActivateQuestLens = useCallback4(({ assigneeId, status: status2 }) => {
     var _a2;
-    const { nodeObjects, tweenGroup, graphGroup, timelineIntervalsGroup } = stateRef.current;
+    const { nodeObjects, tweenGroup, graphGroup } = stateRef.current;
     if (!nodeObjects || !tweenGroup || !graphGroup) return;
-    Object.values(nodeObjects).forEach((mesh) => {
-      const oldLabel = mesh.getObjectByName("questDateLabel") || mesh.getObjectByName("timelineLabel");
-      if (oldLabel) {
-        mesh.remove(oldLabel);
-        if (oldLabel.material.map) oldLabel.material.map.dispose();
-        oldLabel.material.dispose();
-      }
-    });
     const allQuests = ((_a2 = sceneDataRef.current) == null ? void 0 : _a2.quest_nodes) || [];
     const filteredQuests = allQuests.filter((q) => {
       const matchAssignee = !assigneeId || String(q.assignee_id) === String(assigneeId);
@@ -14007,76 +14085,91 @@ function XViewScene({
         questsByStatus[q.status].push(q);
       }
     });
-    const parseDate = (str) => {
-      if (!str) return null;
-      const parts = str.split("/");
-      if (parts.length === 3) {
-        const day = parseInt(parts[0], 10);
-        const month = parseInt(parts[1], 10) - 1;
-        const year = parseInt(parts[2], 10);
-        if (!isNaN(day) && !isNaN(month) && !isNaN(year)) {
-          return new Date(year, month, day);
-        }
-      }
-      return null;
-    };
-    const timePoints = /* @__PURE__ */ new Set();
     const questTimeInfos = /* @__PURE__ */ new Map();
+    const allActiveTimePoints = /* @__PURE__ */ new Set();
     filteredQuests.forEach((q) => {
-      const dateProp = q.Date;
-      let info = { isUndated: true, label: "" };
-      if (dateProp) {
-        if (dateProp.date) {
-          const d = parseDate(dateProp.date);
-          if (d) {
-            info = { startDate: d, endDate: d, label: dateProp.date, isUndated: false };
-            timePoints.add(d.getTime());
-          }
-        } else if (dateProp.year) {
-          const y = parseInt(dateProp.year, 10);
-          if (!isNaN(y)) {
-            const d = new Date(y, 0, 1);
-            info = { startDate: d, endDate: d, label: String(y), isUndated: false };
-            timePoints.add(d.getTime());
-          }
-        } else if (dateProp.date_interval && dateProp.date_interval.start) {
-          const sY = parseInt(dateProp.date_interval.start, 10);
-          const eY = parseInt(dateProp.date_interval.end, 10) || sY;
-          if (!isNaN(sY)) {
-            const sd = new Date(sY, 0, 1);
-            const ed = new Date(eY, 11, 31);
-            info = { startDate: sd, endDate: ed, label: `${sY}-${eY}`, isUndated: false };
-            timePoints.add(sd.getTime());
-            timePoints.add(ed.getTime());
-          }
+      const info = parseDateProp(q.Date);
+      questTimeInfos.set(String(q.id), info);
+      if (!info.isUndated) {
+        allActiveTimePoints.add(info.startDate.getTime());
+        if (info.endDate && info.type === "interval") {
+          allActiveTimePoints.add(info.endDate.getTime());
         }
       }
-      questTimeInfos.set(String(q.id), info);
     });
-    const sortedTimePoints = Array.from(timePoints).sort((a, b) => a - b);
+    const sortedTimePoints = Array.from(allActiveTimePoints).sort((a, b) => a - b);
     const timeToYMap = /* @__PURE__ */ new Map();
-    if (sortedTimePoints.length > 0) {
-      const maxIdx = sortedTimePoints.length - 1;
-      sortedTimePoints.forEach((t, i) => {
-        timeToYMap.set(t, (i - maxIdx) * (QUEST_LENS_ROW_SPACING || 30));
-      });
-    }
+    sortedTimePoints.forEach((ms, idx) => {
+      timeToYMap.set(ms, idx * TIMELINE_LAYER_SPACING_Y);
+    });
     const startX = -((QUEST_STATUS_ORDER.length - 1) * QUEST_LENS_COLUMN_SPACING) / 2;
-    Object.keys(nodeObjects).forEach((id) => {
-      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;
+    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;
         }
-      } else {
+        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) {
+        mesh.remove(oldLabel);
+        if (oldLabel.material) oldLabel.material.dispose();
+      }
+      if (mesh.userData.timelineIntervalBar) {
+        if (graphGroup) graphGroup.remove(mesh.userData.timelineIntervalBar);
+        mesh.userData.timelineIntervalBar = null;
+      }
+      if (mesh.userData.timelineEndLabel) {
+        if (graphGroup) graphGroup.remove(mesh.userData.timelineEndLabel);
+        mesh.userData.timelineEndLabel = null;
+      }
+    });
+    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];
+      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);
@@ -14094,29 +14187,66 @@ 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) {
           targetY = timeToYMap.get(timeInfo.startDate.getTime());
         } else {
           const undatedOffset = sortedTimePoints.length > 0 ? sortedTimePoints.length * 5 : 0;
-          targetY = -80 - rowIndex * (QUEST_LENS_ROW_SPACING || 30) - undatedOffset;
+          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();
-        if (!timeInfo.isUndated && timeInfo.label) {
+        if (!timeInfo.isUndated && timeInfo.label && !mesh.getObjectByName("questDateLabel")) {
           const dateSprite = createTextSprite(timeInfo.label, 36);
           dateSprite.name = "questDateLabel";
           dateSprite.position.set(0, -5.5, 0);
           mesh.add(dateSprite);
         }
+        if (timeInfo.type === "interval" && timeToYMap.has(timeInfo.endDate.getTime())) {
+          const endY = timeToYMap.get(timeInfo.endDate.getTime());
+          if (Math.abs(endY - targetY) > 0.1) {
+            const barHeight = Math.abs(endY - targetY);
+            const barGeometry = new THREE3.CylinderGeometry(
+              TIMELINE_INTERVAL_BAR_RADIUS,
+              TIMELINE_INTERVAL_BAR_RADIUS,
+              1,
+              16
+            );
+            const barMaterial = new THREE3.MeshStandardMaterial({
+              color: TIMELINE_GOLD_COLOR,
+              emissive: 12092939,
+              emissiveIntensity: 0.4,
+              transparent: true,
+              opacity: TIMELINE_INTERVAL_BAR_OPACITY,
+              roughness: 0.3,
+              metalness: 0.8
+            });
+            const intervalBar = new THREE3.Mesh(barGeometry, barMaterial);
+            intervalBar.userData.associatedNodeId = mesh.userData.id;
+            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(finalX, endY + 4, 0);
+            graphGroup.add(endLabel);
+            mesh.userData.timelineEndLabel = endLabel;
+          }
+        }
         if (mesh.userData.labelObject) {
-          const labelTargetPos = new THREE3.Vector3(colX, targetY, 0).add(
-            mesh.userData.labelOffset || new THREE3.Vector3(0, -2.5, 0)
+          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);
           tweenGroup.add(labelTween);

package/package.json

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