selection working (with offsets) :tada:

2 files changed, 39 insertions, 4 deletions

diff --git a/components/selection.tsx b/components/selection.tsx
index a039f79..bcc1656 100644
--- a/components/selection.tsx
+++ b/components/selection.tsx
@@ -69,12 +69,13 @@ export default function Selection(props: {
 	left?: slideTypes;
 	right?: slideTypes;
 	className?: string;
+	widthOffset?: number;
 }) {
-	var small = props.width < 24 || props.height < 24 || !props.left || !props.right;
+	var small = (props.width + props.widthOffset) < 24 || props.height < 24 || !props.left || !props.right;
 	return <div
 		className={'selection ' + props.className}
 		style={{
-			width: `calc(var(--zoom) * ${props.frameWidth} * 1px + 12px)`,
+			width: `calc(var(--zoom) * ${props.frameWidth} * 1px + 12px + ${props.widthOffset} * 1px)`,
 			height: props.height,
 			'--corner-size': small ? '6px' : '12px',
 		} as CSSProperties}
diff --git a/pages/editor.tsx b/pages/editor.tsx
index 7c51dce..be8e0c6 100644
--- a/pages/editor.tsx
+++ b/pages/editor.tsx
@@ -67,6 +67,20 @@ var useFrame = create(set => ({
 	setFrame: (newFrame: number) => set(() => ({ currentFrame: newFrame })),
 }));
 
+function calculateSelectionOffsets(left: slideTypes, right: slideTypes) {
+	var offsets = {
+		default: { left: -6, right: 6 },
+		loop: { left: -2, right: 1 },
+		delay: { left: -6, right: 6 },
+		speedChange: { left: -6, right: 6 },
+	};
+
+	var offsetLeft = offsets[left].left;
+	var offsetWidth = offsets[right].right - offsetLeft;
+
+	return [offsetLeft, offsetWidth];
+}
+
 function TimelineKeyframe(props: {
 	slide: slide;
 }) {
@@ -344,8 +358,11 @@ function TimelineEditor(props: {
 		y1: 0,
 		x2: 0,
 		y2: 0,
+		center: 0,
 		startingFrame: 0,
 		frameWidth: 0,
+		startOffset: 0,
+		widthOffset: 0,
 		config: { mass: 0.5, tension: 500, friction: 20 },
 	}));
 	var selectionRef = useRef(null);
@@ -357,6 +374,11 @@ function TimelineEditor(props: {
 		if (selectionHidden && distanceTraveled > minDistance) setSelectionHidden(false);
 		if (selectionLeftType) setSelectionLeftType(null);
 		if (selectionRightType) setSelectionRightType(null);
+		selectionPosAPI.start({
+			center: 0,
+			startOffset: 0,
+			widthOffset: 0,
+		});
 
 		var timelineInner = document.querySelector('.timeline .timelineInner');
 		var timelineRects = timelineInner.getBoundingClientRect();
@@ -388,14 +410,24 @@ function TimelineEditor(props: {
 					slide.frame >= Math.floor(startingFrame) && slide.frame <= Math.ceil(endingFrame)
 				);
 
-				if (keyframesInSelection.length < 1) return;
+				if (keyframesInSelection.length < 1) {
+					setSelectionHidden(true);
+					return;
+				}
+
 				var left = keyframesInSelection[0];
 				var right = keyframesInSelection[keyframesInSelection.length - 1];
+
+				var [startOffset, widthOffset] = calculateSelectionOffsets(left.type, right.type);
+
 				selectionPosAPI.start({
 					y1: 50,
 					y2: 62,
 					startingFrame: left.frame,
 					frameWidth: right.frame - left.frame,
+					center: 0.5,
+					startOffset,
+					widthOffset,
 				});
 				setSelectionLeftType(left.type);
 				setSelectionRightType(right.type);
@@ -452,7 +484,8 @@ function TimelineEditor(props: {
 					id='selection'
 					className='posabs dispinbl'
 					style={{
-						left: `calc(var(--zoom) * ${selectionPos.startingFrame.toJSON()} * 1px - 6px)`,
+						left: `calc(var(--zoom) * ${selectionPos.startingFrame.toJSON()
+							+ selectionPos.center.toJSON()} * 1px - 6px + ${selectionPos.startOffset.toJSON()} * 1px)`,
 						top: selectionPos.y1.toJSON() - 6,
 					}}
 					children={<Selection
@@ -462,6 +495,7 @@ function TimelineEditor(props: {
 						height={selectionPos.y2.toJSON() - selectionPos.y1.toJSON() + 12}
 						left={selectionLeftType}
 						right={selectionRightType}
+						widthOffset={selectionPos.widthOffset.toJSON()}
 					/>}
 				/>
 			</div>