Fix: Space/piltaster i inputs, reaktiv node-visning, edit-tilgang
Canvas: keyboard-events ignoreres når bruker skriver i input/textarea.
Space fungerer nå i søkefelt og tekstredigering.
Node Explorer: selectedNode er nå reaktiv mot nodeStore — endringer
reflekteres umiddelbart etter lagring uten å velge noden på nytt.
✏️-knapp vises bare for noder brukeren eier.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
7974c9d53a
commit
e96368cb7c
2 changed files with 23 additions and 5 deletions
|
|
@ -120,6 +120,12 @@
|
||||||
// Keyboard listeners
|
// Keyboard listeners
|
||||||
$effect(() => {
|
$effect(() => {
|
||||||
function onKeyDown(e: KeyboardEvent) {
|
function onKeyDown(e: KeyboardEvent) {
|
||||||
|
// Ikke fang tastatur-events når bruker skriver i inputs/textareas
|
||||||
|
const tag = (e.target as HTMLElement)?.tagName;
|
||||||
|
const isEditing = tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT'
|
||||||
|
|| (e.target as HTMLElement)?.isContentEditable;
|
||||||
|
if (isEditing) return;
|
||||||
|
|
||||||
if (e.code === 'Space' && !e.repeat) {
|
if (e.code === 'Space' && !e.repeat) {
|
||||||
spaceHeld = true;
|
spaceHeld = true;
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|
|
||||||
|
|
@ -17,9 +17,20 @@
|
||||||
|
|
||||||
let searchQuery = $state('');
|
let searchQuery = $state('');
|
||||||
let filterKind = $state('');
|
let filterKind = $state('');
|
||||||
let selectedNode = $state<Node | undefined>(undefined);
|
let selectedNodeId = $state<string | undefined>(undefined);
|
||||||
let limit = $state(50);
|
let limit = $state(50);
|
||||||
|
|
||||||
|
// Reaktiv: følger nodeStore slik at endringer reflekteres umiddelbart
|
||||||
|
const selectedNode = $derived(selectedNodeId ? nodeStore.get(selectedNodeId) : undefined);
|
||||||
|
|
||||||
|
// Kan brukeren redigere denne noden?
|
||||||
|
const canEdit = $derived(
|
||||||
|
selectedNode && userId && (
|
||||||
|
selectedNode.createdBy === userId ||
|
||||||
|
userId === 'd3eebc99-9c0b-4ef8-bb6d-6bb9bd380a44' // TODO: ekte admin-sjekk
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
// Editing state
|
// Editing state
|
||||||
let editing = $state(false);
|
let editing = $state(false);
|
||||||
let editTitle = $state('');
|
let editTitle = $state('');
|
||||||
|
|
@ -67,14 +78,15 @@
|
||||||
});
|
});
|
||||||
|
|
||||||
function selectNode(node: Node) {
|
function selectNode(node: Node) {
|
||||||
selectedNode = node;
|
selectedNodeId = node.id;
|
||||||
editing = false;
|
editing = false;
|
||||||
saveError = '';
|
saveError = '';
|
||||||
}
|
}
|
||||||
|
|
||||||
function navigateToNode(id: string) {
|
function navigateToNode(id: string) {
|
||||||
const node = nodeStore.get(id);
|
selectedNodeId = id;
|
||||||
if (node) selectNode(node);
|
editing = false;
|
||||||
|
saveError = '';
|
||||||
}
|
}
|
||||||
|
|
||||||
function startEditing() {
|
function startEditing() {
|
||||||
|
|
@ -201,7 +213,7 @@
|
||||||
<div class="ne-detail-header">
|
<div class="ne-detail-header">
|
||||||
<span class="ne-detail-kind">{selectedNode.nodeKind}</span>
|
<span class="ne-detail-kind">{selectedNode.nodeKind}</span>
|
||||||
<div class="ne-detail-actions">
|
<div class="ne-detail-actions">
|
||||||
{#if !editing}
|
{#if !editing && canEdit}
|
||||||
<button class="ne-action-btn" onclick={startEditing} title="Rediger">✏️</button>
|
<button class="ne-action-btn" onclick={startEditing} title="Rediger">✏️</button>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue