add CommonDialogProvider and improve error handling in ScreenDropZone

outerbase · Jan 10, 2025 · eaf3fe8 · eaf3fe8
1 parent bbe50fe
commit eaf3fe8
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 18 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -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
@@ -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
@@ -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 <></>;
 }