y-mxgraph 0.6.2 → 0.6.6

package/y-mxgraph.js

@@ -895,7 +895,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";
@@ -913,11 +913,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;
 }
@@ -1009,7 +1009,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) {
@@ -1020,7 +1020,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);
       }
@@ -1144,6 +1144,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;
@@ -1152,6 +1153,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();
@@ -1162,6 +1164,7 @@ function bindCollaborator(file, options) {
     userColor = generateColor(userName);
     setAwarenessStateValue(awareness, userColorKey, userColor);
   }
+  getAwarenessStateValue(awareness, userAccountKey);
   const cleanupCursor = bindCursor(file, {
     awareness,
     graph,
@@ -1176,13 +1179,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(
@@ -1196,7 +1217,8 @@ function bindCollaborator(file, options) {
             clientId
           ),
           userColor: color,
-          userName: name
+          userName: name,
+          userAccount: account || void 0
         });
       }
       renderRemoteCursors(file.getUi(), remotes);