feat(stammbaum): centre-on-person control in the panel title row (#692)
Add an onCentre control to StammbaumSidePanel (title row, both desktop aside and mobile sheet). The page drives a one-shot centreOnId so StammbaumTree recentres the canvas on the focal node (US-PAN-005). Also tighten the panel spec's deathYear fixture to a valid type. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
<script lang="ts">
|
||||
import { untrack } from 'svelte';
|
||||
import { untrack, tick } from 'svelte';
|
||||
import { m } from '$lib/paraglide/messages.js';
|
||||
import { page } from '$app/state';
|
||||
import { replaceState } from '$app/navigation';
|
||||
@@ -42,6 +42,16 @@ function zoomIn() {
|
||||
function zoomOut() {
|
||||
view = { ...view, z: clampZoom(view.z - ZOOM_STEP_KB) };
|
||||
}
|
||||
// One-shot recentre trigger: set the focal id, let StammbaumTree's effect read
|
||||
// it and emit the recentred view, then clear so the same person can be
|
||||
// re-centred on a later click (US-PAN-005).
|
||||
let centreOnId = $state<string | null>(null);
|
||||
async function centreOnSelected() {
|
||||
centreOnId = selectedId;
|
||||
await tick();
|
||||
centreOnId = null;
|
||||
}
|
||||
|
||||
let cancelAnimation = () => {};
|
||||
function fitToScreen() {
|
||||
cancelAnimation();
|
||||
@@ -112,6 +122,7 @@ $effect(() => {
|
||||
edges={data.edges}
|
||||
selectedId={selectedId}
|
||||
panZoom={view}
|
||||
centreOnId={centreOnId}
|
||||
onPanZoom={(v) => (view = v)}
|
||||
onSelect={(id) => (selectedId = id)}
|
||||
/>
|
||||
@@ -126,6 +137,7 @@ $effect(() => {
|
||||
node={selectedNode}
|
||||
canWrite={canWrite}
|
||||
onClose={() => (selectedId = null)}
|
||||
onCentre={centreOnSelected}
|
||||
/>
|
||||
</aside>
|
||||
<!-- Mobile: dismissible bottom sheet (overlay, preserves pan/zoom) -->
|
||||
@@ -133,6 +145,7 @@ $effect(() => {
|
||||
node={selectedNode}
|
||||
canWrite={canWrite}
|
||||
onClose={() => (selectedId = null)}
|
||||
onCentre={centreOnSelected}
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user