From eaf3fe8b683338514cada6b3e06df39e3051f5f7 Mon Sep 17 00:00:00 2001
From: sokphaladam <sokphaladam@gmail.com>
Date: Fri, 10 Jan 2025 17:26:46 +0700
Subject: [PATCH] add CommonDialogProvider and improve error handling in
 ScreenDropZone

---
 package-lock.json                             | 15 +++++++++++++
 .../(theme)/playground/client/page-client.tsx | 11 ++++++----
 .../erd-table-column.tsx                      |  6 ++---
 .../gui/tabs/relational-diagram-tab/index.tsx | 22 +++++++++++--------
 src/components/screen-dropzone.tsx            | 15 +++++++++++--
 5 files changed, 51 insertions(+), 18 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 5480d41f..534a94eb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21443,6 +21443,21 @@
         "type": "github",
         "url": "https://github.com/sponsors/wooorm"
       }
+    },
+    "node_modules/@next/swc-win32-ia32-msvc": {
+      "version": "14.2.20",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.20.tgz",
+      "integrity": "sha512-igQW/JWciTGJwj3G1ipalD2V20Xfx3ywQy17IV0ciOUBbFhNfyU1DILWsTi32c8KmqgIDviUEulW/yPb2FF90w==",
+      "cpu": [
+        "ia32"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
     }
   }
 }
diff --git a/src/app/(theme)/playground/client/page-client.tsx b/src/app/(theme)/playground/client/page-client.tsx
index d93e3da6..03cb977a 100644
--- a/src/app/(theme)/playground/client/page-client.tsx
+++ b/src/app/(theme)/playground/client/page-client.tsx
@@ -17,6 +17,7 @@ import {
   DropdownMenuSeparator,
 } from "@/components/ui/dropdown-menu";
 import { Button } from "@/components/ui/button";
+import { CommonDialogProvider } from "@/components/common-dialog";
 
 function OverlayAround({
   x,
@@ -324,10 +325,12 @@ export default function PlaygroundEditorBody({
 
   return (
     <>
-      <Script src="/sqljs/sql-wasm.js" onReady={onReady} />
-      <ScreenDropZone onFileDrop={setHandler} />
-      <Onboarding />
-      {dom}
+      <CommonDialogProvider>
+        <Script src="/sqljs/sql-wasm.js" onReady={onReady} />
+        <ScreenDropZone onFileDrop={setHandler} />
+        <Onboarding />
+        {dom}
+      </CommonDialogProvider>
     </>
   );
 }
diff --git a/src/components/gui/tabs/relational-diagram-tab/erd-table-column.tsx b/src/components/gui/tabs/relational-diagram-tab/erd-table-column.tsx
index 06440ba7..b22793a7 100644
--- a/src/components/gui/tabs/relational-diagram-tab/erd-table-column.tsx
+++ b/src/components/gui/tabs/relational-diagram-tab/erd-table-column.tsx
@@ -11,7 +11,7 @@ export default function ERDTableColumn({
 }) {
   return (
     <TableRow className="group relative text-xs">
-      <TableCell className="p-0 pl-0 pr-6 font-light h-[30px] text-sm pl-2 font-mono">
+      <TableCell className="p-0 pr-6 font-light h-[30px] text-sm pl-2 font-mono">
         <BaseHandle
           id={column.title}
           type="target"
@@ -23,11 +23,11 @@ export default function ERDTableColumn({
             {column.pk && <Key size={15} color={"rgb(153 27 27)"} />}
             {column.fk && <Key size={15} color={"rgb(245 158 11)"} />}
           </div>
-          <div>{column.title}</div>
+          <div className="max-w-[120px] truncate">{column.title}</div>
         </div>
       </TableCell>
       <TableCell className="p-0 pr-0 text-right font-thin h-[30px] text-sm">
-        <div className="h-[30px] flex items-center justify-end pr-2 font-mono text-muted-foreground">
+        <div className="h-[30px] flex items-center justify-end pr-2 font-mono text-muted-foreground max-w-[75px] truncate">
           {column.type}
         </div>
         <BaseHandle
diff --git a/src/components/gui/tabs/relational-diagram-tab/index.tsx b/src/components/gui/tabs/relational-diagram-tab/index.tsx
index a0a2d207..0cf8a76f 100644
--- a/src/components/gui/tabs/relational-diagram-tab/index.tsx
+++ b/src/components/gui/tabs/relational-diagram-tab/index.tsx
@@ -129,16 +129,16 @@ function mapSchema(
 
         initialEdges.push({
           type: "smoothstep",
-          markerStart: {
+          markerEnd: {
             type: MarkerType.ArrowClosed,
             width: 14,
             height: 14,
           },
           id: `${item.name}-${constraint.foreignKey.foreignTableName}`,
-          target: item.name,
-          source: constraint.foreignKey.foreignTableName || "",
-          targetHandle: columnName,
-          sourceHandle: constraint.foreignKey.foreignColumns
+          source: item.name,
+          target: constraint.foreignKey.foreignTableName || "",
+          sourceHandle: columnName,
+          targetHandle: constraint.foreignKey.foreignColumns
             ? constraint.foreignKey.foreignColumns[0]
             : "",
           animated: true,
@@ -203,12 +203,16 @@ function mapSchema(
   // Rearrange the nodes with relationship
   // We need to find the position
   const relationshipRightPosition =
-    (Math.max(...layoutRelationship.nodes.map((x) => x.position.x)) ?? 0) +
-    NODE_MARGIN +
-    MAX_NODE_WIDTH;
+    layoutRelationship.nodes.length === 0
+      ? 0
+      : (Math.max(...layoutRelationship.nodes.map((x) => x.position.x)) ?? 0) +
+        NODE_MARGIN +
+        MAX_NODE_WIDTH;
 
   const relationshipTopPosition =
-    Math.min(...layoutRelationship.nodes.map((x) => x.position.y)) ?? 0;
+    layoutRelationship.nodes.length === 0
+      ? 0
+      : Math.min(...layoutRelationship.nodes.map((x) => x.position.y)) ?? 0;
 
   // Calculate estimate area of the nodes without relationship
   const area =
diff --git a/src/components/screen-dropzone.tsx b/src/components/screen-dropzone.tsx
index 5488d8f7..f5e26ed8 100644
--- a/src/components/screen-dropzone.tsx
+++ b/src/components/screen-dropzone.tsx
@@ -1,12 +1,15 @@
 "use client";
 
 import { useEffect } from "react";
+import { useCommonDialog } from "./common-dialog";
 
 interface Props {
   onFileDrop: (handler: FileSystemFileHandle) => void;
 }
 
 export default function ScreenDropZone({ onFileDrop }: Props) {
+  const { showDialog } = useCommonDialog();
+
   useEffect(() => {
     const dropEventHandler = (e: DragEvent) => {
       e.preventDefault();
@@ -17,7 +20,15 @@ export default function ScreenDropZone({ onFileDrop }: Props) {
       if (!fileList) return;
       if (fileList.length === 0) return;
 
-      (fileList[0] as any).getAsFileSystemHandle().then(onFileDrop);
+      try {
+        (fileList[0] as any).getAsFileSystemHandle().then(onFileDrop);
+      } catch (error) {
+        showDialog({
+          destructive: true,
+          title: "Warning",
+          content: "Your browser are not support. please use another browser.",
+        });
+      }
     };
 
     const dragEventHandler = (e: DragEvent) => {
@@ -33,7 +44,7 @@ export default function ScreenDropZone({ onFileDrop }: Props) {
       window.document.removeEventListener("dragover", dragEventHandler);
       window.document.removeEventListener("drop", dropEventHandler);
     };
-  }, [onFileDrop]);
+  }, [onFileDrop, showDialog]);
 
   return <></>;
 }