added pseudo-loopBegin slide for selecting

3 files changed, 17 insertions, 3 deletions

diff --git a/components/selection.tsx b/components/selection.tsx
index 52096df..4be9767 100644
--- a/components/selection.tsx
+++ b/components/selection.tsx
@@ -5,6 +5,7 @@ type cornerTypes = 'round' | 'diamond' | 'square' | 'square-s';
 var slideTypeToCornerType = {
 	default: 'diamond',
 	loop: 'square',
+	loopBegin: 'square',
 	speedChange: 'square',
 	delay: 'round',
 };
diff --git a/pages/editor.tsx b/pages/editor.tsx
index abb7b5e..1f79699 100644
--- a/pages/editor.tsx
+++ b/pages/editor.tsx
@@ -2,7 +2,7 @@ import { CSSProperties, ReactNode, useEffect, useRef, useState } from 'react';
 import { animated, useSpring } from 'react-spring';
 import { useDrag } from 'react-use-gesture';
 import create from 'zustand';
-import { anySlide, loopSlide, slide, slideTypes, toolToSlide } from '../timeline';
+import { anySlide, loopBeginSlide, loopSlide, slide, slideTypes, toolToSlide } from '../timeline';
 import { TimedVideoPlayer } from './present';
 
 import AppBar from '@material-ui/core/AppBar';
@@ -70,7 +70,8 @@ var useFrame = create(set => ({
 function calculateSelectionOffsets(left: slideTypes, right: slideTypes) {
 	var offsets = {
 		default: { left: -6, right: 6 },
-		loop: { left: -2, right: 1 },
+		loop: { left: -3, right: 1 },
+		loopBegin: { left: -1, right: 3 },
 		delay: { left: -6, right: 6 },
 		speedChange: { left: -6, right: 6 },
 	};
@@ -409,7 +410,15 @@ function TimelineEditor(props: {
 			if (distanceTraveled <= minDistance) setSelectionHidden(true);
 			else {
 				var endingFrame = startingFrame + frameWidth;
-				var keyframesInSelection = player.timeline.slides.filter((slide: anySlide) =>
+				var expandedTimeline = new Array(...player.timeline.slides);
+				for (let i = 0; i < expandedTimeline.length; i++) {
+					var slide = expandedTimeline[i];
+					if (slide.type != 'loop') continue;
+					var beginFrame = (slide as loopSlide).beginFrame;
+					expandedTimeline.splice(i, 0, new loopBeginSlide(beginFrame));
+					i++;
+				}
+				var keyframesInSelection = expandedTimeline.filter((slide: anySlide) =>
 					slide.frame >= Math.floor(startingFrame) && slide.frame <= Math.ceil(endingFrame)
 				);
 
diff --git a/timeline.ts b/timeline.ts
index b39d55d..ade936e 100644
--- a/timeline.ts
+++ b/timeline.ts
@@ -29,6 +29,10 @@ export class loopSlide extends slide {
 	playbackType: 'PingPong' | 'Normal' = 'Normal';
 }
 
+export class loopBeginSlide extends slide {
+	type = 'loopBegin' as slideTypes;
+}
+
 export var toolToSlide = {
 	default: slide,
 	delay: delaySlide,