app icon indicating copy to clipboard operation
app copied to clipboard

MS the node-focusing system "smoothly scrolls" to the target location (perhaps using config set in timeline/timeline-step)

Open Venryx opened this issue 2 years ago • 1 comments

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 animateDuration seconds 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.

Venryx avatar May 23 '23 01:05 Venryx

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")

Venryx avatar Sep 23 '23 04:09 Venryx