Merge branch 'main' of https://github.com/drawdb-io/drawdb into pr261

Author: 1ilit

.github/FUNDING.yml

@@ -5,6 +5,7 @@ on:
     branches: [ "main" ]
   pull_request:
     branches: [ "main" ]
+    types: [ opened, synchronize, reopened ]
 
 jobs:
   build:

.github/workflows/build.yml

@@ -4,6 +4,7 @@ WORKDIR /app
 COPY package*.json ./
 RUN npm ci
 COPY . .
+ENV NODE_OPTIONS="--max-old-space-size=4096"
 RUN npm run build
 
 # Stage 2: Setup the Nginx Server to serve the app

Dockerfile

@@ -1,20 +1,23 @@
-<h3 align="center">
-    <img width="80" alt="drawdb logo" src="./src/assets/icon-dark.png">
-</h3>
-
-<h3 align="center">Free, simple, and intuitive database design tool and SQL generator.</h3>
-
-<p align="center">
-    <a href="https://drawdb.app/">drawDB</a>
-    ·  
-    <a href="https://discord.gg/BrjZgNrmR6">Discord</a>
-    ·  
-    <a href="https://x.com/drawDB_">X</a>
-</p>
-
-<h3 align="center"><img width="700" style="border-radius:5px;" alt="demo" src="drawdb.gif"></h3>
-
-## drawDB
+<div align="center">
+    <img width="64" alt="drawdb logo" src="./src/assets/icon-dark.png">
+    <h1>drawDB</h1>
+</div>
+
+<h3 align="center">Free, simple, and intuitive database schema editor and SQL generator.</h3>
+
+<div align="center" style="margin-bottom:12px;">
+    <a href="https://drawdb.app/" style="display: flex; align-items: center;">
+        <img src="https://img.shields.io/badge/Start%20building-grey" alt="drawDB"/>
+    </a>
+    <a href="https://discord.gg/BrjZgNrmR6" style="display: flex; align-items: center;">
+        <img src="https://img.shields.io/discord/1196658537208758412.svg?label=Join%20the%20Discord&logo=discord" alt="Discord"/>
+    </a>
+    <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>
+</div>
+
+<h3 align="center"><img width="700" style="border-radius:5px;" alt="demo" src="drawdb.png"></h3>
 
 DrawDB is a robust and user-friendly database entity relationship (DBER) editor right in your browser. Build diagrams with a few clicks, export sql scripts, customize your editor, and more without creating an account. See the full set of features [here](https://drawdb.app/).
 

README.md

@@ -12,12 +12,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",
@@ -30,7 +32,7 @@
     "jsonschema": "^1.4.1",
     "jspdf": "^2.5.1",
     "lexical": "^0.12.5",
-    "node-sql-parser": "^5.3.2",
+    "node-sql-parser": "^5.3.7",
     "octokit": "^4.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

drawdb.gif

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

drawdb.png

@@ -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={

package-lock.json

@@ -3,6 +3,7 @@ import {
   Action,
   Cardinality,
   Constraint,
+  darkBgTheme,
   ObjectType,
 } from "../../data/constants";
 import { Toast } from "@douyinfe/semi-ui";
@@ -431,9 +432,9 @@ export default function Canvas() {
       cardinality: Cardinality.ONE_TO_ONE,
       updateConstraint: Constraint.NONE,
       deleteConstraint: Constraint.NONE,
-      name: `${tables[linkingLine.startTableId].name}_${
+      name: `fk_${tables[linkingLine.startTableId].name}_${
         tables[linkingLine.startTableId].fields[linkingLine.startFieldId].name
-      }_fk`,
+      }_${tables[hoveredTable.tableId].name}`,
       id: relationships.length,
     };
     delete newRelationship.startX;
@@ -449,7 +450,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;
@@ -498,7 +499,7 @@ export default function Canvas() {
         className="w-full h-full"
         style={{
           cursor: pointer.style,
-          backgroundColor: theme === "dark" ? "rgba(22, 22, 26, 1)" : "white",
+          backgroundColor: theme === "dark" ? darkBgTheme : "white",
         }}
       >
         {settings.showGrid && (