diff options
| -rw-r--r-- | package.json | 3 | ||||
| -rw-r--r-- | pages/editor.tsx | 50 | ||||
| -rw-r--r-- | styles/colors.css | 1 | ||||
| -rw-r--r-- | 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; @@ -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== |