diff options
Diffstat (limited to 'src/client/views/animationtimeline/Region.tsx')
-rw-r--r-- | src/client/views/animationtimeline/Region.tsx | 32 |
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 ( <> |