Fiks workspace-modifikatorer i canvas toolbar

- Legg til stopPropagation på toolbar-div for å hindre at pointer/click-events
  bobler opp til canvas-container og starter pan/lasso
- Zoom-knapper zoomer nå mot viewport-senter (som musehjul) med ±15% steg
- Fullskjerm z-index økt til 9999 (over header)
- Grid-linjer doblet i opacity (6% → 12%) for synlighet i mørkt tema
- Toolbar-separator bruker CSS-variabel i stedet for hardkodet lys farge
This commit is contained in:
vegard 2026-03-19 19:45:54 +00:00
parent ed7dd5ea0e
commit 00b0dc42bf
2 changed files with 24 additions and 10 deletions

View file

@ -12,7 +12,7 @@ Funnet ved manuell testing av frontend. Fikses som en samlet sesjon.
- Lukk → fjern panel fra workspace
- [x] Kanban-panel kan nå lukkes (samme fix)
- [x] Ingen footer — canvas har full høyde.
- [ ] Workspace-modifikatorer (zoom-knapper, fullskjerm, snap-to-grid, tilpass) er uvirksomme. Zoom via musehjul fungerer.
- [x] Workspace-modifikatorer (zoom-knapper, fullskjerm, snap-to-grid, tilpass) fikset: stopPropagation på toolbar, zoom mot viewport-senter (±15%), fullskjerm z-index 9999, grid-linjer synligere.
## Header / innstillinger

View file

@ -394,6 +394,19 @@
}
}
// --- Toolbar zoom (zoom toward viewport center) ---
function zoomStep(delta: number) {
const cx = viewport.width / 2;
const cy = viewport.height / 2;
const newZoom = clampZoom(camera.zoom * (1 + delta));
const scale = newZoom / camera.zoom;
camera = {
x: cx - scale * (cx - camera.x),
y: cy - scale * (cy - camera.y),
zoom: newZoom,
};
}
// --- Fullscreen ---
function toggleFullscreen() {
isFullscreen = !isFullscreen;
@ -456,18 +469,19 @@
aria-label="Canvas"
>
<!-- Toolbar -->
<div class="canvas-toolbar">
<!-- svelte-ignore a11y_click_events_have_key_events -->
<div class="canvas-toolbar" onclick={(e) => e.stopPropagation()} onpointerdown={(e) => e.stopPropagation()}>
<button
class="canvas-toolbar-btn"
onclick={() => { camera = { ...camera, zoom: clampZoom(camera.zoom - 0.01) }; }}
title="Zoom ut (1%)"
onclick={() => zoomStep(-0.15)}
title="Zoom ut (15%)"
aria-label="Zoom ut"
></button>
<span class="canvas-toolbar-zoom">{Math.round(camera.zoom * 100)}%</span>
<button
class="canvas-toolbar-btn"
onclick={() => { camera = { ...camera, zoom: clampZoom(camera.zoom + 0.01) }; }}
title="Zoom inn (+1%)"
onclick={() => zoomStep(0.15)}
title="Zoom inn (+15%)"
aria-label="Zoom inn"
>+</button>
<button
@ -560,7 +574,7 @@
.canvas-container.canvas-fullscreen {
position: fixed;
inset: 0;
z-index: 50;
z-index: 9999;
background: var(--color-bg, #0a0a0b);
}
@ -590,8 +604,8 @@
inset: 0;
pointer-events: none;
background-image:
linear-gradient(to right, rgba(99, 102, 241, 0.06) 1px, transparent 1px),
linear-gradient(to bottom, rgba(99, 102, 241, 0.06) 1px, transparent 1px);
linear-gradient(to right, rgba(99, 102, 241, 0.12) 1px, transparent 1px),
linear-gradient(to bottom, rgba(99, 102, 241, 0.12) 1px, transparent 1px);
}
/* Lasso */
@ -655,7 +669,7 @@
.canvas-toolbar-sep {
width: 1px;
height: 20px;
background: #e5e7eb;
background: var(--color-border, #2a2a2e);
margin: 0 4px;
}