e.preventDefault()}
- onDrop={onCanvasDrop}
- onClick={() => { if (groupContextMenu) setGroupContextMenu(null); }}
- onDoubleClick={(e) => {
- if (e.target !== canvasRef.current) return;
- const rect = canvasRef.current.getBoundingClientRect();
- const worldX = (e.clientX - rect.left - pan.x) / zoom;
- const worldY = (e.clientY - rect.top - pan.y) / zoom;
- addStickyNote(worldX, worldY);
- }}
- style={{
- flex: 1,
- position: "relative",
- overflow: "hidden",
- background: COLORS.canvasBg,
- cursor: canvasCursor,
- backgroundImage: `radial-gradient(circle, ${COLORS.canvasDot} 1px, transparent 1px)`,
- backgroundSize: `${24 * zoom}px ${24 * zoom}px`,
- backgroundPosition: `${pan.x}px ${pan.y}px`,
- }}
- >
-
- {screenGroups.map((group) => (
-
{
- setSelectedScreenGroup(id);
- setSelectedStickyNote(null);
- setSelectedScreen(null);
- setSelectedConnection(null);
- setHotspotInteraction(null);
- }}
- />
- ))}
- {screens.map((screen) => (
- { clearSelection(); setSelectedScreen(id); setSelectedStickyNote(null); }}
- onDragStart={onDragStart}
- isSpaceHeld={isSpaceHeld}
- onAddHotspot={addHotspotViaConnect}
- onRemoveScreen={removeScreen}
- onDotDragStart={onDotDragStart}
- onConnectTarget={onConnectComplete}
- onHoverTarget={setHoverTarget}
- isConnectHoverTarget={hoverTarget === screen.id}
- isConnecting={!!connecting}
- selectedHotspotId={hotspotInteraction?.screenId === screen.id ? selectedHotspotId : null}
- selectedHotspotIds={selectedHotspots.length > 0 && selectedHotspots[0].screenId === screen.id
- ? new Set(selectedHotspots.map((h) => h.hotspotId))
- : null}
- onHotspotMouseDown={onHotspotMouseDown}
- onHotspotDoubleClick={onHotspotDoubleClick}
- onImageAreaMouseDown={onImageAreaMouseDown}
- onHotspotDragHandleMouseDown={onHotspotDragHandleMouseDown}
- onResizeHandleMouseDown={onResizeHandleMouseDown}
- onScreenDimensions={onScreenDimensions}
- drawRect={drawRect}
- isHotspotDragging={hotspotInteraction?.mode === "hotspot-drag"}
- onUpdateDescription={updateScreenDescription}
- onAddState={addState}
- onDropImage={handleDropImage}
- activeTool={activeTool}
- scopeRoot={scopeRoot}
- isInScope={scopeScreenIds ? scopeScreenIds.has(screen.id) : undefined}
- onContextMenu={(e) => {
- e.preventDefault();
- e.stopPropagation();
- const rect = canvasRef.current?.getBoundingClientRect();
- setGroupContextMenu({ screenId: screen.id, x: e.clientX - (rect?.left || 0), y: e.clientY - (rect?.top || 0) });
- }}
- isMultiSelected={canvasSelection.some((i) => i.type === "screen" && i.id === screen.id)}
- onToggleSelect={toggleSelection}
- onMultiDragStart={onMultiDragStart}
- isReadOnly={isReadOnly}
- />
- ))}
- {stickyNotes.map((note) => (
- {
- setSelectedStickyNote(id);
- setSelectedScreen(null);
- setSelectedConnection(null);
- setHotspotInteraction(null);
- setSelectedScreenGroup(null);
- }}
- isMultiSelected={canvasSelection.some((i) => i.type === "sticky" && i.id === note.id)}
- onToggleSelect={toggleSelection}
- onMultiDragStart={onMultiDragStart}
- onDragStart={(e, id) => {
- e.stopPropagation();
- const startX = e.clientX;
- const startY = e.clientY;
- const origX = note.x;
- const origY = note.y;
- const onMove = (me) => {
- const dx = (me.clientX - startX) / zoom;
- const dy = (me.clientY - startY) / zoom;
- updateStickyNote(id, { x: origX + dx, y: origY + dy });
- };
- const onUp = () => {
- window.removeEventListener("mousemove", onMove);
- window.removeEventListener("mouseup", onUp);
- };
- window.addEventListener("mousemove", onMove);
- window.addEventListener("mouseup", onUp);
- }}
- />
- ))}
-
-
- {repositionGhost && (
-
- )}
- {conditionalPrompt && (
-
- )}
- {collab.isConnected && }
- {editingConditionGroup && (
- setEditingConditionGroup(null)}
- />
- )}
-
-
- {screens.length === 0 &&
}
-
- {/* Zoom indicator */}
-
- {Math.round(zoom * 100)}%
-
-
- {/* Screen group context menu */}
- {groupContextMenu && (
-
setGroupContextMenu(null)}
- >
-
- Add to Group
-
- {screenGroups.map((g) => (
-
- ))}
-
-
-
-
- )}
-
- {/* Tool switcher */}
-
addScreenAtCenter()}
- isReadOnly={isReadOnly}
- onAddStickyNote={() => {
- if (!canvasRef.current) return;
- const rect = canvasRef.current.getBoundingClientRect();
- const worldX = (rect.width / 2 - pan.x) / zoom;
- const worldY = (rect.height / 2 - pan.y) / zoom;
- addStickyNote(worldX, worldY);
- }}
- />
-