[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:
parent
b742783577
commit
f63371577d
3 changed files with 30 additions and 3 deletions
|
@ -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 {
|
||||
|
|
|
@ -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>
|
||||
)
|
||||
|
|
15
packages/ui/src/lib/components/FollowingIndicator.tsx
Normal file
15
packages/ui/src/lib/components/FollowingIndicator.tsx
Normal 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 }} />
|
||||
}
|
Loading…
Reference in a new issue