diff options
| -rw-r--r-- | pages/editor.tsx | 35 | ||||
| -rw-r--r-- | styles/keyframes.css | 1 |
2 files changed, 31 insertions, 5 deletions
diff --git a/pages/editor.tsx b/pages/editor.tsx index b6d7ca0..60b5852 100644 --- a/pages/editor.tsx +++ b/pages/editor.tsx @@ -24,6 +24,8 @@ import { mdiCursorDefault } from '@mdi/js'; import { PressureIcon, SlideKeyframe } from '../components/icons'; import PlaySkipIconAni from '../components/play-skip'; +var keyframeInAnimations: { [key: string]: { x: number; y: number; }; } = {}; + var player = new TimedVideoPlayer(); var useWorkingTimeline = create((set, get) => ({ timeline: [], @@ -81,12 +83,29 @@ function TimelineKeyframe(props: { var loopStartRef = useRef(null); var loopEndRef = useRef(null); + var [firstRender, setFirstRender] = useState(true); + var [spring, api] = useSpring(() => ({ frame: props.slide.frame, begin: (props.slide as loopSlide).beginFrame || 0, + y: 44, config: { mass: 0.5, tension: 500, friction: 20 }, })); + useEffect(() => { + setFirstRender(false); + var beginAnimation = keyframeInAnimations[props.slide.id]; + if (!beginAnimation) return; + + console.log( + `I'm new keyframe with type ${props.slide.type} and id ${props.slide.id}\nbegin animation on ${beginAnimation.x}, ${beginAnimation.y}`, + ); + api.set({ frame: beginAnimation.x, y: beginAnimation.y - 16 }); + api.start({ frame: Math.round(beginAnimation.x), y: 44 }); + + delete keyframeInAnimations[props.slide.id]; + }, []); + var timelineZoom = getTimelineZoom((st: any) => st.zoom); // drag keyframe @@ -146,11 +165,14 @@ function TimelineKeyframe(props: { return <animated.div className='frame posabs' - style={{ '--frame': spring.frame } as CSSProperties} + style={{ + '--frame': spring.frame, + opacity: firstRender ? 0 : 1, + } as CSSProperties} id={'slide-' + props.slide.id} ref={mouseUpListener} > - <div className='keyframeWrapper posabs abscenterh'> + <div className='keyframeWrapper posabs abscenterh' style={{ top: spring.y.toJSON() }}> {props.slide.type == 'loop' ? <div style={{ '--begin': spring.begin.toJSON() } as CSSProperties} @@ -321,11 +343,16 @@ function TimelineEditor(props: { id='timeScaleCanvas' onClick={event => { // place new keyframe - var x = event.clientX - 240; - var frame = Math.round(getFrameAtOffset(x, timelineZoom)); + var offset = -10; // keyframe offset + var x = event.clientX - 240 + offset; + var frame = getFrameAtOffset(x, timelineZoom); var slide = new toolToSlide[props.selectedTool](frame); workingTimeline.push(slide); setWorkingTimeline(workingTimeline); + keyframeInAnimations[slide.id] = { + x: frame, + y: event.clientY - window.innerHeight + 210, + }; }} /> <div className='labels' children={timelineLabels} /> diff --git a/styles/keyframes.css b/styles/keyframes.css index 4d9f472..8ef8f32 100644 --- a/styles/keyframes.css +++ b/styles/keyframes.css @@ -2,7 +2,6 @@ --keyframe-color: var(--gruble); color: var(--keyframe-color); line-height: 0; - top: 44px; width: 24px; height: 24px; } |