fix conflict

src/common/components/icons/index.ts

@@ -5,3 +5,4 @@ export * from './canvas-setting-icon.component';
 export * from './relation-icon.component';
 export * from './zoom-in-icon.component';
 export * from './zoom-out-icon.component';
+export * from './export-icon.component';

src/common/components/index.ts

@@ -1,3 +1,4 @@
 export * from './modal-dialog';
 export * from './table-pk-picker';
 export * from './dropdown';
+export * from './icons';

src/common/components/modal-dialog/modal-dialog.const.ts

@@ -1,3 +1,4 @@
 export const CANVAS_SETTINGS_TITLE = 'Canvas Settings';
 export const EDIT_TABLE_TITLE = 'Edit table';
 export const EDIT_RELATION_TITLE = 'Edit relation';
+export const EDIT_COLLECTION_TITLE = 'Edit Collection';

src/core/model/index.ts

@@ -1,4 +1,5 @@
 export type FieldType = 'number' | 'string' | 'object' | 'objectId';
+export type ExportType = 'svg' | 'png' | 'mongo';
 
 export interface Size {
   width: number;

src/core/providers/canvas-schema/canvas-schema.business.spec.ts

@@ -24,6 +24,7 @@ describe('canvas-schema.business', () => {
       const dbSchema: DatabaseSchemaVm = {
         relations: [
           {
+            id: '20',
             fromFieldId: '10',
             fromTableId: '9',
             toFieldId: '1',
@@ -52,6 +53,7 @@ describe('canvas-schema.business', () => {
       const expectedResult: DatabaseSchemaVm = {
         relations: [
           {
+            id: '20',
             fromFieldId: '10',
             fromTableId: '9',
             toFieldId: '1',
@@ -109,6 +111,7 @@ describe('canvas-schema.business', () => {
       const dbSchema: DatabaseSchemaVm = {
         relations: [
           {
+            id: '20',
             fromFieldId: '10',
             fromTableId: '9',
             toFieldId: '1',
@@ -137,6 +140,7 @@ describe('canvas-schema.business', () => {
       const expectedResult: DatabaseSchemaVm = {
         relations: [
           {
+            id: '20',
             fromFieldId: '10',
             fromTableId: '9',
             toFieldId: '1',
@@ -187,6 +191,7 @@ describe('canvas-schema.business', () => {
       const dbSchema: DatabaseSchemaVm = {
         relations: [
           {
+            id: '20',
             fromFieldId: '10',
             fromTableId: '9',
             toFieldId: '1',
@@ -257,6 +262,7 @@ describe('canvas-schema.business', () => {
       const dbSchema: DatabaseSchemaVm = {
         relations: [
           {
+            id: '20',
             fromFieldId: '10',
             fromTableId: '9',
             toFieldId: '1',
@@ -297,6 +303,7 @@ describe('canvas-schema.business', () => {
       const expectedResult: DatabaseSchemaVm = {
         relations: [
           {
+            id: '20',
             fromFieldId: '10',
             fromTableId: '9',
             toFieldId: '1',
@@ -360,6 +367,7 @@ describe('canvas-schema.business', () => {
       const dbSchema: DatabaseSchemaVm = {
         relations: [
           {
+            id: '20',
             fromFieldId: '10',
             fromTableId: '9',
             toFieldId: '1',
@@ -426,6 +434,7 @@ describe('canvas-schema.business', () => {
       const expectedResult: DatabaseSchemaVm = {
         relations: [
           {
+            id: '20',
             fromFieldId: '10',
             fromTableId: '9',
             toFieldId: '1',
@@ -509,6 +518,7 @@ describe('canvas-schema.business', () => {
       const dbSchema: DatabaseSchemaVm = {
         relations: [
           {
+            id: '20',
             fromFieldId: '10',
             fromTableId: '9',
             toFieldId: '1',
@@ -537,6 +547,7 @@ describe('canvas-schema.business', () => {
       const expectedResult: DatabaseSchemaVm = {
         relations: [
           {
+            id: '20',
             fromFieldId: '10',
             fromTableId: '9',
             toFieldId: '1',

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

@@ -21,6 +21,7 @@ export interface FieldVm {
 export type RelationType = '1:1' | '1:M' | 'M:1';
 
 export interface RelationVm {
+  id: GUID;
   fromTableId: string;
   toTableId: string;
   fromFieldId: string;

src/core/providers/canvas-schema/canvas-updateposition.business.spec.ts

@@ -54,6 +54,7 @@ describe('calculateTablePosition', () => {
     ];
     const relations: RelationVm[] = [
       {
+        id: '20',
         fromTableId: '1',
         toTableId: '2',
         fromFieldId: '1',
@@ -177,6 +178,7 @@ describe('calculateTablePosition', () => {
     ];
     const relations: RelationVm[] = [
       {
+        id: '20',
         fromTableId: '1',
         toTableId: '2',
         fromFieldId: '1',
@@ -301,6 +303,7 @@ describe('calculateTablePosition', () => {
     ];
     const relations: RelationVm[] = [
       {
+        id: '20',
         fromTableId: '1',
         toTableId: '2',
         fromFieldId: '1',
@@ -425,6 +428,7 @@ describe('calculateTablePosition', () => {
     ];
     const relations: RelationVm[] = [
       {
+        id: '20',
         fromTableId: '1',
         toTableId: '2',
         fromFieldId: '1',
@@ -549,6 +553,7 @@ describe('calculateTablePosition', () => {
     ];
     const relations: RelationVm[] = [
       {
+        id: '20',
         fromTableId: '1',
         toTableId: '2',
         fromFieldId: '1',

src/core/providers/index.ts

@@ -1,3 +1,4 @@
 export * from './canvas-view-settings';
 export * from './modal-dialog-provider';
 export * from './theme-provider';
+export * from './canvas-schema';

src/pods/canvas/canvas-svg.component.tsx

@@ -16,6 +16,7 @@ interface Props {
   ) => void;
   onToggleCollapse: (tableId: GUID, fieldId: GUID) => void;
   onEditTable: (tableInfo: TableVm) => void;
+  onEditRelation: (relationId: GUID) => void;
 }
 
 export const CanvasSvgComponent: React.FC<Props> = props => {
@@ -26,6 +27,7 @@ export const CanvasSvgComponent: React.FC<Props> = props => {
     onUpdateTablePosition,
     onToggleCollapse,
     onEditTable,
+    onEditRelation,
   } = props;
   return (
     <svg
@@ -45,7 +47,10 @@ export const CanvasSvgComponent: React.FC<Props> = props => {
           canvasSize={canvasSize}
         />
       ))}
-      <DatabaseRelationCollectionComponent schema={canvasSchema} />
+      <DatabaseRelationCollectionComponent
+        schema={canvasSchema}
+        onEditRelation={onEditRelation}
+      />
     </svg>
   );
 };

src/pods/canvas/canvas.mock.data.ts

@@ -6,6 +6,7 @@ import {
 } from '@/core/providers/canvas-schema';
 import { TABLE_CONST } from '@/core/providers/canvas-schema/canvas.const';
 
+const tagRelationId = '1';
 const tagTableId = '1';
 const restaurantTableId = '2';
 const tagFieldId = GenerateGUID();
@@ -16,6 +17,7 @@ const restaurantIdField = GenerateGUID();
 
 const mockRelations: RelationVm[] = [
   {
+    id: tagRelationId,
     fromTableId: tagTableId,
     toTableId: restaurantTableId,
     fromFieldId: tagFieldId,

src/pods/canvas/canvas.pod.tsx

@@ -71,6 +71,10 @@ export const CanvasPod: React.FC = () => {
     }
   };
 
+  const handleEditRelation = (relationId: GUID) => {
+    console.log('TODO: handleEditRelation', relationId);
+  };
+
   return (
     <div
       className={classes.container}
@@ -84,6 +88,7 @@ export const CanvasPod: React.FC = () => {
         onUpdateTablePosition={updateTablePosition}
         onToggleCollapse={handleToggleCollapse}
         onEditTable={handleEditTable}
+        onEditRelation={handleEditRelation}
       />
     </div>
   );

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Coords } from '@/core/model';
+import { Coords, GUID } from '@/core/model';
 import { DatabaseSchemaVm, RelationVm } from '@/core/providers/canvas-schema';
 import DatabaseRelationshipComponent from './database-relation.component';
 import {
@@ -9,11 +9,12 @@ import {
 
 interface DatabaseRelationCollectionProps {
   schema: DatabaseSchemaVm;
+  onEditRelation: (relationId: GUID) => void;
 }
 
 export const DatabaseRelationCollectionComponent: React.FC<
   DatabaseRelationCollectionProps
-> = ({ schema }) => {
+> = ({ schema, onEditRelation }) => {
   const renderRelation = (relation: RelationVm) => {
     const fromTable = schema.tables.find(
       table => table.id === relation.fromTableId
@@ -47,6 +48,8 @@ export const DatabaseRelationCollectionComponent: React.FC<
     return (
       <DatabaseRelationshipComponent
         key={`${relation.fromTableId}-${relation.fromFieldId}-${relation.toTableId}-${relation.toFieldId}`}
+        id={relation.id}
+        onClick={onEditRelation}
         relationType={relation.type}
         startCoords={startCoords}
         endCoords={endCoords}

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

@@ -1,20 +1,24 @@
 import React from 'react';
 import { RelationType } from '@/core/providers/canvas-schema';
-import { Coords } from '@/core/model';
+import { Coords, GUID } from '@/core/model';
 
 interface DatabaseRelationshipProps {
+  id: GUID;
   relationType: RelationType;
   startCoords: Coords;
   endCoords: Coords;
+  onClick: (relationId: GUID) => void;
 }
 
 const FORK_WIDTH = 10;
 const FORK_LINE_SPACING = 5;
 
 const DatabaseRelationshipComponent: React.FC<DatabaseRelationshipProps> = ({
+  id,
   relationType,
   startCoords,
   endCoords,
+  onClick,
 }) => {
   const drawFork = (forkCoords: Coords, drawLeftToRight: boolean) => {
     const direction = drawLeftToRight ? 1 : -1;
@@ -48,6 +52,22 @@ const DatabaseRelationshipComponent: React.FC<DatabaseRelationshipProps> = ({
     );
   };
 
+  // Enhancemnt proposal: #127
+  // https://github.com/Lemoncode/mongo-modeler/pull/127
+  const drawClickableLine = () => {
+    return (
+      <line
+        x1={startCoords.x}
+        y1={startCoords.y}
+        x2={endCoords.x}
+        y2={endCoords.y}
+        strokeWidth={20}
+        stroke="transparent"
+        onClick={() => onClick(id)}
+      />
+    );
+  };
+
   // Determine the direction of the fork
   const isDrawLeftToRight =
     relationType === '1:M'
@@ -81,6 +101,8 @@ const DatabaseRelationshipComponent: React.FC<DatabaseRelationshipProps> = ({
         )}
       {relationType === 'M:1' &&
         drawFork({ x: originXMinusFork, y: startCoords.y }, !isDrawLeftToRight)}
+
+      {drawClickableLine()}
     </svg>
   );
 };

src/pods/edit-realtion/edit-relation.pod.tsx

@@ -19,6 +19,7 @@ export const EditRelationPod: React.FC<Props> = props => {
 
   //TODO: Initialize 'relation' with existing values when the user clicks on 'relation' SVG
   const [relation, setRelation] = React.useState<RelationVm>({
+    id: '20',
     fromFieldId: '',
     fromTableId: '',
     toFieldId: '',

src/pods/edit-table/edit-table.mapper.spec.ts

@@ -165,13 +165,15 @@ describe('pods/edit-table/edit-table.mappers', () => {
       };
       const relation: canvasModel.RelationVm[] = [
         {
+          id: '20',
           fromTableId: '01',
           toTableId: '02',
           fromFieldId: '1',
           toFieldId: '2',
           type: '1:1',
         },
         {
+          id: '21',
           fromTableId: '01',
           toTableId: '02',
           fromFieldId: '3',

src/pods/export/export-table.module.css

@@ -0,0 +1,7 @@
+.input-content {
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  gap: 15px;
+  margin: 10px;
+}