Fix bugs in server and client.

lib/versioning/README.txt

@@ -7,6 +7,7 @@ Steps to run server
  - Install NodeJS and NPM
 
  - In 'lib' dir, run:
+      cd lib
       npm i serve-handler ws uuid
 
  - Setup server state directory.
@@ -17,6 +18,8 @@ Steps to run server
  - In root dir, run:
       DRAWIOSTATEDIR=/desired/path node lib/versioning/run_server.js
 
+   The server will also act as a static file server, hosting the drawio web app. Default port is 8700.
+
 
 Steps to build + run client
 ---------------------------

lib/versioning/run_server.js

@@ -37,7 +37,6 @@ async function startServer() {
     return new Promise(resolve => setTimeout(resolve, ms));
   }
 
-
   const httpServer = http.createServer((request, response) => {
     // You pass two more arguments for config and middleware
     // More details here: https://github.com/vercel/serve-handler#options
@@ -157,6 +156,8 @@ async function startServer() {
         else if (req.type === "new_share") {
           const { reqId, ops } = req;
           const sessionId = uuidv4();
+          leaveAll();
+          join(sessionId);
           await Promise.all(ops.map(({id, detail}) => opsDB.writeJSON(id, detail)));
           await sessionDB.write(sessionId, ops.map(op=>op.id).join(''));
           return {type: "ack", reqId, sessionId};

src/main/webapp/plugins/cdf/versioning.browser.js

@@ -1115,7 +1115,7 @@ Draw.loadPlugin(async function(ui) {
 
   class UIState {
     constructor() {
-      this.statusTextNode = document.createTextNode("")
+      this.statusTextNode = document.createTextNode("");
       this.shareEnabled = new EnabledState();
       this.joinEnabled = new EnabledState();
       this.leaveEnabled = new EnabledState();
@@ -1270,7 +1270,7 @@ Draw.loadPlugin(async function(ui) {
       cell.setVertex(isVertex);
       cell.setEdge(isEdge);
       model.cells[cellId] = cell; // HACK!
-      return cell;      
+      return cell;
     }
 
     try {
@@ -1296,6 +1296,7 @@ Draw.loadPlugin(async function(ui) {
 
         const attrHandlers = {
           geometry: () => {
+            new mxGeometryChange(model, )
             const serializedGeometry = value;
             const parsed = xmlParser.parseFromString(serializedGeometry, 'text/xml');
             const geometry = codec.decode(parsed.documentElement);
@@ -1309,7 +1310,11 @@ Draw.loadPlugin(async function(ui) {
             const cellId = value;
             const parent = model.cells[cellId];
             // The following appears to create a mxChildChange object, indicating that it is this the correct way to set the parent...
-            model.add(parent, cell, null);
+            if (parent) {
+              model.add(parent, cell, null);
+            } else {
+              model.remove(cell);
+            }
           },
           value: () => {
             let v;
@@ -1444,7 +1449,18 @@ Draw.loadPlugin(async function(ui) {
       controller.addInput("init_offline", "in", []);
     }
   }
-  controller.addInput("connect", "in", ["ws://localhost:8700/websocket"]);
+  
+  let websocketAddress;
+  if (window.location.protocol === "http:") {
+    websocketAddress = "ws:";
+  } else if (window.location.protocol === "https:") {
+    websocketAddress = "wss:";
+  } else {
+    throw new Error("unexpected protocol: " + window.location.protocol);
+  }
+  websocketAddress += "//" + window.location.host + "/websocket";
+
+  controller.addInput("connect", "in", [websocketAddress]);
 
 
   controller.start();
@@ -1515,8 +1531,8 @@ Draw.loadPlugin(async function(ui) {
         deltaObj[keyPrefix(change.cell) + 'style'] = change.style;
       }
       else if (change.constructor === mxChildChange) {
-        if (change.previous) {
-          // cell has a previous parent
+        if (change.previous && model.contains(change.previous)) {
+          // cell had a previous parent
           console.log("previous parent");
           deltaObj[keyPrefix(change.child) + 'parent'] = change.parent ? change.parent.id: null;
         } else {

src/main/webapp/plugins/cdf/versioning.js

@@ -23,7 +23,7 @@ Draw.loadPlugin(async function(ui) {
 
   class UIState {
     constructor() {
-      this.statusTextNode = document.createTextNode("")
+      this.statusTextNode = document.createTextNode("");
       this.shareEnabled = new EnabledState();
       this.joinEnabled = new EnabledState();
       this.leaveEnabled = new EnabledState();
@@ -178,7 +178,7 @@ Draw.loadPlugin(async function(ui) {
       cell.setVertex(isVertex);
       cell.setEdge(isEdge);
       model.cells[cellId] = cell; // HACK!
-      return cell;      
+      return cell;
     }
 
     try {
@@ -204,6 +204,7 @@ Draw.loadPlugin(async function(ui) {
 
         const attrHandlers = {
           geometry: () => {
+            new mxGeometryChange(model, )
             const serializedGeometry = value;
             const parsed = xmlParser.parseFromString(serializedGeometry, 'text/xml');
             const geometry = codec.decode(parsed.documentElement);
@@ -217,7 +218,11 @@ Draw.loadPlugin(async function(ui) {
             const cellId = value;
             const parent = model.cells[cellId];
             // The following appears to create a mxChildChange object, indicating that it is this the correct way to set the parent...
-            model.add(parent, cell, null);
+            if (parent) {
+              model.add(parent, cell, null);
+            } else {
+              model.remove(cell);
+            }
           },
           value: () => {
             let v;
@@ -352,7 +357,18 @@ Draw.loadPlugin(async function(ui) {
       controller.addInput("init_offline", "in", []);
     }
   }
-  controller.addInput("connect", "in", ["ws://localhost:8700/websocket"]);
+  
+  let websocketAddress;
+  if (window.location.protocol === "http:") {
+    websocketAddress = "ws:";
+  } else if (window.location.protocol === "https:") {
+    websocketAddress = "wss:";
+  } else {
+    throw new Error("unexpected protocol: " + window.location.protocol);
+  }
+  websocketAddress += "//" + window.location.host + "/websocket";
+
+  controller.addInput("connect", "in", [websocketAddress]);
 
 
   controller.start();
@@ -423,8 +439,8 @@ Draw.loadPlugin(async function(ui) {
         deltaObj[keyPrefix(change.cell) + 'style'] = change.style;
       }
       else if (change.constructor === mxChildChange) {
-        if (change.previous) {
-          // cell has a previous parent
+        if (change.previous && model.contains(change.previous)) {
+          // cell had a previous parent
           console.log("previous parent");
           deltaObj[keyPrefix(change.child) + 'parent'] = change.parent ? change.parent.id: null;
         } else {