@lv-x-software-house/x_view 1.2.6-dev.49 → 1.2.6-dev.51

package/dist/index.js

@@ -3896,6 +3896,8 @@ function XViewSidebar({
   },
   milestones = [],
   onOpenMilestoneManager = () => {
+  },
+  onActivateReshapeLens = () => {
   }
 }) {
   const [query, setQuery] = (0, import_react3.useState)("");
@@ -3910,6 +3912,10 @@ function XViewSidebar({
   const [questFilterStatus, setQuestFilterStatus] = (0, import_react3.useState)("");
   const [isQuestLensMenuOpen, setIsQuestLensMenuOpen] = (0, import_react3.useState)(false);
   const [questFilterMilestone, setQuestFilterMilestone] = (0, import_react3.useState)("");
+  const [isReshapeLensMenuOpen, setIsReshapeLensMenuOpen] = (0, import_react3.useState)(false);
+  const [reshapeLayoutType, setReshapeLayoutType] = (0, import_react3.useState)("Star");
+  const [reshapeColumnCount, setReshapeColumnCount] = (0, import_react3.useState)(4);
+  const [reshapeCenterNodeId, setReshapeCenterNodeId] = (0, import_react3.useState)("");
   const [isTypeDropdownOpen, setIsTypeDropdownOpen] = (0, import_react3.useState)(false);
   const [highlightedTypeIndex, setHighlightedTypeIndex] = (0, import_react3.useState)(-1);
   const containerRef = (0, import_react3.useRef)(null);
@@ -3917,6 +3923,7 @@ function XViewSidebar({
   const filterMenuRef = (0, import_react3.useRef)(null);
   const typeDropdownRef = (0, import_react3.useRef)(null);
   const questLensRef = (0, import_react3.useRef)(null);
+  const reshapeLensRef = (0, import_react3.useRef)(null);
   const ability = (0, import_react3.useMemo)(() => {
     return defineAbilityFor(userRole);
   }, [userRole]);
@@ -4022,16 +4029,19 @@ function XViewSidebar({
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [isFilterMenuOpen, isTypeDropdownOpen]);
   (0, import_react3.useEffect)(() => {
-    const handleClickOutsideQuest = (event) => {
+    const handleClickOutsideQuestAndReshape = (event) => {
       if (questLensRef.current && !questLensRef.current.contains(event.target)) {
         setIsQuestLensMenuOpen(false);
       }
+      if (reshapeLensRef.current && !reshapeLensRef.current.contains(event.target)) {
+        setIsReshapeLensMenuOpen(false);
+      }
     };
-    if (isQuestLensMenuOpen) {
-      document.addEventListener("mousedown", handleClickOutsideQuest);
+    if (isQuestLensMenuOpen || isReshapeLensMenuOpen) {
+      document.addEventListener("mousedown", handleClickOutsideQuestAndReshape);
     }
-    return () => document.removeEventListener("mousedown", handleClickOutsideQuest);
-  }, [isQuestLensMenuOpen]);
+    return () => document.removeEventListener("mousedown", handleClickOutsideQuestAndReshape);
+  }, [isQuestLensMenuOpen, isReshapeLensMenuOpen]);
   (0, import_react3.useEffect)(() => {
     if (!query) setSelectedNodeId(null);
   }, [query]);
@@ -4371,6 +4381,71 @@ function XViewSidebar({
         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"
       },
       "Aplicar Lente"
+    )))), /* @__PURE__ */ import_react3.default.createElement("div", { className: "relative", ref: reshapeLensRef }, /* @__PURE__ */ import_react3.default.createElement(
+      "button",
+      {
+        onClick: () => setIsReshapeLensMenuOpen(!isReshapeLensMenuOpen),
+        className: `${buttonBaseClass} ${isReshapeLensMenuOpen ? "bg-indigo-500/30 border-indigo-400" : ""}`,
+        title: "Abrir op\xE7\xF5es de Reshape"
+      },
+      /* @__PURE__ */ import_react3.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react3.default.createElement("polygon", { points: "12 2 2 7 12 12 22 7 12 2" }), /* @__PURE__ */ import_react3.default.createElement("polyline", { points: "2 17 12 22 22 17" }), /* @__PURE__ */ import_react3.default.createElement("polyline", { points: "2 12 12 17 22 12" })),
+      "Reshape Lens"
+    ), isReshapeLensMenuOpen && /* @__PURE__ */ import_react3.default.createElement("div", { className: "absolute left-0 bottom-full mb-2 w-full p-4 rounded-xl bg-slate-900 border border-white/10 shadow-2xl z-50 flex flex-col gap-4 animate-in fade-in slide-in-from-bottom-2 duration-200" }, /* @__PURE__ */ import_react3.default.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ import_react3.default.createElement("label", { className: "text-[10px] uppercase text-slate-400 font-bold tracking-widest" }, "Layout Type"), /* @__PURE__ */ import_react3.default.createElement(
+      "select",
+      {
+        value: reshapeLayoutType,
+        onChange: (e) => setReshapeLayoutType(e.target.value),
+        className: "w-full bg-slate-800 p-2 text-xs rounded border border-white/10 focus:outline-none focus:border-indigo-500/50 text-white appearance-none cursor-pointer"
+      },
+      /* @__PURE__ */ import_react3.default.createElement("option", { value: "Star" }, "Star"),
+      /* @__PURE__ */ import_react3.default.createElement("option", { value: "Circle" }, "Circle"),
+      /* @__PURE__ */ import_react3.default.createElement("option", { value: "Column" }, "Column")
+    )), reshapeLayoutType === "Column" && /* @__PURE__ */ import_react3.default.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ import_react3.default.createElement("label", { className: "text-[10px] uppercase text-slate-400 font-bold tracking-widest" }, "Colunas"), /* @__PURE__ */ import_react3.default.createElement(
+      "input",
+      {
+        type: "number",
+        min: "1",
+        max: "12",
+        value: reshapeColumnCount,
+        onChange: (e) => setReshapeColumnCount(parseInt(e.target.value) || 4),
+        className: "w-full bg-slate-800 p-2 text-xs rounded border border-white/10 focus:outline-none focus:border-indigo-500/50 text-white"
+      }
+    )), reshapeLayoutType === "Star" && /* @__PURE__ */ import_react3.default.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ import_react3.default.createElement("label", { className: "text-[10px] uppercase text-slate-400 font-bold tracking-widest" }, "N\xF3 Central"), /* @__PURE__ */ import_react3.default.createElement(
+      "select",
+      {
+        value: reshapeCenterNodeId,
+        onChange: (e) => setReshapeCenterNodeId(e.target.value),
+        className: "w-full bg-slate-800 p-2 text-xs rounded border border-white/10 focus:outline-none focus:border-indigo-500/50 text-white appearance-none cursor-pointer"
+      },
+      /* @__PURE__ */ import_react3.default.createElement("option", { value: "" }, "Selecione..."),
+      (Array.isArray(dbNodes) ? dbNodes.filter((n) => isNodeInView(n.id)) : []).map((n) => /* @__PURE__ */ import_react3.default.createElement("option", { key: n.id, value: n.id }, n.name))
+    )), /* @__PURE__ */ import_react3.default.createElement("div", { className: "flex gap-2 pt-1" }, /* @__PURE__ */ import_react3.default.createElement(
+      "button",
+      {
+        onClick: () => {
+          setReshapeLayoutType("Star");
+          setReshapeColumnCount(4);
+          setReshapeCenterNodeId("");
+        },
+        className: "flex-1 py-2 bg-white/5 hover:bg-white/10 text-slate-300 text-[11px] font-medium rounded-lg transition-colors border border-white/5"
+      },
+      "Resetar"
+    ), /* @__PURE__ */ import_react3.default.createElement(
+      "button",
+      {
+        onClick: () => {
+          onActivateReshapeLens({
+            type: reshapeLayoutType,
+            columns: reshapeColumnCount,
+            centerNodeId: reshapeCenterNodeId
+          });
+          setIsReshapeLensMenuOpen(false);
+          onToggle(false);
+        },
+        disabled: reshapeLayoutType === "Star" && !reshapeCenterNodeId,
+        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 disabled:opacity-50 disabled:cursor-not-allowed"
+      },
+      "Aplicar Lente"
     )))), /* @__PURE__ */ import_react3.default.createElement(
       "button",
       {
@@ -15132,6 +15207,127 @@ function XViewScene({
     },
     []
   );
+  const handleActivateReshapeLens = (0, import_react31.useCallback)(({ type, columns, centerNodeId }) => {
+    const { nodeObjects, 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 nodeCount = 0;
+    activeNodeIds.forEach((id) => {
+      const mesh = nodeObjects[id];
+      if (mesh && 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 && mesh.userData && mesh.userData.labelObject) {
+        mesh.userData.labelObject.visible = true;
+      }
+    });
+    if (type === "Column") {
+      const colSpacing = 80;
+      const rowSpacing = 80;
+      const numCols = columns || 4;
+      activeNodeIds.forEach((id, index) => {
+        const mesh = nodeObjects[id];
+        const col = index % numCols;
+        const row = Math.floor(index / numCols);
+        const targetX = (col - (numCols - 1) / 2) * colSpacing;
+        const targetY = -(row * rowSpacing) + 50;
+        const posTween = new import_tween2.Tween(mesh.position).to({ x: targetX, y: targetY, z: 0 }, 1500).easing(import_tween2.Easing.Cubic.InOut);
+        tweenGroup.add(posTween);
+        posTween.start();
+        if (mesh.userData.labelObject) {
+          const labelTarget = new THREE3.Vector3(targetX, targetY, 0).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 += targetX;
+        sumY += targetY;
+        nodeCount++;
+      });
+    } else if (type === "Circle") {
+      const total = activeNodeIds.length;
+      const radius = Math.max(80, total * 8);
+      activeNodeIds.forEach((id, index) => {
+        const mesh = nodeObjects[id];
+        const angle = index / total * Math.PI * 2;
+        const targetX = Math.cos(angle) * radius;
+        const targetY = Math.sin(angle) * radius;
+        const posTween = new import_tween2.Tween(mesh.position).to({ x: targetX, y: targetY, z: 0 }, 1500).easing(import_tween2.Easing.Cubic.InOut);
+        tweenGroup.add(posTween);
+        posTween.start();
+        if (mesh.userData.labelObject) {
+          const labelTarget = new THREE3.Vector3(targetX, targetY, 0).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 += targetX;
+        sumY += targetY;
+        nodeCount++;
+      });
+    } else if (type === "Star") {
+      const centerMesh = centerNodeId ? nodeObjects[String(centerNodeId)] : null;
+      const orbitingNodeIds = activeNodeIds.filter((id) => id !== String(centerNodeId));
+      const totalOrbiting = orbitingNodeIds.length;
+      const radius = Math.max(80, totalOrbiting * 10);
+      if (centerMesh) {
+        const posTween = new import_tween2.Tween(centerMesh.position).to({ x: 0, y: 0, z: 0 }, 1500).easing(import_tween2.Easing.Cubic.InOut);
+        tweenGroup.add(posTween);
+        posTween.start();
+        if (centerMesh.userData.labelObject) {
+          const labelTarget = new THREE3.Vector3(0, 0, 0).add(centerMesh.userData.labelOffset || new THREE3.Vector3(0, 3.8, 0));
+          const lblTween = new import_tween2.Tween(centerMesh.userData.labelObject.position).to(labelTarget, 1500).easing(import_tween2.Easing.Cubic.InOut);
+          tweenGroup.add(lblTween);
+          lblTween.start();
+        }
+        sumX += 0;
+        sumY += 0;
+        nodeCount++;
+      }
+      orbitingNodeIds.forEach((id, index) => {
+        const mesh = nodeObjects[id];
+        const angle = totalOrbiting > 0 ? index / totalOrbiting * Math.PI * 2 : 0;
+        const targetX = Math.cos(angle) * radius;
+        const targetY = Math.sin(angle) * radius;
+        const posTween = new import_tween2.Tween(mesh.position).to({ x: targetX, y: targetY, z: 0 }, 1500).easing(import_tween2.Easing.Cubic.InOut);
+        tweenGroup.add(posTween);
+        posTween.start();
+        if (mesh.userData.labelObject) {
+          const labelTarget = new THREE3.Vector3(targetX, targetY, 0).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 += targetX;
+        sumY += targetY;
+        nodeCount++;
+      });
+    }
+    if (nodeCount > 0) {
+      const centerX = sumX / nodeCount;
+      const centerY = sumY / nodeCount;
+      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();
+      let zoomZ = 140;
+      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;
+      }
+      const camTween = new import_tween2.Tween(camera.position).to({ x: targetFocus.x, y: targetFocus.y, z: zoomZ }, 1500).easing(import_tween2.Easing.Cubic.InOut);
+      tweenGroup.add(camTween);
+      camTween.start();
+    }
+  }, []);
   const handleActivateQuestLens = (0, import_react31.useCallback)(({ assigneeId, status: status2, milestoneId }) => {
     var _a2;
     const { nodeObjects, tweenGroup, graphGroup } = stateRef.current;
@@ -16023,31 +16219,36 @@ function XViewScene({
       (_b2 = stateRef.current.tweenGroup) == null ? void 0 : _b2.update(time);
       const { keysPressed, controls: sceneControls, camera: sceneCamera } = stateRef.current;
       if (sceneControls && keysPressed) {
-        const panSpeed = 0.5;
+        const panSpeed = 1.5;
         const rotateSpeed = 0.02;
         const zoomInFactor = 0.98;
         const zoomOutFactor = 1.02;
         const isShift = !!keysPressed["shiftKey"];
         const isCtrl = !!keysPressed["ctrlKey"];
-        if (isCtrl) {
+        const dirX = (keysPressed["ArrowRight"] ? 1 : 0) - (keysPressed["ArrowLeft"] ? 1 : 0);
+        const dirY = (keysPressed["ArrowUp"] ? 1 : 0) - (keysPressed["ArrowDown"] ? 1 : 0);
+        if (isCtrl && (dirX !== 0 || dirY !== 0)) {
           const offset = sceneCamera.position.clone().sub(sceneControls.target);
           const spherical = new THREE3.Spherical().setFromVector3(offset);
-          if (keysPressed["ArrowLeft"]) spherical.theta += rotateSpeed;
-          if (keysPressed["ArrowRight"]) spherical.theta -= rotateSpeed;
-          if (keysPressed["ArrowUp"]) spherical.phi -= rotateSpeed;
-          if (keysPressed["ArrowDown"]) spherical.phi += rotateSpeed;
+          spherical.theta += dirX * rotateSpeed;
+          spherical.phi -= dirY * rotateSpeed;
           spherical.makeSafe();
           offset.setFromSpherical(spherical);
           sceneCamera.position.copy(sceneControls.target).add(offset);
-        } else if (isShift) {
-          if (keysPressed["ArrowUp"]) sceneControls.dollyIn(zoomInFactor);
-          if (keysPressed["ArrowDown"]) sceneControls.dollyOut(zoomOutFactor);
-        } else {
-          const panStep = 10;
-          if (keysPressed["ArrowLeft"]) sceneControls.pan(panStep, 0);
-          if (keysPressed["ArrowRight"]) sceneControls.pan(-panStep, 0);
-          if (keysPressed["ArrowUp"]) sceneControls.pan(0, panStep);
-          if (keysPressed["ArrowDown"]) sceneControls.pan(0, -panStep);
+        } else if (isShift && dirY !== 0) {
+          const factor = keysPressed["ArrowUp"] ? zoomInFactor : zoomOutFactor;
+          const offset = sceneCamera.position.clone().sub(sceneControls.target);
+          offset.multiplyScalar(factor);
+          sceneCamera.position.copy(sceneControls.target).add(offset);
+        } else if (!isCtrl && !isShift && (dirX !== 0 || dirY !== 0)) {
+          const distance = sceneCamera.position.distanceTo(sceneControls.target);
+          const currentPanSpeed = panSpeed * (distance / 100);
+          const vecX = new THREE3.Vector3().setFromMatrixColumn(sceneCamera.matrix, 0);
+          const vecY = new THREE3.Vector3().setFromMatrixColumn(sceneCamera.matrix, 1);
+          vecX.multiplyScalar(dirX * currentPanSpeed);
+          vecY.multiplyScalar(dirY * currentPanSpeed);
+          sceneCamera.position.add(vecX).add(vecY);
+          sceneControls.target.add(vecX).add(vecY);
         }
       }
       stateRef.current.controls.update();
@@ -18698,6 +18899,7 @@ function XViewScene({
         importSuccessMessage,
         onActivateTimeline: handleActivateTimeline,
         onActivateQuestLens: handleActivateQuestLens,
+        onActivateReshapeLens: handleActivateReshapeLens,
         onOpenBoards: handleOpenBoards,
         viewType: viewParams == null ? void 0 : viewParams.type,
         viewName: viewParams == null ? void 0 : viewParams.name,

package/dist/index.mjs

@@ -3857,6 +3857,8 @@ function XViewSidebar({
   },
   milestones = [],
   onOpenMilestoneManager = () => {
+  },
+  onActivateReshapeLens = () => {
   }
 }) {
   const [query, setQuery] = useState3("");
@@ -3871,6 +3873,10 @@ function XViewSidebar({
   const [questFilterStatus, setQuestFilterStatus] = useState3("");
   const [isQuestLensMenuOpen, setIsQuestLensMenuOpen] = useState3(false);
   const [questFilterMilestone, setQuestFilterMilestone] = useState3("");
+  const [isReshapeLensMenuOpen, setIsReshapeLensMenuOpen] = useState3(false);
+  const [reshapeLayoutType, setReshapeLayoutType] = useState3("Star");
+  const [reshapeColumnCount, setReshapeColumnCount] = useState3(4);
+  const [reshapeCenterNodeId, setReshapeCenterNodeId] = useState3("");
   const [isTypeDropdownOpen, setIsTypeDropdownOpen] = useState3(false);
   const [highlightedTypeIndex, setHighlightedTypeIndex] = useState3(-1);
   const containerRef = useRef2(null);
@@ -3878,6 +3884,7 @@ function XViewSidebar({
   const filterMenuRef = useRef2(null);
   const typeDropdownRef = useRef2(null);
   const questLensRef = useRef2(null);
+  const reshapeLensRef = useRef2(null);
   const ability = useMemo2(() => {
     return defineAbilityFor(userRole);
   }, [userRole]);
@@ -3983,16 +3990,19 @@ function XViewSidebar({
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [isFilterMenuOpen, isTypeDropdownOpen]);
   useEffect2(() => {
-    const handleClickOutsideQuest = (event) => {
+    const handleClickOutsideQuestAndReshape = (event) => {
       if (questLensRef.current && !questLensRef.current.contains(event.target)) {
         setIsQuestLensMenuOpen(false);
       }
+      if (reshapeLensRef.current && !reshapeLensRef.current.contains(event.target)) {
+        setIsReshapeLensMenuOpen(false);
+      }
     };
-    if (isQuestLensMenuOpen) {
-      document.addEventListener("mousedown", handleClickOutsideQuest);
+    if (isQuestLensMenuOpen || isReshapeLensMenuOpen) {
+      document.addEventListener("mousedown", handleClickOutsideQuestAndReshape);
     }
-    return () => document.removeEventListener("mousedown", handleClickOutsideQuest);
-  }, [isQuestLensMenuOpen]);
+    return () => document.removeEventListener("mousedown", handleClickOutsideQuestAndReshape);
+  }, [isQuestLensMenuOpen, isReshapeLensMenuOpen]);
   useEffect2(() => {
     if (!query) setSelectedNodeId(null);
   }, [query]);
@@ -4332,6 +4342,71 @@ function XViewSidebar({
         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"
       },
       "Aplicar Lente"
+    )))), /* @__PURE__ */ React2.createElement("div", { className: "relative", ref: reshapeLensRef }, /* @__PURE__ */ React2.createElement(
+      "button",
+      {
+        onClick: () => setIsReshapeLensMenuOpen(!isReshapeLensMenuOpen),
+        className: `${buttonBaseClass} ${isReshapeLensMenuOpen ? "bg-indigo-500/30 border-indigo-400" : ""}`,
+        title: "Abrir op\xE7\xF5es de Reshape"
+      },
+      /* @__PURE__ */ React2.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React2.createElement("polygon", { points: "12 2 2 7 12 12 22 7 12 2" }), /* @__PURE__ */ React2.createElement("polyline", { points: "2 17 12 22 22 17" }), /* @__PURE__ */ React2.createElement("polyline", { points: "2 12 12 17 22 12" })),
+      "Reshape Lens"
+    ), isReshapeLensMenuOpen && /* @__PURE__ */ React2.createElement("div", { className: "absolute left-0 bottom-full mb-2 w-full p-4 rounded-xl bg-slate-900 border border-white/10 shadow-2xl z-50 flex flex-col gap-4 animate-in fade-in slide-in-from-bottom-2 duration-200" }, /* @__PURE__ */ React2.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React2.createElement("label", { className: "text-[10px] uppercase text-slate-400 font-bold tracking-widest" }, "Layout Type"), /* @__PURE__ */ React2.createElement(
+      "select",
+      {
+        value: reshapeLayoutType,
+        onChange: (e) => setReshapeLayoutType(e.target.value),
+        className: "w-full bg-slate-800 p-2 text-xs rounded border border-white/10 focus:outline-none focus:border-indigo-500/50 text-white appearance-none cursor-pointer"
+      },
+      /* @__PURE__ */ React2.createElement("option", { value: "Star" }, "Star"),
+      /* @__PURE__ */ React2.createElement("option", { value: "Circle" }, "Circle"),
+      /* @__PURE__ */ React2.createElement("option", { value: "Column" }, "Column")
+    )), reshapeLayoutType === "Column" && /* @__PURE__ */ React2.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React2.createElement("label", { className: "text-[10px] uppercase text-slate-400 font-bold tracking-widest" }, "Colunas"), /* @__PURE__ */ React2.createElement(
+      "input",
+      {
+        type: "number",
+        min: "1",
+        max: "12",
+        value: reshapeColumnCount,
+        onChange: (e) => setReshapeColumnCount(parseInt(e.target.value) || 4),
+        className: "w-full bg-slate-800 p-2 text-xs rounded border border-white/10 focus:outline-none focus:border-indigo-500/50 text-white"
+      }
+    )), reshapeLayoutType === "Star" && /* @__PURE__ */ React2.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React2.createElement("label", { className: "text-[10px] uppercase text-slate-400 font-bold tracking-widest" }, "N\xF3 Central"), /* @__PURE__ */ React2.createElement(
+      "select",
+      {
+        value: reshapeCenterNodeId,
+        onChange: (e) => setReshapeCenterNodeId(e.target.value),
+        className: "w-full bg-slate-800 p-2 text-xs rounded border border-white/10 focus:outline-none focus:border-indigo-500/50 text-white appearance-none cursor-pointer"
+      },
+      /* @__PURE__ */ React2.createElement("option", { value: "" }, "Selecione..."),
+      (Array.isArray(dbNodes) ? dbNodes.filter((n) => isNodeInView(n.id)) : []).map((n) => /* @__PURE__ */ React2.createElement("option", { key: n.id, value: n.id }, n.name))
+    )), /* @__PURE__ */ React2.createElement("div", { className: "flex gap-2 pt-1" }, /* @__PURE__ */ React2.createElement(
+      "button",
+      {
+        onClick: () => {
+          setReshapeLayoutType("Star");
+          setReshapeColumnCount(4);
+          setReshapeCenterNodeId("");
+        },
+        className: "flex-1 py-2 bg-white/5 hover:bg-white/10 text-slate-300 text-[11px] font-medium rounded-lg transition-colors border border-white/5"
+      },
+      "Resetar"
+    ), /* @__PURE__ */ React2.createElement(
+      "button",
+      {
+        onClick: () => {
+          onActivateReshapeLens({
+            type: reshapeLayoutType,
+            columns: reshapeColumnCount,
+            centerNodeId: reshapeCenterNodeId
+          });
+          setIsReshapeLensMenuOpen(false);
+          onToggle(false);
+        },
+        disabled: reshapeLayoutType === "Star" && !reshapeCenterNodeId,
+        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 disabled:opacity-50 disabled:cursor-not-allowed"
+      },
+      "Aplicar Lente"
     )))), /* @__PURE__ */ React2.createElement(
       "button",
       {
@@ -15188,6 +15263,127 @@ function XViewScene({
     },
     []
   );
+  const handleActivateReshapeLens = useCallback6(({ type, columns, centerNodeId }) => {
+    const { nodeObjects, 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 nodeCount = 0;
+    activeNodeIds.forEach((id) => {
+      const mesh = nodeObjects[id];
+      if (mesh && mesh.material) {
+        const opacityTween = new Tween2(mesh.material).to({ opacity: 1 }, 1200).easing(Easing2.Cubic.Out);
+        tweenGroup.add(opacityTween);
+        opacityTween.start();
+      }
+      if (mesh && mesh.userData && mesh.userData.labelObject) {
+        mesh.userData.labelObject.visible = true;
+      }
+    });
+    if (type === "Column") {
+      const colSpacing = 80;
+      const rowSpacing = 80;
+      const numCols = columns || 4;
+      activeNodeIds.forEach((id, index) => {
+        const mesh = nodeObjects[id];
+        const col = index % numCols;
+        const row = Math.floor(index / numCols);
+        const targetX = (col - (numCols - 1) / 2) * colSpacing;
+        const targetY = -(row * rowSpacing) + 50;
+        const posTween = new Tween2(mesh.position).to({ x: targetX, y: targetY, z: 0 }, 1500).easing(Easing2.Cubic.InOut);
+        tweenGroup.add(posTween);
+        posTween.start();
+        if (mesh.userData.labelObject) {
+          const labelTarget = new THREE3.Vector3(targetX, targetY, 0).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 += targetX;
+        sumY += targetY;
+        nodeCount++;
+      });
+    } else if (type === "Circle") {
+      const total = activeNodeIds.length;
+      const radius = Math.max(80, total * 8);
+      activeNodeIds.forEach((id, index) => {
+        const mesh = nodeObjects[id];
+        const angle = index / total * Math.PI * 2;
+        const targetX = Math.cos(angle) * radius;
+        const targetY = Math.sin(angle) * radius;
+        const posTween = new Tween2(mesh.position).to({ x: targetX, y: targetY, z: 0 }, 1500).easing(Easing2.Cubic.InOut);
+        tweenGroup.add(posTween);
+        posTween.start();
+        if (mesh.userData.labelObject) {
+          const labelTarget = new THREE3.Vector3(targetX, targetY, 0).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 += targetX;
+        sumY += targetY;
+        nodeCount++;
+      });
+    } else if (type === "Star") {
+      const centerMesh = centerNodeId ? nodeObjects[String(centerNodeId)] : null;
+      const orbitingNodeIds = activeNodeIds.filter((id) => id !== String(centerNodeId));
+      const totalOrbiting = orbitingNodeIds.length;
+      const radius = Math.max(80, totalOrbiting * 10);
+      if (centerMesh) {
+        const posTween = new Tween2(centerMesh.position).to({ x: 0, y: 0, z: 0 }, 1500).easing(Easing2.Cubic.InOut);
+        tweenGroup.add(posTween);
+        posTween.start();
+        if (centerMesh.userData.labelObject) {
+          const labelTarget = new THREE3.Vector3(0, 0, 0).add(centerMesh.userData.labelOffset || new THREE3.Vector3(0, 3.8, 0));
+          const lblTween = new Tween2(centerMesh.userData.labelObject.position).to(labelTarget, 1500).easing(Easing2.Cubic.InOut);
+          tweenGroup.add(lblTween);
+          lblTween.start();
+        }
+        sumX += 0;
+        sumY += 0;
+        nodeCount++;
+      }
+      orbitingNodeIds.forEach((id, index) => {
+        const mesh = nodeObjects[id];
+        const angle = totalOrbiting > 0 ? index / totalOrbiting * Math.PI * 2 : 0;
+        const targetX = Math.cos(angle) * radius;
+        const targetY = Math.sin(angle) * radius;
+        const posTween = new Tween2(mesh.position).to({ x: targetX, y: targetY, z: 0 }, 1500).easing(Easing2.Cubic.InOut);
+        tweenGroup.add(posTween);
+        posTween.start();
+        if (mesh.userData.labelObject) {
+          const labelTarget = new THREE3.Vector3(targetX, targetY, 0).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 += targetX;
+        sumY += targetY;
+        nodeCount++;
+      });
+    }
+    if (nodeCount > 0) {
+      const centerX = sumX / nodeCount;
+      const centerY = sumY / nodeCount;
+      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();
+      let zoomZ = 140;
+      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;
+      }
+      const camTween = new Tween2(camera.position).to({ x: targetFocus.x, y: targetFocus.y, z: zoomZ }, 1500).easing(Easing2.Cubic.InOut);
+      tweenGroup.add(camTween);
+      camTween.start();
+    }
+  }, []);
   const handleActivateQuestLens = useCallback6(({ assigneeId, status: status2, milestoneId }) => {
     var _a2;
     const { nodeObjects, tweenGroup, graphGroup } = stateRef.current;
@@ -16079,31 +16275,36 @@ function XViewScene({
       (_b2 = stateRef.current.tweenGroup) == null ? void 0 : _b2.update(time);
       const { keysPressed, controls: sceneControls, camera: sceneCamera } = stateRef.current;
       if (sceneControls && keysPressed) {
-        const panSpeed = 0.5;
+        const panSpeed = 1.5;
         const rotateSpeed = 0.02;
         const zoomInFactor = 0.98;
         const zoomOutFactor = 1.02;
         const isShift = !!keysPressed["shiftKey"];
         const isCtrl = !!keysPressed["ctrlKey"];
-        if (isCtrl) {
+        const dirX = (keysPressed["ArrowRight"] ? 1 : 0) - (keysPressed["ArrowLeft"] ? 1 : 0);
+        const dirY = (keysPressed["ArrowUp"] ? 1 : 0) - (keysPressed["ArrowDown"] ? 1 : 0);
+        if (isCtrl && (dirX !== 0 || dirY !== 0)) {
           const offset = sceneCamera.position.clone().sub(sceneControls.target);
           const spherical = new THREE3.Spherical().setFromVector3(offset);
-          if (keysPressed["ArrowLeft"]) spherical.theta += rotateSpeed;
-          if (keysPressed["ArrowRight"]) spherical.theta -= rotateSpeed;
-          if (keysPressed["ArrowUp"]) spherical.phi -= rotateSpeed;
-          if (keysPressed["ArrowDown"]) spherical.phi += rotateSpeed;
+          spherical.theta += dirX * rotateSpeed;
+          spherical.phi -= dirY * rotateSpeed;
           spherical.makeSafe();
           offset.setFromSpherical(spherical);
           sceneCamera.position.copy(sceneControls.target).add(offset);
-        } else if (isShift) {
-          if (keysPressed["ArrowUp"]) sceneControls.dollyIn(zoomInFactor);
-          if (keysPressed["ArrowDown"]) sceneControls.dollyOut(zoomOutFactor);
-        } else {
-          const panStep = 10;
-          if (keysPressed["ArrowLeft"]) sceneControls.pan(panStep, 0);
-          if (keysPressed["ArrowRight"]) sceneControls.pan(-panStep, 0);
-          if (keysPressed["ArrowUp"]) sceneControls.pan(0, panStep);
-          if (keysPressed["ArrowDown"]) sceneControls.pan(0, -panStep);
+        } else if (isShift && dirY !== 0) {
+          const factor = keysPressed["ArrowUp"] ? zoomInFactor : zoomOutFactor;
+          const offset = sceneCamera.position.clone().sub(sceneControls.target);
+          offset.multiplyScalar(factor);
+          sceneCamera.position.copy(sceneControls.target).add(offset);
+        } else if (!isCtrl && !isShift && (dirX !== 0 || dirY !== 0)) {
+          const distance = sceneCamera.position.distanceTo(sceneControls.target);
+          const currentPanSpeed = panSpeed * (distance / 100);
+          const vecX = new THREE3.Vector3().setFromMatrixColumn(sceneCamera.matrix, 0);
+          const vecY = new THREE3.Vector3().setFromMatrixColumn(sceneCamera.matrix, 1);
+          vecX.multiplyScalar(dirX * currentPanSpeed);
+          vecY.multiplyScalar(dirY * currentPanSpeed);
+          sceneCamera.position.add(vecX).add(vecY);
+          sceneControls.target.add(vecX).add(vecY);
         }
       }
       stateRef.current.controls.update();
@@ -18754,6 +18955,7 @@ function XViewScene({
         importSuccessMessage,
         onActivateTimeline: handleActivateTimeline,
         onActivateQuestLens: handleActivateQuestLens,
+        onActivateReshapeLens: handleActivateReshapeLens,
         onOpenBoards: handleOpenBoards,
         viewType: viewParams == null ? void 0 : viewParams.type,
         viewName: viewParams == null ? void 0 : viewParams.name,

package/package.json

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