From 16835c6f46cedc0aa1e388849f7b2549628ec644 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thiago=20L=C3=B6pes?= <iczhswx@gmail.com>
Date: Sat, 28 Mar 2026 17:12:35 -0300
Subject: [PATCH] feat: implement editable wall length slider #191

Key Additions & Changes:

Interactive Length Control: Replaced the static "Length" text with an editable SliderControl component.

Vector Math Implementation: Added handleUpdateLength, a function that recalculates the wall's end position ($P_{end}$) based on the user's input while preserving the wall's original direction.

Real-time Geometry Updates: Integrated the change with useScene and dirtyNodes to ensure the 3D mesh updates instantly in the viewer as the slider moves.

UX Consistency: Used the existing SliderControl and PanelSection patterns to match the Pascal Editor's design system.

Fixes #191
---
 .../src/components/ui/panels/wall-panel.tsx   | 41 +++++++++++++++----
 1 file changed, 34 insertions(+), 7 deletions(-)

diff --git a/packages/editor/src/components/ui/panels/wall-panel.tsx b/packages/editor/src/components/ui/panels/wall-panel.tsx
index aa210617..26c121e2 100644
--- a/packages/editor/src/components/ui/panels/wall-panel.tsx
+++ b/packages/editor/src/components/ui/panels/wall-panel.tsx
@@ -25,6 +25,29 @@ export function WallPanel() {
     [selectedId, updateNode],
   )
 
+  // Função mágica para a Issue #191: Atualiza o comprimento via cálculo vetorial
+  const handleUpdateLength = useCallback((newLength: number) => {
+    if (!node || newLength <= 0) return
+
+    const dx = node.end[0] - node.start[0]
+    const dz = node.end[1] - node.start[1]
+    const currentLength = Math.sqrt(dx * dx + dz * dz)
+
+    if (currentLength === 0) return
+
+    // Calcula a direção (vetor unitário)
+    const dirX = dx / currentLength
+    const dirZ = dz / currentLength
+
+    // Define o novo ponto final baseado no novo comprimento
+    const newEnd: [number, number] = [
+      node.start[0] + dirX * newLength,
+      node.start[1] + dirZ * newLength
+    ]
+
+    handleUpdate({ end: newEnd })
+  }, [node, handleUpdate])
+
   const handleClose = useCallback(() => {
     setSelection({ selectedIds: [] })
   }, [setSelection])
@@ -46,6 +69,17 @@ export function WallPanel() {
       width={280}
     >
       <PanelSection title="Dimensions">
+        {/* Adicionando o controle de Length solicitado na Issue #191 */}
+        <SliderControl
+          label="Length"
+          max={20}
+          min={0.1}
+          onChange={handleUpdateLength}
+          precision={2}
+          step={0.01}
+          unit="m"
+          value={length}
+        />
         <SliderControl
           label="Height"
           max={6}
@@ -67,13 +101,6 @@ export function WallPanel() {
           value={Math.round(thickness * 1000) / 1000}
         />
       </PanelSection>
-
-      <PanelSection title="Info">
-        <div className="flex items-center justify-between px-2 py-1 text-muted-foreground text-sm">
-          <span>Length</span>
-          <span className="font-mono text-white">{length.toFixed(2)} m</span>
-        </div>
-      </PanelSection>
     </PanelWrapper>
   )
 }