Visual Canvas

​

Overview

The visual canvas is ThinkEx’s flexible layout system that lets you arrange content cards in a responsive grid. Unlike traditional linear note-taking apps, the canvas gives you spatial freedom to organize information in a way that reflects your thinking process.

​

Grid Layout System

​

Responsive Grid

ThinkEx uses a responsive grid system that adapts to your screen size:

• Desktop (4 columns) - Full workspace view with maximum flexibility
• Mobile (1 column) - Stacked vertical layout for easy scrolling

​

Card Positioning

Each content card occupies a position on the grid defined by:

• X coordinate - Horizontal position (column)
• Y coordinate - Vertical position (row)
• Width - Number of columns the card spans
• Height - Number of rows the card occupies

​

Working with Cards

​

Drag and Drop

Reposition cards easily:

1. Click and hold the card header or title area
2. Drag the card to a new position
3. Release to place the card
4. Other cards automatically adjust to prevent overlaps

​

Resizing Cards

Adjust card dimensions to fit your content:

• Hover over card edges to reveal resize handles
• Click and drag the edges or corners to resize
• Different card types have minimum and maximum size constraints

​

Card Size Guidelines

​

Multi-Select Operations

​

Selecting Multiple Cards

Select multiple cards for batch operations:

• Click checkmark - Hover over a card and click the selection indicator
• Shift+click - Click while holding Shift to add to selection
• Drag select - Click and drag on empty space to draw a selection box
• Marquee selection - Select multiple cards at once by drawing a box around them

​

Batch Actions

With multiple cards selected, you can:

• Move to folder - Organize multiple cards at once
• Delete - Remove several cards together
• Add to AI context - Give the AI assistant access to multiple cards

​

Folders and Organization

​

Folder Cards

Folders appear as special cards on the canvas:

• Clickable - Open a folder to view only its contents
• Visual containers - Provide structure without rigid hierarchy
• Breadcrumb navigation - Easily return to the root workspace view

​

Moving Items to Folders

​

Layout Behavior

​

Auto-Compaction

The canvas automatically:

• Eliminates gaps - Cards move up to fill empty vertical space
• Prevents overlaps - Pushes cards down when placing items above
• Maintains relative positions - Cards stay near their intended location

​

Layout Persistence

Your layout is:

• Automatically saved as you drag and resize
• Responsive-aware - Separate layouts for desktop and mobile
• Restored on reload - Your arrangement persists across sessions

​

Filtered Views

When searching or filtering:

• Layout is preserved - Items maintain their positions
• Non-matching items hidden - Focus on relevant content
• No layout saves during search - Prevents accidental reorganization

​

Canvas Interactions

​

Context Menus

Right-click on cards or empty space for quick actions:

• Card menu - Edit, delete, move, or duplicate
• Folder menu - Open, rename, or delete with contents
• Canvas menu - Create new items directly where you click

​

Keyboard Shortcuts

Enhance your workflow with shortcuts:

• Shift+click - Multi-select cards
• Cmd/Ctrl+A - Select all visible cards
• Escape - Clear selection
• Delete - Remove selected cards

​

Performance Optimizations

​

Smart Rendering

The canvas optimizes performance by:

• Debouncing layout changes - Reduces unnecessary saves
• Memoizing card components - Prevents excessive re-renders
• Virtual scrolling ready - Handles large workspaces smoothly

​

Best Practices

​

Effective Layout Strategies

1. Group related content - Place related cards near each other
2. Size by importance - Make key information larger and more prominent
3. Use folders for scale - As workspaces grow, organize into folders
4. Leave breathing room - Don’t overcrowd the canvas

​

Visual Hierarchy

• Top of canvas - Most important or current work
• Larger cards - Key reference materials or active projects
• Grouped items - Related concepts positioned together
• Folders - Archive completed work or organize by category

​

Next Steps