loop placement works better

3 files changed, 52 insertions, 43 deletions

diff --git a/pages/editor.tsx b/pages/editor.tsx
index 271c2d3..ea6d664 100644
--- a/pages/editor.tsx
+++ b/pages/editor.tsx
@@ -339,10 +339,6 @@ function TimelineKeyframe(props: {
 	}, { domTarget: dragRef, eventOptions: { passive: false }, threshold: 10, triggerAllEvents: true });
 
 	if (props.slide.type == 'loop') {
-		if (props.slide.frame < 30) {
-			console.log(props.slide);
-			console.log(spring.frame.get());
-		}
 		// loop start
 		useDrag(({ xy: [x, _y], intentional }) => {
 			if (intentional) {
@@ -780,7 +776,15 @@ function TimelineEditor() {
 			var rect = timelineRef.current.getBoundingClientRect();
 			var x = e.clientX - rect.left;
 			var y = e.clientY - rect.top;
-			if ((e.buttons & (1 << 0)) == 0) ghostApi.start({ x, y, frame: getFrameAtOffset(x) });
+			var frame = getFrameAtOffset(x);
+			if ((e.buttons & (1 << 0)) == 0) {
+				ghostApi.start({
+					x,
+					y,
+					frame,
+					frameEnd: frame + 5,
+				});
+			}
 		});
 	}, []);
 	// create new slide
@@ -795,6 +799,7 @@ function TimelineEditor() {
 
 			var start = Math.round(getFrameAtOffset(ix - rect.left));
 			var end = start + Math.round(ox / zoomToPx(global.timeline.zoom.value));
+
 			ghostApi.start({ frame: Math.min(start, end), frameEnd: Math.max(start, end), x, y: 60 });
 
 			if (last) {
@@ -804,14 +809,8 @@ function TimelineEditor() {
 				var slide = new loopSlide(Math.max(start, end));
 				slide.beginFrame = Math.min(start, end);
 
-				console.log(slide);
-
 				global.timeline.workingTimeline[global.timeline.workingTimeline.value.length].set(slide);
 
-				keyframeInAnimations[slide.id] = {
-					x: frame,
-					y: 60,
-				};
 				global.update.refreshLiveTimeline.value();
 			}
 		} else {
@@ -869,23 +868,22 @@ function TimelineEditor() {
 					<TimelineKeyframe slide={slide.attach(Downgraded).value} key={slide.id.value} />
 				)}
 				<TimelineSelection selectionDragArea={selectionDragArea} />
+				<animated.div
+					id='ghost'
+					className={'posabs dispinbl ' + (ghostPlaced ? 'placed' : '')}
+					style={{
+						'--y': ghost.y,
+						'--x': ghost.x,
+						'--frame': ghost.frame,
+						'--frame-end': ghost.frameEnd,
+					} as unknown as CSSProperties}
+					children={tool.value == 'loop'
+						? <GhostLoop begin={0} end={0} />
+						: <SlideKeyframe type={tool.value as slideTypes} ghost />}
+				/>
+				{false && <div className={'ghostArea posabs a0' + (tool.value != 'cursor' ? ' active' : '')}></div>}
 			</div>
 		</div>
-		<div className={'ghostArea posabs a0' + (tool.value != 'cursor' ? ' active' : '')}>
-			<animated.div
-				id='ghost'
-				className={'posabs dispinbl ' + (ghostPlaced ? 'placed' : '')}
-				style={{
-					'--y': ghost.y,
-					'--x': ghost.x,
-					'--frame': ghost.frame,
-					'--frame-end': ghost.frameEnd,
-				} as unknown as CSSProperties}
-				children={tool.value == 'loop'
-					? <GhostLoop begin={0} end={0} />
-					: <SlideKeyframe type={tool.value as slideTypes} ghost />}
-			/>
-		</div>
 	</div>;
 }
 
@@ -1152,6 +1150,8 @@ function zoomAroundPoint(newZoom: number, pivot: number) {
 	global.timeline.zoom.set(newZoom);
 }
 
+var switchToTool = (tool: string) => () => global.ready.timeline.value && global.timeline.tool.set(tool);
+
 function Tools() {
 	var frame = useHookstate(global).timeline.frame;
 	var tool = useHookstate(global).timeline.tool;
@@ -1159,6 +1159,12 @@ function Tools() {
 	var ready = useHookstate(global).ready;
 	var framerate = useHookstate(project).timeline.framerate;
 
+	useMousetrap(['v'], switchToTool('cursor'));
+	useMousetrap(['d'], switchToTool('default'));
+	useMousetrap(['l'], switchToTool('loop'));
+	useMousetrap(['e'], switchToTool('delay'));
+	useMousetrap(['s'], switchToTool('speedChange'));
+
 	return <div className='tools'>
 		<div className={'time posrel ' + (ready.timeline.get() ? '' : 'disabled')}>
 			<span className='framerate numbers posabs l0 t0'>@{framerate.get()}fps</span>
diff --git a/styles/editor.css b/styles/editor.css
index 949265d..4483c51 100644
--- a/styles/editor.css
+++ b/styles/editor.css
@@ -378,19 +378,6 @@
 	top: calc((var(--y) - 6) * 1px);
 }
 
-.appGrid .timeline .ghostArea {
-	pointer-events: none;
-	line-height: 0;
-	transition-property: opacity;
-	transition-duration: 150ms;
-	opacity: 0;
-	color: var(--gruble);
-}
-
-.appGrid .timeline:hover .ghostArea.active {
-	opacity: 1;
-}
-
 .appGrid .timeline .keyframes .frame {
 	background-color: transparent;
 	height: 100%;
diff --git a/styles/keyframes.css b/styles/keyframes.css
index fb3d728..935642f 100644
--- a/styles/keyframes.css
+++ b/styles/keyframes.css
@@ -59,14 +59,30 @@
 #ghost {
 	transform: translate(-16px, -16px);
 	top: calc(var(--y) * 1px);
-	left: calc(var(--x) * 1px);
+	left: calc(var(--zoom) * var(--frame) * 1px);
+
+	pointer-events: none;
+	line-height: 0;
+	color: var(--gruble);
+	transition-property: opacity;
+	transition-duration: 150ms;
+	opacity: 0;
+}
+.timeline:hover #ghost {
+	opacity: 1;
 }
-#ghost.placed { left: calc(var(--zoom) * var(--frame) * 1px); }
 
-.keyframeWrapper .loop.ghost {
-	width: calc((var(--frame-end) - var(--frame)) * var(--zoom) * 1px + 26px);
+#ghost .keyframeWrapper .loop.ghost {
+	width: calc((var(--frame-end) - var(--frame)) * var(--zoom) * 1px + 24px);
+
+	transition-property: transform;
+	transition-duration: 100ms;
 	transform: translateX(100%);
 }
+#ghost.placed .keyframeWrapper .loop.ghost {
+	transform: translateX(100%) translateX(10px);
+}
+
 .keyframeWrapper .loop.ghost .connector {
 	height: 14px;
 	margin: 0 5px;