basic real time collaboration

Author: hbcarlos

package.json

@@ -44,15 +44,16 @@
     "watch:src": "tsc -w"
   },
   "dependencies": {
-    "@jupyterlab/application": "^3.0.2",
-    "@jupyterlab/apputils": "^3.0.2",
-    "@jupyterlab/coreutils": "^5.0.1",
-    "@jupyterlab/docregistry": "^3.0.2",
-    "@jupyterlab/filebrowser": "^3.0.2",
-    "@jupyterlab/launcher": "^3.0.2",
-    "@jupyterlab/mainmenu": "^3.0.2",
+    "@jupyterlab/application": "^3.1.0-alpha.2",
+    "@jupyterlab/apputils": "^3.1.0-alpha.2",
+    "@jupyterlab/coreutils": "^5.1.0-alpha.2",
+    "@jupyterlab/docregistry": "^3.1.0-alpha.2",
+    "@jupyterlab/filebrowser": "^3.1.0-alpha.2",
+    "@jupyterlab/launcher": "^3.1.0-alpha.2",
+    "@jupyterlab/mainmenu": "^3.1.0-alpha.2",
     "@lumino/coreutils": "^1.5.3",
-    "@lumino/widgets": "^1.18.0"
+    "@lumino/widgets": "^1.18.0",
+    "yjs": "^13.5.0"
   },
   "devDependencies": {
     "@jupyterlab/builder": "^3.0.0",
@@ -68,6 +69,14 @@
     "rimraf": "^3.0.2",
     "typescript": "~3.9.3"
   },
+  "resolutions": {
+    "@lumino/widgets": "~1.18.0",
+    "@types/react": "~17.0.0",
+    "csstype": "~2.4.0",
+    "react": "~17.0.1",
+    "typestyle": "~2.0.4",
+    "yjs": "~13.5.0"
+  },
   "jupyterlab": {
     "extension": true,
     "outputDir": "jupyterlab-drawio/labextension"

src/editor.ts

@@ -79,7 +79,9 @@ export class DrawioWidget extends DocumentWidget<Widget> {
   onAfterShow(msg: Message): void {
     Private.ensureMx().then(() => {
       this._loadEditor(this.node);
-      this._onContentChanged();
+      const contextModel = this.context.model;
+      const xml = this.mx.mxUtils.parseXml(contextModel.toString());
+      this._editor.editor.setGraphXml(xml.documentElement);
     });
   }
 
@@ -90,8 +92,8 @@ export class DrawioWidget extends DocumentWidget<Widget> {
   private _onContextReady(): void {
     const contextModel = this.context.model;
 
-    // Set the editor model value.
-    this._onContentChanged();
+    const xml = this.mx.mxUtils.parseXml(contextModel.toString());
+    this._editor.editor.setGraphXml(xml.documentElement);
 
     contextModel.contentChanged.connect(this._onContentChanged, this);
     contextModel.stateChanged.connect(this._onModelStateChangedNew, this);
@@ -129,13 +131,17 @@ export class DrawioWidget extends DocumentWidget<Widget> {
     // Workaround for TS2351: Cannot use 'new' with an expression whose type lacks a call or construct signature
     const _Editor: any = mx.Editor;
     this._editor = new mx.EditorUi(new _Editor(false, themes), node);
-
+    
     this._editor.editor.graph.model.addListener(
-      mx.mxEvent.NOTIFY,
+      mx.mxEvent.CHANGE,
       (sender: any, evt: any) => {
+        //console.log(mx.mxEvent.CHANGE, sender, evt);
+        const changes: any[] = evt.properties.changes;
+        for (let i=0; i<changes.length; i++) {
+          if (changes[i].root) return;
+        }
         this._saveToContext();
-      }
-    );
+      });
 
     return this._editor;
   }
@@ -157,17 +163,16 @@ export class DrawioWidget extends DocumentWidget<Widget> {
     const newValue = this.context.model.toString();
 
     if (oldValue !== newValue && !this._editor.editor.graph.isEditing()) {
-      if (newValue.length) {
-        const xml = mx.mxUtils.parseXml(newValue);
-        this._editor.editor.setGraphXml(xml.documentElement);
-      }
+      const xml = mx.mxUtils.parseXml(newValue);
+      this._editor.editor.setGraphXml(xml.documentElement);
     }
   }
 
   private _saveToContext(): void {
     if (this._editor.editor.graph.isEditing()) {
       this._editor.editor.graph.stopEditing();
     }
+
     const xml = this.mx.mxUtils.getXml(this._editor.editor.getGraphXml());
     this.context.model.fromString(xml);
   }

tsconfig.json

@@ -16,9 +16,21 @@
     "outDir": "lib",
     "rootDir": "src",
     "strict": true,
+    "skipLibCheck": true,
     "strictNullChecks": false,
     "target": "es2017",
-    "types": []
+    "types": [],
+    "baseUrl": ".",
+    "paths": {
+      "@jupyterlab/application": ["../jupyterlab/packages/application"],
+      "@jupyterlab/apputils": ["../jupyterlab/packages/apputils"],
+      "@jupyterlab/coreutils": ["../jupyterlab/packages/coreutils"],
+      "@jupyterlab/docregistry": ["../jupyterlab/packages/docregistry"],
+      "@jupyterlab/filebrowser": ["../jupyterlab/packages/filebrowser"],
+      "@jupyterlab/launcher": ["../jupyterlab/packages/launcher"],
+      "@jupyterlab/mainmenu": ["../jupyterlab/packages/mainmenu"],
+      "*": ["node_modules/*"]
+    }
   },
   "include": ["src/**/*"]
 }