Виджеты
PresenceLayer
Курсоры соучастников поверх поверхности через поток событий.
Курсоры соучастников поверх поверхности — как в Figma и мультиплеере. Питается тем же потоком событий, что и useEventStream.
Установка
npx @toimetdev/pathlogs-ui add presence-layerПример
Общая поверхность
Айгерим
Данияр
Ольга
<div className="relative">
<Board />
<PresenceLayer events={presenceEvents} selfId={me.id} />
</div>Три курсора ходят по кругу — поток «доигрывается» по кадрам, чтобы показать сглаживание.
Пропсы
| Проп | Тип | По умолчанию | Описание |
|---|---|---|---|
events* | PresenceEvent[] | — | Поток событий присутствия: actorId, name, cursor, selection, at. |
selfId | string | — | Свой актор — его курсор не рисуется. |
ttlMs | number | 15000 | Через сколько молчания убирать курсор. |
smoothing | number | 0.2 | Плавность догона (0..1): меньше — плавнее и медленнее. |
children | ReactNode | — | Поверхность под слоем. |
events*PresenceEvent[]Поток событий присутствия: actorId, name, cursor, selection, at.
selfIdstringСвой актор — его курсор не рисуется.
ttlMsnumberпо умолчанию: 15000
Через сколько молчания убирать курсор.
smoothingnumberпо умолчанию: 0.2
Плавность догона (0..1): меньше — плавнее и медленнее.
childrenReactNodeПоверхность под слоем.
Сглаживание и устаревание
Состояние отдельно
import {
applyPresence, // внести событие (устаревшие игнорируются)
interpolate, // подвинуть курсоры к целям на один кадр
pruneStale, // убрать давно молчавших
colorFor, // устойчивый цвет по id
} from "@/components/ui/presence-layer/presence";