aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/views/collections/CollectionViewChromes.scss4
-rw-r--r--src/client/views/collections/CollectionViewChromes.tsx4
-rw-r--r--src/client/views/nodes/Keyframe.scss7
-rw-r--r--src/client/views/nodes/Keyframe.tsx66
-rw-r--r--src/client/views/nodes/Timeline.tsx17
-rw-r--r--src/client/views/nodes/Track.tsx22
6 files changed, 110 insertions, 10 deletions
diff --git a/src/client/views/collections/CollectionViewChromes.scss b/src/client/views/collections/CollectionViewChromes.scss
index 2578b47fc..a838d1deb 100644
--- a/src/client/views/collections/CollectionViewChromes.scss
+++ b/src/client/views/collections/CollectionViewChromes.scss
@@ -38,11 +38,11 @@
text-transform: uppercase;
letter-spacing: 2px;
background: rgb(238, 238, 238);
- color: grey;
+ color: purple;
outline-color: black;
border: none;
padding: 12px 10px 11px 10px;
- margin-left: 50px;
+ margin-left: 10px;
}
.collectionViewBaseChrome-collapse {
diff --git a/src/client/views/collections/CollectionViewChromes.tsx b/src/client/views/collections/CollectionViewChromes.tsx
index e91d31486..79b6b35ac 100644
--- a/src/client/views/collections/CollectionViewChromes.tsx
+++ b/src/client/views/collections/CollectionViewChromes.tsx
@@ -251,9 +251,9 @@ export class CollectionViewBaseChrome extends React.Component<CollectionViewChro
</div>
</div>
</div>
- <button className="collectionViewBaseChrome-button" >
+ {/* <button className="collectionViewBaseChrome-button" >
SHOW TIMELINE
- </button>
+ </button> */}
</div>
{this.subChrome()}
</div>
diff --git a/src/client/views/nodes/Keyframe.scss b/src/client/views/nodes/Keyframe.scss
index 11672388f..b1e8b0b65 100644
--- a/src/client/views/nodes/Keyframe.scss
+++ b/src/client/views/nodes/Keyframe.scss
@@ -80,6 +80,13 @@
position:absolute;
}
+ .fadeIn-container, .fadeOut-container, .body-container{
+ position:absolute;
+ height:100%;
+ background-color: rgba(0, 0, 0, 0.5);
+ opacity: 0;
+ }
+
}
diff --git a/src/client/views/nodes/Keyframe.tsx b/src/client/views/nodes/Keyframe.tsx
index 6ff925cb5..880c5aee5 100644
--- a/src/client/views/nodes/Keyframe.tsx
+++ b/src/client/views/nodes/Keyframe.tsx
@@ -10,6 +10,9 @@ import { List } from "../../../new_fields/List";
import { createSchema, defaultSpec, makeInterface, listSpec } from "../../../new_fields/Schema";
import { FlyoutProps } from "./Timeline";
import { Transform } from "../../util/Transform";
+import { DocumentManager } from "../../util/DocumentManager";
+import { CollectionView } from "../collections/CollectionView";
+import { InkField } from "../../../new_fields/InkField";
export namespace KeyframeFunc {
export enum KeyframeType {
@@ -48,6 +51,7 @@ export namespace KeyframeFunc {
regiondata.position = 0;
regiondata.fadeIn = 20;
regiondata.fadeOut = 20;
+ regiondata.fadeInX = new List([1, 100]);
return regiondata;
};
}
@@ -65,6 +69,7 @@ export const RegionData = makeInterface(RegionDataSchema);
interface IProps {
node: Doc;
RegionData: Doc;
+ collection:Doc;
changeCurrentBarX: (x: number) => void;
setFlyout: (props: FlyoutProps) => any;
transform: Transform;
@@ -74,6 +79,9 @@ interface IProps {
export class Keyframe extends React.Component<IProps> {
@observable private _bar = React.createRef<HTMLDivElement>();
+ @observable private _fadeInContainer = React.createRef<HTMLDivElement>();
+ @observable private _fadeOutContainer = React.createRef<HTMLDivElement>();
+ @observable private _bodyContainer = React.createRef<HTMLDivElement>();
@computed
private get regiondata() {
@@ -112,6 +120,17 @@ export class Keyframe extends React.Component<IProps> {
return last;
}
+ @computed
+ private get inks(){
+ if (this.props.collection.data_ext){
+ let data_ext = Cast(this.props.collection.data_ext, Doc) as Doc;
+ let ink = Cast(data_ext.ink, InkField) as InkField;
+ if (ink){
+ return ink.inkData;
+ }
+ }
+ }
+
async componentWillMount() {
if (!this.regiondata.keyframes) {
@@ -300,6 +319,13 @@ export class Keyframe extends React.Component<IProps> {
}
+ @action
+ onKeyframeOver = (e: React.PointerEvent) => {
+ e.preventDefault();
+ e.stopPropagation();
+ this.props.node.backgroundColor = "#000000";
+
+ }
@action
private createKeyframeJSX = (kf: Doc, type = KeyframeFunc.KeyframeType.default) => {
if (type === KeyframeFunc.KeyframeType.default) {
@@ -319,6 +345,34 @@ export class Keyframe extends React.Component<IProps> {
);
}
+ onContainerOver = (e: React.PointerEvent, ref:React.RefObject<HTMLDivElement>) => {
+ e.preventDefault();
+ e.stopPropagation();
+ let div = ref.current!;
+ div.style.opacity = "1";
+ }
+
+ onContainerOut = (e: React.PointerEvent, ref: React.RefObject<HTMLDivElement>) => {
+ e.preventDefault();
+ e.stopPropagation();
+ let div = ref.current!;
+ div.style.opacity ="0";
+ }
+
+ onContainerDown = (e: React.PointerEvent, ref: React.RefObject<HTMLDivElement>) => {
+ e.preventDefault();
+ let mouse = e.nativeEvent;
+ if (mouse.which === 3){
+ let reac = reaction(() => {
+ return this.inks;}, () => {
+ document.addEventListener("pointerup", () => {
+ reac();
+ console.log("disposed");
+ });
+ console.log("drawing"); });
+ }
+
+ }
render() {
return (
<div>
@@ -337,6 +391,18 @@ export class Keyframe extends React.Component<IProps> {
{this.regiondata.keyframes!.map(kf => {
return this.createKeyframeJSX(kf as Doc, (kf! as Doc).type as KeyframeFunc.KeyframeType);
})}
+ <div ref={this._fadeOutContainer}className="fadeOut-container" style={{right: `0px`, width: `${this.regiondata.fadeOut}px`}}
+ onPointerOver={(e) => {this.onContainerOver(e, this._fadeOutContainer); }}
+ onPointerOut ={(e) => {this.onContainerOut(e, this._fadeOutContainer);}}
+ onPointerDown={(e) => {this.onContainerDown(e, this._fadeOutContainer); }}> </div>
+ <div ref={this._fadeInContainer}className="fadeIn-container" style={{left: "0px", width:`${this.regiondata.fadeIn}px`}}
+ onPointerOver={(e) => {this.onContainerOver(e, this._fadeInContainer); }}
+ onPointerOut ={(e) => {this.onContainerOut(e, this._fadeInContainer);}}
+ onPointerDown={(e) => {this.onContainerDown(e, this._fadeInContainer); }}></div>
+ <div ref={this._bodyContainer}className="body-container" style={{left: `${this.regiondata.fadeIn}px`, width:`${this.regiondata.duration - this.regiondata.fadeIn - this.regiondata.fadeOut}px`}}
+ onPointerOver={(e) => {this.onContainerOver(e, this._bodyContainer); }}
+ onPointerOut ={(e) => {this.onContainerOut(e, this._bodyContainer);}}
+ onPointerDown={(e) => {this.onContainerDown(e, this._bodyContainer); }}> </div>
</div>
</div>
);
diff --git a/src/client/views/nodes/Timeline.tsx b/src/client/views/nodes/Timeline.tsx
index 99db2a643..923e99e63 100644
--- a/src/client/views/nodes/Timeline.tsx
+++ b/src/client/views/nodes/Timeline.tsx
@@ -18,6 +18,9 @@ import { VideoField } from "../../../new_fields/URLField";
import { CollectionVideoView } from "../collections/CollectionVideoView";
import { Transform } from "../../util/Transform";
import { faGrinTongueSquint } from "@fortawesome/free-regular-svg-icons";
+import { InkField } from "../../../new_fields/InkField";
+import { AddComparisonParameters } from "../../northstar/model/idea/idea";
+import { keepAlive } from "mobx-utils";
export interface FlyoutProps {
@@ -65,6 +68,7 @@ export class Timeline extends CollectionSubView(Document) {
@computed
private get children(): List<Doc> {
let extendedDocument = ["image", "video", "pdf"].includes(StrCast(this.props.Document.type));
+
if (extendedDocument) {
if (this.props.Document.data_ext) {
return Cast((Cast(this.props.Document.data_ext, Doc) as Doc).annotations, listSpec(Doc)) as List<Doc>;
@@ -75,6 +79,17 @@ export class Timeline extends CollectionSubView(Document) {
return Cast(this.props.Document[this.props.fieldKey], listSpec(Doc)) as List<Doc>;
}
+ @computed
+ private get inks(){
+ if (this.props.Document.data_ext){
+ let data_ext = Cast(this.props.Document.data_ext, Doc) as Doc;
+ let ink = Cast(data_ext.ink, InkField) as InkField;
+ if (ink){
+ return ink.inkData;
+ }
+ }
+ }
+
componentDidMount() {
if (StrCast(this.props.Document.type) === "video") {
@@ -348,7 +363,7 @@ export class Timeline extends CollectionSubView(Document) {
<div className="scrubberhead"></div>
</div>
<div className="trackbox" ref={this._trackbox} onPointerDown={this.onPanDown}>
- {DocListCast(this.children).map(doc => <Track node={doc} currentBarX={this._currentBarX} changeCurrentBarX={this.changeCurrentBarX} setFlyout={this.getFlyout} transform={this.props.ScreenToLocalTransform()}/>)}
+ {DocListCast(this.children).map(doc => <Track node={doc} currentBarX={this._currentBarX} changeCurrentBarX={this.changeCurrentBarX} setFlyout={this.getFlyout} transform={this.props.ScreenToLocalTransform()} collection = {this.props.Document}/>)}
</div>
</div>
<div className="title-container" ref={this._titleContainer}>
diff --git a/src/client/views/nodes/Track.tsx b/src/client/views/nodes/Track.tsx
index 39f83639c..431eb5d37 100644
--- a/src/client/views/nodes/Track.tsx
+++ b/src/client/views/nodes/Track.tsx
@@ -15,6 +15,7 @@ interface IProps {
node: Doc;
currentBarX: number;
transform: Transform;
+ collection: Doc;
changeCurrentBarX: (x: number) => void;
setFlyout: (props: FlyoutProps) => any;
}
@@ -116,7 +117,7 @@ export class Track extends React.Component<IProps> {
await this.applyKeys(currentkf);
this._keyReaction = this.keyReaction(); //reactivates reaction.
} else if (leftkf && rightkf) {
- this.interpolate(leftkf, rightkf);
+ this.interpolate(leftkf, rightkf, regiondata);
}
}
}
@@ -193,16 +194,27 @@ export class Track extends React.Component<IProps> {
}
@action
- interpolate = (left: Doc, right: Doc) => {
+ interpolate = (left: Doc, right: Doc, regiondata:Doc) => {
console.log("interpolating");
let leftNode = left.key as Doc;
let rightNode = right.key as Doc;
const dif_time = NumCast(right.time) - NumCast(left.time);
- const ratio = (this.props.currentBarX - NumCast(left.time)) / dif_time; //linear
+ const timeratio = (this.props.currentBarX - NumCast(left.time)) / dif_time; //linear
+ let fadeInX:List<number> = regiondata.fadeInX as List<number>;
+ let fadeInY:List<number> = regiondata.fadeInY as List<number>;
+ let index = fadeInX[Math.round(fadeInX.length - 1 * timeratio)];
+ let correspondingY = fadeInY[index];
+ let correspondingYRatio = correspondingY / fadeInY[fadeInY.length - 1] - fadeInY[0];
+
this.filterKeys(Doc.allKeys(leftNode)).forEach(key => {
if (leftNode[key] && rightNode[key] && typeof (leftNode[key]) === "number" && typeof (rightNode[key]) === "number") { //if it is number, interpolate
+ if(index + 1 <= fadeInX.length) {
+
+ } else if (index - 1 >= fadeInX.length) {
+
+ }
const diff = NumCast(rightNode[key]) - NumCast(leftNode[key]);
- const adjusted = diff * ratio;
+ const adjusted = diff * timeratio;
this.props.node[key] = NumCast(leftNode[key]) + adjusted;
} else {
this.props.node[key] = leftNode[key];
@@ -250,7 +262,7 @@ export class Track extends React.Component<IProps> {
<div className="track">
<div className="inner" ref={this._inner} onDoubleClick={this.onInnerDoubleClick}>
{DocListCast(this.regions).map((region) => {
- return <Keyframe node={this.props.node} RegionData={region} changeCurrentBarX={this.props.changeCurrentBarX} setFlyout={this.props.setFlyout} transform={this.props.transform} />;
+ return <Keyframe node={this.props.node} RegionData={region} changeCurrentBarX={this.props.changeCurrentBarX} setFlyout={this.props.setFlyout} transform={this.props.transform} collection={this.props.collection}/>;
})}
</div>
</div>
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-12 00:46:04 +0000