fix: resolve effect dependencies

This commit is contained in:
Jan-Henrik Bruhn 2025-10-10 11:40:14 +02:00
parent 79bfd525dd
commit 75cb26a991
2 changed files with 78 additions and 76 deletions

View file

@ -1,5 +1,7 @@
import { useState, useCallback } from 'react'; import { useState, useCallback } from "react";
import ConfirmDialog, { ConfirmDialogSeverity } from '../components/Common/ConfirmDialog'; import ConfirmDialog, {
ConfirmDialogSeverity,
} from "../components/Common/ConfirmDialog";
/** /**
* useConfirm Hook * useConfirm Hook
@ -47,11 +49,11 @@ interface ConfirmState extends ConfirmOptions {
export const useConfirm = () => { export const useConfirm = () => {
const [state, setState] = useState<ConfirmState>({ const [state, setState] = useState<ConfirmState>({
isOpen: false, isOpen: false,
title: '', title: "",
message: '', message: "",
confirmLabel: 'Confirm', confirmLabel: "Confirm",
cancelLabel: 'Cancel', cancelLabel: "Cancel",
severity: 'warning', severity: "warning",
}); });
const confirm = useCallback((options: ConfirmOptions): Promise<boolean> => { const confirm = useCallback((options: ConfirmOptions): Promise<boolean> => {
@ -67,12 +69,12 @@ export const useConfirm = () => {
const handleConfirm = useCallback(() => { const handleConfirm = useCallback(() => {
state.resolve?.(true); state.resolve?.(true);
setState((prev) => ({ ...prev, isOpen: false })); setState((prev) => ({ ...prev, isOpen: false }));
}, [state.resolve]); }, [state]);
const handleCancel = useCallback(() => { const handleCancel = useCallback(() => {
state.resolve?.(false); state.resolve?.(false);
setState((prev) => ({ ...prev, isOpen: false })); setState((prev) => ({ ...prev, isOpen: false }));
}, [state.resolve]); }, [state]);
const ConfirmDialogComponent = ( const ConfirmDialogComponent = (
<ConfirmDialog <ConfirmDialog

View file

@ -1,7 +1,7 @@
import { useEffect } from 'react'; import { useEffect } from "react";
import { useKeyboardShortcuts } from '../contexts/KeyboardShortcutContext'; import { useKeyboardShortcuts } from "../contexts/KeyboardShortcutContext";
import { useWorkspaceStore } from '../stores/workspaceStore'; import { useWorkspaceStore } from "../stores/workspaceStore";
import type { KeyboardShortcut } from './useKeyboardShortcutManager'; import type { KeyboardShortcut } from "./useKeyboardShortcutManager";
/** /**
* useGlobalShortcuts Hook * useGlobalShortcuts Hook
@ -34,156 +34,161 @@ export function useGlobalShortcuts(options: UseGlobalShortcutsOptions = {}) {
const shortcutDefinitions: KeyboardShortcut[] = [ const shortcutDefinitions: KeyboardShortcut[] = [
// Document Management // Document Management
{ {
id: 'new-document', id: "new-document",
description: 'New Document', description: "New Document",
key: 'n', key: "n",
ctrl: true, ctrl: true,
handler: () => createDocument(), handler: () => createDocument(),
category: 'Document Management', category: "Document Management",
}, },
{ {
id: 'open-document-manager', id: "open-document-manager",
description: 'Document Manager', description: "Document Manager",
key: 'o', key: "o",
ctrl: true, ctrl: true,
handler: () => options.onOpenDocumentManager?.(), handler: () => options.onOpenDocumentManager?.(),
category: 'Document Management', category: "Document Management",
enabled: !!options.onOpenDocumentManager, enabled: !!options.onOpenDocumentManager,
}, },
{ {
id: 'save-document', id: "save-document",
description: 'Export Document', description: "Export Document",
key: 's', key: "s",
ctrl: true, ctrl: true,
handler: () => { handler: () => {
if (activeDocumentId) { if (activeDocumentId) {
saveDocument(activeDocumentId); saveDocument(activeDocumentId);
} }
}, },
category: 'Document Management', category: "Document Management",
}, },
{ {
id: 'close-document', id: "close-document",
description: 'Close Current Document', description: "Close Current Document",
key: 'w', key: "w",
ctrl: true, ctrl: true,
handler: () => { handler: () => {
if (activeDocumentId && documentOrder.length > 1) { if (activeDocumentId && documentOrder.length > 1) {
closeDocument(activeDocumentId); closeDocument(activeDocumentId);
} }
}, },
category: 'Document Management', category: "Document Management",
}, },
{ {
id: 'next-document', id: "next-document",
description: 'Next Document', description: "Next Document",
key: 'Tab', key: "Tab",
ctrl: true, ctrl: true,
handler: () => { handler: () => {
const currentIndex = documentOrder.findIndex(id => id === activeDocumentId); const currentIndex = documentOrder.findIndex(
(id) => id === activeDocumentId,
);
if (currentIndex !== -1) { if (currentIndex !== -1) {
const nextIndex = (currentIndex + 1) % documentOrder.length; const nextIndex = (currentIndex + 1) % documentOrder.length;
switchToDocument(documentOrder[nextIndex]); switchToDocument(documentOrder[nextIndex]);
} }
}, },
category: 'Navigation', category: "Navigation",
}, },
{ {
id: 'previous-document', id: "previous-document",
description: 'Previous Document', description: "Previous Document",
key: 'Tab', key: "Tab",
ctrl: true, ctrl: true,
shift: true, shift: true,
handler: () => { handler: () => {
const currentIndex = documentOrder.findIndex(id => id === activeDocumentId); const currentIndex = documentOrder.findIndex(
(id) => id === activeDocumentId,
);
if (currentIndex !== -1) { if (currentIndex !== -1) {
const prevIndex = (currentIndex - 1 + documentOrder.length) % documentOrder.length; const prevIndex =
(currentIndex - 1 + documentOrder.length) % documentOrder.length;
switchToDocument(documentOrder[prevIndex]); switchToDocument(documentOrder[prevIndex]);
} }
}, },
category: 'Navigation', category: "Navigation",
}, },
// Graph Editing // Graph Editing
{ {
id: 'undo', id: "undo",
description: 'Undo', description: "Undo",
key: 'z', key: "z",
ctrl: true, ctrl: true,
handler: () => options.onUndo?.(), handler: () => options.onUndo?.(),
category: 'Graph Editing', category: "Graph Editing",
enabled: !!options.onUndo, enabled: !!options.onUndo,
}, },
{ {
id: 'redo', id: "redo",
description: 'Redo', description: "Redo",
key: 'y', key: "y",
ctrl: true, ctrl: true,
handler: () => options.onRedo?.(), handler: () => options.onRedo?.(),
category: 'Graph Editing', category: "Graph Editing",
enabled: !!options.onRedo, enabled: !!options.onRedo,
}, },
{ {
id: 'redo-alt', id: "redo-alt",
description: 'Redo', description: "Redo",
key: 'z', key: "z",
ctrl: true, ctrl: true,
shift: true, shift: true,
handler: () => options.onRedo?.(), handler: () => options.onRedo?.(),
category: 'Graph Editing', category: "Graph Editing",
enabled: !!options.onRedo, enabled: !!options.onRedo,
priority: -1, // Lower priority than Ctrl+Y priority: -1, // Lower priority than Ctrl+Y
}, },
// Selection // Selection
{ {
id: 'select-all', id: "select-all",
description: 'Select All', description: "Select All",
key: 'a', key: "a",
ctrl: true, ctrl: true,
handler: () => options.onSelectAll?.(), handler: () => options.onSelectAll?.(),
category: 'Selection', category: "Selection",
enabled: !!options.onSelectAll, enabled: !!options.onSelectAll,
}, },
{ {
id: 'deselect-all', id: "deselect-all",
description: 'Deselect All', description: "Deselect All",
key: 'Escape', key: "Escape",
handler: () => { handler: () => {
// This will be handled by GraphEditor // This will be handled by GraphEditor
// Just documenting it here // Just documenting it here
}, },
category: 'Selection', category: "Selection",
enabled: false, // React Flow handles this internally enabled: false, // React Flow handles this internally
}, },
// View // View
{ {
id: 'fit-view', id: "fit-view",
description: 'Fit View to Content', description: "Fit View to Content",
key: 'f', key: "f",
handler: () => options.onFitView?.(), handler: () => options.onFitView?.(),
category: 'View', category: "View",
enabled: !!options.onFitView, enabled: !!options.onFitView,
}, },
{ {
id: 'show-help', id: "show-help",
description: 'Show Keyboard Shortcuts', description: "Show Keyboard Shortcuts",
key: '?', key: "?",
handler: () => options.onOpenHelp?.(), handler: () => options.onOpenHelp?.(),
category: 'Navigation', category: "Navigation",
enabled: !!options.onOpenHelp, enabled: !!options.onOpenHelp,
}, },
]; ];
// Register all shortcuts // Register all shortcuts
shortcutDefinitions.forEach(shortcut => { shortcutDefinitions.forEach((shortcut) => {
shortcuts.register(shortcut); shortcuts.register(shortcut);
}); });
// Cleanup on unmount // Cleanup on unmount
return () => { return () => {
shortcutDefinitions.forEach(shortcut => { shortcutDefinitions.forEach((shortcut) => {
shortcuts.unregister(shortcut.id); shortcuts.unregister(shortcut.id);
}); });
}; };
@ -195,11 +200,6 @@ export function useGlobalShortcuts(options: UseGlobalShortcutsOptions = {}) {
closeDocument, closeDocument,
createDocument, createDocument,
saveDocument, saveDocument,
options.onOpenDocumentManager, options,
options.onUndo,
options.onRedo,
options.onOpenHelp,
options.onFitView,
options.onSelectAll,
]); ]);
} }