aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/animationtimeline/Timeline.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/animationtimeline/Timeline.tsx')
-rw-r--r--src/client/views/animationtimeline/Timeline.tsx63
1 files changed, 32 insertions, 31 deletions
diff --git a/src/client/views/animationtimeline/Timeline.tsx b/src/client/views/animationtimeline/Timeline.tsx
index cc4da1694..c4d35330b 100644
--- a/src/client/views/animationtimeline/Timeline.tsx
+++ b/src/client/views/animationtimeline/Timeline.tsx
@@ -4,7 +4,8 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { action, computed, makeObservable, observable } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
-import { Utils, emptyFunction, setupMoveUpEvents } from '../../../Utils';
+import { setupMoveUpEvents } from '../../../ClientUtils';
+import { Utils, emptyFunction } from '../../../Utils';
import { Doc, DocListCast } from '../../../fields/Doc';
import { BoolCast, NumCast, StrCast } from '../../../fields/Types';
import { DocumentType } from '../../documents/DocumentTypes';
@@ -45,13 +46,13 @@ import { Track } from './Track';
@observer
export class Timeline extends ObservableReactComponent<FieldViewProps> {
- //readonly constants
+ // readonly constants
private readonly DEFAULT_TICK_SPACING: number = 50;
private readonly MAX_TITLE_HEIGHT = 75;
private readonly MAX_CONTAINER_HEIGHT: number = 800;
private readonly DEFAULT_TICK_INCREMENT: number = 1000;
- //height variables
+ // height variables
private DEFAULT_CONTAINER_HEIGHT: number = 330;
private MIN_CONTAINER_HEIGHT: number = 205;
@@ -60,7 +61,7 @@ export class Timeline extends ObservableReactComponent<FieldViewProps> {
makeObservable(this);
}
- //react refs
+ // react refs
@observable private _trackbox = React.createRef<HTMLDivElement>();
@observable private _titleContainer = React.createRef<HTMLDivElement>();
@observable private _timelineContainer = React.createRef<HTMLDivElement>();
@@ -68,7 +69,7 @@ export class Timeline extends ObservableReactComponent<FieldViewProps> {
@observable private _roundToggleRef = React.createRef<HTMLDivElement>();
@observable private _roundToggleContainerRef = React.createRef<HTMLDivElement>();
- //boolean vars and instance vars
+ // boolean vars and instance vars
@observable private _currentBarX: number = 0;
@observable private _windSpeed: number = 1;
@observable private _totalLength: number = 0;
@@ -77,11 +78,11 @@ export class Timeline extends ObservableReactComponent<FieldViewProps> {
@observable private _containerHeight: number = this.DEFAULT_CONTAINER_HEIGHT;
@observable private _tickSpacing = this.DEFAULT_TICK_SPACING;
@observable private _tickIncrement = this.DEFAULT_TICK_INCREMENT;
- @observable private _time = 100000; //DEFAULT
+ @observable private _time = 100000; // DEFAULT
@observable private _playButton = faPlayCircle;
@observable private _titleHeight = 0;
- @observable public IsPlaying: boolean = false; //scrubber playing
+ @observable public IsPlaying: boolean = false; // scrubber playing
/**
* collection get method. Basically defines what defines collection's children. These will be tracked in the timeline. Do not edit.
@@ -95,30 +96,30 @@ export class Timeline extends ObservableReactComponent<FieldViewProps> {
return DocListCast(this._props.Document[this._props.fieldKey]);
}
- /////////lifecycle functions////////////
+ /// //////lifecycle functions////////////
@action
componentDidMount() {
- const relativeHeight = window.innerHeight / 20; //sets height to arbitrary size, relative to innerHeight
- this._titleHeight = relativeHeight < this.MAX_TITLE_HEIGHT ? relativeHeight : this.MAX_TITLE_HEIGHT; //check if relHeight is less than Maxheight. Else, just set relheight to max
- this.MIN_CONTAINER_HEIGHT = this._titleHeight + 130; //offset
- this.DEFAULT_CONTAINER_HEIGHT = this._titleHeight * 2 + 130; //twice the titleheight + offset
+ const relativeHeight = window.innerHeight / 20; // sets height to arbitrary size, relative to innerHeight
+ this._titleHeight = relativeHeight < this.MAX_TITLE_HEIGHT ? relativeHeight : this.MAX_TITLE_HEIGHT; // check if relHeight is less than Maxheight. Else, just set relheight to max
+ this.MIN_CONTAINER_HEIGHT = this._titleHeight + 130; // offset
+ this.DEFAULT_CONTAINER_HEIGHT = this._titleHeight * 2 + 130; // twice the titleheight + offset
if (!this._props.Document.AnimationLength) {
- //if animation length did not exist
- this._props.Document.AnimationLength = this._time; //set it to default time
+ // if animation length did not exist
+ this._props.Document.AnimationLength = this._time; // set it to default time
} else {
- this._time = NumCast(this._props.Document.AnimationLength); //else, set time to animationlength stored from before
+ this._time = NumCast(this._props.Document.AnimationLength); // else, set time to animationlength stored from before
}
- this._totalLength = this._tickSpacing * (this._time / this._tickIncrement); //the entire length of the timeline div (actual div part itself)
- this._visibleLength = this._infoContainer.current!.getBoundingClientRect().width; //the visible length of the timeline (the length that you current see)
- this._visibleStart = this._infoContainer.current!.scrollLeft; //where the div starts
- this._props.Document.isATOn = !this._props.Document.isATOn; //turns the boolean on, saying AT (animation timeline) is on
+ this._totalLength = this._tickSpacing * (this._time / this._tickIncrement); // the entire length of the timeline div (actual div part itself)
+ this._visibleLength = this._infoContainer.current!.getBoundingClientRect().width; // the visible length of the timeline (the length that you current see)
+ this._visibleStart = this._infoContainer.current!.scrollLeft; // where the div starts
+ this._props.Document.isATOn = !this._props.Document.isATOn; // turns the boolean on, saying AT (animation timeline) is on
this.toggleHandle();
}
componentWillUnmount() {
- this._props.Document.AnimationLength = this._time; //save animation length
+ this._props.Document.AnimationLength = this._time; // save animation length
}
- /////////////////////////////////////////////////
+ /// //////////////////////////////////////////////
/**
* React Functional Component
@@ -146,7 +147,7 @@ export class Timeline extends ObservableReactComponent<FieldViewProps> {
pixel <= 0 ? (this._currentBarX = 0) : pixel >= this._totalLength ? (this._currentBarX = this._totalLength) : (this._currentBarX = pixel);
};
- //for playing
+ // for playing
onPlay = (e: React.MouseEvent) => {
e.stopPropagation();
this.play();
@@ -179,7 +180,7 @@ export class Timeline extends ObservableReactComponent<FieldViewProps> {
e.preventDefault();
e.stopPropagation();
if (this._windSpeed < 64) {
- //max speed is 32
+ // max speed is 32
this._windSpeed = this._windSpeed * 2;
}
};
@@ -213,7 +214,7 @@ export class Timeline extends ObservableReactComponent<FieldViewProps> {
const scrubberbox = this._infoContainer.current!;
const left = scrubberbox.getBoundingClientRect().left;
const offsetX = Math.round(e.clientX - left) * this._props.ScreenToLocalTransform().Scale;
- this.changeCurrentBarX(offsetX + this._visibleStart); //changes scrubber to clicked scrubber position
+ this.changeCurrentBarX(offsetX + this._visibleStart); // changes scrubber to clicked scrubber position
return false;
};
@@ -353,12 +354,12 @@ export class Timeline extends ObservableReactComponent<FieldViewProps> {
* tool box includes the toggle buttons at the top of the timeline (both editing mode and play mode)
*/
private timelineToolBox = (scale: number, totalTime: number) => {
- const size = 40 * scale; //50 is default
+ const size = 40 * scale; // 50 is default
const iconSize = 25;
const width: number = this._props.PanelWidth();
const modeType = this._props.Document.isATOn ? 'Author' : 'Play';
- //decides if information should be omitted because the timeline is very small
+ // decides if information should be omitted because the timeline is very small
// if its less than 950 pixels then it's going to be overlapping
let modeString = modeType,
overviewString = '',
@@ -467,7 +468,7 @@ export class Timeline extends ObservableReactComponent<FieldViewProps> {
this._props.Document.isATOn = !this._props.Document.isATOn;
if (!BoolCast(this._props.Document.isATOn)) {
- //turning on playmode...
+ // turning on playmode...
roundToggle.style.transform = 'translate(0px, 0px)';
roundToggle.style.animationName = 'turnoff';
roundToggleContainer.style.animationName = 'turnoff';
@@ -475,7 +476,7 @@ export class Timeline extends ObservableReactComponent<FieldViewProps> {
timelineContainer.style.top = `${-this._containerHeight}px`;
this.toPlay();
} else {
- //turning on authoring mode...
+ // turning on authoring mode...
roundToggle.style.transform = 'translate(20px, 0px)';
roundToggle.style.animationName = 'turnon';
roundToggleContainer.style.animationName = 'turnon';
@@ -488,8 +489,8 @@ export class Timeline extends ObservableReactComponent<FieldViewProps> {
@action.bound
changeLengths() {
if (this._infoContainer.current) {
- this._visibleLength = this._infoContainer.current.getBoundingClientRect().width; //the visible length of the timeline (the length that you current see)
- this._visibleStart = this._infoContainer.current.scrollLeft; //where the div starts
+ this._visibleLength = this._infoContainer.current.getBoundingClientRect().width; // the visible length of the timeline (the length that you current see)
+ this._visibleStart = this._infoContainer.current.scrollLeft; // where the div starts
}
}
@@ -513,7 +514,7 @@ export class Timeline extends ObservableReactComponent<FieldViewProps> {
}
}
} else {
- //TODO: remove undefineds and duplicates
+ // TODO: remove undefineds and duplicates
}
});
return longestTime;
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-07 16:10:30 +0000