aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/views/nodes/Keyframe.tsx101
-rw-r--r--src/client/views/nodes/Timeline.scss36
-rw-r--r--src/client/views/nodes/Timeline.tsx57
-rw-r--r--src/client/views/nodes/Track.tsx10
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>
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-16 13:44:01 +0000