Spaces:
Runtime error
Runtime error
File size: 2,919 Bytes
560b99e 66ed450 560b99e 66ed450 560b99e 66ed450 560b99e 66ed450 560b99e 66ed450 560b99e 66ed450 560b99e 66ed450 560b99e 66ed450 560b99e 66ed450 de6cf77 66ed450 560b99e |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 |
<script lang="ts">
import Cursor from '$lib/Cursor.svelte';
import Frame from '$lib/Frame.svelte';
import Canvas from '$lib/Canvas.svelte';
import Menu from '$lib/Menu.svelte';
import type { Room } from '@liveblocks/client';
import { onDestroy } from 'svelte';
import { currZoomTransform } from '$lib/store';
/**
* The main Liveblocks code for the example.
* Check in src/routes/index.svelte to see the setup code.
*/
export let room: Room;
// Get initial values for presence and others
let myPresence = room.getPresence();
let others = room.getOthers();
// Subscribe to further changes
const unsubscribeMyPresence = room.subscribe('my-presence', (presence) => {
myPresence = presence;
});
const unsubscribeOthers = room.subscribe('others', (otherUsers) => {
others = otherUsers;
});
// Unsubscribe when unmounting
onDestroy(() => {
unsubscribeMyPresence();
unsubscribeOthers();
});
// Update cursor presence to current pointer location
function handlePointerMove(event: PointerEvent) {
event.preventDefault();
room.updatePresence({
cursor: {
x: Math.round(event.layerX),
y: Math.round(event.layerY)
}
});
}
// When the pointer leaves the page, set cursor presence to null
function handlePointerLeave() {
room.updatePresence({
cursor: null
});
}
const COLORS = [
'#E57373',
'#9575CD',
'#4FC3F7',
'#81C784',
'#FFF176',
'#FF8A65',
'#F06292',
'#7986CB'
];
</script>
<div class="relative">
<div class="z-0">
<h3 class="text-xl">TESTS</h3>
</div>
<main class="z-10 relative">
<!-- Show the current user's cursor location -->
<div class="text">
{myPresence?.cursor
? `${myPresence.cursor.x} × ${myPresence.cursor.y}`
: 'Move your cursor to broadcast its position to other people in the room.'}
</div>
{#if myPresence?.cursor}
<Frame x={myPresence.cursor.x} y={myPresence.cursor.y} transform={$currZoomTransform} />
{/if}
<!-- When others connected, iterate through others and show their cursors -->
{#if others}
{#each [...others] as { connectionId, presence } (connectionId)}
{#if presence?.cursor}
<Cursor
color={COLORS[connectionId % COLORS.length]}
x={presence.cursor.x}
y={presence.cursor.y}
/>
<Frame x={presence.cursor.x} y={presence.cursor.y} transform={$currZoomTransform} />
{/if}
{/each}
{/if}
<Canvas />
</main>
</div>
<div class="fixed bottom-0 left-0 right-0 z-50 my-2">
<Menu />
</div>
<style lang="postcss" scoped>
main {
/* @apply fixed top-0 left-0 w-screen h-screen flex flex-col items-center justify-center touch-none bg-white; */
/* position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
display: flex;
place-content: center;
place-items: center;
touch-action: none;
background-color: white; */
}
.text {
max-width: 380px;
margin: 0 16px;
text-align: center;
}
</style>
|