From 896489aa77d9894f2195c802afa8d05fae4dacf1 Mon Sep 17 00:00:00 2001
From: andrewdkim <adkim414@gmail.com>
Date: Tue, 23 Jul 2019 12:39:58 -0400
Subject: debug graphics

---
 src/client/views/nodes/Timeline.tsx | 167 +++++++++++++++++++-----------------
 1 file changed, 87 insertions(+), 80 deletions(-)

(limited to 'src/client/views/nodes/Timeline.tsx')

diff --git a/src/client/views/nodes/Timeline.tsx b/src/client/views/nodes/Timeline.tsx
index e2112a0f0..1f0fe8b77 100644
--- a/src/client/views/nodes/Timeline.tsx
+++ b/src/client/views/nodes/Timeline.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import "./Timeline.scss";
 import { CollectionSubView } from "../collections/CollectionSubView";
-import { Document, listSpec} from "../../../new_fields/Schema";
+import { Document, listSpec } from "../../../new_fields/Schema";
 import { observer } from "mobx-react";
 import { Track } from "./Track";
 import { observable, reaction, action, IReactionDisposer, observe, IObservableArray, computed, toJS, Reaction, IObservableObject, trace, autorun, runInAction } from "mobx";
@@ -16,6 +16,7 @@ import { DocumentManager } from "../../util/DocumentManager";
 import { VideoBox } from "./VideoBox";
 import { VideoField } from "../../../new_fields/URLField";
 import { CollectionVideoView } from "../collections/CollectionVideoView";
+import { Transform } from "../../util/Transform";
 
 
 export interface FlyoutProps {
@@ -33,19 +34,19 @@ export class Timeline extends CollectionSubView(Document) {
     private readonly DEFAULT_TICK_SPACING: number = 50;
     private readonly MIN_CONTAINER_HEIGHT: number = 205;
     private readonly MAX_CONTAINER_HEIGHT: number = 800;
-    private readonly DEFAULT_TICK_INCREMENT:number = 1000; 
+    private readonly DEFAULT_TICK_INCREMENT: number = 1000;
 
     @observable private _isMinimized = false;
     @observable private _tickSpacing = this.DEFAULT_TICK_SPACING;
-    @observable private _tickIncrement = this.DEFAULT_TICK_INCREMENT; 
+    @observable private _tickIncrement = this.DEFAULT_TICK_INCREMENT;
 
     @observable private _scrubberbox = React.createRef<HTMLDivElement>();
     @observable private _scrubber = React.createRef<HTMLDivElement>();
     @observable private _trackbox = React.createRef<HTMLDivElement>();
     @observable private _titleContainer = React.createRef<HTMLDivElement>();
     @observable private _timelineContainer = React.createRef<HTMLDivElement>();
-  
-    @observable private _timelineWrapper = React.createRef<HTMLDivElement>(); 
+
+    @observable private _timelineWrapper = React.createRef<HTMLDivElement>();
     @observable private _infoContainer = React.createRef<HTMLDivElement>();
 
 
@@ -57,62 +58,64 @@ export class Timeline extends CollectionSubView(Document) {
     @observable private _containerHeight: number = this.DEFAULT_CONTAINER_HEIGHT;
     @observable private _time = 100000; //DEFAULT
     @observable private _ticks: number[] = [];
-    @observable private flyoutInfo:FlyoutProps = {x: 0, y: 0, display: "none", regiondata: new Doc(), regions: new List<Doc>()}; 
+    @observable private flyoutInfo: FlyoutProps = { x: 0, y: 0, display: "none", regiondata: new Doc(), regions: new List<Doc>() };
 
     @computed
-    private get children():List<Doc>{              
-        let extendedDocument = ["image", "video", "pdf"].includes(StrCast(this.props.Document.type)); 
+    private get children(): List<Doc> {
+        let extendedDocument = ["image", "video", "pdf"].includes(StrCast(this.props.Document.type));
         if (extendedDocument) {
             if (this.props.Document.data_ext) {
-               return Cast((Cast(this.props.Document.data_ext, Doc) as Doc).annotations, listSpec(Doc)) as List<Doc>; 
+                return Cast((Cast(this.props.Document.data_ext, Doc) as Doc).annotations, listSpec(Doc)) as List<Doc>;
             } else {
                 return new List<Doc>();
             }
         }
-        return Cast(this.props.Document[this.props.fieldKey], listSpec(Doc)) as List<Doc>; 
+        return Cast(this.props.Document[this.props.fieldKey], listSpec(Doc)) as List<Doc>;
     }
 
+    componentWillMount(){
+    }
     componentDidMount() {
         if (StrCast(this.props.Document.type) === "video") {
-            console.log("ran"); 
-            console.log(this.props.Document.duration); 
-            if (this.props.Document.duration){
-                this._time = Math.round(NumCast(this.props.Document.duration))  * 1000; 
+            console.log("ran");
+            console.log(this.props.Document.duration);
+            if (this.props.Document.duration) {
+                this._time = Math.round(NumCast(this.props.Document.duration)) * 1000;
 
                 reaction(() => {
-                    return NumCast(this.props.Document.curPage); 
+                    return NumCast(this.props.Document.curPage);
                 }, curPage => {
                     this.changeCurrentBarX(curPage * this._tickIncrement / this._tickSpacing)
-                }); 
+                });
 
             }
-            
-        }   
+
+        }
         runInAction(() => {
             reaction(() => {
-                return this._time; 
-            }, () =>{
-                this._ticks = []; 
+                return this._time;
+            }, () => {
+                this._ticks = [];
                 for (let i = 0; i < this._time;) {
-                    this._ticks.push(i); 
-                    i += this._tickIncrement; 
+                    this._ticks.push(i);
+                    i += this._tickIncrement;
                 }
                 let trackbox = this._trackbox.current!;
                 this._boxLength = this._tickIncrement / 1000 * this._tickSpacing * this._ticks.length;
                 trackbox.style.width = `${this._boxLength}`;
-            }, {fireImmediately: true}); 
+                this._scrubberbox.current!.style.width = `${this._boxLength}`;
+            }, { fireImmediately: true });
         });
     }
 
     componentDidUpdate() {
-    
     }
 
     @action
     changeCurrentBarX = (x: number) => {
         this._currentBarX = x;
     }
-   
+
     //for playing
     @action
     onPlay = async (e: React.MouseEvent) => {
@@ -166,7 +169,7 @@ export class Timeline extends CollectionSubView(Document) {
         e.stopPropagation();
         let scrubberbox = this._scrubberbox.current!;
         let left = scrubberbox.getBoundingClientRect().left;
-        let offsetX = Math.round(e.clientX - left);
+        let offsetX = Math.round(e.clientX - left) * this.props.ScreenToLocalTransform().Scale;
         this._currentBarX = offsetX;
     }
 
@@ -175,7 +178,7 @@ export class Timeline extends CollectionSubView(Document) {
         e.preventDefault();
         e.stopPropagation();
         let scrubberbox = this._scrubberbox.current!;
-        let offset = scrubberbox.scrollLeft + e.clientX - scrubberbox.getBoundingClientRect().left;
+        let offset = (e.clientX - scrubberbox.getBoundingClientRect().left) * this.props.ScreenToLocalTransform().Scale;
         this._currentBarX = offset;
     }
 
@@ -218,7 +221,7 @@ export class Timeline extends CollectionSubView(Document) {
     onResizeMove = (e: PointerEvent) => {
         e.preventDefault();
         e.stopPropagation();
-        let offset = e.clientY - this._timelineContainer.current!.getBoundingClientRect().bottom; 
+        let offset = e.clientY - this._timelineContainer.current!.getBoundingClientRect().bottom;
         if (this._containerHeight + offset <= this.MIN_CONTAINER_HEIGHT) {
             this._containerHeight = this.MIN_CONTAINER_HEIGHT;
         } else if (this._containerHeight + offset >= this.MAX_CONTAINER_HEIGHT) {
@@ -231,10 +234,10 @@ export class Timeline extends CollectionSubView(Document) {
     @action
     onTimelineDown = (e: React.PointerEvent) => {
         e.preventDefault();
-        if (e.nativeEvent.which === 1 && !this._isFrozen){
+        if (e.nativeEvent.which === 1 && !this._isFrozen) {
             document.addEventListener("pointermove", this.onTimelineMove);
-            document.addEventListener("pointerup", () => { document.removeEventListener("pointermove", this.onTimelineMove);});
-        } 
+            document.addEventListener("pointerup", () => { document.removeEventListener("pointermove", this.onTimelineMove); });
+        }
     }
 
     @action
@@ -243,8 +246,8 @@ export class Timeline extends CollectionSubView(Document) {
         e.stopPropagation();
         let timelineContainer = this._timelineWrapper.current!;
         let left = parseFloat(timelineContainer.style.left!);
-        let top = parseFloat(timelineContainer.style.top!); 
-        timelineContainer.style.left = `${left + e.movementX}px`; 
+        let top = parseFloat(timelineContainer.style.top!);
+        timelineContainer.style.left = `${left + e.movementX}px`;
         timelineContainer.style.top = `${top + e.movementY}px`;
     }
 
@@ -275,42 +278,46 @@ export class Timeline extends CollectionSubView(Document) {
     }
 
 
-    private _freezeText ="Freeze Timeline"; 
+    private _freezeText = "Freeze Timeline";
 
     timelineContextMenu = (e: React.MouseEvent): void => {
         let subitems: ContextMenuProps[] = [];
         let timelineContainer = this._timelineWrapper.current!;
-        subitems.push({ description: "Pin to Top", event: action(() => { 
-            if (!this._isFrozen){
-                timelineContainer.style.transition = "top 1000ms ease-in, left 1000ms ease-in";  //?????
-                timelineContainer.style.left = "0px"; 
-                timelineContainer.style.top = "0px"; 
-                timelineContainer.style.transition = "none"; 
-            }
-        }), icon: faArrowUp });
         subitems.push({
-            description: "Pin to Bottom", event: action(() => {                    
-                console.log(this.props.Document.y); 
+            description: "Pin to Top", event: action(() => {
+                if (!this._isFrozen) {
+                    timelineContainer.style.transition = "top 1000ms ease-in, left 1000ms ease-in";  //?????
+                    timelineContainer.style.left = "0px";
+                    timelineContainer.style.top = "0px";
+                    timelineContainer.style.transition = "none";
+                }
+            }), icon: faArrowUp
+        });
+        subitems.push({
+            description: "Pin to Bottom", event: action(() => {
+                console.log(this.props.Document.y);
 
-                if (!this._isFrozen){
+                if (!this._isFrozen) {
                     timelineContainer.style.transform = `translate(0px, ${e.pageY - this._containerHeight}px)`;
                 }
-            }), icon: faArrowDown});
+            }), icon: faArrowDown
+        });
         subitems.push({
             description: this._freezeText, event: action(() => {
-                if (this._isFrozen){
-                    this._isFrozen = false; 
-                    this._freezeText = "Freeze Timeline"; 
+                if (this._isFrozen) {
+                    this._isFrozen = false;
+                    this._freezeText = "Freeze Timeline";
                 } else {
-                    this._isFrozen = true;                
-                    this._freezeText = "Unfreeze Timeline"; 
+                    this._isFrozen = true;
+                    this._freezeText = "Unfreeze Timeline";
                 }
-            }), icon: "thumbtack" }); 
-        ContextMenu.Instance.addItem({ description: "Timeline Funcs...", subitems: subitems, icon: faClock});
+            }), icon: "thumbtack"
+        });
+        ContextMenu.Instance.addItem({ description: "Timeline Funcs...", subitems: subitems, icon: faClock });
     }
 
-    
-    
+
+
     @action
     getFlyout = (props: FlyoutProps) => {
         for (const [k, v] of Object.entries(props)) {
@@ -320,15 +327,15 @@ export class Timeline extends CollectionSubView(Document) {
 
     render() {
         return (
-            <div style={{left:"0px", top: "0px", position:"absolute", width:"100%", transform:"translate(0px, 0px)"}} ref = {this._timelineWrapper}>
+            <div style={{ left: "0px", top: "0px", position: "absolute", width: "100%", transform: "translate(0px, 0px)" }} ref={this._timelineWrapper}>
                 <button className="minimize" onClick={this.minimize}>Minimize</button>
-                <div className="timeline-container" style={{ height: `${this._containerHeight}px`, left:"0px", top:"30px" }} ref={this._timelineContainer}onPointerDown={this.onTimelineDown} onContextMenu={this.timelineContextMenu}>
+                <div className="timeline-container" style={{ height: `${this._containerHeight}px`, left: "0px", top: "30px" }} ref={this._timelineContainer} onPointerDown={this.onTimelineDown} onContextMenu={this.timelineContextMenu}>
                     {/* <TimelineFlyout flyoutInfo={this.flyoutInfo} tickSpacing={this._tickSpacing}/> */}
                     <div className="toolbox">
                         <div onClick={this.windBackward}> <FontAwesomeIcon icon={faBackward} size="2x" /> </div>
                         <div onClick={this.onPlay}> <FontAwesomeIcon icon={faPlayCircle} size="2x" /> </div>
                         <div onClick={this.windForward}> <FontAwesomeIcon icon={faForward} size="2x" /> </div>
-                        <TimelineOverview currentBarX = {this._currentBarX}/>
+                        {/* <TimelineOverview currentBarX = {this._currentBarX}/> */}
                     </div>
                     <div className="info-container" ref={this._infoContainer}>
                         <div className="scrubberbox" ref={this._scrubberbox} onClick={this.onScrubberClick}>
@@ -340,7 +347,7 @@ export class Timeline extends CollectionSubView(Document) {
                             <div className="scrubberhead"></div>
                         </div>
                         <div className="trackbox" ref={this._trackbox} onPointerDown={this.onPanDown}>
-                            {DocListCast(this.children).map(doc => <Track node={doc} currentBarX={this._currentBarX} changeCurrentBarX={this.changeCurrentBarX} setFlyout={this.getFlyout} />)}
+                            {DocListCast(this.children).map(doc => <Track node={doc} currentBarX={this._currentBarX} changeCurrentBarX={this.changeCurrentBarX} setFlyout={this.getFlyout} transform={this.props.ScreenToLocalTransform()}/>)}
                         </div>
                     </div>
                     <div className="title-container" ref={this._titleContainer}>
@@ -358,21 +365,21 @@ export class Timeline extends CollectionSubView(Document) {
 
 
 interface TimelineFlyoutProps {
-    flyoutInfo:FlyoutProps; 
-    tickSpacing:number; 
+    flyoutInfo: FlyoutProps;
+    tickSpacing: number;
 
 }
 
 interface TimelineOverviewProps {
-    currentBarX : number; 
+    currentBarX: number;
 }
 
-class TimelineOverview extends React.Component<TimelineOverviewProps>{  
+class TimelineOverview extends React.Component<TimelineOverviewProps>{
 
-    componentWillMount(){
+    componentWillMount() {
 
     }
-    
+
     render() {
         return (
             <div className="overview">
@@ -382,7 +389,7 @@ class TimelineOverview extends React.Component<TimelineOverviewProps>{
                     </div>
                 </div>
             </div>
-        ); 
+        );
     }
 }
 
@@ -391,21 +398,21 @@ class TimelineFlyout extends React.Component<TimelineFlyoutProps>{
     @observable private _timeInput = React.createRef<HTMLInputElement>();
     @observable private _durationInput = React.createRef<HTMLInputElement>();
     @observable private _fadeInInput = React.createRef<HTMLInputElement>();
-    @observable private _fadeOutInput = React.createRef<HTMLInputElement>();    
-    
+    @observable private _fadeOutInput = React.createRef<HTMLInputElement>();
+
     private block = false;
 
     componentDidMount() {
         document.addEventListener("pointerdown", this.closeFlyout);
     }
-    componentWillUnmount(){
+    componentWillUnmount() {
         document.removeEventListener("pointerdown", this.closeFlyout);
     }
-    
-    componentDidUpdate(){
-        console.log(this.props.flyoutInfo); 
+
+    componentDidUpdate() {
+        console.log(this.props.flyoutInfo);
     }
-   
+
 
     @action
     changeTime = (e: React.KeyboardEvent) => {
@@ -469,7 +476,7 @@ class TimelineFlyout extends React.Component<TimelineFlyoutProps>{
         }
     }
 
-    render(){
+    render() {
         return (
             <div>
                 <div className="flyout-container" style={{ left: `${this.props.flyoutInfo.x}px`, top: `${this.props.flyoutInfo.y}px`, display: `${this.props.flyoutInfo.display!}` }} onPointerDown={this.onFlyoutDown}>
@@ -489,19 +496,19 @@ class TimelineFlyout extends React.Component<TimelineFlyoutProps>{
                     <button onClick={action((e: React.MouseEvent) => { this.props.flyoutInfo.regions!.splice(this.props.flyoutInfo.regions!.indexOf(this.props.flyoutInfo.regiondata!), 1); this.props.flyoutInfo.display = "none"; })}>delete</button>
                 </div>
             </div>
-        ); 
+        );
     }
 }
 
-class TimelineZoom extends React.Component{
+class TimelineZoom extends React.Component {
     componentDidMount() {
 
     }
-    render(){
+    render() {
         return (
             <div>
-                
+
             </div>
-        ); 
+        );
     }
 }
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2

