@lv-x-software-house/x_view 1.2.3-dev.3 → 1.2.3-dev.5

package/dist/index.js

@@ -2600,7 +2600,54 @@ function createNewCustomProperty(existingProps = []) {
     isEditing: true
   };
 }
-function generateTooltipHtml(data) {
+var resolveDescriptionReference = (refString, availableNodes = [], availableAncestries = []) => {
+  const match = refString.match(/\[\[REF:(node|ancestry):([a-zA-Z0-9\-_]+):([a-zA-Z0-9\-_]+)\]\]/);
+  if (!match) return null;
+  const [_, type, itemId, sectionId] = match;
+  let sourceItem = null;
+  if (type === "node") {
+    sourceItem = availableNodes.find((n) => String(n.id) === String(itemId));
+  } else {
+    sourceItem = availableAncestries.find((a) => String(a.ancestry_id) === String(itemId));
+  }
+  if (!sourceItem) return null;
+  const sections = parseDescriptionSections(sourceItem.description, sourceItem.description_sections);
+  const targetSection = sections.find((s) => String(s.id) === String(sectionId));
+  if (!targetSection) return null;
+  return {
+    content: targetSection.content,
+    sourceName: sourceItem.name,
+    sourceId: itemId,
+    type
+  };
+};
+function formatDescriptionForTooltip(rawText, parentData, ancestryData) {
+  if (!rawText) return "";
+  let text = rawText;
+  const allNodes = parentData ? Object.values(parentData).flatMap((f) => f.nodes || []) : [];
+  const allAncestries = ancestryData || [];
+  text = text.replace(/\[\[REF:(node|ancestry):([a-zA-Z0-9\-_]+):([a-zA-Z0-9\-_]+)\]\]/g, (match, type, itemId, sectionId) => {
+    const resolved = resolveDescriptionReference(match, allNodes, allAncestries);
+    if (resolved && !resolved.error) {
+      return resolved.content;
+    }
+    return "[Refer\xEAncia indispon\xEDvel]";
+  });
+  text = text.replace(/\*\/\s*\d+(?::[a-zA-Z0-9-]+)?\s*\//g, "");
+  text = text.replace(/\[\[MENTION:node:([a-zA-Z0-9\-_]+)\]\]/g, (match, nodeId) => {
+    const node = allNodes.find((n) => String(n.id) === String(nodeId));
+    return node ? `@${node.name}` : `@Men\xE7\xE3o`;
+  });
+  text = text.replace(/\[\[MENTION:image:([^|\]]+)\|?([^\]]*)\]\]/g, (match, url, name) => {
+    return name ? `[Imagem: ${name}]` : `[Imagem]`;
+  });
+  text = text.replace(/^#+\s*/gm, "");
+  text = text.replace(/```[\s\S]*?```/g, "[C\xF3digo]");
+  text = text.replace(/-\s\[[xX ]\]\s*/g, "\u2022 ");
+  text = text.replace(/\[([^\]]+)\]\((https?:\/\/[^\)]+)\)/g, "$1");
+  return text.trim();
+}
+function generateTooltipHtml(data, parentData, ancestryData) {
   const ignoredKeys = ["id", "name", "type", "color", "_baseEmissiveIntensity", "description"];
   const customKeys = Object.keys(data).filter((k) => !ignoredKeys.includes(k));
   const extras = customKeys.length;
@@ -2616,20 +2663,23 @@ function generateTooltipHtml(data) {
         <div style="font-weight:600; font-size: 14px; color: #fff;">${typeDisplay}</div>
         <div style="margin-bottom: 2px; color: #e2e8f0;">${data.name || ""}</div>`;
   if (data.description) {
-    html += `<div style="
-            margin-top: 6px; 
-            padding-top: 6px; 
-            border-top: 1px solid rgba(255,255,255,0.1); 
-            opacity: 0.85; 
-            font-size: 13px;
-            display: -webkit-box;
-            -webkit-line-clamp: 4; 
-            -webkit-box-orient: vertical;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            word-break: break-word;
-            white-space: normal;
-        ">${data.description}</div>`;
+    const cleanDesc = formatDescriptionForTooltip(data.description, parentData, ancestryData);
+    if (cleanDesc) {
+      html += `<div style="
+                margin-top: 6px; 
+                padding-top: 6px; 
+                border-top: 1px solid rgba(255,255,255,0.1); 
+                opacity: 0.85; 
+                font-size: 13px;
+                display: -webkit-box;
+                -webkit-line-clamp: 4; 
+                -webkit-box-orient: vertical;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                word-break: break-word;
+                white-space: normal;
+            ">${cleanDesc}</div>`;
+    }
   }
   if (extras > 0) {
     html += `<div style="margin-top:8px; opacity:0.7; font-size:12px; font-style: italic;">
@@ -2639,28 +2689,7 @@ function generateTooltipHtml(data) {
   html += `</div>`;
   return html;
 }
-var resolveDescriptionReference = (refString, availableNodes = [], availableAncestries = []) => {
-  const match = refString.match(/\[\[REF:(node|ancestry):([a-zA-Z0-9\-_]+):([a-zA-Z0-9\-_]+)\]\]/);
-  if (!match) return null;
-  const [_, type, itemId, sectionId] = match;
-  let sourceItem = null;
-  if (type === "node") {
-    sourceItem = availableNodes.find((n) => String(n.id) === String(itemId));
-  } else {
-    sourceItem = availableAncestries.find((a) => String(a.ancestry_id) === String(itemId));
-  }
-  if (!sourceItem) return null;
-  const sections = parseDescriptionSections(sourceItem.description, sourceItem.description_sections);
-  const targetSection = sections.find((s) => String(s.id) === String(sectionId));
-  if (!targetSection) return null;
-  return {
-    content: targetSection.content,
-    sourceName: sourceItem.name,
-    sourceId: itemId,
-    type
-  };
-};
-function generateLinkTooltipHtml(data) {
+function generateLinkTooltipHtml(data, parentData, ancestryData) {
   var _a, _b;
   const hasName = (_a = data == null ? void 0 : data.name) == null ? void 0 : _a.trim();
   const hasDescription = (_b = data == null ? void 0 : data.description) == null ? void 0 : _b.trim();
@@ -2672,16 +2701,19 @@ function generateLinkTooltipHtml(data) {
     html += `<div style="font-weight:600; font-size: 14px; color: #a5f3fc; margin-bottom: 4px;">${data.name}</div>`;
   }
   if (hasDescription) {
-    html += `<div style="
-            display: -webkit-box;
-            -webkit-line-clamp: 4; 
-            -webkit-box-orient: vertical;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            word-break: break-word;
-            white-space: normal;
-            opacity: 0.9;
-        ">${data.description}</div>`;
+    const cleanDesc = formatDescriptionForTooltip(data.description, parentData, ancestryData);
+    if (cleanDesc) {
+      html += `<div style="
+                display: -webkit-box;
+                -webkit-line-clamp: 4; 
+                -webkit-box-orient: vertical;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                word-break: break-word;
+                white-space: normal;
+                opacity: 0.9;
+            ">${cleanDesc}</div>`;
+    }
   }
   html += `</div>`;
   return html;
@@ -2897,16 +2929,20 @@ function calculateNodePositions(nodes) {
   }
   return positions;
 }
-function updateTooltip({ tooltipEl, hoveredNode, hoveredLink, camera, mountEl, isSceneBusy }) {
+function updateTooltip({ tooltipEl, hoveredNode, hoveredLink, camera, mountEl, isSceneBusy, parentData, ancestryData }) {
   if (!tooltipEl || !camera || !mountEl) return;
   let content = "";
   let positionTarget = null;
   let isLink = false;
+  let currentId = "";
   if (hoveredNode && !isSceneBusy) {
-    content = generateTooltipHtml(hoveredNode.userData);
+    currentId = `node_${hoveredNode.userData.id}`;
     positionTarget = hoveredNode;
+    if (tooltipEl.dataset.currentId !== currentId) {
+      content = generateTooltipHtml(hoveredNode.userData, parentData, ancestryData);
+    }
   } else if (hoveredLink && !isSceneBusy) {
-    content = hoveredLink.userData.isAncestryLink ? generateLinkTooltipHtml(hoveredLink.userData.relationship || {}) : generateLinkTooltipHtml(hoveredLink.userData);
+    currentId = `link_${hoveredLink.userData.id}`;
     if (hoveredLink.userData.isCurved) {
       const positions = hoveredLink.geometry.attributes.position.array;
       const midIndex = Math.floor(positions.length / 2 / 3) * 3;
@@ -2915,12 +2951,23 @@ function updateTooltip({ tooltipEl, hoveredNode, hoveredLink, camera, mountEl, i
       positionTarget = new THREE2.Vector3().addVectors(hoveredLink.userData.sourceNode.position, hoveredLink.userData.targetNode.position).multiplyScalar(0.5);
     }
     isLink = true;
+    if (tooltipEl.dataset.currentId !== currentId) {
+      content = hoveredLink.userData.isAncestryLink ? generateLinkTooltipHtml(hoveredLink.userData.relationship || {}, parentData, ancestryData) : generateLinkTooltipHtml(hoveredLink.userData, parentData, ancestryData);
+    }
   }
-  if (content && positionTarget) {
-    tooltipEl.innerHTML = content;
-    const screenPosition = new THREE2.Vector3();
-    if (isLink) screenPosition.copy(positionTarget);
-    else positionTarget.getWorldPosition(screenPosition);
+  if (positionTarget) {
+    if (tooltipEl.dataset.currentId !== currentId) {
+      tooltipEl.innerHTML = content;
+      tooltipEl.dataset.currentId = currentId;
+      const anchor3D = new THREE2.Vector3();
+      if (isLink) {
+        anchor3D.copy(positionTarget);
+      } else {
+        positionTarget.getWorldPosition(anchor3D);
+      }
+      tooltipEl._fixedAnchor3D = anchor3D;
+    }
+    const screenPosition = tooltipEl._fixedAnchor3D.clone();
     screenPosition.project(camera);
     const clientWidth = mountEl.clientWidth;
     const clientHeight = mountEl.clientHeight;
@@ -2937,7 +2984,11 @@ function updateTooltip({ tooltipEl, hoveredNode, hoveredLink, camera, mountEl, i
     tooltipEl.style.left = `${x}px`;
     tooltipEl.style.top = `${y}px`;
   } else {
-    tooltipEl.style.display = "none";
+    if (tooltipEl.style.display !== "none") {
+      tooltipEl.style.display = "none";
+      tooltipEl.dataset.currentId = "";
+      tooltipEl._fixedAnchor3D = null;
+    }
   }
 }
 var processDescriptionForSave = (text, existingSections = []) => {
@@ -10907,7 +10958,18 @@ function XViewScene({
         ghostNode.userData.labelObject.position.copy(ghostNode.position).add(ghostNode.userData.labelOffset);
       }
       updateSceneHighlights(stateRef.current);
-      updateTooltip({ tooltipEl: tooltipRef.current, hoveredNode: stateRef.current.hoveredNode, hoveredLink: stateRef.current.hoveredLink, camera, mountEl: currentMount, isSceneBusy: stateRef.current.isDragging || creation.isActive || connection.isActive || relink.isActive || ancestryMode.isActive });
+      updateTooltip({
+        tooltipEl: tooltipRef.current,
+        hoveredNode: stateRef.current.hoveredNode,
+        hoveredLink: stateRef.current.hoveredLink,
+        camera,
+        mountEl: currentMount,
+        isSceneBusy: stateRef.current.isDragging || creation.isActive || connection.isActive || relink.isActive || ancestryMode.isActive,
+        parentData: parentDataRef.current,
+        // <--- ADICIONADO AQUI
+        ancestryData: ancestryDataRef.current
+        // <--- ADICIONADO AQUI
+      });
       (_b2 = stateRef.current.tweenGroup) == null ? void 0 : _b2.update(time);
       stateRef.current.controls.update();
       renderer.autoClear = false;

package/dist/index.mjs

@@ -2556,7 +2556,54 @@ function createNewCustomProperty(existingProps = []) {
     isEditing: true
   };
 }
-function generateTooltipHtml(data) {
+var resolveDescriptionReference = (refString, availableNodes = [], availableAncestries = []) => {
+  const match = refString.match(/\[\[REF:(node|ancestry):([a-zA-Z0-9\-_]+):([a-zA-Z0-9\-_]+)\]\]/);
+  if (!match) return null;
+  const [_, type, itemId, sectionId] = match;
+  let sourceItem = null;
+  if (type === "node") {
+    sourceItem = availableNodes.find((n) => String(n.id) === String(itemId));
+  } else {
+    sourceItem = availableAncestries.find((a) => String(a.ancestry_id) === String(itemId));
+  }
+  if (!sourceItem) return null;
+  const sections = parseDescriptionSections(sourceItem.description, sourceItem.description_sections);
+  const targetSection = sections.find((s) => String(s.id) === String(sectionId));
+  if (!targetSection) return null;
+  return {
+    content: targetSection.content,
+    sourceName: sourceItem.name,
+    sourceId: itemId,
+    type
+  };
+};
+function formatDescriptionForTooltip(rawText, parentData, ancestryData) {
+  if (!rawText) return "";
+  let text = rawText;
+  const allNodes = parentData ? Object.values(parentData).flatMap((f) => f.nodes || []) : [];
+  const allAncestries = ancestryData || [];
+  text = text.replace(/\[\[REF:(node|ancestry):([a-zA-Z0-9\-_]+):([a-zA-Z0-9\-_]+)\]\]/g, (match, type, itemId, sectionId) => {
+    const resolved = resolveDescriptionReference(match, allNodes, allAncestries);
+    if (resolved && !resolved.error) {
+      return resolved.content;
+    }
+    return "[Refer\xEAncia indispon\xEDvel]";
+  });
+  text = text.replace(/\*\/\s*\d+(?::[a-zA-Z0-9-]+)?\s*\//g, "");
+  text = text.replace(/\[\[MENTION:node:([a-zA-Z0-9\-_]+)\]\]/g, (match, nodeId) => {
+    const node = allNodes.find((n) => String(n.id) === String(nodeId));
+    return node ? `@${node.name}` : `@Men\xE7\xE3o`;
+  });
+  text = text.replace(/\[\[MENTION:image:([^|\]]+)\|?([^\]]*)\]\]/g, (match, url, name) => {
+    return name ? `[Imagem: ${name}]` : `[Imagem]`;
+  });
+  text = text.replace(/^#+\s*/gm, "");
+  text = text.replace(/```[\s\S]*?```/g, "[C\xF3digo]");
+  text = text.replace(/-\s\[[xX ]\]\s*/g, "\u2022 ");
+  text = text.replace(/\[([^\]]+)\]\((https?:\/\/[^\)]+)\)/g, "$1");
+  return text.trim();
+}
+function generateTooltipHtml(data, parentData, ancestryData) {
   const ignoredKeys = ["id", "name", "type", "color", "_baseEmissiveIntensity", "description"];
   const customKeys = Object.keys(data).filter((k) => !ignoredKeys.includes(k));
   const extras = customKeys.length;
@@ -2572,20 +2619,23 @@ function generateTooltipHtml(data) {
         <div style="font-weight:600; font-size: 14px; color: #fff;">${typeDisplay}</div>
         <div style="margin-bottom: 2px; color: #e2e8f0;">${data.name || ""}</div>`;
   if (data.description) {
-    html += `<div style="
-            margin-top: 6px; 
-            padding-top: 6px; 
-            border-top: 1px solid rgba(255,255,255,0.1); 
-            opacity: 0.85; 
-            font-size: 13px;
-            display: -webkit-box;
-            -webkit-line-clamp: 4; 
-            -webkit-box-orient: vertical;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            word-break: break-word;
-            white-space: normal;
-        ">${data.description}</div>`;
+    const cleanDesc = formatDescriptionForTooltip(data.description, parentData, ancestryData);
+    if (cleanDesc) {
+      html += `<div style="
+                margin-top: 6px; 
+                padding-top: 6px; 
+                border-top: 1px solid rgba(255,255,255,0.1); 
+                opacity: 0.85; 
+                font-size: 13px;
+                display: -webkit-box;
+                -webkit-line-clamp: 4; 
+                -webkit-box-orient: vertical;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                word-break: break-word;
+                white-space: normal;
+            ">${cleanDesc}</div>`;
+    }
   }
   if (extras > 0) {
     html += `<div style="margin-top:8px; opacity:0.7; font-size:12px; font-style: italic;">
@@ -2595,28 +2645,7 @@ function generateTooltipHtml(data) {
   html += `</div>`;
   return html;
 }
-var resolveDescriptionReference = (refString, availableNodes = [], availableAncestries = []) => {
-  const match = refString.match(/\[\[REF:(node|ancestry):([a-zA-Z0-9\-_]+):([a-zA-Z0-9\-_]+)\]\]/);
-  if (!match) return null;
-  const [_, type, itemId, sectionId] = match;
-  let sourceItem = null;
-  if (type === "node") {
-    sourceItem = availableNodes.find((n) => String(n.id) === String(itemId));
-  } else {
-    sourceItem = availableAncestries.find((a) => String(a.ancestry_id) === String(itemId));
-  }
-  if (!sourceItem) return null;
-  const sections = parseDescriptionSections(sourceItem.description, sourceItem.description_sections);
-  const targetSection = sections.find((s) => String(s.id) === String(sectionId));
-  if (!targetSection) return null;
-  return {
-    content: targetSection.content,
-    sourceName: sourceItem.name,
-    sourceId: itemId,
-    type
-  };
-};
-function generateLinkTooltipHtml(data) {
+function generateLinkTooltipHtml(data, parentData, ancestryData) {
   var _a, _b;
   const hasName = (_a = data == null ? void 0 : data.name) == null ? void 0 : _a.trim();
   const hasDescription = (_b = data == null ? void 0 : data.description) == null ? void 0 : _b.trim();
@@ -2628,16 +2657,19 @@ function generateLinkTooltipHtml(data) {
     html += `<div style="font-weight:600; font-size: 14px; color: #a5f3fc; margin-bottom: 4px;">${data.name}</div>`;
   }
   if (hasDescription) {
-    html += `<div style="
-            display: -webkit-box;
-            -webkit-line-clamp: 4; 
-            -webkit-box-orient: vertical;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            word-break: break-word;
-            white-space: normal;
-            opacity: 0.9;
-        ">${data.description}</div>`;
+    const cleanDesc = formatDescriptionForTooltip(data.description, parentData, ancestryData);
+    if (cleanDesc) {
+      html += `<div style="
+                display: -webkit-box;
+                -webkit-line-clamp: 4; 
+                -webkit-box-orient: vertical;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                word-break: break-word;
+                white-space: normal;
+                opacity: 0.9;
+            ">${cleanDesc}</div>`;
+    }
   }
   html += `</div>`;
   return html;
@@ -2853,16 +2885,20 @@ function calculateNodePositions(nodes) {
   }
   return positions;
 }
-function updateTooltip({ tooltipEl, hoveredNode, hoveredLink, camera, mountEl, isSceneBusy }) {
+function updateTooltip({ tooltipEl, hoveredNode, hoveredLink, camera, mountEl, isSceneBusy, parentData, ancestryData }) {
   if (!tooltipEl || !camera || !mountEl) return;
   let content = "";
   let positionTarget = null;
   let isLink = false;
+  let currentId = "";
   if (hoveredNode && !isSceneBusy) {
-    content = generateTooltipHtml(hoveredNode.userData);
+    currentId = `node_${hoveredNode.userData.id}`;
     positionTarget = hoveredNode;
+    if (tooltipEl.dataset.currentId !== currentId) {
+      content = generateTooltipHtml(hoveredNode.userData, parentData, ancestryData);
+    }
   } else if (hoveredLink && !isSceneBusy) {
-    content = hoveredLink.userData.isAncestryLink ? generateLinkTooltipHtml(hoveredLink.userData.relationship || {}) : generateLinkTooltipHtml(hoveredLink.userData);
+    currentId = `link_${hoveredLink.userData.id}`;
     if (hoveredLink.userData.isCurved) {
       const positions = hoveredLink.geometry.attributes.position.array;
       const midIndex = Math.floor(positions.length / 2 / 3) * 3;
@@ -2871,12 +2907,23 @@ function updateTooltip({ tooltipEl, hoveredNode, hoveredLink, camera, mountEl, i
       positionTarget = new THREE2.Vector3().addVectors(hoveredLink.userData.sourceNode.position, hoveredLink.userData.targetNode.position).multiplyScalar(0.5);
     }
     isLink = true;
+    if (tooltipEl.dataset.currentId !== currentId) {
+      content = hoveredLink.userData.isAncestryLink ? generateLinkTooltipHtml(hoveredLink.userData.relationship || {}, parentData, ancestryData) : generateLinkTooltipHtml(hoveredLink.userData, parentData, ancestryData);
+    }
   }
-  if (content && positionTarget) {
-    tooltipEl.innerHTML = content;
-    const screenPosition = new THREE2.Vector3();
-    if (isLink) screenPosition.copy(positionTarget);
-    else positionTarget.getWorldPosition(screenPosition);
+  if (positionTarget) {
+    if (tooltipEl.dataset.currentId !== currentId) {
+      tooltipEl.innerHTML = content;
+      tooltipEl.dataset.currentId = currentId;
+      const anchor3D = new THREE2.Vector3();
+      if (isLink) {
+        anchor3D.copy(positionTarget);
+      } else {
+        positionTarget.getWorldPosition(anchor3D);
+      }
+      tooltipEl._fixedAnchor3D = anchor3D;
+    }
+    const screenPosition = tooltipEl._fixedAnchor3D.clone();
     screenPosition.project(camera);
     const clientWidth = mountEl.clientWidth;
     const clientHeight = mountEl.clientHeight;
@@ -2893,7 +2940,11 @@ function updateTooltip({ tooltipEl, hoveredNode, hoveredLink, camera, mountEl, i
     tooltipEl.style.left = `${x}px`;
     tooltipEl.style.top = `${y}px`;
   } else {
-    tooltipEl.style.display = "none";
+    if (tooltipEl.style.display !== "none") {
+      tooltipEl.style.display = "none";
+      tooltipEl.dataset.currentId = "";
+      tooltipEl._fixedAnchor3D = null;
+    }
   }
 }
 var processDescriptionForSave = (text, existingSections = []) => {
@@ -10907,7 +10958,18 @@ function XViewScene({
         ghostNode.userData.labelObject.position.copy(ghostNode.position).add(ghostNode.userData.labelOffset);
       }
       updateSceneHighlights(stateRef.current);
-      updateTooltip({ tooltipEl: tooltipRef.current, hoveredNode: stateRef.current.hoveredNode, hoveredLink: stateRef.current.hoveredLink, camera, mountEl: currentMount, isSceneBusy: stateRef.current.isDragging || creation.isActive || connection.isActive || relink.isActive || ancestryMode.isActive });
+      updateTooltip({
+        tooltipEl: tooltipRef.current,
+        hoveredNode: stateRef.current.hoveredNode,
+        hoveredLink: stateRef.current.hoveredLink,
+        camera,
+        mountEl: currentMount,
+        isSceneBusy: stateRef.current.isDragging || creation.isActive || connection.isActive || relink.isActive || ancestryMode.isActive,
+        parentData: parentDataRef.current,
+        // <--- ADICIONADO AQUI
+        ancestryData: ancestryDataRef.current
+        // <--- ADICIONADO AQUI
+      });
       (_b2 = stateRef.current.tweenGroup) == null ? void 0 : _b2.update(time);
       stateRef.current.controls.update();
       renderer.autoClear = false;

package/package.json

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