diff options
author | lonkaars <loek@pipeframe.xyz> | 2021-05-23 18:51:16 +0200 |
---|---|---|
committer | lonkaars <loek@pipeframe.xyz> | 2021-05-23 18:51:16 +0200 |
commit | 1374c9b56288bb2ec019f5e7b6b6a8d66c2c3f5f (patch) | |
tree | 1420632671c0233b790400319c2c57896403a90e | |
parent | efe8ae1933f74a0f37e22110eaa1e5dca99463cd (diff) |
loop drag works :tada:
-rw-r--r-- | pages/editor.tsx | 22 |
1 files changed, 20 insertions, 2 deletions
diff --git a/pages/editor.tsx b/pages/editor.tsx index 9bf8391..03752d6 100644 --- a/pages/editor.tsx +++ b/pages/editor.tsx @@ -65,9 +65,27 @@ function TimelineKeyframe(props: { var timelineZoom = getTimelineZoom((st: any) => st.zoom); // drag keyframe - useDrag(({ xy: [x, _y] }) => { + var [startOffset, setStartOffset] = useState(0); + var [endOffset, setEndOffset] = useState(0); + useDrag(({ xy: [x, _y], first }) => { var frame = Math.max(0, Math.round(getFrameAtOffset(x - 240, timelineZoom)) - 1); - api.start({ frame }); + + if (props.slide.type == 'loop') { + if (first) { + var startFrame = spring.begin.toJSON(); + var endFrame = spring.frame.toJSON(); + var grabFrameOffset = frame; + + setStartOffset(startFrame - grabFrameOffset); + startOffset = startFrame - grabFrameOffset; + + setEndOffset(endFrame - grabFrameOffset); + endOffset = endFrame - grabFrameOffset; + } + api.start({ begin: frame + startOffset, frame: frame + endOffset }); + } else { + api.start({ frame }); + } }, { domTarget: dragRef, eventOptions: { passive: false } }); if (props.slide.type == 'loop') { |