{
if (connectionTypePrompt) { onConnectionTypeNavigate(); return; }
@@ -196,6 +203,12 @@ export function CanvasArea({
isReadOnly={isReadOnly}
onFormSummary={onFormSummary}
mcpFlash={mcpFlashIds?.has(screen.id)}
+ commentPins={(comments || []).filter(
+ (c) => c.screenId === screen.id && c.targetType === "screen" && !c.resolved
+ )}
+ onCommentImageClick={onCommentImageClick}
+ selectedCommentId={null}
+ onCommentPinClick={null}
/>
))}
{stickyNotes.map((note) => (
@@ -564,6 +577,7 @@ export function CanvasArea({
onUpload={handleImageUpload}
onAddBlank={() => addScreenAtCenter()}
isReadOnly={isReadOnly}
+ canComment={canComment}
onAddStickyNote={() => {
if (!canvasRef.current) return;
const rect = canvasRef.current.getBoundingClientRect();
@@ -575,5 +589,6 @@ export function CanvasArea({
onAddWireframe={onAddWireframe}
/>
+
);
}
diff --git a/src/hooks/useCanvasMouseHandlers.js b/src/hooks/useCanvasMouseHandlers.js
index 82072a5..91332ae 100644
--- a/src/hooks/useCanvasMouseHandlers.js
+++ b/src/hooks/useCanvasMouseHandlers.js
@@ -5,6 +5,7 @@ const resizeCursors = {
nw: "nwse-resize", n: "ns-resize", ne: "nesw-resize", e: "ew-resize",
se: "nwse-resize", s: "ns-resize", sw: "nesw-resize", w: "ew-resize",
};
+const COMMENT_CURSOR = `url("data:image/svg+xml,
@@ -593,6 +620,31 @@ export default function Drawd({ initialRoomCode }) {
const s = screens.find((sc) => sc.id === screenId);
if (s?.wireframe) setWireframeEditor({ screenId, components: s.wireframe.components, viewport: s.wireframe.viewport });
}}
+ comments={comments}
+ canComment={canComment}
+ onCommentImageClick={(e, screenId, xPct, yPct) => {
+ setCommentComposer({
+ targetType: "screen",
+ targetId: screenId,
+ screenId,
+ anchor: { xPct, yPct },
+ clientX: e.clientX,
+ clientY: e.clientY,
+ });
+ }}
+ onCommentConnectionClick={(e, connectionId, t) => {
+ setCommentComposer({
+ targetType: "connection",
+ targetId: connectionId,
+ screenId: null,
+ anchor: { t },
+ clientX: e.clientX,
+ clientY: e.clientY,
+ });
+ }}
+ selectedCommentId={selectedCommentId}
+ onCommentPinClick={(id) => setSelectedCommentId((prev) => (prev === id ? null : id))}
+ onDeselectComment={() => setSelectedCommentId(null)}
/>
{selectedScreenData && (
@@ -681,6 +733,36 @@ export default function Drawd({ initialRoomCode }) {
showTemplateBrowser={showTemplateBrowser}
setShowTemplateBrowser={setShowTemplateBrowser}
onInsertTemplate={onInsertTemplate}
+ showComments={showComments}
+ setShowComments={setShowComments}
+ comments={comments}
+ connections={connections}
+ canModerate={canModerateComments}
+ selfPeerId={collab.isConnected ? collab.selfPeerId : null}
+ selfDisplayName={collab.selfDisplayName}
+ onResolveComment={(id) => resolveComment(id, collab.selfDisplayName || "Anonymous")}
+ onUnresolveComment={unresolveComment}
+ onDeleteComment={deleteComment}
+ selectedCommentId={selectedCommentId}
+ setSelectedCommentId={setSelectedCommentId}
+ commentComposer={commentComposer}
+ setCommentComposer={setCommentComposer}
+ onCommentSubmit={(text) => {
+ if (!commentComposer) return;
+ addComment({
+ text,
+ authorName: collab.selfDisplayName || "Me",
+ authorPeerId: collab.isConnected ? (collab.selfPeerId || null) : null,
+ authorColor: collab.selfColor || "#61afef",
+ targetType: commentComposer.targetType,
+ targetId: commentComposer.targetId,
+ screenId: commentComposer.screenId,
+ anchor: commentComposer.anchor,
+ });
+ setCommentComposer(null);
+ setActiveTool("select");
+ if (!showComments) setShowComments(true);
+ }}
/>
{wireframeEditor && (
diff --git a/src/components/CanvasArea.jsx b/src/components/CanvasArea.jsx
index b254404..a5d9833 100644
--- a/src/components/CanvasArea.jsx
+++ b/src/components/CanvasArea.jsx
@@ -64,6 +64,7 @@ export function CanvasArea({
mcpFlashIds,
// Comments
comments, canComment, onCommentImageClick, onCommentConnectionClick,
+ selectedCommentId, onCommentPinClick, onDeselectComment,
}) {
return (
<>
@@ -207,8 +208,9 @@ export function CanvasArea({
(c) => c.screenId === screen.id && c.targetType === "screen" && !c.resolved
)}
onCommentImageClick={onCommentImageClick}
- selectedCommentId={null}
- onCommentPinClick={null}
+ selectedCommentId={selectedCommentId}
+ onCommentPinClick={onCommentPinClick}
+ onDeselectComment={onDeselectComment}
/>
))}
{stickyNotes.map((note) => (
diff --git a/src/components/CommentComposer.jsx b/src/components/CommentComposer.jsx
new file mode 100644
index 0000000..861f1de
--- /dev/null
+++ b/src/components/CommentComposer.jsx
@@ -0,0 +1,132 @@
+import { useState, useRef, useEffect } from "react";
+import { COLORS, FONTS, Z_INDEX } from "../styles/theme";
+
+/**
+ * Floating inline composer that appears where the user clicked in comment mode.
+ * Props:
+ * clientX, clientY — viewport coordinates for positioning
+ * onSubmit(text) — called when the user confirms
+ * onCancel() — called on Escape or outside click
+ */
+export function CommentComposer({ clientX, clientY, onSubmit, onCancel }) {
+ const [text, setText] = useState("");
+ const textareaRef = useRef(null);
+ const containerRef = useRef(null);
+
+ useEffect(() => {
+ textareaRef.current?.focus();
+ }, []);
+
+ // Close on outside click
+ useEffect(() => {
+ const onMouseDown = (e) => {
+ if (containerRef.current && !containerRef.current.contains(e.target)) {
+ onCancel();
+ }
+ };
+ document.addEventListener("mousedown", onMouseDown);
+ return () => document.removeEventListener("mousedown", onMouseDown);
+ }, [onCancel]);
+
+ const handleKeyDown = (e) => {
+ if (e.key === "Escape") { e.stopPropagation(); onCancel(); return; }
+ if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+ e.preventDefault();
+ handleSubmit();
+ }
+ };
+
+ const handleSubmit = () => {
+ const trimmed = text.trim();
+ if (!trimmed) return;
+ onSubmit(trimmed);
+ };
+
+ // Keep composer in viewport bounds
+ const COMPOSER_WIDTH = 280;
+ const left = Math.min(clientX, window.innerWidth - COMPOSER_WIDTH - 12);
+ const top = clientY + 12;
+
+ return (
+
+