diff options
author | andrewdkim <adkim414@gmail.com> | 2019-07-01 17:08:22 -0400 |
---|---|---|
committer | andrewdkim <adkim414@gmail.com> | 2019-07-01 17:08:22 -0400 |
commit | e7e7f21510103394239f96bb3e398e5509a7533e (patch) | |
tree | ace83d3c2b9605479f0065a501bcfec49797484c /src | |
parent | 3c735287ec92664e368649fea63ccd85210b5fc5 (diff) |
flyout
Diffstat (limited to 'src')
-rw-r--r-- | src/client/views/nodes/Keyframe.tsx | 101 | ||||
-rw-r--r-- | src/client/views/nodes/Timeline.scss | 36 | ||||
-rw-r--r-- | src/client/views/nodes/Timeline.tsx | 57 | ||||
-rw-r--r-- | src/client/views/nodes/Track.tsx | 10 |
4 files changed, 102 insertions, 102 deletions
diff --git a/src/client/views/nodes/Keyframe.tsx b/src/client/views/nodes/Keyframe.tsx index ed1f3b03a..263df0fd5 100644 --- a/src/client/views/nodes/Keyframe.tsx +++ b/src/client/views/nodes/Keyframe.tsx @@ -8,15 +8,19 @@ import { Doc, DocListCast } from "../../../new_fields/Doc"; import { Cast, FieldValue, StrCast, NumCast } from "../../../new_fields/Types"; import { List } from "../../../new_fields/List"; import { createSchema, defaultSpec, makeInterface, listSpec } from "../../../new_fields/Schema"; +import { any } from "bluebird"; +import { FlyoutProps } from "./Timeline"; +import { exportDefaultSpecifier } from "babel-types"; enum Direction { left = "left", right = "right" } + interface IProp { node: Doc; RegionData: Doc; - // routine: (innerFunc: () => void, args: any) => void; + setFlyout:(props:FlyoutProps) => any; } @@ -36,20 +40,6 @@ const RegionDataSchema = createSchema({ type RegionData = makeInterface<[typeof RegionDataSchema]>; export const RegionData = makeInterface(RegionDataSchema); -interface FlyoutInfo { - position: number; - fadeIn: number; - fadeOut: number; -} - - -const FlyoutObj = { - position: 0, - fadeIn: 0, - fadeOut: 1 -}; - -export var FlyoutInfoContext = React.createContext<FlyoutInfo>(FlyoutObj); @observer export class Keyframe extends React.Component<IProp> { @@ -65,32 +55,12 @@ export class Keyframe extends React.Component<IProp> { componentDidMount() { // need edge case here when keyframe data already exists when loading.....................; - this.fadein = 100; - - FlyoutInfoContext = React.createContext<FlyoutInfo>({position: this.position, - fadeIn: this.fadein, - fadeOut: this.fadeout}); } componentWillUnmount() { } - // @action - // onPointerEnter = (e: React.PointerEvent) => { - // e.preventDefault(); - // e.stopPropagation(); - // //this._display = "block"; - // } - - // @action - // onPointerOut = (e: React.PointerEvent) => { - // e.preventDefault(); - // e.stopPropagation(); - // //this._display = "none"; - // } - - @computed private get regiondata() { let index = this.regions.indexOf(this.props.RegionData); @@ -121,16 +91,31 @@ export class Keyframe extends React.Component<IProp> { } - - @action onBarPointerDown = (e: React.PointerEvent) => { + let mouse = e.nativeEvent; + e.preventDefault(); e.stopPropagation(); - document.addEventListener("pointermove", this.onBarPointerMove); - document.addEventListener("pointerup", (e: PointerEvent) => { - document.removeEventListener("pointermove", this.onBarPointerMove); - }); + if (mouse.which === 1){ + document.addEventListener("pointermove", this.onBarPointerMove); + document.addEventListener("pointerup", (e: PointerEvent) => { + document.removeEventListener("pointermove", this.onBarPointerMove); + }); + } else if(mouse.which === 3) { + e.preventDefault(); + e.stopPropagation(); + let bar = this._bar.current!; + this.props.setFlyout({x:this.regiondata.position + 130, y: bar.getBoundingClientRect().bottom,display:"block", time: this.regiondata.position, duration:this.regiondata.duration}); + let removeFlyout = (e:PointerEvent) => { + if (e.which === 1){ + console.log("wut"); + this.props.setFlyout({display:"none"}); + document.removeEventListener("pointerdown", removeFlyout); + } + }; + document.addEventListener("pointerdown", removeFlyout); + } } @action @@ -138,7 +123,10 @@ export class Keyframe extends React.Component<IProp> { e.preventDefault(); e.stopPropagation(); let left = this.findAdjacentRegion(Direction.left); - let right = this.findAdjacentRegion(Direction.right); + let right = this.findAdjacentRegion(Direction.right); + let bar = this._bar.current!; + let barX = bar.getBoundingClientRect().left; + let offset = e.clientX - barX; let futureX = this.regiondata.position + e.movementX; if (futureX <= 0) { this.regiondata.position = 0; @@ -149,7 +137,6 @@ export class Keyframe extends React.Component<IProp> { } else { this.regiondata.position = futureX; } - } @action @@ -182,6 +169,7 @@ export class Keyframe extends React.Component<IProp> { document.addEventListener("pointermove", this.onDragResizeLeft); document.addEventListener("pointerup", () => { document.removeEventListener("pointermove", this.onDragResizeLeft); + }); } @@ -192,6 +180,7 @@ export class Keyframe extends React.Component<IProp> { document.addEventListener("pointermove", this.onDragResizeRight); document.addEventListener("pointerup", () => { document.removeEventListener("pointermove", this.onDragResizeRight); + }); } @@ -207,10 +196,7 @@ export class Keyframe extends React.Component<IProp> { this.regiondata.keyframes!.forEach(kf => { kf = kf as Doc; kf.time = NumCast(kf.time) + offset; - }); - this._keyframes.forEach(num => { - num -= offset; - }); + }); } @@ -244,28 +230,14 @@ export class Keyframe extends React.Component<IProp> { this.makeKeyData(position + mouse.offsetX); } - @action - onMenuHover = (e: React.PointerEvent) => { - e.preventDefault(); - e.stopPropagation(); - if (this._display === "none") { - this._display = "grid"; - } else { - this._display = "none"; - } - } - render() { return ( <div> - <FlyoutInfoContext.Provider value={{ - position: this.position, - fadeOut: this.fadeout, - fadeIn: this.fadein - }}> - <div className="bar" ref={this._bar} style={{ transform: `translate(${this.regiondata.position}px)`, width: `${this.regiondata.duration}px` }} onPointerDown={this.onBarPointerDown} onDoubleClick={this.createKeyframe}> + <div className="bar" ref={this._bar} style={{ transform: `translate(${this.regiondata.position}px)`, width: `${this.regiondata.duration}px` }} + onPointerDown={this.onBarPointerDown} + onDoubleClick={this.createKeyframe}> <div className="leftResize" onPointerDown={this.onResizeLeft} ></div> <div className="rightResize" onPointerDown={this.onResizeRight}></div> <div className="fadeLeft" style={{ width: `${20}px` }}>{this.createDivider("left")}</div> @@ -279,7 +251,6 @@ export class Keyframe extends React.Component<IProp> { {this.createDivider("left")} {this.createDivider("right")} </div> - </FlyoutInfoContext.Provider> </div> ); } diff --git a/src/client/views/nodes/Timeline.scss b/src/client/views/nodes/Timeline.scss index d59ed1323..44b6cf03e 100644 --- a/src/client/views/nodes/Timeline.scss +++ b/src/client/views/nodes/Timeline.scss @@ -1,16 +1,32 @@ @import "./../globalCssVariables.scss"; -.flyout{ - position: absolute; - z-index: 9999; - background-color: black; - box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); - min-width: 150px; - color: black; - top: 100px; +.flyout-container{ + background-color: transparent; + position:absolute; + z-index:9999; + height: 150px; + width: 150px; - padding: 10px; - border-radius: 3px; + .flyout{ + background-color: transparent; + transform: rotate(180deg); + left:0px; + top:0px; + width: 100%; + height: 100%; + } + div{ + color: white; + position:absolute; + top:30px; + left:0px; + } + input{ + position:absolute; + width: 40px; + right:0px; + } + } .timeline-container{ diff --git a/src/client/views/nodes/Timeline.tsx b/src/client/views/nodes/Timeline.tsx index 02c2a530d..8050830fa 100644 --- a/src/client/views/nodes/Timeline.tsx +++ b/src/client/views/nodes/Timeline.tsx @@ -12,11 +12,18 @@ import { List } from "../../../new_fields/List"; import { Self } from "../../../new_fields/FieldSymbols"; import { Doc, DocListCast } from "../../../new_fields/Doc"; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faCircle, faPlayCircle, faBackward, faForward, faGripLines } from "@fortawesome/free-solid-svg-icons"; +import { faCircle, faPlayCircle, faBackward, faForward, faGripLines} from "@fortawesome/free-solid-svg-icons"; import { DocumentContentsView } from "./DocumentContentsView"; -import { FlyoutInfoContext } from "./Keyframe"; +export interface FlyoutProps{ + x?: number; + y?: number; + display?:string; + time?:number; + duration?:number; +} + @observer export class Timeline extends CollectionSubView(Document) { @@ -24,6 +31,7 @@ export class Timeline extends CollectionSubView(Document) { private readonly MIN_CONTAINER_HEIGHT: number = 205; private readonly MAX_CONTAINER_HEIGHT: number = 800; + @observable private _tickSpacing = 50; @observable private _scrubberbox = React.createRef<HTMLDivElement>(); @observable private _trackbox = React.createRef<HTMLDivElement>(); @@ -39,6 +47,7 @@ export class Timeline extends CollectionSubView(Document) { @observable private _infoContainer = React.createRef<HTMLDivElement>(); @observable private _ticks: number[] = []; + @observable private flyoutInfo:FlyoutProps = {x:0, y:0,display:"none"}; @action @@ -207,25 +216,35 @@ export class Timeline extends CollectionSubView(Document) { this._containerHeight = 0; } - renderFlyout = ():JSX.Element => { - // console.log("rendered"); - // let data = React.useContext(FlyoutInfoContext); - return ( - <div style ={{height:"100px", width:"100px", backgroundColor:"yellow", position:"absolute"}}> - <p> - {/* {data.fadeIn} */} - </p> - </div> - ); + @action + getFlyout = (props: FlyoutProps) => { + for(const[k, v] of Object.entries(props)){ + (this.flyoutInfo as any)[k] = v; + } + } - + + @action + onFlyoutDown = (e: React.PointerEvent) => { + console.log("clicked!"); + this.flyoutInfo.display = "block"; + } render() { return ( <div className="timeline-container" style={{ height: `${this._containerHeight}px` }}> + <div className="flyout-container" style={{transform: `translate(${this.flyoutInfo.x}px, ${this.flyoutInfo.y}px)`, display:this.flyoutInfo.display}} onPointerDown={this.onFlyoutDown}> + <FontAwesomeIcon className="flyout" icon="comment-alt" color="grey"/> + <div> + <p>Time:</p><input type="text" placeholder={`${Math.round(this.flyoutInfo.time! / this._tickSpacing * 1000)}ms`}/> + <p>Duration:</p><input type="text" placeholder={`${Math.round(this.flyoutInfo.duration! / this._tickSpacing * 1000)}ms`}/> + <p>Fade-in</p> + <p>Fade-out</p> + </div> + </div> <div className="toolbox"> <div onClick={this.windBackward}> <FontAwesomeIcon icon={faBackward} size="2x" /> </div> <div onClick={this.onPlay}> <FontAwesomeIcon icon={faPlayCircle} size="2x" /> </div> @@ -239,7 +258,7 @@ export class Timeline extends CollectionSubView(Document) { <div className="scrubberbox" ref={this._scrubberbox} onClick={this.onScrubberClick}> {this._ticks.map(element => { - return <div className="tick" style={{ transform: `translate(${element / 20}px)`, position: "absolute", pointerEvents: "none" }}> <p>{this.toTime(element)}</p></div>; + return <div className="tick" style={{ transform: `translate(${element/1000 * this._tickSpacing}px)`, position: "absolute", pointerEvents: "none" }}> <p>{this.toTime(element)}</p></div>; })} </div> <div className="scrubber" onPointerDown={this.onScrubberDown} style={{ transform: `translate(${this._currentBarX}px)` }}> @@ -247,7 +266,7 @@ export class Timeline extends CollectionSubView(Document) { </div> <div className="trackbox" ref={this._trackbox} onPointerDown={this.onPanDown}> {this._nodes.map(doc => { - return <Track node={(doc as any).value() as Doc} currentBarX={this._currentBarX} />; + return <Track node={(doc as any).value() as Doc} currentBarX={this._currentBarX} setFlyout={this.getFlyout} />; })} </div> </div> @@ -261,14 +280,6 @@ export class Timeline extends CollectionSubView(Document) { <div onPointerDown={this.onResizeDown}> <FontAwesomeIcon className="resize" icon={faGripLines} /> </div> - <FlyoutInfoContext.Consumer> - {value => ( - <div style ={{height:"100px", width:"100px", backgroundColor:"yellow", position:"absolute"}}> - <p> - {value.fadeIn} - </p> - </div>)} - </FlyoutInfoContext.Consumer> </div> ); } diff --git a/src/client/views/nodes/Track.tsx b/src/client/views/nodes/Track.tsx index 957128040..94c0b5563 100644 --- a/src/client/views/nodes/Track.tsx +++ b/src/client/views/nodes/Track.tsx @@ -7,15 +7,17 @@ import { Document, listSpec, createSchema, makeInterface, defaultSpec } from ".. import { FieldValue, Cast, NumCast, BoolCast } from "../../../new_fields/Types"; import { List } from "../../../new_fields/List"; import { Keyframe, RegionData } from "./Keyframe"; +import { FlyoutProps } from "./Timeline"; -interface IProp { +interface IProps { node: Doc; currentBarX: number; - // setPosition: (position: number) => any; + setFlyout: (props:FlyoutProps) => any; } + @observer -export class Track extends React.Component<IProp> { +export class Track extends React.Component<IProps> { @observable private _inner = React.createRef<HTMLDivElement>(); private _reactionDisposers: IReactionDisposer[] = []; @@ -196,7 +198,7 @@ export class Track extends React.Component<IProp> { <div className="track"> <div className="inner" ref={this._inner} onDoubleClick={this.onInnerDoubleClick}> {this.regions.map((region) => { - return <Keyframe node={this.props.node} RegionData={region as Doc}/>; + return <Keyframe node={this.props.node} RegionData={region as Doc} setFlyout={this.props.setFlyout}/>; })} </div> </div> |