refactor: apply suggested file format changes

library/lib/components/popovers/EdgePopover.tsx

@@ -47,14 +47,14 @@ export const EdgePopover = forwardRef<HTMLDivElement, EdgePopoverProps>(
     },
     ref
   ) => {
+    const { getEdge, getNode } = useReactFlow()
+    const edge = getEdge(edgeId)!
+    const edgeData = edge.data as CustomEdgeProps | undefined
+
     if (!anchorEl || !open) {
       return null
     }
 
-    const { getEdge, getNode } = useReactFlow()
-    const edge = getEdge(edgeId)!
-    const edgeData = edge.data as CustomEdgeProps
-
     // Retrieve source/target node names
     const sourceNode = getNode(source)
     const targetNode = getNode(target)
@@ -108,7 +108,7 @@ export const EdgePopover = forwardRef<HTMLDivElement, EdgePopoverProps>(
           {/* Source Multiplicity */}
           <TextField
             label={sourceName + " Multiplicity"}
-            value={edgeData.sourceMultiplicity}
+            value={edgeData?.sourceMultiplicity ?? ""}
             onChange={(e) => onSourceMultiplicityChange(e.target.value)}
             size="small"
             fullWidth
@@ -117,7 +117,7 @@ export const EdgePopover = forwardRef<HTMLDivElement, EdgePopoverProps>(
           {/* Source Role */}
           <TextField
             label={sourceName + " Role"}
-            value={edgeData.sourceRole}
+            value={edgeData?.sourceRole ?? ""}
             onChange={(e) => onSourceRoleChange(e.target.value)}
             size="small"
             fullWidth
@@ -131,7 +131,7 @@ export const EdgePopover = forwardRef<HTMLDivElement, EdgePopoverProps>(
           {/* Target Multiplicity */}
           <TextField
             label={targetName + " Multiplicity"}
-            value={edgeData.targetMultiplicity}
+            value={edgeData?.targetMultiplicity ?? ""}
             onChange={(e) => onTargetMultiplicityChange(e.target.value)}
             size="small"
             fullWidth
@@ -140,7 +140,7 @@ export const EdgePopover = forwardRef<HTMLDivElement, EdgePopoverProps>(
           {/* Target Role */}
           <TextField
             label={targetName + " Role"}
-            value={edgeData.targetRole}
+            value={edgeData?.targetRole ?? ""}
             onChange={(e) => onTargetRoleChange(e.target.value)}
             size="small"
             fullWidth

library/lib/edges/index.ts

@@ -1,9 +1,2 @@
 export * from "./types"
-// export * from "./AggregationEdge"
-// export * from "./BiAssociationEdge"
-// export * from "./CompositionEdge"
-// export * from "./DependencyEdge"
-// export * from "./InheritanceEdge"
-// export * from "./RealizationEdge"
-// export * from "./UniAssociationEdge"
 export * from "./EdgeProps"

library/lib/hooks/index.ts

@@ -7,3 +7,4 @@ export * from "./useConnect"
 export * from "./useNodeDragStop"
 export * from "./useHandleOnResize"
 export * from "./useEdges"
+export * from "./useEdgeToolbar"

library/lib/hooks/useConnect.ts

@@ -12,12 +12,6 @@ export const useConnect = () => {
         id: generateUUID(),
         type: "ClassBidirectional", // Ensure this type matches your custom edge in diagramEdgeTypes
         selected: true,
-        data: {
-          sourceRole: "", // Default empty string for source role
-          sourceMultiplicity: "", // Default empty string for source multiplicity
-          targetRole: "", // Default empty string for target role
-          targetMultiplicity: "", // Default empty string for target multiplicity
-        },
       }
       setEdges((edges) => addEdge(newEdge, edges))
     },

library/lib/hooks/useEdgeToolbar.ts

@@ -0,0 +1,17 @@
+import { useRef } from "react"
+import { useReactFlow } from "@xyflow/react"
+
+export function useToolbar({ id }: { id: string }) {
+  const reactFlow = useReactFlow()
+  const svgRef = useRef<SVGSVGElement | null>(null)
+
+  const handleDelete = () => {
+    reactFlow.deleteElements({
+      edges: [{ id }],
+    })
+  }
+  return {
+    svgRef,
+    handleDelete,
+  }
+}

library/lib/hooks/useEdges.ts

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react"
+import { useEffect, useState } from "react"
 import { useReactFlow } from "@xyflow/react"
 
 export function useEdgePopOver({
@@ -9,14 +9,8 @@ export function useEdgePopOver({
   selected: boolean
 }) {
   const reactFlow = useReactFlow()
-  const svgRef = useRef<SVGSVGElement | null>(null)
-  const [anchorEl, setAnchorEl] = useState<SVGSVGElement | null>(null)
 
-  const handleClick = () => {
-    if (svgRef.current) {
-      setAnchorEl(svgRef.current)
-    }
-  }
+  const [anchorEl, setAnchorEl] = useState<SVGSVGElement | null>(null)
 
   const handlePopoverClose = () => {
     setAnchorEl(null)
@@ -36,10 +30,6 @@ export function useEdgePopOver({
     })
   }
 
-  const handleNameChange = (newName: string) => {
-    reactFlow.updateNodeData(id, { name: newName })
-  }
-
   const handleTargetRoleChange = (newRole: string) => {
     reactFlow.updateEdgeData(id, { targetRole: newRole })
   }
@@ -56,12 +46,6 @@ export function useEdgePopOver({
     reactFlow.updateEdgeData(id, { sourceMultiplicity: newMultiplicity })
   }
 
-  const handleDelete = () => {
-    reactFlow.deleteElements({
-      nodes: [{ id }],
-    })
-  }
-
   useEffect(() => {
     if (!selected) {
       handlePopoverClose()
@@ -75,32 +59,11 @@ export function useEdgePopOver({
   }, [anchorEl, reactFlow, id])
 
   return {
-    svgRef,
-    anchorEl,
-    handleClick,
-    handlePopoverClose,
-    handleNameChange,
-    handleDelete,
-    handleTargetRoleChange,
-    handleTargetMultiplicityChange,
     handleSourceRoleChange,
     handleSourceMultiplicityChange,
+    handleTargetRoleChange,
+    handleTargetMultiplicityChange,
     handleEdgeTypeChange,
     handleSwap,
   }
 }
-
-export function useToolbar({ id }: { id: string }) {
-  const reactFlow = useReactFlow()
-  const svgRef = useRef<SVGSVGElement | null>(null)
-
-  const handleDelete = () => {
-    reactFlow.deleteElements({
-      edges: [{ id }],
-    })
-  }
-  return {
-    svgRef,
-    handleDelete,
-  }
-}

library/lib/initialElements.ts

@@ -127,12 +127,6 @@ export const initialEdges: Edge[] = [
     sourceHandle: "top-left",
     targetHandle: "top-left",
     type: "ClassUnidirectional",
-    data: {
-      sourceRole: null,
-      sourceMultiplicity: null,
-      targetRole: null,
-      targetMultiplicity: null,
-    },
   },
   {
     id: "2->3",
@@ -141,12 +135,6 @@ export const initialEdges: Edge[] = [
     sourceHandle: "top",
     targetHandle: "top-right",
     type: "ClassRealization",
-    data: {
-      sourceRole: null,
-      sourceMultiplicity: null,
-      targetRole: null,
-      targetMultiplicity: null,
-    },
   },
   {
     id: "3->4",
@@ -155,12 +143,6 @@ export const initialEdges: Edge[] = [
     sourceHandle: "top-left",
     targetHandle: "top-left",
     type: "ClassAggregation",
-    data: {
-      sourceRole: null,
-      sourceMultiplicity: null,
-      targetRole: null,
-      targetMultiplicity: null,
-    },
   },
   {
     id: "4->5",
@@ -169,12 +151,6 @@ export const initialEdges: Edge[] = [
     sourceHandle: "top",
     targetHandle: "top",
     type: "ClassComposition",
-    data: {
-      sourceRole: null,
-      sourceMultiplicity: null,
-      targetRole: null,
-      targetMultiplicity: null,
-    },
   },
   {
     id: "5->11",
@@ -183,11 +159,5 @@ export const initialEdges: Edge[] = [
     sourceHandle: "left",
     targetHandle: "bottom-right",
     type: "ClassDependency",
-    data: {
-      sourceRole: null,
-      sourceMultiplicity: null,
-      targetRole: null,
-      targetMultiplicity: null,
-    },
   },
 ]