y-mxgraph 0.6.2 → 0.6.6

package/iframe-bridge/server.js.map

@@ -1 +1 @@
-{"version":3,"file":"server.js","sources":["../../../iframe-bridge/src/origin.ts","../../../iframe-bridge/src/server.ts"],"sourcesContent":["/**\n * iframe bridge 内部变更的 origin 标识。\n * 当 provider 端产生 ydoc-update 时，使用此 origin 标记，\n * 以便 server 端的 UndoManager 能正确追踪来自 iframe 的变更。\n */\nexport const IFRAME_ORIGIN: object = {};\n\n/**\n * 基线数据标记（用于首次初始化）。\n * 此 origin 的更新不应进入 UndoManager 的撤销栈。\n */\nexport const BASELINE_ORIGIN: object = {};\n","import * as Y from \"yjs\";\nimport {\n  Awareness,\n  applyAwarenessUpdate,\n  encodeAwarenessUpdate,\n} from \"y-protocols/awareness\";\nimport { IFRAME_ORIGIN, BASELINE_ORIGIN } from \"./origin.js\";\n\nexport interface IframeBridgeServerOptions {\n  undoManager?: Y.UndoManager;\n}\n\nexport interface IframeBridgeServer {\n  connected: boolean;\n  onConnect: (fn: () => void) => () => void;\n  onDisconnect: (fn: () => void) => () => void;\n  on: (event: \"connect\" | \"disconnect\", fn: () => void) => () => void;\n  destroy: () => void;\n}\n\nexport function createIframeBridgeServer(\n  iframe: HTMLIFrameElement,\n  ydoc: Y.Doc,\n  awareness: Awareness,\n  options?: IframeBridgeServerOptions,\n): IframeBridgeServer {\n  const { undoManager } = options ?? {};\n  let connected = false;\n  let applyingIframeUpdate = false;\n  const connectListeners = new Set<() => void>();\n  const disconnectListeners = new Set<() => void>();\n\n  function setConnected(value: boolean) {\n    if (connected === value) return;\n    connected = value;\n    if (value) {\n      connectListeners.forEach((fn) => fn());\n    } else {\n      disconnectListeners.forEach((fn) => fn());\n    }\n  }\n\n  function postToIframe(type: string, payload?: Uint8Array) {\n    const cw = iframe.contentWindow;\n    if (cw) {\n      cw.postMessage(\n        { type, payload: payload ? Array.from(payload) : [] },\n        \"*\",\n      );\n    }\n  }\n\n  function postUndoStateToIframe() {\n    if (!undoManager) return;\n    const undoStack = (undoManager as any).undoStack;\n    const redoStack = (undoManager as any).redoStack;\n    const cw = iframe.contentWindow;\n    if (cw) {\n      const state = {\n        type: \"undo-state\",\n        canUndo: undoManager.canUndo(),\n        canRedo: undoManager.canRedo(),\n        undoStackSize: undoStack?.length ?? 0,\n        redoStackSize: redoStack?.length ?? 0,\n      };\n      cw.postMessage(state, \"*\");\n    }\n  }\n\n  const onYdocUpdate = (update: Uint8Array, origin: unknown) => {\n    if (origin === IFRAME_ORIGIN) return;\n    postToIframe(\"ydoc-update\", update);\n  };\n\n  const onAwarenessUpdate = ({\n    added,\n    updated,\n    removed,\n  }: {\n    added: number[];\n    updated: number[];\n    removed: number[];\n  }) => {\n    if (applyingIframeUpdate) return;\n    const changes = [...added, ...updated, ...removed];\n    if (changes.length === 0) return;\n\n    // 把所有变化的 clientID 都发送给 iframe（包括其他 Webrtc peers 的光标更新）\n    // 但要注意：server 自身的 clientID 需要被 iframe 识别为 serverClientId\n    const update = encodeAwarenessUpdate(awareness, changes);\n    postToIframe(\"awareness-update\", update);\n  };\n\n  const onMessage = (event: MessageEvent) => {\n    if (event.source !== iframe.contentWindow) return;\n\n    const { type: msgType, payload } = event.data;\n\n    if (msgType === \"init\") {\n      console.log(\n        `[iframe-bridge server] received init — connected=${connected}`,\n      );\n      if (!connected) {\n        setConnected(true);\n      }\n      const docState = Y.encodeStateAsUpdate(ydoc);\n      console.log(\n        `[iframe-bridge server] sending ydoc-sync — docState bytes=${docState.length}`,\n      );\n      const awarenessState = encodeAwarenessUpdate(\n        awareness,\n        Array.from(awareness.getStates().keys()),\n      );\n      postToIframe(\"ydoc-sync\", new Uint8Array(Array.from(docState)));\n      // 在单独的 postMessage 中发送 serverClientId，方便 iframe 接收\n      const cw = iframe.contentWindow;\n      if (cw) {\n        cw.postMessage(\n          {\n            type: \"awareness-sync\",\n            payload: Array.from(awarenessState),\n            serverClientId: awareness.clientID,\n          },\n          \"*\",\n        );\n      }\n      // 同步初始 undo 状态\n      postUndoStateToIframe();\n    } else if (msgType === \"ping\") {\n      const cw = iframe.contentWindow;\n      if (cw) {\n        cw.postMessage(\n          { type: \"pong\", serverClientId: awareness.clientID },\n          \"*\",\n        );\n      }\n    } else if (msgType === \"ydoc-update\") {\n      const update = new Uint8Array(payload);\n      const isBaseline = event.data.isBaseline;\n      // 基线数据使用 BASELINE_ORIGIN（不进入 undo 栈），编辑数据使用 IFRAME_ORIGIN\n      const applyOrigin = isBaseline ? BASELINE_ORIGIN : IFRAME_ORIGIN;\n      Y.applyUpdate(ydoc, update, applyOrigin);\n      // 源 iframe 已经持有此 update，无需回传\n    } else if (msgType === \"awareness-update\") {\n      // 应用 iframe 的 awareness 更新时设置标志，防止触发 onAwarenessUpdate 回传\n      applyingIframeUpdate = true;\n      applyAwarenessUpdate(awareness, new Uint8Array(payload), IFRAME_ORIGIN);\n      applyingIframeUpdate = false;\n    } else if (msgType === \"undo\" && undoManager) {\n      undoManager.undo();\n      postUndoStateToIframe();\n    } else if (msgType === \"redo\" && undoManager) {\n      undoManager.redo();\n      postUndoStateToIframe();\n    }\n  };\n\n  const onUndoPopped = () => {\n    postUndoStateToIframe();\n  };\n\n  const onStackCleared = () => {\n    postUndoStateToIframe();\n  };\n\n  const onStackItemAdded = () => {\n    postUndoStateToIframe();\n  };\n\n  ydoc.on(\"update\", onYdocUpdate);\n  awareness.on(\"update\", onAwarenessUpdate);\n  window.addEventListener(\"message\", onMessage);\n  if (undoManager) {\n    undoManager.on(\"stack-item-popped\", onUndoPopped);\n    undoManager.on(\"stack-cleared\", onStackCleared);\n    undoManager.on(\"stack-item-added\", onStackItemAdded);\n  }\n\n  return {\n    get connected() {\n      return connected;\n    },\n    onConnect(fn: () => void) {\n      connectListeners.add(fn);\n      return () => connectListeners.delete(fn);\n    },\n    onDisconnect(fn: () => void) {\n      disconnectListeners.add(fn);\n      return () => disconnectListeners.delete(fn);\n    },\n    on(event: \"connect\" | \"disconnect\", fn: () => void) {\n      if (event === \"connect\") {\n        connectListeners.add(fn);\n        return () => connectListeners.delete(fn);\n      } else {\n        disconnectListeners.add(fn);\n        return () => disconnectListeners.delete(fn);\n      }\n    },\n    destroy: () => {\n      setConnected(false);\n      postToIframe(\"disconnect\");\n      ydoc.off(\"update\", onYdocUpdate);\n      awareness.off(\"update\", onAwarenessUpdate);\n      window.removeEventListener(\"message\", onMessage);\n      if (undoManager) {\n        undoManager.off(\"stack-item-popped\", onUndoPopped);\n        undoManager.off(\"stack-cleared\", onStackCleared);\n        undoManager.off(\"stack-item-added\", onStackItemAdded);\n      }\n      connectListeners.clear();\n      disconnectListeners.clear();\n    },\n  };\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"server.js","sources":["../../../iframe-bridge/src/origin.ts","../../../iframe-bridge/src/server.ts"],"sourcesContent":["/**\n * iframe bridge 内部变更的 origin 标识。\n * 当 provider 端产生 ydoc-update 时，使用此 origin 标记，\n * 以便 server 端的 UndoManager 能正确追踪来自 iframe 的变更。\n */\nexport const IFRAME_ORIGIN: object = {};\n\n/**\n * 基线数据标记（用于首次初始化）。\n * 此 origin 的更新不应进入 UndoManager 的撤销栈。\n */\nexport const BASELINE_ORIGIN: object = {};\n","import * as Y from \"yjs\";\nimport {\n  Awareness,\n  applyAwarenessUpdate,\n  encodeAwarenessUpdate,\n} from \"y-protocols/awareness\";\nimport { IFRAME_ORIGIN, BASELINE_ORIGIN } from \"./origin.js\";\n\nexport interface IframeBridgeServerOptions {\n  undoManager?: Y.UndoManager;\n  awarenessSyncMode?: \"binary\" | \"local-state\";\n}\n\nexport interface IframeBridgeServer {\n  connected: boolean;\n  onConnect: (fn: () => void) => () => void;\n  onDisconnect: (fn: () => void) => () => void;\n  on: (event: \"connect\" | \"disconnect\", fn: () => void) => () => void;\n  destroy: () => void;\n}\n\nexport function createIframeBridgeServer(\n  iframe: HTMLIFrameElement,\n  ydoc: Y.Doc,\n  awareness: Awareness,\n  options?: IframeBridgeServerOptions,\n): IframeBridgeServer {\n  const { undoManager, awarenessSyncMode = \"binary\" } = options ?? {};\n  let connected = false;\n  let applyingIframeUpdate = false;\n  const connectListeners = new Set<() => void>();\n  const disconnectListeners = new Set<() => void>();\n\n  function setConnected(value: boolean) {\n    if (connected === value) return;\n    connected = value;\n    if (value) {\n      connectListeners.forEach((fn) => fn());\n    } else {\n      disconnectListeners.forEach((fn) => fn());\n    }\n  }\n\n  function postToIframe(type: string, payload?: Uint8Array) {\n    const cw = iframe.contentWindow;\n    if (cw) {\n      cw.postMessage(\n        { type, payload: payload ? Array.from(payload) : [] },\n        \"*\",\n      );\n    }\n  }\n\n  function postUndoStateToIframe() {\n    if (!undoManager) return;\n    const undoStack = (undoManager as any).undoStack;\n    const redoStack = (undoManager as any).redoStack;\n    const cw = iframe.contentWindow;\n    if (cw) {\n      const state = {\n        type: \"undo-state\",\n        canUndo: undoManager.canUndo(),\n        canRedo: undoManager.canRedo(),\n        undoStackSize: undoStack?.length ?? 0,\n        redoStackSize: redoStack?.length ?? 0,\n      };\n      cw.postMessage(state, \"*\");\n    }\n  }\n\n  const onYdocUpdate = (update: Uint8Array, origin: unknown) => {\n    if (origin === IFRAME_ORIGIN) return;\n    postToIframe(\"ydoc-update\", update);\n  };\n\n  const onAwarenessUpdate = ({\n    added,\n    updated,\n    removed,\n  }: {\n    added: number[];\n    updated: number[];\n    removed: number[];\n  }) => {\n    if (applyingIframeUpdate) return;\n    const changes = [...added, ...updated, ...removed];\n    if (changes.length === 0) return;\n\n    // 把所有变化的 clientID 都发送给 iframe（包括其他 Webrtc peers 的光标更新）\n    // 但要注意：server 自身的 clientID 需要被 iframe 识别为 serverClientId\n    const update = encodeAwarenessUpdate(awareness, changes);\n    postToIframe(\"awareness-update\", update);\n  };\n\n  const onMessage = (event: MessageEvent) => {\n    if (event.source !== iframe.contentWindow) return;\n\n    const { type: msgType, payload } = event.data;\n\n    if (msgType === \"init\") {\n      console.log(\n        `[iframe-bridge server] received init — connected=${connected}`,\n      );\n      if (!connected) {\n        setConnected(true);\n      }\n      const docState = Y.encodeStateAsUpdate(ydoc);\n      console.log(\n        `[iframe-bridge server] sending ydoc-sync — docState bytes=${docState.length}`,\n      );\n      const awarenessState = encodeAwarenessUpdate(\n        awareness,\n        Array.from(awareness.getStates().keys()),\n      );\n      postToIframe(\"ydoc-sync\", new Uint8Array(Array.from(docState)));\n      // 在单独的 postMessage 中发送 serverClientId，方便 iframe 接收\n      const cw = iframe.contentWindow;\n      if (cw) {\n        cw.postMessage(\n          {\n            type: \"awareness-sync\",\n            payload: Array.from(awarenessState),\n            serverClientId: awareness.clientID,\n          },\n          \"*\",\n        );\n      }\n      // 同步初始 undo 状态\n      postUndoStateToIframe();\n    } else if (msgType === \"ping\") {\n      const cw = iframe.contentWindow;\n      if (cw) {\n        cw.postMessage(\n          { type: \"pong\", serverClientId: awareness.clientID },\n          \"*\",\n        );\n      }\n    } else if (msgType === \"ydoc-update\") {\n      const update = new Uint8Array(payload);\n      const isBaseline = event.data.isBaseline;\n      // 基线数据使用 BASELINE_ORIGIN（不进入 undo 栈），编辑数据使用 IFRAME_ORIGIN\n      const applyOrigin = isBaseline ? BASELINE_ORIGIN : IFRAME_ORIGIN;\n      Y.applyUpdate(ydoc, update, applyOrigin);\n      // 源 iframe 已经持有此 update，无需回传\n    } else if (msgType === \"awareness-local-state\") {\n      applyingIframeUpdate = true;\n      awareness.setLocalState(event.data.state);\n      applyingIframeUpdate = false;\n    } else if (msgType === \"awareness-update\") {\n      // 应用 iframe 的 awareness 更新时设置标志，防止触发 onAwarenessUpdate 回传\n      applyingIframeUpdate = true;\n      applyAwarenessUpdate(awareness, new Uint8Array(payload), IFRAME_ORIGIN);\n      applyingIframeUpdate = false;\n    } else if (msgType === \"undo\" && undoManager) {\n      undoManager.undo();\n      postUndoStateToIframe();\n    } else if (msgType === \"redo\" && undoManager) {\n      undoManager.redo();\n      postUndoStateToIframe();\n    }\n  };\n\n  const onUndoPopped = () => {\n    postUndoStateToIframe();\n  };\n\n  const onStackCleared = () => {\n    postUndoStateToIframe();\n  };\n\n  const onStackItemAdded = () => {\n    postUndoStateToIframe();\n  };\n\n  ydoc.on(\"update\", onYdocUpdate);\n  awareness.on(\"update\", onAwarenessUpdate);\n  window.addEventListener(\"message\", onMessage);\n  if (undoManager) {\n    undoManager.on(\"stack-item-popped\", onUndoPopped);\n    undoManager.on(\"stack-cleared\", onStackCleared);\n    undoManager.on(\"stack-item-added\", onStackItemAdded);\n  }\n\n  return {\n    get connected() {\n      return connected;\n    },\n    onConnect(fn: () => void) {\n      connectListeners.add(fn);\n      return () => connectListeners.delete(fn);\n    },\n    onDisconnect(fn: () => void) {\n      disconnectListeners.add(fn);\n      return () => disconnectListeners.delete(fn);\n    },\n    on(event: \"connect\" | \"disconnect\", fn: () => void) {\n      if (event === \"connect\") {\n        connectListeners.add(fn);\n        return () => connectListeners.delete(fn);\n      } else {\n        disconnectListeners.add(fn);\n        return () => disconnectListeners.delete(fn);\n      }\n    },\n    destroy: () => {\n      setConnected(false);\n      postToIframe(\"disconnect\");\n      ydoc.off(\"update\", onYdocUpdate);\n      awareness.off(\"update\", onAwarenessUpdate);\n      window.removeEventListener(\"message\", onMessage);\n      if (undoManager) {\n        undoManager.off(\"stack-item-popped\", onUndoPopped);\n        undoManager.off(\"stack-cleared\", onStackCleared);\n        undoManager.off(\"stack-item-added\", onStackItemAdded);\n      }\n      connectListeners.clear();\n      disconnectListeners.clear();\n    },\n  };\n}\n"],"names":[],"mappings":"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"}

package/package.json

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

package/y-mxgraph.cjs

@@ -914,7 +914,7 @@ function createCursorImage(color) {
   return "data:image/svg+xml;base64," + encoded;
 }
 const CacheKey$1 = "__remoteCursor__";
-function createCursorEl(color, username) {
+function createCursorEl(color, username, userAccount) {
   const cursor = document.createElement("div");
   cursor.style.position = "absolute";
   cursor.style.opacity = "0.9";
@@ -932,11 +932,11 @@ function createCursorEl(color, username) {
   name.style.padding = "3px 7px";
   name.style.marginTop = "8px";
   name.style.borderRadius = "10px";
-  name.style.maxWidth = "100px";
+  name.style.maxWidth = "140px";
   name.style.overflow = "hidden";
   name.style.textOverflow = "ellipsis";
   name.style.whiteSpace = "nowrap";
-  name.innerText = username;
+  name.innerText = userAccount ? `${username} (${userAccount})` : username;
   cursor.appendChild(name);
   return cursor;
 }
@@ -1028,7 +1028,7 @@ function renderRemoteCursors(ui, remotes) {
   const graph = ui.editor.graph;
   const { translate, scale } = graph.view;
   currentPageRemotes.forEach(
-    ({ clientId, cursorState, userColor, userName }) => {
+    ({ clientId, cursorState, userColor, userName, userAccount }) => {
       if (!cursorState) return;
       let el = cache.get(clientId);
       if (cursorState.hide) {
@@ -1039,7 +1039,7 @@ function renderRemoteCursors(ui, remotes) {
         return;
       }
       if (!el) {
-        el = createCursorEl(userColor, userName);
+        el = createCursorEl(userColor, userName, userAccount);
         ui.diagramContainer.appendChild(el);
         cache.set(clientId, el);
       }
@@ -1163,6 +1163,7 @@ function renderRemoteSelections(ui, remotes) {
 }
 const DEFAULT_USER_NAME_KEY = "user.name";
 const DEFAULT_USER_COLOR_KEY = "user.color";
+const DEFAULT_USER_ACCOUNT_KEY = "user.account";
 function bindCollaborator(file, options) {
   var _a, _b;
   const graph = options.graph || file.getUi().editor.graph;
@@ -1171,6 +1172,7 @@ function bindCollaborator(file, options) {
   const cursorOption = options.cursor;
   const userNameKey = typeof cursorOption === "object" && (cursorOption == null ? void 0 : cursorOption.userNameKey) ? cursorOption.userNameKey : DEFAULT_USER_NAME_KEY;
   const userColorKey = typeof cursorOption === "object" && (cursorOption == null ? void 0 : cursorOption.userColorKey) ? cursorOption.userColorKey : DEFAULT_USER_COLOR_KEY;
+  const userAccountKey = typeof cursorOption === "object" && (cursorOption == null ? void 0 : cursorOption.userAccountKey) ? cursorOption.userAccountKey : DEFAULT_USER_ACCOUNT_KEY;
   let userName = getAwarenessStateValue(awareness, userNameKey);
   if (!userName) {
     userName = generateRandomName();
@@ -1181,6 +1183,7 @@ function bindCollaborator(file, options) {
     userColor = generateColor(userName);
     setAwarenessStateValue(awareness, userColorKey, userColor);
   }
+  getAwarenessStateValue(awareness, userAccountKey);
   const cleanupCursor = bindCursor(file, {
     awareness,
     graph,
@@ -1195,13 +1198,31 @@ function bindCollaborator(file, options) {
   if (typeof showCursor === "boolean" && showCursor) {
     const awarenessHandler = (update) => {
       const states = awareness.getStates();
-      const remotes = /* @__PURE__ */ new Map();
       const changedClientIds = /* @__PURE__ */ new Set([...update.added, ...update.updated]);
+      if (changedClientIds.has(awareness.clientID)) {
+        const newName = getAwarenessStateValue(awareness, userNameKey);
+        if (newName) userName = newName;
+        const newColor = getAwarenessStateValue(
+          awareness,
+          userColorKey
+        );
+        if (newColor) userColor = newColor;
+        getAwarenessStateValue(
+          awareness,
+          userAccountKey
+        );
+      }
+      const remotes = /* @__PURE__ */ new Map();
       for (const [clientId] of states.entries()) {
         if (clientId === awareness.clientID) continue;
         if (!changedClientIds.has(clientId)) continue;
         const name = getAwarenessStateValue(awareness, userNameKey, clientId) || clientId + "";
         const color = getAwarenessStateValue(awareness, userColorKey, clientId) || "#000000";
+        const account = getAwarenessStateValue(
+          awareness,
+          userAccountKey,
+          clientId
+        );
         remotes.set(clientId, {
           clientId,
           cursorState: getAwarenessStateValue(
@@ -1215,7 +1236,8 @@ function bindCollaborator(file, options) {
             clientId
           ),
           userColor: color,
-          userName: name
+          userName: name,
+          userAccount: account || void 0
         });
       }
       renderRemoteCursors(file.getUi(), remotes);