Avoid follow mode loops

editor/liveblocks.config.ts

@@ -19,13 +19,15 @@ export type Presence = {
   cursor: WindowPoint | null
   canvasScale: number | null
   canvasOffset: CanvasVector | null
+  following: string | null
 }
 
 export function initialPresence(): Presence {
   return {
     cursor: null,
     canvasScale: null,
     canvasOffset: null,
+    following: null,
   }
 }
 

editor/src/components/canvas/multiplayer-cursors.tsx

@@ -46,16 +46,24 @@ export const MultiplayerPresence = React.memo(() => {
     (store) => store.editor.canvas.roundedCanvasOffset,
     'MultiplayerPresence canvasOffset',
   )
+  const mode = useEditorState(
+    Substores.restOfEditor,
+    (store) => store.editor.mode,
+    'MultiplayerPresence mode',
+  )
 
   useAddMyselfToCollaborators()
 
   React.useEffect(() => {
     if (!isLoggedIn(loginState)) {
       return
     }
-    // when the canvas is panned or zoomed, update the presence
-    updateMyPresence({ canvasScale, canvasOffset })
-  }, [canvasScale, canvasOffset, updateMyPresence, loginState])
+    updateMyPresence({
+      canvasScale,
+      canvasOffset,
+      following: isFollowMode(mode) ? mode.playerId : null,
+    })
+  }, [canvasScale, canvasOffset, updateMyPresence, loginState, mode])
 
   React.useEffect(() => {
     // when the mouse moves over the canvas, update the presence cursor

editor/src/components/user-bar.tsx

@@ -3,6 +3,7 @@ import { useOthers, useSelf, useStatus, useStorage } from '../../liveblocks.conf
 import { getUserPicture, isLoggedIn } from '../common/user'
 import type { MultiplayerColor } from '../core/shared/multiplayer'
 import {
+  canFollowTarget,
   isDefaultAuth0AvatarURL,
   multiplayerColorFromIndex,
   multiplayerInitialsFromName,
@@ -14,13 +15,16 @@ import { Substores, useEditorState } from './editor/store/store-hook'
 import { unless, when } from '../utils/react-conditionals'
 import { MultiplayerWrapper } from '../utils/multiplayer-wrapper'
 import { useDispatch } from './editor/store/dispatch-context'
-import { switchEditorMode } from './editor/actions/action-creators'
+import { showToast, switchEditorMode } from './editor/actions/action-creators'
 import type { EditorAction } from './editor/action-types'
 import { EditorModes, isFollowMode } from './editor/editor-modes'
+import { notice } from './common/notice'
 import { useMyUserAndPresence } from '../core/commenting/comment-hooks'
 
 const MAX_VISIBLE_OTHER_PLAYERS = 4
 
+export const cannotFollowToastId = 'cannot-follow-toast-id'
+
 export const UserBar = React.memo(() => {
   const loginState = useEditorState(
     Substores.userState,
@@ -71,6 +75,7 @@ const MultiplayerUserBar = React.memo(() => {
       name: myUser.name,
       colorIndex: myUser.colorIndex,
       picture: myUser.avatar,
+      following: other.presence.following,
     })),
   )
 
@@ -88,15 +93,35 @@ const MultiplayerUserBar = React.memo(() => {
   )
 
   const toggleFollowing = React.useCallback(
-    (id: string) => () => {
-      const newMode =
-        isFollowMode(mode) && mode.playerId === id
-          ? EditorModes.selectMode(null, false, 'none')
-          : EditorModes.followMode(id)
-      let actions: EditorAction[] = [switchEditorMode(newMode)]
+    (targetId: string) => () => {
+      let actions: EditorAction[] = []
+      if (
+        !canFollowTarget(
+          myUser.id,
+          targetId,
+          others.map((o) => o),
+        )
+      ) {
+        actions.push(
+          showToast(
+            notice(
+              'Cannot follow this player at the moment.',
+              'WARNING',
+              false,
+              cannotFollowToastId,
+            ),
+          ),
+        )
+      } else {
+        const newMode =
+          isFollowMode(mode) && mode.playerId === targetId
+            ? EditorModes.selectMode(null, false, 'none')
+            : EditorModes.followMode(targetId)
+        actions.push(switchEditorMode(newMode))
+      }
       dispatch(actions)
     },
-    [dispatch, mode],
+    [dispatch, mode, myUser, others],
   )
 
   if (myUser.name == null) {

editor/src/core/shared/multiplayer.spec.ts

@@ -1,4 +1,4 @@
-import { multiplayerInitialsFromName } from './multiplayer'
+import { canFollowTarget, multiplayerInitialsFromName } from './multiplayer'
 
 describe('multiplayer', () => {
   describe('multiplayerInitialsFromName', () => {
@@ -18,4 +18,39 @@ describe('multiplayer', () => {
       expect(multiplayerInitialsFromName('')).toEqual('XX')
     })
   })
+
+  describe('canFollowTarget', () => {
+    it('can follow a single player', () => {
+      expect(canFollowTarget('foo', 'bar', [{ id: 'bar', following: null }])).toBe(true)
+    })
+    it('can follow a player that follows another player', () => {
+      expect(
+        canFollowTarget('foo', 'bar', [
+          { id: 'bar', following: 'baz' },
+          { id: 'baz', following: null },
+        ]),
+      ).toBe(true)
+    })
+    it('can follow a player that follows another player indirectly', () => {
+      expect(
+        canFollowTarget('foo', 'bar', [
+          { id: 'bar', following: 'baz' },
+          { id: 'baz', following: 'qux' },
+          { id: 'qux', following: null },
+        ]),
+      ).toBe(true)
+    })
+    it('cannot follow a player back', () => {
+      expect(canFollowTarget('foo', 'bar', [{ id: 'bar', following: 'foo' }])).toBe(false)
+    })
+    it('cannot follow a player that has an indirect loop', () => {
+      expect(
+        canFollowTarget('foo', 'bar', [
+          { id: 'bar', following: 'baz' },
+          { id: 'baz', following: 'qux' },
+          { id: 'qux', following: 'foo' },
+        ]),
+      ).toBe(false)
+    })
+  })
 })

editor/src/core/shared/multiplayer.ts

@@ -107,6 +107,27 @@ export function isDefaultAuth0AvatarURL(s: string | null): boolean {
   )
 }
 
+export function canFollowTarget(
+  selfId: string,
+  targetId: string | null,
+  others: { id: string; following: string | null }[],
+): boolean {
+  let followChain: Set<string> = new Set()
+
+  let id = targetId
+  while (id != null) {
+    if (followChain.has(id)) {
+      return false
+    }
+    followChain.add(id)
+
+    const target = others.find((o) => o.id === id)
+    id = target?.following ?? null
+  }
+
+  return !followChain.has(selfId)
+}
+
 export function projectIdToRoomId(projectId: string): string {
   return `project-room-${projectId}`
 }