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

fix: Update zoom functionality in GraphView to use scaleBy instead of scaleTo for smoother zoom transitions and improved user experience
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 6m14s
Details

Browse Source
This commit is contained in:
denozord
2025-08-08 17:15:38 +07:00
parent 08cf7f806c
commit f5f71085b2
1 changed files with 3 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/GraphView.jsx
+3 -8
View File
@@ -94,21 +94,16 @@ function GraphView({ servers, connections }) {
const zoomBy = (factor) => {
if (!zoomRef.current || !svgRef.current) return;
const svgEl = svgRef.current;
const current = d3.zoomTransform(svgEl);
const cx = svgEl.clientWidth / 2;
const cy = svgEl.clientHeight / 2;
const minK = 0.3;
const maxK = 3;
let nextK = current.k * factor;
if (nextK < minK) nextK = minK;
if (nextK > maxK) nextK = maxK;
dbg('zoomBy click', { factor, current: { k: current.k, x: current.x, y: current.y }, nextK, center: { cx, cy } });
const current = d3.zoomTransform(svgEl);
dbg('zoomBy click', { factor, current: { k: current.k, x: current.x, y: current.y }, center: { cx, cy } });
const svgSel = d3.select(svgEl);
svgSel.interrupt();
svgSel
.transition()
.duration(220)
.call(zoomRef.current.scaleTo, nextK, [cx, cy])
.call(zoomRef.current.scaleBy, factor, [cx, cy])
.on('end', () => {
const nt = d3.zoomTransform(svgEl);
dbg('zoomBy end', { next: { k: nt.k, x: nt.x, y: nt.y } });