use ddb files as source

2025-05-24 10:29:11 +00:00 · 2024-09-23 16:24:39 +08:00 · 2024-09-23 16:24:39 +08:00 · d1d23b1c92
commit d1d23b1c92
parent 6c3d916a4d
9 changed files with 161 additions and 313 deletions
--- a/server/README.md
+++ b/server/README.md
@ -0,0 +1,17 @@
+# DrawDB Node.js Wrapper
+
+This is a Node.js application that serves static files for the DrawDB frontend and provides an API to handle file operations for `.ddb` files.
+
+## Environment variables:
+- `DRAWDB_FILE_DIR`: Directory where `.ddb` files will be stored (default: `/usercode`).
+- `DRAWDB_HOME`: Path to the DrawDB frontend static files (default: `../dist`).
+- `DRAWDB_PORT`: Port number for the app (default: `8080`).
+
+## Run dev
+```bash
+export DRAWDB_FILE_DIR=/some-dir-to-write-ddb-files
+cd server
+npm run dev
+```
+
+The server will be running at `http://localhost:8080` (or the port specified by `DRAWDB_PORT`).
--- a/server/index.js
+++ b/server/index.js
@ -14,14 +14,14 @@ app.use(express.json())
 // Serve the static files from the DrawDB app
 app.use(express.static(DRAWDB_HOME));

+// Endpoints
 app.post('/api/usercode-files/', (req, res) => {
  const { filename, content } = req.body;
-
  if (!filename || !content) {
      return res.status(400).send('Filename and content are required');
  }
-  const filePath = path.join(DRAWDB_FILE_DIR, filename);

+  const filePath = path.join(DRAWDB_FILE_DIR, filename);
  fs.writeFile(filePath, JSON.stringify(content), 'utf8', (err) => {
      if (err) {
          return res.status(500).send('Error writing ddb file');
@ -32,15 +32,13 @@ app.post('/api/usercode-files/', (req, res) => {

 app.get('/api/usercode-files/:filename', (req, res) => {
  const filename = req.params.filename;
-  const filePath = path.join(DRAWDB_FILE_DIR, filename); // Adjust the path based on your directory structure
+  const filePath = path.join(DRAWDB_FILE_DIR, filename);

  fs.readFile(filePath, 'utf8', (err, data) => {
    if (err) {
      if (err.code === 'ENOENT') {
-        // File not found
        return res.status(404).send('File not found');
      }
-      // Some other error
      return res.status(500).send('Error reading file');
    }
    res.send(data);
@ -49,13 +47,11 @@ app.get('/api/usercode-files/:filename', (req, res) => {

 app.delete('/api/usercode-files/:filename', (req, res) => {
  const filename = req.params.filename;
-
  if (!filename) {
    return res.status(400).send('Filename is required');
  }

  const filePath = path.join(DRAWDB_FILE_DIR, filename);
-
  fs.access(filePath, fs.constants.F_OK, (err) => {
    if (err) {
      return res.send('File does not exists.');
@ -69,12 +65,26 @@ app.delete('/api/usercode-files/:filename', (req, res) => {
  });
 })

-// Handles any requests that don't match the ones above
+app.get('/api/diagrams', (_req, res) => {
+  const dirPath = DRAWDB_FILE_DIR;
+  fs.readdir(dirPath, (err, files) => {
+    if (err) {
+      return res.status(500).send('Unable to scan directory');
+    }
+    const ddbFiles = files.filter(file => path.extname(file) === '.ddb');
+    const fileContents = ddbFiles.map(file => {
+      const filePath = path.join(dirPath, file);
+      const fileContent = fs.readFileSync(filePath, 'utf-8');
+      return JSON.parse(fileContent);
+    });
+    res.json(fileContents);
+  });
+});
+
 app.get('*', (req, res) => {
  res.sendFile(path.join(DRAWDB_HOME, 'index.html'));
 });

-
 app.listen(DRAWDB_PORT, () => {
  console.log(`DrawDB is running on port ${DRAWDB_PORT}`);
 });
--- a/server/package.json
+++ b/server/package.json
@ -6,6 +6,7 @@
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node index.js",
+    "start:prod": "node server.js",
    "build": "webpack"
  },
  "keywords": [],
--- a/server/server.js
+++ b/server/server.js
--- a/server/server.js.LICENSE.txt
+++ b/server/server.js.LICENSE.txt
@ -1,256 +0,0 @@
-/*
-object-assign
-(c) Sindre Sorhus
-@license MIT
-*/
-
-/*!
- * accepts
- * Copyright(c) 2014 Jonathan Ong
- * Copyright(c) 2015 Douglas Christopher Wilson
- * MIT Licensed
- */
-
-/*!
- * body-parser
- * Copyright(c) 2014 Jonathan Ong
- * Copyright(c) 2014-2015 Douglas Christopher Wilson
- * MIT Licensed
- */
-
-/*!
- * body-parser
- * Copyright(c) 2014-2015 Douglas Christopher Wilson
- * MIT Licensed
- */
-
-/*!
- * bytes
- * Copyright(c) 2012-2014 TJ Holowaychuk
- * Copyright(c) 2015 Jed Watson
- * MIT Licensed
- */
-
-/*!
- * content-disposition
- * Copyright(c) 2014-2017 Douglas Christopher Wilson
- * MIT Licensed
- */
-
-/*!
- * content-type
- * Copyright(c) 2015 Douglas Christopher Wilson
- * MIT Licensed
- */
-
-/*!
- * cookie
- * Copyright(c) 2012-2014 Roman Shtylman
- * Copyright(c) 2015 Douglas Christopher Wilson
- * MIT Licensed
- */
-
-/*!
- * depd
- * Copyright(c) 2014-2018 Douglas Christopher Wilson
- * MIT Licensed
- */
-
-/*!
- * destroy
- * Copyright(c) 2014 Jonathan Ong
- * Copyright(c) 2015-2022 Douglas Christopher Wilson
- * MIT Licensed
- */
-
-/*!
- * ee-first
- * Copyright(c) 2014 Jonathan Ong
- * MIT Licensed
- */
-
-/*!
- * encodeurl
- * Copyright(c) 2016 Douglas Christopher Wilson
- * MIT Licensed
- */
-
-/*!
- * escape-html
- * Copyright(c) 2012-2013 TJ Holowaychuk
- * Copyright(c) 2015 Andreas Lubbe
- * Copyright(c) 2015 Tiancheng "Timothy" Gu
- * MIT Licensed
- */
-
-/*!
- * etag
- * Copyright(c) 2014-2016 Douglas Christopher Wilson
- * MIT Licensed
- */
-
-/*!
- * express
- * Copyright(c) 2009-2013 TJ Holowaychuk
- * Copyright(c) 2013 Roman Shtylman
- * Copyright(c) 2014-2015 Douglas Christopher Wilson
- * MIT Licensed
- */
-
-/*!
- * express
- * Copyright(c) 2009-2013 TJ Holowaychuk
- * Copyright(c) 2014-2015 Douglas Christopher Wilson
- * MIT Licensed
- */
-
-/*!
- * finalhandler
- * Copyright(c) 2014-2022 Douglas Christopher Wilson
- * MIT Licensed
- */
-
-/*!
- * forwarded
- * Copyright(c) 2014-2017 Douglas Christopher Wilson
- * MIT Licensed
- */
-
-/*!
- * fresh
- * Copyright(c) 2012 TJ Holowaychuk
- * Copyright(c) 2016-2017 Douglas Christopher Wilson
- * MIT Licensed
- */
-
-/*!
- * http-errors
- * Copyright(c) 2014 Jonathan Ong
- * Copyright(c) 2016 Douglas Christopher Wilson
- * MIT Licensed
- */
-
-/*!
- * media-typer
- * Copyright(c) 2014 Douglas Christopher Wilson
- * MIT Licensed
- */
-
-/*!
- * merge-descriptors
- * Copyright(c) 2014 Jonathan Ong
- * Copyright(c) 2015 Douglas Christopher Wilson
- * MIT Licensed
- */
-
-/*!
- * methods
- * Copyright(c) 2013-2014 TJ Holowaychuk
- * Copyright(c) 2015-2016 Douglas Christopher Wilson
- * MIT Licensed
- */
-
-/*!
- * mime-db
- * Copyright(c) 2014 Jonathan Ong
- * Copyright(c) 2015-2022 Douglas Christopher Wilson
- * MIT Licensed
- */
-
-/*!
- * mime-types
- * Copyright(c) 2014 Jonathan Ong
- * Copyright(c) 2015 Douglas Christopher Wilson
- * MIT Licensed
- */
-
-/*!
- * negotiator
- * Copyright(c) 2012 Federico Romero
- * Copyright(c) 2012-2014 Isaac Z. Schlueter
- * Copyright(c) 2015 Douglas Christopher Wilson
- * MIT Licensed
- */
-
-/*!
- * on-finished
- * Copyright(c) 2013 Jonathan Ong
- * Copyright(c) 2014 Douglas Christopher Wilson
- * MIT Licensed
- */
-
-/*!
- * parseurl
- * Copyright(c) 2014 Jonathan Ong
- * Copyright(c) 2014-2017 Douglas Christopher Wilson
- * MIT Licensed
- */
-
-/*!
- * proxy-addr
- * Copyright(c) 2014-2016 Douglas Christopher Wilson
- * MIT Licensed
- */
-
-/*!
- * range-parser
- * Copyright(c) 2012-2014 TJ Holowaychuk
- * Copyright(c) 2015-2016 Douglas Christopher Wilson
- * MIT Licensed
- */
-
-/*!
- * raw-body
- * Copyright(c) 2013-2014 Jonathan Ong
- * Copyright(c) 2014-2022 Douglas Christopher Wilson
- * MIT Licensed
- */
-
-/*!
- * send
- * Copyright(c) 2012 TJ Holowaychuk
- * Copyright(c) 2014-2022 Douglas Christopher Wilson
- * MIT Licensed
- */
-
-/*!
- * serve-static
- * Copyright(c) 2010 Sencha Inc.
- * Copyright(c) 2011 TJ Holowaychuk
- * Copyright(c) 2014-2016 Douglas Christopher Wilson
- * MIT Licensed
- */
-
-/*!
- * statuses
- * Copyright(c) 2014 Jonathan Ong
- * Copyright(c) 2016 Douglas Christopher Wilson
- * MIT Licensed
- */
-
-/*!
- * toidentifier
- * Copyright(c) 2016 Douglas Christopher Wilson
- * MIT Licensed
- */
-
-/*!
- * type-is
- * Copyright(c) 2014 Jonathan Ong
- * Copyright(c) 2014-2015 Douglas Christopher Wilson
- * MIT Licensed
- */
-
-/*!
- * unpipe
- * Copyright(c) 2015 Douglas Christopher Wilson
- * MIT Licensed
- */
-
-/*!
- * vary
- * Copyright(c) 2014-2017 Douglas Christopher Wilson
- * MIT Licensed
- */
-
-/*! safe-buffer. MIT License. Feross Aboukhadijeh <https://feross.org/opensource> */
--- a/server/usercode/Untitled
+++ b/server/usercode/Untitled
@ -1 +0,0 @@
-{"author":"Unnamed","title":"Untitled Diagram","date":"2024-09-20T09:27:33.343Z","tables":[{"id":0,"name":"table_0","x":0,"y":0,"fields":[{"name":"id","type":"INTEGER","default":"","check":"","primary":true,"unique":true,"notNull":true,"increment":true,"comment":"","id":0}],"comment":"","indices":[],"color":"#175e7a","key":1726824435540}],"relationships":[],"notes":[],"subjectAreas":[],"database":"mysql"}
--- a/src/data/db.js
+++ b/src/data/db.js
@ -1,7 +1,8 @@
 import Dexie from "dexie";
 import 'dexie-observable';
 import { templateSeeds } from "./seeds";
-import { diagramToDrawDbFile } from "../utils/parser"
+import { diagramToDdbFile, ddbFileToDiagram, writeDdbFiles, deleteDdbFiles } from "./usercode"
+import { ddbDiagramIsValid } from "../utils/validateSchema";

 export const db = new Dexie("drawDB");

@ -14,6 +15,23 @@ db.on("populate", (transaction) => {
  transaction.templates.bulkAdd(templateSeeds).catch((e) => console.log(e));
 });

+db.on("ready", async (db) => {
+  // Use ddb files as source for diagrams
+  const diagramsRes = await fetch('/api/diagrams', {
+    method: 'GET',
+    headers: {
+      'Accept': 'application/json',
+      'Content-Type': 'application/json'
+    },
+  })
+  const ddbFiles = await diagramsRes.json();
+  const validDdbFiles = ddbFiles.filter(ddbFile => ddbDiagramIsValid(ddbFile));
+  const diagrams = validDdbFiles.map(f => ddbFileToDiagram(f))
+  return db.transaction('rw', db.diagrams, async () => {
+    await db.diagrams.clear();
+    await db.diagrams.bulkAdd(diagrams);
+  })
+})

 const debounce = (func, delay) => {
  let timer;
@ -30,24 +48,30 @@ const debouncedChangesHandler = debounce(async (changes) => {
 }, 1500);

 const handleDiagramChanges = (diagramChanges) => {
-  console.log("diagramChanges", diagramChanges);
+  diagramChanges.forEach(({ type, obj, oldObj }) => {
+    const ddbFile = diagramToDdbFile(obj);

-  // Handle create / update / delete separately
+    switch (type) {
+      case 1:
+        writeDdbFiles([ddbFile]);
+        break;

-  // Parse changes to ddb file format
-  const ddbFiles = diagramChanges.map(d => diagramToDrawDbFile(d.obj));
+      case 2:
+        if (obj.id === oldObj.id && obj.name !== oldObj.name) {
+          const oldDdbFile = diagramToDdbFile(oldObj);
+          deleteDdbFiles([oldDdbFile]);
+        }
+        writeDdbFiles([ddbFile]);
+        break;

-  // Write files to usercode
-  ddbFiles.forEach(ddbFile => {
-    fetch('/api/usercode-files', {
-      method: 'POST',
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({ filename: `${ddbFile.title}.ddb`, content: ddbFile })
-    });
-  });
+      case 3:
+        deleteDdbFiles([ddbFile]);
+        break;
+
+      default:
+        break;
+    }
+  })
 }

 db.on('changes', debouncedChangesHandler)
--- a/src/data/usercode.js
+++ b/src/data/usercode.js
@ -0,0 +1,81 @@
+import { databases } from "./databases";
+import { DB } from "./constants";
+
+export function diagramToDdbFile(diagram) {
+    const {
+        name,
+        lastModified,
+        tables,
+        references,
+        notes,
+        areas,
+        database,
+        types,
+        enums
+    } = diagram;
+
+    let date = lastModified ?? new Date();
+    if (typeof lastModified === "number" || typeof lastModified === "string") {
+        date = new Date(lastModified)
+    }
+
+    return {
+        author: "Unnamed",
+        title: name,
+        date: date.toISOString(),
+        tables: tables,
+        relationships: references,
+        notes: notes,
+        subjectAreas: areas,
+        database: database,
+        ...(databases[database].hasTypes && { types: types }),
+        ...(databases[database].hasEnums && { enums: enums }),
+    }
+}
+
+export function ddbFileToDiagram(ddb) {
+    const {
+        database = DB.GENERIC,
+        title = "Untitled Diagram",
+        tables,
+        date,
+        relationships,
+        subjectAreas,
+        notes,
+        enums,
+        types
+    } = ddb;
+
+    return {
+        database: database,
+        name: title,
+        lastModified: date ? new Date(date) : new Date(),
+        tables: tables,
+        references: relationships,
+        notes: notes,
+        areas: subjectAreas,
+        ...(databases[database].hasEnums && { enums: enums }),
+        ...(databases[database].hasTypes && { types: types }),
+    };
+}
+
+export function writeDdbFiles(ddbFiles) {
+    const writePromises = ddbFiles.map(ddbFile => {
+        return fetch('/api/usercode-files', {
+            method: 'POST',
+            headers: {
+                'Accept': 'application/json',
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({ filename: `${ddbFile.title}.ddb`, content: ddbFile })
+        });
+    })
+    return Promise.all(writePromises);
+}
+
+export function deleteDdbFiles(ddbFiles) {
+    const deletePromises = ddbFiles.map(ddbFile => {
+        return fetch(`/api/usercode-files/${ddbFile.title}.ddb`, { method: 'DELETE' });
+    });
+    return Promise.all(deletePromises);
+}
--- a/src/utils/parser.js
+++ b/src/utils/parser.js
@ -1,28 +0,0 @@
-import { databases } from "../data/databases";
-
-export function diagramToDrawDbFile(diagram) {
-    const { 
-        name,
-        lastModified,
-        tables,
-        references,
-        notes,
-        areas,
-        database,
-        types,
-        enums
-    } = diagram;
-
-    return {
-        author: "Unnamed",
-        title: name,
-        date: lastModified.toISOString(),
-        tables: tables,
-        relationships: references,
-        notes: notes,
-        subjectAreas: areas,
-        database: database,
-        ...(databases[database].hasTypes && { types: types }),
-        ...(databases[database].hasEnums && { enums: enums }),
-      }
-}
				`@ -1 +0,0 @@`
				`{"author":"Unnamed","title":"Untitled Diagram","date":"2024-09-20T09:27:33.343Z","tables":[{"id":0,"name":"table_0","x":0,"y":0,"fields":[{"name":"id","type":"INTEGER","default":"","check":"","primary":true,"unique":true,"notNull":true,"increment":true,"comment":"","id":0}],"comment":"","indices":[],"color":"#175e7a","key":1726824435540}],"relationships":[],"notes":[],"subjectAreas":[],"database":"mysql"}`