Anaru/Roesstad
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: Implement family tree pan/zoom functionality and refactor data loading, member forms, and modal handling.

Browse source
This commit is contained in:
Eivind Røsstad Skeie 2025-12-09 22:43:24 +01:00
parent bf5a0876b6
commit 6be8f41448
2 changed files with 560 additions and 420 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

943
script.js
View file

File diff suppressed because it is too large Load diff

37
style.css
View file

@ -134,9 +134,18 @@ body.dark-mode .nav-brand {
#tree-container { #tree-container {
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: auto; position: absolute;
position: relative; top: 0;
background: radial-gradient(circle at center, rgba(26, 71, 42, 0.1) 0%, transparent 70%); left: 0;
transform-origin: 0 0;
/* Zoom from top-left */
cursor: grab;
pointer-events: none;
/* Let clicks pass to #tree-tab */
}
#tree-container:active {
cursor: grabbing;
} }
#relationship-lines { #relationship-lines {
@ -153,6 +162,8 @@ body.dark-mode .nav-brand {
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
pointer-events: none;
/* Let clicks pass to #tree-tab */
} }
.family-card { .family-card {
@ -171,6 +182,8 @@ body.dark-mode .nav-brand {
cursor: pointer; cursor: pointer;
transition: transform 0.2s, box-shadow 0.2s; transition: transform 0.2s, box-shadow 0.2s;
color: inherit; color: inherit;
pointer-events: auto;
/* Re-enable clicking for cards */
} }
.family-card:hover { .family-card:hover {
@ -378,23 +391,17 @@ input[type="radio"] {
margin: 0; margin: 0;
} }
/* Pan and Zoom Styles */
#tree-tab { #tree-tab {
overflow: hidden; /* Hide scrollbars, we use custom pan */ overflow: hidden;
/* Infinite canvas, no native scroll */
position: relative; position: relative;
cursor: grab; cursor: grab;
width: 100%;
height: 100%;
user-select: none;
/* Prevent text selection during drag */
} }
#tree-tab:active { #tree-tab:active {
cursor: grabbing; cursor: grabbing;
}
#tree-container {
transform-origin: 0 0; /* Zoom from top-left */
position: absolute;
top: 0;
left: 0;
/* Ensure it has size */
min-width: 100%;
min-height: 100%;
} }