Show collaborators' cursors on map (#264)

* Implement collaborative pointers

* Clean up

* Rename

* Remove console log

* Use lonLat for cursor popup

Author: gjmooney

packages/base/src/annotations/components/AnnotationFloater.tsx

@@ -42,14 +42,14 @@ const AnnotationFloater = ({
       >
         <Annotation itemId={itemId} annotationModel={model}>
           <div
-            className="jGIS-Annotation-Topbar"
+            className="jGIS-Popup-Topbar"
             onClick={() => {
               setOpenOrDelete(false);
             }}
           >
             <FontAwesomeIcon
               icon={faWindowMinimize}
-              className="jGIS-Annotation-TopBarIcon"
+              className="jGIS-Popup-TopBarIcon"
             />
           </div>
         </Annotation>

packages/base/src/mainview/CollaboratorPointers.tsx

@@ -0,0 +1,87 @@
+import {
+  faArrowPointer,
+  faWindowMinimize
+} from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { IDict, JgisCoordinates } from '@jupytergis/schema';
+import React, { useState } from 'react';
+
+interface ICollaboratorPointersProps {
+  clients: IDict<ClientPointer>;
+}
+
+export type ClientPointer = {
+  username: string;
+  displayName: string;
+  color: string;
+  coordinates: JgisCoordinates;
+  lonLat: { latitude: number; longitude: number };
+};
+
+const CollaboratorPointers = ({ clients }: ICollaboratorPointersProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <>
+      {clients &&
+        Object.values(clients).map(client => (
+          <div
+            className="jGIS-Popup-Wrapper"
+            style={{
+              left: `${client.coordinates.x}px`,
+              top: `${client.coordinates.y}px`
+            }}
+          >
+            <div
+              key={client.username}
+              className="jGIS-Remote-Pointer"
+              style={{
+                color: client.color,
+                cursor: 'pointer'
+              }}
+              onClick={() => {
+                setIsOpen(!isOpen);
+              }}
+            >
+              <FontAwesomeIcon
+                icon={faArrowPointer}
+                className="jGIS-Remote-Pointer-Icon"
+              />
+            </div>
+            <div
+              style={{
+                visibility: isOpen ? 'visible' : 'hidden',
+                background: client.color
+              }}
+              className="jGIS-Remote-Pointer-Popup jGIS-Floating-Pointer-Popup"
+            >
+              <div
+                className="jGIS-Popup-Topbar"
+                onClick={() => {
+                  setIsOpen(false);
+                }}
+              >
+                <FontAwesomeIcon
+                  icon={faWindowMinimize}
+                  className="jGIS-Popup-TopBarIcon"
+                />
+              </div>
+              <div className="jGIS-Remote-Pointer-Popup-Name">
+                {client.displayName}
+              </div>
+              <div className="jGIS-Remote-Pointer-Popup-Coordinates">
+                <br />
+                Pointer Location:
+                <br />
+                Longitude: {client.lonLat.longitude.toFixed(2)}
+                <br />
+                Latitude: {client.lonLat.latitude.toFixed(2)}
+              </div>
+            </div>
+          </div>
+        ))}
+    </>
+  );
+};
+
+export default CollaboratorPointers;

packages/base/src/mainview/mainView.tsx

@@ -71,6 +71,7 @@ import { Coordinate } from 'ol/coordinate';
 import AnnotationFloater from '../annotations/components/AnnotationFloater';
 import { CommandIDs } from '../constants';
 import { FollowIndicator } from './FollowIndicator';
+import CollaboratorPointers, { ClientPointer } from './CollaboratorPointers';
 
 interface IProps {
   viewModel: MainViewModel;
@@ -84,6 +85,7 @@ interface IStates {
   remoteUser?: User.IIdentity | null;
   firstLoad: boolean;
   annotations: IDict<IAnnotation>;
+  clientPointers: IDict<ClientPointer>;
 }
 
 export class MainView extends React.Component<IProps, IStates> {
@@ -95,6 +97,7 @@ export class MainView extends React.Component<IProps, IStates> {
 
     this._mainViewModel = this.props.viewModel;
     this._mainViewModel.viewSettingChanged.connect(this._onViewChanged, this);
+
     this._model = this._mainViewModel.jGISModel;
     this._model.themeChanged.connect(this._handleThemeChange, this);
 
@@ -106,7 +109,6 @@ export class MainView extends React.Component<IProps, IStates> {
       this._onClientSharedStateChanged,
       this
     );
-
     this._model.sharedLayersChanged.connect(this._onLayersChanged, this);
     this._model.sharedLayerTreeChanged.connect(this._onLayerTreeChange, this);
     this._model.sharedSourcesChanged.connect(this._onSourcesChange, this);
@@ -122,7 +124,8 @@ export class MainView extends React.Component<IProps, IStates> {
       lightTheme: isLightTheme(),
       loading: true,
       firstLoad: true,
-      annotations: {}
+      annotations: {},
+      clientPointers: {}
     };
 
     this._sources = [];
@@ -273,6 +276,10 @@ export class MainView extends React.Component<IProps, IStates> {
         });
       });
 
+      this._Map
+        .getViewport()
+        .addEventListener('pointermove', this._onPointerMove.bind(this));
+
       if (JupyterGISModel.getOrderedLayerIds(this._model).length !== 0) {
         await this._updateLayersImpl(
           JupyterGISModel.getOrderedLayerIds(this._model)
@@ -282,15 +289,15 @@ export class MainView extends React.Component<IProps, IStates> {
         this._initializedPosition = true;
       }
 
-      this.setState(old => ({ ...old, loading: false }));
-
       this._Map.getViewport().addEventListener('contextmenu', event => {
         event.preventDefault();
         event.stopPropagation();
         const coordinate = this._Map.getEventCoordinate(event);
         this._clickCoords = coordinate;
         this._contextMenu.open(event);
       });
+
+      this.setState(old => ({ ...old, loading: false }));
     }
   }
 
@@ -969,6 +976,50 @@ export class MainView extends React.Component<IProps, IStates> {
         }
       }
     }
+
+    // cursors
+    clients.forEach((client, clientId) => {
+      if (!client?.user) {
+        return;
+      }
+
+      const pointer = client.pointer?.value;
+
+      // We already display our own cursor on mouse move
+      if (this._model.getClientId() === clientId) {
+        return;
+      }
+
+      const clientPointers = this.state.clientPointers;
+      let currentClientPointer = clientPointers[clientId];
+
+      if (pointer) {
+        const pixel = this._Map.getPixelFromCoordinate([
+          pointer.coordinates.x,
+          pointer.coordinates.y
+        ]);
+
+        const lonLat = toLonLat([pointer.coordinates.x, pointer.coordinates.y]);
+
+        if (!currentClientPointer) {
+          currentClientPointer = clientPointers[clientId] = {
+            username: client.user.username,
+            displayName: client.user.display_name,
+            color: client.user.color,
+            coordinates: { x: pixel[0], y: pixel[1] },
+            lonLat: { longitude: lonLat[0], latitude: lonLat[1] }
+          };
+        }
+
+        currentClientPointer.coordinates.x = pixel[0];
+        currentClientPointer.coordinates.y = pixel[1];
+        clientPointers[clientId] = currentClientPointer;
+      } else {
+        delete clientPointers[clientId];
+      }
+
+      this.setState(old => ({ ...old, clientPointers: clientPointers }));
+    });
   };
 
   private _onSharedOptionsChanged(
@@ -1213,6 +1264,20 @@ export class MainView extends React.Component<IProps, IStates> {
     }
   }
 
+  private _onPointerMove(e: MouseEvent) {
+    const pixel = this._Map.getEventPixel(e);
+    const coordinates = this._Map.getCoordinateFromPixel(pixel);
+
+    this._syncPointer(coordinates);
+  }
+
+  private _syncPointer = throttle((coordinates: Coordinate) => {
+    const pointer = {
+      coordinates: { x: coordinates[0], y: coordinates[1] }
+    };
+    this._model.syncPointer(pointer);
+  });
+
   private _handleThemeChange = (): void => {
     const lightTheme = isLightTheme();
 
@@ -1242,7 +1307,7 @@ export class MainView extends React.Component<IProps, IStates> {
                   left: screenPosition.x,
                   top: screenPosition.y
                 }}
-                className={'jGIS-Annotation-Wrapper'}
+                className={'jGIS-Popup-Wrapper'}
               >
                 <AnnotationFloater
                   itemId={key}
@@ -1253,6 +1318,7 @@ export class MainView extends React.Component<IProps, IStates> {
             )
           );
         })}
+
         <div
           className="jGIS-Mainview"
           style={{
@@ -1263,6 +1329,7 @@ export class MainView extends React.Component<IProps, IStates> {
         >
           <Spinner loading={this.state.loading} />
           <FollowIndicator remoteUser={this.state.remoteUser} />
+          <CollaboratorPointers clients={this.state.clientPointers} />
 
           <div
             ref={this.divRef}

packages/schema/src/interfaces.ts

@@ -35,6 +35,10 @@ export interface IViewPortState {
   coordinates: JgisCoordinates;
   zoom: number;
 }
+
+export type Pointer = {
+  coordinates: { x: number; y: number };
+};
 export interface IDict<T = any> {
   [key: string]: T;
 }
@@ -68,6 +72,7 @@ export interface ISelection {
 export interface IJupyterGISClientState {
   selected: { value?: { [key: string]: ISelection }; emitter?: string | null };
   viewportState: { value?: IViewPortState; emitter?: string | null };
+  pointer: { value?: Pointer; emitter?: string | null };
   user: User.IIdentity;
   remoteUser?: number;
   toolbarForm?: IDict;
@@ -193,6 +198,7 @@ export interface IJupyterGISModel extends DocumentRegistry.IModel {
 
   syncViewport(viewport?: IViewPortState, emitter?: string): void;
   syncSelected(value: { [key: string]: ISelection }, emitter?: string): void;
+  syncPointer(pointer?: Pointer, emitter?: string): void;
   setUserToFollow(userId?: number): void;
 
   getClientId(): number;

packages/schema/src/model.ts

@@ -20,6 +20,7 @@ import {
 import { JupyterGISDoc } from './doc';
 import {
   IViewPortState,
+  Pointer,
   IAnnotationModel,
   IJGISLayerDocChange,
   IJGISLayerTreeDocChange,
@@ -393,6 +394,13 @@ export class JupyterGISModel implements IJupyterGISModel {
     });
   }
 
+  syncPointer(pointer?: Pointer, emitter?: string): void {
+    this.sharedModel.awareness.setLocalStateField('pointer', {
+      value: pointer,
+      emitter: emitter
+    });
+  }
+
   syncSelected(value: { [key: string]: ISelection }, emitter?: string): void {
     this.sharedModel.awareness.setLocalStateField('selected', {
       value,

python/jupytergis_lab/style/base.css

@@ -218,7 +218,7 @@ div.jGIS-toolbar-widget > div.jp-Toolbar-item:last-child {
   box-sizing: border-box;
 }
 
-.jGIS-Annotation-Wrapper {
+.jGIS-Popup-Wrapper {
   position: absolute;
   opacity: 1;
   transition: opacity 0.1s linear 0.15s;
@@ -319,12 +319,12 @@ div.jGIS-toolbar-widget > div.jp-Toolbar-item:last-child {
   flex-grow: 1;
 }
 
-.jGIS-Annotation-Topbar {
+.jGIS-Popup-Topbar {
   display: flex;
   flex-direction: row-reverse;
 }
 
-.jGIS-Annotation-TopBarIcon {
+.jGIS-Popup-TopBarIcon {
   cursor: pointer;
   transform: rotate(180deg);
 }
@@ -362,6 +362,46 @@ div.jGIS-toolbar-widget > div.jp-Toolbar-item:last-child {
   max-width: 68px;
 }
 
+.jGIS-Remote-Pointer {
+  position: absolute;
+  transition-property: left, top, width, height;
+  transition-duration: 150ms;
+  transition-timing-function: ease;
+  z-index: 20;
+}
+
+.jGIS-Remote-Pointer-Icon:hover {
+  scale: 1.3;
+}
+
+.jGIS-Floating-Pointer-Popup {
+  position: absolute;
+  width: 160px;
+  box-shadow: var(--jp-elevation-z6);
+  z-index: 40;
+  max-height: 400px;
+  overflow: auto;
+}
+
+.jGIS-Remote-Pointer-Popup {
+  margin-left: 7px;
+  margin-top: 14px;
+  color: #fff;
+  padding: 1em;
+  border-radius: 0.5em;
+  font-size: 12px;
+  line-height: 1.2;
+}
+
+.jGIS-Remote-Pointer-Popup-Name {
+  font-size: 16px;
+  color: #333;
+}
+
+.jGIS-Remote-Pointer-Popup-Coordinates {
+  font-size: 14px;
+}
+
 /* Hack to remove the malformed form button */
 .object-property-expand {
   display: none;