From 4afae9bfa9709fb4a441d5d42e87caa2054b185e Mon Sep 17 00:00:00 2001
From: Guy Ben-Aharon <baguy3@gmail.com>
Date: Fri, 23 Aug 2024 01:49:11 +0300
Subject: [PATCH] double click on edge to edit

---
 .../chartdb-context/chartdb-provider.tsx      |  5 +-
 src/context/layout-context/layout-context.tsx |  8 ++++
 .../layout-context/layout-provider.tsx        |  4 ++
 src/pages/editor-page/canvas/table-edge.tsx   | 48 ++++++++++++++++---
 src/pages/editor-page/canvas/table-node.tsx   |  5 ++
 .../relationship-list/relationship-list.tsx   |  5 ++
 6 files changed, 67 insertions(+), 8 deletions(-)

diff --git a/src/context/chartdb-context/chartdb-provider.tsx b/src/context/chartdb-context/chartdb-provider.tsx
index cd12c4ae..8c5045b1 100644
--- a/src/context/chartdb-context/chartdb-provider.tsx
+++ b/src/context/chartdb-context/chartdb-provider.tsx
@@ -452,7 +452,8 @@ export const ChartDBProvider: React.FC<React.PropsWithChildren> = ({
             const field: DBField = {
                 id: generateId(),
                 name: `field_${(table?.fields?.length ?? 0) + 1}`,
-                type: 'bigint',
+                type:
+                    databaseType === DatabaseType.SQLITE ? 'integer' : 'bigint',
                 unique: false,
                 nullable: true,
                 primaryKey: false,
@@ -463,7 +464,7 @@ export const ChartDBProvider: React.FC<React.PropsWithChildren> = ({
 
             return field;
         },
-        [addField, getTable]
+        [addField, getTable, databaseType]
     );
 
     const getIndex: ChartDBContext['getIndex'] = useCallback(
diff --git a/src/context/layout-context/layout-context.tsx b/src/context/layout-context/layout-context.tsx
index 54880ab0..9945ed98 100644
--- a/src/context/layout-context/layout-context.tsx
+++ b/src/context/layout-context/layout-context.tsx
@@ -6,6 +6,10 @@ export type SidebarSection = 'tables' | 'relationships';
 export interface LayoutContext {
     openedTableInSidebar: string | undefined;
     openTableFromSidebar: (tableId: string) => void;
+
+    openedRelationshipInSidebar: string | undefined;
+    openRelationshipFromSidebar: (relationshipId: string) => void;
+
     selectedSidebarSection: SidebarSection;
     selectSidebarSection: (section: SidebarSection) => void;
 }
@@ -13,6 +17,10 @@ export interface LayoutContext {
 export const layoutContext = createContext<LayoutContext>({
     openedTableInSidebar: undefined,
     selectedSidebarSection: 'tables',
+
+    openedRelationshipInSidebar: undefined,
+    openRelationshipFromSidebar: emptyFn,
+
     selectSidebarSection: emptyFn,
     openTableFromSidebar: emptyFn,
 });
diff --git a/src/context/layout-context/layout-provider.tsx b/src/context/layout-context/layout-provider.tsx
index 8c9e7820..86fe37d9 100644
--- a/src/context/layout-context/layout-provider.tsx
+++ b/src/context/layout-context/layout-provider.tsx
@@ -7,6 +7,8 @@ export const LayoutProvider: React.FC<React.PropsWithChildren> = ({
     const [openedTableInSidebar, setOpenedTableInSidebar] = React.useState<
         string | undefined
     >();
+    const [openedRelationshipInSidebar, setOpenedRelationshipInSidebar] =
+        React.useState<string | undefined>();
     const [selectedSidebarSection, setSelectedSidebarSection] =
         React.useState<SidebarSection>('tables');
 
@@ -17,6 +19,8 @@ export const LayoutProvider: React.FC<React.PropsWithChildren> = ({
                 selectedSidebarSection,
                 openTableFromSidebar: setOpenedTableInSidebar,
                 selectSidebarSection: setSelectedSidebarSection,
+                openedRelationshipInSidebar,
+                openRelationshipFromSidebar: setOpenedRelationshipInSidebar,
             }}
         >
             {children}
diff --git a/src/pages/editor-page/canvas/table-edge.tsx b/src/pages/editor-page/canvas/table-edge.tsx
index b026c8cd..282503e4 100644
--- a/src/pages/editor-page/canvas/table-edge.tsx
+++ b/src/pages/editor-page/canvas/table-edge.tsx
@@ -1,6 +1,5 @@
 import React, { useMemo } from 'react';
 import {
-    BaseEdge,
     Edge,
     EdgeProps,
     getSmoothStepPath,
@@ -10,6 +9,8 @@ import {
 import { DBRelationship } from '@/lib/domain/db-relationship';
 import { RIGHT_HANDLE_ID_PREFIX } from './table-node-field';
 import { useChartDB } from '@/hooks/use-chartdb';
+import { useLayout } from '@/hooks/use-layout';
+import { cn } from '@/lib/utils';
 
 export type TableEdgeType = Edge<
     {
@@ -29,8 +30,15 @@ export const TableEdge: React.FC<EdgeProps<TableEdgeType>> = ({
     selected,
 }) => {
     const { getInternalNode, getEdge } = useReactFlow();
+    const { openRelationshipFromSidebar, selectSidebarSection } = useLayout();
+
     const { relationships } = useChartDB();
 
+    const openRelationshipInEditor = () => {
+        selectSidebarSection('relationships');
+        openRelationshipFromSidebar(id);
+    };
+
     const edgeNumber = relationships
         .filter(
             (relationship) =>
@@ -118,10 +126,38 @@ export const TableEdge: React.FC<EdgeProps<TableEdgeType>> = ({
     );
 
     return (
-        <BaseEdge
-            id={id}
-            path={edgePath}
-            className={`!stroke-2 ${selected ? '!stroke-slate-500' : '!stroke-slate-300'}`}
-        />
+        <>
+            <path
+                id={id}
+                d={edgePath}
+                fill="none"
+                className={cn([
+                    'react-flow__edge-path',
+                    `!stroke-2 ${selected ? '!stroke-slate-500' : '!stroke-slate-300'}`,
+                ])}
+                onClick={(e) => {
+                    if (e.detail === 2) {
+                        openRelationshipInEditor();
+                    }
+                }}
+            />
+            <path
+                d={edgePath}
+                fill="none"
+                strokeOpacity={0}
+                strokeWidth={20}
+                className="react-flow__edge-interaction"
+                onClick={(e) => {
+                    if (e.detail === 2) {
+                        openRelationshipInEditor();
+                    }
+                }}
+            />
+        </>
+        // <BaseEdge
+        //     id={id}
+        //     path={edgePath}
+        //     className={`!stroke-2 ${selected ? '!stroke-slate-500' : '!stroke-slate-300'}`}
+        // />
     );
 };
diff --git a/src/pages/editor-page/canvas/table-node.tsx b/src/pages/editor-page/canvas/table-node.tsx
index 1cfbce14..8e45189f 100644
--- a/src/pages/editor-page/canvas/table-node.tsx
+++ b/src/pages/editor-page/canvas/table-node.tsx
@@ -31,6 +31,11 @@ export const TableNode: React.FC<NodeProps<TableNodeType>> = ({
     return (
         <div
             className={`flex flex-col w-full bg-background border ${selected ? 'border-slate-400' : ''} rounded-lg shadow-sm`}
+            onClick={(e) => {
+                if (e.detail === 2) {
+                    openTableInEditor();
+                }
+            }}
         >
             <NodeResizer
                 isVisible={focused}
diff --git a/src/pages/editor-page/side-panel/relationships-section/relationship-list/relationship-list.tsx b/src/pages/editor-page/side-panel/relationships-section/relationship-list/relationship-list.tsx
index f2e9c6d7..0f5eac61 100644
--- a/src/pages/editor-page/side-panel/relationships-section/relationship-list/relationship-list.tsx
+++ b/src/pages/editor-page/side-panel/relationships-section/relationship-list/relationship-list.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { Accordion } from '@/components/accordion/accordion';
 import { RelationshipListItem } from './relationship-list-item/relationship-list-item';
 import { DBRelationship } from '@/lib/domain/db-relationship';
+import { useLayout } from '@/hooks/use-layout';
 
 export interface TableListProps {
     relationships: DBRelationship[];
@@ -10,11 +11,15 @@ export interface TableListProps {
 export const RelationshipList: React.FC<TableListProps> = ({
     relationships,
 }) => {
+    const { openRelationshipFromSidebar, openedRelationshipInSidebar } =
+        useLayout();
     return (
         <Accordion
             type="single"
             collapsible
             className="flex flex-col w-full gap-1"
+            value={openedRelationshipInSidebar}
+            onValueChange={openRelationshipFromSidebar}
         >
             {relationships.map((relationship) => (
                 <RelationshipListItem