From 1374c9b56288bb2ec019f5e7b6b6a8d66c2c3f5f Mon Sep 17 00:00:00 2001
From: lonkaars <loek@pipeframe.xyz>
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/editor.tsx')

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

