zoom selection with timeline :tada:

2 files changed, 14 insertions, 4 deletions

diff --git a/components/selection.tsx b/components/selection.tsx
index ad86f9f..a039f79 100644
--- a/components/selection.tsx
+++ b/components/selection.tsx
@@ -65,6 +65,7 @@ function Corner(props: {
 export default function Selection(props: {
 	width: number;
 	height: number;
+	frameWidth: number;
 	left?: slideTypes;
 	right?: slideTypes;
 	className?: string;
@@ -73,7 +74,7 @@ export default function Selection(props: {
 	return <div
 		className={'selection ' + props.className}
 		style={{
-			width: props.width,
+			width: `calc(var(--zoom) * ${props.frameWidth} * 1px + 12px)`,
 			height: props.height,
 			'--corner-size': small ? '6px' : '12px',
 		} as CSSProperties}
diff --git a/pages/editor.tsx b/pages/editor.tsx
index dc74699..5b032c8 100644
--- a/pages/editor.tsx
+++ b/pages/editor.tsx
@@ -342,12 +342,13 @@ function TimelineEditor(props: {
 		y1: 0,
 		x2: 0,
 		y2: 0,
+		startingFrame: 0,
+		frameWidth: 0,
 		config: { mass: 0.5, tension: 500, friction: 20 },
 	}));
 	var selectionRef = useRef(null);
 	useDrag(({ xy: [x, y], initial: [bx, by], first, last, movement: [ox, oy] }) => {
 		if (props.selectedTool != 'cursor') return;
-		// var frame = Math.max(0, Math.round(getFrameAtOffset(x - 240, timelineZoom)) - 1);
 		var minDistance = 5; // minimal drag distance in pixels to register selection
 		var distanceTraveled = Math.sqrt(ox ** 2 + oy ** 2);
 		if (selectionHidden && distanceTraveled > minDistance) setSelectionHidden(false);
@@ -367,13 +368,17 @@ function TimelineEditor(props: {
 		var x2 = x1 + Math.abs(sx);
 		var y2 = y1 + Math.abs(sy);
 
+		var zoom = zoomToPx(timelineZoom);
+		var frameWidth = Math.abs(sx) / zoom;
+		var startingFrame = x1 / zoom;
+
 		if (!selectionActive) setSelectionActive(true);
 		if (last) {
 			setSelectionActive(false);
 			if (distanceTraveled <= minDistance) setSelectionHidden(true);
 		}
 
-		selectionPosAPI[first && selectionHidden ? 'set' : 'start']({ x1, y1, x2, y2 });
+		selectionPosAPI[first && selectionHidden ? 'set' : 'start']({ x1, y1, x2, y2, startingFrame, frameWidth });
 	}, { domTarget: selectionRef, eventOptions: { passive: false } });
 
 	return <>
@@ -424,10 +429,14 @@ function TimelineEditor(props: {
 				<div
 					id='selection'
 					className='posabs dispinbl'
-					style={{ left: selectionPos.x1.toJSON() - 6, top: selectionPos.y1.toJSON() - 6 }}
+					style={{
+						left: `calc(var(--zoom) * ${selectionPos.startingFrame.toJSON()} * 1px - 6px)`,
+						top: selectionPos.y1.toJSON() - 6,
+					}}
 					children={<Selection
 						className={'' + (selectionActive ? 'active ' : '') + (selectionHidden ? 'hidden ' : '')}
 						width={selectionPos.x2.toJSON() - selectionPos.x1.toJSON() + 12}
+						frameWidth={selectionPos.frameWidth.toJSON()}
 						height={selectionPos.y2.toJSON() - selectionPos.y1.toJSON() + 12}
 					/>}
 				/>