From 1374c9b56288bb2ec019f5e7b6b6a8d66c2c3f5f Mon Sep 17 00:00:00 2001 From: lonkaars Date: Sun, 23 May 2021 18:51:16 +0200 Subject: loop drag works :tada: --- pages/editor.tsx | 22 ++++++++++++++++++++-- 1 file changed, 20 insertions(+), 2 deletions(-) (limited to 'pages') 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') { -- cgit v1.2.3