aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/views/ContextMenu.scss1
-rw-r--r--src/client/views/MainView.tsx6
-rw-r--r--src/client/views/animationtimeline/Keyframe.tsx73
-rw-r--r--src/client/views/animationtimeline/TimelineMenu.scss94
-rw-r--r--src/client/views/animationtimeline/TimelineMenu.tsx85
5 files changed, 185 insertions, 74 deletions
diff --git a/src/client/views/ContextMenu.scss b/src/client/views/ContextMenu.scss
index e2c0de8af..6c619fbe1 100644
--- a/src/client/views/ContextMenu.scss
+++ b/src/client/views/ContextMenu.scss
@@ -7,6 +7,7 @@
box-shadow: $intermediate-color 0.2vw 0.2vw 0.4vw;
flex-direction: column;
background: whitesmoke;
+ padding-top: 10px;
padding-bottom: 10px;
border-radius: 15px;
border: solid #BBBBBBBB 1px;
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 270e9b183..3941c9c20 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -149,9 +149,9 @@ export class MainView extends React.Component {
if (targets && targets.length && targets[0].className.toString().indexOf("contextMenu") === -1) {
ContextMenu.Instance.closeMenu();
}
- if (targets && targets.length && targets[0].className.toString().indexOf("timeline-menu-container") === -1) {
- TimelineMenu.Instance.closeMenu();
- }
+ // if (targets && targets.length && targets[0].className.toString().indexOf("timeline-menu-container") === -1) {
+ // TimelineMenu.Instance.closeMenu();
+ // }
});
globalPointerUp = () => this.isPointerDown = false;
diff --git a/src/client/views/animationtimeline/Keyframe.tsx b/src/client/views/animationtimeline/Keyframe.tsx
index b27cb6d98..d1975d847 100644
--- a/src/client/views/animationtimeline/Keyframe.tsx
+++ b/src/client/views/animationtimeline/Keyframe.tsx
@@ -386,7 +386,7 @@ export class Keyframe extends React.Component<IProps> {
<div className="keyframeCircle" onPointerDown={(e) => { this.moveKeyframe(e, kf as Doc); }} onContextMenu={(e: React.MouseEvent) => {
e.preventDefault();
e.stopPropagation();
- TimelineMenu.Instance.openMenu("keyframe", e.clientX, e.clientY);
+ TimelineMenu.Instance.openMenu(e.clientX, e.clientY);
}}></div>
</div>);
}
@@ -418,29 +418,21 @@ export class Keyframe extends React.Component<IProps> {
private _type: string = "";
@action
- onContainerDown = (e: React.MouseEvent, kf: Doc) => {
- e.preventDefault();
- e.stopPropagation();
+ onContainerDown = (kf: Doc, type: string) => {
let listenerCreated = false;
- let type = prompt("Type? (interpolate or path)");
- if (type) {
- if (type !== "interpolate" && type !=="path") {
- alert("Wrong type. Try again.");
- return;
+ this._type = type;
+ this.props.collection.backgroundColor = "rgb(0,0,0)";
+ this._reac = reaction(() => {
+ return this.inks;
+ }, data => {
+ if (!listenerCreated) {
+ this._plotList = Array.from(data!)[data!.size - 1]!;
+ this._interpolationKeyframe = kf;
+ document.addEventListener("pointerup", this.onReactionListen);
+ listenerCreated = true;
}
- this._type = type;
- this.props.collection.backgroundColor = "rgb(0,0,0)";
- this._reac = reaction(() => {
- return this.inks;
- }, data => {
- if (!listenerCreated) {
- this._plotList = Array.from(data!)[data!.size - 1]!;
- this._interpolationKeyframe = kf;
- document.addEventListener("pointerup", this.onReactionListen);
- listenerCreated = true;
- }
- });
- }
+ });
+
}
@@ -508,20 +500,26 @@ export class Keyframe extends React.Component<IProps> {
}
+
+ /**
+ *
+ *
+ * TEMPORARY
+ * let items = [
+ TimelineMenu.Instance.addItem("button", "Show Data", () => {console.log(toJS(this.props.node));}),
+ TimelineMenu.Instance.addItem("button", "Delete", () => {}),
+ TimelineMenu.Instance.addItem("input", "Move", (val) => {console.log(val);})
+ ];
+ TimelineMenu.Instance.addMenu("Keyframe", items);
+ TimelineMenu.Instance.openMenu(e.clientX, e.clientY);
+ *
+ */
render() {
return (
<div>
<div className="bar" ref={this._bar} style={{ transform: `translate(${this.regiondata.position}px)`, width: `${this.regiondata.duration}px`, background: `linear-gradient(90deg, rgba(77, 153, 0, 0) 0%, rgba(77, 153, 0, 1) ${this.regiondata.fadeIn / this.regiondata.duration * 100}%, rgba(77, 153, 0, 1) ${(this.regiondata.duration - this.regiondata.fadeOut) / this.regiondata.duration * 100}%, rgba(77, 153, 0, 0) 100% )` }}
onPointerDown={this.onBarPointerDown}
- onDoubleClick={this.createKeyframe}
- onContextMenu={action((e: React.MouseEvent) => {
- e.preventDefault();
- e.stopPropagation();
- console.log("has been clicked!");
- let offsetLeft = this._bar.current!.getBoundingClientRect().left - this._bar.current!.parentElement!.getBoundingClientRect().left;
- let offsetTop = this._bar.current!.getBoundingClientRect().top; //+ this._bar.current!.parentElement!.getBoundingClientRect().top;
- this.props.setFlyout({ x: offsetLeft * this.props.transform.Scale, y: offsetTop * this.props.transform.Scale, display: "block", regiondata: this.regiondata, regions: this.regions });
- })}>
+ onDoubleClick={this.createKeyframe}>
<div className="leftResize" onPointerDown={this.onResizeLeft} ></div>
<div className="rightResize" onPointerDown={this.onResizeRight}></div>
{this.regiondata.keyframes!.map(kf => {
@@ -536,7 +534,18 @@ export class Keyframe extends React.Component<IProps> {
<div ref={bodyRef}className="body-container" style={{left: `${NumCast(kf.time) - this.regiondata.position}px`, width:`${NumCast(left!.time) - NumCast(kf.time)}px`}}
onPointerOver={(e) => { this.onContainerOver(e, bodyRef); }}
onPointerOut={(e) => { this.onContainerOut(e, bodyRef); }}
- onContextMenu={(e) => {TimelineMenu.Instance.openMenu("region", e.clientX, e.clientY);}}>
+ onContextMenu={(e) => {
+ let items = [
+ TimelineMenu.Instance.addItem("button", "Add Ease", () => {this.onContainerDown(kf, "interpolate");}),
+ TimelineMenu.Instance.addItem("button", "Add Path", () => {this.onContainerDown(kf, "path");}),
+ TimelineMenu.Instance.addItem("input", "fadeIn", (val) => {this.regiondata.fadeIn = parseInt(val, 10);}),
+ TimelineMenu.Instance.addItem("input", "fadeOut", (val) => {this.regiondata.fadeOut = parseInt(val, 10);}),
+ TimelineMenu.Instance.addItem("input", "position", (val) => {this.regiondata.position = parseInt(val, 10);}),
+ TimelineMenu.Instance.addItem("input", "duration", (val) => {this.regiondata.duration = parseInt(val, 10);}),
+ ];
+ TimelineMenu.Instance.addMenu("Region", items);
+ TimelineMenu.Instance.openMenu(e.clientX, e.clientY);
+ }}>
</div>
);
}
diff --git a/src/client/views/animationtimeline/TimelineMenu.scss b/src/client/views/animationtimeline/TimelineMenu.scss
index ed047e52d..90cc53b4c 100644
--- a/src/client/views/animationtimeline/TimelineMenu.scss
+++ b/src/client/views/animationtimeline/TimelineMenu.scss
@@ -1,16 +1,94 @@
+@import "./../globalCssVariables.scss";
+
+
.timeline-menu-container{
position: absolute;
+ display: flex;
+ box-shadow: $intermediate-color 0.2vw 0.2vw 0.4vw;
+ flex-direction: column;
+ background: whitesmoke;
z-index: 10000;
width: 150px;
- height: auto;
- background-color: black;
- .timeline-menu-button{
- width:100%;
- height: 30px;
+ padding-bottom: 10px;
+ border-radius: 15px;
+
+ border: solid #BBBBBBBB 1px;
+
+
- }
.timeline-menu-input{
- width:100%;
- height: 30px;
+ font: $sans-serif;
+ font-size: 13px;
+ width:100%;
+ text-transform: uppercase;
+ letter-spacing: 2px;
+ margin-left: 10px;
+ background-color: transparent;
+ border-width: 0px;
+ transition: border-width 500ms;
+ }
+
+ .timeline-menu-input:hover{
+ border-width: 2px;
+ }
+
+
+
+
+ .timeline-menu-header{
+ border-top-left-radius: 15px;
+ border-top-right-radius: 15px;
+ text-transform: uppercase;
+ background: $dark-color;
+ letter-spacing: 2px;
+
+ .timeline-menu-header-desc{
+ font:$sans-serif;
+ font-size: 13px;
+ text-align: center;
+ color: whitesmoke;
+ }
+ }
+
+
+ .timeline-menu-item {
+ // width: 11vw; //10vw
+ height: 30px; //2vh
+ background: whitesmoke;
+ display: flex; //comment out to allow search icon to be inline with search text
+ justify-content: left;
+ align-items: center;
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ transition: all .1s;
+ border-style: none;
+ // padding: 10px 0px 10px 0px;
+ white-space: nowrap;
+ font-size: 13px;
+ color: grey;
+ letter-spacing: 2px;
+ text-transform: uppercase;
+ padding-right: 20px;
+ padding-left: 10px;
+ }
+
+ .timeline-menu-item:hover {
+ border-width: .11px;
+ border-style: none;
+ border-color: $intermediate-color;
+ border-bottom-style: solid;
+ border-top-style: solid;
+ background: $darker-alt-accent;
+ }
+
+ .timeline-menu-desc {
+ padding-left: 10px;
+ font:$sans-serif;
+ font-size: 13px;
}
+
} \ No newline at end of file
diff --git a/src/client/views/animationtimeline/TimelineMenu.tsx b/src/client/views/animationtimeline/TimelineMenu.tsx
index 52f6f6535..8b47448f2 100644
--- a/src/client/views/animationtimeline/TimelineMenu.tsx
+++ b/src/client/views/animationtimeline/TimelineMenu.tsx
@@ -3,6 +3,10 @@ import {observable, action, runInAction} from "mobx";
import {observer} from "mobx-react";
import "./TimelineMenu.scss";
import { jSXAttribute } from "babel-types";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faChartLine, faRoad, faClipboard, faPen, faTrash, faTable } from "@fortawesome/free-solid-svg-icons";
+import { AddComparisonResult } from "../../northstar/model/idea/idea";
+
/**
* TimelineMenu:
@@ -38,8 +42,7 @@ export class TimelineMenu extends React.Component {
@observable private _x = 0;
@observable private _y = 0;
@observable private _type: "timeline" | "keyframe" | "region" | "" = "";
-
-
+ @observable private _currentMenu:JSX.Element[] = [];
constructor (props:Readonly<{}>){
super(props);
TimelineMenu.Instance = this;
@@ -67,8 +70,7 @@ export class TimelineMenu extends React.Component {
}
@action
- openMenu = (type: "timeline" | "keyframe" | "region", x?:number, y?:number) => {
- this._type = type;
+ openMenu = (x?:number, y?:number) => {
this._opacity = 1;
x ? this._x = x : this._x = 0;
y ? this._y = y : this._y = 0;
@@ -88,41 +90,62 @@ export class TimelineMenu extends React.Component {
}
+ addItem = (type: "input" | "button", title: string, event: (e:any) => void) => {
+ if (type === "input"){
+ let ref = React.createRef<HTMLInputElement>();
+ let text = "";
+ return <div className="timeline-menu-item"><FontAwesomeIcon icon={faClipboard} size="lg"/><input className="timeline-menu-input" ref = {ref} placeholder={title} onChange={(e) => {text = e.target.value;}} onKeyDown={(e:React.KeyboardEvent) => {
+ if(e.keyCode === 13){
+ event(text);
+ }}}/></div>;
+ } else if (type === "button") {
+ let ref = React.createRef<HTMLDivElement>();
+ return <div className="timeline-menu-item"><FontAwesomeIcon icon={faChartLine}size="lg"/><p className="timeline-menu-desc" onClick={event}>{title}</p></div>;
+ }
+ return <div></div>;
+ }
+ @action
+ addMenu = (title:string, items: JSX.Element[]) => {
+ items.unshift(<div className="timeline-menu-header"><p className="timeline-menu-header-desc">{title}</p></div>);
+ this._currentMenu = items;
+ }
render() {
- let menu: (JSX.Element[] | undefined);
- switch(this._type){
- case "keyframe":
- menu = [
- <button className="timeline-menu-button"> Show Schema</button>,
- <button className="timeline-menu-button"> Delete Keyframe</button>,
- <input className="timeline-menu-input"placeholder="Move Keyframe"/>
+ // let menu: (JSX.Element[] | undefined);
+ // switch(this._type){
+ // case "keyframe":
+ // menu = [
+ // <div className="timeline-menu-header"><p className="timeline-menu-header-desc">Keyframe</p></div>,
+ // <div className="timeline-menu-item"><FontAwesomeIcon icon={faTable} size="lg"/><p className="timeline-menu-desc">Show Data</p> </div>,
+ // <div className="timeline-menu-item"><FontAwesomeIcon icon={faTrash} size="lg"/><p className="timeline-menu-desc"> Delete</p></div>,
+ // <div className="timeline-menu-item"><FontAwesomeIcon icon={faClipboard} size="lg"/><input className="timeline-menu-input"placeholder="Move Keyframe"/></div>
- ];
- break;
- case "region" :
- menu = [
- <button className="timeline-menu-button" onClick={this.addEase}>Add Ease</button>,
- <button className="timeline-menu-button"onClick={this.addPath}>Add Path</button>,
- <input className="timeline-menu-input"placeholder="fadeIn"/>,
- <input className="timeline-menu-input"placeholder="fadeOut"/>,
- <input className="timeline-menu-input"placeholder="position"/>,
- <input className="timeline-menu-input"placeholder="duration"/>,
- ];
- break;
- case "timeline":
- menu = [
+ // ];
+ // break;
+ // case "region" :
+ // menu = [
+ // <div className="timeline-menu-header"><p className="timeline-menu-header-desc">Region</p></div>,
+ // <div className="timeline-menu-item"><FontAwesomeIcon icon={faChartLine}size="lg"/><p className="timeline-menu-desc" onClick={this.addEase}>Add Ease</p></div>,
+ // <div className="timeline-menu-item"><FontAwesomeIcon icon={faPen} size="lg"/><p className="timeline-menu-desc"onClick={this.addPath}>Add Path</p></div>,
+ // <div className="timeline-menu-item"><FontAwesomeIcon icon={faClipboard} size="lg"/><input className="timeline-menu-input"placeholder="fadeIn"/> </div>,
+ // <div className="timeline-menu-item"><FontAwesomeIcon icon={faClipboard} size="lg"/><input className="timeline-menu-input"placeholder="fadeOut"/></div>,
+ // <div className="timeline-menu-item"><FontAwesomeIcon icon={faClipboard} size="lg"/><input className="timeline-menu-input"placeholder="position"/></div>,
+ // <div className="timeline-menu-item"><FontAwesomeIcon icon={faClipboard} size="lg"/><input className="timeline-menu-input"placeholder="duration"/></div>,
+ // ];
+ // break;
+ // case "timeline":
+ // menu = [
- ];
- break;
- default:
- break;
+ // ];
+ // break;
+ // default:
+ // break;
- }
+ // }
return (
<div className="timeline-menu-container" style={{opacity: this._opacity, left: this._x, top: this._y}} >
- {menu}
+ {this._currentMenu}
</div>
);
}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-11 01:42:03 +0000