From 00b0dc42bfc87e94d8a3253c0dee0905088f8c11 Mon Sep 17 00:00:00 2001
From: vegard <vnotnes@pm.me>
Date: Thu, 19 Mar 2026 19:45:54 +0000
Subject: [PATCH] Fiks workspace-modifikatorer i canvas toolbar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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
---
 docs/fikseliste.md                            |  2 +-
 .../src/lib/components/canvas/Canvas.svelte   | 32 +++++++++++++------
 2 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/docs/fikseliste.md b/docs/fikseliste.md
index 6f946d5..17e2cda 100644
--- a/docs/fikseliste.md
+++ b/docs/fikseliste.md
@@ -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
 
diff --git a/frontend/src/lib/components/canvas/Canvas.svelte b/frontend/src/lib/components/canvas/Canvas.svelte
index 8a4a861..ba6bb05 100644
--- a/frontend/src/lib/components/canvas/Canvas.svelte
+++ b/frontend/src/lib/components/canvas/Canvas.svelte
@@ -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;
 	}