OpenNoodl/dev-docs/tasks/phase-9-styles-overhaul/CLEANUP-SUBTASKS/TASK-000J-canvas-organisation-system/CHANGELOG.md

TASK-000J Changelog

Overview

This changelog tracks the implementation of the Canvas Organization System, including Smart Frames, Canvas Navigation, Vertical Snap + Push, and Connection Labels.

Implementation Phases

1. Phase 1: Smart Frames
2. Phase 2: Canvas Navigation
3. Phase 3: Vertical Snap + Push
4. Phase 4: Connection Labels

---

[Date TBD] - Task Created

Summary

Task documentation created for Canvas Organization System.

Files Created

• dev-docs/tasks/phase-3/TASK-000J-canvas-organization/README.md - Full task specification
• dev-docs/tasks/phase-3/TASK-000J-canvas-organization/CHECKLIST.md - Implementation checklist
• dev-docs/tasks/phase-3/TASK-000J-canvas-organization/CHANGELOG.md - This file
• dev-docs/tasks/phase-3/TASK-000J-canvas-organization/NOTES.md - Working notes

Context

This task was created to address canvas organization challenges in complex node graphs. The primary issues being solved:

1. Vertical node expansion breaking carefully arranged layouts
2. No persistent groupings for related nodes
3. Difficulty navigating large canvases
4. Undocumented connection data flow

The design prioritizes backward compatibility with existing projects and opt-in complexity.

---

Template for Future Entries

## [YYYY-MM-DD] - Session N.X: [Phase/Feature Name]

### Summary
[Brief description of what was accomplished]

### Files Created
- `path/to/file.tsx` - [Purpose]

### Files Modified
- `path/to/file.ts` - [What changed and why]

### Technical Notes
- [Key decisions made]
- [Patterns discovered]
- [Gotchas encountered]

### Testing Notes
- [What was tested]
- [Any edge cases discovered]

### Next Steps
- [What needs to be done next]

---

Progress Summary

Phase	Feature	Status	Date Started	Date Completed
1.1	Data Model Extension	Not Started	-	-
1.2	Basic Containment - Drag In	Not Started	-	-
1.3	Basic Containment - Drag Out	Not Started	-	-
1.4	Group Movement	Not Started	-	-
1.5	Auto-Resize	Not Started	-	-
1.6	Collapse UI	Not Started	-	-
1.7	Collapsed Rendering	Not Started	-	-
1.8	Polish & Edge Cases	Not Started	-	-
2.1	Minimap Component Structure	Not Started	-	-
2.2	Coordinate Transformation	Not Started	-	-
2.3	Viewport and Click Navigation	Not Started	-	-
2.4	Toggle and Integration	Not Started	-	-
2.5	Jump Menu	Not Started	-	-
3.1	Attachment Data Model	Not Started	-	-
3.2	Edge Proximity Detection	Not Started	-	-
3.3	Visual Feedback	Not Started	-	-
3.4	Attachment Creation	Not Started	-	-
3.5	Push Calculation	Not Started	-	-
3.6	Detachment	Not Started	-	-
3.7	Alignment Guides	Not Started	-	-
4.1	Bezier Utilities	Not Started	-	-
4.2	Data Model Extension	Not Started	-	-
4.3	Hover State and Add Icon	Not Started	-	-
4.4	Inline Label Input	Not Started	-	-
4.5	Label Rendering	Not Started	-	-
4.6	Label Interaction	Not Started	-	-

---

Blockers Log

Track any blockers encountered during implementation

Date	Blocker	Resolution	Time Lost
-	-	-	-

---

Performance Notes

Track any performance observations

Scenario	Observation	Action Taken
Many nodes in Smart Frame	-	-
Minimap with 10+ frames	-	-
Long attachment chains	-	-
Many connection labels	-	-

---

Design Decisions Log

Record important design decisions and their rationale

Date	Decision	Rationale	Alternatives Considered
-	Smart Frames extend Comments	Backward compatibility; existing infrastructure	New model from scratch
-	Opt-in containment (drag in/out)	No forced migration; user controls	Auto-detect based on position
-	Vertical-only attachment	Horizontal would interfere with connections	Full 2D magnetic grid
-	Label on hover icon	Consistent with existing delete icon	Right-click context menu

---

Backward Compatibility Notes

Track any compatibility considerations

Legacy Feature	Impact	Migration Path
Comment boxes	None - work unchanged	Optional: drag nodes in to convert
Comment colors	Preserved	Smart Frames inherit
Comment fill styles	Preserved	Smart Frames inherit
Comment text	Preserved	Becomes frame title

---

API Changes

Track any public API changes for future reference

CommentsModel

// New methods
addNodeToFrame(commentId: string, nodeId: string): void
removeNodeFromFrame(commentId: string, nodeId: string): void
toggleCollapse(commentId: string): void
isSmartFrame(comment: Comment): boolean
getFrameContainingNode(nodeId: string): Comment | null

// Extended interface
interface Comment {
  // ... existing
  containedNodeIds?: string[];
  isCollapsed?: boolean;
  autoResize?: boolean;
}

Connection Model

// Extended interface
interface Connection {
  // ... existing
  label?: {
    text: string;
    position: number;
  }
}

AttachmentsModel (New)

interface VerticalAttachment {
  topNodeId: string;
  bottomNodeId: string;
  spacing: number;
}

class AttachmentsModel {
  createAttachment(topId: string, bottomId: string, spacing: number): void
  removeAttachment(topId: string, bottomId: string): void
  getAttachedBelow(nodeId: string): string | null
  getAttachedAbove(nodeId: string): string | null
  getAttachmentChain(nodeId: string): string[]
}

---

Files Changed Summary

Updated as implementation progresses

Created

• packages/noodl-editor/src/editor/src/views/CommentLayer/SmartFrameUtils.ts
• packages/noodl-editor/src/editor/src/views/CanvasNavigation/CanvasNavigation.tsx
• packages/noodl-editor/src/editor/src/views/CanvasNavigation/Minimap.tsx
• packages/noodl-editor/src/editor/src/views/CanvasNavigation/JumpMenu.tsx
• packages/noodl-editor/src/editor/src/models/attachmentsmodel.ts
• packages/noodl-editor/src/editor/src/utils/bezier.ts

Modified

• packages/noodl-editor/src/editor/src/models/commentsmodel.ts
• packages/noodl-editor/src/editor/src/views/CommentLayer/CommentLayerView.tsx
• packages/noodl-editor/src/editor/src/views/CommentLayer/CommentForeground.tsx
• packages/noodl-editor/src/editor/src/views/CommentLayer/CommentBackground.tsx
• packages/noodl-editor/src/editor/src/views/nodegrapheditor.ts
• packages/noodl-editor/src/editor/src/views/commentlayer.ts
• packages/noodl-editor/src/editor/src/views/nodegrapheditor/NodeGraphEditorNode.ts
• packages/noodl-editor/src/editor/src/views/nodegrapheditor/NodeGraphEditorConnection.ts
• packages/noodl-editor/src/editor/src/views/documents/EditorDocument/EditorDocument.tsx
• packages/noodl-editor/src/editor/src/utils/editorsettings.ts
• packages/noodl-editor/src/editor/src/models/nodegraphmodel.ts