fix(editor): render collaborator indicators on canvas#7759
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
5 Skipped Deployments
|
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
packages/editor/src/lib/components/default-components/CanvasShapeIndicators.tsx
Outdated
Show resolved
Hide resolved
packages/editor/src/lib/components/default-components/CanvasShapeIndicators.tsx
Outdated
Show resolved
Hide resolved
The collaborator state calculation in CanvasShapeIndicators was using Date.now() inside a computed value, which isn't reactive to time passing. Added useActivePeerIds$() hook that handles time-based state transitions by periodically re-evaluating collaborator states on the same interval as LiveCollaborators. Also extracted shared collaborator state logic into collaboratorState.ts to avoid duplication between LiveCollaborators and CanvasShapeIndicators.
ds300
force-pushed
the
fix/canvas-collaborator-indicators
branch
from
7b03cd7 to
64a9a3c
Compare
When a collaborator has no lastActivityTimestamp, using 0 would result in a very large elapsed time. Using Infinity ensures Math.max returns 0, treating them as recently active until their state can be determined.
Improves visibility of collaborator shape indicators while still maintaining visual distinction from local selection indicators.
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
Bugbot Autofix is OFF. To automatically fix reported issues with Cloud Agents, enable Autofix in the Cursor dashboard.
| ctx.lineWidth = 1.5 / zoom | ||
| for (const collaborator of collaboratorIndicators) { | ||
| ctx.strokeStyle = collaborator.color | ||
| ctx.globalAlpha = 0.7 |
There was a problem hiding this comment.
Canvas collaborator opacity doesn't match SVG indicator
Medium Severity
The comment on line 206 states "Use 0.5 opacity to match the original SVG-based collaborator indicators", but the code on line 210 sets ctx.globalAlpha = 0.7. The SVG-based CollaboratorShapeIndicator in LiveCollaborators.tsx uses opacity={0.5}. This mismatch causes collaborator selection indicators to appear at different opacities depending on whether the shape uses canvas-based or legacy SVG-based rendering.
1 participant
After the 2D canvas indicator rendering change (#7708), collaborator shape indicators were no longer being rendered. This was because
CanvasShapeIndicatorsonly rendered the current user's selected shapes, while collaborator indicators went through the SVG-basedCollaboratorShapeIndicatorwhich now returns null for canvas-enabled shapes.This PR fixes the issue by:
CanvasShapeIndicatorswith per-collaborator colors and 0.5 opacitycollaboratorState.tsto avoid duplicationLiveCollaboratorsto only render SVG indicators for shapes that use legacy indicators (for backwards compatibility with custom shapes)Relates to #7437
Change type
bugfixTest plan
Release notes
Note
Restores collaborator selection indicators after moving shape indicators to the canvas renderer.
CanvasShapeIndicatorswith per-collaborator color and 0.7 opacity, drawn beneath local indicatorsuseActivePeerIds$inusePeerIdsto track which collaborators should be shown based on timed activity transitionsutils/collaboratorState.ts(getCollaboratorStateFromElapsedTime,shouldShowCollaborator)LiveCollaboratorsto useshouldShowCollaboratorand only render SVG indicators for shapes using legacy indicators (canvas handles the rest)Written by Cursor Bugbot for commit ce0f1f9. This will update automatically on new commits. Configure here.