MS the node-focusing system "smoothly scrolls" to the target location (perhaps using config set in timeline/timeline-step)
Steps:
- Figure out the widths of everything. (during timeline, lock nodes to max-width)
- Figure out the heights (+sibling orderings) of everything. (during timeline, use locked-width, and assume subsequent initial/un-interacted-with height -- figured out through render, but in a secondary map-ui that is hidden-by-default and has all nodes always expanded/rendered, so that once it's loaded, there's no need for waiting as the timeline progresses)
- Filter out the node-tree to that which is visible.
- Synchronously solve layout, using a new tree-grapher function.
- Instance1 at current (ie. last reached) timeline-step.
- Instance2 at next (ie. next reached) timeline-step.
- The interpolation between the two, is that you start with instance1 viewport (ie. targeting its focus-nodes), then you check instance2; if it's less than
animateDurationseconds away, then you interpolate between i1 viewport and i2 viewport, based on:
const i2AnimateStart = i2.time - Math.min(animateDuration, timeDistFromI1ToI2);
const percentThroughI2Animate = GetPercentFromXToY(i2AnimateStart, i2.time, now);
const finalViewport = Lerp(i1.viewport, i2.viewport, percentThroughI2Animate);
Eventually, this system could be used/extended to also make the regular "Scroll to node" system more robust; but for now, we only need it for the timeline smooth-scrolling functionality.
Implementation steps: ~~1) Get basic animation of nodes/lines working.~~ ~~1.5) Get frame-by-frame capture and export system working (preferably without needing app or extension), combined with instructions to turn those frames into a video (or due it using lib, eg. WASM port).~~ ~~2) Get the "node focusing system" to use smooth scrolling/zooming as well. (use tree-grapher demo as reference)~~ 2.1) Work out the remaining kinks in the smooth animation of the nodes/lines/viewport. (at least enough for frame-by-frame rendering, but preferably enough for realtime playback to be smooth as well) 3) Get node/line animation working truly smoothly. (atm it "jolts" at end of each animation, when nodes are "actually loaded")