Collaborator Heads (codesandbox#3704)

* Following

* Add breadcrumb for debugging OT

* WIP

* WIP

* WIP on user following

* Follow users by range

* Tweak the heads, remove the "user joined" notifs

* Undo elixir syntax in js

* Undo file

* Keep right order

* Fix types

* Add margin to menu button

* Add 'View Profile' Link

* Fix types

* Fix type

* Add another nullcheck

* Update icon size

* Move to new feature flag

* Apply suggestions from code review

Co-Authored-By: Michaël De Boey <[email protected]>

* Fix typing

Co-authored-by: Michaël De Boey <[email protected]>

Author: CompuIves

packages/app/src/app/components/CodeEditor/elements.ts

@@ -1,9 +1,6 @@
 import styled from 'styled-components';
 
 export const Icons = styled.div`
-  position: absolute;
-  top: 0;
-  right: 1rem;
   background-color: rgba(0, 0, 0, 0.3);
   box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
   border-radius: 2px;
@@ -13,7 +10,6 @@ export const Icons = styled.div`
   z-index: 40;
 
   font-size: 0.875rem;
-  margin-top: 35px;
 `;
 
 export const Icon = styled.div`

packages/app/src/app/components/Overlay/Overlay.tsx

@@ -44,14 +44,23 @@ export const Overlay: React.FC<IOverlayProps> = ({
     height: 0,
   });
 
-  useLayoutEffect(() => {
+  const calculateBounds = () => {
     const posData = element.current.getBoundingClientRect();
     bounds.current = {
       top: posData.top,
       left: posData.left,
       width: posData.width,
       height: posData.height,
     };
+  };
+
+  useLayoutEffect(() => {
+    calculateBounds();
+
+    window.addEventListener('resize', calculateBounds);
+    return () => {
+      window.removeEventListener('resize', calculateBounds);
+    };
   }, []);
 
   const handleClick = () => {

packages/app/src/app/overmind/effects/live/index.ts

@@ -3,6 +3,7 @@ import {
   LiveMessageEvent,
   Module,
   RoomInfo,
+  UserViewRange,
 } from '@codesandbox/common/lib/types';
 import {
   captureException,
@@ -452,6 +453,18 @@ class Live {
     return this.sendImmediately('live:module_state', {});
   }
 
+  sendUserViewRange(
+    moduleShortid: string | null,
+    liveUserId: string,
+    viewRange: UserViewRange
+  ) {
+    return this.send('user:view-range', {
+      liveUserId,
+      moduleShortid,
+      viewRange,
+    });
+  }
+
   sendUserSelection(
     moduleShortid: string | null,
     liveUserId: string,

packages/app/src/app/overmind/effects/vscode/index.ts

@@ -10,6 +10,7 @@ import {
   Sandbox,
   SandboxFs,
   Settings,
+  UserViewRange,
 } from '@codesandbox/common/lib/types';
 import { notificationState } from '@codesandbox/common/lib/utils/notifications';
 import {
@@ -25,6 +26,7 @@ import { debounce } from 'lodash-es';
 import * as childProcess from 'node-services/lib/child_process';
 import io from 'socket.io-client';
 
+import { indexToLineAndColumn } from 'app/overmind/utils/common';
 import { EXTENSIONS_LOCATION, VIM_EXTENSION_ID } from './constants';
 import {
   initializeCodeSandboxTheme,
@@ -52,7 +54,8 @@ export type VsCodeOptions = {
   getCurrentUser: () => CurrentUser | null;
   onCodeChange: (data: OnFileChangeData) => void;
   onOperationApplied: (data: OnOperationAppliedData) => void;
-  onSelectionChange: (selection: onSelectionChangeData) => void;
+  onSelectionChanged: (selection: onSelectionChangeData) => void;
+  onViewRangeChanged: (viewRange: UserViewRange) => void;
   reaction: Reaction;
   // These two should be removed
   getSignal: any;
@@ -102,6 +105,7 @@ export class VSCodeEffect {
   private linter: Linter | null;
   private modelsHandler: ModelsHandler;
   private modelSelectionListener: { dispose: Function };
+  private modelViewRangeListener: { dispose: Function };
   private readOnly: boolean;
   private elements = {
     editor: document.createElement('div'),
@@ -114,7 +118,7 @@ export class VSCodeEffect {
     getCustomEditor: () => null,
   };
 
-  onSelectionChangeDebounced: VsCodeOptions['onSelectionChange'] & {
+  onSelectionChangeDebounced: VsCodeOptions['onSelectionChanged'] & {
     cancel(): void;
   };
 
@@ -124,7 +128,7 @@ export class VSCodeEffect {
       getState: options.getState,
       getSignal: options.getSignal,
     };
-    this.onSelectionChangeDebounced = debounce(options.onSelectionChange, 500);
+    this.onSelectionChangeDebounced = debounce(options.onSelectionChanged, 500);
 
     this.prepareElements();
 
@@ -538,6 +542,52 @@ export class VSCodeEffect {
     }
   };
 
+  /**
+   * Reveal position in editor
+   * @param scrollType 0 = smooth, 1 = immediate
+   */
+  revealPositionInCenterIfOutsideViewport(pos: number, scrollType: 0 | 1 = 0) {
+    const activeEditor = this.editorApi.getActiveCodeEditor();
+
+    if (activeEditor) {
+      const model = activeEditor.getModel();
+
+      const lineColumnPos = indexToLineAndColumn(
+        model.getLinesContent() || [],
+        pos
+      );
+
+      activeEditor.revealPositionInCenterIfOutsideViewport(
+        lineColumnPos,
+        scrollType
+      );
+    }
+  }
+
+  /**
+   * Reveal line in editor
+   * @param scrollType 0 = smooth, 1 = immediate
+   */
+  revealLine(lineNumber: number, scrollType: 0 | 1 = 0) {
+    const activeEditor = this.editorApi.getActiveCodeEditor();
+
+    if (activeEditor) {
+      activeEditor.revealLine(lineNumber, scrollType);
+    }
+  }
+
+  /**
+   * Reveal revealLine in editor
+   * @param scrollType 0 = smooth, 1 = immediate
+   */
+  revealRange(range: UserViewRange, scrollType: 0 | 1 = 0) {
+    const activeEditor = this.editorApi.getActiveCodeEditor();
+
+    if (activeEditor) {
+      activeEditor.revealRange(range, scrollType);
+    }
+  }
+
   // Communicates the endpoint for the WebsocketLSP
   private createContainerForkHandler() {
     return () => {
@@ -918,6 +968,10 @@ export class VSCodeEffect {
       this.modelSelectionListener.dispose();
     }
 
+    if (this.modelViewRangeListener) {
+      this.modelViewRangeListener.dispose();
+    }
+
     const activeEditor = this.editorApi.getActiveCodeEditor();
 
     if (activeEditor && activeEditor.getModel()) {
@@ -960,6 +1014,26 @@ export class VSCodeEffect {
         this.modelsHandler.isApplyingOperation = false;
       }
 
+      let lastViewRange = null;
+      const isDifferentViewRange = (r1: UserViewRange, r2: UserViewRange) =>
+        r1.startLineNumber !== r2.startLineNumber ||
+        r1.startColumn !== r2.startColumn ||
+        r1.endLineNumber !== r2.endLineNumber ||
+        r1.endColumn !== r2.endColumn;
+
+      this.modelViewRangeListener = activeEditor.onDidScrollChange(e => {
+        const [range] = activeEditor.getVisibleRanges();
+
+        if (
+          lastViewRange != null &&
+          range &&
+          isDifferentViewRange(lastViewRange!, range)
+        ) {
+          lastViewRange = range;
+          this.options.onViewRangeChanged(range);
+        }
+      });
+
       this.modelSelectionListener = activeEditor.onDidChangeCursorSelection(
         selectionChange => {
           const lines = activeEditor.getModel().getLinesContent() || [];
@@ -978,7 +1052,7 @@ export class VSCodeEffect {
             /* click inside a selection */ selectionChange.source === 'api'
           ) {
             this.onSelectionChangeDebounced.cancel();
-            this.options.onSelectionChange(data);
+            this.options.onSelectionChanged(data);
           } else {
             // This is just on typing, we send a debounced selection update as a
             // safeguard to make sure we are in sync

packages/app/src/app/overmind/namespaces/editor/actions.ts

@@ -511,7 +511,7 @@ export const moduleSelected: Action<
           followingUser.currentModuleShortid !== module.shortid
         ) {
           // Reset following as this is a user change module action
-          state.live.followingUserId = null;
+          actions.live.onStopFollow();
         }
       }
 

packages/app/src/app/overmind/namespaces/live/actions.ts

@@ -1,4 +1,8 @@
-import { LiveMessage, LiveMessageEvent } from '@codesandbox/common/lib/types';
+import {
+  LiveMessage,
+  LiveMessageEvent,
+  UserViewRange,
+} from '@codesandbox/common/lib/types';
 import { Action, AsyncAction, Operator } from 'app/overmind';
 import { withLoadApp } from 'app/overmind/factories';
 import getItems from 'app/overmind/utils/items';
@@ -144,6 +148,7 @@ export const liveMessageReceived: Operator<LiveMessage, any> = pipe(
     [LiveMessageEvent.DIRECTORY_DELETED]: liveMessage.onDirectoryDeleted,
     [LiveMessageEvent.USER_SELECTION]: liveMessage.onUserSelection,
     [LiveMessageEvent.USER_CURRENT_MODULE]: liveMessage.onUserCurrentModule,
+    [LiveMessageEvent.USER_VIEW_RANGE]: liveMessage.onUserViewRange,
     [LiveMessageEvent.LIVE_MODE]: liveMessage.onLiveMode,
     [LiveMessageEvent.LIVE_CHAT_ENABLED]: liveMessage.onLiveChatEnabled,
     [LiveMessageEvent.LIVE_ADD_EDITOR]: liveMessage.onLiveAddEditor,
@@ -187,6 +192,59 @@ export const sendCurrentSelection: Action = ({ state, effects }) => {
   }
 };
 
+export const sendCurrentViewRange: Action = ({ state, effects }) => {
+  if (!state.live.roomInfo) {
+    return;
+  }
+
+  if (!state.live.isCurrentEditor) {
+    return;
+  }
+  
+  const { liveUserId, currentViewRange } = state.live;
+  if (liveUserId && currentViewRange) {
+    effects.live.sendUserViewRange(
+      state.editor.currentModuleShortid,
+      liveUserId,
+      currentViewRange
+    );
+  }
+};
+
+export const onViewRangeChanged: Action<UserViewRange> = (
+  { state, effects },
+  viewRange
+) => {
+  if (!state.live.roomInfo) {
+    return;
+  }
+
+  if (state.live.isCurrentEditor) {
+    const { liveUserId } = state.live;
+    const moduleShortid = state.editor.currentModuleShortid;
+    if (!liveUserId) {
+      return;
+    }
+
+    state.live.currentViewRange = viewRange;
+    const userIndex = state.live.roomInfo.users.findIndex(
+      u => u.id === liveUserId
+    );
+
+    if (userIndex !== -1) {
+      if (state.live.roomInfo.users[userIndex]) {
+        state.live.roomInfo.users[
+          userIndex
+        ].currentModuleShortid = moduleShortid;
+
+        state.live.roomInfo.users[userIndex].viewRange = viewRange;
+
+        effects.live.sendUserViewRange(moduleShortid, liveUserId, viewRange);
+      }
+    }
+  }
+};
+
 export const onSelectionChanged: Action<any> = (
   { state, effects },
   selection
@@ -310,15 +368,64 @@ export const onFollow: Action<{
 
   effects.analytics.track('Follow Along in Live');
   state.live.followingUserId = liveUserId;
+  actions.live.revealViewRange({ liveUserId });
+};
+
+export const onStopFollow: Action = ({ state, effects, actions }) => {
+  if (!state.live.roomInfo) {
+    return;
+  }
+
+  state.live.followingUserId = null;
+};
+
+export const revealViewRange: Action<{ liveUserId: string }> = (
+  { state, effects, actions },
+  { liveUserId }
+) => {
+  if (!state.live.roomInfo) {
+    return;
+  }
+
+  const user = state.live.roomInfo.users.find(u => u.id === liveUserId);
+
+  if (user && user.currentModuleShortid && state.editor.currentSandbox) {
+    const { modules } = state.editor.currentSandbox;
+    const module = modules.filter(
+      ({ shortid }) => shortid === user.currentModuleShortid
+    )[0];
+
+    actions.editor.moduleSelected({ id: module.id });
+
+    if (user.viewRange) {
+      effects.vscode.revealRange(user.viewRange);
+    }
+  }
+};
+
+export const revealCursorPosition: Action<{ liveUserId: string }> = (
+  { state, effects, actions },
+  { liveUserId }
+) => {
+  if (!state.live.roomInfo) {
+    return;
+  }
 
   const user = state.live.roomInfo.users.find(u => u.id === liveUserId);
 
-  if (user!.currentModuleShortid && state.editor.currentSandbox) {
+  if (user && user.currentModuleShortid && state.editor.currentSandbox) {
     const { modules } = state.editor.currentSandbox;
     const module = modules.filter(
-      ({ shortid }) => shortid === user!.currentModuleShortid
+      ({ shortid }) => shortid === user.currentModuleShortid
     )[0];
 
     actions.editor.moduleSelected({ id: module.id });
+
+    if (user.selection?.primary?.cursorPosition) {
+      effects.vscode.revealPositionInCenterIfOutsideViewport(
+        user.selection.primary.cursorPosition,
+        0
+      );
+    }
   }
 };