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:
parent
ed7dd5ea0e
commit
00b0dc42bf
2 changed files with 24 additions and 10 deletions
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue