[mini-feature] Following indicator (#1468)

This PR adds a colored box around the current window when following
another user.

### Change Type

- [x] `minor` — New Feature

### Test Plan

1. Follow a user
2. Check out the box

### Release Notes

- Adds viewport following indicator
This commit is contained in:
Steve Ruiz 2023-05-25 16:41:49 +01:00 committed by GitHub
parent b742783577
commit f63371577d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 30 additions and 3 deletions

View file

@ -307,6 +307,16 @@ input,
pointer-events: none;
}
.tlui-following {
display: block;
position: absolute;
inset: 0px;
border-width: 2px;
border-style: solid;
z-index: 9999999;
pointer-events: none;
}
/* ------------------- Background ------------------- */
.tl-background {

View file

@ -7,6 +7,7 @@ import { TldrawUiContextProvider, TldrawUiContextProviderProps } from './TldrawU
import { BackToContent } from './components/BackToContent'
import { DebugPanel } from './components/DebugPanel'
import { Dialogs } from './components/Dialogs'
import { FollowingIndicator } from './components/FollowingIndicator'
import { HelpMenu } from './components/HelpMenu'
import { MenuZone } from './components/MenuZone'
import { NavigationZone } from './components/NavigationZone/NavigationZone'
@ -89,9 +90,9 @@ export const TldrawUiContent = React.memo(function TldrawUI({
const app = useApp()
const msg = useTranslation()
const breakpoint = useBreakpoint()
const isReadonlyMode = useValue('isReadOnlyMode', () => app.isReadOnly, [])
const isFocusMode = useValue('isFocusMode', () => app.instanceState.isFocusMode, [])
const isDebugMode = useValue('isDebugMode', () => app.instanceState.isDebugMode, [])
const isReadonlyMode = useValue('isReadOnlyMode', () => app.isReadOnly, [app])
const isFocusMode = useValue('focus', () => app.instanceState.isFocusMode, [app])
const isDebugMode = useValue('debug', () => app.instanceState.isDebugMode, [app])
useKeyboardShortcuts()
useNativeClipboardEvents()
@ -153,6 +154,7 @@ export const TldrawUiContent = React.memo(function TldrawUI({
<Toasts />
<Dialogs />
<ToastViewport />
<FollowingIndicator />
</main>
</ToastProvider>
)

View file

@ -0,0 +1,15 @@
import { useApp, usePresence } from '@tldraw/editor'
import { useValue } from 'signia-react'
export function FollowingIndicator() {
const app = useApp()
const followingUserId = useValue('follow', () => app.instanceState.followingUserId, [app])
if (!followingUserId) return null
return <FollowingIndicatorInner userId={followingUserId} />
}
function FollowingIndicatorInner({ userId }: { userId: string }) {
const presence = usePresence(userId)
if (!presence) return null
return <div className="tlui-following" style={{ borderColor: presence.color }} />
}