denozord/router-lists-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Improve zoom functionality in GraphView by adjusting zoom extent and enabling broader panning capabilities for enhanced user interaction
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 5m39s
Details

Browse Source
This commit is contained in:
denozord
2025-08-08 16:28:32 +07:00
parent efc561a2a1
commit eaa88e2897
1 changed files with 8 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/GraphView.jsx
+8 -4
View File
@@ -70,9 +70,14 @@ function GraphView({ servers, connections }) {
useEffect(() => { useEffect(() => {
const svg = d3.select(svgRef.current); const svg = d3.select(svgRef.current);
const g = d3.select(gRef.current); const g = d3.select(gRef.current);
const width = svgRef.current?.clientWidth || 900;
const height = svgRef.current?.clientHeight || 600;
zoomRef.current = d3 zoomRef.current = d3
.zoom() .zoom()
.scaleExtent([0.3, 3]) .scaleExtent([0.3, 3])
.extent([[0, 0], [width, height]])
// Разрешаем панораму в широких пределах
.translateExtent([[-10000, -10000], [10000, 10000]])
.on('zoom', (event) => { .on('zoom', (event) => {
g.attr('transform', event.transform); g.attr('transform', event.transform);
}); });
@@ -83,9 +88,8 @@ function GraphView({ servers, connections }) {
const zoomBy = (factor) => { const zoomBy = (factor) => {
if (!zoomRef.current || !svgRef.current) return; if (!zoomRef.current || !svgRef.current) return;
const svg = d3.select(svgRef.current); const svg = d3.select(svgRef.current);
const node = svgRef.current; // Используем встроенную математику d3.zoom с учётом extent
const center = [node.clientWidth / 2, node.clientHeight / 2]; svg.transition().duration(220).call(zoomRef.current.scaleBy, factor);
svg.transition().duration(220).call(zoomRef.current.scaleBy, factor, center);
}; };
const fitToView = () => { const fitToView = () => {
@@ -482,7 +486,7 @@ function GraphView({ servers, connections }) {
</g> </g>
</svg> </svg>
{/* Контролы масштабирования */} {/* Контролы масштабирования */}
<div className="position-absolute" style={{ right: 10, top: 10, zIndex: 10, pointerEvents: 'auto' }}> <div className="position-absolute" style={{ right: 10, top: 10, zIndex: 1000, pointerEvents: 'auto' }}>
<div className="btn-group btn-group-sm"> <div className="btn-group btn-group-sm">
<button className="btn btn-outline-secondary" onClick={() => zoomBy(1.2)} title="Увеличить"> <button className="btn btn-outline-secondary" onClick={() => zoomBy(1.2)} title="Увеличить">
<IconZoomIn size={16} /> <IconZoomIn size={16} />