Obsidian Canvas is pretty awesome. But it CAN be perfect. ( An Obsidian Plugin Pitch )

Plugins ideas
,
1

Hey Obsidian folks,

I’m absolutely in love with Obsidian Canvas. It’s revolutionized the way I think and organize my notes. But, as much as I adore it, there’s one thing that drives my slightly OCD brain bonkers: keeping layouts organized when things change.

TLDR:

I’m reaching out to the amazing Obsidian developer community for help to make Obsidian Canvas into the ultimate layout powerhouse it should be!

My Canvas Conundrum (a.k.a. OCD Nightmare):

I have a bit of an obsession with keeping my canvases organized. But I found that I spend way too much time nudging nodes into place and adjusting group sizes whenever things shift around. fiddling with node positions and group sizes scratches my OCD itch but it’s incredibly time wasting and mostly feels like a never-ending game of Tetris where the pieces keep shifting and I’m achieving nothing !

This frustration has inspired a vision for a game-changing plugin, one that would borrow the magic of Figma’s “Constraints” feature and bring it to Obsidian Canvas. Picture this:

Canvas Constraints plugin

Let’s Outline the Plugin’s Functionality (Matching Figma’s Constraints Feature):

  1. Target Users: Obsidian Canvas users who want more control over the layout and responsiveness of their canvas designs.
  2. Core Feature:
  • Node Constraints:
    • Horizontal: Left, Center, Right, Scale (Width)
    • Vertical: Top, Center, Bottom, Scale (Height)
  • Group Spacing:
  • Maintain Distance: Allow users to specify a fixed distance between the node and the group’s edges.
  • Stretch: Similar to Figma’s Left & Right/Top & Bottom, nodes expand/contract to fill the group while maintaining margins.
  1. UI/UX:
  • Constraints Menu: A new button/icon in the canvas node menu that triggers a submenu with constraint options.
  • Visual Indicators: Optionally, visual cues (e.g., dashed lines) could indicate the applied constraints for each node.
  1. Behavior:
  • Node Selection: Apply constraints to single or multiple selected nodes within a group.
  • Node constraints : Lock individual nodes to the edges or center of their parent group (Left, Center, Right, Top, Bottom). that would allow nodes to scale proportionally with their group (so images always fit perfectly), or even stretch to fill the available space.
  • Group Resizing: When a group is resized, the plugin automatically recalculates the position/size of nodes based on their constraints.
  • Group spacing: Keep a consistent spacing between groups, no matter how I resize them and prevent groups from overlapping or getting too cozy, ensuring my canvas stays tidy.
  • Nested Groups: The plugin should handle constraints within nested groups, similar to Figma.
  1. Technical Details:
  • Obsidian Canvas API: Utilize the API to access and manipulate canvas groups and nodes.
  • Event Listeners: Monitor for group resizing events to trigger constraint calculations.
  • Performance Optimization: Ensure smooth performance, especially with larger canvases and complex layouts.

Implementation Phases (Suggested Order):

  1. Basic Constraint Functionality: Start by implementing the core constraints (Left, Center, Right, Top, Bottom, Scale) for both horizontal and vertical axes.
  2. UI Development: Create the constraints menu and any visual indicators (if desired).
  3. Multi-Node Selection: Enable applying constraints to multiple selected nodes.
  4. Additional Constraints: Add the optional “Maintain Distance” and “Stretch” constraints.
  5. Nested Group Support: Handle constraints within nested groups.
  6. Performance Tuning: Optimize the plugin’s calculations and rendering for efficiency.

Why I believe this plugin would make Canvas :

  • End the Layout Madness: No more manual adjustments every time I add a new note or resize a group.
  • Pure Creative Flow: Instead of battling with my Canvas, I could focus on the joy of connecting ideas and building knowledge.
  • Effortless Organization: layouts would stay neat and tidy without needing to constantly micromanage them.
  • Responsive Design: canvases would look fantastic on any screen, big or small . as you could simply resize a group to any ratio you want.

I’m not a coder myself, but I have a pretty good idea of what this plugin could do. I’m eager to collaborate with someone who can bring this vision to life! If you’re a developer with a passion for user experience, please get in touch. Let’s make Canvas even more awesome!

Thanks for reading.

here’s the link for this reddit post with the demo included :
https://www.reddit.com/r/ObsidianMD/comments/1ekmfa5/obsidian_canvas_is_pretty_awesome_but_it_can_be/

2 Likes