40 lines
1.1 KiB
TypeScript
40 lines
1.1 KiB
TypeScript
import { WallNode, useScene } from "@pascal-app/core";
|
|
import { Square } from "lucide-react";
|
|
import { useState } from "react";
|
|
import { TreeNode, TreeNodeWrapper } from "./tree-node";
|
|
|
|
interface WallTreeNodeProps {
|
|
node: WallNode;
|
|
depth: number;
|
|
}
|
|
|
|
export function WallTreeNode({ node, depth }: WallTreeNodeProps) {
|
|
const [expanded, setExpanded] = useState(false);
|
|
|
|
const handleClick = () => {
|
|
// Handle wall selection
|
|
useScene.getState().markDirty(node.id);
|
|
};
|
|
|
|
const wallLength = Math.sqrt(
|
|
Math.pow(node.end[0] - node.start[0], 2) +
|
|
Math.pow(node.end[1] - node.start[1], 2),
|
|
).toFixed(1);
|
|
|
|
return (
|
|
<TreeNodeWrapper
|
|
icon={<Square className="w-3.5 h-3.5" />}
|
|
label={node.name || `Wall (${wallLength}m/${node.height || 2.5}m)`}
|
|
depth={depth}
|
|
hasChildren={node.children.length > 0}
|
|
expanded={expanded}
|
|
onToggle={() => setExpanded(!expanded)}
|
|
onClick={handleClick}
|
|
>
|
|
{node.children.map((childId) => (
|
|
<TreeNode key={childId} nodeId={childId} depth={depth + 1} />
|
|
))}
|
|
</TreeNodeWrapper>
|
|
);
|
|
}
|