diff --git a/src/components/Config/EdgeTypeConfig.tsx b/src/components/Config/EdgeTypeConfig.tsx index 48eb11e..90375d2 100644 --- a/src/components/Config/EdgeTypeConfig.tsx +++ b/src/components/Config/EdgeTypeConfig.tsx @@ -1,4 +1,4 @@ -import { useState } from 'react'; +import { useState, useEffect } from 'react'; import { useGraphWithHistory } from '../../hooks/useGraphWithHistory'; import { useConfirm } from '../../hooks/useConfirm'; import { useToastStore } from '../../stores/toastStore'; @@ -21,15 +21,29 @@ import type { EdgeTypeConfig, EdgeDirectionality } from '../../types'; interface Props { isOpen: boolean; onClose: () => void; + initialEditingTypeId?: string | null; } -const EdgeTypeConfigModal = ({ isOpen, onClose }: Props) => { +const EdgeTypeConfigModal = ({ isOpen, onClose, initialEditingTypeId }: Props) => { const { edgeTypes, addEdgeType, updateEdgeType, deleteEdgeType } = useGraphWithHistory(); const { confirm, ConfirmDialogComponent } = useConfirm(); const { showToast } = useToastStore(); const [editingType, setEditingType] = useState(null); + // Set editing type when initialEditingTypeId changes + useEffect(() => { + if (initialEditingTypeId && isOpen) { + const typeToEdit = edgeTypes.find(t => t.id === initialEditingTypeId); + if (typeToEdit) { + setEditingType(typeToEdit); + } + } else if (!isOpen) { + // Clear editing type when modal closes + setEditingType(null); + } + }, [initialEditingTypeId, isOpen, edgeTypes]); + const handleAddType = (type: { label: string; color: string; diff --git a/src/components/Panels/RightPanel.tsx b/src/components/Panels/RightPanel.tsx index 7c5c55d..a1bb0d6 100644 --- a/src/components/Panels/RightPanel.tsx +++ b/src/components/Panels/RightPanel.tsx @@ -15,6 +15,7 @@ import { useConfirm } from '../../hooks/useConfirm'; import GraphMetrics from '../Common/GraphMetrics'; import ConnectionDisplay from '../Common/ConnectionDisplay'; import NodeTypeConfigModal from '../Config/NodeTypeConfig'; +import EdgeTypeConfigModal from '../Config/EdgeTypeConfig'; import type { Actor, Relation, EdgeDirectionality } from '../../types'; /** @@ -86,6 +87,10 @@ const RightPanel = ({ selectedNode, selectedEdge, onClose }: Props) => { const [showActorTypeModal, setShowActorTypeModal] = useState(false); const [editingActorTypeId, setEditingActorTypeId] = useState(null); + // Relation type modal state + const [showRelationTypeModal, setShowRelationTypeModal] = useState(false); + const [editingRelationTypeId, setEditingRelationTypeId] = useState(null); + // Update state when selected node changes useEffect(() => { if (selectedNode) { @@ -223,6 +228,19 @@ const RightPanel = ({ selectedNode, selectedEdge, onClose }: Props) => { setEditingActorTypeId(null); }; + // Handle edit relation type + const handleEditRelationType = () => { + if (!relationType) return; + setEditingRelationTypeId(relationType); + setShowRelationTypeModal(true); + }; + + // Handle close relation type modal + const handleCloseRelationTypeModal = () => { + setShowRelationTypeModal(false); + setEditingRelationTypeId(null); + }; + // Get connections for selected node const getNodeConnections = () => { if (!selectedNode) return []; @@ -249,6 +267,11 @@ const RightPanel = ({ selectedNode, selectedEdge, onClose }: Props) => { onClose={handleCloseActorTypeModal} initialEditingTypeId={editingActorTypeId} /> + ); } @@ -268,6 +291,11 @@ const RightPanel = ({ selectedNode, selectedEdge, onClose }: Props) => { onClose={handleCloseActorTypeModal} initialEditingTypeId={editingActorTypeId} /> + ); } @@ -451,6 +479,11 @@ const RightPanel = ({ selectedNode, selectedEdge, onClose }: Props) => { onClose={handleCloseActorTypeModal} initialEditingTypeId={editingActorTypeId} /> + ); } @@ -495,9 +528,20 @@ const RightPanel = ({ selectedNode, selectedEdge, onClose }: Props) => {
{/* Relation Type */}
- +
+ + + + + + +