jeffemmett
/
rspace-online
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix multi-user cursor positions: use page-relative coordinates
CI/CD / deploy (push) Failing after 8s Details 

Remote cursors were broadcast as viewport-relative (clientX/Y), causing
them to appear at wrong positions when users had different scroll offsets.
Now sends page-relative coords and converts back on the receiver side.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-04-01 12:32:01 -07:00
parent d2fa533519
commit b54ad4b36c
1 changed files with 5 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
shared/components/rstack-collab-overlay.ts
View File

@ -5,7 +5,7 @@
* - "N online" badge (top-right pill with colored dots)
* - People panel dropdown (click badge to open)
* - Online/Offline mode toggle in panel
* - Remote cursors (SVG arrows with username labels, viewport-relative)
* - Remote cursors (SVG arrows with username labels, page-relative)
* - Focus highlighting (colored outline rings on data-collab-id elements)
* - Auto-discovery via rspace-doc-subscribe events from runtime
* - Bridge API for canvas (external peer management via CommunitySync)
@ -395,7 +395,7 @@ export class RStackCollabOverlay extends HTMLElement {
// ── Pointer tracking (15Hz throttle) — covers mouse, touch, and pen ──
#pointerHandler = (e: PointerEvent) => {
this.#lastCursor = { x: e.clientX, y: e.clientY };
this.#lastCursor = { x: e.clientX + window.scrollX, y: e.clientY + window.scrollY };
};
#startMouseTracking() {
@ -747,8 +747,10 @@ export class RStackCollabOverlay extends HTMLElement {
const age = now - peer.lastSeen;
const opacity = age > 5000 ? 0.3 : 1;
const sx = peer.cursor.x - window.scrollX;
const sy = peer.cursor.y - window.scrollY;
fragments.push(`
<div class="cursor" style="left:${peer.cursor.x}px;top:${peer.cursor.y}px;opacity:${opacity}">
<div class="cursor" style="left:${sx}px;top:${sy}px;opacity:${opacity}">
<svg width="16" height="20" viewBox="0 0 16 20" fill="none">
<path d="M1 1L6.5 18L8.5 11L15 9L1 1Z" fill="${peer.color}" stroke="white" stroke-width="1.5"/>
</svg>