aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorlonkaars <loek@pipeframe.xyz>2021-05-21 22:13:24 +0200
committerlonkaars <loek@pipeframe.xyz>2021-05-21 22:13:24 +0200
commita6d27ae3209da846f9fb6aa7166979e05780b1bf (patch)
tree3ccc699ce1048c2570a127e0ed73ed3fbed9dbad
parent03279d9b1c10dd0c9f194c16937eb082bd988940 (diff)
timeline cursor jump working now :tada:
-rw-r--r--pages/editor.tsx21
-rw-r--r--styles/editor.css20
2 files changed, 18 insertions, 23 deletions
diff --git a/pages/editor.tsx b/pages/editor.tsx
index f37e561..838da2c 100644
--- a/pages/editor.tsx
+++ b/pages/editor.tsx
@@ -1,6 +1,6 @@
import { CSSProperties, ReactNode, useEffect, useRef, useState } from 'react';
import { animated, useSpring } from 'react-spring';
-import { useGesture } from 'react-use-gesture';
+import { useDrag } from 'react-use-gesture';
import create from 'zustand';
import { loopSlide } from '../timeline';
import { TimedVideoPlayer } from './present';
@@ -161,20 +161,16 @@ function TimelineEditor(props: {
}),
);
- useGesture(
- {
- onDrag: ({ offset: [x, _y] }) => {
- var frame = Math.max(0, Math.round(getFrameAtOffset(x, timelineZoom)) - 1);
- setFrame(frame);
- return scrubberSpring.start({ frame });
- },
- },
- { domTarget: scrubberDragRef, eventOptions: { passive: false } },
- );
+ useDrag(({ xy: [x, _y] }) => {
+ var frame = Math.max(0, Math.round(getFrameAtOffset(x - 240, timelineZoom)) - 1);
+ setFrame(frame);
+ return scrubberSpring.start({ frame });
+ }, { domTarget: scrubberDragRef, eventOptions: { passive: false } });
return <>
<canvas className='timeScale posabs a0' id='timeScaleCanvas' />
- <div className='labels'>{timelineLabels}</div>
+ <div className='labels' children={timelineLabels} />
+ <div className='scrubberJumpArea posabs h0 t0' ref={scrubberDragRef} />
<div className='timelineInner posabs a0'>
<animated.div
className='scrubber posabs v0'
@@ -186,7 +182,6 @@ function TimelineEditor(props: {
viewBox='0 0 20 28'
xmlns='http://www.w3.org/2000/svg'
className='head posabs t0 abscenterh'
- ref={scrubberDragRef}
>
<path
d='M0 4C0 1.79086 1.79086 0 4 0H16C18.2091 0 20 1.79086 20 4V17.3431C20 18.404 19.5786 19.4214 18.8284 20.1716L11 28H9L1.17157 20.1716C0.421426 19.4214 0 18.404 0 17.3431V4Z'
diff --git a/styles/editor.css b/styles/editor.css
index e23ff62..5325004 100644
--- a/styles/editor.css
+++ b/styles/editor.css
@@ -186,7 +186,6 @@
.appGrid .timeline .keyframes .frame .keyframeWrapper {
line-height: 0;
top: 44px;
- z-index: 999;
color: var(--gruble);
width: 24px;
height: 24px;
@@ -218,7 +217,7 @@
width: 2px;
overflow: visible;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
- z-index: 999999999;
+ z-index: 1;
left: calc((var(--zoom) * (var(--frame) + 0.5)) * 1px - 1px)
}
@@ -229,15 +228,11 @@
opacity: .0;
}
-.timeline .scrubber .head {
- fill: var(--blue);
- z-index: 1;
- cursor: grab;
-}
-.timeline .scrubber .head:active {
- cursor: grabbing;
-}
+.timeline .scrubberJumpArea { cursor: grab; }
+.timeline .scrubberJumpArea:active { cursor: grabbing; }
+
+.timeline .scrubber .head { fill: var(--blue); }
.timeline .scrubber .needle { background-color: var(--blue); }
.timeline .labels .label {
@@ -245,3 +240,8 @@
color: var(--c700);
}
+.timeline .scrubberJumpArea {
+ height: 28px;
+ z-index: 9;
+}
+