aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/views/animationtimeline/Timeline.scss276
-rw-r--r--src/client/views/animationtimeline/Timeline.tsx129
-rw-r--r--src/client/views/animationtimeline/Track.scss1
-rw-r--r--src/client/views/animationtimeline/Track.tsx88
-rw-r--r--src/client/views/linking/LinkFollowBox.tsx2
5 files changed, 260 insertions, 236 deletions
diff --git a/src/client/views/animationtimeline/Timeline.scss b/src/client/views/animationtimeline/Timeline.scss
index 88d602d76..493b084a8 100644
--- a/src/client/views/animationtimeline/Timeline.scss
+++ b/src/client/views/animationtimeline/Timeline.scss
@@ -1,191 +1,209 @@
-@import "./../globalCssVariables.scss";
+@import "./../globalCssVariables.scss";
-.timeline-toolbox{
- position:absolute;
- margin: 0px;
- padding: 0px;
- display:flex;
- align-items: flex-start;
+.timeline-toolbox {
+ position: absolute;
+ margin: 0px;
+ padding: 0px;
+ display: flex;
+ align-items: flex-start;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
top: 20px;
- div{
- padding: 0px;
- margin-left:10px;
+
+ div {
+ padding: 0px;
+ margin-left: 10px;
}
- .animation-text{
- font-size: 20px;
- height: auto;
- width: auto;
+
+ .animation-text {
+ font-size: 20px;
+ height: auto;
+ width: auto;
white-space: nowrap;
font-size: 16px;
color: grey;
letter-spacing: 2px;
text-transform: uppercase;
}
+
.round-toggle {
height: 40px;
width: 80px;
background-color: white;
border: 2px solid grey;
border-radius: 20px;
- animation-fill-mode: forwards;
+ animation-fill-mode: forwards;
animation-duration: 500ms;
- top: 30px;
- input{
- position:absolute;
- opacity: 0;
- height: 0;
- width: 0;
+ top: 30px;
+
+ input {
+ position: absolute;
+ opacity: 0;
+ height: 0;
+ width: 0;
}
- .round-toggle-slider{
- height: 35px;
- width: 35px;
+
+ .round-toggle-slider {
+ height: 35px;
+ width: 35px;
background-color: white;
- border:1px solid grey;
- border-radius: 20px;
- transition: transform 500ms ease-in-out;
- margin-left: 0px;
- margin-top: 0.5px;
- }
+ border: 1px solid grey;
+ border-radius: 20px;
+ transition: transform 500ms ease-in-out;
+ margin-left: 0px;
+ margin-top: 0.5px;
+ }
}
-
+
}
-.time-input{
- height: 40px;
- width: 120px;
+
+.time-input {
+ height: 40px;
+ width: 120px;
white-space: nowrap;
font-size: 16px;
color: grey;
letter-spacing: 2px;
text-transform: uppercase;
- padding-left: 5px;
-
+ padding-left: 5px;
+
}
-.tick{
- height:100%;
- width: 1px;
- background-color:black;
-}
-.timeline-container{
- width:100%;
- height:300px;
- position:absolute;
+
+.tick {
+ height: 100%;
+ width: 1px;
+ background-color: black;
+}
+
+.timeline-container {
+ width: 100%;
+ height: 300px;
+ position: absolute;
background-color: $light-color-secondary;
- box-shadow: 0px 10px 20px;
- transition: transform 500ms ease;
-
- .info-container{
- margin-top: 80px;
- right:20px;
- position:absolute;
- height: calc(100% - 100px);
- width: calc(100% - 140px);
+ box-shadow: 0px 10px 20px;
+ transition: transform 500ms ease;
+
+ .info-container {
+ margin-top: 80px;
+ right: 20px;
+ position: absolute;
+ height: calc(100% - 100px);
+ width: calc(100% - 140px);
overflow: hidden;
- .scrubberbox{
- position:absolute;
- background-color: transparent;
+ .scrubberbox {
+ position: absolute;
+ background-color: transparent;
height: 30px;
- width:100%;
-
+ width: 100%;
+
}
- .scrubber{
- top:30px;
- height: 100%;
- width: 2px;
- position:absolute;
+
+ .scrubber {
+ top: 30px;
+ height: 100%;
+ width: 2px;
+ position: absolute;
z-index: 1001;
- background-color:black;
- .scrubberhead{
- top: -30px;
- height: 30px;
+ background-color: black;
+
+ .scrubberhead {
+ top: -30px;
+ height: 30px;
width: 30px;
- background-color:transparent;
- border-radius: 50%;
- border: 5px solid black;
+ background-color: transparent;
+ border-radius: 50%;
+ border: 5px solid black;
left: -15px;
- position:absolute;
+ position: absolute;
}
}
- .trackbox{
- top: 30px;
- height:calc(100% - 30px);
- width:100%;
- border:1px;
- overflow:hidden;
- background-color:white;
- position:absolute;
- box-shadow: -10px 0px 10px 10px grey;
+ .trackbox {
+ top: 30px;
+ height: calc(100% - 30px);
+ width: 100%;
+ border: 1px;
+ overflow: hidden;
+ background-color: white;
+ position: absolute;
+ box-shadow: -10px 0px 10px 10px grey;
}
-
+
}
- .title-container{
- margin-top: 110px;
- margin-left: 20px;
- height: calc(100% - 100px - 30px);
- width: 100px;
- background-color:white;
- overflow: hidden;
- .datapane{
- top:0px;
- width: 100px;
- height: 75px;
+
+ .title-container {
+ margin-top: 110px;
+ margin-left: 20px;
+ height: calc(100% - 100px - 30px);
+ width: 100px;
+ background-color: white;
+ overflow: hidden;
+
+ .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;
+ background-color: $intermediate-color;
+ color: white;
+ position: relative;
+ float: left;
+ border-style: solid;
+ overflow-y: scroll;
+ overflow-x: hidden;
}
}
- .resize{
- bottom: 5px;
- position:absolute;
- height: 30px;
- width: 50px;
+
+ .resize {
+ bottom: 5px;
+ position: absolute;
+ height: 30px;
+ width: 50px;
left: calc(50% - 25px);
}
}
-.overview{
- position: absolute;
- height: 50px;
- width: 200px;
- background-color: black;
- .container{
- position: absolute;
- float: left 0px;
- top: 25%;
- height: 75%;
- width: 100%;
- background-color: grey;
+.overview {
+ position: absolute;
+ height: 50px;
+ width: 200px;
+ background-color: black;
+
+ .container {
+ position: absolute;
+ float: left 0px;
+ top: 25%;
+ height: 75%;
+ width: 100%;
+ background-color: grey;
}
}
-.timeline-checker{
- height: auto;
- width: auto;
- overflow: hidden;
- position: absolute;
- display: flex;
- padding: 10px 10px;
- div{
- height: auto;
+.timeline-checker {
+ height: auto;
+ width: auto;
+ overflow: hidden;
+ position: absolute;
+ display: flex;
+ padding: 10px 10px;
+
+ div {
+ height: auto;
width: auto;
- overflow: hidden;
- margin: 0px 10px;
+ overflow: hidden;
+ margin: 0px 10px;
cursor: pointer
}
- .check{
- width: 50px;
- height: 50px;
+
+ .check {
+ width: 50px;
+ height: 50px;
}
} \ No newline at end of file
diff --git a/src/client/views/animationtimeline/Timeline.tsx b/src/client/views/animationtimeline/Timeline.tsx
index 43019903e..f8aa88755 100644
--- a/src/client/views/animationtimeline/Timeline.tsx
+++ b/src/client/views/animationtimeline/Timeline.tsx
@@ -8,7 +8,7 @@ import { Cast, NumCast, StrCast, BoolCast } from "../../../new_fields/Types";
import { List } from "../../../new_fields/List";
import { Doc, DocListCast } from "../../../new_fields/Doc";
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faPlayCircle, faBackward, faForward, faGripLines, faArrowUp, faArrowDown, faClock, faPauseCircle, faEyeSlash, faTimes, faEye, faCheck, faCross, faCheckCircle, faTimesCircle} from "@fortawesome/free-solid-svg-icons";
+import { faPlayCircle, faBackward, faForward, faGripLines, faArrowUp, faArrowDown, faClock, faPauseCircle, faEyeSlash, faTimes, faEye, faCheck, faCross, faCheckCircle, faTimesCircle } from "@fortawesome/free-solid-svg-icons";
import { ContextMenuProps } from "../ContextMenuItem";
import { ContextMenu } from "../ContextMenu";
import { TimelineOverview } from "./TimelineOverview";
@@ -19,9 +19,9 @@ import { Utils } from "../../../Utils";
@observer
export class Timeline extends React.Component<FieldViewProps> {
- private readonly DEFAULT_CONTAINER_HEIGHT: number = 330;
+ private DEFAULT_CONTAINER_HEIGHT: number = 330;
private readonly DEFAULT_TICK_SPACING: number = 50;
- private readonly MIN_CONTAINER_HEIGHT: number = 205;
+ private MIN_CONTAINER_HEIGHT: number = 205;
private readonly MAX_CONTAINER_HEIGHT: number = 800;
private readonly DEFAULT_TICK_INCREMENT: number = 1000;
@@ -31,7 +31,7 @@ export class Timeline extends React.Component<FieldViewProps> {
@observable private _infoContainer = React.createRef<HTMLDivElement>();
@observable private _roundToggleRef = React.createRef<HTMLDivElement>();
@observable private _roundToggleContainerRef = React.createRef<HTMLDivElement>();
- @observable private _timeInputRef = React.createRef<HTMLInputElement>();
+ @observable private _timeInputRef = React.createRef<HTMLInputElement>();
@observable private _currentBarX: number = 0;
@observable private _windSpeed: number = 1;
@@ -46,8 +46,8 @@ export class Timeline extends React.Component<FieldViewProps> {
@observable private _playButton = faPlayCircle;
@observable private _timelineVisible = false;
@observable private _mouseToggled = false;
- @observable private _doubleClickEnabled = false;
-
+ @observable private _doubleClickEnabled = false;
+ private _titleHeight = 0;
@computed
private get children(): List<Doc> {
let extendedDocument = ["image", "video", "pdf"].includes(StrCast(this.props.Document.type));
@@ -60,28 +60,33 @@ export class Timeline extends React.Component<FieldViewProps> {
}
return Cast(this.props.Document[this.props.fieldKey], listSpec(Doc)) as List<Doc>;
}
+ componentWillMount() {
+ this._titleHeight = window.innerHeight / 14; //arbitrary number, but for responsiveness
+ this.MIN_CONTAINER_HEIGHT = this._titleHeight + 130;
+ this.DEFAULT_CONTAINER_HEIGHT = this._titleHeight * 2 + 130;
+ }
componentDidMount() {
runInAction(() => {
- if (!this.props.Document.AnimationLength){
- this.props.Document.AnimationLength = this._time;
+ if (!this.props.Document.AnimationLength) {
+ this.props.Document.AnimationLength = this._time;
} else {
- this._time = NumCast(this.props.Document.AnimationLength);
- console.log(this._time);
+ this._time = NumCast(this.props.Document.AnimationLength);
+ console.log(this._time);
}
this._totalLength = this._tickSpacing * (this._time / this._tickIncrement);
this._visibleLength = this._infoContainer.current!.getBoundingClientRect().width;
this._visibleStart = this._infoContainer.current!.scrollLeft;
- this.props.Document.isATOn = !this.props.Document.isATOn;
- this.toggleHandle();
+ this.props.Document.isATOn = !this.props.Document.isATOn;
+ this.toggleHandle();
});
}
- componentWillUnmount(){
+ componentWillUnmount() {
runInAction(() => {
- console.log(this._time);
- this.props.Document.AnimationLength = this._time;
- });
+ console.log(this._time);
+ this.props.Document.AnimationLength = this._time;
+ });
}
/**
@@ -90,11 +95,11 @@ export class Timeline extends React.Component<FieldViewProps> {
*/
@action
drawTicks = () => {
- let ticks = [];
- for (let i = 0; i < this._time / this._tickIncrement; i++){
- ticks.push(<div key={Utils.GenerateGuid()} className="tick" style={{ transform: `translate(${i* this._tickSpacing}px)`, position: "absolute", pointerEvents: "none" }}> <p>{this.toReadTime(i * this._tickIncrement)}</p></div>);
+ let ticks = [];
+ for (let i = 0; i < this._time / this._tickIncrement; i++) {
+ ticks.push(<div key={Utils.GenerateGuid()} className="tick" style={{ transform: `translate(${i * this._tickSpacing}px)`, position: "absolute", pointerEvents: "none" }}> <p>{this.toReadTime(i * this._tickIncrement)}</p></div>);
}
- return ticks;
+ return ticks;
}
@@ -210,14 +215,14 @@ export class Timeline extends React.Component<FieldViewProps> {
let titleContainer = this._titleContainer.current!;
this.movePanX(this._visibleStart - e.movementX);
trackbox.scrollTop = trackbox.scrollTop - e.movementY;
- titleContainer.scrollTop = titleContainer.scrollTop - e.movementY;
- if (this._visibleStart + this._visibleLength + 20>= this._totalLength){
- this._visibleStart -= e.movementX;
+ titleContainer.scrollTop = titleContainer.scrollTop - e.movementY;
+ if (this._visibleStart + this._visibleLength + 20 >= this._totalLength) {
+ this._visibleStart -= e.movementX;
this._totalLength -= e.movementX;
- this._time -= KeyframeFunc.convertPixelTime(e.movementX, "mili", "time", this._tickSpacing, this._tickIncrement);
- this.props.Document.AnimationLength = this._time;
+ this._time -= KeyframeFunc.convertPixelTime(e.movementX, "mili", "time", this._tickSpacing, this._tickIncrement);
+ this.props.Document.AnimationLength = this._time;
}
-
+
}
@action
movePanX = (pixel: number) => {
@@ -263,9 +268,11 @@ export class Timeline extends React.Component<FieldViewProps> {
}
timelineContextMenu = (e: MouseEvent): void => {
- ContextMenu.Instance.addItem({description: (this._timelineVisible ? "Close" : "Open") + " Animation Timeline", event: action(() => {
- this._timelineVisible = !this._timelineVisible;
- }), icon: this._timelineVisible ? faEyeSlash : faEye });
+ ContextMenu.Instance.addItem({
+ description: (this._timelineVisible ? "Close" : "Open") + " Animation Timeline", event: action(() => {
+ this._timelineVisible = !this._timelineVisible;
+ }), icon: this._timelineVisible ? faEyeSlash : faEye
+ });
}
@@ -318,28 +325,28 @@ export class Timeline extends React.Component<FieldViewProps> {
let size = 40 * scale; //50 is default
return (
<div key="timeline_toolbox" className="timeline-toolbox" style={{ height: `${size}px` }}>
- <div key="timeline_windBack" onClick={this.windBackward}> <FontAwesomeIcon icon={faBackward} style={{ height: `${size}px`, width: `${size}px`, color:"grey"}} /> </div>
- <div key=" timeline_play" onClick={this.onPlay}> <FontAwesomeIcon icon={this._playButton} style={{ height: `${size}px`, width: `${size}px`, color:"grey"}} /> </div>
- <div key="timeline_windForward" onClick={this.windForward}> <FontAwesomeIcon icon={faForward} style={{ height: `${size}px`, width: `${size}px`, color: "grey"}} /> </div>
+ <div key="timeline_windBack" onClick={this.windBackward}> <FontAwesomeIcon icon={faBackward} style={{ height: `${size}px`, width: `${size}px`, color: "grey" }} /> </div>
+ <div key=" timeline_play" onClick={this.onPlay}> <FontAwesomeIcon icon={this._playButton} style={{ height: `${size}px`, width: `${size}px`, color: "grey" }} /> </div>
+ <div key="timeline_windForward" onClick={this.windForward}> <FontAwesomeIcon icon={faForward} style={{ height: `${size}px`, width: `${size}px`, color: "grey" }} /> </div>
<div key="overview-text" className="animation-text">Timeline Overview</div>
- <TimelineOverview 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 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 key="animation-text" className="animation-text">Mode: {this.props.Document.isATOn ? "Authoring" : "Play"}</div>
<div key="round-toggle" ref={this._roundToggleContainerRef} className="round-toggle">
<div key="round-toggle-slider" ref={this._roundToggleRef} className="round-toggle-slider" onPointerDown={this.toggleChecked}> </div>
</div>
- <div key="time-text" className="animation-text" style ={{visibility: this.props.Document.isATOn ? "visible" : "hidden"}}>Length: </div>
- <input className="time-input" style={{visibility: this.props.Document.isATOn ? "visible" : "hidden"}} placeholder={String(this._time) + "ms"} ref = {this._timeInputRef} onKeyDown={this.onTimeInput}/>
+ <div key="time-text" className="animation-text" style={{ visibility: this.props.Document.isATOn ? "visible" : "hidden" }}>Length: </div>
+ <input className="time-input" style={{ visibility: this.props.Document.isATOn ? "visible" : "hidden" }} placeholder={String(this._time) + "ms"} ref={this._timeInputRef} onKeyDown={this.onTimeInput} />
</div>
);
}
-
- @action
+
+ @action
private onTimeInput = (e: React.KeyboardEvent) => {
- if (e.keyCode === 13){
- let timeInput = this._timeInputRef.current!;
+ if (e.keyCode === 13) {
+ let timeInput = this._timeInputRef.current!;
this._time = parseInt(timeInput.value, 10);
- this._totalLength = KeyframeFunc.convertPixelTime(this._time, "mili", "pixel", this._tickSpacing, this._tickIncrement);
- this.props.Document.AnimationLength = this._time;
+ this._totalLength = KeyframeFunc.convertPixelTime(this._time, "mili", "pixel", this._tickSpacing, this._tickIncrement);
+ this.props.Document.AnimationLength = this._time;
}
}
@@ -347,7 +354,7 @@ export class Timeline extends React.Component<FieldViewProps> {
private toggleChecked = (e: React.PointerEvent) => {
e.preventDefault();
e.stopPropagation();
- this.toggleHandle();
+ this.toggleHandle();
}
private toggleHandle = () => {
@@ -358,36 +365,36 @@ export class Timeline extends React.Component<FieldViewProps> {
roundToggle.style.transform = "translate(0px, 0px)";
roundToggle.style.animationName = "turnoff";
roundToggleContainer.style.animationName = "turnoff";
- roundToggleContainer.style.backgroundColor = "white";
+ roundToggleContainer.style.backgroundColor = "white";
timelineContainer.style.top = `${-this._containerHeight}px`;
this.props.Document.isATOn = false;
} else {
roundToggle.style.transform = "translate(45px, 0px)";
roundToggle.style.animationName = "turnon";
roundToggleContainer.style.animationName = "turnon";
- roundToggleContainer.style.backgroundColor = "green";
- timelineContainer.style.top = "0px";
+ roundToggleContainer.style.backgroundColor = "green";
+ timelineContainer.style.top = "0px";
this.props.Document.isATOn = true;
}
}
- @observable private _check:string = "";
- @observable private _checkVisible:boolean = false;
+ @observable private _check: string = "";
+ @observable private _checkVisible: boolean = false;
@action
private onCheckClicked = (type: string) => {
- if (type === "yes"){
- this._check = "yes";
- } else if (type === "no"){
+ if (type === "yes") {
+ this._check = "yes";
+ } else if (type === "no") {
this._check = "no";
}
}
- @action
- private checkCallBack = (visible:boolean) => {
- this._checkVisible = visible;
- if (!visible){ //when user confirms
+ @action
+ private checkCallBack = (visible: boolean) => {
+ this._checkVisible = visible;
+ if (!visible) { //when user confirms
this._check = "";
}
@@ -404,22 +411,22 @@ export class Timeline extends React.Component<FieldViewProps> {
<div key="timeline_scrubberhead" className="scrubberhead"></div>
</div>
<div key="timeline_trackbox" className="trackbox" ref={this._trackbox} onPointerDown={this.onPanDown} style={{ width: `${this._totalLength}px` }}>
- {DocListCast(this.children).map(doc => <Track node={doc} currentBarX={this._currentBarX} changeCurrentBarX={this.changeCurrentBarX} transform={this.props.ScreenToLocalTransform()} time={this._time} tickSpacing={this._tickSpacing} tickIncrement={this._tickIncrement} collection={this.props.Document} timelineVisible={this._timelineVisible} check={this._check} checkCallBack={this.checkCallBack}/>)}
+ {DocListCast(this.children).map(doc => <Track node={doc} currentBarX={this._currentBarX} changeCurrentBarX={this.changeCurrentBarX} transform={this.props.ScreenToLocalTransform()} time={this._time} tickSpacing={this._tickSpacing} tickIncrement={this._tickIncrement} collection={this.props.Document} timelineVisible={this._timelineVisible} check={this._check} checkCallBack={this.checkCallBack} />)}
</div>
</div>
<div key="timeline_title" className="title-container" ref={this._titleContainer}>
- {DocListCast(this.children).map(doc => <div className="datapane" onPointerOver={() => { Doc.BrushDoc(doc); }} onPointerOut={() => { Doc.UnBrushDoc(doc); }}><p>{doc.title}</p></div>)}
+ {DocListCast(this.children).map(doc => <div style={{ height: `${(this._titleHeight)}px` }} className="datapane" onPointerOver={() => { Doc.BrushDoc(doc); }} onPointerOut={() => { Doc.UnBrushDoc(doc); }}><p>{doc.title}</p></div>)}
</div>
<div key="timeline_resize" onPointerDown={this.onResizeDown}>
<FontAwesomeIcon className="resize" icon={faGripLines} />
</div>
</div>
- <div key="timeline-checker" className="timeline-checker" style={{top: `${this._containerHeight}px`, visibility: this._checkVisible ? "visible" : "hidden"}}>
- <div onClick = {() => {this.onCheckClicked("yes");}}>
- <FontAwesomeIcon style={{color: "#42b883"}} className="check" icon={faCheckCircle} />
+ <div key="timeline-checker" className="timeline-checker" style={{ top: `${this._containerHeight}px`, visibility: this._checkVisible ? "visible" : "hidden" }}>
+ <div onClick={() => { this.onCheckClicked("yes"); }}>
+ <FontAwesomeIcon style={{ color: "#42b883" }} className="check" icon={faCheckCircle} />
</div>
- <div onClick = {() => {this.onCheckClicked("no");}}>
- <FontAwesomeIcon style={{color: "#ff7e67"}} className="check" icon={faTimesCircle} />
+ <div onClick={() => { this.onCheckClicked("no"); }}>
+ <FontAwesomeIcon style={{ color: "#ff7e67" }} className="check" icon={faTimesCircle} />
</div>
</div>
</div>
diff --git a/src/client/views/animationtimeline/Track.scss b/src/client/views/animationtimeline/Track.scss
index c8d56edf6..61a8e0b88 100644
--- a/src/client/views/animationtimeline/Track.scss
+++ b/src/client/views/animationtimeline/Track.scss
@@ -5,7 +5,6 @@
.track {
.inner {
top:0px;
- height: 75px;
width: calc(100%);
background-color: $light-color;
border: 1px solid $dark-color;
diff --git a/src/client/views/animationtimeline/Track.tsx b/src/client/views/animationtimeline/Track.tsx
index e66b42690..bee9933b0 100644
--- a/src/client/views/animationtimeline/Track.tsx
+++ b/src/client/views/animationtimeline/Track.tsx
@@ -19,10 +19,10 @@ interface IProps {
time: number;
tickIncrement: number;
tickSpacing: number;
- timelineVisible: boolean;
- check: string;
+ timelineVisible: boolean;
+ check: string;
changeCurrentBarX: (x: number) => void;
- checkCallBack: (visible: boolean) => void;
+ checkCallBack: (visible: boolean) => void;
}
@@ -36,35 +36,35 @@ export class Track extends React.Component<IProps> {
@observable private _onRegionData: (Doc | undefined) = undefined;
@observable private _storedState: (Doc | undefined) = undefined;
@observable private filterList = [
- "regions",
- "cursors",
- "hidden",
- "nativeHeight",
- "nativeWidth",
- "schemaColumns",
- "baseLayout",
- "backgroundLayout",
- "layout",
- ];
-
- @computed private get regions() { return Cast(this.props.node.regions, listSpec(Doc)) as List<Doc>;}
+ "regions",
+ "cursors",
+ "hidden",
+ "nativeHeight",
+ "nativeWidth",
+ "schemaColumns",
+ "baseLayout",
+ "backgroundLayout",
+ "layout",
+ ];
+ private _trackHeight = 0;
+
+ @computed private get regions() { return Cast(this.props.node.regions, listSpec(Doc)) as List<Doc>; }
componentWillMount() {
runInAction(() => {
- if (!this.props.node.regions) this.props.node.regions = new List<Doc>();
- console.log("hi");
- console.log("HELLO");
- console.log("hi");
+ if (!this.props.node.regions) this.props.node.regions = new List<Doc>();
+ this._trackHeight = window.innerHeight / 14; //for responsiveness
+
});
}
componentDidMount() {
runInAction(async () => {
- this._timelineVisibleReaction = this.timelineVisibleReaction();
+ this._timelineVisibleReaction = this.timelineVisibleReaction();
this._currentBarXReaction = this.currentBarXReaction();
if (this.regions.length === 0) this.createRegion(KeyframeFunc.convertPixelTime(this.props.currentBarX, "mili", "time", this.props.tickSpacing, this.props.tickIncrement));
- this.props.node.hidden = false;
- this.props.node.opacity = 1;
+ this.props.node.hidden = false;
+ this.props.node.opacity = 1;
});
}
@@ -72,7 +72,7 @@ export class Track extends React.Component<IProps> {
runInAction(() => {
//disposing reactions
if (this._currentBarXReaction) this._currentBarXReaction();
- if (this._timelineVisibleReaction) this._timelineVisibleReaction();
+ if (this._timelineVisibleReaction) this._timelineVisibleReaction();
});
}
@@ -81,7 +81,7 @@ export class Track extends React.Component<IProps> {
let keyframes: List<Doc> = (Cast(regiondata.keyframes, listSpec(Doc)) as List<Doc>);
let kfIndex: number = keyframes.indexOf(ref);
let kf = keyframes[kfIndex] as Doc;
- if (!kf) return;
+ if (!kf) return;
if (kf.type === KeyframeFunc.KeyframeType.default) { // only save for non-fades
kf.key = Doc.MakeCopy(this.props.node, true);
let leftkf: (Doc | undefined) = await KeyframeFunc.calcMinLeft(regiondata!, KeyframeFunc.convertPixelTime(this.props.currentBarX, "mili", "time", this.props.tickSpacing, this.props.tickIncrement), kf); // lef keyframe, if it exists
@@ -107,13 +107,13 @@ export class Track extends React.Component<IProps> {
this._isOnKeyframe = false;
}
- @action
+ @action
revertState = () => {
- let copyDoc = Doc.MakeCopy(this.props.node, true);
+ let copyDoc = Doc.MakeCopy(this.props.node, true);
if (this._storedState) this.applyKeys(this._storedState);
- let newState = new Doc();
- newState.key = copyDoc;
- this._storedState = newState;
+ let newState = new Doc();
+ newState.key = copyDoc;
+ this._storedState = newState;
}
@action
@@ -129,13 +129,13 @@ export class Track extends React.Component<IProps> {
}
});
}
- @action
+ @action
timelineVisibleReaction = () => {
return reaction(() => {
- return this.props.timelineVisible;
+ return this.props.timelineVisible;
}, isVisible => {
- this.revertState();
- });
+ this.revertState();
+ });
}
@action
@@ -162,28 +162,28 @@ export class Track extends React.Component<IProps> {
@action
private applyKeys = async (kf: Doc) => {
let kfNode = await Cast(kf.key, Doc) as Doc;
- let docFromApply = kfNode;
+ let docFromApply = kfNode;
if (this.filterKeys(Doc.allKeys(this.props.node)).length > this.filterKeys(Doc.allKeys(kfNode)).length) docFromApply = this.props.node;
this.filterKeys(Doc.allKeys(docFromApply)).forEach(key => {
if (!kfNode[key]) {
this.props.node[key] = undefined;
} else {
let stored = kfNode[key];
- if(stored instanceof ObjectField){
- this.props.node[key] = stored[Copy]();
+ if (stored instanceof ObjectField) {
+ this.props.node[key] = stored[Copy]();
} else {
- this.props.node[key] = stored;
+ this.props.node[key] = stored;
}
}
});
}
-
+
@action
private filterKeys = (keys: string[]): string[] => {
return keys.reduce((acc: string[], key: string) => {
- if (!this.filterList.includes(key)) acc.push(key);
+ if (!this.filterList.includes(key)) acc.push(key);
return acc;
}, []);
}
@@ -249,10 +249,10 @@ export class Track extends React.Component<IProps> {
}
} else {
let stored = leftNode[key];
- if(stored instanceof ObjectField){
- this.props.node[key] = stored[Copy]();
+ if (stored instanceof ObjectField) {
+ this.props.node[key] = stored[Copy]();
} else {
- this.props.node[key] = stored;
+ this.props.node[key] = stored;
}
}
});
@@ -276,7 +276,7 @@ export class Track extends React.Component<IProps> {
let inner = this._inner.current!;
let offsetX = Math.round((e.clientX - inner.getBoundingClientRect().left) * this.props.transform.Scale);
this.createRegion(KeyframeFunc.convertPixelTime(offsetX, "mili", "time", this.props.tickSpacing, this.props.tickIncrement));
- this.forceUpdate();
+ this.forceUpdate();
}
createRegion = (position: number) => {
@@ -297,7 +297,7 @@ export class Track extends React.Component<IProps> {
return (
<div className="track-container">
<div className="track">
- <div className="inner" ref={this._inner} onDoubleClick={this.onInnerDoubleClick} onPointerOver = {() => {Doc.BrushDoc(this.props.node);}}onPointerOut={() => {Doc.UnBrushDoc(this.props.node);}}>
+ <div className="inner" ref={this._inner} onDoubleClick={this.onInnerDoubleClick} onPointerOver={() => { Doc.BrushDoc(this.props.node); }} onPointerOut={() => { Doc.UnBrushDoc(this.props.node); }} style={{ height: `${this._trackHeight}px` }}>
{DocListCast(this.regions).map((region) => {
return <Keyframe {...this.props} RegionData={region} />;
})}
diff --git a/src/client/views/linking/LinkFollowBox.tsx b/src/client/views/linking/LinkFollowBox.tsx
index efe2c7f2a..f3193896f 100644
--- a/src/client/views/linking/LinkFollowBox.tsx
+++ b/src/client/views/linking/LinkFollowBox.tsx
@@ -21,7 +21,7 @@ import { docs_v1 } from "googleapis";
import { Utils } from "../../../Utils";
import { Link } from "@react-pdf/renderer";
-enum FollowModes {
+export enum FollowModes {
OPENTAB = "Open in Tab",
OPENRIGHT = "Open in Right Split",
OPENFULL = "Open Full Screen",
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-10 13:50:45 +0000