search

xzdarcy / react-timeline-editor

react-timeline-editor is a react component used to quickly build a timeline animation editor.
https://zdarcy.com/
MIT License
284 stars 82 forks source link

How do I do the right side padding? #26

Open ShahriarDhruvo opened 1 year ago

ShahriarDhruvo commented 1 year ago

How do I do the right side padding? For left side you take something like <Timeline .... startLeft={40} /> As you can see for custom scale the right side of the scale can also get chopped :(

I realised that you can do this: <Timeline ... getScaleRender={(scale) => <span style={{'color': '#ffaa11', 'margin-right': '30px';}}>{scale}</span>} /> But it's not correct as it'll also shift the entire scale! image

image

ShahriarDhruvo commented 1 year ago

As a work around for 4.458s video I did Math.ceil() to it to make it 5. And right now it looks like this image It looks broken but do my job. I also realized you cannot set a partial scale i.e if you want a scale of 4.5 you can't do that you either have to set a scale of 4 and ignore that 0.5 or set a scale of 5 and allow user to drag the actions beyond the maximum limit, which is not right :( And also without the right padding option this will always look broken.

Oh yeah after the maximum cursor limit on v0.1.9 you can drag the cursor beyond the video duration limit and as my actions maximumEnd is set to video duration you can't drag those action beyond that. So maybe you can take a prop which will set the cursor limit by the user? That can solve this issue somewhat. But I think a proper implementation is to allow partial scaling to 0.01 accuracy (so that I can set a scale of 4.458) and have a right side padding to avoid that artifact.

Thanks