aboutsummaryrefslogtreecommitdiff
path: root/pages
diff options
context:
space:
mode:
authorlonkaars <loek@pipeframe.xyz>2021-06-29 20:50:26 +0200
committerlonkaars <loek@pipeframe.xyz>2021-06-29 20:50:26 +0200
commit13d94996b2c039e28b00cc54e1458996f872d514 (patch)
tree29363471abc918eaf96bd3c6e6f41d190bb755b7 /pages
parenta4cd3d988a5c04d9b26772a866d7fc28dff62472 (diff)
loop placement works better
Diffstat (limited to 'pages')
-rw-r--r--pages/editor.tsx58
1 files changed, 32 insertions, 26 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>