aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/animationtimeline/Region.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/animationtimeline/Region.tsx')
-rw-r--r--src/client/views/animationtimeline/Region.tsx32
1 files changed, 15 insertions, 17 deletions
diff --git a/src/client/views/animationtimeline/Region.tsx b/src/client/views/animationtimeline/Region.tsx
index 99163f6c6..40fcb2bf6 100644
--- a/src/client/views/animationtimeline/Region.tsx
+++ b/src/client/views/animationtimeline/Region.tsx
@@ -12,6 +12,18 @@ import './Region.scss';
import './Timeline.scss';
import { TimelineMenu } from './TimelineMenu';
+export const RegionDataSchema = createSchema({
+ position: defaultSpec('number', 0),
+ duration: defaultSpec('number', 0),
+ keyframes: listSpec(Doc),
+ fadeIn: defaultSpec('number', 0),
+ fadeOut: defaultSpec('number', 0),
+ functions: listSpec(Doc),
+ hasData: defaultSpec('boolean', false),
+});
+export type RegionData = makeInterface<[typeof RegionDataSchema]>;
+export const RegionData = makeInterface(RegionDataSchema);
+
/**
* Useful static functions that you can use. Mostly for logic, but you can also add UI logic here also
*/
@@ -108,18 +120,6 @@ export namespace RegionHelpers {
};
}
-export const RegionDataSchema = createSchema({
- position: defaultSpec('number', 0),
- duration: defaultSpec('number', 0),
- keyframes: listSpec(Doc),
- fadeIn: defaultSpec('number', 0),
- fadeOut: defaultSpec('number', 0),
- functions: listSpec(Doc),
- hasData: defaultSpec('boolean', false),
-});
-export type RegionData = makeInterface<[typeof RegionDataSchema]>;
-export const RegionData = makeInterface(RegionDataSchema);
-
interface IProps {
animatedDoc: Doc;
RegionData: Doc;
@@ -184,7 +184,7 @@ export class Region extends ObservableReactComponent<IProps> {
return RegionHelpers.convertPixelTime(this.regiondata.fadeOut, 'mili', 'pixel', this._props.tickSpacing, this._props.tickIncrement);
}
- constructor(props: any) {
+ constructor(props: IProps) {
super(props);
makeObservable(this);
}
@@ -220,9 +220,7 @@ export class Region extends ObservableReactComponent<IProps> {
}, 200);
this._doubleClickEnabled = true;
document.addEventListener('pointermove', this.onBarPointerMove);
- document.addEventListener('pointerup', (e: PointerEvent) => {
- document.removeEventListener('pointermove', this.onBarPointerMove);
- });
+ document.addEventListener('pointerup', () => document.removeEventListener('pointermove', this.onBarPointerMove));
}
};
@@ -426,6 +424,7 @@ export class Region extends ObservableReactComponent<IProps> {
.map(region => ({ pos: NumCast(region.position), dur: NumCast(region.duration) }))
.forEach(({ pos, dur }) => {
if (pos !== this.regiondata.position) {
+ // eslint-disable-next-line no-param-reassign
val += this.regiondata.position;
if (val < 0 || (val > pos && val < pos + dur)) {
cannotMove = true;
@@ -483,7 +482,6 @@ export class Region extends ObservableReactComponent<IProps> {
* this probably needs biggest change, since everyone expected all keyframes to have a circle (and draggable)
*/
drawKeyframes = () => {
- const keyframeDivs: JSX.Element[] = [];
return DocListCast(this.regiondata.keyframes).map(kf => {
return (
<>