aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorlonkaars <loek@pipeframe.xyz>2021-05-23 15:53:13 +0200
committerlonkaars <loek@pipeframe.xyz>2021-05-23 15:53:13 +0200
commit33b33dd282d67d1adc603a749c7116bbdaff589f (patch)
tree3d848f0432b0bc741e077452456f3292a622e826
parent9a0cb1148039c30b7a001bfca548e4223137ecbb (diff)
sorta working resizeable loops
-rw-r--r--components/icons.tsx1
-rw-r--r--components/loop.tsx12
-rw-r--r--pages/editor.tsx52
3 files changed, 41 insertions, 24 deletions
diff --git a/components/icons.tsx b/components/icons.tsx
index 954f516..50bf8f0 100644
--- a/components/icons.tsx
+++ b/components/icons.tsx
@@ -1,3 +1,4 @@
+import { Ref } from 'react';
import { keyframeTypes } from '../timeline';
export function PressureIcon() {
diff --git a/components/loop.tsx b/components/loop.tsx
deleted file mode 100644
index f459ab5..0000000
--- a/components/loop.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { CSSProperties } from 'react';
-import { SlideKeyframe } from './icons';
-
-export default function Loop(props: {
- length: number;
-}) {
- return <div style={{ '--loop-length': props.length } as CSSProperties} className='loop'>
- <SlideKeyframe type='loop' />
- <div className='connector dispinbl' />
- <SlideKeyframe type='loop' loopEnd />
- </div>;
-}
diff --git a/pages/editor.tsx b/pages/editor.tsx
index e3607e6..2a1dbef 100644
--- a/pages/editor.tsx
+++ b/pages/editor.tsx
@@ -52,32 +52,60 @@ var useFrame = create(set => ({
function TimelineKeyframe(props: {
slide: slide | delaySlide | loopSlide | speedChangeSlide;
}) {
- var ref = useRef(null);
- var [spring, api] = useSpring(
- () => ({
- frame: props.slide.frame,
- config: { mass: 0.5, tension: 500, friction: 20 },
- }),
- );
+ var dragRef = useRef(null);
+ var loopStartRef = useRef(null);
+ var loopEndRef = useRef(null);
+
+ var [spring, api] = useSpring(() => ({
+ frame: props.slide.frame,
+ begin: (props.slide as loopSlide).beginFrame || 0,
+ config: { mass: 0.5, tension: 500, friction: 20 },
+ }));
var timelineZoom = getTimelineZoom((st: any) => st.zoom);
+ // drag keyframe
useDrag(({ xy: [x, _y] }) => {
var frame = Math.max(0, Math.round(getFrameAtOffset(x - 240, timelineZoom)) - 1);
- console.log(frame);
api.start({ frame });
- }, { domTarget: ref, eventOptions: { passive: false } });
+ }, { domTarget: dragRef, eventOptions: { passive: false } });
+
+ if (props.slide.type == 'loop') {
+ // loop start
+ useDrag(({ xy: [x, _y] }) => {
+ var frame = Math.max(0, Math.round(getFrameAtOffset(x - 240, timelineZoom)) - 1);
+ api.start({ begin: frame });
+ }, { domTarget: loopStartRef, eventOptions: { passive: false } });
+
+ // loop end
+ useDrag(({ xy: [x, _y] }) => {
+ var frame = Math.max(0, Math.round(getFrameAtOffset(x - 240, timelineZoom)) - 1);
+ api.start({ frame });
+ }, { domTarget: loopEndRef, eventOptions: { passive: false } });
+ }
return <animated.div
className='frame posabs'
style={{ '--frame': spring.frame } as CSSProperties}
id={'slide-' + props.slide.id}
- ref={ref}
>
<div className='keyframeWrapper posabs abscenterh'>
{props.slide.type == 'loop'
- ? <Loop length={props.slide.frame - (props.slide as loopSlide).beginFrame} />
- : <SlideKeyframe type={props.slide.type} />}
+ ? <div
+ style={{ '--loop-length': spring.frame.toJSON() - spring.begin.toJSON() } as CSSProperties}
+ className='loop'
+ >
+ <span className='dispinbl start' ref={loopStartRef}>
+ <SlideKeyframe type='loop' />
+ </span>
+ <div className='connector dispinbl' ref={dragRef} />
+ <span className='dispinbl end' ref={loopEndRef}>
+ <SlideKeyframe type='loop' loopEnd />
+ </span>
+ </div>
+ : <span ref={dragRef}>
+ <SlideKeyframe type={props.slide.type} />
+ </span>}
</div>
</animated.div>;
}