From 6a1ea9866c55fc098cb86dfcf69c7a3656742355 Mon Sep 17 00:00:00 2001
From: Paul Berg <paul.berg@univ-ubs.fr>
Date: Fri, 24 Nov 2023 18:29:19 +0100
Subject: [PATCH] cursors 4

---
 frontend/components/CellInput.js        |  2 --
 frontend/components/MultiplayerPanel.js | 24 ++++++++++--------------
 frontend/editor.css                     |  7 +++++++
 3 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/frontend/components/CellInput.js b/frontend/components/CellInput.js
index f2cef6ec18..d5b373d072 100644
--- a/frontend/components/CellInput.js
+++ b/frontend/components/CellInput.js
@@ -430,8 +430,6 @@ export const CellInput = ({
         throw to_throw
     }
 
-    console.log(users)
-
     const notebook_id_ref = useRef(notebook_id)
     notebook_id_ref.current = notebook_id
 
diff --git a/frontend/components/MultiplayerPanel.js b/frontend/components/MultiplayerPanel.js
index 4c3447c618..1baab786d8 100644
--- a/frontend/components/MultiplayerPanel.js
+++ b/frontend/components/MultiplayerPanel.js
@@ -5,7 +5,7 @@ import { PlutoActionsContext } from "../common/PlutoContext.js"
 
 // TODO: investigate why effect is bad with low throttle rate?
 // ....  update notebook should be pretty fast.
-const CURSOR_THROTTLE_RATE = 100
+const CURSOR_THROTTLE_RATE = 75
 const DEFAULT_CURSOR_COLOR = "#eeeeee"
 
 const mouse_data_to_point = ({relative_to_cell, relative_x, relative_y}) => {
@@ -86,13 +86,13 @@ const Cursor = ({ mouse: point, color }) => {
     <div
       ref=${r}
       style=${{
-        position: "fixed",
+        position: "absolute",
         top: -10,
         left: -10,
         width: 20,
         height: 20,
         borderRadius: 10,
-        border: "solid 4px " + hexToRGBA(color , 0.5),
+        border: "solid 4px " + hexToRGBA(color, 0.5),
         backgroundColor: color,
         "-webkit-background-clip": "padding-box", /* for Safari */
         backgroundClip: "padding-box", /* for IE9+, Firefox 4+, Opera, Chrome */
@@ -109,7 +109,7 @@ const usePassiveDocumentEventListener = (event_name, handler_fn, deps) => {
 }
 
 export const MultiplayerPanel = ({ users, client_id }) => {
-    if (!users || Object.keys(users).length == 1) return
+    if (!users || Object.keys(users).every(user_id => user_id == client_id)) return
     const { update_notebook } = useContext(PlutoActionsContext)
 
     usePassiveDocumentEventListener("mousemove", _.throttle((event) => {
@@ -128,15 +128,11 @@ export const MultiplayerPanel = ({ users, client_id }) => {
     usePassiveDocumentEventListener("blur", hide_mouse_for_client, [hide_mouse_for_client])
 
     return html`
-        <div className="pluto-multiplayer">
-            <ul>
-                ${Object.entries(users).map(
-                    ([clientID, { name, mouse, color, focused_cell }]) =>
-                        html`<li key=${clientID} style=${`color: ${color};`}>${name} - ${focused_cell}
-                            ${client_id == clientID || !mouse ? null : html`<${Cursor} mouse=${mouse_data_to_point(mouse)} color=${color} />`}
-                    </li>`
-                )}
-            </ul>
-        </div>
+        <pluto-cursor-list>
+        ${Object.entries(users).map(
+            ([clientID, { name, mouse, color, focused_cell }]) =>
+                    client_id == clientID || !mouse ? null : html`<${Cursor} key=${clientID} mouse=${mouse_data_to_point(mouse)} color=${color} />`
+        )}
+        </pluto-cursor-list>
     `
 }
diff --git a/frontend/editor.css b/frontend/editor.css
index 622ac76fb3..05786e77f8 100644
--- a/frontend/editor.css
+++ b/frontend/editor.css
@@ -3600,6 +3600,13 @@ pluto-cell.hooked_up pluto-output {
     z-index: 1000;
 }
 
+pluto-cursor-list {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 1000;
+}
+
 .pluto-multiplayer ul {
     margin: 0;
     padding: 5px;