kopia lustrzana https://github.com/Tldraw/Tldraw
[improvement] Multiplayer cursors (#458)
* bump versions, improve cursors * Spline cursors * Update useCursorAnimation.ts * Update useCursorAnimation.ts * Add improved cursors * Update MultiplayerEditor.tsx * Update [id].tsxpull/459/head
rodzic
7c2777966f
commit
4da632d5d8
|
@ -52,7 +52,7 @@ function Editor({
|
|||
<Tldraw
|
||||
autofocus
|
||||
showPages={false}
|
||||
showSponsorLink={isSponsor}
|
||||
showSponsorLink={!isSponsor}
|
||||
onSignIn={isSponsor ? undefined : onSignIn}
|
||||
onSignOut={isUser ? onSignOut : undefined}
|
||||
{...fileSystemEvents}
|
||||
|
|
|
@ -21,7 +21,7 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
|
|||
props: {
|
||||
id,
|
||||
isUser: session?.user ? true : false,
|
||||
isSponsor: session.isSponsor,
|
||||
isSponsor: session?.isSponsor,
|
||||
},
|
||||
}
|
||||
}
|
||||
|
|
|
@ -10,16 +10,29 @@ interface UserProps {
|
|||
}
|
||||
|
||||
export function User({ user }: UserProps) {
|
||||
const rCursor = React.useRef<HTMLDivElement>(null)
|
||||
const rCursor = React.useRef<SVGSVGElement>(null)
|
||||
useCursorAnimation(rCursor, user.point)
|
||||
return (
|
||||
<div
|
||||
<svg
|
||||
ref={rCursor}
|
||||
className="tl-absolute tl-user"
|
||||
style={{
|
||||
backgroundColor: user.color,
|
||||
willChange: 'transform',
|
||||
}}
|
||||
/>
|
||||
className="tl-absolute tl-user tl-counter-scaled"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 35 35"
|
||||
fill="none"
|
||||
fillRule="evenodd"
|
||||
>
|
||||
<g fill="rgba(0,0,0,.2)" transform="translate(1,1)">
|
||||
<path d="m12 24.4219v-16.015l11.591 11.619h-6.781l-.411.124z" />
|
||||
<path d="m21.0845 25.0962-3.605 1.535-4.682-11.089 3.686-1.553z" />
|
||||
</g>
|
||||
<g fill="white">
|
||||
<path d="m12 24.4219v-16.015l11.591 11.619h-6.781l-.411.124z" />
|
||||
<path d="m21.0845 25.0962-3.605 1.535-4.682-11.089 3.686-1.553z" />
|
||||
</g>
|
||||
<g fill={user.color}>
|
||||
<path d="m19.751 24.4155-1.844.774-3.1-7.374 1.841-.775z" />
|
||||
<path d="m13 10.814v11.188l2.969-2.866.428-.139h4.768z" />
|
||||
</g>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -57,6 +57,7 @@ export function useCursorAnimation(ref: any, point: number[]) {
|
|||
const spline = rSpline.current
|
||||
if (rState.current === 'stopped') {
|
||||
rTimestamp.current = now
|
||||
rPrevPoint.current = point
|
||||
spline.clear()
|
||||
}
|
||||
spline.addPoint(point)
|
||||
|
@ -67,7 +68,7 @@ export function useCursorAnimation(ref: any, point: number[]) {
|
|||
from: rPrevPoint.current,
|
||||
to: point,
|
||||
timeStamp: now,
|
||||
duration: Math.min(now - rTimestamp.current, 500),
|
||||
duration: Math.min(now - rTimestamp.current, 300),
|
||||
}
|
||||
rPrevPoint.current = point
|
||||
rTimestamp.current = now
|
||||
|
|
|
@ -289,12 +289,13 @@ const tlcss = css`
|
|||
}
|
||||
|
||||
.tl-user {
|
||||
left: -4px;
|
||||
top: -4px;
|
||||
height: 8px;
|
||||
width: 8px;
|
||||
border-radius: 100%;
|
||||
left: calc(-15px * var(--tl-scale));
|
||||
top: calc(-15px * var(--tl-scale));
|
||||
height: calc(35px * var(--tl-scale));
|
||||
width: calc(35px * var(--tl-scale));
|
||||
transform: scale(var(--tl-scale));
|
||||
pointer-events: none;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.tl-indicator {
|
||||
|
|
Ładowanie…
Reference in New Issue