y-mxgraph 0.1.4 → 0.1.6

package/README.md

@@ -29,13 +29,20 @@ import { Binding, LOCAL_ORIGIN } from 'y-mxgraph';
 const doc = new Y.Doc();
 
 App.main((app) => {
-  // Ensure consistent initial files across clients. draw.io generates random diagram ids by default,
-  // which can cause sync issues if clients start from different states. Use generateFileTemplate to create a unified template.
-  if (!app.currentFile.data) {
-    app.currentFile.data = Binding.generateFileTemplate('diagram-0');
+  const file = app.currentFile;
+
+  // If Y.Doc already has data (from other clients), use it
+  const mxfileMap = doc.getMap('mxfile');
+  const diagramMap = mxfileMap.get('diagram');
+  if (diagramMap && diagramMap.size > 0) {
+    const { doc2xml } = await import('y-mxgraph');
+    file.ui.setFileData(doc2xml(doc));
+    file.setData(doc2xml(doc));
+  } else if (!file.data) {
+    file.data = Binding.generateFileTemplate('diagram-0');
   }
 
-  const binding = new Binding(app.currentFile, { doc });
+  const binding = new Binding(file, { doc });
 
   window.addEventListener('beforeunload', () => binding.destroy());
 });
@@ -72,6 +79,10 @@ pnpm --filter @y-mxgraph/demo dev
 
 # iframe mode (parent page runs WebRTC Provider, two iframes each run draw.io + y-mxgraph, synced via postMessage)
 # Visit http://localhost:5173/iframe-mode.html
+
+# WebSocket server mode (centralized server with file persistence)
+pnpm --filter @y-mxgraph/ws-demo server  # Start server on port 1234
+pnpm --filter @y-mxgraph/ws-demo dev     # Start client on port 5174
 ```
 
 ## Docs

package/README.zh-CN.md

@@ -63,9 +63,13 @@ pnpm --filter y-mxgraph build
 # 测试
 pnpm --filter y-mxgraph test
 
-# 启动 Demo
+# 启动 Demo (WebRTC 模式)
 pnpm --filter @y-mxgraph/demo dev
 
+# 启动 WebSocket 服务器 Demo (支持文件持久化)
+pnpm --filter @y-mxgraph/ws-demo server  # 启动服务器 (端口 1234)
+pnpm --filter @y-mxgraph/ws-demo dev     # 启动客户端 (端口 5174)
+
 # 启动文档
 pnpm --filter @y-mxgraph/docs dev
 ```

package/binding/index.d.ts

@@ -13,6 +13,11 @@ export interface BindDrawioFileOptions {
 }
 /**
  * Y-MXGraph 绑定类，管理 draw.io 文件与 Y.Doc 的双向同步
+ *
+ * 初始化流程对齐 y-prosemirror 等数据源：
+ * - 绑定时不向 Y.Doc 写入初始数据
+ * - 在第一次本地编辑时才初始化 Y.Doc
+ * - 新客户端加入时，同步已有的远端数据到本地
  */
 export declare class Binding {
     /** Y.Doc 实例，用于协同数据存储 */
@@ -21,6 +26,8 @@ export declare class Binding {
     private mxGraphModel;
     /** 本地变更抑制标志，防止循环同步 */
     private suppressLocalApply;
+    /** 初始化标志，标记 Y.Doc 是否已初始化 */
+    private docInitialized;
     /** mxGraph change 事件监听器 */
     private mxListener;
     /** Yjs 文档深度变更监听器 */

package/binding/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/binding/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,CAAC,MAAM,KAAK,CAAC;AACzB,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAOvD,OAAO,KAAK,EAAE,UAAU,EAAgB,MAAM,iBAAiB,CAAC;AAEhE,MAAM,WAAW,qBAAqB;IACpC,GAAG,EAAE,CAAC,CAAC,GAAG,CAAC;IACX,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,WAAW,CAAC,EAAE,CAAC,CAAC,WAAW,CAAC;IAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,MAAM,CAAC,EACH,OAAO,GACP;QACE,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,YAAY,CAAC,EAAE,MAAM,CAAC;KACvB,CAAC;CACP;AAED;;GAEG;AACH,qBAAa,OAAO;IAClB,wBAAwB;IACxB,QAAQ,CAAC,GAAG,EAAE,CAAC,CAAC,GAAG,CAAC;IACpB,6BAA6B;IAC7B,OAAO,CAAC,YAAY,CAAe;IACnC,sBAAsB;IACtB,OAAO,CAAC,kBAAkB,CAAS;IACnC,2BAA2B;IAC3B,OAAO,CAAC,UAAU,CAAa;IAC/B,oBAAoB;IACpB,OAAO,CAAC,WAAW,CAKT;IACV,gCAAgC;IAChC,OAAO,CAAC,mBAAmB,CAAC,CAAa;IACzC,yBAAyB;IACzB,OAAO,CAAC,kBAAkB,CAAC,CAAa;gBAE5B,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,qBAAqB;IAkF5D;;;OAGG;IACH,OAAO,CAAC,IAAI,UAAQ,GAAG,IAAI;IAS3B;;;;;;;;;;;;;;OAcG;IACH,MAAM,CAAC,oBAAoB,CAAC,SAAS,SAAc,GAAG,MAAM;IAa5D;;;OAGG;IACH,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,qBAAqB,GAAG,OAAO;CAGzE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/binding/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,CAAC,MAAM,KAAK,CAAC;AACzB,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAOvD,OAAO,KAAK,EAAE,UAAU,EAAgB,MAAM,iBAAiB,CAAC;AAEhE,MAAM,WAAW,qBAAqB;IACpC,GAAG,EAAE,CAAC,CAAC,GAAG,CAAC;IACX,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,WAAW,CAAC,EAAE,CAAC,CAAC,WAAW,CAAC;IAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,MAAM,CAAC,EACH,OAAO,GACP;QACE,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,YAAY,CAAC,EAAE,MAAM,CAAC;KACvB,CAAC;CACP;AAED;;;;;;;GAOG;AACH,qBAAa,OAAO;IAClB,wBAAwB;IACxB,QAAQ,CAAC,GAAG,EAAE,CAAC,CAAC,GAAG,CAAC;IACpB,6BAA6B;IAC7B,OAAO,CAAC,YAAY,CAAe;IACnC,sBAAsB;IACtB,OAAO,CAAC,kBAAkB,CAAS;IACnC,4BAA4B;IAC5B,OAAO,CAAC,cAAc,CAAS;IAC/B,2BAA2B;IAC3B,OAAO,CAAC,UAAU,CAAa;IAC/B,oBAAoB;IACpB,OAAO,CAAC,WAAW,CAKT;IACV,gCAAgC;IAChC,OAAO,CAAC,mBAAmB,CAAC,CAAa;IACzC,yBAAyB;IACzB,OAAO,CAAC,kBAAkB,CAAC,CAAa;gBAE5B,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,qBAAqB;IA4G5D;;;OAGG;IACH,OAAO,CAAC,IAAI,UAAQ,GAAG,IAAI;IAS3B;;;;;;;;;;;;;;OAcG;IACH,MAAM,CAAC,oBAAoB,CAAC,SAAS,SAAc,GAAG,MAAM;IAa5D;;;OAGG;IACH,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,qBAAqB,GAAG,OAAO;CAGzE"}

package/binding/patch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"patch.d.ts","sourceRoot":"","sources":["../../src/binding/patch.ts"],"names":[],"mappings":"AACA,OAAO,EAIL,KAAK,QAAQ,EACd,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAEL,KAAK,OAAO,EAEb,MAAM,kBAAkB,CAAC;AAO1B,OAAO,KAAK,CAAC,MAAM,KAAK,CAAC;AAEzB,QAAA,MAAM,WAAW,MAAM,CAAC;AACxB,QAAA,MAAM,WAAW,MAAM,CAAC;AACxB,QAAA,MAAM,WAAW,MAAM,CAAC;AAgDxB,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,SAAS;IACxB,CAAC,WAAW,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC;IACzB,CAAC,WAAW,CAAC,CAAC,EAAE,aAAa,EAAE,CAAC;IAChC,CAAC,WAAW,CAAC,CAAC,EAAE;QACd,CAAC,GAAG,EAAE,MAAM,GAAG;YACb,IAAI,CAAC,EAAE,MAAM,CAAC;YACd,QAAQ,CAAC,EAAE,MAAM,CAAC;YAClB,KAAK,CAAC,EAAE;gBACN,CAAC,WAAW,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC;gBACzB,CAAC,WAAW,CAAC,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,CAAC;gBACzC,CAAC,WAAW,CAAC,CAAC,EAAE;oBACd,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;iBACvC,CAAC;aACH,CAAC;SACH,CAAC;KACH,CAAC;CACH;AAED,wBAAgB,cAAc,CAC5B,GAAG,EAAE,CAAC,CAAC,GAAG,EACV,KAAK,EAAE,SAAS,EAChB,OAAO,CAAC,EAAE;IAAE,MAAM,CAAC,EAAE,OAAO,CAAA;CAAE,QAqR/B;AAED,wBAAgB,eAAe,CAAC,GAAG,EAAE,CAAC,CAAC,GAAG,EAAE,aAAa,UAAQ,QAsDhE;AAED,wBAAgB,aAAa,CAC3B,MAAM,EAAE,CAAC,CAAC,MAAM,CACd,CAAC,CAAC,UAAU,GAAG,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,UAAU,CAAC,GAAG,OAAO,GAAG,QAAQ,CAC1E,EAAE,EACH,WAAW,CAAC,EAAE,CAAC,CAAC,GAAG,GAClB,SAAS,CAgSX"}
+{"version":3,"file":"patch.d.ts","sourceRoot":"","sources":["../../src/binding/patch.ts"],"names":[],"mappings":"AACA,OAAO,EAIL,KAAK,QAAQ,EACd,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAEL,KAAK,OAAO,EAEb,MAAM,kBAAkB,CAAC;AAO1B,OAAO,KAAK,CAAC,MAAM,KAAK,CAAC;AAEzB,QAAA,MAAM,WAAW,MAAM,CAAC;AACxB,QAAA,MAAM,WAAW,MAAM,CAAC;AACxB,QAAA,MAAM,WAAW,MAAM,CAAC;AAgDxB,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,SAAS;IACxB,CAAC,WAAW,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC;IACzB,CAAC,WAAW,CAAC,CAAC,EAAE,aAAa,EAAE,CAAC;IAChC,CAAC,WAAW,CAAC,CAAC,EAAE;QACd,CAAC,GAAG,EAAE,MAAM,GAAG;YACb,IAAI,CAAC,EAAE,MAAM,CAAC;YACd,QAAQ,CAAC,EAAE,MAAM,CAAC;YAClB,KAAK,CAAC,EAAE;gBACN,CAAC,WAAW,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC;gBACzB,CAAC,WAAW,CAAC,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,CAAC;gBACzC,CAAC,WAAW,CAAC,CAAC,EAAE;oBACd,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;iBACvC,CAAC;aACH,CAAC;SACH,CAAC;KACH,CAAC;CACH;AAED,wBAAgB,cAAc,CAC5B,GAAG,EAAE,CAAC,CAAC,GAAG,EACV,KAAK,EAAE,SAAS,EAChB,OAAO,CAAC,EAAE;IAAE,MAAM,CAAC,EAAE,OAAO,CAAA;CAAE,QA8R/B;AAED,wBAAgB,eAAe,CAAC,GAAG,EAAE,CAAC,CAAC,GAAG,EAAE,aAAa,UAAQ,QAyDhE;AAED,wBAAgB,aAAa,CAC3B,MAAM,EAAE,CAAC,CAAC,MAAM,CACd,CAAC,CAAC,UAAU,GAAG,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,UAAU,CAAC,GAAG,OAAO,GAAG,QAAQ,CAC1E,EAAE,EACH,WAAW,CAAC,EAAE,CAAC,CAAC,GAAG,GAClB,SAAS,CAoSX"}

package/models/mxCell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mxCell.d.ts","sourceRoot":"","sources":["../../src/models/mxCell.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,CAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAE7C,eAAO,MAAM,GAAG,WAAW,CAAC;AAE5B,QAAA,MAAM,aAAa,eAAe,CAAC;AAGnC,MAAM,WAAW,WAAY,SAAQ,cAAc;IACjD,CAAC,aAAa,CAAC,CAAC,EAAE,cAAc,CAAC;CAClC;AAED,wBAAgB,KAAK,CAAC,MAAM,EAAE,WAAW,GAAG,CAAC,CAAC,UAAU,CAoBvD;AAED,wBAAgB,SAAS,CAAC,UAAU,EAAE,CAAC,CAAC,UAAU,2BA8BjD"}
+{"version":3,"file":"mxCell.d.ts","sourceRoot":"","sources":["../../src/models/mxCell.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,CAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAE7C,eAAO,MAAM,GAAG,WAAW,CAAC;AAE5B,QAAA,MAAM,aAAa,eAAe,CAAC;AAGnC,MAAM,WAAW,WAAY,SAAQ,cAAc;IACjD,CAAC,aAAa,CAAC,CAAC,EAAE,cAAc,CAAC;CAClC;AAED,wBAAgB,KAAK,CAAC,MAAM,EAAE,WAAW,GAAG,CAAC,CAAC,UAAU,CAoBvD;AAED,wBAAgB,SAAS,CAAC,UAAU,EAAE,CAAC,CAAC,UAAU,2BAmDjD"}

package/models/mxfile.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mxfile.d.ts","sourceRoot":"","sources":["../../src/models/mxfile.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,CAAC,MAAM,KAAK,CAAC;AAMzB,OAAO,KAAK,EAAE,OAAO,EAAY,MAAM,WAAW,CAAC;AACnD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAE7C,eAAO,MAAM,GAAG,WAAW,CAAC;AAC5B,eAAO,MAAM,eAAe,QAAuB,CAAC;AAEpD,MAAM,MAAM,OAAO,GAAG,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;AAErC,MAAM,WAAW,MAAO,SAAQ,cAAc;IAC5C,OAAO,EAAE,OAAO,EAAE,CAAC;CACpB;AAED,wBAAgB,KAAK,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC,GAAG,kBAkB/C;AAED,wBAAgB,UAAU,CAAC,OAAO,EAAE,OAAO,GAAG,cAAc,CAgB3D"}
+{"version":3,"file":"mxfile.d.ts","sourceRoot":"","sources":["../../src/models/mxfile.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,CAAC,MAAM,KAAK,CAAC;AAMzB,OAAO,KAAK,EAAE,OAAO,EAAY,MAAM,WAAW,CAAC;AACnD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAE7C,eAAO,MAAM,GAAG,WAAW,CAAC;AAC5B,eAAO,MAAM,eAAe,QAAuB,CAAC;AAEpD,MAAM,MAAM,OAAO,GAAG,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;AAErC,MAAM,WAAW,MAAO,SAAQ,cAAc;IAC5C,OAAO,EAAE,OAAO,EAAE,CAAC;CACpB;AAED,wBAAgB,KAAK,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC,GAAG,kBAkB/C;AAED,wBAAgB,UAAU,CAAC,OAAO,EAAE,OAAO,GAAG,cAAc,CAqB3D"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "y-mxgraph",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "description": "Yjs binding for draw.io (mxGraph) documents",
   "keywords": [
     "yjs",
@@ -28,6 +28,11 @@
       "types": "./index.d.ts"
     }
   },
+  "dependencies": {
+    "colord": "^2.9.3",
+    "lodash-es": "^4.17.21",
+    "xml-js": "^1.6.11"
+  },
   "peerDependencies": {
     "y-protocols": "^1.0.0",
     "yjs": "^13.6.0"

package/y-mxgraph.cjs.js

@@ -85,12 +85,24 @@ function parse$3(object) {
   return xmlElement;
 }
 function serialize$2(xmlElement) {
-  const attributes = {
+  const rawAttributes = {
     ...xmlElement.getAttributes()
   };
   let mxGeometry = null;
-  if (mxGeometryAttributeKey in attributes) {
-    const mxGeometryString = attributes[mxGeometryAttributeKey];
+  let mxGeometryString;
+  if (mxGeometryAttributeKey in rawAttributes) {
+    mxGeometryString = rawAttributes[mxGeometryAttributeKey];
+    delete rawAttributes[mxGeometryAttributeKey];
+  }
+  const attributes = {};
+  for (const [key2, value] of Object.entries(rawAttributes)) {
+    if (typeof value === "string") {
+      attributes[key2] = value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&apos;");
+    } else if (value != null) {
+      attributes[key2] = String(value);
+    }
+  }
+  if (mxGeometryString) {
     try {
       const parsed = xmlJs.xml2js(mxGeometryString, { compact: true });
       mxGeometry = parsed[mxGeometryKey] ?? null;
@@ -100,7 +112,6 @@ function serialize$2(xmlElement) {
     } catch (e) {
       console.warn("[y-mxgraph] Failed to parse mxGeometry:", e);
     }
-    delete attributes[mxGeometryAttributeKey];
   }
   const obj = {
     _attributes: attributes
@@ -189,11 +200,13 @@ function serializer(yMxFile) {
   const diagramOrder = yMxFile.get(
     diagramOrderKey
   );
+  const orderIds = diagramOrder ? diagramOrder.toArray() : [];
+  const ids = orderIds.length > 0 ? orderIds : diagrams ? Array.from(diagrams.keys()) : [];
   const obj = {
     _attributes: {
       pages: yMxFile.get("pages") || "1"
     },
-    [key$1]: diagramOrder.map((id) => diagrams.get(id)).map((diagramElement) => serialize(diagramElement))
+    [key$1]: ids.map((id) => diagrams.get(id)).filter((d) => !!d).map((diagramElement) => serialize(diagramElement))
   };
   return obj;
 }
@@ -259,6 +272,12 @@ function applyFilePatch(doc, patch, options) {
         diagramOrderKey
       );
       ensureUniqueOrder(orderArr);
+      const currentOrder = orderArr.toArray();
+      if (currentOrder.length === 0 && diagramsMap && diagramsMap.size > 0) {
+        const allIds = Array.from(diagramsMap.keys());
+        orderArr.push(allIds);
+      }
+      ensureUniqueOrder(orderArr);
       const existingIds = orderArr.toArray();
       const existingIndex = /* @__PURE__ */ new Map();
       existingIds.forEach((id, idx) => existingIndex.set(id, idx));
@@ -478,7 +497,9 @@ function initDocSnapshot(doc, resetSnapshot = false) {
     const mxfile = doc.getMap(key);
     const diagramsMap = mxfile.get(key$1);
     const orderArr = mxfile.get(diagramOrderKey);
-    const diagramOrder = resetSnapshot ? [] : orderArr ? orderArr.toArray().slice() : [];
+    const orderIds = orderArr ? orderArr.toArray() : [];
+    const allDiagramIds = orderIds.length > 0 ? orderIds : diagramsMap ? Array.from(diagramsMap.keys()) : [];
+    const diagramOrder = resetSnapshot ? [] : allDiagramIds.slice();
     const snap = {
       diagramOrder,
       cellsOrder: /* @__PURE__ */ new Map(),
@@ -551,7 +572,8 @@ function generatePatch(events, explicitDoc) {
     u.cells = u.cells || {};
     return u.cells;
   };
-  const currDiagramOrder = orderArr.toArray();
+  const orderIds = orderArr.toArray();
+  const currDiagramOrder = orderIds.length > 0 ? orderIds : diagramsMap ? Array.from(diagramsMap.keys()) : [];
   const diagramsList = currDiagramOrder.map((id) => diagramsMap.get(id)).filter((d) => !!d);
   const currCellsOrder = /* @__PURE__ */ new Map();
   const cellAttrMap = /* @__PURE__ */ new Map();
@@ -1436,16 +1458,29 @@ function bindCollaborator(file, options) {
 class Binding {
   constructor(file, options) {
     this.suppressLocalApply = false;
+    this.docInitialized = false;
     const { doc, awareness, undoManager, mouseMoveThrottle, cursor } = options;
     this.doc = doc;
     const ui = file.getUi();
     const graph = ui.editor.graph;
     this.mxGraphModel = graph.model;
-    const docHasData = doc.share.has(key);
-    if (!docHasData) {
-      xml2doc(file.data, doc);
+    const mxfileMap = doc.getMap(key);
+    const docHasData = mxfileMap.size > 0;
+    this.docInitialized = docHasData;
+    file.setShadowPages(file.ui.clonePages(file.ui.pages));
+    if (docHasData) {
+      initDocSnapshot(doc, false);
+      const fullPatch = generatePatch([], doc);
+      if (Object.keys(fullPatch).length > 0) {
+        this.suppressLocalApply = true;
+        try {
+          file.patch([fullPatch]);
+        } finally {
+          this.suppressLocalApply = false;
+        }
+      }
+      file.setShadowPages(file.ui.clonePages(file.ui.pages));
     }
-    initDocSnapshot(doc, docHasData);
     this.mxListener = () => {
       if (this.suppressLocalApply)
         return;
@@ -1453,16 +1488,31 @@ class Binding {
         file.shadowPages,
         file.ui.pages
       );
+      const patchKeys = Object.keys(patch);
+      if (patchKeys.length === 0)
+        return;
+      if (!this.docInitialized) {
+        doc.transact(() => {
+          xml2doc(file.data, doc);
+          initDocSnapshot(doc, false);
+        });
+        this.docInitialized = true;
+      }
       file.setShadowPages(file.ui.clonePages(file.ui.pages));
       applyFilePatch(doc, patch, { origin: LOCAL_ORIGIN });
     };
     this.mxGraphModel.addListener("change", this.mxListener);
     this.docObserver = (events, transaction) => {
+      if (!this.docInitialized) {
+        this.docInitialized = true;
+      }
       if (transaction.local && transaction.origin === LOCAL_ORIGIN) {
         generatePatch(events);
         return;
       }
       const patch = generatePatch(events);
+      if (Object.keys(patch).length === 0)
+        return;
       this.suppressLocalApply = true;
       try {
         file.patch([patch]);
@@ -1471,19 +1521,7 @@ class Binding {
         this.suppressLocalApply = false;
       }
     };
-    doc.getMap(key).observeDeep(this.docObserver);
-    if (docHasData) {
-      const fullPatch = generatePatch([], doc);
-      if (Object.keys(fullPatch).length > 0) {
-        this.suppressLocalApply = true;
-        try {
-          file.patch([fullPatch]);
-          file.setShadowPages(file.ui.clonePages(file.ui.pages));
-        } finally {
-          this.suppressLocalApply = false;
-        }
-      }
-    }
+    mxfileMap.observeDeep(this.docObserver);
     if (awareness) {
       this.cleanupCollaborator = bindCollaborator(file, {
         awareness,