drag change

4 files changed, 56 insertions, 9 deletions

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index a977f4090..1a99ac383 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -26,6 +26,7 @@ import { MarqueeView } from "./MarqueeView";
 import React = require("react");
 import v5 = require("uuid/v5");
 import PDFMenu from "../../pdf/PDFMenu";
+import { Timeline } from "../../nodes/Timeline";
 
 export const panZoomSchema = createSchema({
     panX: "number",
diff --git a/src/client/views/nodes/Keyframe.scss b/src/client/views/nodes/Keyframe.scss
index 298fec34a..930384c7f 100644
--- a/src/client/views/nodes/Keyframe.scss
+++ b/src/client/views/nodes/Keyframe.scss
@@ -24,6 +24,7 @@
         left:-10px; 
         height:20px; 
         width:20px; 
+        background-color: black; 
         top: calc(50% - 10px); 
         position:absolute; 
     }
@@ -32,6 +33,7 @@
         height:20px; 
         width:20px; 
         top:calc(50% - 10px); 
+        background-color:black; 
         position:absolute; 
 
     }
diff --git a/src/client/views/nodes/Keyframe.tsx b/src/client/views/nodes/Keyframe.tsx
index cef6aac83..6f7a7ec0b 100644
--- a/src/client/views/nodes/Keyframe.tsx
+++ b/src/client/views/nodes/Keyframe.tsx
@@ -25,8 +25,9 @@ export class Keyframe extends React.Component<IProp> {
 
     @observable private _display:string = "none"; 
     @observable private _duration:number = 200; 
+    @observable private _bar = React.createRef<HTMLDivElement>(); 
 
-    async componentDidMount() {
+    componentDidMount() {
         console.log("mounted");
         if (this.props.node){
            
@@ -42,16 +43,14 @@ export class Keyframe extends React.Component<IProp> {
     onPointerEnter = (e: React.PointerEvent) => {
         e.preventDefault();
         e.stopPropagation(); 
-        //console.log("in"); 
-        this._display = "block"; 
+        //this._display = "block"; 
     }
 
     @action 
     onPointerOut = (e: React.PointerEvent) => {
         e.preventDefault();
         e.stopPropagation();
-        //console.log("out"); 
-        this._display = "none"; 
+        //this._display = "none"; 
     }
 
     @action 
@@ -69,13 +68,55 @@ export class Keyframe extends React.Component<IProp> {
         e.preventDefault(); 
         e.stopPropagation(); 
     }
+
+    @action 
+    onResizeLeft = (e:React.PointerEvent)=>{
+        let bar = this._bar.current!; 
+        bar.addEventListener("pointermove", this.onDragResizeLeft); 
+    }
+
+    @action 
+    onDragResizeLeft = (e:PointerEvent)=>{
+        e.preventDefault(); 
+        e.stopPropagation(); 
+        let bar = this._bar.current!;  
+        let barX = bar.getBoundingClientRect().left; 
+        let offset = barX - e.clientX; 
+        bar.style.width = `${bar.getBoundingClientRect().width + offset}px`; 
+    }
+
+    @action 
+    onResizeFinished =(e:React.PointerEvent) => {
+        e.preventDefault(); 
+        e.stopPropagation(); 
+        let bar = this._bar.current!; 
+        bar.removeEventListener("pointermove", this.onDragResizeLeft); 
+    }
    
+    @action 
+    onResizeRight = (e:React.PointerEvent)=> {
+        e.preventDefault(); 
+        e.stopPropagation(); 
+        let bar = this._bar.current!; 
+        bar.addEventListener("pointermove", this.onDragResizeRight); 
+    }
+
+    @action 
+    onDragResizeRight = (e:PointerEvent) => {
+        e.preventDefault(); 
+        e.stopPropagation(); 
+        let bar = this._bar.current!;  
+        let barX = bar.getBoundingClientRect().right; 
+        let offset = e.clientX - barX; 
+        bar.style.width = `${bar.getBoundingClientRect().width + offset}px`; 
+    }
+    
     render() {
         return (
             <div>
-                <div className="bar" style={{ transform: `translate(${this.props.position - (this._duration/2)}px)`, width:`${this._duration}px`}} onPointerOver={this.onPointerEnter} onPointerLeave={this.onPointerOut}>
-                    <div className="leftResize"></div>
-                    <div className="rightResize"></div>
+                <div className="bar" ref={this._bar} style={{ transform: `translate(${this.props.position - (this._duration/2)}px)`, width:`${this._duration}px`}} onPointerOver={this.onPointerEnter} onPointerLeave={this.onPointerOut}>
+                    <div className="leftResize" onPointerDown={this.onResizeLeft} ></div>
+                    <div className="rightResize" onPointerDown={this.onResizeRight}></div>
                     <div className="menubox" style={{display: this._display}}>
                         {/* <table className="menutable">
                             <tr>
diff --git a/src/client/views/nodes/Track.tsx b/src/client/views/nodes/Track.tsx
index cfb30aac5..dab73ce06 100644
--- a/src/client/views/nodes/Track.tsx
+++ b/src/client/views/nodes/Track.tsx
@@ -398,7 +398,10 @@ export class Track extends React.Component<props> {
 
     @action 
     onInnerDoubleClick = (e: React.MouseEvent) => {
-        this._keyframes.push(<Keyframe position={200} />); 
+        let inner = this._inner.current!; 
+        let left = inner.getBoundingClientRect().left;
+        let offsetX = Math.round(e.clientX - left);
+        this._keyframes.push(<Keyframe position={offsetX} />); 
     }
 
     render() {