y-mxgraph 0.6.5 → 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,
@@ -1185,6 +1188,10 @@ function bindCollaborator(file, options) {
           userColorKey
         );
         if (newColor) userColor = newColor;
+        getAwarenessStateValue(
+          awareness,
+          userAccountKey
+        );
       }
       const remotes = /* @__PURE__ */ new Map();
       for (const [clientId] of states.entries()) {
@@ -1192,6 +1199,11 @@ function bindCollaborator(file, options) {
         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(
@@ -1205,7 +1217,8 @@ function bindCollaborator(file, options) {
             clientId
           ),
           userColor: color,
-          userName: name
+          userName: name,
+          userAccount: account || void 0
         });
       }
       renderRemoteCursors(file.getUi(), remotes);