From b82b0754acdd40e2c539483fdc8e0ebe5a900381 Mon Sep 17 00:00:00 2001
From: David Luzar <luzar.david@gmail.com>
Date: Wed, 11 Mar 2020 19:42:18 +0100
Subject: [PATCH] Room dialog (#905)

* support ToolIcon className and fix label padding

* factor some ExportDialog classes out to Modal

* initial RoomDialog prototype

* change label for another-session button

* remove unused css

* add color comments

* Move the collaboration button to the main menu, add support for mobile

* remove button for creating another session

* add locks

* Fix alignment issue

* Reorder button

* reuse current scene for collab session

* keep collaboration state on restore

Co-authored-by: Jed Fox <git@twopointzero.us>
---
 src/appState.ts                 |   3 +-
 src/components/App.tsx          |  38 +++++++-
 src/components/ExportDialog.css |  25 -----
 src/components/ExportDialog.tsx |   4 +-
 src/components/LayerUI.tsx      |  16 +++-
 src/components/MobileMenu.tsx   |  10 ++
 src/components/Modal.css        |  22 +++++
 src/components/RoomDialog.scss  |  43 +++++++++
 src/components/RoomDialog.tsx   | 165 ++++++++++++++++++++++++++++++++
 src/components/ToolButton.tsx   |   3 +-
 src/components/ToolIcon.scss    |   5 +
 src/components/icons.tsx        |  23 +++++
 src/data/index.ts               |   2 +-
 src/locales/en.json             |  18 +++-
 src/styles.scss                 |   4 -
 15 files changed, 341 insertions(+), 40 deletions(-)
 create mode 100644 src/components/RoomDialog.scss
 create mode 100644 src/components/RoomDialog.tsx

diff --git a/src/appState.ts b/src/appState.ts
index c159778f..c54b7acd 100644
--- a/src/appState.ts
+++ b/src/appState.ts
@@ -1,6 +1,5 @@
 import { AppState, FlooredNumber } from "./types";
 import { getDateTime } from "./utils";
-import { getCollaborationLinkData } from "./data";
 
 const DEFAULT_PROJECT_NAME = `excalidraw-${getDateTime()}`;
 export const DEFAULT_FONT = "20px Virgil";
@@ -28,7 +27,7 @@ export function getDefaultAppState(): AppState {
     cursorY: 0,
     scrolledOutside: false,
     name: DEFAULT_PROJECT_NAME,
-    isCollaborating: !!getCollaborationLinkData(window.location.href),
+    isCollaborating: false,
     isResizing: false,
     selectionElement: null,
     zoom: 1,
diff --git a/src/components/App.tsx b/src/components/App.tsx
index c092796e..cb8a41dc 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -190,7 +190,12 @@ export class App extends React.Component<any, AppState> {
       if (commitToHistory) {
         history.resumeRecording();
       }
-      this.setState({ ...res.appState });
+      this.setState(state => ({
+        ...res.appState,
+        isCollaborating: state.isCollaborating,
+        remotePointers: state.remotePointers,
+        collaboratorCount: state.collaboratorCount,
+      }));
     }
   };
 
@@ -226,12 +231,27 @@ export class App extends React.Component<any, AppState> {
     event.preventDefault();
   };
 
+  private destroySocketClient = () => {
+    this.setState({
+      isCollaborating: false,
+    });
+    if (this.socket) {
+      this.socket.close();
+      this.socket = null;
+      this.roomID = null;
+      this.roomKey = null;
+    }
+  };
+
   private initializeSocketClient = () => {
     if (this.socket) {
       return;
     }
     const roomMatch = getCollaborationLinkData(window.location.href);
     if (roomMatch) {
+      this.setState({
+        isCollaborating: true,
+      });
       this.socket = socketIOClient(SOCKET_SERVER);
       this.roomID = roomMatch[1];
       this.roomKey = roomMatch[2];
@@ -611,6 +631,20 @@ export class App extends React.Component<any, AppState> {
     gesture.pointers.delete(event.pointerId);
   };
 
+  createRoom = async () => {
+    window.history.pushState(
+      {},
+      "Excalidraw",
+      await generateCollaborationLink(),
+    );
+    this.initializeSocketClient();
+  };
+
+  destroyRoom = () => {
+    window.history.pushState({}, "Excalidraw", window.location.origin);
+    this.destroySocketClient();
+  };
+
   public render() {
     const canvasDOMWidth = window.innerWidth;
     const canvasDOMHeight = window.innerHeight;
@@ -630,6 +664,8 @@ export class App extends React.Component<any, AppState> {
           elements={elements}
           setElements={this.setElements}
           language={getLanguage()}
+          onRoomCreate={this.createRoom}
+          onRoomDestroy={this.destroyRoom}
         />
         <main>
           <canvas
diff --git a/src/components/ExportDialog.css b/src/components/ExportDialog.css
index db1ee57a..59a31359 100644
--- a/src/components/ExportDialog.css
+++ b/src/components/ExportDialog.css
@@ -1,28 +1,3 @@
-.ExportDialog__dialog {
-  /* transition: opacity 0.15s ease-in, transform 0.15s ease-in; */
-  opacity: 0;
-  transform: translateY(10px);
-  animation: ExportDialog__fade-in 0.1s ease-out 0.05s forwards;
-  position: relative;
-}
-
-@keyframes ExportDialog__fade-in {
-  from {
-    opacity: 0;
-    transform: translateY(10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.ExportDialog__close {
-  position: absolute;
-  right: calc(var(--space-factor) * 5);
-  top: calc(var(--space-factor) * 5);
-}
-
 .ExportDialog__preview {
   --preview-padding: calc(var(--space-factor) * 4);
 
diff --git a/src/components/ExportDialog.tsx b/src/components/ExportDialog.tsx
index 5d2ce555..79c93567 100644
--- a/src/components/ExportDialog.tsx
+++ b/src/components/ExportDialog.tsx
@@ -112,10 +112,10 @@ function ExportModal({
   }
 
   return (
-    <div className="ExportDialog__dialog" onKeyDown={handleKeyDown}>
+    <div onKeyDown={handleKeyDown}>
       <Island padding={4}>
         <button
-          className="ExportDialog__close"
+          className="Modal__close"
           onClick={onCloseRequest}
           aria-label={t("buttons.close")}
           ref={closeButton}
diff --git a/src/components/LayerUI.tsx b/src/components/LayerUI.tsx
index 4164528d..58bfdcc1 100644
--- a/src/components/LayerUI.tsx
+++ b/src/components/LayerUI.tsx
@@ -21,6 +21,7 @@ import { ExportType } from "../scene/types";
 import { MobileMenu } from "./MobileMenu";
 import { ZoomActions, SelectedShapeActions, ShapesSwitcher } from "./Actions";
 import { Section } from "./Section";
+import { RoomDialog } from "./RoomDialog";
 
 interface LayerUIProps {
   actionManager: ActionManager;
@@ -30,6 +31,8 @@ interface LayerUIProps {
   elements: readonly ExcalidrawElement[];
   language: string;
   setElements: (elements: readonly ExcalidrawElement[]) => void;
+  onRoomCreate: () => void;
+  onRoomDestroy: () => void;
 }
 
 export const LayerUI = React.memo(
@@ -41,6 +44,8 @@ export const LayerUI = React.memo(
     elements,
     language,
     setElements,
+    onRoomCreate,
+    onRoomDestroy,
   }: LayerUIProps) => {
     const isMobile = useIsMobile();
 
@@ -92,21 +97,28 @@ export const LayerUI = React.memo(
         actionManager={actionManager}
         exportButton={renderExportDialog()}
         setAppState={setAppState}
+        onRoomCreate={onRoomCreate}
+        onRoomDestroy={onRoomDestroy}
       />
     ) : (
       <>
         <FixedSideContainer side="top">
           <HintViewer appState={appState} elements={elements} />
           <div className="App-menu App-menu_top">
-            <Stack.Col gap={4} align="end">
+            <Stack.Col gap={4}>
               <Section className="App-right-menu" heading="canvasActions">
                 <Island padding={4}>
                   <Stack.Col gap={4}>
-                    <Stack.Row justifyContent={"space-between"}>
+                    <Stack.Row gap={2.25} justifyContent={"space-between"}>
                       {actionManager.renderAction("loadScene")}
                       {actionManager.renderAction("saveScene")}
                       {renderExportDialog()}
                       {actionManager.renderAction("clearCanvas")}
+                      <RoomDialog
+                        isCollaborating={appState.isCollaborating}
+                        onRoomCreate={onRoomCreate}
+                        onRoomDestroy={onRoomDestroy}
+                      />
                     </Stack.Row>
                     {actionManager.renderAction("changeViewBackgroundColor")}
                   </Stack.Col>
diff --git a/src/components/MobileMenu.tsx b/src/components/MobileMenu.tsx
index e2dc138e..8dcf4b6f 100644
--- a/src/components/MobileMenu.tsx
+++ b/src/components/MobileMenu.tsx
@@ -12,6 +12,7 @@ import { HintViewer } from "./HintViewer";
 import { calculateScrollCenter, getTargetElement } from "../scene";
 import { SelectedShapeActions, ShapesSwitcher } from "./Actions";
 import { Section } from "./Section";
+import { RoomDialog } from "./RoomDialog";
 
 type MobileMenuProps = {
   appState: AppState;
@@ -20,6 +21,8 @@ type MobileMenuProps = {
   setAppState: any;
   elements: readonly ExcalidrawElement[];
   setElements: any;
+  onRoomCreate: () => void;
+  onRoomDestroy: () => void;
 };
 
 export function MobileMenu({
@@ -29,6 +32,8 @@ export function MobileMenu({
   actionManager,
   exportButton,
   setAppState,
+  onRoomCreate,
+  onRoomDestroy,
 }: MobileMenuProps) {
   return (
     <>
@@ -40,6 +45,11 @@ export function MobileMenu({
               {actionManager.renderAction("saveScene")}
               {exportButton}
               {actionManager.renderAction("clearCanvas")}
+              <RoomDialog
+                isCollaborating={appState.isCollaborating}
+                onRoomCreate={onRoomCreate}
+                onRoomDestroy={onRoomDestroy}
+              />
               {actionManager.renderAction("changeViewBackgroundColor")}
               <fieldset>
                 <legend>{t("labels.language")}</legend>
diff --git a/src/components/Modal.css b/src/components/Modal.css
index 77343ce6..2c8c53c3 100644
--- a/src/components/Modal.css
+++ b/src/components/Modal.css
@@ -27,4 +27,26 @@
   z-index: 2;
   width: 100%;
   max-width: 100%;
+
+  opacity: 0;
+  transform: translateY(10px);
+  animation: Modal__content_fade-in 0.1s ease-out 0.05s forwards;
+  position: relative;
+}
+
+@keyframes Modal__content_fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.Modal__close {
+  position: absolute;
+  right: calc(var(--space-factor) * 5);
+  top: calc(var(--space-factor) * 5);
 }
diff --git a/src/components/RoomDialog.scss b/src/components/RoomDialog.scss
new file mode 100644
index 00000000..04a59c92
--- /dev/null
+++ b/src/components/RoomDialog.scss
@@ -0,0 +1,43 @@
+.RoomDialog-modalButton.is-collaborating {
+  background-color: #ebfbee; // OC GREEN-0
+  color: #2b8a3e; // OC GREEN-9
+}
+
+.RoomDialog-linkContainer {
+  display: flex;
+  margin: 1.5em 0;
+}
+
+.RoomDialog-link {
+  min-width: 0;
+  flex: 1 1 auto;
+  margin-left: 1.5em;
+  display: inline-block;
+  cursor: pointer;
+  border: none;
+  height: 2.5rem;
+  line-height: 2.5rem;
+  padding: 0 0.5rem;
+  white-space: nowrap;
+  border-radius: var(--space-factor);
+  background-color: #eee;
+}
+
+.RoomDialog-link:hover {
+  background-color: #eee;
+}
+
+.RoomDialog-link:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px steelblue;
+}
+
+.RoomDialog-sessionStartButtonContainer {
+  display: flex;
+  justify-content: center;
+}
+
+.RoomDialog-stopSession {
+  background-color: #ffe3e3; // OC RED-1
+  color: #c92a2a; // OC RED-9
+}
diff --git a/src/components/RoomDialog.tsx b/src/components/RoomDialog.tsx
new file mode 100644
index 00000000..c4392d1a
--- /dev/null
+++ b/src/components/RoomDialog.tsx
@@ -0,0 +1,165 @@
+import React, { useState, useEffect, useRef } from "react";
+import { ToolButton } from "./ToolButton";
+import { Island } from "./Island";
+import { t } from "../i18n";
+import useIsMobile from "../is-mobile";
+import { users, clipboard, start, stop } from "./icons";
+import { Modal } from "./Modal";
+
+import "./RoomDialog.scss";
+import { copyTextToSystemClipboard } from "../clipboard";
+
+function RoomModal({
+  onCloseRequest,
+  activeRoomLink,
+  onRoomCreate,
+  onRoomDestroy,
+}: {
+  onCloseRequest: () => void;
+  activeRoomLink: string;
+  onRoomCreate: () => void;
+  onRoomDestroy: () => void;
+}) {
+  const roomLinkInput = useRef<HTMLInputElement>(null);
+  function copyRoomLink() {
+    copyTextToSystemClipboard(activeRoomLink);
+    if (roomLinkInput.current) {
+      roomLinkInput.current.select();
+    }
+  }
+  function selectInput(event: React.MouseEvent<HTMLInputElement>) {
+    if (event.target !== document.activeElement) {
+      event.preventDefault();
+      (event.target as HTMLInputElement).select();
+    }
+  }
+
+  return (
+    <div className="RoomDialog-modal">
+      <Island padding={4}>
+        <button
+          className="Modal__close"
+          onClick={onCloseRequest}
+          aria-label={t("buttons.close")}
+        >
+          ╳
+        </button>
+        <h2 id="export-title">{t("labels.createRoom")}</h2>
+        {!activeRoomLink && (
+          <>
+            <p>{t("roomDialog.desc_intro")}</p>
+            <p>{`🔒 ${t("roomDialog.desc_privacy")}`}</p>
+            <p>{t("roomDialog.desc_start")}</p>
+            <div className="RoomDialog-sessionStartButtonContainer">
+              <ToolButton
+                className="RoomDialog-startSession"
+                type="button"
+                icon={start}
+                title={t("roomDialog.button_startSession")}
+                aria-label={t("roomDialog.button_startSession")}
+                showAriaLabel={true}
+                onClick={onRoomCreate}
+              />
+            </div>
+          </>
+        )}
+        {activeRoomLink && (
+          <>
+            <p>{t("roomDialog.desc_inProgressIntro")}</p>
+            <p>{t("roomDialog.desc_shareLink")}</p>
+            <div className="RoomDialog-linkContainer">
+              <ToolButton
+                type="button"
+                icon={clipboard}
+                title={t("labels.copy")}
+                aria-label={t("labels.copy")}
+                onClick={copyRoomLink}
+              />
+              <input
+                value={activeRoomLink}
+                readOnly={true}
+                className="RoomDialog-link"
+                ref={roomLinkInput}
+                onPointerDown={selectInput}
+              />
+            </div>
+            <p>{`🔒 ${t("roomDialog.desc_privacy")}`}</p>
+            <p>
+              <span role="img" aria-hidden="true">
+                ⚠️
+              </span>{" "}
+              {t("roomDialog.desc_persistenceWarning")}
+            </p>
+            <p>{t("roomDialog.desc_exitSession")}</p>
+            <div className="RoomDialog-sessionStartButtonContainer">
+              <ToolButton
+                className="RoomDialog-stopSession"
+                type="button"
+                icon={stop}
+                title={t("roomDialog.button_stopSession")}
+                aria-label={t("roomDialog.button_stopSession")}
+                showAriaLabel={true}
+                onClick={onRoomDestroy}
+              />
+            </div>
+          </>
+        )}
+      </Island>
+    </div>
+  );
+}
+
+export function RoomDialog({
+  isCollaborating,
+  onRoomCreate,
+  onRoomDestroy,
+}: {
+  isCollaborating: boolean;
+  onRoomCreate: () => void;
+  onRoomDestroy: () => void;
+}) {
+  const [modalIsShown, setModalIsShown] = useState(false);
+  const [activeRoomLink, setActiveRoomLink] = useState("");
+
+  const triggerButton = useRef<HTMLButtonElement>(null);
+
+  const handleClose = React.useCallback(() => {
+    setModalIsShown(false);
+    triggerButton.current?.focus();
+  }, []);
+
+  useEffect(() => {
+    setActiveRoomLink(isCollaborating ? window.location.href : "");
+  }, [isCollaborating]);
+
+  return (
+    <>
+      <ToolButton
+        className={`RoomDialog-modalButton ${
+          isCollaborating ? "is-collaborating" : ""
+        }`}
+        onClick={() => setModalIsShown(true)}
+        icon={users}
+        type="button"
+        title={t("buttons.roomDialog")}
+        aria-label={t("buttons.roomDialog")}
+        showAriaLabel={useIsMobile()}
+        ref={triggerButton}
+      />
+      {modalIsShown && (
+        <Modal
+          maxWidth={800}
+          labelledBy="room-title"
+          onCloseRequest={handleClose}
+        >
+          <RoomModal
+            onCloseRequest={handleClose}
+            activeRoomLink={activeRoomLink}
+            onRoomCreate={onRoomCreate}
+            onRoomDestroy={onRoomDestroy}
+          />
+        </Modal>
+      )}
+    </>
+  );
+}
diff --git a/src/components/ToolButton.tsx b/src/components/ToolButton.tsx
index e4118495..ea4ea1c6 100644
--- a/src/components/ToolButton.tsx
+++ b/src/components/ToolButton.tsx
@@ -17,6 +17,7 @@ type ToolButtonBaseProps = {
   showAriaLabel?: boolean;
   visible?: boolean;
   selected?: boolean;
+  className?: string;
 };
 
 type ToolButtonProps =
@@ -43,7 +44,7 @@ export const ToolButton = React.forwardRef(function(
       <button
         className={`ToolIcon_type_button ToolIcon ${sizeCn}${
           props.selected ? " ToolIcon--selected" : ""
-        }`}
+        } ${props.className || ""}`}
         title={props.title}
         aria-label={props["aria-label"]}
         type="button"
diff --git a/src/components/ToolIcon.scss b/src/components/ToolIcon.scss
index f8b363df..a53af01a 100644
--- a/src/components/ToolIcon.scss
+++ b/src/components/ToolIcon.scss
@@ -29,10 +29,15 @@
     position: relative;
     height: 1em;
   }
+
+  & + .ToolIcon__label {
+    margin-left: 0;
+  }
 }
 
 .ToolIcon__label {
   font-family: var(--ui-font);
+  margin: 0 0.8em;
 }
 
 .ToolIcon_size_s .ToolIcon__icon {
diff --git a/src/components/icons.tsx b/src/components/icons.tsx
index 376b1720..2b38b71c 100644
--- a/src/components/icons.tsx
+++ b/src/components/icons.tsx
@@ -181,3 +181,26 @@ export const sendToBack = createIcon(
   </>,
   24,
 );
+
+export const users = createIcon(
+  <path
+    fill="currentColor"
+    d="M192 256c61.9 0 112-50.1 112-112S253.9 32 192 32 80 82.1 80 144s50.1 112 112 112zm76.8 32h-8.3c-20.8 10-43.9 16-68.5 16s-47.6-6-68.5-16h-8.3C51.6 288 0 339.6 0 403.2V432c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48v-28.8c0-63.6-51.6-115.2-115.2-115.2zM480 256c53 0 96-43 96-96s-43-96-96-96-96 43-96 96 43 96 96 96zm48 32h-3.8c-13.9 4.8-28.6 8-44.2 8s-30.3-3.2-44.2-8H432c-20.4 0-39.2 5.9-55.7 15.4 24.4 26.3 39.7 61.2 39.7 99.8v38.4c0 2.2-.5 4.3-.6 6.4H592c26.5 0 48-21.5 48-48 0-61.9-50.1-112-112-112z"
+  ></path>,
+  640,
+  512,
+);
+
+export const start = createIcon(
+  <path
+    fill="currentColor"
+    d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm115.7 272l-176 101c-15.8 8.8-35.7-2.5-35.7-21V152c0-18.4 19.8-29.8 35.7-21l176 107c16.4 9.2 16.4 32.9 0 42z"
+  ></path>,
+);
+
+export const stop = createIcon(
+  <path
+    fill="currentColor"
+    d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm96 328c0 8.8-7.2 16-16 16H176c-8.8 0-16-7.2-16-16V176c0-8.8 7.2-16 16-16h160c8.8 0 16 7.2 16 16v160z"
+  ></path>,
+);
diff --git a/src/data/index.ts b/src/data/index.ts
index d43ee376..aea93bd0 100644
--- a/src/data/index.ts
+++ b/src/data/index.ts
@@ -92,7 +92,7 @@ export function getCollaborationLinkData(link: string) {
 export async function generateCollaborationLink() {
   const id = await generateRandomID();
   const key = await generateEncryptionKey();
-  return `${window.location.href}#room=${id},${key}`;
+  return `${window.location.origin}#room=${id},${key}`;
 }
 
 async function getImportedKey(key: string, usage: string): Promise<CryptoKey> {
diff --git a/src/locales/en.json b/src/locales/en.json
index f4518cfb..6005df63 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -41,7 +41,8 @@
     "canvasBackground": "Canvas background",
     "drawingCanvas": "Drawing Canvas",
     "layers": "Layers",
-    "language": "Language"
+    "language": "Language",
+    "createRoom": "Share a live-collaboration session"
   },
   "buttons": {
     "clearReset": "Reset the canvas",
@@ -62,7 +63,9 @@
     "done": "Done",
     "edit": "Edit",
     "undo": "Undo",
-    "redo": "Redo"
+    "redo": "Redo",
+    "roomDialog": "Share a live-collaboration session",
+    "createNewRoom": "Create new room"
   },
   "alerts": {
     "clearReset": "This will clear the whole canvas. Are you sure?",
@@ -105,5 +108,16 @@
     "errorStack": "Error stack trace:",
     "errorStack_loading": "Loading data. please wait...",
     "sceneContent": "Scene content:"
+  },
+  "roomDialog": {
+    "desc_intro": "You can invite people to your current scene to collaborate with you.",
+    "desc_privacy": "Don't worry, the session uses end-to-end encryption, so whatever you draw will stay private. Not even our server will be able to see what you come up with.",
+    "desc_start": "To begin, click the button below. (Will use the current scene. If you don't want this, you can manually clear it, first)",
+    "button_startSession": "Start session",
+    "button_stopSession": "Stop session",
+    "desc_inProgressIntro": "Live-collaboration session is now in progress.",
+    "desc_persistenceWarning": "Note that the scene data is shared across collaborators in a P2P fashion, and not persisted to our server. Thus, if all of you disconnect, you will loose the data unless you export it to a file or a shareable link.",
+    "desc_shareLink": "Share this link with anyone you want to collaborate with:",
+    "desc_exitSession": "Stopping the session will disconnect your from the room, but you'll be able to continue working with the scene, locally. Note that this won't affect other people, and they'll still be able to collaborate on their version."
   }
 }
diff --git a/src/styles.scss b/src/styles.scss
index 93eb0fce..a3090bfa 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -239,10 +239,6 @@ button,
   height: 100%;
 }
 
-.App-right-menu {
-  width: 13.75rem;
-}
-
 .ErrorSplash {
   min-height: 100vh;
   padding: 20px 0;