add oneToManyRelationSelfPath and manyToOneRelationSelfPath

src/core/providers/canvas-schema/canvas.const.ts

@@ -8,7 +8,7 @@ const TABLE_WIDTH = 320; // Width of the table rectangle
 const HEADER_HEIGHT = FONT_SIZE + ROW_PADDING; // Height of the table header
 const DEFAULT_TABLE_WIDTH = TABLE_WIDTH;
 const ROW_HEIGHT = FONT_SIZE + ROW_PADDING; // Height of the table line
-const HORIZONTAL_LEFT_EXTENSION = 15; // Horizontal extension for the relation line 1:1
+const HORIZONTAL_LEFT_EXTENSION = 20; // Horizontal extension for the relation line 1:1
 
 export const TABLE_CONST = {
   FONT_SIZE,

src/pods/canvas/components/relation/database-relation-self.business.ts

@@ -0,0 +1,5 @@
+import { Coords } from '@/core/model';
+import { FORK_WIDTH } from './relation.vm';
+
+export const selfRelationcalculateOriginMinusFork = (startCoords: Coords) =>
+  startCoords.x - FORK_WIDTH;

src/pods/canvas/components/relation/database-relation-self.component.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import { Coords, GUID } from '@/core/model';
 import { RelationType, TABLE_CONST } from '@/core/providers';
-import { ClickableLineComponent } from './components';
-import { calculateOriginMinusForkWidthLogic } from './relation.business';
+import { ClickableLineComponent, ForkComponent } from './components';
+import { isDrawLeftToRightLogic } from './relation.business';
+import { selfRelationcalculateOriginMinusFork } from './database-relation-self.business';
 import classes from './database-relation.component.module.css';
 
 interface DatabaseSelfRelationshipProps {
@@ -28,18 +29,47 @@ export const DatabaseRelationSelfComponent: React.FC<
     onDoubleClick,
   } = props;
 
-  const originXMinusFork = calculateOriginMinusForkWidthLogic(
+  // Determine the direction of the fork
+  const isDrawLeftToRight = isDrawLeftToRightLogic(
     relationType,
-    startCoords
+    startCoords,
+    endCoords
   );
 
+  const originXMinusFork = selfRelationcalculateOriginMinusFork(startCoords);
+
   const oneToOneRelationSelfPath = `
-  M ${originXMinusFork} ${startCoords.y} 
-  H ${originXMinusFork - TABLE_CONST.HORIZONTAL_LEFT_EXTENSION} 
+  M ${startCoords.x} ${startCoords.y} 
+  H ${startCoords.x - TABLE_CONST.HORIZONTAL_LEFT_EXTENSION} 
   V ${endCoords.y} 
+  H ${endCoords.x}
+  `;
+
+  const oneToManyRelationSelfPath = `
+  M ${startCoords.x} ${startCoords.y} 
+  H ${startCoords.x - TABLE_CONST.HORIZONTAL_LEFT_EXTENSION} 
+  V ${endCoords.y}
   H ${originXMinusFork}
   `;
 
+  const manyToOneRelationSelfPath = `
+  M ${originXMinusFork} ${startCoords.y} 
+  H ${startCoords.x - TABLE_CONST.HORIZONTAL_LEFT_EXTENSION} 
+  V ${endCoords.y}
+  H ${endCoords.x}
+  `;
+
+  const getRelationPathBasedOnType = (relationType: RelationType) => {
+    switch (relationType) {
+      case '1:M':
+        return oneToManyRelationSelfPath;
+      case 'M:1':
+        return manyToOneRelationSelfPath;
+      default:
+        return oneToOneRelationSelfPath;
+    }
+  };
+
   return (
     <svg>
       {/* Glow filter if selected */}
@@ -53,13 +83,29 @@ export const DatabaseRelationSelfComponent: React.FC<
         </filter>
       </defs>
       <path
-        d={oneToOneRelationSelfPath}
+        d={getRelationPathBasedOnType(relationType)}
         className={
           isSelected ? classes.selectedRelation : classes.nonSelectedRelation
         }
         filter={isSelected ? `url(#table_glow)` : ''}
       />
 
+      {/* Draw the fork */}
+      {relationType === '1:M' && (
+        <ForkComponent
+          isSelected={isSelected}
+          forkCoords={{ x: originXMinusFork, y: endCoords.y }}
+          drawLeftToRight={!isDrawLeftToRight}
+        />
+      )}
+      {relationType === 'M:1' && (
+        <ForkComponent
+          isSelected={isSelected}
+          forkCoords={{ x: originXMinusFork, y: startCoords.y }}
+          drawLeftToRight={!isDrawLeftToRight}
+        />
+      )}
+
       <ClickableLineComponent
         id={id}
         startCoords={startCoords}