sorta working resizeable loops

3 files changed, 41 insertions, 24 deletions

diff --git a/components/icons.tsx b/components/icons.tsx
index 954f516..50bf8f0 100644
--- a/components/icons.tsx
+++ b/components/icons.tsx
@@ -1,3 +1,4 @@
+import { Ref } from 'react';
 import { keyframeTypes } from '../timeline';
 
 export function PressureIcon() {
diff --git a/components/loop.tsx b/components/loop.tsx
deleted file mode 100644
index f459ab5..0000000
--- a/components/loop.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { CSSProperties } from 'react';
-import { SlideKeyframe } from './icons';
-
-export default function Loop(props: {
-	length: number;
-}) {
-	return <div style={{ '--loop-length': props.length } as CSSProperties} className='loop'>
-		<SlideKeyframe type='loop' />
-		<div className='connector dispinbl' />
-		<SlideKeyframe type='loop' loopEnd />
-	</div>;
-}
diff --git a/pages/editor.tsx b/pages/editor.tsx
index e3607e6..2a1dbef 100644
--- a/pages/editor.tsx
+++ b/pages/editor.tsx
@@ -52,32 +52,60 @@ var useFrame = create(set => ({
 function TimelineKeyframe(props: {
 	slide: slide | delaySlide | loopSlide | speedChangeSlide;
 }) {
-	var ref = useRef(null);
-	var [spring, api] = useSpring(
-		() => ({
-			frame: props.slide.frame,
-			config: { mass: 0.5, tension: 500, friction: 20 },
-		}),
-	);
+	var dragRef = useRef(null);
+	var loopStartRef = useRef(null);
+	var loopEndRef = useRef(null);
+
+	var [spring, api] = useSpring(() => ({
+		frame: props.slide.frame,
+		begin: (props.slide as loopSlide).beginFrame || 0,
+		config: { mass: 0.5, tension: 500, friction: 20 },
+	}));
 
 	var timelineZoom = getTimelineZoom((st: any) => st.zoom);
 
+	// drag keyframe
 	useDrag(({ xy: [x, _y] }) => {
 		var frame = Math.max(0, Math.round(getFrameAtOffset(x - 240, timelineZoom)) - 1);
-		console.log(frame);
 		api.start({ frame });
-	}, { domTarget: ref, eventOptions: { passive: false } });
+	}, { domTarget: dragRef, eventOptions: { passive: false } });
+
+	if (props.slide.type == 'loop') {
+		// loop start
+		useDrag(({ xy: [x, _y] }) => {
+			var frame = Math.max(0, Math.round(getFrameAtOffset(x - 240, timelineZoom)) - 1);
+			api.start({ begin: frame });
+		}, { domTarget: loopStartRef, eventOptions: { passive: false } });
+
+		// loop end
+		useDrag(({ xy: [x, _y] }) => {
+			var frame = Math.max(0, Math.round(getFrameAtOffset(x - 240, timelineZoom)) - 1);
+			api.start({ frame });
+		}, { domTarget: loopEndRef, eventOptions: { passive: false } });
+	}
 
 	return <animated.div
 		className='frame posabs'
 		style={{ '--frame': spring.frame } as CSSProperties}
 		id={'slide-' + props.slide.id}
-		ref={ref}
 	>
 		<div className='keyframeWrapper posabs abscenterh'>
 			{props.slide.type == 'loop'
-				? <Loop length={props.slide.frame - (props.slide as loopSlide).beginFrame} />
-				: <SlideKeyframe type={props.slide.type} />}
+				? <div
+					style={{ '--loop-length': spring.frame.toJSON() - spring.begin.toJSON() } as CSSProperties}
+					className='loop'
+				>
+					<span className='dispinbl start' ref={loopStartRef}>
+						<SlideKeyframe type='loop' />
+					</span>
+					<div className='connector dispinbl' ref={dragRef} />
+					<span className='dispinbl end' ref={loopEndRef}>
+						<SlideKeyframe type='loop' loopEnd />
+					</span>
+				</div>
+				: <span ref={dragRef}>
+					<SlideKeyframe type={props.slide.type} />
+				</span>}
 		</div>
 	</animated.div>;
 }