From af58b27c92fea7594f4ec2b2948f48ec333bb0c2 Mon Sep 17 00:00:00 2001
From: lonkaars <loek@pipeframe.xyz>
Date: Mon, 17 May 2021 10:12:35 +0200
Subject: timeline divisions finished

---
 package.json      |  3 ++-
 pages/editor.tsx  | 50 +++++++++++++++++++++++++++++++++++++++++++-------
 styles/colors.css |  1 +
 yarn.lock         |  5 +++++
 4 files changed, 51 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index ef0ae8e..b215add 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,8 @@
 		"react": "^17.0.2",
 		"react-dom": "^17.0.2",
 		"timecode-boss": "^4.2.3",
-		"ts-json-schema-generator": "^0.92.0"
+		"ts-json-schema-generator": "^0.92.0",
+		"zustand": "^3.5.1"
 	},
 	"devDependencies": {
 		"typescript": "^4.2.4"
diff --git a/pages/editor.tsx b/pages/editor.tsx
index 36a4c66..085b508 100644
--- a/pages/editor.tsx
+++ b/pages/editor.tsx
@@ -1,4 +1,5 @@
 import { CSSProperties, useEffect, useState } from 'react';
+import create from 'zustand';
 import { loopSlide } from '../timeline';
 import { TimedVideoPlayer } from './present';
 
@@ -22,6 +23,12 @@ import PauseRoundedIcon from '@material-ui/icons/PauseRounded';
 import SkipPreviousRoundedIcon from '@material-ui/icons/SkipPreviousRounded';
 import { mdiCursorDefault } from '@mdi/js';
 
+var getTimelineZoom = create(set => ({
+	zoom: 0.2,
+	changeZoom: (delta: number) => set((st: any) => ({ zoom: Math.min(1, Math.max(0, st.zoom + delta)) })),
+	setZoom: (newValue: number) => set(() => ({ zoom: newValue })),
+}));
+
 function TimelineEditor(props: {
 	player: TimedVideoPlayer;
 }) {
@@ -49,8 +56,9 @@ function TimelineEditor(props: {
 		});
 
 		var css = (varname: string) => getComputedStyle(document.body).getPropertyValue(varname).trim();
-		var textColor = css('--c100');
-		var lineColor = css('--c300');
+		var baseColor = css('--c100');
+		var frameColor = css('--c250');
+		var markerFrame = css('--c400');
 
 		function draw() {
 			ctx.clearRect(0, 0, canvas.width, canvas.height);
@@ -62,12 +70,29 @@ function TimelineEditor(props: {
 				getComputedStyle(document.querySelector('.timeline')).getPropertyValue('--zoom').trim(),
 			);
 			var a = 1;
-			var ns = [300, 150, 120, 90, 60, 30, 30, 30, 15, 15, 15, 15, 15];
+			var ns = [300, 150, 120, 90, 60, 30, 30, 30, 20, 20, 20, 20, 20];
 			var everyN = ns[Math.floor(frameWidth)];
 			for (var x = -offset; x < canvas.width + offset; x += frameWidth) {
-				ctx.fillStyle = d ? textColor : lineColor;
-				if (a % everyN == 0) ctx.fillStyle = '#ff00ff';
-				ctx.fillRect(x, 0, frameWidth, canvas.height);
+				ctx.fillStyle = baseColor;
+
+				var rect = [Math.round(x + (frameWidth - 2) / 2), 28, 2, canvas.height];
+				var drawFrame = false;
+				if (frameWidth >= 3) {
+					ctx.fillStyle = d ? baseColor : frameColor;
+					rect = [x, 28, frameWidth, canvas.height];
+					drawFrame = !d;
+				}
+				/* if (a * 2 % everyN == 0) { */
+				/* 	ctx.fillStyle = frameColor; */
+				/* 	drawFrame = true; */
+				/* } */
+				if (a % everyN == 0) {
+					ctx.fillStyle = markerFrame;
+					drawFrame = true;
+				}
+
+				if (drawFrame) ctx.fillRect(rect[0], rect[1], rect[2], rect[3]);
+
 				d = !d;
 				a++;
 			}
@@ -113,13 +138,24 @@ export default function Index() {
 	var rerender = () => setDummy(!dummy);
 	var [player, setPlayer] = useState(new TimedVideoPlayer());
 
-	var [timelineZoom, setTimelineZoom] = useState(0.2);
+	var timelineZoom = getTimelineZoom((st: any) => st.zoom);
+	var setTimelineZoom = getTimelineZoom((st: any) => st.setZoom);
 
 	useEffect(() => {
 		var videoEL = document.getElementById('player') as HTMLVideoElement;
 		player.registerPlayer(videoEL);
 	}, []);
 
+	var changeZoom = getTimelineZoom(st => (st as any).changeZoom);
+	useEffect(() => {
+		document.querySelector('.timeline').addEventListener('wheel', (e: WheelEvent) => {
+			if (!e.ctrlKey && !e.altKey) return;
+			e.preventDefault();
+
+			changeZoom(-e.deltaY / 1000);
+		}, { passive: false });
+	}, []);
+
 	return <>
 		<div className='appGrid posabs a0'>
 			<AppBar position='static' color='transparent' elevation={0}>
diff --git a/styles/colors.css b/styles/colors.css
index 7051835..d8d0c8a 100644
--- a/styles/colors.css
+++ b/styles/colors.css
@@ -10,6 +10,7 @@
 	--c700: #707BA6;
 	--c400: #2D344F;
 	--c300: #171D33;
+	--c250: #0C1123;
 	--c200: #07071C;
 	--c100: #01010D;
 
diff --git a/yarn.lock b/yarn.lock
index 825fae7..c2171ab 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2281,3 +2281,8 @@ yocto-queue@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
   integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
+
+zustand@^3.5.1:
+  version "3.5.1"
+  resolved "https://registry.yarnpkg.com/zustand/-/zustand-3.5.1.tgz#28970280e830924b185ce064061231957398c1d0"
+  integrity sha512-7J56Ve814z4zap71iaKFD+t65LFI//jEq/Vf55BTSVqJZCm+w9rov8OMBg+YSwIPQk54bfoIWHTrOWuAbpEDMw==
-- 
cgit v1.2.3