diff --git a/src/App.tsx b/src/App.tsx index f66695c..5c877ca 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -4,6 +4,7 @@ import GraphEditor from "./components/Editor/GraphEditor"; import LeftPanel from "./components/Panels/LeftPanel"; import RightPanel from "./components/Panels/RightPanel"; import DocumentTabs from "./components/Workspace/DocumentTabs"; +import Toolbar from "./components/Toolbar/Toolbar"; import MenuBar from "./components/Menu/MenuBar"; import DocumentManager from "./components/Workspace/DocumentManager"; import KeyboardShortcutsHelp from "./components/Common/KeyboardShortcutsHelp"; @@ -137,6 +138,9 @@ function AppContent() { {/* Document Tabs */} + {/* Toolbar */} + {activeDocumentId && } + {/* Main content area with side panels */} {/* Left Panel */} diff --git a/src/components/Panels/LeftPanel.tsx b/src/components/Panels/LeftPanel.tsx index 2e1100b..c73cbb5 100644 --- a/src/components/Panels/LeftPanel.tsx +++ b/src/components/Panels/LeftPanel.tsx @@ -2,14 +2,11 @@ import { useCallback } from 'react'; import { IconButton, Tooltip } from '@mui/material'; import ChevronLeftIcon from '@mui/icons-material/ChevronLeft'; import ChevronRightIcon from '@mui/icons-material/ChevronRight'; -import UndoIcon from '@mui/icons-material/Undo'; -import RedoIcon from '@mui/icons-material/Redo'; import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import ExpandLessIcon from '@mui/icons-material/ExpandLess'; import { usePanelStore } from '../../stores/panelStore'; import { useGraphWithHistory } from '../../hooks/useGraphWithHistory'; import { useEditorStore } from '../../stores/editorStore'; -import { useDocumentHistory } from '../../hooks/useDocumentHistory'; import { createNode } from '../../utils/nodeUtils'; /** @@ -41,7 +38,6 @@ const LeftPanel = ({ onDeselectAll, onAddNode }: LeftPanelProps) => { const { nodeTypes, edgeTypes, addNode } = useGraphWithHistory(); const { selectedRelationType, setSelectedRelationType } = useEditorStore(); - const { undo, redo, canUndo, canRedo, undoDescription, redoDescription } = useDocumentHistory(); const handleAddNode = useCallback( (nodeTypeId: string) => { @@ -78,17 +74,6 @@ const LeftPanel = ({ onDeselectAll, onAddNode }: LeftPanelProps) => { - - {/* Icon indicators for quick reference */} - - - - - - - - - ); } @@ -111,58 +96,6 @@ const LeftPanel = ({ onDeselectAll, onAddNode }: LeftPanelProps) => { {/* Scrollable content */} - {/* History Section */} - - toggleLeftPanelSection('history')} - className="w-full px-3 py-2 flex items-center justify-between bg-gray-50 hover:bg-gray-100 transition-colors" - > - History - {leftPanelSections.history ? : } - - {leftPanelSections.history && ( - - - - - - - Undo - - - - - - - - Redo - - - - - {undoDescription && ( - - Next: {undoDescription} - - )} - - )} - - {/* Add Actors Section */} { - const { nodeTypes, edgeTypes, addNode } = useGraphWithHistory(); - const { selectedRelationType, setSelectedRelationType } = useEditorStore(); const { undo, redo, canUndo, canRedo, undoDescription, redoDescription } = useDocumentHistory(); - // Set default relation type on mount or when edge types change - useEffect(() => { - if (!selectedRelationType && edgeTypes.length > 0) { - setSelectedRelationType(edgeTypes[0].id); - } - }, [edgeTypes, selectedRelationType, setSelectedRelationType]); - - const handleAddNode = useCallback( - (nodeTypeId: string) => { - // Create node at center of viewport (approximate) - const position = { - x: Math.random() * 400 + 100, - y: Math.random() * 300 + 100, - }; - - const nodeTypeConfig = nodeTypes.find((nt) => nt.id === nodeTypeId); - const newNode = createNode(nodeTypeId, position, nodeTypeConfig); - addNode(newNode); - }, - [addNode, nodeTypes] - ); - - const selectedEdgeTypeConfig = edgeTypes.find(et => et.id === selectedRelationType); - return ( - - + + {/* Undo/Redo */} - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + - {/* Add Actor */} - - Add Actor: - - {nodeTypes.map((nodeType) => ( - handleAddNode(nodeType.id)} - className="px-3 py-2 text-sm font-medium text-white rounded-md hover:opacity-90 transition-opacity focus:outline-none focus:ring-2 focus:ring-offset-2" - style={{ backgroundColor: nodeType.color }} - title={nodeType.description} - > - {nodeType.label} - - ))} - - - - {/* Relation Type Selector */} - - Relation Type: - setSelectedRelationType(e.target.value)} - className="px-3 py-2 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" - style={{ - borderLeftWidth: '4px', - borderLeftColor: selectedEdgeTypeConfig?.color || '#6b7280' - }} - > - {edgeTypes.map((edgeType) => ( - - {edgeType.label} - - ))} - - - - - {/* Instructions */} - - - Click a button to add an actor. Drag actors to position them. Select a relation type above, then click - and drag from a handle to create a relation between actors. - + {/* Description text */} + {undoDescription && ( + + Next: {undoDescription} + + )}
- Next: {undoDescription} -
- Click a button to add an actor. Drag actors to position them. Select a relation type above, then click - and drag from a handle to create a relation between actors. -