aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/views/animationtimeline/Keyframe.tsx5
-rw-r--r--src/client/views/animationtimeline/Timeline.tsx45
-rw-r--r--src/client/views/animationtimeline/Track.tsx25
-rw-r--r--src/client/views/nodes/DocumentView.tsx4
4 files changed, 64 insertions, 15 deletions
diff --git a/src/client/views/animationtimeline/Keyframe.tsx b/src/client/views/animationtimeline/Keyframe.tsx
index e8b75eef4..c3e018112 100644
--- a/src/client/views/animationtimeline/Keyframe.tsx
+++ b/src/client/views/animationtimeline/Keyframe.tsx
@@ -88,6 +88,7 @@ export namespace KeyframeFunc {
regiondata.fadeIn = 1000;
regiondata.fadeOut = 1000;
regiondata.functions = new List<Doc>();
+ regiondata.hasData = false;
return regiondata;
};
@@ -114,7 +115,8 @@ export const RegionDataSchema = createSchema({
keyframes: listSpec(Doc),
fadeIn: defaultSpec("number", 0),
fadeOut: defaultSpec("number", 0),
- functions: listSpec(Doc)
+ functions: listSpec(Doc),
+ hasData: defaultSpec("boolean", false)
});
export type RegionData = makeInterface<[typeof RegionDataSchema]>;
export const RegionData = makeInterface(RegionDataSchema);
@@ -340,6 +342,7 @@ export class Keyframe extends React.Component<IProps> {
if (offset > this.regiondata.fadeIn && offset < this.regiondata.duration - this.regiondata.fadeOut) { //make sure keyframe is not created inbetween fades and ends
let position = this.regiondata.position;
await this.makeKeyData(Math.round(position + offset));
+ this.regiondata.hasData = true;
this.props.changeCurrentBarX(KeyframeFunc.convertPixelTime(Math.round(position + offset), "mili", "pixel", this.props.tickSpacing, this.props.tickIncrement)); //first move the keyframe to the correct location and make a copy so the correct file gets coppied
}
}
diff --git a/src/client/views/animationtimeline/Timeline.tsx b/src/client/views/animationtimeline/Timeline.tsx
index 2b960cc88..c13a039a5 100644
--- a/src/client/views/animationtimeline/Timeline.tsx
+++ b/src/client/views/animationtimeline/Timeline.tsx
@@ -3,7 +3,7 @@ import "./Timeline.scss";
import { listSpec } from "../../../new_fields/Schema";
import { observer } from "mobx-react";
import { Track } from "./Track";
-import { observable, reaction, action, IReactionDisposer, computed, runInAction, observe, toJS } from "mobx";
+import { observable, action, computed, runInAction } from "mobx";
import { Cast, NumCast, StrCast, BoolCast } from "../../../new_fields/Types";
import { List } from "../../../new_fields/List";
import { Doc, DocListCast } from "../../../new_fields/Doc";
@@ -17,14 +17,18 @@ import { Utils } from "../../../Utils";
@observer
export class Timeline extends React.Component<FieldViewProps> {
-
- private DEFAULT_CONTAINER_HEIGHT: number = 330;
+
+ //readonly constants
private readonly DEFAULT_TICK_SPACING: number = 50;
private readonly MAX_TITLE_HEIGHT = 75;
- private MIN_CONTAINER_HEIGHT: number = 205;
private readonly MAX_CONTAINER_HEIGHT: number = 800;
private readonly DEFAULT_TICK_INCREMENT: number = 1000;
+ //height variables
+ private DEFAULT_CONTAINER_HEIGHT: number = 330;
+ private MIN_CONTAINER_HEIGHT: number = 205;
+
+ //react refs
@observable private _trackbox = React.createRef<HTMLDivElement>();
@observable private _titleContainer = React.createRef<HTMLDivElement>();
@observable private _timelineContainer = React.createRef<HTMLDivElement>();
@@ -33,6 +37,7 @@ export class Timeline extends React.Component<FieldViewProps> {
@observable private _roundToggleContainerRef = React.createRef<HTMLDivElement>();
@observable private _timeInputRef = React.createRef<HTMLInputElement>();
+ //boolean vars and instance vars
@observable private _currentBarX: number = 0;
@observable private _windSpeed: number = 1;
@observable private _isPlaying: boolean = false; //scrubber playing
@@ -47,7 +52,11 @@ export class Timeline extends React.Component<FieldViewProps> {
@observable private _timelineVisible = false;
@observable private _mouseToggled = false;
@observable private _doubleClickEnabled = false;
- private _titleHeight = 0;
+ @observable private _titleHeight = 0;
+
+ /**
+ * collection get method. Basically defines what defines collection's children. These will be tracked in the timeline. Do not edit.
+ */
@computed
private get children(): List<Doc> {
let extendedDocument = ["image", "video", "pdf"].includes(StrCast(this.props.Document.type));
@@ -60,6 +69,10 @@ export class Timeline extends React.Component<FieldViewProps> {
}
return Cast(this.props.Document[this.props.fieldKey], listSpec(Doc)) as List<Doc>;
}
+
+ /**
+ *
+ */
componentWillMount() {
let relativeHeight = window.innerHeight / 14;
this._titleHeight = relativeHeight < this.MAX_TITLE_HEIGHT ? relativeHeight : this.MAX_TITLE_HEIGHT;
@@ -140,16 +153,21 @@ export class Timeline extends React.Component<FieldViewProps> {
}
-
+ /**
+ * fast forward the timeline scrubbing
+ */
@action
windForward = (e: React.MouseEvent) => {
e.preventDefault();
e.stopPropagation();
- if (this._windSpeed < 64) { //max speed is 32
+ if (this._windSpeed < 64) { //max speed is 32
this._windSpeed = this._windSpeed * 2;
}
}
+ /**
+ * rewind the timeline scrubbing
+ */
@action
windBackward = (e: React.MouseEvent) => {
e.preventDefault();
@@ -159,7 +177,7 @@ export class Timeline extends React.Component<FieldViewProps> {
}
}
- //for scrubber action
+
@action
onScrubberDown = (e: React.PointerEvent) => {
e.preventDefault();
@@ -392,6 +410,7 @@ export class Timeline extends React.Component<FieldViewProps> {
}
+
@action
private checkCallBack = (visible: boolean) => {
this._checkVisible = visible;
@@ -400,10 +419,18 @@ export class Timeline extends React.Component<FieldViewProps> {
}
}
+
+
+
+
+
+
+
+
render() {
return (
<div>
- <div style={{ visibility: this._timelineVisible ? "visible" : "hidden" }}>
+ <div style={{ visibility: this._timelineVisible ? "visible" : "hidden" }}>
<div key="timeline_wrapper" style={{ visibility: BoolCast(this.props.Document.isATOn && this._timelineVisible) ? "visible" : "hidden", left: "0px", top: "0px", position: "absolute", width: "100%", transform: "translate(0px, 0px)" }}>
<div key="timeline_container" className="timeline-container" ref={this._timelineContainer} style={{ height: `${this._containerHeight}px`, top: `0px` }}>
<div key="timeline_info" className="info-container" ref={this._infoContainer} onWheel={this.onWheelZoom}>
diff --git a/src/client/views/animationtimeline/Track.tsx b/src/client/views/animationtimeline/Track.tsx
index 22b83f055..d0bcdd655 100644
--- a/src/client/views/animationtimeline/Track.tsx
+++ b/src/client/views/animationtimeline/Track.tsx
@@ -65,9 +65,8 @@ export class Track extends React.Component<IProps> {
componentWillMount() {
runInAction(() => {
if (!this.props.node.regions) this.props.node.regions = new List<Doc>();
- let relativeHeight = window.innerHeight / 14;
+ let relativeHeight = window.innerHeight / 14;
this._trackHeight = relativeHeight < this.MAX_TITLE_HEIGHT ? relativeHeight : this.MAX_TITLE_HEIGHT; //for responsiveness
-
});
}
@@ -145,12 +144,32 @@ export class Track extends React.Component<IProps> {
@action
timelineVisibleReaction = () => {
return reaction(() => {
- return this.props.timelineVisible;
+ return this.props.timelineVisible;
}, isVisible => {
this.revertState();
+ if (isVisible){
+ DocListCast(this.regions).forEach(region => {
+ if (!BoolCast((Cast(region, Doc) as Doc).hasData)){
+ for (let i = 0; i < 4; i++){
+ DocListCast(((Cast(region, Doc) as Doc).keyframes as List<Doc>))[i].key = Doc.MakeCopy(this.props.node, true);
+ if (i === 0 || i === 3){
+ DocListCast(((Cast(region, Doc) as Doc).keyframes as List<Doc>))[i].key.opacity = 0.1;
+ }
+ }
+ console.log("saving keyframes");
+ }
+ });
+ }
});
}
+ @action
+ /**
+ * Simple loop through all the regions to update the keyframes. Only applies to timelineVisibleReaction
+ */
+ updateAllRegions = () => {
+
+ }
@action
timeChange = async (time: number) => {
if (this._isOnKeyframe && this._onKeyframe && this._onRegionData) {
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 467fd4b32..6c3dd2051 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -669,10 +669,10 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
return <div className={`documentView-node${this.topMost ? "-topmost" : ""}`} ref={this._mainCont}
onDrop={this.onDrop} onContextMenu={this.onContextMenu} onPointerDown={this.onPointerDown} onClick={this.onClick}
onPointerEnter={e => {
- console.log("Brush" + this.props.Document.title);
+ //console.log("Brush" + this.props.Document.title);
Doc.BrushDoc(this.props.Document);
}} onPointerLeave={e => {
- console.log("UnBrush" + this.props.Document.title);
+ //console.log("UnBrush" + this.props.Document.title);
Doc.UnBrushDoc(this.props.Document);
}}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-13 17:00:46 +0000