diff options
| -rw-r--r-- | pages/editor.tsx | 58 | ||||
| -rw-r--r-- | styles/editor.css | 13 | ||||
| -rw-r--r-- | styles/keyframes.css | 24 |
3 files changed, 52 insertions, 43 deletions
diff --git a/pages/editor.tsx b/pages/editor.tsx index 271c2d3..ea6d664 100644 --- a/pages/editor.tsx +++ b/pages/editor.tsx @@ -339,10 +339,6 @@ function TimelineKeyframe(props: { }, { domTarget: dragRef, eventOptions: { passive: false }, threshold: 10, triggerAllEvents: true }); if (props.slide.type == 'loop') { - if (props.slide.frame < 30) { - console.log(props.slide); - console.log(spring.frame.get()); - } // loop start useDrag(({ xy: [x, _y], intentional }) => { if (intentional) { @@ -780,7 +776,15 @@ function TimelineEditor() { var rect = timelineRef.current.getBoundingClientRect(); var x = e.clientX - rect.left; var y = e.clientY - rect.top; - if ((e.buttons & (1 << 0)) == 0) ghostApi.start({ x, y, frame: getFrameAtOffset(x) }); + var frame = getFrameAtOffset(x); + if ((e.buttons & (1 << 0)) == 0) { + ghostApi.start({ + x, + y, + frame, + frameEnd: frame + 5, + }); + } }); }, []); // create new slide @@ -795,6 +799,7 @@ function TimelineEditor() { var start = Math.round(getFrameAtOffset(ix - rect.left)); var end = start + Math.round(ox / zoomToPx(global.timeline.zoom.value)); + ghostApi.start({ frame: Math.min(start, end), frameEnd: Math.max(start, end), x, y: 60 }); if (last) { @@ -804,14 +809,8 @@ function TimelineEditor() { var slide = new loopSlide(Math.max(start, end)); slide.beginFrame = Math.min(start, end); - console.log(slide); - global.timeline.workingTimeline[global.timeline.workingTimeline.value.length].set(slide); - keyframeInAnimations[slide.id] = { - x: frame, - y: 60, - }; global.update.refreshLiveTimeline.value(); } } else { @@ -869,23 +868,22 @@ function TimelineEditor() { <TimelineKeyframe slide={slide.attach(Downgraded).value} key={slide.id.value} /> )} <TimelineSelection selectionDragArea={selectionDragArea} /> + <animated.div + id='ghost' + className={'posabs dispinbl ' + (ghostPlaced ? 'placed' : '')} + style={{ + '--y': ghost.y, + '--x': ghost.x, + '--frame': ghost.frame, + '--frame-end': ghost.frameEnd, + } as unknown as CSSProperties} + children={tool.value == 'loop' + ? <GhostLoop begin={0} end={0} /> + : <SlideKeyframe type={tool.value as slideTypes} ghost />} + /> + {false && <div className={'ghostArea posabs a0' + (tool.value != 'cursor' ? ' active' : '')}></div>} </div> </div> - <div className={'ghostArea posabs a0' + (tool.value != 'cursor' ? ' active' : '')}> - <animated.div - id='ghost' - className={'posabs dispinbl ' + (ghostPlaced ? 'placed' : '')} - style={{ - '--y': ghost.y, - '--x': ghost.x, - '--frame': ghost.frame, - '--frame-end': ghost.frameEnd, - } as unknown as CSSProperties} - children={tool.value == 'loop' - ? <GhostLoop begin={0} end={0} /> - : <SlideKeyframe type={tool.value as slideTypes} ghost />} - /> - </div> </div>; } @@ -1152,6 +1150,8 @@ function zoomAroundPoint(newZoom: number, pivot: number) { global.timeline.zoom.set(newZoom); } +var switchToTool = (tool: string) => () => global.ready.timeline.value && global.timeline.tool.set(tool); + function Tools() { var frame = useHookstate(global).timeline.frame; var tool = useHookstate(global).timeline.tool; @@ -1159,6 +1159,12 @@ function Tools() { var ready = useHookstate(global).ready; var framerate = useHookstate(project).timeline.framerate; + useMousetrap(['v'], switchToTool('cursor')); + useMousetrap(['d'], switchToTool('default')); + useMousetrap(['l'], switchToTool('loop')); + useMousetrap(['e'], switchToTool('delay')); + useMousetrap(['s'], switchToTool('speedChange')); + return <div className='tools'> <div className={'time posrel ' + (ready.timeline.get() ? '' : 'disabled')}> <span className='framerate numbers posabs l0 t0'>@{framerate.get()}fps</span> diff --git a/styles/editor.css b/styles/editor.css index 949265d..4483c51 100644 --- a/styles/editor.css +++ b/styles/editor.css @@ -378,19 +378,6 @@ top: calc((var(--y) - 6) * 1px); } -.appGrid .timeline .ghostArea { - pointer-events: none; - line-height: 0; - transition-property: opacity; - transition-duration: 150ms; - opacity: 0; - color: var(--gruble); -} - -.appGrid .timeline:hover .ghostArea.active { - opacity: 1; -} - .appGrid .timeline .keyframes .frame { background-color: transparent; height: 100%; diff --git a/styles/keyframes.css b/styles/keyframes.css index fb3d728..935642f 100644 --- a/styles/keyframes.css +++ b/styles/keyframes.css @@ -59,14 +59,30 @@ #ghost { transform: translate(-16px, -16px); top: calc(var(--y) * 1px); - left: calc(var(--x) * 1px); + left: calc(var(--zoom) * var(--frame) * 1px); + + pointer-events: none; + line-height: 0; + color: var(--gruble); + transition-property: opacity; + transition-duration: 150ms; + opacity: 0; +} +.timeline:hover #ghost { + opacity: 1; } -#ghost.placed { left: calc(var(--zoom) * var(--frame) * 1px); } -.keyframeWrapper .loop.ghost { - width: calc((var(--frame-end) - var(--frame)) * var(--zoom) * 1px + 26px); +#ghost .keyframeWrapper .loop.ghost { + width: calc((var(--frame-end) - var(--frame)) * var(--zoom) * 1px + 24px); + + transition-property: transform; + transition-duration: 100ms; transform: translateX(100%); } +#ghost.placed .keyframeWrapper .loop.ghost { + transform: translateX(100%) translateX(10px); +} + .keyframeWrapper .loop.ghost .connector { height: 14px; margin: 0 5px; |