Merge pull request #169 from ls1intum/fix--connection-new-edge-selected

Fix  connection new edge selected, edit edge popover spacing, sidebar new element id for methods and attributes

Author: egenerse

library/lib/components/Sidebar.tsx

@@ -136,10 +136,31 @@ const DraggableGhost: React.FC<DraggableGhostProps> = ({
         return
       }
 
+      // Deep clone defaultData to avoid mutating the original config
+      const defaultData = structuredClone(dropElementConfig.defaultData)
+
+      // Assign new IDs to methods and attributes
+      if (defaultData.methods) {
+        defaultData.methods = (defaultData.methods as Array<object>).map(
+          (method) => ({
+            ...method,
+            id: generateUUID(),
+          })
+        )
+      }
+      if (defaultData.attributes) {
+        defaultData.attributes = (defaultData.attributes as Array<object>).map(
+          (attribute) => ({
+            ...attribute,
+            id: generateUUID(),
+          })
+        )
+      }
+
       // Prepare the drop data including offset adjustments
       const dropData: DropNodeData = {
         type: dropElementConfig.type,
-        data: dropElementConfig.defaultData,
+        data: defaultData,
         offsetX: clickOffset.x / transformScale,
         offsetY: clickOffset.y / transformScale,
       }
@@ -182,7 +203,7 @@ const DraggableGhost: React.FC<DraggableGhostProps> = ({
         height: dropElementConfig.height,
         type: dropData.type,
         position: { ...position },
-        data: { ...dropElementConfig.defaultData, ...dropData.data },
+        data: { ...defaultData, ...dropData.data },
         parentId: parentId,
         measured: {
           width: dropElementConfig.width,
@@ -191,8 +212,6 @@ const DraggableGhost: React.FC<DraggableGhostProps> = ({
         selected: false,
       }
 
-      // Adjust position relative to parent if a parent exists
-
       // Update nodes and resize parent nodes if necessary
       const updatedNodes = structuredClone([...nodes, newNode])
       if (parentId) {

library/lib/components/popovers/edgePopovers/EdgeEditPopover.tsx

@@ -39,7 +39,7 @@ export const EdgeEditPopover: React.FC<PopoverProps> = ({ elementId }) => {
   const targetName = (targetNode?.data?.name as string) ?? "Target"
 
   return (
-    <>
+    <Box sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
       {/* Swap icon for source/target swap */}
       {handleSwap && (
         <Box sx={{ display: "flex", justifyContent: "flex-end" }}>
@@ -112,6 +112,6 @@ export const EdgeEditPopover: React.FC<PopoverProps> = ({ elementId }) => {
         size="small"
         fullWidth
       />
-    </>
+    </Box>
   )
 }

library/lib/constants/dropElementConfig.tsx

@@ -51,7 +51,6 @@ export const dropElementConfigs: Record<DiagramType, DropElementConfig[]> = {
     },
     {
       type: "class",
-
       width: droppedElementWidth,
       height: 140,
       defaultData: {
@@ -68,7 +67,6 @@ export const dropElementConfigs: Record<DiagramType, DropElementConfig[]> = {
     },
     {
       type: "class",
-
       width: droppedElementWidth,
       height: 110,
       defaultData: {

library/lib/hooks/useConnect.ts

@@ -80,7 +80,7 @@ export const useConnect = () => {
         ...connection,
         id: generateUUID(),
         type: EDGE_TYPE,
-        selected: true,
+        selected: false,
       }
 
       addEdge(newEdge)
@@ -156,7 +156,7 @@ export const useConnect = () => {
   const onEdgesDelete: OnEdgesDelete = useCallback(() => {
     startEdge.current = null
     connectionStartParams.current = null
-  }, [])
+  }, [setEdges])
 
   return { onConnect, onConnectEnd, onConnectStart, onEdgesDelete }
 }