klmp200/Sith
1
0
Fork 0
mirror of https://github.com/ae-utbm/sith.git synced 2025-07-11 20:39:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add zoom control of family graph

Browse Source
This commit is contained in:
Antoine Bartuccio
2025-06-18 12:22:30 +02:00
parent cc96c93d23
commit 10d5b9d63f
2 changed files with 35 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
core/static/bundled/user/family-graph-index.ts
View File

@ -16,6 +16,10 @@ type GraphData = (
| { data: { source: number; target: number } }
)[];
function isMobile() {
return window.innerWidth < 500;
}
async function getGraphData(
userId: number,
godfathersDepth: number,
@ -151,7 +155,6 @@ function createGraph(container: HTMLDivElement, data: GraphData, activeUserId: n
cy.on("tap", "node", (tapped) => {
onNodeTap(tapped.target);
});
cy.zoomingEnabled(false);
/* Add context menu */
cy.cxtmenu({
@ -200,6 +203,7 @@ document.addEventListener("alpine:init", () => {
reverse: initialUrlParams.get("reverse")?.toLowerCase?.() === "true",
graph: undefined as cytoscape.Core,
graphData: {},
isZoomEnabled: !isMobile(),
getInitialDepth(prop: string) {
const value = Number.parseInt(initialUrlParams.get(prop));
@ -235,6 +239,9 @@ document.addEventListener("alpine:init", () => {
await this.reverseGraph();
}
});
this.$watch("isZoomEnabled", () => {
this.graph.userZoomingEnabled(this.isZoomEnabled);
});
await this.fetchGraphData();
},
@ -279,6 +286,7 @@ document.addEventListener("alpine:init", () => {
this.graphData,
config.activeUser,
);
this.graph.userZoomingEnabled(this.isZoomEnabled);
this.loading = false;
},
}));