From d75f9d51668c96a26288a57004bab5770805afbc Mon Sep 17 00:00:00 2001 From: manudous Date: Mon, 22 Jan 2024 18:05:29 +0100 Subject: [PATCH 1/5] insert relation 1:1 --- .../canvas-schema/canvas.business.ts | 3 +- .../providers/canvas-schema/canvas.const.ts | 2 + .../components/clickable-line.component.tsx | 2 +- .../database-relation.component.module.css | 2 + .../relation/database-relation.component.tsx | 43 +++++++++++++------ 5 files changed, 38 insertions(+), 14 deletions(-) diff --git a/src/core/providers/canvas-schema/canvas.business.ts b/src/core/providers/canvas-schema/canvas.business.ts index d851ddd5..ddb04fce 100644 --- a/src/core/providers/canvas-schema/canvas.business.ts +++ b/src/core/providers/canvas-schema/canvas.business.ts @@ -184,7 +184,8 @@ export const calculateRelationYOffset = ( fieldId: GUID, table: TableVm ): number => { - const initialYPosition = table.y + TABLE_CONST.HEADER_HEIGHT; + const initialYPosition = + table.y + TABLE_CONST.HEADER_HEIGHT + TABLE_CONST.ROW_HEIGHT / 2; const result = seekField( fieldId, { found: false, YPosition: initialYPosition, parentCollapsed: false }, diff --git a/src/core/providers/canvas-schema/canvas.const.ts b/src/core/providers/canvas-schema/canvas.const.ts index f10fe4bf..78d8e9e5 100644 --- a/src/core/providers/canvas-schema/canvas.const.ts +++ b/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, }; diff --git a/src/pods/canvas/components/relation/components/clickable-line.component.tsx b/src/pods/canvas/components/relation/components/clickable-line.component.tsx index c708c05a..33978fb3 100644 --- a/src/pods/canvas/components/relation/components/clickable-line.component.tsx +++ b/src/pods/canvas/components/relation/components/clickable-line.component.tsx @@ -22,7 +22,7 @@ export const ClickableLineComponent: React.FC = props => { y1={startCoords.y} x2={endCoords.x} y2={endCoords.y} - strokeWidth={25} + strokeWidth={40} stroke="transparent" onClick={handleClick} onDoubleClick={() => onDoubleClick(id)} diff --git a/src/pods/canvas/components/relation/database-relation.component.module.css b/src/pods/canvas/components/relation/database-relation.component.module.css index a55c5513..59788445 100644 --- a/src/pods/canvas/components/relation/database-relation.component.module.css +++ b/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; } diff --git a/src/pods/canvas/components/relation/database-relation.component.tsx b/src/pods/canvas/components/relation/database-relation.component.tsx index 22a3b1a3..f2904e65 100644 --- a/src/pods/canvas/components/relation/database-relation.component.tsx +++ b/src/pods/canvas/components/relation/database-relation.component.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { RelationType } from '@/core/providers/canvas-schema'; +import { RelationType, TABLE_CONST } from '@/core/providers/canvas-schema'; import { Coords, GUID } from '@/core/model'; import { ClickableLineComponent, ForkComponent } from './components'; import { @@ -46,6 +46,13 @@ const DatabaseRelationshipComponent: React.FC = ({ isDrawLeftToRight ); + const oneToOneRelationPath = ` + M ${originXMinusFork} ${startCoords.y} + H ${originXMinusFork - TABLE_CONST.HORIZONTAL_LEFT_EXTENSION} + V ${endCoords.y} + H ${originXMinusFork} + `; + return ( {/* Glow filter if selected */} @@ -59,17 +66,29 @@ const DatabaseRelationshipComponent: React.FC = ({ - {/* Base line of the relationship */} - + {/* Render a path for 1:1 relationships */} + {relationType === '1:1' && ( + + )} + + {relationType !== '1:1' && ( + + )} {/* Draw the fork */} {relationType === '1:M' && ( From 6aa8db0883c761f11157bde9822a4ecd82149257 Mon Sep 17 00:00:00 2001 From: manudous Date: Mon, 22 Jan 2024 18:16:50 +0100 Subject: [PATCH 2/5] remove center vertically --- src/core/providers/canvas-schema/canvas.business.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/core/providers/canvas-schema/canvas.business.ts b/src/core/providers/canvas-schema/canvas.business.ts index ddb04fce..d851ddd5 100644 --- a/src/core/providers/canvas-schema/canvas.business.ts +++ b/src/core/providers/canvas-schema/canvas.business.ts @@ -184,8 +184,7 @@ export const calculateRelationYOffset = ( fieldId: GUID, table: TableVm ): number => { - const initialYPosition = - table.y + TABLE_CONST.HEADER_HEIGHT + TABLE_CONST.ROW_HEIGHT / 2; + const initialYPosition = table.y + TABLE_CONST.HEADER_HEIGHT; const result = seekField( fieldId, { found: false, YPosition: initialYPosition, parentCollapsed: false }, From e8aaaffd3b370e3bd7892ed92b7518a52a76ec5c Mon Sep 17 00:00:00 2001 From: manudous Date: Tue, 23 Jan 2024 10:00:52 +0100 Subject: [PATCH 3/5] create database-relation-self component --- ...database-relation-collection.component.tsx | 31 +++++--- .../database-relation-self.component.tsx | 72 +++++++++++++++++++ .../relation/database-relation.component.tsx | 43 ++++------- 3 files changed, 106 insertions(+), 40 deletions(-) create mode 100644 src/pods/canvas/components/relation/database-relation-self.component.tsx diff --git a/src/pods/canvas/components/relation/database-relation-collection.component.tsx b/src/pods/canvas/components/relation/database-relation-collection.component.tsx index a522331b..7651bcb3 100644 --- a/src/pods/canvas/components/relation/database-relation-collection.component.tsx +++ b/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< - + {relation.fromTableId !== relation.toTableId ? ( + + ) : ( + + )} ); }; diff --git a/src/pods/canvas/components/relation/database-relation-self.component.tsx b/src/pods/canvas/components/relation/database-relation-self.component.tsx new file mode 100644 index 00000000..0ef097c5 --- /dev/null +++ b/src/pods/canvas/components/relation/database-relation-self.component.tsx @@ -0,0 +1,72 @@ +import React from 'react'; +import { RelationType, TABLE_CONST } from '@/core/providers/canvas-schema'; +import { Coords, GUID } from '@/core/model'; +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 ( + + {/* Glow filter if selected */} + + + + + + + + + + + + + + ); +}; diff --git a/src/pods/canvas/components/relation/database-relation.component.tsx b/src/pods/canvas/components/relation/database-relation.component.tsx index f2904e65..22a3b1a3 100644 --- a/src/pods/canvas/components/relation/database-relation.component.tsx +++ b/src/pods/canvas/components/relation/database-relation.component.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { RelationType, TABLE_CONST } from '@/core/providers/canvas-schema'; +import { RelationType } from '@/core/providers/canvas-schema'; import { Coords, GUID } from '@/core/model'; import { ClickableLineComponent, ForkComponent } from './components'; import { @@ -46,13 +46,6 @@ const DatabaseRelationshipComponent: React.FC = ({ isDrawLeftToRight ); - const oneToOneRelationPath = ` - M ${originXMinusFork} ${startCoords.y} - H ${originXMinusFork - TABLE_CONST.HORIZONTAL_LEFT_EXTENSION} - V ${endCoords.y} - H ${originXMinusFork} - `; - return ( {/* Glow filter if selected */} @@ -66,29 +59,17 @@ const DatabaseRelationshipComponent: React.FC = ({ - {/* Render a path for 1:1 relationships */} - {relationType === '1:1' && ( - - )} - - {relationType !== '1:1' && ( - - )} + {/* Base line of the relationship */} + {/* Draw the fork */} {relationType === '1:M' && ( From c003eae4522a9c3c953f4874b76348d2b5f9e109 Mon Sep 17 00:00:00 2001 From: manudous Date: Tue, 23 Jan 2024 10:01:58 +0100 Subject: [PATCH 4/5] fix imports --- .../components/relation/database-relation-self.component.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pods/canvas/components/relation/database-relation-self.component.tsx b/src/pods/canvas/components/relation/database-relation-self.component.tsx index 0ef097c5..83041648 100644 --- a/src/pods/canvas/components/relation/database-relation-self.component.tsx +++ b/src/pods/canvas/components/relation/database-relation-self.component.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { RelationType, TABLE_CONST } from '@/core/providers/canvas-schema'; 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'; From d8dcee72a20ae2f0501bd954c224497da72c97ec Mon Sep 17 00:00:00 2001 From: manudous Date: Tue, 23 Jan 2024 10:07:05 +0100 Subject: [PATCH 5/5] merge from main --- src/pods/canvas/canvas.pod.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pods/canvas/canvas.pod.tsx b/src/pods/canvas/canvas.pod.tsx index 10ca12cf..623d6dee 100644 --- a/src/pods/canvas/canvas.pod.tsx +++ b/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,