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

fix: Enhance zoom functionality in GraphView by incorporating viewBox dimensions for accurate scaling and smoother transitions during zoom interactions
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 6m5s
Details

Browse Source
This commit is contained in:
denozord
2025-08-08 17:50:54 +07:00
parent b23056d95a
commit d36db114cd
1 changed files with 18 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/GraphView.jsx
+18 -5
View File
@@ -74,8 +74,9 @@ 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 vb = svgRef.current?.viewBox?.baseVal;
const height = svgRef.current?.clientHeight || 600; const width = (vb && vb.width) ? vb.width : (svgRef.current?.clientWidth || 900);
const height = (vb && vb.height) ? vb.height : (svgRef.current?.clientHeight || 600);
zoomRef.current = d3 zoomRef.current = d3
.zoom() .zoom()
.scaleExtent([0.3, 3]) .scaleExtent([0.3, 3])
@@ -95,7 +96,18 @@ function GraphView({ servers, connections }) {
event.preventDefault(); event.preventDefault();
const delta = Math.sign(event.deltaY); const delta = Math.sign(event.deltaY);
const factor = delta > 0 ? 1 / 1.2 : 1.2; const factor = delta > 0 ? 1 / 1.2 : 1.2;
zoomBy(factor); const svgEl = svgRef.current;
const center = d3.pointer(event, svgEl);
const svgSel = d3.select(svgEl);
svgSel.interrupt();
svgSel
.transition()
.duration(220)
.call(zoomRef.current.scaleBy, factor, center)
.on('end', () => {
const nt = d3.zoomTransform(svgEl);
dbg('zoomBy end', { next: { k: nt.k, x: nt.x, y: nt.y } });
});
}, { passive: false }); }, { passive: false });
}, []); }, []);
@@ -103,8 +115,9 @@ function GraphView({ servers, connections }) {
const zoomBy = (factor) => { const zoomBy = (factor) => {
if (!zoomRef.current || !svgRef.current) return; if (!zoomRef.current || !svgRef.current) return;
const svgEl = svgRef.current; const svgEl = svgRef.current;
const cx = svgEl.clientWidth / 2; const vb = svgEl.viewBox?.baseVal;
const cy = svgEl.clientHeight / 2; const cx = (vb && vb.width) ? vb.width / 2 : svgEl.clientWidth / 2;
const cy = (vb && vb.height) ? vb.height / 2 : svgEl.clientHeight / 2;
const current = d3.zoomTransform(svgEl); const current = d3.zoomTransform(svgEl);
dbg('zoomBy click', { factor, current: { k: current.k, x: current.x, y: current.y }, center: { cx, cy } }); dbg('zoomBy click', { factor, current: { k: current.k, x: current.x, y: current.y }, center: { cx, cy } });
const svgSel = d3.select(svgEl); const svgSel = d3.select(svgEl);