diff options
| -rw-r--r-- | package.json | 1 | ||||
| -rw-r--r-- | pages/editor.tsx | 57 | ||||
| -rw-r--r-- | yarn.lock | 10 |
3 files changed, 34 insertions, 34 deletions
diff --git a/package.json b/package.json index 9d763f9..ec3c9b6 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,7 @@ "react-use-gesture": "^9.1.3", "timecode-boss": "^4.2.3", "ts-json-schema-generator": "^0.93.0", + "use-mousetrap": "^1.0.4", "uuid": "^8.3.2" }, "devDependencies": { diff --git a/pages/editor.tsx b/pages/editor.tsx index 5cdd40e..58b360d 100644 --- a/pages/editor.tsx +++ b/pages/editor.tsx @@ -1,8 +1,8 @@ -import { createState, Downgraded, State, useHookstate } from '@hookstate/core'; -import mousetrap from 'mousetrap'; +import { createState, Downgraded, none, State, useHookstate } from '@hookstate/core'; import { CSSProperties, ReactNode, Ref, useEffect, useRef, useState } from 'react'; import { animated, useSpring } from 'react-spring'; import { useDrag } from 'react-use-gesture'; +import { useMousetrap } from 'use-mousetrap'; import { FullScreenControlsRoundedIcon, @@ -131,12 +131,10 @@ function calculateSelectionOffsets(left: slideTypes, right: slideTypes) { } function TimelineKeyframe(props: { - slide: slide; + slide: anySlide; }) { - var workingTimeline = useHookstate(project).timeline.workingTimeline; - function modifySlide(newProps: Partial<anySlide>) { - var slide = workingTimeline.find(s => s.value.id == props.slide.id); + var slide = project.timeline.workingTimeline.find(s => s.value.id == props.slide.id); slide.set(Object.assign({}, slide.value, newProps)); } @@ -424,32 +422,26 @@ function TimelineSelection(props: { selectionAreaRef: Ref<ReactNode>; }) { } }, { domTarget: props.selectionAreaRef, eventOptions: { passive: false } }); - useEffect(() => { - var delkeys = ['del', 'backspace']; - mousetrap.bind(delkeys, () => { - if (!project.selection.placed) return; - - project.selection.slides.forEach(slide => { - if (!slideTypes.includes(slide.value.type)) return; - var index = workingTimeline.findIndex(s => s.value?.id == slide.value.id); - if (index == -1) return; - var timeline = new Array(...project.timeline.workingTimeline.value); - timeline.splice(index, 1); - workingTimeline.set(timeline); - }); - project.update.refreshLiveTimeline.value(); + useMousetrap(['del', 'backspace'], () => { + if (!project.selection.placed) return; - project.selection.merge({ - placed: false, - hidden: true, - slides: [], - }); + var indexOffset = 0; + project.selection.slides.forEach(slide => { + if (!slideTypes.includes(slide.value.type)) return; + var index = project.timeline.workingTimeline.findIndex(s => s.value?.id == slide.value.id); + if (index == -1) return; + index -= indexOffset; + project.timeline.workingTimeline[index].set(none); + indexOffset++; }); + project.update.refreshLiveTimeline.value(); - return () => { - mousetrap.unbind(delkeys); - }; - }, []); + project.selection.merge({ + placed: false, + hidden: true, + slides: [], + }); + }); function CustomSelection(props: { x1: number; @@ -660,13 +652,12 @@ function TimelineEditor() { className='timeScale posabs a0' id='timeScaleCanvas' onClick={event => { - // place new keyframe + // place new keyframe / place keyframe var offset = -4; // keyframe offset var x = event.clientX - 240 + offset; var frame = getFrameAtOffset(x, project.timeline.zoom.value) - 0.5; var slide = new toolToSlide[tool.value](Math.round(frame)); - workingTimeline[workingTimeline.value.length].set(slide); - workingTimeline.set(workingTimeline.value); + project.timeline.workingTimeline[project.timeline.workingTimeline.value.length].set(slide); keyframeInAnimations[slide.id] = { x: frame, y: event.clientY - window.innerHeight + 210, @@ -700,7 +691,7 @@ function TimelineEditor() { style={{ '--total-frames': player.timeline?.framecount.toString() } as CSSProperties} > <div className='selectionarea posabs v0' ref={selectionAreaRef} /> - {workingTimeline.value.map(slide => <TimelineKeyframe slide={slide} />)} + {workingTimeline.value.map(slide => <TimelineKeyframe slide={slide} key={slide.id} />)} <TimelineSelection selectionAreaRef={selectionAreaRef} /> </div> </div> @@ -290,7 +290,7 @@ resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.7.tgz#98a993516c859eb0d5c4c8f098317a9ea68db9ad" integrity sha512-cxWFQVseBm6O9Gbw1IWb8r6OS4OhSt3hPZLkFApLjM8TEXROBuQGLAH2i2gZpcXdLBIrpXuTDhH7Vbm1iXmNGA== -"@types/mousetrap@^1.6.8": +"@types/mousetrap@^1.6.4", "@types/mousetrap@^1.6.8": version "1.6.8" resolved "https://registry.yarnpkg.com/@types/mousetrap/-/mousetrap-1.6.8.tgz#448929e6dc21126392830465fdb9d4a2cfc16a88" integrity sha512-zTqjvgCUT5EoXqbqmd8iJMb4NJqyV/V7pK7AIKq7qcaAsJIpGlTVJS1HQM6YkdHCdnkNSbhcQI7MXYxFfE3iCA== @@ -2306,6 +2306,14 @@ url@^0.11.0: punycode "1.3.2" querystring "0.2.0" +use-mousetrap@^1.0.4: + version "1.0.4" + resolved "https://registry.yarnpkg.com/use-mousetrap/-/use-mousetrap-1.0.4.tgz#9ec635821140e702cc873f41880a5cbd46d1d09a" + integrity sha512-+limiYsm2e1Xs/tnwfEqSCcvh6XTcfLTpCoJFA+mu+btInnlrkFkZ48DLwVGejJdvP5H3Ge79t0bcRKepncvbQ== + dependencies: + "@types/mousetrap" "^1.6.4" + mousetrap "^1.6.5" + use-subscription@1.5.1: version "1.5.1" resolved "https://registry.yarnpkg.com/use-subscription/-/use-subscription-1.5.1.tgz#73501107f02fad84c6dd57965beb0b75c68c42d1" |