Merge 800d56ae0b into aaf83b6f28

.github/workflows/build.yml

@@ -5,6 +5,7 @@ on:
     branches: [ "main" ]
   pull_request:
     branches: [ "main" ]
+  workflow_dispatch:
 
 jobs:
   build:

.gitignore

@@ -9,6 +9,7 @@ lerna-debug.log*
 
 node_modules
 dist
+install
 dist-ssr
 *.local
 

README.md

@@ -35,6 +35,13 @@ npm install
 npm run dev
 ```
 
+### Local Development Electron
+Make sure you have the local environment (`Local Development`) enabled before running Electron:
+
+```bash
+npm run electron
+```
+
 ### Build
 
 ```bash

main.cjs

@@ -0,0 +1,44 @@
+const { app, BrowserWindow, Menu } = require('electron');
+const path = require('path');
+
+process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true';
+
+function createWindow() {
+
+    const isDev = !app.isPackaged;
+    const win = new BrowserWindow({
+        width: 800,
+        height: 600,
+        icon: path.join(__dirname, 'public', 'icon.ico') ,
+        webPreferences: {
+            contextIsolation: true,
+            enableRemoteModule: false,
+        },
+    });
+
+    win.maximize();
+
+    if (isDev) {
+        win.loadURL('http://localhost:5173');
+        win.webContents.openDevTools(); 
+    } else {
+        win.loadURL(`file://${path.join(__dirname, 'dist/index.html')}`);
+        Menu.setApplicationMenu(null);
+    }
+}
+
+app.whenReady().then(() => {
+    createWindow();
+
+    app.on('activate', () => {
+        if (BrowserWindow.getAllWindows().length === 0) {
+            createWindow();
+        }
+    });
+});
+
+app.on('window-all-closed', () => {
+    if (process.platform !== 'darwin') {
+        app.quit();
+    }
+});

package.json

@@ -3,9 +3,13 @@
   "private": true,
   "version": "0.0.0",
   "type": "module",
+  "main": "main.cjs",
+  "description": "Free, simple, and intuitive online database design tool and SQL generator.",
+  "author": "1ilit",
   "scripts": {
     "dev": "vite",
-    "build": "vite build",
+    "electron": "electron .",
+    "build": "vite build && electron-builder",
     "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"
   },
@@ -22,6 +26,7 @@
     "classnames": "^2.5.1",
     "dexie": "^3.2.4",
     "dexie-react-hooks": "^1.1.7",
+    "electron-is": "^3.0.0",
     "file-saver": "^2.0.5",
     "framer-motion": "^10.18.0",
     "html-to-image": "^1.11.11",
@@ -46,6 +51,8 @@
     "@types/react-dom": "^18.2.17",
     "@vitejs/plugin-react": "^4.2.1",
     "autoprefixer": "^10.4.16",
+    "electron": "^33.2.1",
+    "electron-builder": "^25.1.8",
     "eslint": "^8.55.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-react": "^7.33.2",
@@ -56,6 +63,43 @@
     "tailwindcss": "^3.3.6",
     "vite": "^5.4.1"
   },
+  "build": {
+    "appId": "com.drawDB.id",
+    "productName": "drawDB",
+    "directories": {
+      "output": "install",
+      "buildResources": "public"
+    },
+    "files": [
+      "dist/**/*",
+      "main.cjs",
+      "package.json",
+      "node_modules/**/*",
+      "public/icon.ico"
+    ],
+    "win": {
+      "icon": "public/icon.ico",
+      "target": "nsis",
+      "signAndEditExecutable": false
+    },
+    "nsis": {
+      "oneClick": false,
+      "perMachine": true,
+      "allowToChangeInstallationDirectory": true,
+      "createDesktopShortcut": true,
+      "createStartMenuShortcut": true,
+      "shortcutName": "drawDB"
+    },
+    "mac": {
+      "icon": "public/icon.icns",
+      "target": "dmg"
+    },
+    "linux": {
+      "icon": "public/icon.png",
+      "target": "AppImage"
+    },
+    "publish": null
+  },
   "overrides": {
     "follow-redirects": "^1.15.4"
   }

src/App.jsx

@@ -1,4 +1,4 @@
-import { BrowserRouter, Routes, Route, useLocation } from "react-router-dom";
+import { BrowserRouter, HashRouter, Routes, Route, useLocation } from "react-router-dom";
 import { useLayoutEffect } from "react";
 import Editor from "./pages/Editor";
 import Survey from "./pages/Survey";
@@ -9,11 +9,14 @@ import LandingPage from "./pages/LandingPage";
 import SettingsContextProvider from "./context/SettingsContext";
 import { useSettings } from "./hooks";
 import NotFound from "./pages/NotFound";
+import {isElectron} from "./utils/electronUtils"
+
+const Router = isElectron() ? HashRouter : BrowserRouter;
 
 export default function App() {
   return (
     <SettingsContextProvider>
-      <BrowserRouter>
+      <Router>
         <RestoreScroll />
         <Routes>
           <Route path="/" element={<LandingPage />} />
@@ -52,7 +55,7 @@ export default function App() {
           <Route path="/templates" element={<Templates />} />
           <Route path="*" element={<NotFound />} />
         </Routes>
-      </BrowserRouter>
+      </Router>
     </SettingsContextProvider>
   );
 }

src/components/EditorHeader/ControlPanel.jsx

@@ -73,6 +73,7 @@ import { jsonToMermaid } from "../../utils/exportAs/mermaid";
 import { isRtl } from "../../i18n/utils/rtl";
 import { jsonToDocumentation } from "../../utils/exportAs/documentation";
 import { IdContext } from "../Workspace";
+import { isElectron } from "../../utils/electronUtils";
 
 export default function ControlPanel({
   diagramId,
@@ -1342,21 +1343,40 @@ export default function ControlPanel({
     },
     help: {
       shortcuts: {
-        function: () => window.open("/shortcuts", "_blank"),
+        function: () => isElectron()
+          ? (window.location.href = "#/shortcuts")
+          : window.open("/shortcuts", "_blank"),
         shortcut: "Ctrl+H",
       },
       ask_on_discord: {
-        function: () => window.open("https://discord.gg/BrjZgNrmR6", "_blank"),
+        function: () => {
+          const discordAppUrl = "discord://invite/BrjZgNrmR6";
+          const fallbackUrl = "https://discord.gg/BrjZgNrmR6";
+          try {
+            if (isElectron()) {
+              window.electron(discordAppUrl);
+            } else {
+              window.open(fallbackUrl, "_blank");
+            }
+          } catch (error) {
+            window.open(fallbackUrl, "_blank");
+          }
+        },
       },
       report_bug: {
-        function: () => window.open("/bug-report", "_blank"),
+        function: () => isElectron()
+          ? (window.location.href = "#/bug-report")
+          : window.open("/bug-report", "_blank"),
       },
       feedback: {
-        function: () => window.open("/survey", "_blank"),
+        function: () => isElectron()
+          ? (window.location.href = "#/survey")
+          : window.open("/survey", "_blank"),
       },
     },
   };
 
+
   useHotkeys("ctrl+i, meta+i", fileImport, { preventDefault: true });
   useHotkeys("ctrl+z, meta+z", undo, { preventDefault: true });
   useHotkeys("ctrl+y, meta+y", redo, { preventDefault: true });
@@ -1396,7 +1416,7 @@ export default function ControlPanel({
             style={isRtl(i18n.language) ? { direction: "rtl" } : {}}
           >
             {header()}
-            {window.name.split(" ")[0] !== "t" && (
+            {!isElectron() && window.name.split(" ")[0] !== "t" && (
               <Button
                 type="primary"
                 className="text-base me-2 pe-6 ps-5 py-[18px] rounded-md"

src/pages/Templates.jsx

@@ -7,6 +7,7 @@ import { useLiveQuery } from "dexie-react-hooks";
 import Thumbnail from "../components/Thumbnail";
 import logo_light from "../assets/logo_light_160.png";
 import template_screenshot from "../assets/template_screenshot.png";
+import { isElectron } from "../utils/electronUtils";
 
 export default function Templates() {
   const defaultTemplates = useLiveQuery(() =>
@@ -22,13 +23,23 @@ export default function Templates() {
   };
 
   const editTemplate = (id) => {
+    if(isElectron()){
+      const newWindow = window.open("#/editor", "_blank");
+      newWindow.name = "t " + id;
+    }else{
     const newWindow = window.open("/editor", "_blank");
     newWindow.name = "t " + id;
+    }
   };
 
   const forkTemplate = (id) => {
+    if(isElectron()){
+      const newWindow = window.open("#/editor", "_blank");
+      newWindow.name = "lt " + id;
+    }else{
     const newWindow = window.open("/editor", "_blank");
     newWindow.name = "lt " + id;
+    }
   };
 
   useEffect(() => {

src/utils/electronUtils.js

@@ -0,0 +1,20 @@
+
+export function isElectron() {
+    if (
+      typeof window !== "undefined" &&
+      typeof window.process === "object" &&
+      window.process.type === "renderer"
+    ) {
+      return true;
+    }
+    if (
+      typeof navigator === "object" &&
+      typeof navigator.userAgent === "string" &&
+      navigator.userAgent.indexOf("Electron") >= 0
+    ) {
+      return true;
+    }
+  
+    return false;
+  }
+  

vite.config.js

@@ -4,4 +4,9 @@ import react from '@vitejs/plugin-react'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
+  base: './',
+  build: {
+    outDir: 'dist', 
+    emptyOutDir: true, 
+  },
 })