From efe8ae1933f74a0f37e22110eaa1e5dca99463cd Mon Sep 17 00:00:00 2001
From: lonkaars <loek@pipeframe.xyz>
Date: Sun, 23 May 2021 18:24:55 +0200
Subject: no loop begin/end wobble

---
 pages/editor.tsx     | 4 ++--
 styles/keyframes.css | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/pages/editor.tsx b/pages/editor.tsx
index 2a1dbef..9bf8391 100644
--- a/pages/editor.tsx
+++ b/pages/editor.tsx
@@ -92,7 +92,7 @@ function TimelineKeyframe(props: {
 		<div className='keyframeWrapper posabs abscenterh'>
 			{props.slide.type == 'loop'
 				? <div
-					style={{ '--loop-length': spring.frame.toJSON() - spring.begin.toJSON() } as CSSProperties}
+					style={{ '--begin': spring.begin.toJSON() } as CSSProperties}
 					className='loop'
 				>
 					<span className='dispinbl start' ref={loopStartRef}>
@@ -182,7 +182,7 @@ function TimelineEditor(props: {
 				}
 
 				if (drawFrame) {
-					ctx.fillRect(rect[0], rect[1], rect[2], rect[3]);
+					ctx.fillRect(Math.round(rect[0]), Math.round(rect[1]), Math.round(rect[2]), Math.round(rect[3]));
 
 					if (marker) {
 						var frame = Math.round(x / frameWidth + offset / frameWidth + 1);
diff --git a/styles/keyframes.css b/styles/keyframes.css
index 53fba20..750c7ba 100644
--- a/styles/keyframes.css
+++ b/styles/keyframes.css
@@ -7,7 +7,7 @@
 }
 
 .loop {
-	width: calc(var(--loop-length) * var(--zoom) * 1px + 24px);
+	width: calc((var(--frame) - var(--begin)) * var(--zoom) * 1px + 24px);
 	position: absolute;
 	right: 0;
 }
-- 
cgit v1.2.3