Devlog #4: Focus Mode + Branching + Recenter

The product is almost coming to an end and here are some final features i added:

1. Branch Folding:
   I added a tiny dropdown button to the bottom of each of the nodes that allows the user to collapse their branches.

How it works: Instead of writing complex JavaScript to check if a node has children, I used the modern CSS :has() selector (.node:has(> .children > .node)). The browser automatically figures out if a branch has children and fades the button in for me. Clicking it toggles a .collapsed class that hides the tree below.

I also wired the Fork() button and Ctrl+Enter shortcuts to automatically unfold a branch if you try to add a new child to a collapsed node, so you never spawn invisible data.

1. There was a probem however. Everytime i delete or add a branch, the screen jerks and moves somewhere else. This was the hardest technical hurdle. Because the canvas is massive, whenever I used JavaScript to .focus() a new text box, the browser’s native engine would mess up everything. It tried to auto-scroll to center the text box, which contradicted my pan engine, causing the screen to jerk wildly.

How I fixed it: I disabled the native and scrollbars (overflow: hidden; overscroll-behavior: none), intercepted any native window.scrollTo events to force them to 0, and applied {preventScroll: true} to every text box.

1. Once I disabled the browser’s native scrolling, the “camera” wouldn’t follow me when I navigated off-screen. I had to build a custom “camera”:

• Flexbox centering breaks when elements resize (like when collapsing a branch), causing the whole tree to shift. I fixed this by making the canvas 100,000px wide container and locking the transform origin to 0,0. The root node sits permanently at exactly 50,000 pixels. It never moves.Smart Panning: I wrote a math function that calculates the exact pixel center of the active text box, compares it to the physical center of the user’s monitor, and glides the canvas coordinates (panX, panY) to align them perfectly.

• Zoom-to-Center: I upgraded the mouse-wheel math to calculate where your cursor is relative to the screen, adjusting the pan coordinates while scaling so it zooms smoothly into your target instead of shooting off

1. Focus Mode: I also added a Focus Mode (Cmd+Shift+F). When you are deep in work, the sheer number of boxes is overwhelming.

How it works: It strips away the background grid and dims every single node and connecting line to 15% opacity. Using JavaScript’s focusin event, it tracks exactly which box you are typing in and fully illuminates it. Using CSS :has(), I tell the browser to look up the DOM tree and keep the parent nodes semi-illuminated at 60% opacity, creating a “trail” leading back to your root thought.

The focus mode is shown in the picture attached below: