feat(journal): improve sheet rendering and URL persistence
- Update SheetView to use full-width SVG and auto-height for better scaling - Center template nodes in SheetView to maintain text alignment - Enable overflow-y-auto in SheetView to support long sheets - Persist selected sheet ID in URL search parameters in StatsView
This commit is contained in:
@@ -65,8 +65,25 @@ export const SheetView: Component<{ sheetId: string }> = (props) => {
|
||||
|
||||
container.innerHTML = "";
|
||||
const parsed = parseSheet(s.svg);
|
||||
// Force full-width, auto-height
|
||||
parsed.svgElement.setAttribute("width", "100%");
|
||||
parsed.svgElement.removeAttribute("height");
|
||||
parsed.svgElement.style.display = "block";
|
||||
container.appendChild(parsed.svgElement);
|
||||
|
||||
// Center template nodes so text stays centered as values change length
|
||||
for (const tpl of parsed.templates) {
|
||||
const el = tpl.el;
|
||||
try {
|
||||
const bbox = el.getBBox();
|
||||
const cx = bbox.x + bbox.width / 2;
|
||||
el.setAttribute("text-anchor", "middle");
|
||||
el.setAttribute("x", String(cx));
|
||||
} catch {
|
||||
// getBBox may fail if the node has no layout — skip silently
|
||||
}
|
||||
}
|
||||
|
||||
if (parsed.templates.length === 0) return;
|
||||
|
||||
const dispose = createRoot((disposer) => {
|
||||
@@ -93,9 +110,9 @@ export const SheetView: Component<{ sheetId: string }> = (props) => {
|
||||
);
|
||||
|
||||
return (
|
||||
<div class="w-full h-full flex items-center justify-center p-2">
|
||||
<div class="w-full h-full overflow-y-auto p-2">
|
||||
{sheet() ? (
|
||||
<div ref={containerRef} class="w-full h-full" />
|
||||
<div ref={containerRef} class="w-full" />
|
||||
) : (
|
||||
fallback
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user