Lines

README.md

@@ -15,9 +15,6 @@
     <a href="https://x.com/drawDB_" style="display: flex; align-items: center;">
         <img src="https://img.shields.io/badge/Follow%20us%20on%20X-blue?logo=X" alt="Follow us on X"/>
     </a>
-    <a href="https://buymeacoffee.com/drawdb" style="display: flex; align-items: center;">
-        <img src="https://img.shields.io/badge/Support%20us-grey?logo=buymeacoffee" alt="Support us"/>
-    </a>
 </div>
 
 <h3 align="center"><img width="700" style="border-radius:5px;" alt="demo" src="drawdb.png"></h3>

package.json

@@ -13,12 +13,14 @@
   "dependencies": {
     "@codemirror/lang-json": "^6.0.1",
     "@codemirror/lang-sql": "^6.6.3",
+    "@dbml/core": "^3.9.7-alpha.0",
     "@douyinfe/semi-ui": "^2.51.3",
     "@lexical/react": "^0.12.5",
     "@uiw/codemirror-theme-github": "^4.21.25",
     "@uiw/codemirror-theme-vscode": "^4.21.25",
     "@uiw/react-codemirror": "^4.21.25",
     "@vercel/analytics": "^1.2.2",
+    "@vercel/speed-insights": "^1.2.0",
     "axios": "^1.7.4",
     "classnames": "^2.5.1",
     "dexie": "^3.2.4",

public/robots.txt

@@ -2,7 +2,6 @@
 User-agent: *
 Allow: /
 Allow: /editor
-Allow: /shortcuts
 Allow: /templates
 Disallow: /bug-report
 Disallow: /survey

src/App.jsx

@@ -3,7 +3,6 @@ import { useLayoutEffect } from "react";
 import Editor from "./pages/Editor";
 import Survey from "./pages/Survey";
 import BugReport from "./pages/BugReport";
-import Shortcuts from "./pages/Shortcuts";
 import Templates from "./pages/Templates";
 import LandingPage from "./pages/LandingPage";
 import SettingsContextProvider from "./context/SettingsContext";
@@ -33,14 +32,6 @@ export default function App() {
               </ThemedPage>
             }
           />
-          <Route
-            path="/shortcuts"
-            element={
-              <ThemedPage>
-                <Shortcuts />
-              </ThemedPage>
-            }
-          />
           <Route
             path="/bug-report"
             element={

src/components/EditorCanvas/Canvas.jsx

@@ -1,7 +1,8 @@
 import { useRef, useState } from "react";
 import {
   Action,
-  Cardinality,
+  RelationshipType,
+  RelationshipCardinalities,
   Constraint,
   darkBgTheme,
   ObjectType,
@@ -635,7 +636,7 @@ export default function Canvas() {
     });
   };
 
-  const handleGripField = (field) => {
+  const handleGripField = (field, fieldTableid) => {
       // A field can be a foreign key only if it's a primary key or both NOT NULL and UNIQUE.
       // If it can't be selected, show an error message and exit.
       if (!field.primary && !(field.notNull && field.unique)) {
@@ -646,10 +647,14 @@ export default function Canvas() {
     setDragging({ element: ObjectType.NONE, id: -1, prevX: 0, prevY: 0 });
     setLinkingLine({
       ...linkingLine,
-      startTableId: field.tableId,
+      startTableId: fieldTableid,
       startFieldId: field.id,
       startX: pointer.spaces.diagram.x,
       startY: pointer.spaces.diagram.y,
+      endX: pointer.spaces.diagram.x,
+      endY: pointer.spaces.diagram.y,
+      endTableId: -1,
+      endFieldId: -1,
     });
     setLinking(true);
   };
@@ -659,31 +664,52 @@ export default function Canvas() {
     // Get the childTable and parentTable
     const childTable = tables.find((t) => t.id === hoveredTable.tableId);
     const parentTable = tables.find((t) => t.id === linkingLine.startTableId);
+
+    if (!parentTable) {
+      console.error("Parent table not found for linking.");
+      setLinking(false);
+      return;
+    }
+    if (!childTable) {
+      console.error("Child table not found for linking.");
+      setLinking(false);
+      return;
+    }
     const parentFields = parentTable.fields.filter((field) => field.primary);
-  
+
     if (parentFields.length === 0) {
       Toast.info(t("no_primary_key"));
+      setLinking(false);
       return;
     }
     // If the relationship is recursive
     const recursiveRelation = parentTable === childTable;
     if (!recursiveRelation) {
       if (!areFieldsCompatible(parentFields, childTable)) {
         Toast.info(t("duplicate_field_name"));
+        setLinking(false);
         return;
       }
     }
     // Check if the relationship already exists
     const alreadyLinked = relationships.some(
       (rel) =>
         rel.startTableId === linkingLine.startTableId &&
-        rel.endTableId === hoveredTable.tableId
+        rel.endTableId === hoveredTable.tableId &&
+        rel.startFieldId === linkingLine.startFieldId &&
+        rel.endFieldId === (parentFields.map(
+          (field, index) =>
+            childTable.fields.reduce(
+              (maxId, f) =>
+                Math.max(maxId, typeof f.id === 'number' ? f.id : -1), -1) + 1 + index)[0])
     );
     if (alreadyLinked) {
       Toast.info(t("duplicate_relationship"));
+      setLinking(false);
       return;
     }
-
+    // Save the ID of the child table before modifying its fields
+    const childTableIdForFks = childTable.id;
     // Generate new fields for the childTable
     const newFields = parentFields.map((field, index) => ({
       name: recursiveRelation ? "" : field.name,
@@ -701,39 +727,38 @@ export default function Canvas() {
         tableId: parentTable.id,
         fieldId: field.id,
       },
-      id: childTable.fields.length + index, // Ensure IDs are unique
+      id: childTable.fields.reduce((maxId, f) => Math.max(maxId, typeof f.id === 'number' ? f.id : -1), -1) + 1 + index,
     }));
-
     // Concatenate the existing fields with the new fields
     const updatedChildFields = [...childTable.fields, ...newFields];
-
     // Update the childTable with the new fields
-    updateTable(childTable.id, {
+    updateTable(childTableIdForFks, {
       fields: updatedChildFields,
     });
-
+    const actualStartFieldId = parentTable.fields.find(
+      (f) => f.id === linkingLine.startFieldId);
+    const relationshipName = `${parentTable.name}_${actualStartFieldId ? actualStartFieldId.name : 'table'}`;
     // Use the updated childTable fields to create the new relationship
     const newRelationship = {
-      ...linkingLine,
-      endTableId: childTable.id,
-      // The new fields are added at the end of the childTable fields
-      endFieldId: updatedChildFields.length - 1,
-      startTableId: parentTable.id,
-      startFieldId: parentFields[0].id,
-      Cardinality: Cardinality.ONE_TO_ONE,
+      startTableId: linkingLine.startTableId,
+      startFieldId: linkingLine.startFieldId,
+      endTableId: hoveredTable.tableId,
+      endFieldId: newFields.length > 0 ? newFields[0].id : undefined,
+      relationshipType: RelationshipType.ONE_TO_ONE, // Default, can be changed by editing the relationship
+      cardinality: RelationshipCardinalities[RelationshipType.ONE_TO_ONE][0].label,
       updateConstraint: Constraint.NONE,
       deleteConstraint: Constraint.NONE,
-      name: `fk_${parentTable.name}_${parentFields[0].name}`,
-      id: relationships.length,
-      endField: newFields,
+      name: relationshipName,
+      subtype: false,
+      subtype_restriction: "",
     };
 
     delete newRelationship.startX;
     delete newRelationship.startY;
     delete newRelationship.endX;
     delete newRelationship.endY;
     // Add the new relationship to the relationships array
-    addRelationship(newRelationship);
+    addRelationship(newRelationship, newFields, childTableIdForFks, true);
     setLinking(false);
   };
 
@@ -743,7 +768,7 @@ export default function Canvas() {
     (e) => {
       e.preventDefault();
 
-      if (e.ctrlKey) {
+      if (e.ctrlKey || e.metaKey) {
         // How "eager" the viewport is to
         // center the cursor's coordinates
         const eagernessFactor = 0.05;