;
+ onToggleFolder: (path: string) => void;
+ onDelete: (node: FileNode) => void;
+ isRoot?: boolean;
+ searchQuery?: string;
+}> = ({
+ node,
+ level,
+ onFileSelect,
+ selectedFile,
+ onContextMenu,
+ expandedFolders,
+ onToggleFolder,
+ onDelete,
+ isRoot,
+ searchQuery,
+}) => {
+ const isFolder = node.type === "folder";
+ const isSelected = selectedFile === node.path && !isFolder;
+ const isExpanded = expandedFolders.has(node.path || node.name);
+ const [hovered, setHovered] = useState(false);
+
+ const handleClick = () => {
+ if (isFolder) {
+ onToggleFolder(node.path || node.name);
+ } else {
+ onFileSelect(node);
+ }
+ };
+
+ const handleDelete = (e: React.MouseEvent) => {
+ e.stopPropagation();
+ onDelete(node);
+ };
+
+ const highlightText = (text: string, query: string) => {
+ if (!query) return text;
+ const idx = text.toLowerCase().indexOf(query.toLowerCase());
+ if (idx === -1) return text;
+ return (
+ <>
+ {text.slice(0, idx)}
+
+ {text.slice(idx, idx + query.length)}
+
+ {text.slice(idx + query.length)}
+
+ );
+ };
+
+ return (
+
+
onContextMenu(e, node)}
+ onMouseEnter={() => setHovered(true)}
+ onMouseLeave={() => setHovered(false)}
+ style={{
+ paddingLeft: isRoot ? "8px" : `${level * 16 + 8}px`,
+ paddingTop: "4px",
+ paddingBottom: "4px",
+ cursor: "pointer",
+ display: "flex",
+ alignItems: "center",
+ gap: "6px",
+ backgroundColor: isSelected ? "#094771" : "transparent",
+ color: isSelected ? "#fff" : "#cccccc",
+ fontSize: "13px",
+ transition: "background-color 0.1s",
+ userSelect: "none",
+ minHeight: "28px",
+ }}
+ >
+
+ {isFolder ? (
+ isExpanded ? (
+
+ ) : (
+
+ )
+ ) : (
+
+ )}
+
+
+ {searchQuery ? highlightText(node.name, searchQuery) : node.name}
+
+ {hovered && !isRoot && (
+
+ )}
+
+ {isFolder && isExpanded && node.children && (
+
+ {node.children.map((child, idx) => (
+
+ ))}
+
+ )}
+
+
+
+
+ {openFiles.map((file) => (
+
onSelectFile(file)}
+ onContextMenu={(e) => handleContextMenu(e, file)}
+ style={{
+ display: "flex",
+ alignItems: "center",
+ padding: "8px 16px",
+ backgroundColor:
+ activeFile?.path === file.path ? "#1e1e1e" : "#2d2d30",
+ color: activeFile?.path === file.path ? "#fff" : "#cccccc",
+ borderRight: "1px solid #3e3e42",
+ cursor: "pointer",
+ fontSize: "13px",
+ gap: "10px",
+ whiteSpace: "nowrap",
+ transition: "all 0.1s",
+ borderTop:
+ activeFile?.path === file.path
+ ? "2px solid #0e639c"
+ : "2px solid transparent",
+ }}
+ >
+
+ {file.name}
+
+
+ ))}
+
+
{
+ onCloseOthers(showContextMenu.file);
+ setShowContextMenu(null);
+ }}
+ style={{
+ padding: "8px 16px",
+ cursor: "pointer",
+ color: "#cccccc",
+ fontSize: "13px",
+ }}
+ onMouseEnter={(e) => {
+ e.currentTarget.style.backgroundColor = "#2a2d2e";
+ }}
+ onMouseLeave={(e) => {
+ e.currentTarget.style.backgroundColor = "transparent";
+ }}
+ >
+ Close Others
+
+
{
+ onCloseAll();
+ setShowContextMenu(null);
+ }}
+ style={{
+ padding: "8px 16px",
+ cursor: "pointer",
+ color: "#cccccc",
+ fontSize: "13px",
+ }}
+ onMouseEnter={(e) => {
+ e.currentTarget.style.backgroundColor = "#2a2d2e";
+ }}
+ onMouseLeave={(e) => {
+ e.currentTarget.style.backgroundColor = "transparent";
+ }}
+ >
+ Close All
+
+
+
+
+ EXPLORER
+
+
+
+
+
+
+
+
+
+
+
+ {files.name}
+
+
+
+ {showSearch && (
+
+
+
+ onSearchChange(e.target.value)}
+ placeholder="Search..."
+ autoFocus
+ style={{
+ flex: 1,
+ padding: "5px 6px",
+ backgroundColor: "transparent",
+ border: "none",
+ color: "#cccccc",
+ fontSize: "12px",
+ outline: "none",
+ }}
+ />
+ {searchQuery && (
+
+ )}
+
+
+ )}
+
+
+ {filteredFiles ? (
+
+ ) : (
+
+ No results found
+
+ )}
+
+
+ {contextMenu && (
+
setContextMenu(null)}
+ onNewFile={() => {
+ setDialog({ type: "newFile", node: contextMenu.node });
+ setContextMenu(null);
+ }}
+ onNewFolder={() => {
+ setDialog({ type: "newFolder", node: contextMenu.node });
+ setContextMenu(null);
+ }}
+ onRename={() => {
+ setDialog({ type: "rename", node: contextMenu.node });
+ setContextMenu(null);
+ }}
+ onDelete={() => {
+ if (contextMenu.node) {
+ handleDelete(contextMenu.node);
+ }
+ setContextMenu(null);
+ }}
+ />
+ )}
+
+ {dialog && (
+ setDialog(null)}
+ />
+ )}
+
+
+ {filePath ? (
+
onChange(value || "")}
+ theme="vs-dark"
+ options={{
+ minimap: { enabled: false },
+ fontSize: 14,
+ fontFamily: "'Cascadia Code', 'Fira Code', monospace",
+ tabSize: 4,
+ wordWrap: "on",
+ lineNumbers: "on",
+ automaticLayout: true,
+ renderWhitespace: "selection",
+ smoothScrolling: true,
+ }}
+ />
+ ) : (
+
+
+
+
+
+
+ Welcome to Web VS Code
+
+
+ Right-click on a folder to create files
+
+
+ Or right-click anywhere in the explorer
+
+
+
+
+
+
+
+
+
+
+
+ No project open
+
+
+ Create a new project to get started
+
+
+
+
+
+
+
+ main
+
+
+ 0 0
+
+
+
+ {activeFile && (
+
+ Ln 1, Col 1 | Spaces: 4 | UTF-8 |{" "}
+ {activeFile.path?.split(".").pop()?.toUpperCase() || "TXT"}
+
+ )}
+ Web VS Code
+
+
+
+
+
+ {activeFile ? `${activeFile.name} - ` : ""}
+ {files.name}
+
+
+
+
+
+ setExpandedFolders((prev) => new Set([...prev, ...paths]))
+ }
+ />
+
+
+
+
+
+
+
+
+
+ main
+
+
+ 0 0
+
+
+
+ {activeFile && (
+
+ Ln 1, Col 1 | Spaces: 4 | UTF-8 |{" "}
+ {activeFile.path?.split(".").pop()?.toUpperCase() || "TXT"}
+
+ )}
+ Web VS Code
+
+
+
+
+
+
Нет данных для отображения
+
+
+
+
+
+
{
+ return `${node.name}\n${node.description || ""}\n${node.type === "service" ? "Сервис" : "Агент"}\nПКМ для удаления`;
+ }}
+ linkLabel={(link: GraphLink) => {
+ // ВОЗВРАЩАЕМ СТРОКУ
+ const sourceName =
+ data.nodes.find((n) => n.id === link.source)?.name || link.source;
+ const targetName =
+ data.nodes.find((n) => n.id === link.target)?.name || link.target;
+ return `Связь: ${sourceName} → ${targetName}\nПКМ для удаления`;
+ }}
+ linkColor={(link: any) => {
+ return highlightLinks.has(link) ? "#fbbf24" : "#4b5563";
+ }}
+ linkWidth={(link: any) => (highlightLinks.has(link) ? 3 : 1.5)}
+ linkDirectionalParticles={0}
+ onNodeClick={handleNodeClick}
+ onNodeRightClick={(node, event) =>
+ openContextMenu(event as any, node, undefined)
+ }
+ onLinkRightClick={(link, event) =>
+ openContextMenu(event as any, undefined, link)
+ }
+ onNodeHover={handleNodeHover}
+ cooldownTicks={50}
+ cooldownTime={2000}
+ d3AlphaDecay={0.03}
+ d3VelocityDecay={0.4}
+ warmupTicks={50}
+ onEngineStop={() => {
+ if (fgRef.current) {
+ setTimeout(() => {
+ if (fgRef.current) {
+ fgRef.current.zoomToFit(400);
+ }
+ }, 100);
+ }
+ }}
+ />
+
+ {contextMenu && (
+ e.stopPropagation()}
+ >
+ {contextMenu.node && (
+ <>
+
+ {contextMenu.node.name}
+
+
+
+
+ )}
+ {contextMenu.link && (
+ <>
+
+ Связь:{" "}
+ {typeof contextMenu.link.source === "string"
+ ? contextMenu.link.source
+ : (contextMenu.link.source as any).name ||
+ (contextMenu.link.source as any).id}{" "}
+ →{" "}
+ {typeof contextMenu.link.target === "string"
+ ? contextMenu.link.target
+ : (contextMenu.link.target as any).name ||
+ (contextMenu.link.target as any).id}
+
+
+
+ )}
+
+ Режим создания связей: кликните на два узла для
+ соединения
+ {selectedNode && (
+ Выбран: {selectedNode.name}
+ )}
+
+ )}
+
+
+
+
+
+
+
+ Сервисы: {data.nodes.filter((n) => n.type === "service").length}
+
+
+
+
+
+ Агенты: {data.nodes.filter((n) => n.type === "agent").length}
+
+
+
+
+
Связи: {data.links.length}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+