aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/views/animationtimeline/Keyframe.scss138
-rw-r--r--src/client/views/animationtimeline/Keyframe.tsx79
-rw-r--r--src/client/views/animationtimeline/Timeline.scss24
-rw-r--r--src/client/views/animationtimeline/Timeline.tsx24
-rw-r--r--src/client/views/animationtimeline/TimelineOverview.tsx51
-rw-r--r--src/client/views/animationtimeline/Track.tsx2
6 files changed, 153 insertions, 165 deletions
diff --git a/src/client/views/animationtimeline/Keyframe.scss b/src/client/views/animationtimeline/Keyframe.scss
index b1e8b0b65..8ff1c53f5 100644
--- a/src/client/views/animationtimeline/Keyframe.scss
+++ b/src/client/views/animationtimeline/Keyframe.scss
@@ -1,94 +1,94 @@
-@import "./../globalCssVariables.scss";
+@import "./../globalCssVariables.scss";
+
+
+$timelineColor: #9acedf;
+$timelineDark: #77a1aa;
.bar {
height: 100%;
width: 5px;
position: absolute;
-
+
// pointer-events: none;
.menubox {
- width: 200px;
- height:200px;
+ width: 200px;
+ height: 200px;
top: 50%;
- position: relative;
- background-color: $light-color;
- .menutable{
- tr:nth-child(odd){
- background-color:$light-color-secondary;
+ position: relative;
+ background-color: $light-color;
+
+ .menutable {
+ tr:nth-child(odd) {
+ background-color: $light-color-secondary;
}
}
}
- .leftResize{
- left:-12.5px;
- height:25px;
- width:25px;
- border-radius: 50%;
- background-color: white;
- border:3px solid black;
- top: calc(50% - 12.5px);
- z-index: 1000;
- position:absolute;
+ .leftResize {
+ left: -10px;
+ border: 3px solid black;
+ }
+
+ .rightResize {
+ right: -10px;
+ border: 3px solid black;
}
- .rightResize{
- right:-12.5px;
- height:25px;
- width:25px;
- border-radius: 50%;
- top:calc(50% - 12.5px);
- background-color:white;
- border:3px solid black;
- z-index: 1000;
- position:absolute;
+
+ .keyframe-indicator {
+ height: 20px;
+ width: 20px;
+ top: calc(50% - 10px);
+ background-color: white;
+ -ms-transform: rotate(45deg);
+ -webkit-transform: rotate(45deg);
+ transform: rotate(45deg);
+ z-index: 1000;
+ position: absolute;
}
- .fadeLeft{
- left:0px;
- height:100%;
- position:absolute;
- pointer-events: none;
- background: linear-gradient(to left, #4d9900 10%, $light-color);
+
+ .keyframeCircle {
+ left: -10px;
+ border: 3px solid $timelineDark;
}
- .fadeRight{
- right:0px;
- height:100%;
- position:absolute;
- pointer-events: none;
- background: linear-gradient(to right, #4d9900 10%, $light-color);
+ .fadeLeft {
+ left: 0px;
+ height: 100%;
+ position: absolute;
+ pointer-events: none;
+ background: linear-gradient(to left, $timelineColor 10%, $light-color);
}
- .divider{
- height:100%;
- width: 1px;
- position: absolute;
- background-color:black;
- cursor: col-resize;
- pointer-events:none;
+
+ .fadeRight {
+ right: 0px;
+ height: 100%;
+ position: absolute;
+ pointer-events: none;
+ background: linear-gradient(to right, $timelineColor 10%, $light-color);
}
- .keyframe{
- height:100%;
- position:absolute;
+
+ .divider {
+ height: 100%;
+ width: 1px;
+ position: absolute;
+ background-color: black;
+ cursor: col-resize;
+ pointer-events: none;
}
- .keyframeCircle{
- left:-15px;
- height:30px;
- width:30px;
- border-radius: 50%;
- top:calc(50% - 15px);
- background-color:white;
- border:3px solid green;
- z-index: 1000;
- position:absolute;
+
+ .keyframe {
+ height: 100%;
+ position: absolute;
}
- .fadeIn-container, .fadeOut-container, .body-container{
- position:absolute;
- height:100%;
+ .fadeIn-container,
+ .fadeOut-container,
+ .body-container {
+ position: absolute;
+ height: 100%;
background-color: rgba(0, 0, 0, 0.5);
- opacity: 0;
+ opacity: 0;
}
-
-
-}
-
+} \ No newline at end of file
diff --git a/src/client/views/animationtimeline/Keyframe.tsx b/src/client/views/animationtimeline/Keyframe.tsx
index 2f2639c76..9c486a6d6 100644
--- a/src/client/views/animationtimeline/Keyframe.tsx
+++ b/src/client/views/animationtimeline/Keyframe.tsx
@@ -93,11 +93,11 @@ export namespace KeyframeFunc {
regiondata.fadeIn = 1000;
regiondata.fadeOut = 1000;
regiondata.functions = new List<Doc>();
- regiondata.hasData = false;
+ regiondata.hasData = false;
return regiondata;
};
- export const makeKeyData = async (regiondata:RegionData, time: number, badNode:Doc, type: KeyframeFunc.KeyframeType = KeyframeFunc.KeyframeType.default) => { //Kfpos is mouse offsetX, representing time
+ export const makeKeyData = async (regiondata: RegionData, time: number, badNode: Doc, type: KeyframeFunc.KeyframeType = KeyframeFunc.KeyframeType.default) => { //Kfpos is mouse offsetX, representing time
runInAction(async () => {
let doclist = (await DocListCastAsync(regiondata.keyframes))!;
let existingkf: (Doc | undefined) = undefined;
@@ -155,7 +155,7 @@ 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]>;
@@ -212,7 +212,7 @@ export class Keyframe extends React.Component<IProps> {
@computed private get pixelDuration() { return KeyframeFunc.convertPixelTime(this.regiondata.duration, "mili", "pixel", this.props.tickSpacing, this.props.tickIncrement); }
@computed private get pixelFadeIn() { return KeyframeFunc.convertPixelTime(this.regiondata.fadeIn, "mili", "pixel", this.props.tickSpacing, this.props.tickIncrement); }
@computed private get pixelFadeOut() { return KeyframeFunc.convertPixelTime(this.regiondata.fadeOut, "mili", "pixel", this.props.tickSpacing, this.props.tickIncrement); }
-
+
componentWillMount() {
runInAction(async () => {
if (!this.regiondata.keyframes) this.regiondata.keyframes = new List<Doc>();
@@ -228,7 +228,7 @@ export class Keyframe extends React.Component<IProps> {
});
}
-
+
@action
@@ -313,10 +313,10 @@ export class Keyframe extends React.Component<IProps> {
} else if (NumCast(this.keyframes[1].time) + offset >= NumCast(this.keyframes[2].time)) {
this.regiondata.position = NumCast(this.keyframes[2].time) - this.regiondata.fadeIn;
this.regiondata.duration = NumCast(this.keyframes[this.keyframes.length - 1].time) - NumCast(this.keyframes[2].time) + this.regiondata.fadeIn;
- } else if (NumCast(this.keyframes[0].time) + offset <= 0){
- this.regiondata.position = 0;
- this.regiondata.duration = NumCast(this.keyframes[this.keyframes.length - 1].time);
- }else {
+ } else if (NumCast(this.keyframes[0].time) + offset <= 0) {
+ this.regiondata.position = 0;
+ this.regiondata.duration = NumCast(this.keyframes[this.keyframes.length - 1].time);
+ } else {
this.regiondata.duration -= offset;
this.regiondata.position += offset;
}
@@ -353,9 +353,9 @@ 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 KeyframeFunc.makeKeyData(this.regiondata, Math.round(position + offset), this.props.node);
- this.regiondata.hasData = true;
+ 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
-
+
}
}
@@ -386,15 +386,15 @@ export class Keyframe extends React.Component<IProps> {
}),
TimelineMenu.Instance.addItem("input", "Move", (val) => {
runInAction(() => {
- let cannotMove: boolean = false;
- let kfIndex: number = this.keyframes.indexOf(kf);
- if (val < 0 || (val < NumCast(this.keyframes[kfIndex - 1].time) || val > NumCast(this.keyframes[kfIndex + 1].time))) {
- cannotMove = true;
- }
- if (!cannotMove) {
- this.keyframes[kfIndex].time = parseInt(val, 10);
- this.keyframes[1].time = this.regiondata.position + this.regiondata.fadeIn;
- }
+ let cannotMove: boolean = false;
+ let kfIndex: number = this.keyframes.indexOf(kf);
+ if (val < 0 || (val < NumCast(this.keyframes[kfIndex - 1].time) || val > NumCast(this.keyframes[kfIndex + 1].time))) {
+ cannotMove = true;
+ }
+ if (!cannotMove) {
+ this.keyframes[kfIndex].time = parseInt(val, 10);
+ this.keyframes[1].time = this.regiondata.position + this.regiondata.fadeIn;
+ }
});
});
TimelineMenu.Instance.addMenu("Keyframe");
@@ -406,22 +406,22 @@ export class Keyframe extends React.Component<IProps> {
*/
@action
makeRegionMenu = (kf: Doc, e: MouseEvent) => {
- TimelineMenu.Instance.addItem("button", "Remove Region", () => {
- runInAction(() => {
- this.regions.splice(this.regions.indexOf(this.props.RegionData), 1);
- }
- );
- }),
+ TimelineMenu.Instance.addItem("button", "Remove Region", () => {
+ runInAction(() => {
+ this.regions.splice(this.regions.indexOf(this.props.RegionData), 1);
+ }
+ );
+ }),
TimelineMenu.Instance.addItem("input", `fadeIn: ${this.regiondata.fadeIn}ms`, (val) => {
runInAction(() => {
- let cannotMove: boolean = false;
- if (val < 0 || val > NumCast(this.keyframes[2].time) - this.regiondata.position) {
- cannotMove = true;
- }
- if (!cannotMove) {
- this.regiondata.fadeIn = parseInt(val, 10);
- this.keyframes[1].time = this.regiondata.position + this.regiondata.fadeIn;
- }
+ let cannotMove: boolean = false;
+ if (val < 0 || val > NumCast(this.keyframes[2].time) - this.regiondata.position) {
+ cannotMove = true;
+ }
+ if (!cannotMove) {
+ this.regiondata.fadeIn = parseInt(val, 10);
+ this.keyframes[1].time = this.regiondata.position + this.regiondata.fadeIn;
+ }
});
}),
TimelineMenu.Instance.addItem("input", `fadeOut: ${this.regiondata.fadeOut}ms`, (val) => {
@@ -507,7 +507,7 @@ export class Keyframe extends React.Component<IProps> {
div.style.opacity = "0";
Doc.UnBrushDoc(this.props.node);
}
-
+
///////////////////////UI STUFF /////////////////////////
@@ -524,7 +524,7 @@ export class Keyframe extends React.Component<IProps> {
keyframeDivs.push(
<div className="keyframe" style={{ left: `${KeyframeFunc.convertPixelTime(NumCast(kf.time), "mili", "pixel", this.props.tickSpacing, this.props.tickIncrement) - this.pixelPosition}px` }}>
<div className="divider"></div>
- <div className="keyframeCircle" onPointerDown={(e) => { e.preventDefault(); e.stopPropagation(); this.moveKeyframe(e, kf); }} onContextMenu={(e: React.MouseEvent) => {
+ <div className="keyframeCircle keyframe-indicator" onPointerDown={(e) => { e.preventDefault(); e.stopPropagation(); this.moveKeyframe(e, kf); }} onContextMenu={(e: React.MouseEvent) => {
e.preventDefault();
e.stopPropagation();
this.makeKeyframeMenu(kf, e.nativeEvent);
@@ -577,18 +577,19 @@ export class Keyframe extends React.Component<IProps> {
/**
* rendering that green region
*/
+ //154, 206, 223
render() {
return (
<div>
<div className="bar" ref={this._bar} style={{
transform: `translate(${this.pixelPosition}px)`,
width: `${this.pixelDuration}px`,
- background: `linear-gradient(90deg, rgba(77, 153, 0, 0) 0%, rgba(77, 153, 0, 1) ${this.pixelFadeIn / this.pixelDuration * 100}%, rgba(77, 153, 0, 1) ${(this.pixelDuration - this.pixelFadeOut) / this.pixelDuration * 100}%, rgba(77, 153, 0, 0) 100% )`
+ background: `linear-gradient(90deg, rgba(154, 206, 223, 0) 0%, rgba(154, 206, 223, 1) ${this.pixelFadeIn / this.pixelDuration * 100}%, rgba(154, 206, 223, 1) ${(this.pixelDuration - this.pixelFadeOut) / this.pixelDuration * 100}%, rgba(154, 206, 223, 0) 100% )`
}}
onPointerDown={this.onBarPointerDown
}>
- <div className="leftResize" onPointerDown={this.onResizeLeft} ></div>
- <div className="rightResize" onPointerDown={this.onResizeRight}></div>
+ <div className="leftResize keyframe-indicator" onPointerDown={this.onResizeLeft} ></div>
+ <div className="rightResize keyframe-indicator" onPointerDown={this.onResizeRight}></div>
{this.drawKeyframes()}
{this.drawKeyframeDividers()}
</div>
diff --git a/src/client/views/animationtimeline/Timeline.scss b/src/client/views/animationtimeline/Timeline.scss
index a8dd9b9e7..40479559d 100644
--- a/src/client/views/animationtimeline/Timeline.scss
+++ b/src/client/views/animationtimeline/Timeline.scss
@@ -206,18 +206,18 @@ $timelineDark: #77a1aa;
border-right: 2px solid $timelineDark;
.datapane {
- top: 0px;
- width: 100px;
- height: 30%;
- border: 1px solid $dark-color;
- background-color: $intermediate-color;
- color: white;
- position: relative;
- float: left;
- border-style: solid;
- overflow-y: scroll;
- overflow-x: hidden;
- }
+ top: 0px;
+ width: 100px;
+ height: 30%;
+ border: 1px solid $dark-color;
+ background-color: $intermediate-color;
+ color: white;
+ position: relative;
+ float: left;
+ border-style: solid;
+ overflow-y: scroll;
+ overflow-x: hidden;
+}
}
.resize {
diff --git a/src/client/views/animationtimeline/Timeline.tsx b/src/client/views/animationtimeline/Timeline.tsx
index 8b943f209..5ff721ebb 100644
--- a/src/client/views/animationtimeline/Timeline.tsx
+++ b/src/client/views/animationtimeline/Timeline.tsx
@@ -120,18 +120,6 @@ export class Timeline extends React.Component<FieldViewProps> {
this.toggleHandle();
});
- this._resizeReaction = reaction(
- () => this.props.PanelWidth,
- () => {
- // if (!this.props.parent._isAuthoring) {
- // runInAction(() => {
- console.log("resizing");
- // this.setOverviewWidth();
- // });
- // }
- },
- );
-
}
componentWillUnmount() {
@@ -443,15 +431,6 @@ export class Timeline extends React.Component<FieldViewProps> {
lengthString = "";
}
-
- // let modeType: string = this.props.Document.isATOn ? "Author" : "Play";
- // let modeString: string = "Mode: " + modeType;
- // let overviewString: string = "Overview:";
- // let lengthString: string = "Length: ";
-
- console.log("visible: " + this._visibleLength)
- console.log("total: " + this._totalLength)
-
return (
<div key="timeline_toolbox" className="timeline-toolbox" style={{ height: `${size}px` }}>
<div className="playbackControls">
@@ -462,7 +441,7 @@ export class Timeline extends React.Component<FieldViewProps> {
<div className="grid-box overview-tool">
<div className="overview-box">
<div key="overview-text" className="animation-text">{overviewString}</div>
- <TimelineOverview panelWidth={this._panelWidth} parent={this} isAuthoring={BoolCast(this.props.Document.isATOn)} currentBarX={this._currentBarX} totalLength={this._totalLength} visibleLength={this._visibleLength} visibleStart={this._visibleStart} changeCurrentBarX={this.changeCurrentBarX} movePanX={this.movePanX} />
+ <TimelineOverview tickSpacing={this._tickSpacing} tickIncrement={this._tickIncrement} time={this._time} parent={this} isAuthoring={BoolCast(this.props.Document.isATOn)} currentBarX={this._currentBarX} totalLength={this._totalLength} visibleLength={this._visibleLength} visibleStart={this._visibleStart} changeCurrentBarX={this.changeCurrentBarX} movePanX={this.movePanX} />
</div>
<div className="mode-box overview-tool">
<div key="animation-text" className="animation-text">{modeString}</div>
@@ -572,7 +551,6 @@ export class Timeline extends React.Component<FieldViewProps> {
runInAction(() => {
this._panelWidth = this.props.PanelWidth();
this.changeLenths();
- console.log("changing!!")
});
// change visible and total width
diff --git a/src/client/views/animationtimeline/TimelineOverview.tsx b/src/client/views/animationtimeline/TimelineOverview.tsx
index caa97bb70..9a881264f 100644
--- a/src/client/views/animationtimeline/TimelineOverview.tsx
+++ b/src/client/views/animationtimeline/TimelineOverview.tsx
@@ -4,6 +4,7 @@ import { observer } from "mobx-react";
import "./TimelineOverview.scss";
import * as $ from 'jquery';
import { Timeline } from "./Timeline";
+import { Keyframe, KeyframeFunc } from "./Keyframe";
interface TimelineOverviewProps {
@@ -15,7 +16,9 @@ interface TimelineOverviewProps {
parent: Timeline;
changeCurrentBarX: (pixel: number) => void;
movePanX: (pixel: number) => any;
- panelWidth: number;
+ time: number;
+ tickSpacing: number;
+ tickIncrement: number;
}
@@ -25,7 +28,9 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{
@observable private _scrubberRef = React.createRef<HTMLDivElement>();
@observable private overviewBarWidth: number = 0;
@observable private _authoringReaction?: IReactionDisposer;
- @observable private _resizeReaction?: IReactionDisposer;
+ @observable private visibleTime: number = 0;
+ @observable private currentX: number = 0;
+ @observable private visibleStart: number = 0;
private readonly DEFAULT_HEIGHT = 50;
private readonly DEFAULT_WIDTH = 300;
@@ -42,22 +47,10 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{
}
},
);
- // this._resizeReaction = reaction(
- // () => this.props.parent.props.PanelWidth,
- // () => {
- // // if (!this.props.parent._isAuthoring) {
- // // runInAction(() => {
- // console.log("resizing");
- // this.setOverviewWidth();
- // // });
- // // }
- // },
- // );
}
componentWillUnmount = () => {
this._authoringReaction && this._authoringReaction();
- this._resizeReaction && this._resizeReaction();
}
@action
@@ -85,8 +78,6 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{
// let movX = (this.props.visibleStart / this.props.totalLength) * (this.overviewWidth) + e.movementX;
this.props.movePanX((movX / (this.DEFAULT_WIDTH)) * this.props.totalLength);
// this.props.movePanX((movX / (this.overviewWidth) * this.props.totalLength);
-
- // console.log(this.props.totalLength);
}
@action
@@ -125,18 +116,36 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{
document.removeEventListener("pointerup", this.onScrubberUp);
}
+ @action
+ getTimes() {
+ let vis = KeyframeFunc.convertPixelTime(this.props.visibleLength, "mili", "time", this.props.tickSpacing, this.props.tickIncrement);
+ let x = KeyframeFunc.convertPixelTime(this.props.currentBarX, "mili", "time", this.props.tickSpacing, this.props.tickIncrement);
+ let start = KeyframeFunc.convertPixelTime(this.props.visibleStart, "mili", "time", this.props.tickSpacing, this.props.tickIncrement);
+ this.visibleTime = vis;
+ this.currentX = x;
+ this.visibleStart = start;
+ }
+
render() {
- console.log("helo")
+ this.getTimes();
// calculates where everything should fall based on its size
- let percentVisible = this.props.visibleLength / this.props.totalLength;
- console.log(this.props.visibleLength)
+ // let percentVisible = this.props.visibleLength / this.props.totalLength;
+ // let visibleBarWidth = percentVisible * this.overviewBarWidth;
+
+ // let percentScrubberStart = this.props.currentBarX / this.props.totalLength;
+ // let scrubberStart = percentScrubberStart * this.overviewBarWidth;
+
+ // let percentBarStart = this.props.visibleStart / this.props.totalLength;
+ // let barStart = percentBarStart * this.overviewBarWidth;
+
+ let percentVisible = this.visibleTime / this.props.time;
let visibleBarWidth = percentVisible * this.overviewBarWidth;
- let percentScrubberStart = this.props.currentBarX / this.props.totalLength;
+ let percentScrubberStart = this.currentX / this.props.time;
let scrubberStart = percentScrubberStart * this.overviewBarWidth;
- let percentBarStart = this.props.visibleStart / this.props.totalLength;
+ let percentBarStart = this.visibleStart / this.props.time;
let barStart = percentBarStart * this.overviewBarWidth;
let timeline = this.props.isAuthoring ? [
diff --git a/src/client/views/animationtimeline/Track.tsx b/src/client/views/animationtimeline/Track.tsx
index 1ca8022a1..3ea34a2f3 100644
--- a/src/client/views/animationtimeline/Track.tsx
+++ b/src/client/views/animationtimeline/Track.tsx
@@ -66,7 +66,7 @@ export class Track extends React.Component<IProps> {
runInAction(() => {
if (!this.props.node.regions) this.props.node.regions = new List<Doc>(); //if there is no region, then create new doc to store stuff
//these two lines are exactly same from timeline.tsx
- let relativeHeight = window.innerHeight / 14;
+ let relativeHeight = window.innerHeight / 20;
this._trackHeight = relativeHeight < this.MAX_TITLE_HEIGHT ? relativeHeight : this.MAX_TITLE_HEIGHT; //for responsiveness
});
}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-12 07:49:31 +0000