From 9e6d5fdbcbfaa3a8a2818c0051df4214a57c8271 Mon Sep 17 00:00:00 2001 From: Aakansha Doshi Date: Mon, 2 May 2022 15:15:24 +0530 Subject: [PATCH] feat: support src collaborators (#5114) * feat: support avatarURLfor collaborators * fix * better avatars :) * use position fixed for tooltips so it renders correctly when offsets updated * update docs * Update src/excalidraw-app/collab/CollabWrapper.tsx * rename avatarUrl to src --- src/actions/actionNavigate.tsx | 9 ++--- src/components/Avatar.scss | 6 +++ src/components/Avatar.tsx | 28 +++++++++----- src/components/Tooltip.scss | 2 +- src/packages/excalidraw/CHANGELOG.md | 1 + src/packages/excalidraw/README_NEXT.md | 2 +- src/packages/excalidraw/example/App.js | 36 +++++++++++++++++- .../excalidraw/example/public/doremon.png | Bin 0 -> 201946 bytes .../excalidraw/example/public/pika.jpeg | Bin 0 -> 6250 bytes src/types.ts | 3 ++ 10 files changed, 69 insertions(+), 18 deletions(-) create mode 100644 src/packages/excalidraw/example/public/doremon.png create mode 100644 src/packages/excalidraw/example/public/pika.jpeg diff --git a/src/actions/actionNavigate.tsx b/src/actions/actionNavigate.tsx index 453fd527..6a13ef3a 100644 --- a/src/actions/actionNavigate.tsx +++ b/src/actions/actionNavigate.tsx @@ -1,4 +1,4 @@ -import { getClientColors, getClientInitials } from "../clients"; +import { getClientColors } from "../clients"; import { Avatar } from "../components/Avatar"; import { centerScrollOn } from "../scene/scroll"; import { Collaborator } from "../types"; @@ -43,16 +43,15 @@ export const actionGoToCollaborator = register({ } const { background, stroke } = getClientColors(clientId, appState); - const shortName = getClientInitials(collaborator.username); return ( updateData(collaborator.pointer)} - > - {shortName} - + name={collaborator.username || ""} + src={collaborator.src} + /> ); }, }); diff --git a/src/components/Avatar.scss b/src/components/Avatar.scss index d077d916..d3f8c8bd 100644 --- a/src/components/Avatar.scss +++ b/src/components/Avatar.scss @@ -12,5 +12,11 @@ cursor: pointer; font-size: 0.8rem; font-weight: 500; + + &-img { + width: 100%; + height: 100%; + border-radius: 100%; + } } } diff --git a/src/components/Avatar.tsx b/src/components/Avatar.tsx index 2b851370..9b2c8b71 100644 --- a/src/components/Avatar.tsx +++ b/src/components/Avatar.tsx @@ -1,20 +1,28 @@ import "./Avatar.scss"; import React from "react"; +import { getClientInitials } from "../clients"; type AvatarProps = { - children: string; onClick: (e: React.MouseEvent) => void; color: string; border: string; + name: string; + src?: string; }; -export const Avatar = ({ children, color, border, onClick }: AvatarProps) => ( -
- {children} -
-); +export const Avatar = ({ color, border, onClick, name, src }: AvatarProps) => { + const shortName = getClientInitials(name); + const style = src + ? undefined + : { background: color, border: `1px solid ${border}` }; + return ( +
+ {src ? ( + {shortName} + ) : ( + shortName + )} +
+ ); +}; diff --git a/src/components/Tooltip.scss b/src/components/Tooltip.scss index e40f81e6..bb2b2f72 100644 --- a/src/components/Tooltip.scss +++ b/src/components/Tooltip.scss @@ -2,7 +2,7 @@ // container in body where the actual tooltip is appended to .excalidraw-tooltip { - position: absolute; + position: fixed; z-index: 1000; padding: 8px; diff --git a/src/packages/excalidraw/CHANGELOG.md b/src/packages/excalidraw/CHANGELOG.md index 3c18aa28..3a52dbf7 100644 --- a/src/packages/excalidraw/CHANGELOG.md +++ b/src/packages/excalidraw/CHANGELOG.md @@ -17,6 +17,7 @@ Please add the latest change on the top under the correct section. #### Features +- Support [`src`](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L50) for collaborators. Now onwards host can pass `src` to render the customized avatar for collaborators [#5114](https://github.com/excalidraw/excalidraw/pull/5114). - Support `libraryItems` argument in `initialData.libraryItems` and `updateScene({ libraryItems })` to be a Promise resolving to `LibraryItems`, and support functional update of `libraryItems` in [`updateScene({ libraryItems })`](https://github.com/excalidraw/excalidraw/blob/master/src/packages/excalidraw/README.md#updateScene). [#5101](https://github.com/excalidraw/excalidraw/pull/5101). - Expose util [`mergeLibraryItems`](https://github.com/excalidraw/excalidraw/blob/master/src/packages/excalidraw/README.md#mergeLibraryItems) [#5101](https://github.com/excalidraw/excalidraw/pull/5101). - Expose util [`exportToClipboard`](https://github.com/excalidraw/excalidraw/blob/master/src/packages/excalidraw/README.md#exportToClipboard) which allows to copy the scene contents to clipboard as `svg`, `png` or `json` [#5103](https://github.com/excalidraw/excalidraw/pull/5103). diff --git a/src/packages/excalidraw/README_NEXT.md b/src/packages/excalidraw/README_NEXT.md index 13c2cf8a..f82ca5c8 100644 --- a/src/packages/excalidraw/README_NEXT.md +++ b/src/packages/excalidraw/README_NEXT.md @@ -512,7 +512,7 @@ You can use this function to update the scene with the sceneData. It accepts the | --- | --- | --- | | `elements` | [`ImportedDataState["elements"]`](https://github.com/excalidraw/excalidraw/blob/master/src/data/types.ts#L17) | The `elements` to be updated in the scene | | `appState` | [`ImportedDataState["appState"]`](https://github.com/excalidraw/excalidraw/blob/master/src/data/types.ts#L18) | The `appState` to be updated in the scene. | -| `collaborators` | 
MapCollaborator>
| The list of collaborators to be updated in the scene. | +| `collaborators` | 
MapCollaborator>
| The list of collaborators to be updated in the scene. | | `commitToHistory` | `boolean` | Implies if the `history (undo/redo)` should be recorded. Defaults to `false`. | | `libraryItems` | [LibraryItems](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L200) | Promise<[LibraryItems](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L200)> | ((currentItems: [LibraryItems](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L200)>) => [LibraryItems](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L200) | Promise<[LibraryItems](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L200)>) | The `libraryItems` to be update in the scene. | diff --git a/src/packages/excalidraw/example/App.js b/src/packages/excalidraw/example/App.js index 49af956c..34780948 100644 --- a/src/packages/excalidraw/example/App.js +++ b/src/packages/excalidraw/example/App.js @@ -31,7 +31,10 @@ const resolvablePromise = () => { const renderTopRightUI = () => { return ( - @@ -58,6 +61,7 @@ export default function App() { const [exportWithDarkMode, setExportWithDarkMode] = useState(false); const [exportEmbedScene, setExportEmbedScene] = useState(false); const [theme, setTheme] = useState("light"); + const [isCollaborating, setIsCollaborating] = useState(false); const initialStatePromiseRef = useRef({ promise: null }); if (!initialStatePromiseRef.current.promise) { @@ -228,6 +232,36 @@ export default function App() { /> Switch to Dark Theme +