Inspired by @buggyj’s and @well-noted’s recent work, I asked myself whether AI could help solving my longest unfullfilled TW-Wish: The perfect Canvass.
A canvas widget brings powerful visual organization capabilities.
There are several attempts, but all the candidates lack some feature that would be desirable.
It is difficult to try to work with a big library like excalidraw or tldraw with an AI, because they are to heavy for the context that an AI can work with. But could it be possible to design the canvas in a modular way that an AI like Claude could develop the functionality thread by thread? I tried to design the modules (with the help of Claude)
What do you think of the concept of the canvass and the production?
Core Architecture
The plugin would consist of these primary components:
-
Canvas Core: Handles rendering, state management, and event delegation
-
Navigation Module: Manages zooming, panning, and viewport transformations
-
Tiddler Management: Handles tiddler representation, dragging, resizing
-
Import/Export: Manages dragging in links and temporary tiddler creation
-
Canvas Linking and embedding: Allows canvas-to-canvas navigation
-
Drawing and Writing: Creates SVG-Overlays
Plugin Structure
Here’s how we could organize the functionality:
1. Core Plugin Tiddlers
$:/plugins/JJ/canvas/
├── plugin.info
├── core.js # Main canvas implementation
├── canvas.tid # Widget definition
├── styles.tid # CSS for canvas elements
├── toolbar.tid # Canvas toolbar UI
├── config.tid # User configuration options
└── startup-hook.js # Initialization hook
2. Canvas Navigation Module
$:/plugins/JJ/canvas/navigation/
├── navigator.js # Zoom/pan implementation
├── viewport.js # Viewport calculations
├── minimap.js # Optional minimap view
└── controls.tid # Navigation UI controls
3. Tiddler Management Module
$:/plugins/JJ/canvas/tiddlers/
├── tiddler-node.js # Tiddler representation on canvas
├── node-template.tid # Template for tiddler views
├── node-controls.tid # UI for manipulating nodes
├── resize-handler.js # Resize functionality
└── drag-handler.js # Drag functionality
4. Import/Export Module
$:/plugins/JJ/canvas/import/
├── drop-handler.js # Handle dropping links/tiddlers
├── external-source.js # Handle external wiki imports
├── temp-tiddler.tid # Temporary tiddler display and functionality
├── converter.js # Convert temp to permanent tiddlers
5. Canvas Linking Module
$:/plugins/JJ/canvas/linking/
├── canvas-link.js # Canvas-to-canvas navigation
├── link-renderer.js # Visual representation of links
└── link-controls.tid # UI for creating/editing links
6. The write and draw Module
$:/plugins/JJ/canvas/draw/
├──
├──
└──
Implementation Features
-
Infinite Canvas
-
Use a virtual coordinate system with viewport transformation
-
Store positions as relative coordinates rather than pixels
-
Implement efficient rendering that only draws visible elements
-
-
Zoom Functions
-
Mouse wheel zooming with focus on cursor position
-
Zoom to fit all content
-
Zoom to selected tiddler
-
Semantic zoom (simplify content at different zoom levels)
-
Tiddler Display
-
Tiddler as Card with wikified content
-
Tiddler as header
-
Cut-out obeject (like a clock or a photo)
-
Tiddler Handling
-
Drag tiddlers onto canvas (from links or other wikis)
-
Create temporary shadow copies when dragging in material initially not in the wiki, like a post from a comatible chat.
-
UI to “solidify” temporary tiddlers into permanent ones
-
Preserve original metadata and add canvas-specific data
-
-
Canvas Navigation
-
Canvas tiddlers should be clickable to open nested canvases
-
Breadcrumb navigation to move up/down canvas hierarchy
-
History tracking for forward/back navigation
-
-
Import/Export
-
Drag-and-drop WikiText links to create canvas nodes
-
External tiddler import with preview
-
Canvas export/sharing options
-
Save canvas state/layout as a separate tiddler
-
Further Feature
-
Grouping: Allow tiddlers to be grouped and collapsed/expanded
-
Themes: Support for different visual styles of the canvas
-
Templates: Different visual representations for tiddlers on canvas
-
Relationships: Visual connections between related tiddlers
-
Visually draw lines between Tiddlers to link them. Create a slideshow with a red thread.
-
Tags visualization: Show tag relationships visually on canvas
-
-
Auto-layout: Automatically arrange tiddlers in hierarchical or network layouts
-
Presentation mode: Use canvas as a presentation tool with predefined paths
-
Search and filter integration: Highlight/find tiddlers on canvas that match search terms, shrink display to tiddlers that match filter criteria.
Data Structure
The canvas state could be stored in a JSON structure within a tiddler:
{
"nodes": [
{
"id": "TiddlerTitle",
"x": 100,
"y": 200,
"width": 300,
"height": 200,
"display": "card|header|cut-out",
"scale": 1,
"type": "regular|temp|canvas",
"zIndex": 5,
"alias": "Alias Title"
}
],
"links": [
{
"from": "TiddlerA",
"to": "TiddlerB",
"type": "default|reference|dependency",
"points": [{"x": 10, "y": 20}, {"x": 30, "y": 40}]
}
],
"viewport": {
"centerX": 500,
"centerY": 300,
"scale": 1
}
}