pins cached user's images + constant bgColor + comment element with o…

…wner

src/components/App.tsx

@@ -1240,23 +1240,34 @@ class App extends React.Component<AppProps, AppState> {
       }
       // don't render text element that's being currently edited (it's
       // rendered on remote only)
-      if (
-        isCommentElement(element) &&
-        this.state.activeComment?.element.id === element.id
-      ) {
-        const { x: canvasX, y: canvasY } = sceneCoordsToViewportCoords(
-          {
-            sceneX: element.x,
-            sceneY: element.y,
-          },
-          this.state,
-        );
-        if (
-          canvasX !== this.state.activeComment.canvasX ||
-          canvasY !== this.state.activeComment.canvasY
-        ) {
-          activeComment = { element, canvasX, canvasY };
+
+      if (isCommentElement(element)) {
+        if (this.state.activeComment?.element.id === element.id) {
+          const { x: canvasX, y: canvasY } = sceneCoordsToViewportCoords(
+            {
+              sceneX: element.x,
+              sceneY: element.y,
+            },
+            this.state,
+          );
+          if (
+            canvasX !== this.state.activeComment.canvasX ||
+            canvasY !== this.state.activeComment.canvasY
+          ) {
+            activeComment = { element, canvasX, canvasY };
+          }
+        }
+
+        if (element.owner.email === this.excalOwner.email) {
+          element.owner = {
+            ...element.owner,
+            first_name: this.excalOwner.first_name,
+            color: this.excalOwner.color,
+            last_name: this.excalOwner.last_name,
+            image: this.excalOwner.image,
+          };
         }
+        this.cacheCommentOwnerImage(element.owner);
       }
       return (
         !this.state.editingElement ||

src/element/types.ts

@@ -179,7 +179,6 @@ export type ExcalidrawFreeDrawElement = _ExcalidrawElementBase &
 export type ExcalidrawCommentElement = _ExcalidrawElementBase &
   Readonly<{
     type: "comment";
-    owner: CommentOwner;
-  }>;
+  }> & { owner: CommentOwner };
 
 export type FileId = string & { _brand: "FileId" };

src/excalidraw-app/index.tsx

@@ -680,6 +680,13 @@ const ExcalidrawWrapper = () => {
         handleKeyboardGlobally={true}
         onLibraryChange={onLibraryChange}
         autoFocus={true}
+        user={{
+          first_name: "Iron",
+          last_name: "Man",
+          email: "[email protected]",
+          color: "#00ff",
+          // image: "https://lh3.googleusercontent.com/a-/AOh14GhnBcE5G6gu8ZYjEanRJ4-SUNI7GLshrGuJfGoo=s96-c",
+        }}
       />
       {excalidrawAPI && (
         <CollabWrapper

src/packages/excalidraw/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@excalidraw/excalidraw",
-  "version": "0.999999.1",
+  "version": "0.999999.3",
   "main": "main.js",
   "types": "types/packages/excalidraw/index.d.ts",
   "files": [

src/renderer/renderElement.ts

@@ -25,7 +25,13 @@ import { RoughSVG } from "roughjs/bin/svg";
 import { RoughGenerator } from "roughjs/bin/generator";
 
 import { RenderConfig } from "../scene/types";
-import { distance, getFontString, getFontFamilyString, isRTL } from "../utils";
+import {
+  distance,
+  getFontString,
+  getFontFamilyString,
+  isRTL,
+  getOwnerInitals,
+} from "../utils";
 import { isPathALoop } from "../math";
 import rough from "roughjs/bin/rough";
 import { AppState, BinaryFiles, Zoom } from "../types";
@@ -253,15 +259,15 @@ const drawElementOnCanvas = (
         context.lineWidth = 5;
         context.stroke();
         context.restore();
-        context.fillStyle = element.backgroundColor;
+        context.fillStyle = element.owner.color;
         context.fill();
         context.closePath();
         context.font = `18px Open Sans`;
         context.fillStyle = "white";
         context.textAlign = "center";
         context.textBaseline = "middle";
         context.fillText(
-          "VP",
+          getOwnerInitals(element.owner),
           element.width / 2,
           element.height / 2 + 2,
           element.width,
@@ -574,15 +580,6 @@ const generateElementShape = (
 
         break;
       case "comment":
-        shape = generator.ellipse(
-          element.width / 2,
-          element.height / 2,
-          element.width,
-          element.height,
-          generateRoughOptions(element),
-        );
-        setShapeForElement(element, shape);
-
         break;
       case "line":
       case "arrow": {

src/types.ts

@@ -283,18 +283,18 @@ export interface ExcalidrawProps {
 }
 
 export type UserProp = Readonly<{
-  first_name: string;
   email: string;
+}> & {
+  first_name: string;
   color?: string;
   last_name?: string;
   image?: string;
-}>;
+};
 
-export type CommentOwner = UserProp &
-  Readonly<{
-    id: string;
-    color: string;
-  }>;
+export type CommentOwner = UserProp & {
+  id: string;
+  color: string;
+};
 
 export type SceneData = {
   elements?: ImportedDataState["elements"];

src/utils.ts

@@ -11,7 +11,7 @@ import {
   WINDOWS_EMOJI_FALLBACK_FONT,
 } from "./constants";
 import { FontFamilyValues, FontString } from "./element/types";
-import { AppState, DataURL, Zoom } from "./types";
+import { AppState, CommentOwner, DataURL, Zoom } from "./types";
 import { unstable_batchedUpdates } from "react-dom";
 import { isDarwin } from "./keys";
 
@@ -640,3 +640,9 @@ export const isPromiseLike = (
     "finally" in value
   );
 };
+
+export const getOwnerInitals = (owner: CommentOwner): string => {
+  return (
+    owner.first_name.charAt(0) + (owner.last_name || "").charAt(0)
+  ).toUpperCase();
+};