@@ -114,6 +127,10 @@ SpriteSelectorItem.propTypes = {
onMouseEnter: PropTypes.func,
onMouseLeave: PropTypes.func,
preventContextMenu: PropTypes.bool,
+ presenceUsers: PropTypes.arrayOf(PropTypes.shape({
+ color: PropTypes.string,
+ username: PropTypes.string
+ })),
selected: PropTypes.bool.isRequired
};
diff --git a/src/components/sprite-selector/sprite-list.jsx b/src/components/sprite-selector/sprite-list.jsx
index fe2854a3d..490b86503 100644
--- a/src/components/sprite-selector/sprite-list.jsx
+++ b/src/components/sprite-selector/sprite-list.jsx
@@ -28,6 +28,7 @@ const SpriteList = function (props) {
onAddSortable,
onRemoveSortable,
ordering,
+ presenceUsers,
raised,
selectedId,
items
@@ -89,6 +90,7 @@ const SpriteList = function (props) {
index={index}
key={sprite.id}
name={sprite.name}
+ presenceUsers={presenceUsers ? presenceUsers[sprite.id] : null}
selected={sprite.id === selectedId}
onClick={onSelectSprite}
onDeleteButtonClick={onDeleteSprite}
@@ -125,6 +127,10 @@ SpriteList.propTypes = {
order: PropTypes.number.isRequired
})),
onAddSortable: PropTypes.func,
+ presenceUsers: PropTypes.objectOf(PropTypes.arrayOf(PropTypes.shape({
+ color: PropTypes.string,
+ username: PropTypes.string
+ }))),
onDeleteSprite: PropTypes.func,
onDuplicateSprite: PropTypes.func,
onExportSprite: PropTypes.func,
diff --git a/src/components/sprite-selector/sprite-selector.jsx b/src/components/sprite-selector/sprite-selector.jsx
index 9ae811d5b..302ae245c 100644
--- a/src/components/sprite-selector/sprite-selector.jsx
+++ b/src/components/sprite-selector/sprite-selector.jsx
@@ -62,6 +62,7 @@ const SpriteSelectorComponent = function (props) {
onSelectSprite,
onSpriteUpload,
onSurpriseSpriteClick,
+ presenceUsers,
raised,
selectedId,
spriteFileInput,
@@ -104,6 +105,7 @@ const SpriteSelectorComponent = function (props) {
editingTarget={editingTarget}
hoveredTarget={hoveredTarget}
items={Object.keys(sprites).map(id => sprites[id])}
+ presenceUsers={presenceUsers}
raised={raised}
selectedId={selectedId}
onDeleteSprite={onDeleteSprite}
@@ -170,6 +172,10 @@ SpriteSelectorComponent.propTypes = {
onSelectSprite: PropTypes.func,
onSpriteUpload: PropTypes.func,
onSurpriseSpriteClick: PropTypes.func,
+ presenceUsers: PropTypes.objectOf(PropTypes.arrayOf(PropTypes.shape({
+ color: PropTypes.string,
+ username: PropTypes.string
+ }))),
raised: PropTypes.bool,
selectedId: PropTypes.string,
spriteFileInput: PropTypes.func,
diff --git a/src/components/stage/stage.jsx b/src/components/stage/stage.jsx
index 1bdcd2760..87340b84a 100644
--- a/src/components/stage/stage.jsx
+++ b/src/components/stage/stage.jsx
@@ -27,6 +27,7 @@ const StageComponent = props => {
isRtl,
colorInfo,
micIndicator,
+ presenceCursors,
question,
stageSize,
vm,
@@ -94,6 +95,7 @@ const StageComponent = props => {
stageWidth={stageDimensions.width}
/>
+ {presenceCursors || null}
{isColorPicking && colorInfo ? (
) : null}
diff --git a/src/components/target-pane/target-pane.jsx b/src/components/target-pane/target-pane.jsx
index 68fb7f58d..da671467d 100644
--- a/src/components/target-pane/target-pane.jsx
+++ b/src/components/target-pane/target-pane.jsx
@@ -40,6 +40,7 @@ const TargetPane = ({
onSelectSprite,
onSpriteUpload,
onSurpriseSpriteClick,
+ presenceUsers,
raiseSprites,
stage,
stageSize,
@@ -55,6 +56,7 @@ const TargetPane = ({
{
@@ -794,7 +878,15 @@ class Blocks extends React.Component {
componentRef={this.setBlocks}
onDrop={this.handleDrop}
{...props}
- />
+ >
+
+
{this.state.prompt ? (
= 0 && y >= 0 && x <= rect.width && y <= rect.height;
+ const current = session.presence.local.cursor;
+ if (inside) {
+ session.presence.update({
+ cursor: {
+ surface: 'stage',
+ x: x / rect.width,
+ y: y / rect.height
+ }
+ });
+ } else if (current && current.surface === 'stage') {
+ session.presence.update({cursor: null});
+ }
+ }
+ onMouseLeave () {
+ const session = this.props.vm.dashCollaboration;
+ if (!session || !session.presence) return;
+ const current = session.presence.local.cursor;
+ if (current && current.surface === 'stage') {
+ session.presence.update({cursor: null});
+ }
+ }
onMouseUp (e) {
const {x, y} = getEventXY(e);
const mousePosition = [x - this.rect.left, y - this.rect.top];
@@ -460,6 +492,10 @@ class Stage extends React.Component {
overlay={this.props.vm.runtime.renderer.overlayContainer}
colorInfo={this.state.colorInfo}
dragRef={this.setDragCanvas}
+ presenceCursors={}
question={this.state.question}
onDoubleClick={this.handleDoubleClick}
onQuestionAnswered={this.handleQuestionAnswered}
diff --git a/src/containers/target-pane.jsx b/src/containers/target-pane.jsx
index 255ac4733..29ad91991 100644
--- a/src/containers/target-pane.jsx
+++ b/src/containers/target-pane.jsx
@@ -23,6 +23,7 @@ import {fetchSprite, fetchCode} from '../lib/backpack-api';
import randomizeSpritePosition from '../lib/randomize-sprite-position';
import downloadBlob from '../lib/download-blob';
import log from '../lib/log';
+import {listenPresence} from '../lib/dash-presence.js';
import {placeInViewport} from '../lib/backpack/code-payload.js';
class TargetPane extends React.Component {
@@ -48,14 +49,45 @@ class TargetPane extends React.Component {
'handlePaintSpriteClick',
'handleFileUploadClick',
'handleSpriteUpload',
+ 'handlePresenceChange',
'setFileInput'
]);
}
componentDidMount () {
this.props.vm.addListener('BLOCK_DRAG_END', this.handleBlockDragEnd);
+ this.detachPresence = listenPresence(this.props.vm, this.handlePresenceChange);
+ this.publishPresenceSelection();
+ }
+ componentDidUpdate (prevProps) {
+ if (prevProps.editingTarget !== this.props.editingTarget) {
+ this.publishPresenceSelection();
+ }
}
componentWillUnmount () {
this.props.vm.removeListener('BLOCK_DRAG_END', this.handleBlockDragEnd);
+ if (this.detachPresence) this.detachPresence();
+ }
+ handlePresenceChange () {
+ this.forceUpdate();
+ }
+ publishPresenceSelection () {
+ const session = this.props.vm.dashCollaboration;
+ if (session && session.presence) {
+ session.presence.update({targetId: this.props.editingTarget || null});
+ }
+ }
+ getPresenceUsersByTarget () {
+ const session = this.props.vm.dashCollaboration;
+ const presence = session && session.presence;
+ const byTarget = {};
+ if (!presence) return byTarget;
+ for (const peer of presence.getPeers()) {
+ const targetId = peer.state.targetId;
+ if (!targetId) continue;
+ if (!byTarget[targetId]) byTarget[targetId] = [];
+ byTarget[targetId].push({color: peer.color, username: peer.username});
+ }
+ return byTarget;
}
handleChangeSpriteDirection (direction) {
if (!this.props.vm.canEditCollaboration()) return;
@@ -254,6 +286,7 @@ class TargetPane extends React.Component {
{
+ let chat = null;
+ let unsubscribe = null;
+ const attach = () => {
+ const next = (vm.dashCollaboration && vm.dashCollaboration.chat) || null;
+ if (next === chat) return;
+ if (unsubscribe) {
+ unsubscribe();
+ unsubscribe = null;
+ }
+ chat = next;
+ if (chat) unsubscribe = chat.subscribe(onChange);
+ onChange();
+ };
+ const onStatus = () => attach();
+ vm.on('DASH_COLLABORATION_STATUS', onStatus);
+ attach();
+ return () => {
+ vm.removeListener('DASH_COLLABORATION_STATUS', onStatus);
+ if (unsubscribe) unsubscribe();
+ };
+};
+
+class DashChat {
+ constructor () {
+ this.messages = [];
+ this.listeners = new Set();
+ this.unread = 0;
+ this.lastMention = null;
+ this.selfUserId = null;
+ this.selfUsername = null;
+ this.send = null;
+ this.notifyTimer = null;
+ }
+ /**
+ * Wire this chat to a collaboration client.
+ * @param {DashCollaboration} client active collaboration transport
+ */
+ bind (client) {
+ this.send = message => client.sendChat(message);
+ client.onChat = message => this.receive(message);
+ client.onChatHistory = messages => this.setHistory(messages);
+ }
+ setSelf (userId, username) {
+ this.selfUserId = userId || null;
+ this.selfUsername = username || null;
+ }
+ setHistory (messages) {
+ const history = messages
+ .filter(message => message && typeof message === 'object' &&
+ typeof message.id === 'string' && typeof message.text === 'string' &&
+ message.text.length <= MAX_TEXT && Number.isFinite(message.ts))
+ .slice(-MAX_MESSAGES);
+ this.messages = history;
+ this.scheduleNotify();
+ }
+ receive (message) {
+ if (!message || typeof message !== 'object') return;
+ if (this.messages.some(existing => existing.id === message.id)) return;
+ this.messages = [...this.messages, message].slice(-MAX_MESSAGES);
+ const fromSelf = message.userId === this.selfUserId;
+ if (!fromSelf && this.selfUsername &&
+ typeof message.text === 'string' &&
+ message.text.toLowerCase().includes(`@${this.selfUsername.toLowerCase()}`)) {
+ this.unread++;
+ this.lastMention = message;
+ }
+ this.scheduleNotify();
+ }
+ /**
+ * Send a chat message from the local user.
+ * @param {string} text message text (1-500 characters, may contain emoji)
+ * @param {?object} pin optional pin context {type, targetId, blockId, name}
+ * @returns {boolean} whether the message was handed to the transport
+ */
+ sendText (text, pin = null) {
+ const value = typeof text === 'string' ? text : '';
+ if (!value.trim().length || value.length > MAX_TEXT) return false;
+ if (!this.send) return false;
+ this.send({text: value, pin});
+ return true;
+ }
+ markRead () {
+ if (!this.unread && !this.lastMention) return;
+ this.unread = 0;
+ this.lastMention = null;
+ this.scheduleNotify();
+ }
+ subscribe (listener) {
+ this.listeners.add(listener);
+ return () => this.listeners.delete(listener);
+ }
+ scheduleNotify () {
+ if (this.notifyTimer) return;
+ this.notifyTimer = setTimeout(() => {
+ this.notifyTimer = null;
+ for (const listener of [...this.listeners]) listener();
+ }, 30);
+ }
+ destroy () {
+ clearTimeout(this.notifyTimer);
+ this.listeners.clear();
+ this.messages = [];
+ }
+}
+
+export {DashChat as default, listenDashChat, MAX_TEXT};
diff --git a/src/lib/dash-collaboration-session.js b/src/lib/dash-collaboration-session.js
index 09a7e5d52..044b5522e 100644
--- a/src/lib/dash-collaboration-session.js
+++ b/src/lib/dash-collaboration-session.js
@@ -2,6 +2,8 @@ import * as Y from 'yjs';
import JSZip from 'jszip';
import AddonHooks from '../addons/hooks';
import DashCollaboration from './dash-collaboration';
+import DashPresence from './dash-presence';
+import DashChat from './dash-chat';
const maps = ['blocks', 'variables', 'lists', 'broadcasts', 'comments'];
const blockStructureFields = ['opcode', 'next', 'parent', 'inputs', 'shadow', 'mutation'];
@@ -230,6 +232,8 @@ export default class DashCollaborationSession {
this.uploadedAssets = new Set();
this.extensionReferences = new Map();
this.extensionSources = new Map();
+ this.presence = new DashPresence();
+ this.chat = new DashChat();
this.installOperationTracking();
this.onLocalChange = () => {
if (this.applying || !this.loaded || this.disposed) return;
@@ -257,6 +261,7 @@ export default class DashCollaborationSession {
this.state = status.state;
this.error = status.error;
if (status.state === 'connected') {
+ this.presence.setSelf(client.connectionId, client.userId);
if (this.resolveReady) this.resolveReady();
if (this.restoreOnReconnect) {
this.restoreAfterReconnect().catch(error => this.fail(error));
@@ -271,10 +276,16 @@ export default class DashCollaborationSession {
},
onMembers: members => {
this.members = members;
+ this.presence.setMembers(members);
+ const me = members.find(member => member.userId === client.userId &&
+ (!client.connectionId || member.connectionId === client.connectionId));
+ if (me) this.chat.setSelf(me.userId, me.username);
this.notify();
}
});
client.doc.on('update', this.onDocumentChange);
+ this.presence.bind(client);
+ this.chat.bind(client);
return client;
}
notify () {
@@ -732,6 +743,8 @@ export default class DashCollaborationSession {
}
this.client.doc.off('update', this.onDocumentChange);
this.client.destroy();
+ this.presence.destroy();
+ this.chat.destroy();
window.removeEventListener('beforeunload', this.beforeUnload);
}
}
diff --git a/src/lib/dash-collaboration.js b/src/lib/dash-collaboration.js
index e351b51c6..1c44cb6e5 100644
--- a/src/lib/dash-collaboration.js
+++ b/src/lib/dash-collaboration.js
@@ -29,12 +29,16 @@ const projectTargetAssets = target => {
};
export default class DashCollaboration {
- constructor (projectId, {onStatus = () => {}, onMembers = () => {}} = {}) {
+ constructor (projectId, {onStatus = () => {}, onMembers = () => {}, onPresence = () => {},
+ onChat = () => {}, onChatHistory = () => {}} = {}) {
if (!/^[1-9]\d{0,19}$/.test(String(projectId))) throw new Error('Invalid Dash project ID');
this.projectId = String(projectId);
this.doc = new Y.Doc();
this.onStatus = onStatus;
this.onMembers = onMembers;
+ this.onPresence = onPresence;
+ this.onChat = onChat;
+ this.onChatHistory = onChatHistory;
this.active = false;
this.generation = 0;
this.attempts = 0;
@@ -44,6 +48,8 @@ export default class DashCollaboration {
this.epoch = null;
this.grantId = null;
this.userId = null;
+ this.connectionId = null;
+ this.features = new Set();
this.pending = null;
this.queued = null;
this.handleUpdate = this.handleUpdate.bind(this);
@@ -90,7 +96,7 @@ export default class DashCollaboration {
}, 10000);
ws.onopen = () => {
if (!this.active || generation !== this.generation) return ws.close();
- ws.send(JSON.stringify({type: 'auth', token: data.token}));
+ ws.send(JSON.stringify({type: 'auth', token: data.token, features: ['presence', 'chat']}));
};
ws.onmessage = event => {
if (!this.active || generation !== this.generation) return;
@@ -140,6 +146,9 @@ export default class DashCollaboration {
throw new Error('Room or permissions changed. Reopen the project before reconnecting.');
}
this.userId = message.userId;
+ this.connectionId = typeof message.connectionId === 'string' ? message.connectionId : null;
+ this.features = new Set(Array.isArray(message.features) ?
+ message.features.filter(feature => feature === 'presence' || feature === 'chat') : []);
this.epoch = message.epoch;
this.grantId = message.grantId;
this.role = message.role;
@@ -160,6 +169,24 @@ export default class DashCollaboration {
}
} else if (message.type === 'members') {
this.onMembers(message.members);
+ } else if (message.type === 'presence') {
+ if (!message || typeof message.state !== 'object' || message.state === null ||
+ Array.isArray(message.state) ||
+ (typeof message.connectionId !== 'string' && typeof message.userId !== 'string')) {
+ return;
+ }
+ this.onPresence(message);
+ } else if (message.type === 'chat') {
+ if (!message.message || typeof message.message !== 'object' ||
+ typeof message.message.id !== 'string' || typeof message.message.userId !== 'string' ||
+ typeof message.message.username !== 'string' || typeof message.message.text !== 'string' ||
+ !Number.isFinite(message.message.ts)) {
+ return;
+ }
+ this.onChat(message.message);
+ } else if (message.type === 'chat-history') {
+ if (!Array.isArray(message.messages)) return;
+ this.onChatHistory(message.messages.slice(-200));
} else {
throw new Error('Unknown collaboration message');
}
@@ -176,6 +203,36 @@ export default class DashCollaboration {
}
return btoa(binary);
}
+ /**
+ * Broadcast ephemeral presence state (cursor, selection) to other
+ * participants. Best-effort: never queued, never persisted, allowed for
+ * viewers. Dropped silently when the connection is busy or closed.
+ * @param {object} state small JSON-serializable presence payload
+ */
+ sendPresence (state) {
+ if (!this.active || this.state !== 'connected' || !this.features.has('presence') || !this.socket ||
+ this.socket.readyState !== WebSocket.OPEN) return;
+ if (this.socket.bufferedAmount > 64 * 1024) return;
+ try {
+ this.socket.send(JSON.stringify({type: 'presence', state}));
+ } catch (error) {
+ // Presence is optional; ignore transport errors.
+ }
+ }
+ /**
+ * Send a chat message to the collaboration room. Delivered to all
+ * participants (including viewers) and kept as room history on the server.
+ * @param {{text: string, pin: ?object}} message chat message body
+ */
+ sendChat (message) {
+ if (!this.active || this.state !== 'connected' || !this.features.has('chat') || !this.socket ||
+ this.socket.readyState !== WebSocket.OPEN) return;
+ try {
+ this.socket.send(JSON.stringify({type: 'chat', text: message.text, pin: message.pin || null}));
+ } catch (error) {
+ // Chat is optional; ignore transport errors.
+ }
+ }
change (operation) {
if (this.state !== 'connected' || this.role === 'viewer') throw new Error('Collaboration is not writable');
this.doc.transact(() => operation(this.doc));
@@ -295,6 +352,7 @@ export default class DashCollaboration {
if (this.controller) this.controller.abort();
if (this.socket) this.socket.close();
this.socket = null;
+ this.features = new Set();
this.onMembers([]);
this.setStatus('disconnected');
}
diff --git a/src/lib/dash-presence.js b/src/lib/dash-presence.js
new file mode 100644
index 000000000..172afb094
--- /dev/null
+++ b/src/lib/dash-presence.js
@@ -0,0 +1,187 @@
+/**
+ * Ephemeral presence state for Dash live-collaboration sessions.
+ * Tracks where each participant's cursor is (stage / blocks workspace), which
+ * sprite they have open, and which block they are dragging. State is relayed
+ * over the collaboration WebSocket as best-effort "presence" messages (never
+ * written to the persistent Yjs document), so viewers can share presence too.
+ */
+
+const PEER_TTL = 12000;
+const SEND_INTERVAL = 80;
+const NOTIFY_INTERVAL = 50;
+
+/**
+ * Stable per-user color so cursors and avatars keep the same color over time.
+ * @param {string} idString user id, connection id or similar stable identifier
+ * @returns {string} CSS color
+ */
+const presenceColor = idString => {
+ let hash = 0;
+ const value = String(idString);
+ for (let i = 0; i < value.length; i++) {
+ hash = ((hash << 5) - hash + value.charCodeAt(i)) | 0;
+ }
+ return `hsl(${Math.abs(hash) % 360}, 72%, 50%)`;
+};
+
+const sameValue = (a, b) => JSON.stringify(a) === JSON.stringify(b);
+
+/**
+ * Subscribe a component to presence/session changes of a VM.
+ * Re-attaches automatically when a collaboration session starts or ends.
+ * @param {VirtualMachine} vm the VM owning the collaboration session
+ * @param {function} onChange called when presence data may have changed
+ * @returns {function} detach listener
+ */
+const listenPresence = (vm, onChange) => {
+ let presence = null;
+ let unsubscribe = null;
+ const attach = () => {
+ const next = (vm.dashCollaboration && vm.dashCollaboration.presence) || null;
+ if (next === presence) return;
+ if (unsubscribe) {
+ unsubscribe();
+ unsubscribe = null;
+ }
+ presence = next;
+ if (presence) unsubscribe = presence.subscribe(onChange);
+ onChange();
+ };
+ const onStatus = () => attach();
+ vm.on('DASH_COLLABORATION_STATUS', onStatus);
+ attach();
+ return () => {
+ vm.removeListener('DASH_COLLABORATION_STATUS', onStatus);
+ if (unsubscribe) unsubscribe();
+ };
+};
+
+class DashPresence {
+ constructor () {
+ this.peers = new Map();
+ this.listeners = new Set();
+ this.local = {
+ cursor: null,
+ targetId: null,
+ dragging: null
+ };
+ this.members = [];
+ this.selfId = null;
+ this.selfUserId = null;
+ this.send = null;
+ this.sendTimer = null;
+ this.notifyTimer = null;
+ this.pruneTimer = setInterval(() => this.prune(), 3000);
+ }
+ /**
+ * Wire this presence channel to a collaboration client.
+ * @param {DashCollaboration} client active collaboration transport
+ */
+ bind (client) {
+ this.send = state => client.sendPresence(state);
+ client.onPresence = message => this.receive(message);
+ }
+ setSelf (connectionId, userId) {
+ this.selfId = connectionId || userId || null;
+ this.selfUserId = userId || null;
+ }
+ setMembers (members) {
+ this.members = Array.isArray(members) ? members : [];
+ let changed = false;
+ for (const [key, peer] of [...this.peers]) {
+ const alive = this.members.some(member => (member.connectionId || member.userId) === key);
+ if (!alive) {
+ this.peers.delete(key);
+ changed = true;
+ }
+ }
+ if (changed) this.scheduleNotify();
+ }
+ /**
+ * Publish a patch of the local presence state.
+ * @param {{cursor: ?object, targetId: ?string, dragging: ?string}} patch partial local state
+ */
+ update (patch) {
+ let changed = false;
+ for (const key of Object.keys(patch)) {
+ if (!sameValue(this.local[key], patch[key])) {
+ this.local[key] = patch[key];
+ changed = true;
+ }
+ }
+ if (!changed) return;
+ this.scheduleSend();
+ this.scheduleNotify();
+ }
+ scheduleSend () {
+ if (this.sendTimer) return;
+ this.sendTimer = setTimeout(() => {
+ this.sendTimer = null;
+ if (this.send) this.send({...this.local});
+ }, SEND_INTERVAL);
+ }
+ receive (message) {
+ if (!message || typeof message !== 'object') return;
+ const key = message.connectionId || message.userId;
+ if (typeof key !== 'string' || !key) return;
+ if (key === this.selfId) return;
+ if (!this.selfId && this.selfUserId && message.userId === this.selfUserId) return;
+ const state = message.state && typeof message.state === 'object' && !Array.isArray(message.state) ?
+ message.state : {};
+ this.peers.set(key, {
+ id: key,
+ userId: typeof message.userId === 'string' ? message.userId : '',
+ username: typeof message.username === 'string' && message.username ? message.username : '...',
+ color: presenceColor(key),
+ state,
+ seen: Date.now()
+ });
+ this.scheduleNotify();
+ }
+ prune () {
+ const now = Date.now();
+ let changed = false;
+ for (const [key, peer] of [...this.peers]) {
+ if (now - peer.seen > PEER_TTL) {
+ this.peers.delete(key);
+ changed = true;
+ }
+ }
+ if (changed) this.scheduleNotify();
+ }
+ getPeers () {
+ return [...this.peers.values()];
+ }
+ getMembers () {
+ return this.members;
+ }
+ subscribe (listener) {
+ this.listeners.add(listener);
+ return () => this.listeners.delete(listener);
+ }
+ scheduleNotify () {
+ if (this.notifyTimer) return;
+ this.notifyTimer = setTimeout(() => {
+ this.notifyTimer = null;
+ for (const listener of [...this.listeners]) listener();
+ }, NOTIFY_INTERVAL);
+ }
+ reset () {
+ this.peers.clear();
+ this.local = {
+ cursor: null,
+ targetId: null,
+ dragging: null
+ };
+ this.scheduleNotify();
+ }
+ destroy () {
+ clearInterval(this.pruneTimer);
+ clearTimeout(this.sendTimer);
+ clearTimeout(this.notifyTimer);
+ this.listeners.clear();
+ this.peers.clear();
+ }
+}
+
+export {DashPresence as default, presenceColor, listenPresence};