WEBDIENSTE/OSINT-Framework
1
0
Fork 0
mirror of https://github.com/lockfale/OSINT-Framework.git synced 2026-08-23 14:22:24 +02:00
Code Issues Packages Projects Releases Wiki Activity

Zoom to fill viewport on mobile initial load (THE-119)

Browse Source 
On screens ≤768px, pre-compute the bounding box of the collapsed
tree layout and apply a zoom transform so the root + top-level
categories fill the viewport immediately, instead of starting tiny
in the center.

Also adds a reusable zoomToFill() utility for future reset-view use.

Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
s0lray
2026-03-26 18:37:33 -04:00
co-authored by Paperclip
parent 56e65f27ac
commit 4b34fcdb2a
1 changed files with 38 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/js/arf.js
+38
View File
@@ -83,6 +83,31 @@ d3.json("arf.json").then(function(json) {
}
root.children.forEach(collapse);
// On mobile, pre-compute zoom so the collapsed tree fills the viewport.
if (window.innerWidth <= 768) {
// Run tree layout to get final node positions, then compute zoom from data.
tree(root);
root.descendants().forEach(function(d) { d.y = d.depth * 180; });
var visibleNodes = root.descendants();
var minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
visibleNodes.forEach(function(d) {
if (d.x < minX) minX = d.x;
if (d.x > maxX) maxX = d.x;
if (d.y < minY) minY = d.y;
if (d.y > maxY) maxY = d.y;
});
var pad = 60;
var bw = (maxY - minY) || 1;
var bh = (maxX - minX) || 1;
var k = Math.min((svgW - pad * 2) / bw, (svgH - pad * 2) / bh, 3);
var cx = (minY + maxY) / 2;
var cy = (minX + maxX) / 2;
var tx = svgW / 2 - margin[3] - cx * k;
var ty = svgH / 2 - margin[0] - cy * k;
svgEl.call(zoom.transform, d3.zoomIdentity.translate(tx, ty).scale(k));
}
update(root);
initSearch();
});
@@ -235,6 +260,19 @@ function toggle(d) {
}
}
// Zoom the tree so visible nodes fill the SVG viewport (used on mobile init).
function zoomToFill() {
var bbox = vis.node().getBBox();
if (!bbox.width || !bbox.height) return;
var pad = 40;
var scaleX = (svgW - pad * 2) / bbox.width;
var scaleY = (svgH - pad * 2) / bbox.height;
var k = Math.min(scaleX, scaleY, 3);
var tx = svgW / 2 - (bbox.x + bbox.width / 2) * k - margin[3];
var ty = svgH / 2 - (bbox.y + bbox.height / 2) * k - margin[0];
svgEl.call(zoom.transform, d3.zoomIdentity.translate(tx, ty).scale(k));
}
// Auto-pan viewport to center on a node after expand/click.
function zoomToNode(d) {
var currentK = d3.zoomTransform(svgEl.node()).k;