confirm box, regiondata bugfix

4 files changed, 62 insertions, 17 deletions

diff --git a/src/client/views/animationtimeline/Keyframe.tsx b/src/client/views/animationtimeline/Keyframe.tsx
index 6a5163cde..35d7afc7a 100644
--- a/src/client/views/animationtimeline/Keyframe.tsx
+++ b/src/client/views/animationtimeline/Keyframe.tsx
@@ -125,9 +125,10 @@ interface IProps {
     tickSpacing: number; 
     tickIncrement: number; 
     time: number; 
-    
+    check: string; 
     changeCurrentBarX: (x: number) => void;
     transform: Transform;
+    checkCallBack: (visible: boolean) => void; 
 }
 
 @observer
@@ -137,6 +138,7 @@ export class Keyframe extends React.Component<IProps> {
     @observable private _gain = 20; //default
     @observable private _mouseToggled = false; 
     @observable private _doubleClickEnabled = false; 
+    @observable private _index:number = 0; 
 
     @computed private get regiondata() { return RegionData(this.regions[this.regions.indexOf(this.props.RegionData)] as Doc);}
     @computed private get regions() { return Cast(this.props.node.regions, listSpec(Doc)) as List<Doc>;}
@@ -386,7 +388,7 @@ export class Keyframe extends React.Component<IProps> {
         }),         
         TimelineMenu.Instance.addItem("button", "Remove Region", ()=>{
             runInAction(() => {
-            this.regions.splice(this.regions.indexOf(this.regiondata), 1);}
+            this.regions.splice(this.regions.indexOf(this.props.RegionData), 1);}
         );}),
         TimelineMenu.Instance.addItem("input", `fadeIn: ${this.regiondata.fadeIn}ms`, (val) => {
             runInAction(() => {
@@ -492,10 +494,12 @@ export class Keyframe extends React.Component<IProps> {
     private _plotList: ([string, StrokeData] | undefined) = undefined;
     private _interpolationKeyframe: (Doc | undefined) = undefined; 
     private _type: string = ""; 
+    
 
     @action
     onContainerDown = (kf: Doc, type: string) => {
-        let listenerCreated = false;                 
+        let listenerCreated = false;              
+        this.props.checkCallBack(true);    
         this._type = type; 
         this.props.collection.backgroundColor = "rgb(0,0,0)";
         this._reac = reaction(() => {
@@ -504,16 +508,20 @@ export class Keyframe extends React.Component<IProps> {
             if (!listenerCreated) {
                 this._plotList = Array.from(data!)[data!.size - 1]!;
                 this._interpolationKeyframe = kf; 
-                document.addEventListener("pointerup", this.onReactionListen); 
                 listenerCreated = true; 
+                const reac = reaction(() => {
+                    return this.props.check; 
+                },  () => {
+                    if(this.props.check === "yes")  this.onReactionListen(); 
+                    reac(); 
+                    this.props.checkCallBack(false); 
+                }); 
             }
         });
     }
 
     @action
-    onReactionListen = (e: PointerEvent) => {
-        e.preventDefault();
-        e.stopPropagation();
+    onReactionListen = () => {
         if (this._reac && this._plotList && this._interpolationKeyframe) {
             this.props.collection.backgroundColor = "#FFF";
             this._reac();
@@ -554,8 +562,6 @@ export class Keyframe extends React.Component<IProps> {
             this._reac = undefined; 
             this._interpolationKeyframe = undefined; 
             this._plotList = undefined; 
-            this._type = ""; 
-            document.removeEventListener("pointerup", this.onReactionListen); 
         }
     }
 
diff --git a/src/client/views/animationtimeline/Timeline.scss b/src/client/views/animationtimeline/Timeline.scss
index 8317a3606..0f98ed7c4 100644
--- a/src/client/views/animationtimeline/Timeline.scss
+++ b/src/client/views/animationtimeline/Timeline.scss
@@ -159,9 +159,19 @@
 .timeline-checker{
     height: auto; 
     width: auto; 
-    position: absolute;     
+    overflow: hidden; 
+    position: absolute; 
+    display: flex; 
+    padding: 10px 10px; 
+    div{
+        height: auto; 
+        width: auto;
+        overflow: hidden; 
+        margin: 0px 10px; 
+        cursor: pointer
+    }
     .check{
-        width: 100px; 
-        height: 100px; 
+        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 0b6b06aaa..6028656dc 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} 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";
@@ -368,6 +368,28 @@ export class Timeline extends React.Component<FieldViewProps> {
             this.props.Document.isAnimating = true;
         }
     }
+
+
+    @observable private _check:string = ""; 
+    @observable private _checkVisible:boolean = false; 
+    @action
+    private onCheckClicked = (type: string) => {
+        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
+            this._check = "";
+        }
+
+    }
     render() {
         return (
             <div>
@@ -380,7 +402,7 @@ 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} />)}
+                                    {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}>
@@ -390,9 +412,13 @@ export class Timeline extends React.Component<FieldViewProps> {
                                 <FontAwesomeIcon className="resize" icon={faGripLines} />
                             </div>
                         </div>
-                        <div key="timeline-checker"> 
-                            <FontAwesomeIcon className="check" icon={faCheck} />
-                            <FontAwesomeIcon className="check" icon={faCross} />
+                        <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>
                         </div>
                     </div>
                     {this.timelineToolBox(1)}
diff --git a/src/client/views/animationtimeline/Track.tsx b/src/client/views/animationtimeline/Track.tsx
index 7a8f42ea7..14e309f68 100644
--- a/src/client/views/animationtimeline/Track.tsx
+++ b/src/client/views/animationtimeline/Track.tsx
@@ -20,7 +20,10 @@ interface IProps {
     tickIncrement: number;
     tickSpacing: number;
     timelineVisible: boolean; 
+    check: string; 
     changeCurrentBarX: (x: number) => void;
+    checkCallBack: (visible: boolean) => void; 
+
 }
 
 @observer