y-mxgraph 0.2.1 → 0.3.0

package/README.md

@@ -10,6 +10,7 @@ Yjs binding for draw.io (mxGraph) documents, enabling real-time collaborative ed
 - **Real-time collaboration** via y-webrtc, y-websocket, or any Yjs provider
 - **Undo/Redo support** with Y.UndoManager
 - **Collaborative cursors** via y-protocols Awareness
+- **iframe Bridge** for isolated draw.io instances synced via postMessage
 - **Full TypeScript** support
 
 ## Installation
@@ -52,6 +53,7 @@ App.main((app) => {
 - [Getting Started](https://mizuka-wu.github.io/y-mxgraph/en/guide/getting-started)
 - [API Reference](https://mizuka-wu.github.io/y-mxgraph/en/api/)
 - [Architecture](https://mizuka-wu.github.io/y-mxgraph/en/guide/architecture)
+- [iframe Bridge](https://mizuka-wu.github.io/y-mxgraph/en/guide/iframe-bridge)
 
 ## Development
 
@@ -76,14 +78,63 @@ pnpm --filter y-mxgraph test
 # Single-page mode (draw.io loaded directly in the current page)
 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
+# iframe mode (server page runs WebRTC Provider, iframes each run draw.io + y-mxgraph, synced via postMessage)
+# Visit http://localhost:5173/iframe.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
 ```
 
+## iframe Bridge
+
+`@y-mxgraph/iframe-bridge` enables collaborative editing in iframe-isolated environments. The **server** (parent page) manages the network connection (y-webrtc, y-websocket, etc.) and syncs Y.Doc + Awareness to one or more **providers** (iframe children) via `postMessage`.
+
+```text
+┌─────────────────────────────────────────────────────────────┐
+│  Server (parent page)                                       │
+│  ┌──────────┐  ┌───────────┐  ┌──────────────────────────┐ │
+│  │  Y.Doc   │  │ Awareness │  │ Provider (y-webrtc, etc) │ │
+│  └────┬─────┘  └─────┬─────┘  └──────────────────────────┘ │
+│       │              │                                      │
+│       └──────┬───────┘                                      │
+│              ▼                                              │
+│   createIframeBridgeServer(doc, awareness)                  │
+│              │ postMessage                                  │
+└──────────────│──────────────────────────────────────────────┘
+               │
+    ┌──────────┴──────────┐
+    ▼                     ▼
+┌─────────────┐     ┌─────────────┐
+│ Iframe A    │     │ Iframe B    │
+│ create...   │     │ create...   │
+│ Provider()  │     │ Provider()  │
+│             │     │             │
+│ local Y.Doc │     │ local Y.Doc │
+│ + draw.io   │     │ + draw.io   │
+└─────────────┘     └─────────────┘
+```
+
+```ts
+// Server (parent page)
+import { createIframeBridgeServer } from 'y-mxgraph/iframe-bridge/server';
+
+const doc = new Y.Doc();
+const provider = new WebrtcProvider(roomName, doc, { signaling });
+const bridge = createIframeBridgeServer(doc, provider.awareness);
+bridge.addIframe(iframeElement, 'child-1');
+
+// Provider (iframe child)
+import { createIframeBridgeProvider } from 'y-mxgraph/iframe-bridge/provider';
+
+const doc = new Y.Doc();
+const awareness = new Awareness(doc);
+const bridge = createIframeBridgeProvider(doc, awareness);
+// awareness states are automatically synced with the server
+```
+
+See [iframe Bridge documentation](https://mizuka-wu.github.io/y-mxgraph/en/guide/iframe-bridge) for details.
+
 ## Docs
 
 ```bash

package/README.zh-CN.md

@@ -10,6 +10,7 @@ Yjs 与 draw.io (mxGraph) 文档的双向绑定库，让 draw.io 支持实时多
 - **实时协作** 支持 y-webrtc、y-websocket 及任意 Yjs Provider
 - **撤销/重做** 集成 Y.UndoManager
 - **协同光标** 基于 y-protocols Awareness 渲染远端光标与选区
+- **iframe Bridge** 通过 postMessage 同步隔离的 draw.io 实例
 - **完整 TypeScript** 类型支持
 
 ## 安装
@@ -46,6 +47,56 @@ App.main((app) => {
 - [快速开始](https://mizuka-wu.github.io/y-mxgraph/guide/getting-started)
 - [API 参考](https://mizuka-wu.github.io/y-mxgraph/api/)
 - [实现原理](https://mizuka-wu.github.io/y-mxgraph/guide/architecture)
+- [iframe Bridge](https://mizuka-wu.github.io/y-mxgraph/guide/iframe-bridge)
+
+## iframe Bridge
+
+`@y-mxgraph/iframe-bridge` 支持在 iframe 隔离环境中进行协同编辑。**Server**（父页面）管理网络连接（y-webrtc、y-websocket 等），通过 `postMessage` 将 Y.Doc 和 Awareness 同步到一个或多个 **Provider**（iframe 子页面）。
+
+```text
+┌─────────────────────────────────────────────────────────────┐
+│  Server（父页面）                                            │
+│  ┌──────────┐  ┌───────────┐  ┌──────────────────────────┐ │
+│  │  Y.Doc   │  │ Awareness │  │ Provider (y-webrtc 等)   │ │
+│  └────┬─────┘  └─────┬─────┘  └──────────────────────────┘ │
+│       │              │                                      │
+│       └──────┬───────┘                                      │
+│              ▼                                              │
+│   createIframeBridgeServer(doc, awareness)                  │
+│              │ postMessage                                  │
+└──────────────│──────────────────────────────────────────────┘
+               │
+    ┌──────────┴──────────┐
+    ▼                     ▼
+┌─────────────┐     ┌─────────────┐
+│ Iframe A    │     │ Iframe B    │
+│ create...   │     │ create...   │
+│ Provider()  │     │ Provider()  │
+│             │     │             │
+│ 本地 Y.Doc  │     │ 本地 Y.Doc  │
+│ + draw.io   │     │ + draw.io   │
+└─────────────┘     └─────────────┘
+```
+
+```ts
+// Server（父页面）
+import { createIframeBridgeServer } from '@y-mxgraph/iframe-bridge/server';
+
+const doc = new Y.Doc();
+const provider = new WebrtcProvider(roomName, doc, { signaling });
+const bridge = createIframeBridgeServer(doc, provider.awareness);
+bridge.addIframe(iframeElement, 'child-1');
+
+// Provider（iframe 子页面）
+import { createIframeBridgeProvider } from '@y-mxgraph/iframe-bridge/provider';
+
+const doc = new Y.Doc();
+const awareness = new Awareness(doc);
+const bridge = createIframeBridgeProvider(doc, awareness);
+// awareness 状态自动与 server 同步
+```
+
+详见 [iframe Bridge 文档](https://mizuka-wu.github.io/y-mxgraph/guide/iframe-bridge)。
 
 ## 本地开发
 

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;AAiBvD,OAAO,KAAK,EAAE,UAAU,EAAgB,MAAM,iBAAiB,CAAC;AAEhE;;;;;GAKG;AACH,MAAM,MAAM,sBAAsB,GAC9B,SAAS,GACT,cAAc,GACd,cAAc,CAAC;AAEnB,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;IACN;;OAEG;IACH,cAAc,CAAC,EAAE,sBAAsB,CAAC;IACxC;;;;;;;;OAQG;IACH,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CACzD;AA0KD;;;;;;;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;IACxC,aAAa;IACb,OAAO,CAAC,sBAAsB,CAAyB;IAEvD,+CAA+C;IAC/C,OAAO,KAAK,2BAA2B,GAEtC;gBAEW,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,qBAAqB;IA4I5D;;;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;AAiBvD,OAAO,KAAK,EAAE,UAAU,EAAgB,MAAM,iBAAiB,CAAC;AAEhE;;;;;GAKG;AACH,MAAM,MAAM,sBAAsB,GAC9B,SAAS,GACT,cAAc,GACd,cAAc,CAAC;AAEnB,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;IACN;;OAEG;IACH,cAAc,CAAC,EAAE,sBAAsB,CAAC;IACxC;;;;;;;;OAQG;IACH,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CACzD;AA0KD;;;;;;;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;IACxC,aAAa;IACb,OAAO,CAAC,sBAAsB,CAAyB;IAEvD,+CAA+C;IAC/C,OAAO,KAAK,2BAA2B,GAEtC;gBAEW,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,qBAAqB;IA6I5D;;;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/iframe-bridge/provider.d.ts

@@ -0,0 +1,2 @@
+export { createIframeBridgeProvider, type IframeBridgeProvider, } from "@y-mxgraph/iframe-bridge/provider";
+//# sourceMappingURL=provider.d.ts.map

package/iframe-bridge/provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"provider.d.ts","sourceRoot":"","sources":["../../src/iframe-bridge/provider.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,0BAA0B,EAC1B,KAAK,oBAAoB,GAC1B,MAAM,mCAAmC,CAAC"}

package/iframe-bridge/server.d.ts

@@ -0,0 +1,2 @@
+export { createIframeBridgeServer, type IframeBridgeServer, } from "@y-mxgraph/iframe-bridge/server";
+//# sourceMappingURL=server.d.ts.map

package/iframe-bridge/server.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"server.d.ts","sourceRoot":"","sources":["../../src/iframe-bridge/server.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,wBAAwB,EACxB,KAAK,kBAAkB,GACxB,MAAM,iCAAiC,CAAC"}

package/index.d.ts

@@ -3,4 +3,6 @@ export type { BindDrawioFileOptions, InitialContentStrategy } from "./binding";
 export { xml2doc, doc2xml } from "./transformer";
 export { LOCAL_ORIGIN } from "./helper/origin";
 export { DEFAULT_USER_NAME_KEY, DEFAULT_USER_COLOR_KEY, } from "./binding/collaborator";
+export { createIframeBridgeProvider, createIframeBridgeServer, } from "@y-mxgraph/iframe-bridge";
+export type { IframeBridgeProvider, IframeBridgeServer, } from "@y-mxgraph/iframe-bridge";
 //# sourceMappingURL=index.d.ts.map

package/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,qBAAqB,EAAE,sBAAsB,EAAE,MAAM,WAAW,CAAC;AAC/E,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EACL,qBAAqB,EACrB,sBAAsB,GACvB,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,qBAAqB,EAAE,sBAAsB,EAAE,MAAM,WAAW,CAAC;AAC/E,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EACL,qBAAqB,EACrB,sBAAsB,GACvB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EACL,0BAA0B,EAC1B,wBAAwB,GACzB,MAAM,0BAA0B,CAAC;AAClC,YAAY,EACV,oBAAoB,EACpB,kBAAkB,GACnB,MAAM,0BAA0B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "y-mxgraph",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "Yjs binding for draw.io (mxGraph) documents",
   "keywords": [
     "yjs",

package/y-mxgraph.cjs.js

@@ -4,6 +4,7 @@ const xmlJs = require("xml-js");
 const Y = require("yjs");
 const lodashEs = require("lodash-es");
 const colord = require("colord");
+const iframeBridge = require("@y-mxgraph/iframe-bridge");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
@@ -1623,7 +1624,7 @@ class Binding {
         generatePatch(events);
         return;
       }
-      if (this.shouldReplaceWhenDocHasData) {
+      if (this.shouldReplaceWhenDocHasData && !transaction.local) {
         const mxfileMap = doc.getMap(key);
         const diagramMap = mxfileMap.get(key$1);
         if (diagramMap && diagramMap.size > 0) {
@@ -1725,6 +1726,14 @@ class Binding {
     return new Binding(file, options);
   }
 }
+Object.defineProperty(exports, "createIframeBridgeProvider", {
+  enumerable: true,
+  get: () => iframeBridge.createIframeBridgeProvider
+});
+Object.defineProperty(exports, "createIframeBridgeServer", {
+  enumerable: true,
+  get: () => iframeBridge.createIframeBridgeServer
+});
 exports.Binding = Binding;
 exports.DEFAULT_USER_COLOR_KEY = DEFAULT_USER_COLOR_KEY;
 exports.DEFAULT_USER_NAME_KEY = DEFAULT_USER_NAME_KEY;