Fixing how to paint in 1:1 relationships

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

@@ -8,6 +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
 
 export const TABLE_CONST = {
   FONT_SIZE,
@@ -20,4 +21,5 @@ export const TABLE_CONST = {
   HEADER_HEIGHT,
   DEFAULT_TABLE_WIDTH,
   ROW_HEIGHT,
+  HORIZONTAL_LEFT_EXTENSION,
 };

src/pods/canvas/canvas.pod.tsx

@@ -22,7 +22,6 @@ export const CanvasPod: React.FC = () => {
   const { openModal, closeModal, modalDialog } = useModalDialogContext();
   const {
     canvasSchema,
-    loadSchema,
     updateTablePosition,
     updateFullTable,
     doFieldToggleCollapse,

src/pods/canvas/components/relation/components/clickable-line.component.tsx

@@ -22,7 +22,7 @@ export const ClickableLineComponent: React.FC<Props> = props => {
       y1={startCoords.y}
       x2={endCoords.x}
       y2={endCoords.y}
-      strokeWidth={25}
+      strokeWidth={40}
       stroke="transparent"
       onClick={handleClick}
       onDoubleClick={() => onDoubleClick(id)}

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

@@ -6,6 +6,7 @@ import {
   calculateRelationXCoordinate,
   calculateRelationYCoordinate,
 } from '@/core/providers/canvas-schema/canvas.business';
+import { DatabaseRelationSelfComponent } from './database-relation-self.component';
 
 interface DatabaseRelationCollectionProps {
   schema: DatabaseSchemaVm;
@@ -50,15 +51,27 @@ export const DatabaseRelationCollectionComponent: React.FC<
       <React.Fragment
         key={`${relation.fromTableId}-${relation.fromFieldId}-${relation.toTableId}-${relation.toFieldId}`}
       >
-        <DatabaseRelationshipComponent
-          id={relation.id}
-          onClick={onSelectRelation}
-          onDoubleClick={onEditRelation}
-          relationType={relation.type}
-          startCoords={startCoords}
-          endCoords={endCoords}
-          isSelected={relation.id === schema.selectedElementId}
-        />
+        {relation.fromTableId !== relation.toTableId ? (
+          <DatabaseRelationshipComponent
+            id={relation.id}
+            onClick={onSelectRelation}
+            onDoubleClick={onEditRelation}
+            relationType={relation.type}
+            startCoords={startCoords}
+            endCoords={endCoords}
+            isSelected={relation.id === schema.selectedElementId}
+          />
+        ) : (
+          <DatabaseRelationSelfComponent
+            id={relation.id}
+            onClick={onSelectRelation}
+            onDoubleClick={onEditRelation}
+            relationType={relation.type}
+            startCoords={startCoords}
+            endCoords={endCoords}
+            isSelected={relation.id === schema.selectedElementId}
+          />
+        )}
       </React.Fragment>
     );
   };

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

@@ -0,0 +1,72 @@
+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 classes from './database-relation.component.module.css';
+
+interface DatabaseSelfRelationshipProps {
+  id: GUID;
+  relationType: RelationType;
+  startCoords: Coords;
+  endCoords: Coords;
+  onClick: (relationId: GUID) => void;
+  onDoubleClick: (relationId: GUID) => void;
+  isSelected: boolean;
+}
+
+export const DatabaseRelationSelfComponent: React.FC<
+  DatabaseSelfRelationshipProps
+> = props => {
+  const {
+    id,
+    relationType,
+    startCoords,
+    endCoords,
+    isSelected,
+    onClick,
+    onDoubleClick,
+  } = props;
+
+  const originXMinusFork = calculateOriginMinusForkWidthLogic(
+    relationType,
+    startCoords
+  );
+
+  const oneToOneRelationSelfPath = `
+  M ${originXMinusFork} ${startCoords.y} 
+  H ${originXMinusFork - TABLE_CONST.HORIZONTAL_LEFT_EXTENSION} 
+  V ${endCoords.y} 
+  H ${originXMinusFork}
+  `;
+
+  return (
+    <svg>
+      {/* Glow filter if selected */}
+      <defs>
+        <filter id="table_glow">
+          <feGaussianBlur stdDeviation="3.5" result="coloredBlur" />
+          <feMerge>
+            <feMergeNode in="coloredBlur" />
+            <feMergeNode in="SourceGraphic" />
+          </feMerge>
+        </filter>
+      </defs>
+      <path
+        d={oneToOneRelationSelfPath}
+        className={
+          isSelected ? classes.selectedRelation : classes.nonSelectedRelation
+        }
+        filter={isSelected ? `url(#table_glow)` : ''}
+      />
+
+      <ClickableLineComponent
+        id={id}
+        startCoords={startCoords}
+        endCoords={endCoords}
+        onClick={onClick}
+        onDoubleClick={onDoubleClick}
+      />
+    </svg>
+  );
+};

src/pods/canvas/components/relation/database-relation.component.module.css

@@ -2,9 +2,11 @@
 .non-selected-relation {
   stroke: #ffae42;
   stroke-width: 2px;
+  fill: none;
 }
 
 .selected-relation {
   stroke: #00ee00;
   stroke-width: 4px;
+  fill: none;
 }