Add mouse and scroll positions

fonsp · Feb 2, 2022 · f3fce3e · f3fce3e
1 parent 197992f
commit f3fce3e
Show file tree

Hide file tree

Showing 7 changed files with 438 additions and 26 deletions.
diff --git a/frontend/common/PlutoConnection.js b/frontend/common/PlutoConnection.js
@@ -62,7 +62,7 @@ export const resolvable_promise = () => {
 /**
  * @returns {string}
  */
-const get_unique_short_id = () => crypto.getRandomValues(new Uint32Array(1))[0].toString(36)
+export const get_unique_short_id = () => crypto.getRandomValues(new Uint32Array(1))[0].toString(36)
 
 const socket_is_alright = (socket) => socket.readyState == WebSocket.OPEN || socket.readyState == WebSocket.CONNECTING
 
@@ -264,7 +264,8 @@ const default_ws_address = () => ws_address_from_base(window.location.href)
  *  on_reconnect: () => boolean,
  *  on_connection_status: (connection_status: boolean) => void,
  *  connect_metadata?: Object,
- *  ws_address?: String,
+ *  ws_address?: string,
+ *  client_id: string
  * }} options
  * @return {Promise<PlutoConnection>}
  */
@@ -274,6 +275,7 @@ export const create_pluto_connection = async ({
     on_connection_status,
     connect_metadata = {},
     ws_address = default_ws_address(),
+    client_id,
 }) => {
     var ws_connection = null // will be defined later i promise
     const client = {
@@ -287,7 +289,6 @@ export const create_pluto_connection = async ({
         kill: null,
     } // same
 
-    const client_id = get_unique_short_id()
     const sent_requests = new Map()
 
     /**

diff --git a/frontend/components/Editor.js b/frontend/components/Editor.js
@@ -1,8 +1,8 @@
-import { html, Component, useState, useEffect, useMemo } from "../imports/Preact.js"
+import { html, Component, useState, useEffect, useMemo, useRef } from "../imports/Preact.js"
 import immer, { applyPatches, produceWithPatches } from "../imports/immer.js"
 import _ from "../imports/lodash.js"
 
-import { create_pluto_connection } from "../common/PlutoConnection.js"
+import { create_pluto_connection, get_unique_short_id } from "../common/PlutoConnection.js"
 import { init_feedback } from "../common/Feedback.js"
 import { serialize_cells, deserialize_cells, detect_deserializer } from "../common/Serialization.js"
 
@@ -32,6 +32,7 @@ import { ProgressBar } from "./ProgressBar.js"
 import { IsolatedCell } from "./Cell.js"
 import { RawHTMLContainer } from "./CellOutput.js"
 import { RecordingPlaybackUI, RecordingUI } from "./RecordingUI.js"
+import { MultiplayerStalker } from "./MultiplayerStalker.js"
 
 const default_path = "..."
 const DEBUG_DIFFING = false
@@ -161,6 +162,16 @@ const first_true_key = (obj) => {
  * }}
  */
 
+/**
+ * @typedef UserData
+ * @type {{
+ *  color: string,
+ *  mouse: { relative_to_cell: string, offsetY: number, screenX: number, mousedown: boolean, at_scroll: number },
+ *  scroll: { relative_to_cell: string, offsetY: number, height: number },
+ *  last_update: number,
+ * }}
+ */
+
 /**
  * @typedef NotebookData
  * @type {{
@@ -179,6 +190,7 @@ const first_true_key = (obj) => {
  *  published_objects: { [objectid: string]: any},
  *  bonds: { [name: string]: any },
  *  nbpkg: NotebookPkgData?,
+ *  users: { [author_id: string]: UserData },
  * }}
  */
 
@@ -230,6 +242,7 @@ const initial_notebook = (initialLocalCells = {}) => ({
     published_objects: {},
     bonds: {},
     nbpkg: null,
+    users: null,
 })
 
 export class Editor extends Component {
@@ -697,6 +710,7 @@ patch: ${JSON.stringify(
                 : `${this.state.binder_session_url}${u}?id=${this.state.notebook.notebook_id}&token=${this.state.binder_session_token}`
 
         this.client = {}
+        this.client_id = get_unique_short_id()
 
         this.connect = (ws_address = undefined) =>
             create_pluto_connection({
@@ -705,6 +719,7 @@ patch: ${JSON.stringify(
                 on_connection_status: on_connection_status,
                 on_reconnect: on_reconnect,
                 connect_metadata: { notebook_id: this.state.notebook.notebook_id },
+                client_id: this.client_id,
             }).then(on_establish_connection)
 
         this.real_actions = this.actions
@@ -730,9 +745,12 @@ patch: ${JSON.stringify(
         }
         this.on_disable_ui()
 
+        // I love this so much I'll put it everywhere I go - dral
+        let async = async (async) => async()
+
         this.original_state = null
         if (this.state.static_preview) {
-            ;(async () => {
+            async(async () => {
                 const r = await fetch(launch_params.statefile)
                 const data = await read_Uint8Array_with_progress(r, (progress) => {
                     this.setState({
@@ -746,7 +764,7 @@ patch: ${JSON.stringify(
                     initializing: false,
                     binder_phase: this.state.offer_binder ? BinderPhase.wait_for_user : null,
                 })
-            })()
+            })
             // view stats on https://stats.plutojl.org/
             count_stat(`article-view`)
         } else {
@@ -784,6 +802,11 @@ patch: ${JSON.stringify(
         let last_update_notebook_task = Promise.resolve()
         /** @param {(notebook: NotebookData) => void} mutate_fn */
         let update_notebook = (mutate_fn) => {
+            if (this.client.send == null) {
+                console.warn("Notebook not yet connected; batch this and send on connect?")
+                return
+            }
+
             const new_task = last_update_notebook_task.then(async () => {
                 // if (this.state.initializing) {
                 //     console.error("Update notebook done during initializing, strange")
@@ -1154,6 +1177,12 @@ patch: ${JSON.stringify(
             <${PlutoContext.Provider} value=${pluto_actions_with_my_author_name}>
                 <${PlutoBondsContext.Provider} value=${this.state.notebook.bonds}>
                     <${PlutoJSInitializingContext.Provider} value=${this.js_init_set}>
+                    <${MultiplayerStalker}
+                        force=${this.state.is_recording || launch_params.recording_url}
+                        users=${this.state.notebook.users}
+                        update_notebook=${this.update_notebook}
+                        client_id=${this.client_id}
+                    />
                     <${Scroller} active=${this.state.scroller} />
                     <${ProgressBar} notebook=${this.state.notebook} binder_phase=${this.state.binder_phase} status=${status}/>
                     <header className=${export_menu_open ? "show_export" : ""}>