use ddb files as source

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`).

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}`);
 });

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": [],

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> */

server/usercode/Untitled Diagram.ddb

@@ -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"}

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,10 +15,27 @@ 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;
-  return function(...args) {
+  return function (...args) {
     clearTimeout(timer);
     timer = setTimeout(() => {
       func.apply(this, args);
@@ -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
+      case 2:
-  const ddbFiles = diagramChanges.map(d => diagramToDrawDbFile(d.obj));
+        if (obj.id === oldObj.id && obj.name !== oldObj.name) {
+          const oldDdbFile = diagramToDdbFile(oldObj);
+          deleteDdbFiles([oldDdbFile]);
+        }
+        writeDdbFiles([ddbFile]);
+        break;
 
-  // Write files to usercode
+      case 3:
-  ddbFiles.forEach(ddbFile => {
+        deleteDdbFiles([ddbFile]);
-    fetch('/api/usercode-files', {
+        break;
-      method: 'POST',
+
-      headers: {
+      default:
-        'Accept': 'application/json',
+        break;
-        'Content-Type': 'application/json'
+    }
-      },
+  })
-      body: JSON.stringify({ filename: `${ddbFile.title}.ddb`, content: ddbFile })
-    });
-  });
 }
 
 db.on('changes', debouncedChangesHandler)

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);
+}

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 }),
-      }
-}