nikita
@@ -1,4 +1,10 @@
|
||||
import React, { useRef, useEffect, useCallback } from "react";
|
||||
import React, {
|
||||
useRef,
|
||||
useEffect,
|
||||
useCallback,
|
||||
useState,
|
||||
forwardRef,
|
||||
} from "react";
|
||||
import ForceGraph2D from "react-force-graph-2d";
|
||||
import type { GraphData, GraphNode, GraphLink } from "../types";
|
||||
import { useGraphStore } from "../store/useGraphStore";
|
||||
@@ -9,154 +15,175 @@ interface ForceGraphProps {
|
||||
onLinkRightClick: (link: GraphLink, event: MouseEvent) => void;
|
||||
}
|
||||
|
||||
export const ForceGraph: React.FC<ForceGraphProps> = ({
|
||||
data,
|
||||
onNodeRightClick,
|
||||
onLinkRightClick,
|
||||
}) => {
|
||||
const fgRef = useRef<any>(null);
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
export const ForceGraph = forwardRef<any, ForceGraphProps>(
|
||||
({ data, onNodeRightClick, onLinkRightClick }, ref) => {
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const [dimensions, setDimensions] = useState({ width: 480, height: 600 });
|
||||
|
||||
const highlightNodes = useGraphStore((s) => s.highlightNodes);
|
||||
const highlightLinks = useGraphStore((s) => s.highlightLinks);
|
||||
const selectedNode = useGraphStore((s) => s.selectedNode);
|
||||
const isLinkMode = useGraphStore((s) => s.isLinkMode);
|
||||
const highlightNodes = useGraphStore((s) => s.highlightNodes);
|
||||
const highlightLinks = useGraphStore((s) => s.highlightLinks);
|
||||
const selectedNode = useGraphStore((s) => s.selectedNode);
|
||||
const isLinkMode = useGraphStore((s) => s.isLinkMode);
|
||||
|
||||
const handleNodeClick = useCallback((node: GraphNode) => {
|
||||
const store = useGraphStore.getState();
|
||||
if (store.isLinkMode) {
|
||||
if (store.selectedNode === null) {
|
||||
store.setSelectedNode(node);
|
||||
} else if (store.selectedNode.id !== node.id) {
|
||||
store.createLink(store.selectedNode.id, node.id);
|
||||
store.setSelectedNode(null);
|
||||
store.toggleLinkMode();
|
||||
} else {
|
||||
store.setSelectedNode(null);
|
||||
}
|
||||
}
|
||||
}, []);
|
||||
// ResizeObserver для корректного отслеживания размеров
|
||||
useEffect(() => {
|
||||
const container = containerRef.current;
|
||||
if (!container) return;
|
||||
|
||||
const handleNodeHover = (node: GraphNode | null) => {
|
||||
const newHighlightNodes = new Set<string>();
|
||||
const newHighlightLinks = new Set<GraphLink>();
|
||||
const updateDimensions = () => {
|
||||
setDimensions({
|
||||
width: container.clientWidth,
|
||||
height: container.clientHeight,
|
||||
});
|
||||
};
|
||||
|
||||
if (node) {
|
||||
newHighlightNodes.add(node.id);
|
||||
data.links.forEach((link) => {
|
||||
if (link.source === node.id || link.target === node.id) {
|
||||
newHighlightLinks.add(link);
|
||||
newHighlightNodes.add(link.source as string);
|
||||
newHighlightNodes.add(link.target as string);
|
||||
updateDimensions();
|
||||
|
||||
const observer = new ResizeObserver(updateDimensions);
|
||||
observer.observe(container);
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
const handleNodeClick = useCallback((node: GraphNode) => {
|
||||
const store = useGraphStore.getState();
|
||||
if (store.isLinkMode) {
|
||||
if (store.selectedNode === null) {
|
||||
store.setSelectedNode(node);
|
||||
} else if (store.selectedNode.id !== node.id) {
|
||||
store.createLink(store.selectedNode.id, node.id);
|
||||
store.setSelectedNode(null);
|
||||
store.toggleLinkMode();
|
||||
} else {
|
||||
store.setSelectedNode(null);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}, []);
|
||||
|
||||
useGraphStore.getState().setHighlight(newHighlightNodes, newHighlightLinks);
|
||||
};
|
||||
const handleNodeHover = (node: GraphNode | null) => {
|
||||
const newHighlightNodes = new Set<string>();
|
||||
const newHighlightLinks = new Set<GraphLink>();
|
||||
|
||||
const getNodeColor = (node: GraphNode) => {
|
||||
if (highlightNodes.has(node.id)) return "#fbbf24";
|
||||
if (selectedNode?.id === node.id && isLinkMode) return "#f97316";
|
||||
if (node) {
|
||||
newHighlightNodes.add(node.id);
|
||||
data.links.forEach((link) => {
|
||||
if (link.source === node.id || link.target === node.id) {
|
||||
newHighlightLinks.add(link);
|
||||
newHighlightNodes.add(link.source as string);
|
||||
newHighlightNodes.add(link.target as string);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
switch (node.type) {
|
||||
case "service":
|
||||
return "#3b82f6";
|
||||
case "agent":
|
||||
return "#8b5cf6";
|
||||
default:
|
||||
return "#6b7280";
|
||||
}
|
||||
};
|
||||
useGraphStore
|
||||
.getState()
|
||||
.setHighlight(newHighlightNodes, newHighlightLinks);
|
||||
};
|
||||
|
||||
const getNodeSize = (node: GraphNode) => {
|
||||
switch (node.type) {
|
||||
case "service":
|
||||
return 3;
|
||||
case "agent":
|
||||
return 3;
|
||||
default:
|
||||
return 5;
|
||||
}
|
||||
};
|
||||
const getNodeColor = (node: GraphNode) => {
|
||||
if (highlightNodes.has(node.id)) return "#fbbf24";
|
||||
if (selectedNode?.id === node.id && isLinkMode) return "#f97316";
|
||||
|
||||
const renderNode = (
|
||||
node: GraphNode,
|
||||
ctx: CanvasRenderingContext2D,
|
||||
globalScale: number,
|
||||
) => {
|
||||
const size = getNodeSize(node);
|
||||
const color = getNodeColor(node);
|
||||
switch (node.type) {
|
||||
case "service":
|
||||
return "#3b82f6";
|
||||
case "agent":
|
||||
return "#8b5cf6";
|
||||
default:
|
||||
return "#6b7280";
|
||||
}
|
||||
};
|
||||
|
||||
if (!node.x || !node.y) return;
|
||||
const getNodeSize = (node: GraphNode) => {
|
||||
switch (node.type) {
|
||||
case "service":
|
||||
return 3;
|
||||
case "agent":
|
||||
return 3;
|
||||
default:
|
||||
return 5;
|
||||
}
|
||||
};
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.arc(node.x, node.y, size, 0, 2 * Math.PI);
|
||||
ctx.fillStyle = color;
|
||||
ctx.fill();
|
||||
const renderNode = (
|
||||
node: GraphNode,
|
||||
ctx: CanvasRenderingContext2D,
|
||||
globalScale: number,
|
||||
) => {
|
||||
const size = getNodeSize(node);
|
||||
const color = getNodeColor(node);
|
||||
|
||||
ctx.fillStyle = "#ffffff";
|
||||
ctx.font = `${size}px "Segoe UI Emoji", "Apple Color Emoji", sans-serif`;
|
||||
ctx.textAlign = "center";
|
||||
ctx.textBaseline = "middle";
|
||||
if (!node.x || !node.y) return;
|
||||
|
||||
if (node.type === "service") {
|
||||
ctx.fillText("S", node.x, node.y);
|
||||
} else if (node.type === "agent") {
|
||||
ctx.fillText("A", node.x, node.y);
|
||||
}
|
||||
ctx.beginPath();
|
||||
ctx.arc(node.x, node.y, size, 0, 2 * Math.PI);
|
||||
ctx.fillStyle = color;
|
||||
ctx.fill();
|
||||
|
||||
if (globalScale > 0.5) {
|
||||
ctx.fillStyle = "#e5e7eb";
|
||||
ctx.font = `${Math.min(12, 12 / globalScale)}px "Arial", sans-serif`;
|
||||
ctx.fillStyle = "#ffffff";
|
||||
ctx.font = `${size}px "Segoe UI Emoji", "Apple Color Emoji", sans-serif`;
|
||||
ctx.textAlign = "center";
|
||||
ctx.fillText(node.name, node.x, node.y + size + 8);
|
||||
}
|
||||
};
|
||||
ctx.textBaseline = "middle";
|
||||
|
||||
// Fit zoom on engine stop
|
||||
useEffect(() => {
|
||||
if (fgRef.current) {
|
||||
const timer = setTimeout(() => {
|
||||
fgRef.current?.zoomToFit(400);
|
||||
}, 100);
|
||||
return () => clearTimeout(timer);
|
||||
}
|
||||
}, [data]);
|
||||
if (node.type === "service") {
|
||||
ctx.fillText("S", node.x, node.y);
|
||||
} else if (node.type === "agent") {
|
||||
ctx.fillText("A", node.x, node.y);
|
||||
}
|
||||
|
||||
return (
|
||||
<div ref={containerRef} className="w-full h-full relative">
|
||||
<ForceGraph2D
|
||||
ref={fgRef}
|
||||
graphData={data}
|
||||
width={containerRef.current?.clientWidth}
|
||||
height={containerRef.current?.clientHeight || 600}
|
||||
nodeCanvasObject={renderNode}
|
||||
nodeLabel={(node: GraphNode) => {
|
||||
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={onNodeRightClick}
|
||||
onLinkRightClick={onLinkRightClick}
|
||||
onNodeHover={handleNodeHover}
|
||||
cooldownTicks={50}
|
||||
cooldownTime={2000}
|
||||
d3AlphaDecay={0.03}
|
||||
d3VelocityDecay={0.4}
|
||||
warmupTicks={50}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
if (globalScale > 0.5) {
|
||||
ctx.fillStyle = "#e5e7eb";
|
||||
ctx.font = `${Math.min(12, 12 / globalScale)}px "Arial", sans-serif`;
|
||||
ctx.textAlign = "center";
|
||||
ctx.fillText(node.name, node.x, node.y + size + 8);
|
||||
}
|
||||
};
|
||||
|
||||
// Fit zoom on engine stop
|
||||
useEffect(() => {
|
||||
if (ref && typeof ref === "object" && ref.current) {
|
||||
const timer = setTimeout(() => {
|
||||
ref.current?.zoomToFit(400);
|
||||
}, 100);
|
||||
return () => clearTimeout(timer);
|
||||
}
|
||||
}, [data, ref]);
|
||||
|
||||
return (
|
||||
<div ref={containerRef} className="w-full h-full relative">
|
||||
<ForceGraph2D
|
||||
ref={ref}
|
||||
graphData={data}
|
||||
width={dimensions.width}
|
||||
height={dimensions.height}
|
||||
nodeCanvasObject={renderNode}
|
||||
nodeLabel={(node: GraphNode) => {
|
||||
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={onNodeRightClick}
|
||||
onLinkRightClick={onLinkRightClick}
|
||||
onNodeHover={handleNodeHover}
|
||||
cooldownTicks={50}
|
||||
cooldownTime={2000}
|
||||
d3AlphaDecay={0.03}
|
||||
d3VelocityDecay={0.4}
|
||||
warmupTicks={50}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
ForceGraph.displayName = "ForceGraph";
|
||||
|
||||
Reference in New Issue
Block a user