Shared model

Author: hbcarlos

package.json

@@ -54,7 +54,7 @@
     "@jupyterlab/launcher": "^3.1.0-alpha.8",
     "@jupyterlab/mainmenu": "^3.1.0-alpha.8",
     "@jupyterlab/observables": "^4.1.0-alpha.8",
-    "@jupyterlab/services": "~6.1.0-alpha.8",
+    "@jupyterlab/services": "^6.1.0-alpha.8",
     "@jupyterlab/shared-models": "^3.1.0-alpha.8",
     "@jupyterlab/ui-components": "^3.1.0-alpha.8",
     "@lumino/commands": "^1.12.0",

src/model.ts

@@ -81,11 +81,8 @@ export class DrawIODocumentModel implements DocumentRegistry.IModel {
 
   toString(): string {
     // TODO: Return content from shared model
-    console.info(
-      'DrawIODocumentModel.toString():',
-      this.sharedModel.getSource()
-    );
-    throw new Error('not implemented');
+    //console.info('DrawIODocumentModel.toString():', this.sharedModel.getSource());
+    //throw new Error('not implemented');
     return this.sharedModel.getSource();
   }
 
@@ -97,17 +94,23 @@ export class DrawIODocumentModel implements DocumentRegistry.IModel {
 
   toJSON(): PartialJSONValue {
     // TODO: Return content from shared model
-    console.warn('toJSON(): Not implemented');
-    return {};
+    console.info(
+      'DrawIODocumentModel.toJSON():',
+      JSON.parse(this.sharedModel.getSource())
+    );
+    throw new Error('not implemented');
+    return JSON.parse(this.sharedModel.getSource());
   }
 
   fromJSON(value: ReadonlyPartialJSONValue): void {
     // TODO: Add content to shared model
-    console.warn('fromJSON(): Not implemented');
+    console.info('DrawIODocumentModel.fromJSON():', value);
+    throw new Error('not implemented');
+    this.sharedModel.setSource(value.toString());
   }
 
   initialize(): void {
-    console.warn('fromJSON(): Not implemented');
+    //console.warn('initialize(): Not implemented');
   }
 
   private _dirty = false;
@@ -160,11 +163,8 @@ export interface ISharedXMLFile extends ISharedDocument {
 export class XMLFile extends YDocument<XMLChange> implements ISharedDocument {
   constructor() {
     super();
-    console.debug('XMLFile:', this.ydoc);
     this._mxGraphAttributes = this.ydoc.getMap('attributes');
     this._root = this.ydoc.getXmlFragment('root');
-    console.debug(this._root instanceof Y.XmlFragment);
-    this._root.insert(0, [new Y.XmlElement('cell')]);
 
     this._mxGraphAttributes.observeDeep(this._modelObserver);
     this._root.observeDeep(this._cellsObserver);
@@ -198,20 +198,39 @@ export class XMLFile extends YDocument<XMLChange> implements ISharedDocument {
    * @returns Cell's source.
    */
   public getSource(): string {
-    const serializer = new XMLSerializer();
-
-    const doc = new Y.XmlElement('mxGraphModel');
-
-    this._mxGraphAttributes.forEach((key, value) => {
-      console.debug('key:', key, 'value:', value);
-      doc.setAttribute(key, value);
+    let source = '<mxGraphModel';
+    this._mxGraphAttributes.forEach((value, key) => {
+      source += ` ${key}="${value}"`;
     });
-
-    const root = this._root.get(0).clone() as Y.XmlElement;
-    root.nodeName = 'root';
-    doc.insert(0, [root]);
-
-    return serializer.serializeToString(doc.toDOM());
+    source += '><root>';
+
+    for (let i = this._root.length - 1; i >= 0; i--) {
+      let mxCell = '<mxCell';
+      const cell = this._root.get(i) as Y.XmlElement;
+      const cellAttrs = cell.getAttributes();
+      const cellGeometry = cell.firstChild;
+
+      for (const [key, value] of Object.entries(cellAttrs)) {
+        mxCell += ` ${key}="${value}"`;
+      }
+
+      if (cellGeometry) {
+        let mxGeometry = '<mxGeometry';
+        for (const [key, value] of Object.entries(
+          cellGeometry.getAttributes()
+        )) {
+          mxGeometry += ` ${key}="${value}"`;
+        }
+        mxCell += `>${mxGeometry} /></mxCell>`;
+      } else {
+        mxCell += ' />';
+      }
+
+      source += mxCell;
+    }
+
+    source += '</root></mxGraphModel>';
+    return source;
   }
 
   /**
@@ -220,15 +239,54 @@ export class XMLFile extends YDocument<XMLChange> implements ISharedDocument {
    * @param value: New source.
    */
   public setSource(value: string): void {
-    const doc = parse(value);
-    console.debug('setSource:', doc);
+    const doc = parse(
+      value,
+      {
+        attrNodeName: 'attr',
+        textNodeName: 'text',
+        attributeNamePrefix: '',
+        arrayMode: false,
+        ignoreAttributes: false,
+        parseAttributeValue: false
+      },
+      true
+    );
+
+    const attrs = doc['mxGraphModel']['attr'];
+    const cells = doc['mxGraphModel']['root']['mxCell'];
+
     this.transact(() => {
-      console.debug(doc['mxGraphModel']);
-      doc['mxGraphModel'].attributes.map((key: string, value: any) => {
-        console.debug(key, value);
+      // Delete previus attribute entries
+      // this._mxGraphAttributes.entries.forEach( key => this._mxGraphAttributes.delete(key) );
+
+      // Inserting attributes
+      for (const [key, value] of Object.entries(attrs)) {
+        this._mxGraphAttributes.set(key, value);
+      }
+
+      // Inserting mxCells
+      cells.forEach((value: any) => {
+        const cellAttrs = value['attr'];
+        const cellGeometry = value['mxGeometry'];
+
+        const mxCell = new Y.XmlElement('mxCell');
+        // Inserting attributes
+        for (const [key, value] of Object.entries(cellAttrs)) {
+          //console.debug(key, value);
+          mxCell.setAttribute(key, value as string);
+        }
+
+        if (cellGeometry) {
+          const geometryAttrs = cellGeometry['attr'];
+          const mxGeometry = new Y.XmlElement('mxGeometry');
+          for (const [key, value] of Object.entries(geometryAttrs)) {
+            mxGeometry.setAttribute(key, value as string);
+          }
+          mxCell.push([mxGeometry]);
+        }
+
+        this._root.insert(0, [mxCell]);
       });
-      //this._source.delete(0, this._source.length);
-      //this._source.insert(0, [new XmlElement(value)]);
     });
   }
 

src/panel.ts

@@ -416,7 +416,8 @@ export class DrawIOWidget extends Widget {
 
         const graph = this._editor.editor.getGraphXml();
         const xml = this._mx.mxUtils.getXml(graph);
-        this._context.model.sharedModel.setSource(xml);
+        console.debug('Save model: ', xml);
+        //this._context.model.sharedModel.setSource(xml);
       }
     );
 
@@ -458,6 +459,7 @@ export class DrawIOWidget extends Widget {
     );
 
     const data = this._context.model.sharedModel.getSource();
+    console.debug('Get Model:', data);
     const xml = this._mx.mxUtils.parseXml(data);
     this._editor.editor.setGraphXml(xml.documentElement);
     this._ready.resolve(void 0);

testfiles/test.dio

@@ -0,0 +1,15 @@
+<mxGraphModel dx="1297" dy="776" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850" pageHeight="1100" background="#ffffff">
+  <root>
+    <mxCell id="0"/>
+    <mxCell id="1" parent="0"/>
+    <mxCell id="2" value="" style="ellipse;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+      <mxGeometry x="20" y="210" width="120" height="80" as="geometry"/>
+    </mxCell>
+    <mxCell id="3" value="" style="shape=parallelogram;perimeter=parallelogramPerimeter;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+      <mxGeometry x="340" y="310" width="120" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="4" value="" style="whiteSpace=wrap;html=1;aspect=fixed;" vertex="1" parent="1">
+      <mxGeometry x="250" y="100" width="80" height="80" as="geometry"/>
+    </mxCell>
+  </root>
+</mxGraphModel>

yarn.lock

@@ -427,7 +427,7 @@
     lodash.escape "^4.0.1"
     marked "^2.0.0"
 
-"@jupyterlab/services@^6.1.0-alpha.8", "@jupyterlab/services@~6.1.0-alpha.8":
+"@jupyterlab/services@^6.1.0-alpha.8":
   version "6.1.0-alpha.8"
   resolved "https://registry.yarnpkg.com/@jupyterlab/services/-/services-6.1.0-alpha.8.tgz#7d70cb26474aaba9979e9dc632539b21371266eb"
   integrity sha512-1OPIkdF7zC5rUklD0zfR7Ozyg1RHW5IyY1CKE2ksbxQsBPAB1aPDj9V4CLOyla3l6QBLkPTpm6MTlXgQh/MD8Q==