feat(annotations): comments, threads, voting system with review mode
Backend: - comment_threads + comments + object_votes tables with indexes - Thread/comment CRUD endpoints with socket broadcast - Vote toggle endpoint with socket broadcast Frontend: - AnnotationStore for reactive thread/comment/vote state - FeedbackPanel with thread list, expanded view, replies, filtering - Vote toggle buttons in panel - PinOverlay for canvas pin markers + vote badges - Review Mode toggle in toolbar (comment bubble icon) - Jump-to-object from thread view - Orphaned thread detection for deleted objects - New comment creation from panel when object selected - Socket event wiring for real-time sync
This commit is contained in:
Hiren Kangad
+180
@@ -115,6 +115,53 @@ db.exec(`
|
||||
CREATE INDEX IF NOT EXISTS idx_media_jobs_image ON media_jobs(image_id);
|
||||
`);
|
||||
|
||||
// ── Comment Threads & Comments ──
|
||||
db.exec(`
|
||||
CREATE TABLE IF NOT EXISTS comment_threads (
|
||||
id TEXT PRIMARY KEY,
|
||||
board_id TEXT NOT NULL REFERENCES boards(id) ON DELETE CASCADE,
|
||||
object_id TEXT NOT NULL,
|
||||
anchor_type TEXT NOT NULL DEFAULT 'object',
|
||||
pin_x REAL,
|
||||
pin_y REAL,
|
||||
status TEXT NOT NULL DEFAULT 'open',
|
||||
resolved_by TEXT REFERENCES users(id),
|
||||
resolved_at TEXT,
|
||||
comment_count INTEGER NOT NULL DEFAULT 1,
|
||||
last_commented_at TEXT,
|
||||
last_commented_by TEXT,
|
||||
created_by TEXT NOT NULL REFERENCES users(id),
|
||||
created_at TEXT NOT NULL DEFAULT (datetime('now')),
|
||||
updated_at TEXT NOT NULL DEFAULT (datetime('now'))
|
||||
);
|
||||
CREATE INDEX IF NOT EXISTS idx_threads_board ON comment_threads(board_id);
|
||||
CREATE INDEX IF NOT EXISTS idx_threads_object ON comment_threads(board_id, object_id);
|
||||
|
||||
CREATE TABLE IF NOT EXISTS comments (
|
||||
id TEXT PRIMARY KEY,
|
||||
thread_id TEXT NOT NULL REFERENCES comment_threads(id) ON DELETE CASCADE,
|
||||
user_id TEXT NOT NULL REFERENCES users(id),
|
||||
author_name TEXT NOT NULL,
|
||||
author_color TEXT,
|
||||
content TEXT NOT NULL,
|
||||
edited_at TEXT,
|
||||
created_at TEXT NOT NULL DEFAULT (datetime('now'))
|
||||
);
|
||||
CREATE INDEX IF NOT EXISTS idx_comments_thread ON comments(thread_id);
|
||||
`);
|
||||
|
||||
// ── Object Votes ──
|
||||
db.exec(`
|
||||
CREATE TABLE IF NOT EXISTS object_votes (
|
||||
board_id TEXT NOT NULL REFERENCES boards(id) ON DELETE CASCADE,
|
||||
object_id TEXT NOT NULL,
|
||||
user_id TEXT NOT NULL REFERENCES users(id),
|
||||
created_at TEXT NOT NULL DEFAULT (datetime('now')),
|
||||
PRIMARY KEY (board_id, object_id, user_id)
|
||||
);
|
||||
CREATE INDEX IF NOT EXISTS idx_votes_object ON object_votes(board_id, object_id);
|
||||
`);
|
||||
|
||||
// Migrations — add columns to existing tables
|
||||
try {
|
||||
db.prepare("SELECT thumbnail FROM boards LIMIT 0").get();
|
||||
@@ -480,6 +527,132 @@ function updateImageMedia(imageId, { posterAssetKey, duration, nativeWidth, nati
|
||||
`).run(posterAssetKey || null, duration || null, nativeWidth || null, nativeHeight || null, imageId);
|
||||
}
|
||||
|
||||
// ---------------------
|
||||
// Vote helpers
|
||||
// ---------------------
|
||||
function getVotesByBoard(boardId) {
|
||||
return db.prepare('SELECT * FROM object_votes WHERE board_id = ?').all(boardId);
|
||||
}
|
||||
|
||||
function toggleVote(boardId, objectId, userId) {
|
||||
const existing = db.prepare(
|
||||
'SELECT 1 FROM object_votes WHERE board_id = ? AND object_id = ? AND user_id = ?'
|
||||
).get(boardId, objectId, userId);
|
||||
|
||||
if (existing) {
|
||||
db.prepare('DELETE FROM object_votes WHERE board_id = ? AND object_id = ? AND user_id = ?')
|
||||
.run(boardId, objectId, userId);
|
||||
return false; // vote removed
|
||||
} else {
|
||||
db.prepare('INSERT INTO object_votes (board_id, object_id, user_id) VALUES (?, ?, ?)')
|
||||
.run(boardId, objectId, userId);
|
||||
return true; // vote added
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------
|
||||
// Thread helpers
|
||||
// ---------------------
|
||||
function getThreadsByBoard(boardId) {
|
||||
return db.prepare(`
|
||||
SELECT t.*, u.display_name AS author_name
|
||||
FROM comment_threads t
|
||||
LEFT JOIN users u ON u.id = t.created_by
|
||||
WHERE t.board_id = ?
|
||||
ORDER BY t.created_at ASC
|
||||
`).all(boardId);
|
||||
}
|
||||
|
||||
function getThread(threadId) {
|
||||
return db.prepare('SELECT * FROM comment_threads WHERE id = ?').get(threadId);
|
||||
}
|
||||
|
||||
function createThread({ id, boardId, objectId, anchorType, pinX, pinY, createdBy }) {
|
||||
db.prepare(`
|
||||
INSERT INTO comment_threads (id, board_id, object_id, anchor_type, pin_x, pin_y, created_by, last_commented_at, last_commented_by)
|
||||
VALUES (?, ?, ?, ?, ?, ?, ?, datetime('now'), ?)
|
||||
`).run(id, boardId, objectId, anchorType, pinX ?? null, pinY ?? null, createdBy, createdBy);
|
||||
return getThread(id);
|
||||
}
|
||||
|
||||
function updateThreadStatus(threadId, status, resolvedBy) {
|
||||
if (status === 'resolved') {
|
||||
db.prepare(`
|
||||
UPDATE comment_threads SET status = ?, resolved_by = ?, resolved_at = datetime('now'), updated_at = datetime('now')
|
||||
WHERE id = ?
|
||||
`).run(status, resolvedBy, threadId);
|
||||
} else {
|
||||
db.prepare(`
|
||||
UPDATE comment_threads SET status = ?, resolved_by = NULL, resolved_at = NULL, updated_at = datetime('now')
|
||||
WHERE id = ?
|
||||
`).run(status, threadId);
|
||||
}
|
||||
return getThread(threadId);
|
||||
}
|
||||
|
||||
function deleteThread(threadId) {
|
||||
db.prepare('DELETE FROM comment_threads WHERE id = ?').run(threadId);
|
||||
}
|
||||
|
||||
function incrementThreadCommentCount(threadId, userId) {
|
||||
db.prepare(`
|
||||
UPDATE comment_threads
|
||||
SET comment_count = comment_count + 1,
|
||||
last_commented_at = datetime('now'),
|
||||
last_commented_by = ?,
|
||||
updated_at = datetime('now')
|
||||
WHERE id = ?
|
||||
`).run(userId, threadId);
|
||||
}
|
||||
|
||||
function decrementThreadCommentCount(threadId) {
|
||||
db.prepare(`
|
||||
UPDATE comment_threads
|
||||
SET comment_count = MAX(0, comment_count - 1),
|
||||
updated_at = datetime('now')
|
||||
WHERE id = ?
|
||||
`).run(threadId);
|
||||
}
|
||||
|
||||
// ---------------------
|
||||
// Comment helpers
|
||||
// ---------------------
|
||||
function getCommentsByThread(threadId) {
|
||||
return db.prepare('SELECT * FROM comments WHERE thread_id = ? ORDER BY created_at ASC').all(threadId);
|
||||
}
|
||||
|
||||
function getCommentsByBoard(boardId) {
|
||||
return db.prepare(`
|
||||
SELECT c.* FROM comments c
|
||||
JOIN comment_threads t ON t.id = c.thread_id
|
||||
WHERE t.board_id = ?
|
||||
ORDER BY c.created_at ASC
|
||||
`).all(boardId);
|
||||
}
|
||||
|
||||
function getComment(commentId) {
|
||||
return db.prepare('SELECT * FROM comments WHERE id = ?').get(commentId);
|
||||
}
|
||||
|
||||
function createComment({ id, threadId, userId, authorName, authorColor, content }) {
|
||||
db.prepare(`
|
||||
INSERT INTO comments (id, thread_id, user_id, author_name, author_color, content)
|
||||
VALUES (?, ?, ?, ?, ?, ?)
|
||||
`).run(id, threadId, userId, authorName, authorColor ?? null, content);
|
||||
return getComment(id);
|
||||
}
|
||||
|
||||
function updateComment(commentId, content) {
|
||||
db.prepare(`
|
||||
UPDATE comments SET content = ?, edited_at = datetime('now') WHERE id = ?
|
||||
`).run(content, commentId);
|
||||
return getComment(commentId);
|
||||
}
|
||||
|
||||
function deleteComment(commentId) {
|
||||
db.prepare('DELETE FROM comments WHERE id = ?').run(commentId);
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
db,
|
||||
// Users
|
||||
@@ -499,4 +672,11 @@ module.exports = {
|
||||
getAllBoardChannelLinks, getImageByMmFileId,
|
||||
// Media Jobs
|
||||
createMediaJob, updateMediaJob, getMediaJob, getPendingMediaJobs, updateImageMedia,
|
||||
// Threads
|
||||
getThreadsByBoard, getThread, createThread, updateThreadStatus, deleteThread,
|
||||
incrementThreadCommentCount, decrementThreadCommentCount,
|
||||
// Comments
|
||||
getCommentsByThread, getCommentsByBoard, getComment, createComment, updateComment, deleteComment,
|
||||
// Votes
|
||||
getVotesByBoard, toggleVote,
|
||||
};
|
||||
|
||||
@@ -0,0 +1,314 @@
|
||||
const { Router } = require('express');
|
||||
const { v4: uuidv4 } = require('uuid');
|
||||
const { authMiddleware } = require('../auth');
|
||||
const {
|
||||
getBoard,
|
||||
getCollection,
|
||||
getCollectionMember,
|
||||
getThreadsByBoard,
|
||||
getThread,
|
||||
createThread,
|
||||
updateThreadStatus,
|
||||
deleteThread,
|
||||
getCommentsByBoard,
|
||||
getComment,
|
||||
createComment,
|
||||
updateComment,
|
||||
deleteComment,
|
||||
incrementThreadCommentCount,
|
||||
decrementThreadCommentCount,
|
||||
} = require('../db');
|
||||
|
||||
const router = Router();
|
||||
|
||||
router.use(authMiddleware);
|
||||
|
||||
function hasCollectionRole(member, minRole) {
|
||||
if (!member) return false;
|
||||
const hierarchy = { owner: 3, editor: 2, viewer: 1 };
|
||||
return (hierarchy[member.role] || 0) >= (hierarchy[minRole] || 0);
|
||||
}
|
||||
|
||||
function resolveBoard(req, res, minRole = 'viewer') {
|
||||
const board = getBoard(req.params.boardId);
|
||||
if (!board) { res.status(404).json({ error: 'Board not found' }); return null; }
|
||||
|
||||
const collection = getCollection(board.collection_id);
|
||||
if (!collection) { res.status(404).json({ error: 'Collection not found' }); return null; }
|
||||
|
||||
const member = getCollectionMember(board.collection_id, req.user.id);
|
||||
if (minRole === 'viewer' && collection.is_public) {
|
||||
return { board, collection, member: member || { role: 'viewer' } };
|
||||
}
|
||||
if (!hasCollectionRole(member, minRole)) {
|
||||
res.status(403).json({ error: `${minRole} access required` });
|
||||
return null;
|
||||
}
|
||||
return { board, collection, member };
|
||||
}
|
||||
|
||||
// GET /api/boards/:boardId/threads — all threads + comments for board
|
||||
router.get('/:boardId/threads', (req, res) => {
|
||||
try {
|
||||
const result = resolveBoard(req, res, 'viewer');
|
||||
if (!result) return;
|
||||
|
||||
const threads = getThreadsByBoard(req.params.boardId);
|
||||
const comments = getCommentsByBoard(req.params.boardId);
|
||||
|
||||
// Group comments by thread
|
||||
const commentsByThread = {};
|
||||
for (const c of comments) {
|
||||
if (!commentsByThread[c.thread_id]) commentsByThread[c.thread_id] = [];
|
||||
commentsByThread[c.thread_id].push(c);
|
||||
}
|
||||
|
||||
const data = threads.map((t) => ({
|
||||
...t,
|
||||
comments: commentsByThread[t.id] || [],
|
||||
}));
|
||||
|
||||
return res.json({ threads: data });
|
||||
} catch (err) {
|
||||
console.error('[threads] list error:', err);
|
||||
return res.status(500).json({ error: 'Internal server error' });
|
||||
}
|
||||
});
|
||||
|
||||
// POST /api/boards/:boardId/threads — create thread + first comment
|
||||
router.post('/:boardId/threads', (req, res) => {
|
||||
try {
|
||||
const result = resolveBoard(req, res, 'viewer');
|
||||
if (!result) return;
|
||||
|
||||
const { object_id, anchor_type, pin_x, pin_y, content } = req.body;
|
||||
if (!object_id || !content || !content.trim()) {
|
||||
return res.status(400).json({ error: 'object_id and content are required' });
|
||||
}
|
||||
|
||||
const threadId = uuidv4();
|
||||
const commentId = uuidv4();
|
||||
const userId = req.user.id;
|
||||
|
||||
const thread = createThread({
|
||||
id: threadId,
|
||||
boardId: req.params.boardId,
|
||||
objectId: object_id,
|
||||
anchorType: anchor_type || 'object',
|
||||
pinX: pin_x,
|
||||
pinY: pin_y,
|
||||
createdBy: userId,
|
||||
});
|
||||
|
||||
const comment = createComment({
|
||||
id: commentId,
|
||||
threadId,
|
||||
userId,
|
||||
authorName: req.user.display_name || req.user.username,
|
||||
authorColor: null,
|
||||
content: content.trim(),
|
||||
});
|
||||
|
||||
// Broadcast via socket
|
||||
const io = req.app.get('io');
|
||||
if (io) {
|
||||
io.to(`board:${req.params.boardId}`).emit('thread:add', {
|
||||
boardId: req.params.boardId,
|
||||
thread,
|
||||
comment,
|
||||
});
|
||||
}
|
||||
|
||||
return res.status(201).json({ thread, comment });
|
||||
} catch (err) {
|
||||
console.error('[threads] create error:', err);
|
||||
return res.status(500).json({ error: 'Internal server error' });
|
||||
}
|
||||
});
|
||||
|
||||
// PATCH /api/boards/:boardId/threads/:threadId — update thread status
|
||||
router.patch('/:boardId/threads/:threadId', (req, res) => {
|
||||
try {
|
||||
const result = resolveBoard(req, res, 'editor');
|
||||
if (!result) return;
|
||||
|
||||
const { status } = req.body;
|
||||
if (!['open', 'resolved', 'archived'].includes(status)) {
|
||||
return res.status(400).json({ error: 'Invalid status' });
|
||||
}
|
||||
|
||||
const thread = getThread(req.params.threadId);
|
||||
if (!thread || thread.board_id !== req.params.boardId) {
|
||||
return res.status(404).json({ error: 'Thread not found' });
|
||||
}
|
||||
|
||||
const updated = updateThreadStatus(req.params.threadId, status, req.user.id);
|
||||
|
||||
const io = req.app.get('io');
|
||||
if (io) {
|
||||
io.to(`board:${req.params.boardId}`).emit('thread:status', {
|
||||
boardId: req.params.boardId,
|
||||
threadId: req.params.threadId,
|
||||
status: updated.status,
|
||||
resolvedBy: updated.resolved_by,
|
||||
resolvedAt: updated.resolved_at,
|
||||
});
|
||||
}
|
||||
|
||||
return res.json({ thread: updated });
|
||||
} catch (err) {
|
||||
console.error('[threads] status error:', err);
|
||||
return res.status(500).json({ error: 'Internal server error' });
|
||||
}
|
||||
});
|
||||
|
||||
// DELETE /api/boards/:boardId/threads/:threadId — delete thread + all comments
|
||||
router.delete('/:boardId/threads/:threadId', (req, res) => {
|
||||
try {
|
||||
const result = resolveBoard(req, res, 'owner');
|
||||
if (!result) return;
|
||||
|
||||
const thread = getThread(req.params.threadId);
|
||||
if (!thread || thread.board_id !== req.params.boardId) {
|
||||
return res.status(404).json({ error: 'Thread not found' });
|
||||
}
|
||||
|
||||
deleteThread(req.params.threadId);
|
||||
|
||||
const io = req.app.get('io');
|
||||
if (io) {
|
||||
io.to(`board:${req.params.boardId}`).emit('thread:delete', {
|
||||
boardId: req.params.boardId,
|
||||
threadId: req.params.threadId,
|
||||
});
|
||||
}
|
||||
|
||||
return res.json({ message: 'Thread deleted' });
|
||||
} catch (err) {
|
||||
console.error('[threads] delete error:', err);
|
||||
return res.status(500).json({ error: 'Internal server error' });
|
||||
}
|
||||
});
|
||||
|
||||
// POST /api/boards/:boardId/threads/:threadId/comments — add reply
|
||||
router.post('/:boardId/threads/:threadId/comments', (req, res) => {
|
||||
try {
|
||||
const result = resolveBoard(req, res, 'viewer');
|
||||
if (!result) return;
|
||||
|
||||
const { content } = req.body;
|
||||
if (!content || !content.trim()) {
|
||||
return res.status(400).json({ error: 'content is required' });
|
||||
}
|
||||
|
||||
const thread = getThread(req.params.threadId);
|
||||
if (!thread || thread.board_id !== req.params.boardId) {
|
||||
return res.status(404).json({ error: 'Thread not found' });
|
||||
}
|
||||
|
||||
const commentId = uuidv4();
|
||||
const userId = req.user.id;
|
||||
|
||||
const comment = createComment({
|
||||
id: commentId,
|
||||
threadId: req.params.threadId,
|
||||
userId,
|
||||
authorName: req.user.display_name || req.user.username,
|
||||
authorColor: null,
|
||||
content: content.trim(),
|
||||
});
|
||||
|
||||
incrementThreadCommentCount(req.params.threadId, userId);
|
||||
|
||||
const io = req.app.get('io');
|
||||
if (io) {
|
||||
io.to(`board:${req.params.boardId}`).emit('comment:add', {
|
||||
boardId: req.params.boardId,
|
||||
threadId: req.params.threadId,
|
||||
comment,
|
||||
});
|
||||
}
|
||||
|
||||
return res.status(201).json({ comment });
|
||||
} catch (err) {
|
||||
console.error('[threads] add comment error:', err);
|
||||
return res.status(500).json({ error: 'Internal server error' });
|
||||
}
|
||||
});
|
||||
|
||||
// PUT /api/boards/:boardId/threads/:threadId/comments/:commentId — edit own comment
|
||||
router.put('/:boardId/threads/:threadId/comments/:commentId', (req, res) => {
|
||||
try {
|
||||
const result = resolveBoard(req, res, 'viewer');
|
||||
if (!result) return;
|
||||
|
||||
const { content } = req.body;
|
||||
if (!content || !content.trim()) {
|
||||
return res.status(400).json({ error: 'content is required' });
|
||||
}
|
||||
|
||||
const comment = getComment(req.params.commentId);
|
||||
if (!comment || comment.thread_id !== req.params.threadId) {
|
||||
return res.status(404).json({ error: 'Comment not found' });
|
||||
}
|
||||
if (comment.user_id !== req.user.id) {
|
||||
return res.status(403).json({ error: 'Can only edit own comments' });
|
||||
}
|
||||
|
||||
const updated = updateComment(req.params.commentId, content.trim());
|
||||
|
||||
const io = req.app.get('io');
|
||||
if (io) {
|
||||
io.to(`board:${req.params.boardId}`).emit('comment:update', {
|
||||
boardId: req.params.boardId,
|
||||
threadId: req.params.threadId,
|
||||
commentId: req.params.commentId,
|
||||
content: updated.content,
|
||||
editedAt: updated.edited_at,
|
||||
});
|
||||
}
|
||||
|
||||
return res.json({ comment: updated });
|
||||
} catch (err) {
|
||||
console.error('[threads] edit comment error:', err);
|
||||
return res.status(500).json({ error: 'Internal server error' });
|
||||
}
|
||||
});
|
||||
|
||||
// DELETE /api/boards/:boardId/threads/:threadId/comments/:commentId — delete own comment
|
||||
router.delete('/:boardId/threads/:threadId/comments/:commentId', (req, res) => {
|
||||
try {
|
||||
// Owner can delete any comment, others only their own
|
||||
const result = resolveBoard(req, res, 'viewer');
|
||||
if (!result) return;
|
||||
|
||||
const comment = getComment(req.params.commentId);
|
||||
if (!comment || comment.thread_id !== req.params.threadId) {
|
||||
return res.status(404).json({ error: 'Comment not found' });
|
||||
}
|
||||
|
||||
const isOwner = hasCollectionRole(result.member, 'owner');
|
||||
if (comment.user_id !== req.user.id && !isOwner) {
|
||||
return res.status(403).json({ error: 'Can only delete own comments' });
|
||||
}
|
||||
|
||||
deleteComment(req.params.commentId);
|
||||
decrementThreadCommentCount(req.params.threadId);
|
||||
|
||||
const io = req.app.get('io');
|
||||
if (io) {
|
||||
io.to(`board:${req.params.boardId}`).emit('comment:delete', {
|
||||
boardId: req.params.boardId,
|
||||
threadId: req.params.threadId,
|
||||
commentId: req.params.commentId,
|
||||
});
|
||||
}
|
||||
|
||||
return res.json({ message: 'Comment deleted' });
|
||||
} catch (err) {
|
||||
console.error('[threads] delete comment error:', err);
|
||||
return res.status(500).json({ error: 'Internal server error' });
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = router;
|
||||
@@ -0,0 +1,83 @@
|
||||
const { Router } = require('express');
|
||||
const { authMiddleware } = require('../auth');
|
||||
const {
|
||||
getBoard,
|
||||
getCollection,
|
||||
getCollectionMember,
|
||||
getVotesByBoard,
|
||||
toggleVote,
|
||||
} = require('../db');
|
||||
|
||||
const router = Router();
|
||||
|
||||
router.use(authMiddleware);
|
||||
|
||||
function hasCollectionRole(member, minRole) {
|
||||
if (!member) return false;
|
||||
const hierarchy = { owner: 3, editor: 2, viewer: 1 };
|
||||
return (hierarchy[member.role] || 0) >= (hierarchy[minRole] || 0);
|
||||
}
|
||||
|
||||
function resolveBoard(req, res, minRole = 'viewer') {
|
||||
const board = getBoard(req.params.boardId);
|
||||
if (!board) { res.status(404).json({ error: 'Board not found' }); return null; }
|
||||
|
||||
const collection = getCollection(board.collection_id);
|
||||
if (!collection) { res.status(404).json({ error: 'Collection not found' }); return null; }
|
||||
|
||||
const member = getCollectionMember(board.collection_id, req.user.id);
|
||||
if (minRole === 'viewer' && collection.is_public) {
|
||||
return { board, collection, member: member || { role: 'viewer' } };
|
||||
}
|
||||
if (!hasCollectionRole(member, minRole)) {
|
||||
res.status(403).json({ error: `${minRole} access required` });
|
||||
return null;
|
||||
}
|
||||
return { board, collection, member };
|
||||
}
|
||||
|
||||
// GET /api/boards/:boardId/votes — all votes for board
|
||||
router.get('/:boardId/votes', (req, res) => {
|
||||
try {
|
||||
const result = resolveBoard(req, res, 'viewer');
|
||||
if (!result) return;
|
||||
|
||||
const votes = getVotesByBoard(req.params.boardId);
|
||||
return res.json({ votes });
|
||||
} catch (err) {
|
||||
console.error('[votes] list error:', err);
|
||||
return res.status(500).json({ error: 'Internal server error' });
|
||||
}
|
||||
});
|
||||
|
||||
// POST /api/boards/:boardId/votes — toggle vote
|
||||
router.post('/:boardId/votes', (req, res) => {
|
||||
try {
|
||||
const result = resolveBoard(req, res, 'viewer');
|
||||
if (!result) return;
|
||||
|
||||
const { object_id } = req.body;
|
||||
if (!object_id) {
|
||||
return res.status(400).json({ error: 'object_id is required' });
|
||||
}
|
||||
|
||||
const active = toggleVote(req.params.boardId, object_id, req.user.id);
|
||||
|
||||
const io = req.app.get('io');
|
||||
if (io) {
|
||||
io.to(`board:${req.params.boardId}`).emit('vote:toggle', {
|
||||
boardId: req.params.boardId,
|
||||
objectId: object_id,
|
||||
userId: req.user.id,
|
||||
active,
|
||||
});
|
||||
}
|
||||
|
||||
return res.json({ active });
|
||||
} catch (err) {
|
||||
console.error('[votes] toggle error:', err);
|
||||
return res.status(500).json({ error: 'Internal server error' });
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = router;
|
||||
@@ -100,6 +100,8 @@ const boardRoutes = require('./routes/boards');
|
||||
const uploadRoutes = require('./routes/upload');
|
||||
const adminRoutes = require('./routes/admin');
|
||||
const mmBridgeRoutes = require('./routes/mattermost-bridge');
|
||||
const threadRoutes = require('./routes/threads');
|
||||
const voteRoutes = require('./routes/votes');
|
||||
|
||||
app.use('/api/auth', authRoutes);
|
||||
app.use('/api/collections', collectionRoutes);
|
||||
@@ -107,6 +109,8 @@ app.use('/api/boards', boardRoutes);
|
||||
app.use('/api/upload', uploadRoutes);
|
||||
app.use('/api/admin', adminRoutes);
|
||||
app.use('/api/boards', mmBridgeRoutes);
|
||||
app.use('/api/boards', threadRoutes);
|
||||
app.use('/api/boards', voteRoutes);
|
||||
|
||||
// Public shared collection route (no auth required)
|
||||
app.get('/api/c/:shareToken', (req, res) => {
|
||||
@@ -151,6 +155,7 @@ const server = http.createServer(app);
|
||||
|
||||
const { setupSocket } = require('./socket');
|
||||
const io = setupSocket(server);
|
||||
app.set('io', io);
|
||||
|
||||
// ---- Initialize services and start ----
|
||||
async function start() {
|
||||
|
||||
@@ -0,0 +1,133 @@
|
||||
import { Container, Graphics, Text, TextStyle } from 'pixi.js';
|
||||
import type { Viewport } from 'pixi-viewport';
|
||||
import type { AnnotationStore } from '../stores/annotationStore';
|
||||
import type { SceneManager } from './SceneManager';
|
||||
|
||||
const PIN_RADIUS = 10;
|
||||
const PIN_COLOR_OPEN = 0xee4444;
|
||||
const PIN_COLOR_RESOLVED = 0x666666;
|
||||
|
||||
export class PinOverlay extends Container {
|
||||
private _pins = new Map<string, Graphics>();
|
||||
private _voteBadges: Graphics[] = [];
|
||||
private _viewport: Viewport;
|
||||
private _scene: SceneManager;
|
||||
private _store: AnnotationStore;
|
||||
|
||||
constructor(viewport: Viewport, scene: SceneManager, store: AnnotationStore) {
|
||||
super();
|
||||
this._viewport = viewport;
|
||||
this._scene = scene;
|
||||
this._store = store;
|
||||
}
|
||||
|
||||
/** Call on every viewport moved/zoomed event and on store change */
|
||||
refresh(showResolved = false) {
|
||||
const scale = 1 / this._viewport.scale.x; // scale-independent size
|
||||
|
||||
// Remove old pins + badges
|
||||
for (const gfx of this._pins.values()) gfx.destroy();
|
||||
for (const gfx of this._voteBadges) gfx.destroy();
|
||||
this._pins.clear();
|
||||
this._voteBadges = [];
|
||||
this.removeChildren();
|
||||
|
||||
// ── Thread pins ──
|
||||
for (const thread of this._store.threads.values()) {
|
||||
if (thread.status === 'resolved' && !showResolved) continue;
|
||||
|
||||
const item = this._scene.items.get(thread.object_id);
|
||||
if (!item || !item.displayObject) continue;
|
||||
|
||||
const bounds = item.displayObject.getBounds();
|
||||
let wx: number, wy: number;
|
||||
|
||||
if (thread.anchor_type === 'point' && thread.pin_x != null && thread.pin_y != null) {
|
||||
wx = bounds.x + thread.pin_x * bounds.width;
|
||||
wy = bounds.y + thread.pin_y * bounds.height;
|
||||
} else {
|
||||
// Object-level: top-right corner
|
||||
wx = bounds.x + bounds.width;
|
||||
wy = bounds.y;
|
||||
}
|
||||
|
||||
const gfx = new Graphics();
|
||||
const r = PIN_RADIUS * scale;
|
||||
const color = thread.status === 'open' ? PIN_COLOR_OPEN : PIN_COLOR_RESOLVED;
|
||||
|
||||
gfx.circle(0, 0, r);
|
||||
gfx.fill({ color, alpha: 0.9 });
|
||||
gfx.stroke({ color: 0xffffff, width: 1.5 * scale, alpha: 0.8 });
|
||||
gfx.position.set(wx, wy);
|
||||
|
||||
// Count label
|
||||
if (thread.comment_count > 1) {
|
||||
const label = new Text({
|
||||
text: String(thread.comment_count),
|
||||
style: new TextStyle({
|
||||
fontSize: 9 * scale,
|
||||
fill: '#ffffff',
|
||||
fontWeight: 'bold',
|
||||
}),
|
||||
});
|
||||
label.anchor.set(0.5);
|
||||
gfx.addChild(label);
|
||||
}
|
||||
|
||||
gfx.eventMode = 'static';
|
||||
gfx.cursor = 'pointer';
|
||||
(gfx as any)._threadId = thread.id;
|
||||
|
||||
this._pins.set(thread.id, gfx);
|
||||
this.addChild(gfx);
|
||||
}
|
||||
|
||||
// ── Vote badges ──
|
||||
for (const [objectId, voters] of this._store.votes) {
|
||||
if (voters.size === 0) continue;
|
||||
const item = this._scene.items.get(objectId);
|
||||
if (!item || !item.displayObject) continue;
|
||||
|
||||
const bounds = item.displayObject.getBounds();
|
||||
const wx = bounds.x + bounds.width;
|
||||
const wy = bounds.y + bounds.height;
|
||||
|
||||
const gfx = new Graphics();
|
||||
const pw = 24 * scale;
|
||||
const ph = 16 * scale;
|
||||
const pr = 4 * scale;
|
||||
gfx.roundRect(-pw / 2, -ph / 2, pw, ph, pr);
|
||||
gfx.fill({ color: 0x2a3a50, alpha: 0.9 });
|
||||
gfx.position.set(wx - 16 * scale, wy - 4 * scale);
|
||||
|
||||
const label = new Text({
|
||||
text: `${voters.size}`,
|
||||
style: new TextStyle({ fontSize: 9 * scale, fill: '#4a9eff', fontWeight: 'bold' }),
|
||||
});
|
||||
label.anchor.set(0.5);
|
||||
gfx.addChild(label);
|
||||
this.addChild(gfx);
|
||||
this._voteBadges.push(gfx);
|
||||
}
|
||||
}
|
||||
|
||||
getThreadIdAtPoint(worldX: number, worldY: number): string | null {
|
||||
for (const [threadId, gfx] of this._pins) {
|
||||
const dx = gfx.position.x - worldX;
|
||||
const dy = gfx.position.y - worldY;
|
||||
const hitRadius = PIN_RADIUS / this._viewport.scale.x;
|
||||
if (dx * dx + dy * dy <= hitRadius * hitRadius) {
|
||||
return threadId;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
override destroy(options?: any) {
|
||||
for (const gfx of this._pins.values()) gfx.destroy();
|
||||
for (const gfx of this._voteBadges) gfx.destroy();
|
||||
this._pins.clear();
|
||||
this._voteBadges = [];
|
||||
super.destroy(options);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,365 @@
|
||||
import React, { useState, useCallback, useSyncExternalStore } from 'react';
|
||||
import { AnnotationStore, Thread } from '../stores/annotationStore';
|
||||
|
||||
interface FeedbackPanelProps {
|
||||
annotationStore: AnnotationStore;
|
||||
selectedObjectId: string | null;
|
||||
userId: string;
|
||||
boardId: string;
|
||||
token: string;
|
||||
canvasObjects: Map<string, { id: string; name?: string; type: string }>;
|
||||
onJumpToObject?: (objectId: string) => void;
|
||||
}
|
||||
|
||||
export default function FeedbackPanel({
|
||||
annotationStore,
|
||||
selectedObjectId,
|
||||
userId,
|
||||
boardId,
|
||||
token,
|
||||
canvasObjects,
|
||||
onJumpToObject,
|
||||
}: FeedbackPanelProps) {
|
||||
const [collapsed, setCollapsed] = useState(false);
|
||||
const [expandedThreadId, setExpandedThreadId] = useState<string | null>(null);
|
||||
const [replyText, setReplyText] = useState('');
|
||||
const [filter, setFilter] = useState<'all' | 'unresolved' | 'mine'>('unresolved');
|
||||
const [newCommentText, setNewCommentText] = useState('');
|
||||
const [showOrphans, setShowOrphans] = useState(false);
|
||||
|
||||
// Subscribe to store changes
|
||||
const _version = useSyncExternalStore(
|
||||
(cb) => annotationStore.subscribe(cb),
|
||||
() => annotationStore.threads.size + annotationStore.votes.size,
|
||||
);
|
||||
|
||||
const allThreads = Array.from(annotationStore.threads.values());
|
||||
|
||||
// Apply filter
|
||||
let threads = allThreads;
|
||||
if (filter === 'unresolved') threads = threads.filter((t) => t.status === 'open');
|
||||
if (filter === 'mine') threads = threads.filter((t) => t.created_by === userId);
|
||||
|
||||
// If an object is selected, show only its threads
|
||||
if (selectedObjectId) {
|
||||
threads = threads.filter((t) => t.object_id === selectedObjectId);
|
||||
}
|
||||
|
||||
// Separate orphaned threads (object deleted from canvas)
|
||||
const orphanedThreads = threads.filter((t) => !canvasObjects.has(t.object_id));
|
||||
threads = threads.filter((t) => canvasObjects.has(t.object_id));
|
||||
|
||||
// Sort: newest activity first
|
||||
threads.sort((a, b) => (b.last_commented_at || b.created_at).localeCompare(a.last_commented_at || a.created_at));
|
||||
|
||||
// ── API helpers ──
|
||||
|
||||
const postReply = useCallback(async (threadId: string) => {
|
||||
if (!replyText.trim()) return;
|
||||
await fetch(`/api/boards/${boardId}/threads/${threadId}/comments`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` },
|
||||
body: JSON.stringify({ content: replyText.trim() }),
|
||||
});
|
||||
setReplyText('');
|
||||
}, [boardId, token, replyText]);
|
||||
|
||||
const resolveThread = useCallback(async (threadId: string, status: string) => {
|
||||
await fetch(`/api/boards/${boardId}/threads/${threadId}`, {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` },
|
||||
body: JSON.stringify({ status }),
|
||||
});
|
||||
}, [boardId, token]);
|
||||
|
||||
const deleteComment = useCallback(async (threadId: string, commentId: string) => {
|
||||
await fetch(`/api/boards/${boardId}/threads/${threadId}/comments/${commentId}`, {
|
||||
method: 'DELETE',
|
||||
headers: { Authorization: `Bearer ${token}` },
|
||||
});
|
||||
}, [boardId, token]);
|
||||
|
||||
const toggleVote = useCallback(async (objectId: string) => {
|
||||
await fetch(`/api/boards/${boardId}/votes`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` },
|
||||
body: JSON.stringify({ object_id: objectId }),
|
||||
});
|
||||
}, [boardId, token]);
|
||||
|
||||
const createThread = useCallback(async () => {
|
||||
if (!newCommentText.trim() || !selectedObjectId) return;
|
||||
await fetch(`/api/boards/${boardId}/threads`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` },
|
||||
body: JSON.stringify({
|
||||
object_id: selectedObjectId,
|
||||
anchor_type: 'object',
|
||||
content: newCommentText.trim(),
|
||||
}),
|
||||
});
|
||||
setNewCommentText('');
|
||||
}, [boardId, token, newCommentText, selectedObjectId]);
|
||||
|
||||
// ── Collapsed state ──
|
||||
|
||||
if (collapsed) {
|
||||
return (
|
||||
<div style={{
|
||||
position: 'absolute', right: 0, top: 0, bottom: 0, width: '28px',
|
||||
background: '#111', borderLeft: '1px solid #1a1a1a', zIndex: 100,
|
||||
display: 'flex', alignItems: 'flex-start', justifyContent: 'center', paddingTop: '8px',
|
||||
}}>
|
||||
<button onClick={() => setCollapsed(false)} style={{
|
||||
background: 'none', border: 'none', color: '#777', cursor: 'pointer', padding: '2px',
|
||||
}} title="Open feedback panel">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
|
||||
<path d="M2 2a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h2v3l3-3h7a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H2z"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Expanded thread view ──
|
||||
|
||||
const expandedThread = expandedThreadId ? annotationStore.threads.get(expandedThreadId) : null;
|
||||
|
||||
if (expandedThread) {
|
||||
return (
|
||||
<div style={{
|
||||
position: 'absolute', right: 0, top: 0, bottom: 0, width: '280px',
|
||||
background: '#111', borderLeft: '1px solid #1a1a1a', zIndex: 100,
|
||||
display: 'flex', flexDirection: 'column', userSelect: 'none',
|
||||
}}>
|
||||
{/* Header */}
|
||||
<div style={{ padding: '8px', borderBottom: '1px solid #1a1a1a', display: 'flex', alignItems: 'center', gap: '8px' }}>
|
||||
<button onClick={() => setExpandedThreadId(null)} style={{
|
||||
background: 'none', border: 'none', color: '#777', cursor: 'pointer', fontSize: '12px',
|
||||
}}>Back</button>
|
||||
<span style={{ color: '#aaa', fontSize: '12px', flex: 1 }}>
|
||||
{expandedThread.status === 'resolved' ? 'Resolved' : 'Open'}
|
||||
</span>
|
||||
<button onClick={() => toggleVote(expandedThread.object_id)} style={{
|
||||
background: 'none', border: 'none', cursor: 'pointer',
|
||||
color: annotationStore.hasVoted(expandedThread.object_id, userId) ? '#4a9eff' : '#444',
|
||||
fontSize: '11px',
|
||||
}}>
|
||||
{annotationStore.getVoteCount(expandedThread.object_id) > 0
|
||||
? `+${annotationStore.getVoteCount(expandedThread.object_id)}`
|
||||
: '+'}
|
||||
</button>
|
||||
{onJumpToObject && (
|
||||
<button onClick={() => onJumpToObject(expandedThread.object_id)} style={{
|
||||
background: 'none', border: 'none', color: '#4a9eff', cursor: 'pointer', fontSize: '10px',
|
||||
}}>Jump</button>
|
||||
)}
|
||||
{expandedThread.status === 'open' ? (
|
||||
<button onClick={() => resolveThread(expandedThread.id, 'resolved')} style={{
|
||||
background: '#1a3a1a', border: 'none', borderRadius: '4px', color: '#4ade80',
|
||||
padding: '2px 8px', cursor: 'pointer', fontSize: '11px',
|
||||
}}>Resolve</button>
|
||||
) : (
|
||||
<button onClick={() => resolveThread(expandedThread.id, 'open')} style={{
|
||||
background: '#1a1a3a', border: 'none', borderRadius: '4px', color: '#77a',
|
||||
padding: '2px 8px', cursor: 'pointer', fontSize: '11px',
|
||||
}}>Reopen</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Comments */}
|
||||
<div style={{ flex: 1, overflowY: 'auto', padding: '8px' }}>
|
||||
{expandedThread.comments.map((c) => (
|
||||
<div key={c.id} style={{ marginBottom: '12px' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '6px', marginBottom: '4px' }}>
|
||||
<span style={{ color: '#ddd', fontSize: '12px', fontWeight: 600 }}>{c.author_name}</span>
|
||||
<span style={{ color: '#555', fontSize: '10px' }}>
|
||||
{new Date(c.created_at).toLocaleString()}
|
||||
</span>
|
||||
{c.edited_at && <span style={{ color: '#555', fontSize: '10px' }}>(edited)</span>}
|
||||
</div>
|
||||
<div style={{ color: '#bbb', fontSize: '13px', lineHeight: '1.4' }}>{c.content}</div>
|
||||
{c.user_id === userId && (
|
||||
<button onClick={() => deleteComment(expandedThread.id, c.id)} style={{
|
||||
background: 'none', border: 'none', color: '#644', cursor: 'pointer', fontSize: '10px', marginTop: '2px',
|
||||
}}>Delete</button>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Reply input */}
|
||||
<div style={{ padding: '8px', borderTop: '1px solid #1a1a1a' }}>
|
||||
<textarea
|
||||
value={replyText}
|
||||
onChange={(e) => setReplyText(e.target.value)}
|
||||
placeholder="Reply..."
|
||||
rows={2}
|
||||
style={{
|
||||
width: '100%', background: '#1a1a1a', border: '1px solid #333', borderRadius: '4px',
|
||||
color: '#ddd', padding: '6px', fontSize: '12px', resize: 'none', boxSizing: 'border-box',
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
|
||||
postReply(expandedThread.id);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<button onClick={() => postReply(expandedThread.id)} style={{
|
||||
marginTop: '4px', background: '#2a3a50', border: 'none', borderRadius: '4px',
|
||||
color: '#4a9eff', padding: '4px 12px', cursor: 'pointer', fontSize: '12px',
|
||||
}}>Reply</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Thread list view ──
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
position: 'absolute', right: 0, top: 0, bottom: 0, width: '280px',
|
||||
background: '#111', borderLeft: '1px solid #1a1a1a', zIndex: 100,
|
||||
display: 'flex', flexDirection: 'column', userSelect: 'none',
|
||||
}}>
|
||||
{/* Header */}
|
||||
<div style={{ padding: '8px', borderBottom: '1px solid #1a1a1a', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
||||
<span style={{ color: '#ddd', fontSize: '13px', fontWeight: 600 }}>
|
||||
Feedback
|
||||
{allThreads.filter((t) => t.status === 'open').length > 0 && (
|
||||
<span style={{ color: '#e44', fontSize: '11px', fontWeight: 400, marginLeft: '6px' }}>
|
||||
{allThreads.filter((t) => t.status === 'open').length} open
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
<button onClick={() => setCollapsed(true)} style={{
|
||||
background: 'none', border: 'none', color: '#555', cursor: 'pointer', fontSize: '14px',
|
||||
}}>x</button>
|
||||
</div>
|
||||
|
||||
{/* Filter bar */}
|
||||
<div style={{ padding: '6px 8px', borderBottom: '1px solid #1a1a1a', display: 'flex', gap: '4px' }}>
|
||||
{(['unresolved', 'all', 'mine'] as const).map((f) => (
|
||||
<button key={f} onClick={() => setFilter(f)} style={{
|
||||
background: filter === f ? '#2a3a50' : 'transparent',
|
||||
border: 'none', borderRadius: '4px', color: filter === f ? '#4a9eff' : '#555',
|
||||
padding: '2px 8px', cursor: 'pointer', fontSize: '11px', textTransform: 'capitalize',
|
||||
}}>{f}</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* New comment input (when object selected) */}
|
||||
{selectedObjectId && (
|
||||
<div style={{ padding: '8px', borderBottom: '1px solid #1a1a1a' }}>
|
||||
<div style={{ color: '#666', fontSize: '10px', marginBottom: '4px' }}>
|
||||
Comment on: {canvasObjects.get(selectedObjectId)?.name || canvasObjects.get(selectedObjectId)?.type || selectedObjectId.slice(0, 8)}
|
||||
</div>
|
||||
<textarea
|
||||
value={newCommentText}
|
||||
onChange={(e) => setNewCommentText(e.target.value)}
|
||||
placeholder="Add a comment..."
|
||||
rows={2}
|
||||
style={{
|
||||
width: '100%', background: '#1a1a1a', border: '1px solid #333', borderRadius: '4px',
|
||||
color: '#ddd', padding: '6px', fontSize: '12px', resize: 'none', boxSizing: 'border-box',
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) createThread();
|
||||
}}
|
||||
/>
|
||||
<button onClick={createThread} disabled={!newCommentText.trim()} style={{
|
||||
marginTop: '4px', background: newCommentText.trim() ? '#2a3a50' : '#1a1a1a',
|
||||
border: 'none', borderRadius: '4px',
|
||||
color: newCommentText.trim() ? '#4a9eff' : '#444',
|
||||
padding: '4px 12px', cursor: newCommentText.trim() ? 'pointer' : 'default', fontSize: '12px',
|
||||
}}>Comment</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Thread list */}
|
||||
<div style={{ flex: 1, overflowY: 'auto' }}>
|
||||
{threads.length === 0 && !selectedObjectId && (
|
||||
<div style={{ padding: '16px', color: '#444', fontSize: '12px', textAlign: 'center' }}>
|
||||
No threads yet
|
||||
</div>
|
||||
)}
|
||||
{threads.length === 0 && selectedObjectId && (
|
||||
<div style={{ padding: '16px', color: '#444', fontSize: '12px', textAlign: 'center' }}>
|
||||
No comments on this object
|
||||
</div>
|
||||
)}
|
||||
{threads.map((t) => {
|
||||
const obj = canvasObjects.get(t.object_id);
|
||||
const firstComment = t.comments[0];
|
||||
return (
|
||||
<div
|
||||
key={t.id}
|
||||
onClick={() => setExpandedThreadId(t.id)}
|
||||
style={{
|
||||
padding: '8px', borderBottom: '1px solid #1a1a1a', cursor: 'pointer',
|
||||
}}
|
||||
onMouseEnter={(e) => { (e.currentTarget as HTMLDivElement).style.background = '#1a1a1a'; }}
|
||||
onMouseLeave={(e) => { (e.currentTarget as HTMLDivElement).style.background = 'transparent'; }}
|
||||
>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '6px', marginBottom: '4px' }}>
|
||||
<span style={{
|
||||
width: '8px', height: '8px', borderRadius: '50%',
|
||||
background: t.status === 'open' ? '#e44' : '#666', flexShrink: 0,
|
||||
}} />
|
||||
<span style={{ color: '#aaa', fontSize: '11px', flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
|
||||
{obj?.name || obj?.type || t.object_id.slice(0, 8)}
|
||||
</span>
|
||||
<span style={{ color: '#555', fontSize: '10px' }}>{t.comment_count}</span>
|
||||
<button onClick={(e) => { e.stopPropagation(); toggleVote(t.object_id); }} style={{
|
||||
background: 'none', border: 'none', cursor: 'pointer', padding: '0 2px',
|
||||
color: annotationStore.hasVoted(t.object_id, userId) ? '#4a9eff' : '#444',
|
||||
fontSize: '11px', flexShrink: 0,
|
||||
}}>
|
||||
{annotationStore.getVoteCount(t.object_id) > 0
|
||||
? `+${annotationStore.getVoteCount(t.object_id)}`
|
||||
: '+'}
|
||||
</button>
|
||||
</div>
|
||||
{firstComment && (
|
||||
<div style={{ color: '#777', fontSize: '12px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
|
||||
{firstComment.author_name}: {firstComment.content}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
{/* Orphaned threads (deleted objects) */}
|
||||
{orphanedThreads.length > 0 && (
|
||||
<div>
|
||||
<div onClick={() => setShowOrphans(!showOrphans)} style={{
|
||||
padding: '8px', cursor: 'pointer', color: '#555', fontSize: '11px',
|
||||
borderTop: '1px solid #1a1a1a',
|
||||
}}>
|
||||
{showOrphans ? 'v' : '>'} Deleted items ({orphanedThreads.length})
|
||||
</div>
|
||||
{showOrphans && orphanedThreads.map((t) => {
|
||||
const firstComment = t.comments[0];
|
||||
return (
|
||||
<div key={t.id} onClick={() => setExpandedThreadId(t.id)} style={{
|
||||
padding: '8px', borderBottom: '1px solid #1a1a1a', cursor: 'pointer', opacity: 0.5,
|
||||
}}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '6px', marginBottom: '4px' }}>
|
||||
<span style={{ width: '8px', height: '8px', borderRadius: '50%', background: '#444', flexShrink: 0 }} />
|
||||
<span style={{ color: '#666', fontSize: '11px', flex: 1 }}>{t.object_id.slice(0, 8)}...</span>
|
||||
<span style={{ color: '#555', fontSize: '10px' }}>{t.comment_count}</span>
|
||||
</div>
|
||||
{firstComment && (
|
||||
<div style={{ color: '#555', fontSize: '12px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
|
||||
{firstComment.author_name}: {firstComment.content}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -34,6 +34,8 @@ interface ToolbarProps {
|
||||
onToggleHelp?: () => void;
|
||||
onMmImport?: () => void;
|
||||
onExport?: () => void;
|
||||
onToggleReview?: () => void;
|
||||
reviewMode?: boolean;
|
||||
boardName?: string;
|
||||
}
|
||||
|
||||
@@ -150,6 +152,8 @@ export default function Toolbar({
|
||||
onToggleHelp,
|
||||
onMmImport,
|
||||
onExport,
|
||||
onToggleReview,
|
||||
reviewMode,
|
||||
}: ToolbarProps) {
|
||||
const showStroke = activeTool === ToolType.PEN;
|
||||
const showFontSize = activeTool === ToolType.TEXT;
|
||||
@@ -309,6 +313,15 @@ export default function Toolbar({
|
||||
</ActionBtn>
|
||||
)}
|
||||
|
||||
{/* Review / Feedback */}
|
||||
{onToggleReview && (
|
||||
<ActionBtn onClick={onToggleReview} title="Review Mode (R)" active={reviewMode}>
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.3">
|
||||
<path d="M2 2.5A1.5 1.5 0 013.5 1h7A1.5 1.5 0 0112 2.5v6A1.5 1.5 0 0110.5 10H6l-3 3v-3H3.5A1.5 1.5 0 012 8.5v-6z" />
|
||||
</svg>
|
||||
</ActionBtn>
|
||||
)}
|
||||
|
||||
{/* Spacer */}
|
||||
<div style={{ flex: 1 }} />
|
||||
|
||||
|
||||
@@ -9,6 +9,8 @@ import { InboxZone } from '../canvas/InboxZone';
|
||||
import { LaserPointer } from '../canvas/LaserPointer';
|
||||
import { VideoSprite } from '../canvas/sprites/VideoSprite';
|
||||
import { UploadManager } from '../stores/uploadManager';
|
||||
import { AnnotationStore } from '../stores/annotationStore';
|
||||
import { PinOverlay } from '../canvas/PinOverlay';
|
||||
// PresenceOverlay removed — remote selection highlighting was too heavy for minimal benefit
|
||||
import { connectSocket, disconnectSocket } from '../socket';
|
||||
|
||||
@@ -64,6 +66,9 @@ export function useCanvasSetup(deps: CanvasSetupDeps) {
|
||||
const dropCleanupRef = useRef<(() => void) | null>(null);
|
||||
const pasteCleanupRef = useRef<(() => void) | null>(null);
|
||||
const laserCleanupRef = useRef<(() => void) | null>(null);
|
||||
const annotationStoreRef = useRef<AnnotationStore | null>(null);
|
||||
if (!annotationStoreRef.current) annotationStoreRef.current = new AnnotationStore();
|
||||
const pinOverlayRef = useRef<PinOverlay | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!boardData || !resolvedBoardId) return;
|
||||
@@ -298,6 +303,65 @@ export function useCanvasSetup(deps: CanvasSetupDeps) {
|
||||
laser.removeRemote(uid);
|
||||
}
|
||||
});
|
||||
|
||||
// ── Annotations: load threads + votes, wire socket events ──
|
||||
const token = localStorage.getItem('token');
|
||||
if (token) {
|
||||
fetch(`/api/boards/${resolvedBoardId}/threads`, {
|
||||
headers: { Authorization: `Bearer ${token}` },
|
||||
})
|
||||
.then((r) => r.json())
|
||||
.then((data) => {
|
||||
if (data.threads) annotationStoreRef.current?.loadThreads(data.threads);
|
||||
})
|
||||
.catch((err) => console.error('[annotations] load threads error:', err));
|
||||
|
||||
fetch(`/api/boards/${resolvedBoardId}/votes`, {
|
||||
headers: { Authorization: `Bearer ${token}` },
|
||||
})
|
||||
.then((r) => r.json())
|
||||
.then((data) => {
|
||||
if (data.votes) annotationStoreRef.current?.loadVotes(data.votes);
|
||||
})
|
||||
.catch((err) => console.error('[annotations] load votes error:', err));
|
||||
}
|
||||
|
||||
socket.on('thread:add', (data: any) => {
|
||||
annotationStoreRef.current?.onThreadAdd(data.thread, data.comment);
|
||||
});
|
||||
socket.on('thread:status', (data: any) => {
|
||||
annotationStoreRef.current?.onThreadStatus(data.threadId, data.status, data.resolvedBy, data.resolvedAt);
|
||||
});
|
||||
socket.on('thread:delete', (data: any) => {
|
||||
annotationStoreRef.current?.onThreadDelete(data.threadId);
|
||||
});
|
||||
socket.on('comment:add', (data: any) => {
|
||||
annotationStoreRef.current?.onCommentAdd(data.threadId, data.comment);
|
||||
});
|
||||
socket.on('comment:update', (data: any) => {
|
||||
annotationStoreRef.current?.onCommentUpdate(data.threadId, data.commentId, data.content, data.editedAt);
|
||||
});
|
||||
socket.on('comment:delete', (data: any) => {
|
||||
annotationStoreRef.current?.onCommentDelete(data.threadId, data.commentId);
|
||||
});
|
||||
socket.on('vote:toggle', (data: any) => {
|
||||
annotationStoreRef.current?.onVoteToggle(data.objectId, data.userId, data.active);
|
||||
});
|
||||
|
||||
// ── Pin overlay (hidden by default, shown in Review Mode) ──
|
||||
const pinOverlay = new PinOverlay(viewport, scene, annotationStoreRef.current!);
|
||||
pinOverlay.visible = false;
|
||||
viewport.addChild(pinOverlay);
|
||||
pinOverlayRef.current = pinOverlay;
|
||||
|
||||
// Refresh overlay on viewport move
|
||||
viewport.on('moved', () => {
|
||||
if (pinOverlay.visible) pinOverlay.refresh();
|
||||
});
|
||||
// Refresh on store change
|
||||
annotationStoreRef.current!.subscribe(() => {
|
||||
if (pinOverlay.visible) pinOverlay.refresh();
|
||||
});
|
||||
}
|
||||
|
||||
// Setup drag/drop and paste
|
||||
@@ -329,7 +393,14 @@ export function useCanvasSetup(deps: CanvasSetupDeps) {
|
||||
laserCleanupRef.current = null;
|
||||
dropCleanupRef.current?.();
|
||||
pasteCleanupRef.current?.();
|
||||
if (pinOverlayRef.current) {
|
||||
pinOverlayRef.current.destroy();
|
||||
pinOverlayRef.current = null;
|
||||
}
|
||||
annotationStoreRef.current?.clear();
|
||||
disconnectSocket();
|
||||
};
|
||||
}, [boardData, resolvedBoardId, user, isPublicView, onCanvasChange, showToast, canvasRef, selectionRef, undoRef, syncRef, inboxZoneRef, uploadManager, setOnlineUsers, setSelectedLayerIds]);
|
||||
|
||||
return { annotationStore: annotationStoreRef.current, pinOverlay: pinOverlayRef.current };
|
||||
}
|
||||
|
||||
@@ -26,6 +26,7 @@ import MattermostImport from '../components/MattermostImport';
|
||||
import Minimap from '../components/Minimap';
|
||||
import UploadPanel from '../components/UploadPanel';
|
||||
import ExportDialog from '../components/ExportDialog';
|
||||
import FeedbackPanel from '../components/FeedbackPanel';
|
||||
import { UploadManager } from '../stores/uploadManager';
|
||||
import { InboxZone } from '../canvas/InboxZone';
|
||||
import { getItemWorldBounds } from '../canvas/SceneManager';
|
||||
@@ -90,6 +91,7 @@ export default function Editor({ isPublicView }: EditorProps) {
|
||||
const [showHelp, setShowHelp] = useState(false);
|
||||
const [showMmImport, setShowMmImport] = useState(false);
|
||||
const [showExport, setShowExport] = useState(false);
|
||||
const [reviewMode, setReviewMode] = useState(false);
|
||||
const [focusMode, setFocusMode] = useState(false);
|
||||
const [layerList, setLayerList] = useState<any[]>([]);
|
||||
const [selectedLayerIds, setSelectedLayerIds] = useState<string[]>([]);
|
||||
@@ -153,13 +155,21 @@ export default function Editor({ isPublicView }: EditorProps) {
|
||||
getViewport,
|
||||
});
|
||||
|
||||
// Canvas setup (selection, undo, sync, socket, drag/drop, paste, inbox)
|
||||
useCanvasSetup({
|
||||
// Canvas setup (selection, undo, sync, socket, drag/drop, paste, inbox, annotations)
|
||||
const { annotationStore, pinOverlay } = useCanvasSetup({
|
||||
boardData, resolvedBoardId, user, isPublicView,
|
||||
canvasRef, selectionRef, undoRef, syncRef, inboxZoneRef, canvasContainerRef,
|
||||
uploadManager, onCanvasChange, showToast, setOnlineUsers, setSelectedLayerIds,
|
||||
});
|
||||
|
||||
// Toggle pin overlay visibility with review mode
|
||||
useEffect(() => {
|
||||
if (pinOverlay) {
|
||||
pinOverlay.visible = reviewMode;
|
||||
if (reviewMode) pinOverlay.refresh();
|
||||
}
|
||||
}, [reviewMode, pinOverlay]);
|
||||
|
||||
// Tool activation
|
||||
useEffect(() => {
|
||||
const viewport = canvasRef.current?.getViewport();
|
||||
@@ -490,6 +500,8 @@ export default function Editor({ isPublicView }: EditorProps) {
|
||||
onToggleHelp={() => setShowHelp((v) => !v)}
|
||||
onMmImport={() => setShowMmImport(true)}
|
||||
onExport={() => setShowExport(true)}
|
||||
onToggleReview={() => setReviewMode((v) => !v)}
|
||||
reviewMode={reviewMode}
|
||||
boardName={board?.name}
|
||||
/>}
|
||||
|
||||
@@ -643,6 +655,37 @@ export default function Editor({ isPublicView }: EditorProps) {
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Feedback / Review panel */}
|
||||
{reviewMode && annotationStore && user && resolvedBoardId && (
|
||||
<FeedbackPanel
|
||||
annotationStore={annotationStore}
|
||||
selectedObjectId={selectedLayerIds.length === 1 ? selectedLayerIds[0] : null}
|
||||
userId={user.id}
|
||||
boardId={resolvedBoardId}
|
||||
token={localStorage.getItem('token') || ''}
|
||||
canvasObjects={(() => {
|
||||
const scene = canvasRef.current?.getScene();
|
||||
const map = new Map<string, { id: string; name?: string; type: string }>();
|
||||
if (scene) {
|
||||
for (const item of scene.items.values()) {
|
||||
map.set(item.id, { id: item.id, name: item.data.name, type: item.data.type });
|
||||
}
|
||||
}
|
||||
return map;
|
||||
})()}
|
||||
onJumpToObject={(objectId) => {
|
||||
const scene = canvasRef.current?.getScene();
|
||||
const vp = canvasRef.current?.getViewport();
|
||||
if (!scene || !vp) return;
|
||||
const item = scene.items.get(objectId);
|
||||
if (!item) return;
|
||||
const b = getItemWorldBounds(item);
|
||||
vp.animate({ time: 300, position: { x: b.x + b.w / 2, y: b.y + b.h / 2 }, ease: 'easeOutQuad' });
|
||||
selectionRef.current?.selectOnly(objectId);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Upload progress panel */}
|
||||
<UploadPanel uploadManager={uploadManager} />
|
||||
|
||||
|
||||
@@ -0,0 +1,156 @@
|
||||
export interface Thread {
|
||||
id: string;
|
||||
board_id: string;
|
||||
object_id: string;
|
||||
anchor_type: 'object' | 'point';
|
||||
pin_x: number | null;
|
||||
pin_y: number | null;
|
||||
status: 'open' | 'resolved' | 'archived';
|
||||
resolved_by: string | null;
|
||||
resolved_at: string | null;
|
||||
comment_count: number;
|
||||
last_commented_at: string | null;
|
||||
last_commented_by: string | null;
|
||||
created_by: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
comments: Comment[];
|
||||
}
|
||||
|
||||
export interface Comment {
|
||||
id: string;
|
||||
thread_id: string;
|
||||
user_id: string;
|
||||
author_name: string;
|
||||
author_color: string | null;
|
||||
content: string;
|
||||
edited_at: string | null;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
export interface Vote {
|
||||
board_id: string;
|
||||
object_id: string;
|
||||
user_id: string;
|
||||
}
|
||||
|
||||
type Listener = () => void;
|
||||
|
||||
export class AnnotationStore {
|
||||
threads = new Map<string, Thread>();
|
||||
/** objectId → Set<userId> */
|
||||
votes = new Map<string, Set<string>>();
|
||||
|
||||
private _listeners = new Set<Listener>();
|
||||
|
||||
subscribe(fn: Listener): () => void {
|
||||
this._listeners.add(fn);
|
||||
return () => this._listeners.delete(fn);
|
||||
}
|
||||
|
||||
private _notify() {
|
||||
for (const fn of this._listeners) fn();
|
||||
}
|
||||
|
||||
// ── Bulk load ──
|
||||
|
||||
loadThreads(threads: Thread[]) {
|
||||
this.threads.clear();
|
||||
for (const t of threads) {
|
||||
this.threads.set(t.id, t);
|
||||
}
|
||||
this._notify();
|
||||
}
|
||||
|
||||
loadVotes(votes: Vote[]) {
|
||||
this.votes.clear();
|
||||
for (const v of votes) {
|
||||
if (!this.votes.has(v.object_id)) this.votes.set(v.object_id, new Set());
|
||||
this.votes.get(v.object_id)!.add(v.user_id);
|
||||
}
|
||||
this._notify();
|
||||
}
|
||||
|
||||
clear() {
|
||||
this.threads.clear();
|
||||
this.votes.clear();
|
||||
this._notify();
|
||||
}
|
||||
|
||||
// ── Socket event handlers ──
|
||||
|
||||
onThreadAdd(thread: Thread, comment: Comment) {
|
||||
thread.comments = [comment];
|
||||
this.threads.set(thread.id, thread);
|
||||
this._notify();
|
||||
}
|
||||
|
||||
onThreadStatus(threadId: string, status: string, resolvedBy: string | null, resolvedAt: string | null) {
|
||||
const t = this.threads.get(threadId);
|
||||
if (!t) return;
|
||||
t.status = status as Thread['status'];
|
||||
t.resolved_by = resolvedBy;
|
||||
t.resolved_at = resolvedAt;
|
||||
this._notify();
|
||||
}
|
||||
|
||||
onThreadDelete(threadId: string) {
|
||||
this.threads.delete(threadId);
|
||||
this._notify();
|
||||
}
|
||||
|
||||
onCommentAdd(threadId: string, comment: Comment) {
|
||||
const t = this.threads.get(threadId);
|
||||
if (!t) return;
|
||||
t.comments.push(comment);
|
||||
t.comment_count = t.comments.length;
|
||||
t.last_commented_at = comment.created_at;
|
||||
t.last_commented_by = comment.user_id;
|
||||
this._notify();
|
||||
}
|
||||
|
||||
onCommentUpdate(threadId: string, commentId: string, content: string, editedAt: string) {
|
||||
const t = this.threads.get(threadId);
|
||||
if (!t) return;
|
||||
const c = t.comments.find((c) => c.id === commentId);
|
||||
if (c) {
|
||||
c.content = content;
|
||||
c.edited_at = editedAt;
|
||||
}
|
||||
this._notify();
|
||||
}
|
||||
|
||||
onCommentDelete(threadId: string, commentId: string) {
|
||||
const t = this.threads.get(threadId);
|
||||
if (!t) return;
|
||||
t.comments = t.comments.filter((c) => c.id !== commentId);
|
||||
t.comment_count = t.comments.length;
|
||||
this._notify();
|
||||
}
|
||||
|
||||
onVoteToggle(objectId: string, userId: string, active: boolean) {
|
||||
if (!this.votes.has(objectId)) this.votes.set(objectId, new Set());
|
||||
const set = this.votes.get(objectId)!;
|
||||
if (active) set.add(userId); else set.delete(userId);
|
||||
if (set.size === 0) this.votes.delete(objectId);
|
||||
this._notify();
|
||||
}
|
||||
|
||||
// ── Convenience getters ──
|
||||
|
||||
getThreadsForObject(objectId: string): Thread[] {
|
||||
const result: Thread[] = [];
|
||||
for (const t of this.threads.values()) {
|
||||
if (t.object_id === objectId) result.push(t);
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
getVoteCount(objectId: string): number {
|
||||
return this.votes.get(objectId)?.size ?? 0;
|
||||
}
|
||||
|
||||
hasVoted(objectId: string, userId: string): boolean {
|
||||
return this.votes.get(objectId)?.has(userId) ?? false;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user