From a24f9da758415c60dbcb56b1cb488bec02d5b1a0 Mon Sep 17 00:00:00 2001 From: andrewdkim Date: Tue, 10 Dec 2019 17:55:13 -0500 Subject: some changes --- src/client/views/animationtimeline/Keyframe.tsx | 5 ++- src/client/views/animationtimeline/Timeline.tsx | 45 ++++++++++++++++++++----- src/client/views/animationtimeline/Track.tsx | 25 ++++++++++++-- src/client/views/nodes/DocumentView.tsx | 4 +-- 4 files changed, 64 insertions(+), 15 deletions(-) (limited to 'src') 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(); + 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 { 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 { - - 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(); @observable private _titleContainer = React.createRef(); @observable private _timelineContainer = React.createRef(); @@ -33,6 +37,7 @@ export class Timeline extends React.Component { @observable private _roundToggleContainerRef = React.createRef(); @observable private _timeInputRef = React.createRef(); + //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 { @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 { let extendedDocument = ["image", "video", "pdf"].includes(StrCast(this.props.Document.type)); @@ -60,6 +69,10 @@ export class Timeline extends React.Component { } return Cast(this.props.Document[this.props.fieldKey], listSpec(Doc)) as List; } + + /** + * + */ 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 { } - + /** + * 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 { } } - //for scrubber action + @action onScrubberDown = (e: React.PointerEvent) => { e.preventDefault(); @@ -392,6 +410,7 @@ export class Timeline extends React.Component { } + @action private checkCallBack = (visible: boolean) => { this._checkVisible = visible; @@ -400,10 +419,18 @@ export class Timeline extends React.Component { } } + + + + + + + + render() { return (
-
+
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 { componentWillMount() { runInAction(() => { if (!this.props.node.regions) this.props.node.regions = new List(); - 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 { @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))[i].key = Doc.MakeCopy(this.props.node, true); + if (i === 0 || i === 3){ + DocListCast(((Cast(region, Doc) as Doc).keyframes as List))[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(Docu return
{ - 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); }} -- cgit v1.2.3-70-g09d2