Handle multi model decorations

Author: CompuIves

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

@@ -3,7 +3,6 @@ import {
   EditorSelection,
   Module,
   Sandbox,
-  UserSelection,
 } from '@codesandbox/common/lib/types';
 import { indexToLineAndColumn } from 'app/overmind/utils/common';
 import { actions, dispatch } from 'codesandbox-api';
@@ -198,9 +197,36 @@ export class ModelsHandler {
     this.isApplyingOperation = false;
   }
 
+  public clearUserSelections(userId: string) {
+    const decorations = Object.keys(this.userSelectionDecorations).filter(d =>
+      d.startsWith(userId)
+    );
+    Object.keys(this.moduleModels).forEach(async key => {
+      const moduleModel = this.moduleModels[key];
+
+      if (!moduleModel.model) {
+        return;
+      }
+
+      const model = await moduleModel.model;
+
+      decorations.forEach(decorationId => {
+        if (decorationId.startsWith(userId + model.id)) {
+          this.userSelectionDecorations[decorationId] = model.deltaDecorations(
+            this.userSelectionDecorations[decorationId] || [],
+            []
+          );
+        }
+      });
+    });
+  }
+
+  nameTagTimeouts: { [name: string]: number } = {};
+
   public async updateUserSelections(
     module,
-    userSelections: Array<UserSelection | EditorSelection>
+    userSelections: EditorSelection[],
+    showNameTag = true
   ) {
     const moduleModel = this.getModuleModel(module);
 
@@ -212,19 +238,15 @@ export class ModelsHandler {
 
     const model = await moduleModel.model;
     const lines = model.getLinesContent() || [];
-    const activeEditor = this.editorApi.getActiveCodeEditor();
 
-    userSelections.forEach((data: EditorSelection & UserSelection) => {
+    userSelections.forEach((data: EditorSelection) => {
       const { userId } = data;
 
-      const decorationId = module.shortid + userId;
+      const decorationId = userId + model.id + module.shortid;
       if (data.selection === null) {
-        this.userSelectionDecorations[
-          decorationId
-        ] = activeEditor.deltaDecorations(
+        this.userSelectionDecorations[decorationId] = model.deltaDecorations(
           this.userSelectionDecorations[decorationId] || [],
-          [],
-          data.userId
+          []
         );
 
         return;
@@ -233,82 +255,75 @@ export class ModelsHandler {
       const decorations = [];
       const { selection, color, name } = data;
 
-      if (selection) {
-        const addCursor = (position, className) => {
-          const cursorPos = indexToLineAndColumn(lines, position);
-
-          decorations.push({
-            range: new this.monaco.Range(
-              cursorPos.lineNumber,
-              cursorPos.column,
-              cursorPos.lineNumber,
-              cursorPos.column
-            ),
-            options: {
-              beforeContentClassName: this.userClassesGenerated[className],
-              zIndex: 2,
-            },
-          });
+      const getCursorDecoration = (position, className) => {
+        const cursorPos = indexToLineAndColumn(lines, position);
+
+        return {
+          range: new this.monaco.Range(
+            cursorPos.lineNumber,
+            cursorPos.column,
+            cursorPos.lineNumber,
+            cursorPos.column
+          ),
+          options: {
+            className: `${this.userClassesGenerated[className]}`,
+          },
         };
+      };
 
-        const addSelection = (start, end, className) => {
-          const from = indexToLineAndColumn(lines, start);
-          const to = indexToLineAndColumn(lines, end);
+      const getSelectionDecoration = (start, end, className) => {
+        const from = indexToLineAndColumn(lines, start);
+        const to = indexToLineAndColumn(lines, end);
 
-          decorations.push({
-            range: new this.monaco.Range(
-              from.lineNumber,
-              from.column,
-              to.lineNumber,
-              to.column
-            ),
-            options: {
-              className: this.userClassesGenerated[className],
-            },
-          });
+        return {
+          range: new this.monaco.Range(
+            from.lineNumber,
+            from.column,
+            to.lineNumber,
+            to.column
+          ),
+          options: {
+            className: this.userClassesGenerated[className],
+          },
         };
+      };
+      const prefix = color.join('-') + userId;
+      const cursorClassName = prefix + '-cursor';
+      const nameTagClassName = prefix + '-nametag';
+      const secondaryCursorClassName = prefix + '-secondary-cursor';
+      const selectionClassName = prefix + '-selection';
+      const secondarySelectionClassName = prefix + '-secondary-selection';
 
-        const prefix = color.join('-') + userId;
-        const cursorClassName = prefix + '-cursor';
-        const secondaryCursorClassName = prefix + '-secondary-cursor';
-        const selectionClassName = prefix + '-selection';
-        const secondarySelectionClassName = prefix + '-secondary-selection';
-
+      if (selection) {
+        const nameStyles = {
+          content: name,
+          position: 'absolute',
+          bottom: '100%',
+          backgroundColor: `rgb(${color[0]}, ${color[1]}, ${color[2]})`,
+          zIndex: 200,
+          color:
+            color[0] + color[1] + color[2] > 500
+              ? 'rgba(0, 0, 0, 0.8)'
+              : 'white',
+          padding: '0 4px',
+          borderRadius: 2,
+          borderBottomLeftRadius: 0,
+          fontSize: '.75rem',
+          fontWeight: 600,
+          userSelect: 'none',
+          pointerEvents: 'none',
+          width: 'max-content',
+          fontFamily: 'dm, Menlo, monospace',
+        };
         if (!this.userClassesGenerated[cursorClassName]) {
-          const nameStyles = {
-            content: name,
-            position: 'absolute',
-            bottom: '100%',
-            backgroundColor: `rgb(${color[0]}, ${color[1]}, ${color[2]})`,
-            zIndex: 200,
-            color:
-              color[0] + color[1] + color[2] > 500
-                ? 'rgba(0, 0, 0, 0.8)'
-                : 'white',
-            padding: '0 4px',
-            borderRadius: 2,
-            borderBottomLeftRadius: 0,
-            fontSize: '.75rem',
-            fontWeight: 600,
-            userSelect: 'none',
-            pointerEvents: 'none',
-            width: 'max-content',
-          };
-
           this.userClassesGenerated[cursorClassName] = `${css({
+            display: 'inherit',
             position: 'absolute',
             backgroundColor: `rgba(${color[0]}, ${color[1]}, ${color[2]}, 0.8)`,
             width: '2px !important',
             height: '100%',
             cursor: 'text',
             zIndex: 200,
-            ':before': {
-              animation: `${fadeOut} 0.3s`,
-              animationDelay: '1s',
-              animationFillMode: 'forwards',
-              opacity: 1,
-              ...nameStyles,
-            },
             ':hover': {
               ':before': {
                 animation: `${fadeIn} 0.3s`,
@@ -320,6 +335,18 @@ export class ModelsHandler {
           })}`;
         }
 
+        if (!this.userClassesGenerated[nameTagClassName]) {
+          this.userClassesGenerated[nameTagClassName] = `${css({
+            ':before': {
+              animation: `${fadeOut} 0.3s`,
+              animationDelay: '1s',
+              animationFillMode: 'forwards',
+              opacity: 1,
+              ...nameStyles,
+            },
+          })}`;
+        }
+
         if (!this.userClassesGenerated[secondaryCursorClassName]) {
           this.userClassesGenerated[secondaryCursorClassName] = `${css({
             backgroundColor: `rgba(${color[0]}, ${color[1]}, ${color[2]}, 0.6)`,
@@ -343,48 +370,65 @@ export class ModelsHandler {
           })}`;
         }
 
-        // These types are not working, have to figure this out
-        // @ts-ignore
-        addCursor(selection.primary.cursorPosition, cursorClassName);
-        // @ts-ignore
+        decorations.push(
+          getCursorDecoration(selection.primary.cursorPosition, cursorClassName)
+        );
+
         if (selection.primary.selection.length) {
-          addSelection(
-            // @ts-ignore
-            selection.primary.selection[0],
-            // @ts-ignore
-            selection.primary.selection[1],
-            selectionClassName
+          decorations.push(
+            getSelectionDecoration(
+              // @ts-ignore
+              selection.primary.selection[0],
+              // @ts-ignore
+              selection.primary.selection[1],
+              selectionClassName
+            )
           );
         }
 
-        // @ts-ignore
         if (selection.secondary.length) {
-          // @ts-ignore
           selection.secondary.forEach(s => {
-            addCursor(s.cursorPosition, secondaryCursorClassName);
+            decorations.push(
+              getCursorDecoration(s.cursorPosition, secondaryCursorClassName)
+            );
 
             if (s.selection.length) {
-              addSelection(
-                s.selection[0],
-                s.selection[1],
-                secondarySelectionClassName
+              decorations.push(
+                getSelectionDecoration(
+                  s.selection[0],
+                  s.selection[1],
+                  secondarySelectionClassName
+                )
               );
             }
           });
         }
       }
 
-      // Allow new model to attach in case it's attaching
-      // Should ideally verify this, this is hacky
-      requestAnimationFrame(() => {
-        this.userSelectionDecorations[
-          decorationId
-        ] = activeEditor.deltaDecorations(
-          this.userSelectionDecorations[decorationId] || [],
-          decorations,
-          userId
+      this.userSelectionDecorations[decorationId] = model.deltaDecorations(
+        this.userSelectionDecorations[decorationId] || [],
+        decorations
+      );
+
+      if (this.nameTagTimeouts[decorationId]) {
+        clearTimeout(this.nameTagTimeouts[decorationId]);
+      }
+      if (showNameTag) {
+        const decoration = model.deltaDecorations(
+          [],
+          [
+            getCursorDecoration(
+              selection.primary.cursorPosition,
+              nameTagClassName
+            ),
+          ]
         );
-      });
+        this.userSelectionDecorations[decorationId].push(decoration);
+        this.nameTagTimeouts[decorationId] = window.setTimeout(() => {
+          // And now hide the nametag after 1.5s
+          model.deltaDecorations([decoration], []);
+        }, 1500);
+      }
     });
   }
 

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

@@ -263,15 +263,23 @@ export class VSCodeEffect {
     }
   }
 
-  public updateUserSelections(userSelections: EditorSelection[]) {
+  public clearUserSelections(userId: string) {
     if (!this.modelsHandler) {
       return;
     }
 
-    this.modelsHandler.updateUserSelections(
-      this.options.getCurrentModule(),
-      userSelections
-    );
+    this.modelsHandler.clearUserSelections(userId);
+  }
+
+  public updateUserSelections(
+    module: Module,
+    userSelections: EditorSelection[]
+  ) {
+    if (!this.modelsHandler) {
+      return;
+    }
+
+    this.modelsHandler.updateUserSelections(module, userSelections);
   }
 
   public setReadOnly(enabled: boolean) {
@@ -868,6 +876,13 @@ export class VSCodeEffect {
             ),
           };
 
+          if (selectionChange.source === 'modelChange') {
+            // Don't update the cursor pos on model change, as it will
+            // be updated automatically by vscode (they handle cursor
+            // location changes really well)
+            return;
+          }
+
           if (
             selectionChange.reason === 3 ||
             /* alt + shift + arrow keys */ selectionChange.source ===

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

@@ -370,6 +370,7 @@ export const moduleSelected: Action<{
 
     if (state.live.isLive) {
       effects.vscode.updateUserSelections(
+        module,
         actions.live.internal.getSelectionsForModule(module)
       );
       state.live.liveUser.currentModuleShortid = module.shortid;