Alexander/WebtreesFullDiagram
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Add fullscreen button and remove initial pan animation

Browse Source 
Add a fullscreen toggle to the zoom controls using inline Lucide SVG
icons (Maximize/X). Remove the 500ms transition on initial center so the
chart starts focused on the root person immediately.
This commit is contained in:
Alexander Bocken
2026-03-16 14:45:21 +01:00
parent 58046d8dd7
commit 8a9b0f2248
4 changed files with 43 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
resources/js/full-diagram.min.js vendored
View File

File diff suppressed because one or more lines are too long

11
resources/js/modules/lib/chart.js
View File

@@ -79,12 +79,9 @@ export default class Chart {
centerOnRoot() {
const { width, height } = this.svg.node().getBoundingClientRect();
this.svg
.transition()
.duration(500)
.call(
this.zoomBehavior.transform,
zoomIdentity.translate(width / 2, height / 2)
);
this.svg.call(
this.zoomBehavior.transform,
zoomIdentity.translate(width / 2, height / 2)
);
}
}

28
resources/js/modules/lib/chart/zoom.js
View File

@@ -4,6 +4,10 @@
import { zoom, zoomIdentity, select } from "../d3.js";
import { getCanvas } from "./svg.js";
// Inline Lucide SVG icons (24x24 viewBox, stroke-based)
const ICON_MAXIMIZE = '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/><line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/></svg>';
const ICON_X = '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>';
/**
* Initialize zoom behavior on the SVG element.
*
@@ -69,4 +73,28 @@ export function createZoomControls(containerSelector, svg, zoomBehavior) {
zoomIdentity.translate(width / 2, height / 2)
);
});
// Fullscreen toggle
const fullscreenBtn = controls
.append("button")
.attr("type", "button")
.attr("title", "Toggle fullscreen")
.attr("class", "fullscreen-btn")
.html(ICON_MAXIMIZE)
.on("click", () => {
const el = container.node();
if (!document.fullscreenElement) {
(el.requestFullscreen || el.webkitRequestFullscreen || el.msRequestFullscreen).call(el);
} else {
(document.exitFullscreen || document.webkitExitFullscreen || document.msExitFullscreen).call(document);
}
});
function updateFullscreenIcon() {
fullscreenBtn.html(document.fullscreenElement ? ICON_X : ICON_MAXIMIZE);
fullscreenBtn.attr("title", document.fullscreenElement ? "Exit fullscreen" : "Toggle fullscreen");
}
document.addEventListener("fullscreenchange", updateFullscreenIcon);
document.addEventListener("webkitfullscreenchange", updateFullscreenIcon);
}