@lv-x-software-house/x_view 1.3.9 → 1.4.0

package/dist/index.js

@@ -6232,7 +6232,8 @@ function XViewSidebar({
           options: [
             { value: "Star", label: "Star" },
             { value: "Circle", label: "Circle" },
-            { value: "Column", label: "Column" }
+            { value: "Column", label: "Column" },
+            { value: "Network", label: "Network" }
           ],
           placeholder: "Selecione um Formato"
         }
@@ -20807,12 +20808,20 @@ function XViewScene({
   );
   const handleActivateReshapeLens = (0, import_react38.useCallback)(
     ({ type, columns, centerNodeId }) => {
-      const { nodeObjects, tweenGroup, camera, controls } = stateRef.current;
+      const {
+        nodeObjects,
+        allLinks = [],
+        ancestryLinks = [],
+        tweenGroup,
+        camera,
+        controls
+      } = stateRef.current;
       if (!nodeObjects || !tweenGroup || !camera || !controls) return;
       const activeNodeIds = Object.keys(nodeObjects);
       if (activeNodeIds.length === 0) return;
       let sumX = 0;
       let sumY = 0;
+      let sumZ = 0;
       let nodeCount = 0;
       activeNodeIds.forEach((id) => {
         const mesh = nodeObjects[id];
@@ -20916,23 +20925,192 @@ function XViewScene({
           sumY += targetY;
           nodeCount++;
         });
+      } else if (type === "Network") {
+        const N = activeNodeIds.length;
+        const activeSet = new Set(activeNodeIds.map(String));
+        const edges = [];
+        const degreeMap = new Map(activeNodeIds.map((id) => [String(id), 0]));
+        const seenPairs = /* @__PURE__ */ new Set();
+        [...allLinks, ...ancestryLinks].forEach((line) => {
+          var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2;
+          const u = String(
+            ((_c2 = (_b2 = (_a2 = line.userData) == null ? void 0 : _a2.sourceNode) == null ? void 0 : _b2.userData) == null ? void 0 : _c2.id) ?? ((_d2 = line.userData) == null ? void 0 : _d2.source) ?? ""
+          );
+          const v = String(
+            ((_g2 = (_f2 = (_e2 = line.userData) == null ? void 0 : _e2.targetNode) == null ? void 0 : _f2.userData) == null ? void 0 : _g2.id) ?? ((_h2 = line.userData) == null ? void 0 : _h2.target) ?? ""
+          );
+          if (u && v && u !== v && activeSet.has(u) && activeSet.has(v)) {
+            const pairKey = u < v ? `${u}_${v}` : `${v}_${u}`;
+            if (!seenPairs.has(pairKey)) {
+              seenPairs.add(pairKey);
+              edges.push([u, v]);
+              degreeMap.set(u, (degreeMap.get(u) || 0) + 1);
+              degreeMap.set(v, (degreeMap.get(v) || 0) + 1);
+            }
+          }
+        });
+        const baseSpread = Math.max(45, Math.sqrt(N) * 19);
+        const boundX = baseSpread * 1.75;
+        const boundY = baseSpread * 1;
+        const boundZ = Math.min(85, Math.max(25, baseSpread * 0.45));
+        const sortedIds = [...activeNodeIds].sort(
+          (a, b) => (degreeMap.get(String(b)) || 0) - (degreeMap.get(String(a)) || 0)
+        );
+        const posMap = /* @__PURE__ */ new Map();
+        const velMap = /* @__PURE__ */ new Map();
+        const goldenAngle = Math.PI * (3 - Math.sqrt(5));
+        sortedIds.forEach((id, idx) => {
+          const t = N > 1 ? idx / (N - 1) : 0.5;
+          const r = Math.sqrt(0.12 + 0.88 * t);
+          const theta = idx * goldenAngle * 7;
+          const zLayer = Math.sin(idx * 2.39996) * boundZ * (0.4 + 0.6 * r);
+          posMap.set(String(id), {
+            x: Math.cos(theta) * r * boundX,
+            y: Math.sin(theta) * r * boundY,
+            z: zLayer
+          });
+          velMap.set(String(id), { x: 0, y: 0, z: 0 });
+        });
+        const iterations = 120;
+        const minNodeDist = 24;
+        const idealEdgeDist = 28;
+        const repulsionRadius = 65;
+        for (let iter = 0; iter < iterations; iter++) {
+          const cooling = 1 - iter / iterations * 0.75;
+          for (let i = 0; i < N; i++) {
+            const idA = String(sortedIds[i]);
+            const pA = posMap.get(idA);
+            const vA = velMap.get(idA);
+            for (let j = i + 1; j < N; j++) {
+              const idB = String(sortedIds[j]);
+              const pB = posMap.get(idB);
+              const vB = velMap.get(idB);
+              const dx = pA.x - pB.x;
+              const dy = pA.y - pB.y;
+              const dz = (pA.z - pB.z) * 0.6;
+              const distSq = dx * dx + dy * dy + dz * dz + 0.1;
+              const dist = Math.sqrt(distSq);
+              if (dist < repulsionRadius) {
+                const force = dist < minNodeDist ? (minNodeDist - dist) / dist * 1.8 : (repulsionRadius - dist) / repulsionRadius * 0.35 / dist;
+                const fx = dx * force;
+                const fy = dy * force;
+                const fz = (pA.z - pB.z) * force * 0.5;
+                vA.x += fx;
+                vA.y += fy;
+                vA.z += fz;
+                vB.x -= fx;
+                vB.y -= fy;
+                vB.z -= fz;
+              }
+            }
+          }
+          for (let e = 0; e < edges.length; e++) {
+            const [u, v] = edges[e];
+            const pU = posMap.get(u);
+            const pV = posMap.get(v);
+            const vU = velMap.get(u);
+            const vV = velMap.get(v);
+            const dx = pV.x - pU.x;
+            const dy = pV.y - pU.y;
+            const dz = pV.z - pU.z;
+            const dist = Math.sqrt(dx * dx + dy * dy + dz * dz) || 1;
+            const delta = dist - idealEdgeDist;
+            const springStrength = 0.085;
+            const fx = dx / dist * delta * springStrength;
+            const fy = dy / dist * delta * springStrength;
+            const fz = dz / dist * delta * springStrength;
+            vU.x += fx;
+            vU.y += fy;
+            vU.z += fz;
+            vV.x -= fx;
+            vV.y -= fy;
+            vV.z -= fz;
+          }
+          for (let i = 0; i < N; i++) {
+            const id = String(sortedIds[i]);
+            const p = posMap.get(id);
+            const v = velMap.get(id);
+            const nx = p.x / boundX;
+            const ny = p.y / boundY;
+            const nz = p.z / boundZ;
+            const radialNorm = Math.sqrt(nx * nx + ny * ny);
+            if (radialNorm > 0.95) {
+              const pull = (radialNorm - 0.95) * 2.2;
+              v.x -= nx * pull * 8;
+              v.y -= ny * pull * 8;
+            } else if (radialNorm < 0.2 && N > 12 && (degreeMap.get(id) || 0) === 0) {
+              v.x += (nx || 0.1) * 1.5;
+              v.y += (ny || 0.1) * 1.5;
+            }
+            if (Math.abs(nz) > 0.95) {
+              v.z -= nz * (Math.abs(nz) - 0.95) * 10;
+            }
+            const maxStep = 6 * cooling;
+            const speed = Math.sqrt(v.x * v.x + v.y * v.y + v.z * v.z) || 1;
+            const scale = speed > maxStep ? maxStep / speed : cooling;
+            p.x += v.x * scale;
+            p.y += v.y * scale;
+            p.z += v.z * scale;
+            v.x *= 0.4;
+            v.y *= 0.4;
+            v.z *= 0.4;
+          }
+        }
+        activeNodeIds.forEach((id) => {
+          const mesh = nodeObjects[id];
+          const target = posMap.get(String(id)) || { x: 0, y: 0, z: 0 };
+          const posTween = new import_tween2.Tween(mesh.position).to({ x: target.x, y: target.y, z: target.z }, 1500).easing(import_tween2.Easing.Cubic.InOut);
+          tweenGroup.add(posTween);
+          posTween.start();
+          if (mesh.userData.labelObject) {
+            const labelTarget = new THREE3.Vector3(
+              target.x,
+              target.y,
+              target.z
+            ).add(mesh.userData.labelOffset || new THREE3.Vector3(0, 3.8, 0));
+            const lblTween = new import_tween2.Tween(mesh.userData.labelObject.position).to(labelTarget, 1500).easing(import_tween2.Easing.Cubic.InOut);
+            tweenGroup.add(lblTween);
+            lblTween.start();
+          }
+          sumX += target.x;
+          sumY += target.y;
+          sumZ += target.z;
+          nodeCount++;
+        });
       }
       if (nodeCount > 0) {
         const centerX = sumX / nodeCount;
         const centerY = sumY / nodeCount;
-        const targetFocus = new THREE3.Vector3(centerX, centerY, 0);
+        const centerZ = type === "Network" ? sumZ / nodeCount : 0;
+        const targetFocus = new THREE3.Vector3(centerX, centerY, centerZ);
         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();
         let zoomZ = 140;
+        let camOffsetY = 0;
         if (type === "Column") {
           const numRows = Math.ceil(nodeCount / (columns || 4));
           zoomZ = Math.max(140, numRows * 50);
         } else if (type === "Circle" || type === "Star") {
           const radius = Math.max(80, nodeCount * 8);
           zoomZ = radius * 2.5;
+        } else if (type === "Network") {
+          const baseSpread = Math.max(45, Math.sqrt(nodeCount) * 19);
+          const immersionFactor = Math.max(
+            0.52,
+            1.15 - Math.min(nodeCount, 120) * 52e-4
+          );
+          zoomZ = targetFocus.z + Math.max(55, baseSpread * immersionFactor);
+          camOffsetY = -baseSpread * 0.08;
         }
-        const camTween = new import_tween2.Tween(camera.position).to({ x: targetFocus.x, y: targetFocus.y, z: zoomZ }, 1500).easing(import_tween2.Easing.Cubic.InOut);
+        const camTween = new import_tween2.Tween(camera.position).to(
+          {
+            x: targetFocus.x,
+            y: targetFocus.y + camOffsetY,
+            z: zoomZ
+          },
+          1500
+        ).easing(import_tween2.Easing.Cubic.InOut);
         tweenGroup.add(camTween);
         camTween.start();
       }

package/dist/index.mjs

@@ -6193,7 +6193,8 @@ function XViewSidebar({
           options: [
             { value: "Star", label: "Star" },
             { value: "Circle", label: "Circle" },
-            { value: "Column", label: "Column" }
+            { value: "Column", label: "Column" },
+            { value: "Network", label: "Network" }
           ],
           placeholder: "Selecione um Formato"
         }
@@ -20909,12 +20910,20 @@ function XViewScene({
   );
   const handleActivateReshapeLens = useCallback8(
     ({ type, columns, centerNodeId }) => {
-      const { nodeObjects, tweenGroup, camera, controls } = stateRef.current;
+      const {
+        nodeObjects,
+        allLinks = [],
+        ancestryLinks = [],
+        tweenGroup,
+        camera,
+        controls
+      } = stateRef.current;
       if (!nodeObjects || !tweenGroup || !camera || !controls) return;
       const activeNodeIds = Object.keys(nodeObjects);
       if (activeNodeIds.length === 0) return;
       let sumX = 0;
       let sumY = 0;
+      let sumZ = 0;
       let nodeCount = 0;
       activeNodeIds.forEach((id) => {
         const mesh = nodeObjects[id];
@@ -21018,23 +21027,192 @@ function XViewScene({
           sumY += targetY;
           nodeCount++;
         });
+      } else if (type === "Network") {
+        const N = activeNodeIds.length;
+        const activeSet = new Set(activeNodeIds.map(String));
+        const edges = [];
+        const degreeMap = new Map(activeNodeIds.map((id) => [String(id), 0]));
+        const seenPairs = /* @__PURE__ */ new Set();
+        [...allLinks, ...ancestryLinks].forEach((line) => {
+          var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2;
+          const u = String(
+            ((_c2 = (_b2 = (_a2 = line.userData) == null ? void 0 : _a2.sourceNode) == null ? void 0 : _b2.userData) == null ? void 0 : _c2.id) ?? ((_d2 = line.userData) == null ? void 0 : _d2.source) ?? ""
+          );
+          const v = String(
+            ((_g2 = (_f2 = (_e2 = line.userData) == null ? void 0 : _e2.targetNode) == null ? void 0 : _f2.userData) == null ? void 0 : _g2.id) ?? ((_h2 = line.userData) == null ? void 0 : _h2.target) ?? ""
+          );
+          if (u && v && u !== v && activeSet.has(u) && activeSet.has(v)) {
+            const pairKey = u < v ? `${u}_${v}` : `${v}_${u}`;
+            if (!seenPairs.has(pairKey)) {
+              seenPairs.add(pairKey);
+              edges.push([u, v]);
+              degreeMap.set(u, (degreeMap.get(u) || 0) + 1);
+              degreeMap.set(v, (degreeMap.get(v) || 0) + 1);
+            }
+          }
+        });
+        const baseSpread = Math.max(45, Math.sqrt(N) * 19);
+        const boundX = baseSpread * 1.75;
+        const boundY = baseSpread * 1;
+        const boundZ = Math.min(85, Math.max(25, baseSpread * 0.45));
+        const sortedIds = [...activeNodeIds].sort(
+          (a, b) => (degreeMap.get(String(b)) || 0) - (degreeMap.get(String(a)) || 0)
+        );
+        const posMap = /* @__PURE__ */ new Map();
+        const velMap = /* @__PURE__ */ new Map();
+        const goldenAngle = Math.PI * (3 - Math.sqrt(5));
+        sortedIds.forEach((id, idx) => {
+          const t = N > 1 ? idx / (N - 1) : 0.5;
+          const r = Math.sqrt(0.12 + 0.88 * t);
+          const theta = idx * goldenAngle * 7;
+          const zLayer = Math.sin(idx * 2.39996) * boundZ * (0.4 + 0.6 * r);
+          posMap.set(String(id), {
+            x: Math.cos(theta) * r * boundX,
+            y: Math.sin(theta) * r * boundY,
+            z: zLayer
+          });
+          velMap.set(String(id), { x: 0, y: 0, z: 0 });
+        });
+        const iterations = 120;
+        const minNodeDist = 24;
+        const idealEdgeDist = 28;
+        const repulsionRadius = 65;
+        for (let iter = 0; iter < iterations; iter++) {
+          const cooling = 1 - iter / iterations * 0.75;
+          for (let i = 0; i < N; i++) {
+            const idA = String(sortedIds[i]);
+            const pA = posMap.get(idA);
+            const vA = velMap.get(idA);
+            for (let j = i + 1; j < N; j++) {
+              const idB = String(sortedIds[j]);
+              const pB = posMap.get(idB);
+              const vB = velMap.get(idB);
+              const dx = pA.x - pB.x;
+              const dy = pA.y - pB.y;
+              const dz = (pA.z - pB.z) * 0.6;
+              const distSq = dx * dx + dy * dy + dz * dz + 0.1;
+              const dist = Math.sqrt(distSq);
+              if (dist < repulsionRadius) {
+                const force = dist < minNodeDist ? (minNodeDist - dist) / dist * 1.8 : (repulsionRadius - dist) / repulsionRadius * 0.35 / dist;
+                const fx = dx * force;
+                const fy = dy * force;
+                const fz = (pA.z - pB.z) * force * 0.5;
+                vA.x += fx;
+                vA.y += fy;
+                vA.z += fz;
+                vB.x -= fx;
+                vB.y -= fy;
+                vB.z -= fz;
+              }
+            }
+          }
+          for (let e = 0; e < edges.length; e++) {
+            const [u, v] = edges[e];
+            const pU = posMap.get(u);
+            const pV = posMap.get(v);
+            const vU = velMap.get(u);
+            const vV = velMap.get(v);
+            const dx = pV.x - pU.x;
+            const dy = pV.y - pU.y;
+            const dz = pV.z - pU.z;
+            const dist = Math.sqrt(dx * dx + dy * dy + dz * dz) || 1;
+            const delta = dist - idealEdgeDist;
+            const springStrength = 0.085;
+            const fx = dx / dist * delta * springStrength;
+            const fy = dy / dist * delta * springStrength;
+            const fz = dz / dist * delta * springStrength;
+            vU.x += fx;
+            vU.y += fy;
+            vU.z += fz;
+            vV.x -= fx;
+            vV.y -= fy;
+            vV.z -= fz;
+          }
+          for (let i = 0; i < N; i++) {
+            const id = String(sortedIds[i]);
+            const p = posMap.get(id);
+            const v = velMap.get(id);
+            const nx = p.x / boundX;
+            const ny = p.y / boundY;
+            const nz = p.z / boundZ;
+            const radialNorm = Math.sqrt(nx * nx + ny * ny);
+            if (radialNorm > 0.95) {
+              const pull = (radialNorm - 0.95) * 2.2;
+              v.x -= nx * pull * 8;
+              v.y -= ny * pull * 8;
+            } else if (radialNorm < 0.2 && N > 12 && (degreeMap.get(id) || 0) === 0) {
+              v.x += (nx || 0.1) * 1.5;
+              v.y += (ny || 0.1) * 1.5;
+            }
+            if (Math.abs(nz) > 0.95) {
+              v.z -= nz * (Math.abs(nz) - 0.95) * 10;
+            }
+            const maxStep = 6 * cooling;
+            const speed = Math.sqrt(v.x * v.x + v.y * v.y + v.z * v.z) || 1;
+            const scale = speed > maxStep ? maxStep / speed : cooling;
+            p.x += v.x * scale;
+            p.y += v.y * scale;
+            p.z += v.z * scale;
+            v.x *= 0.4;
+            v.y *= 0.4;
+            v.z *= 0.4;
+          }
+        }
+        activeNodeIds.forEach((id) => {
+          const mesh = nodeObjects[id];
+          const target = posMap.get(String(id)) || { x: 0, y: 0, z: 0 };
+          const posTween = new Tween2(mesh.position).to({ x: target.x, y: target.y, z: target.z }, 1500).easing(Easing2.Cubic.InOut);
+          tweenGroup.add(posTween);
+          posTween.start();
+          if (mesh.userData.labelObject) {
+            const labelTarget = new THREE3.Vector3(
+              target.x,
+              target.y,
+              target.z
+            ).add(mesh.userData.labelOffset || new THREE3.Vector3(0, 3.8, 0));
+            const lblTween = new Tween2(mesh.userData.labelObject.position).to(labelTarget, 1500).easing(Easing2.Cubic.InOut);
+            tweenGroup.add(lblTween);
+            lblTween.start();
+          }
+          sumX += target.x;
+          sumY += target.y;
+          sumZ += target.z;
+          nodeCount++;
+        });
       }
       if (nodeCount > 0) {
         const centerX = sumX / nodeCount;
         const centerY = sumY / nodeCount;
-        const targetFocus = new THREE3.Vector3(centerX, centerY, 0);
+        const centerZ = type === "Network" ? sumZ / nodeCount : 0;
+        const targetFocus = new THREE3.Vector3(centerX, centerY, centerZ);
         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();
         let zoomZ = 140;
+        let camOffsetY = 0;
         if (type === "Column") {
           const numRows = Math.ceil(nodeCount / (columns || 4));
           zoomZ = Math.max(140, numRows * 50);
         } else if (type === "Circle" || type === "Star") {
           const radius = Math.max(80, nodeCount * 8);
           zoomZ = radius * 2.5;
+        } else if (type === "Network") {
+          const baseSpread = Math.max(45, Math.sqrt(nodeCount) * 19);
+          const immersionFactor = Math.max(
+            0.52,
+            1.15 - Math.min(nodeCount, 120) * 52e-4
+          );
+          zoomZ = targetFocus.z + Math.max(55, baseSpread * immersionFactor);
+          camOffsetY = -baseSpread * 0.08;
         }
-        const camTween = new Tween2(camera.position).to({ x: targetFocus.x, y: targetFocus.y, z: zoomZ }, 1500).easing(Easing2.Cubic.InOut);
+        const camTween = new Tween2(camera.position).to(
+          {
+            x: targetFocus.x,
+            y: targetFocus.y + camOffsetY,
+            z: zoomZ
+          },
+          1500
+        ).easing(Easing2.Cubic.InOut);
         tweenGroup.add(camTween);
         camTween.start();
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lv-x-software-house/x_view",
-  "version": "1.3.9",
+  "version": "1.4.0",
   "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",