search

ievgennaida / animation-timeline-control

Canvas based TypeScript animation timeline editor.
MIT License
341 stars 59 forks source link

Expandable/collapsible rows #17

Closed marcoqu closed 3 years ago

marcoqu commented 3 years ago

Hi, in the readme I see that you mention an "outline tree", so I suppose you can have expandable/collapsible rows that represent groups of layers. Is it built-in or could you suggest how one would implement it using this library? Thanks for the awesome work

ievgennaida commented 3 years ago

Hello @marcoqu The easiest way to implement a tree is a flat tree structure (flat list of nodes with the level property). You can render it as a list and just add padding for the levels. To sync it with the timeline control you have to follow a few things: 1) Sync nodes/row visibility. 2) Sync scrolling. 3) height of the nodes should be equals to the timeline rows.

I have tried a few react tree libraries but I have disliked them all due to some restrictions or bugs. So usually I am using just a flat list with padding to display it like a tree (for React).

For the angular, I have an example with the default mat-tree: https://github.com/ievgennaida/animator

You can try to compile and open any SVG document then view->animator to see how tree is working with the timeline.

marcoqu commented 3 years ago

Got it, thanks! How would you update row visibility? Is it ok to edit the model in place and call redraw(), or is it better to call setModel() with a new model?

ievgennaida commented 3 years ago

@marcoqu component is keeping references to the existing model, so you can change model properties and call redraw when needed.

marcoqu commented 3 years ago

Thanks!