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
|
- Lukk → fjern panel fra workspace
|
||||||
- [x] Kanban-panel kan nå lukkes (samme fix)
|
- [x] Kanban-panel kan nå lukkes (samme fix)
|
||||||
- [x] Ingen footer — canvas har full høyde.
|
- [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
|
## 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 ---
|
// --- Fullscreen ---
|
||||||
function toggleFullscreen() {
|
function toggleFullscreen() {
|
||||||
isFullscreen = !isFullscreen;
|
isFullscreen = !isFullscreen;
|
||||||
|
|
@ -456,18 +469,19 @@
|
||||||
aria-label="Canvas"
|
aria-label="Canvas"
|
||||||
>
|
>
|
||||||
<!-- Toolbar -->
|
<!-- 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
|
<button
|
||||||
class="canvas-toolbar-btn"
|
class="canvas-toolbar-btn"
|
||||||
onclick={() => { camera = { ...camera, zoom: clampZoom(camera.zoom - 0.01) }; }}
|
onclick={() => zoomStep(-0.15)}
|
||||||
title="Zoom ut (−1%)"
|
title="Zoom ut (−15%)"
|
||||||
aria-label="Zoom ut"
|
aria-label="Zoom ut"
|
||||||
>−</button>
|
>−</button>
|
||||||
<span class="canvas-toolbar-zoom">{Math.round(camera.zoom * 100)}%</span>
|
<span class="canvas-toolbar-zoom">{Math.round(camera.zoom * 100)}%</span>
|
||||||
<button
|
<button
|
||||||
class="canvas-toolbar-btn"
|
class="canvas-toolbar-btn"
|
||||||
onclick={() => { camera = { ...camera, zoom: clampZoom(camera.zoom + 0.01) }; }}
|
onclick={() => zoomStep(0.15)}
|
||||||
title="Zoom inn (+1%)"
|
title="Zoom inn (+15%)"
|
||||||
aria-label="Zoom inn"
|
aria-label="Zoom inn"
|
||||||
>+</button>
|
>+</button>
|
||||||
<button
|
<button
|
||||||
|
|
@ -560,7 +574,7 @@
|
||||||
.canvas-container.canvas-fullscreen {
|
.canvas-container.canvas-fullscreen {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
inset: 0;
|
inset: 0;
|
||||||
z-index: 50;
|
z-index: 9999;
|
||||||
background: var(--color-bg, #0a0a0b);
|
background: var(--color-bg, #0a0a0b);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -590,8 +604,8 @@
|
||||||
inset: 0;
|
inset: 0;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
background-image:
|
background-image:
|
||||||
linear-gradient(to right, 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.06) 1px, transparent 1px);
|
linear-gradient(to bottom, rgba(99, 102, 241, 0.12) 1px, transparent 1px);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Lasso */
|
/* Lasso */
|
||||||
|
|
@ -655,7 +669,7 @@
|
||||||
.canvas-toolbar-sep {
|
.canvas-toolbar-sep {
|
||||||
width: 1px;
|
width: 1px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
background: #e5e7eb;
|
background: var(--color-border, #2a2a2e);
|
||||||
margin: 0 4px;
|
margin: 0 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue