Canvas Interactions & Marquee
Relevant source files
The following files were used as context for generating this wiki page:
Canvas Interactions and the Marquee selection system provide the primary visual interface for managing and organizing content within ThinkEx workspaces. This system enables users to spatially arrange various media types—such as PDFs, videos, and documents—and perform bulk operations through intuitive click-and-drag mechanics.
The interaction model is designed to facilitate "Targeted Reasoning," where users can select specific cards or document sections for the AI to analyze. This spatial organization allows for side-by-side comparison of sources and contextual knowledge building.
Sources: README.md:32-45, src/components/workspace-canvas/MarqueeSelector.tsx
Marquee Selection System
The Marquee selection tool allows users to select multiple cards simultaneously by dragging a rectangular area over the canvas. It utilizes a portal-based rendering strategy to ensure the selection rectangle appears above all other interface elements, including sidebars and individual cards.
Selection Logic
The marquee is activated via a left-click on the workspace background or by holding Shift and dragging from anywhere in the application. The system calculates intersections between the visual marquee rectangle and the underlying workspace cards to determine the selection set.
The logic differentiates between standard clicks (which must hit the background) and global Shift drags (which take precedence over card dragging).
Sources: src/components/workspace-canvas/MarqueeSelector.tsx:75-155, src/lib/utils/marquee-utils.ts
Technical Implementation Details
| Feature | Implementation Detail |
|---|---|
| Rendering | Uses createPortal to attach the selection box to document.body. |
| Scroll Support | Integrates useAutoScroll to move the viewport when dragging near edges. |
| Conflict Resolution | Disables marquee if isGridDragging becomes true. |
| Edge Cases | Includes robust scrollbar detection to prevent marquee starts on scroll interactions. |
Sources: src/components/workspace-canvas/MarqueeSelector.tsx:21-73, src/components/workspace-canvas/MarqueeSelector.tsx:185-205
Text Selection & AI Context
Beyond selecting whole cards, the system supports granular text selection within the assistant interface and document views. This allows users to "point" at specific information for the AI assistant.
Assistant Text Selection Manager
The AssistantTextSelectionManager tracks user highlights and provides a contextual HighlightTooltip. This tooltip offers actions such as "Reply" (adding the excerpt to the chat context) or "Doc" (creating a new document from the selection).
Multi-Select Mode
When in multi-select mode, the system can accumulate several distinct highlights across various messages. These are stored in the UIStore and can be processed as a batch to generate a comprehensive study document or summary.
Sources: src/components/assistant-ui/AssistantTextSelectionManager.tsx:645-690
Spatial Layout & Grid Management
Workspace items are arranged on a grid system. The layout logic ensures that new items (documents, quizzes, or media) are placed in available slots without overlapping existing content.
Layout Constants
The system defines standard footprints for various content types during auto-generation:
- YouTube: 2x7 grid units
- Document: 2x9 grid units
- Quiz: 2x13 grid units
- PDF: 1x4 (initial) or 2x8 (image) units
Sources: src/app/api/workspaces/autogen/route.ts:40-48
Positioning Logic
The findNextAvailablePosition helper (from grid-layout-helpers.ts) scans the current workspace state to find the first valid X, Y coordinate that can accommodate the specific dimensions (W, H) of a new card.
Sources: src/lib/workspace-state/grid-layout-helpers.ts, src/app/api/workspaces/autogen/route.ts:250-275
Context Formatting for AI
The results of canvas interactions (selected cards) are formatted into a structured XML-like context for the AI model. This context includes:
- Paths and Metadata: Virtual paths, item types, and names.
- Viewing State: Items marked with
(currently viewing)receive higher priority in AI reasoning. - Content Extraction: Tools like
readWorkspaceorsearchWorkspaceare used to fetch the full content of selected cards on-demand.
Sources: src/lib/utils/format-workspace-context.ts:15-80, src/lib/utils/format-workspace-context.ts:290-330
Workspace Metadata Table
| Metadata Field | Description |
|---|---|
activePage | For PDFs, indicates the specific page the user is currently focused on. |
processingStatus | For media like audio, indicates if transcription/OCR is complete. |
virtualPath | The logical location (e.g., folder/document.md) within the workspace. |
Sources: src/lib/utils/format-workspace-context.ts:25-55
Summary
Canvas Interactions & Marquee form the core of ThinkEx's "visual desk" metaphor. By combining rectangular card selection (Marquee), granular text highlighting (Assistant Selection), and intelligent grid placement, the system provides a fluid environment for organizing multi-modal information. These interactions directly feed into the AI context, ensuring that the assistant's reasoning is grounded in the specific materials the user has arranged and selected on their canvas.