|
| 1 | +<script lang="ts" generics="RoomSchema extends RoomSchemaShape, RoomType extends string & keyof RoomSchema"> |
| 2 | + import type { RoomSchemaShape } from '@instantdb/core'; |
| 3 | + import type { InstantSvelteRoom } from './InstantSvelteRoom.svelte.js'; |
| 4 | + import { usePresence } from './InstantSvelteRoom.svelte.js'; |
| 5 | + import type { Snippet } from 'svelte'; |
| 6 | +
|
| 7 | + let { |
| 8 | + room, |
| 9 | + spaceId: _spaceId, |
| 10 | + as = 'div', |
| 11 | + className, |
| 12 | + style, |
| 13 | + userCursorColor, |
| 14 | + children, |
| 15 | + renderCursor, |
| 16 | + propagate, |
| 17 | + zIndex, |
| 18 | + }: { |
| 19 | + room: InstantSvelteRoom<any, RoomSchema, RoomType>; |
| 20 | + spaceId?: string; |
| 21 | + as?: string; |
| 22 | + className?: string; |
| 23 | + style?: string; |
| 24 | + userCursorColor?: string; |
| 25 | + children?: Snippet; |
| 26 | + renderCursor?: Snippet<[{ color: string; presence: RoomSchema[RoomType]['presence'] }]>; |
| 27 | + propagate?: boolean; |
| 28 | + zIndex?: number; |
| 29 | + } = $props(); |
| 30 | +
|
| 31 | + const spaceId = _spaceId || `cursors-space-default--${String(room.type)}-${room.id}`; |
| 32 | +
|
| 33 | + const cursorsPresence = usePresence(room, { |
| 34 | + keys: [spaceId] as (keyof RoomSchema[RoomType]['presence'])[], |
| 35 | + }); |
| 36 | +
|
| 37 | + function publishCursor(rect: DOMRect, touch: { clientX: number; clientY: number }) { |
| 38 | + const x = touch.clientX; |
| 39 | + const y = touch.clientY; |
| 40 | + const xPercent = ((x - rect.left) / rect.width) * 100; |
| 41 | + const yPercent = ((y - rect.top) / rect.height) * 100; |
| 42 | + cursorsPresence.publishPresence({ |
| 43 | + [spaceId]: { x, y, xPercent, yPercent, color: userCursorColor }, |
| 44 | + } as RoomSchema[RoomType]['presence']); |
| 45 | + } |
| 46 | +
|
| 47 | + function onMouseMove(e: MouseEvent) { |
| 48 | + if (!propagate) { |
| 49 | + e.stopPropagation(); |
| 50 | + } |
| 51 | + const rect = (e.currentTarget as Element).getBoundingClientRect(); |
| 52 | + publishCursor(rect, e); |
| 53 | + } |
| 54 | +
|
| 55 | + function onMouseOut() { |
| 56 | + cursorsPresence.publishPresence({ |
| 57 | + [spaceId]: undefined, |
| 58 | + } as RoomSchema[RoomType]['presence']); |
| 59 | + } |
| 60 | +
|
| 61 | + function onTouchMove(e: TouchEvent) { |
| 62 | + if (e.touches.length !== 1) return; |
| 63 | + const touch = e.touches[0]; |
| 64 | + if (touch.target instanceof Element) { |
| 65 | + if (!propagate) { |
| 66 | + e.stopPropagation(); |
| 67 | + } |
| 68 | + const rect = touch.target.getBoundingClientRect(); |
| 69 | + publishCursor(rect, touch); |
| 70 | + } |
| 71 | + } |
| 72 | +
|
| 73 | + function onTouchEnd() { |
| 74 | + cursorsPresence.publishPresence({ |
| 75 | + [spaceId]: undefined, |
| 76 | + } as RoomSchema[RoomType]['presence']); |
| 77 | + } |
| 78 | +
|
| 79 | + const defaultZ = 99999; |
| 80 | +
|
| 81 | + const peers = $derived(Object.entries(cursorsPresence.peers)); |
| 82 | + const fullPresence = $derived( |
| 83 | + room.core._reactor.getPresence(room.type, room.id), |
| 84 | + ); |
| 85 | +</script> |
| 86 | + |
| 87 | +<!-- svelte-ignore a11y_no_static_element_interactions --> |
| 88 | +<svelte:element |
| 89 | + this={as} |
| 90 | + class={className} |
| 91 | + style="position: relative; {style ?? ''}" |
| 92 | + onmousemove={onMouseMove} |
| 93 | + onmouseout={onMouseOut} |
| 94 | + ontouchmove={onTouchMove} |
| 95 | + ontouchend={onTouchEnd} |
| 96 | +> |
| 97 | + {#if children} |
| 98 | + {@render children()} |
| 99 | + {/if} |
| 100 | + <div |
| 101 | + style="position: absolute; top: 0; left: 0; bottom: 0; right: 0; overflow: hidden; pointer-events: none; user-select: none; z-index: {zIndex ?? defaultZ};" |
| 102 | + > |
| 103 | + {#each peers as [peerId, presence] (peerId)} |
| 104 | + {@const cursor = presence[spaceId]} |
| 105 | + {#if cursor} |
| 106 | + <div |
| 107 | + style="position: absolute; top: 0; left: 0; bottom: 0; right: 0; transform: translate({cursor.xPercent}%, {cursor.yPercent}%); transform-origin: 0 0; transition: transform 100ms;" |
| 108 | + > |
| 109 | + {#if renderCursor} |
| 110 | + {@render renderCursor({ |
| 111 | + color: cursor.color, |
| 112 | + presence: fullPresence?.peers[peerId], |
| 113 | + })} |
| 114 | + {:else} |
| 115 | + {@const fill = cursor.color || 'black'} |
| 116 | + <svg |
| 117 | + style="height: 35px; width: 35px;" |
| 118 | + viewBox="0 0 35 35" |
| 119 | + fill="none" |
| 120 | + xmlns="http://www.w3.org/2000/svg" |
| 121 | + > |
| 122 | + <g |
| 123 | + fill="rgba(0,0,0,.2)" |
| 124 | + transform="matrix(1, 0, 0, 1, -11.999999046325684, -8.406899452209473)" |
| 125 | + > |
| 126 | + <path d="m12 24.4219v-16.015l11.591 11.619h-6.781l-.411.124z" /> |
| 127 | + <path d="m21.0845 25.0962-3.605 1.535-4.682-11.089 3.686-1.553z" /> |
| 128 | + </g> |
| 129 | + <g |
| 130 | + fill="white" |
| 131 | + transform="matrix(1, 0, 0, 1, -11.999999046325684, -8.406899452209473)" |
| 132 | + > |
| 133 | + <path d="m12 24.4219v-16.015l11.591 11.619h-6.781l-.411.124z" /> |
| 134 | + <path d="m21.0845 25.0962-3.605 1.535-4.682-11.089 3.686-1.553z" /> |
| 135 | + </g> |
| 136 | + <g |
| 137 | + fill={fill} |
| 138 | + transform="matrix(1, 0, 0, 1, -11.999999046325684, -8.406899452209473)" |
| 139 | + > |
| 140 | + <path d="m19.751 24.4155-1.844.774-3.1-7.374 1.841-.775z" /> |
| 141 | + <path d="m13 10.814v11.188l2.969-2.866.428-.139h4.768z" /> |
| 142 | + </g> |
| 143 | + </svg> |
| 144 | + {/if} |
| 145 | + </div> |
| 146 | + {/if} |
| 147 | + {/each} |
| 148 | + </div> |
| 149 | +</svelte:element> |
0 commit comments