aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--.vscode/settings.json3
-rw-r--r--src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx5
-rw-r--r--src/client/views/nodes/PDFBox.tsx8
-rw-r--r--src/client/views/nodes/Timeline.scss42
-rw-r--r--src/client/views/nodes/Timeline.tsx396
5 files changed, 449 insertions, 5 deletions
diff --git a/.vscode/settings.json b/.vscode/settings.json
index fc315ffaf..f33c38466 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -9,5 +9,6 @@
"editor.formatOnSave": true,
"editor.detectIndentation": false,
"typescript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBrackets": false,
- "typescript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": true
+ "typescript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": true,
+ "workbench.colorCustomizations": {}
} \ No newline at end of file
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index d23bef2d3..f2960541e 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -26,6 +26,8 @@ import "./CollectionFreeFormView.scss";
import { MarqueeView } from "./MarqueeView";
import React = require("react");
import v5 = require("uuid/v5");
+// import { BooleanField } from "../../../../fields/BooleanField";
+import { Timeline } from "../../nodes/Timeline";
import { Docs } from "../../../documents/Documents";
export const panZoomSchema = createSchema({
@@ -326,7 +328,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
private childViews = () => [
<CollectionFreeFormBackgroundView key="backgroundView" {...this.props} {...this.getDocumentViewProps(this.props.Document)} />,
...this.views
- ];
+ ]
render() {
const containerName = `collectionfreeformview${this.isAnnotationOverlay ? "-overlay" : "-container"}`;
const easing = () => this.props.Document.panTransformType === "Ease";
@@ -348,6 +350,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
<CollectionFreeFormRemoteCursors {...this.props} key="remoteCursors" />
</CollectionFreeFormViewPannableContents>
</MarqueeView>
+ <Timeline {...this.props} />
<CollectionFreeFormOverlayView {...this.props} {...this.getDocumentViewProps(this.props.Document)} />
</div>
);
diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx
index 855c744e6..5cf3d8607 100644
--- a/src/client/views/nodes/PDFBox.tsx
+++ b/src/client/views/nodes/PDFBox.tsx
@@ -262,7 +262,7 @@ export class PDFBox extends DocComponent<FieldViewProps, PdfDocument>(PdfDocumen
this.props.Document.thumbnail = new ImageField(new URL(url));
}
runInAction(() => this._renderAsSvg = true);
- })
+ });
}))
.catch(function (error: any) {
console.error('oops, something went wrong!', error);
@@ -335,8 +335,9 @@ export class PDFBox extends DocComponent<FieldViewProps, PdfDocument>(PdfDocumen
}
choosePath(url: URL) {
- if (url.protocol === "data" || url.href.indexOf(window.location.origin) === -1)
+ if (url.protocol === "data" || url.href.indexOf(window.location.origin) === -1) {
return url.href;
+ }
let ext = path.extname(url.href);
return url.href.replace(ext, this._curSuffix + ext);
}
@@ -350,8 +351,9 @@ export class PDFBox extends DocComponent<FieldViewProps, PdfDocument>(PdfDocumen
}
@action onError = () => {
let timeout = this._curSuffix === "_s" ? this._smallRetryCount : this._curSuffix === "_m" ? this._mediumRetryCount : this._largeRetryCount;
- if (timeout < 10)
+ if (timeout < 10) {
setTimeout(this.retryPath, Math.min(10000, timeout * 5));
+ }
}
_curSuffix = "_m";
diff --git a/src/client/views/nodes/Timeline.scss b/src/client/views/nodes/Timeline.scss
new file mode 100644
index 000000000..cf63c987c
--- /dev/null
+++ b/src/client/views/nodes/Timeline.scss
@@ -0,0 +1,42 @@
+.timeline-container {
+ height: 100px;
+ width: 500px;
+ background-color: rgb(160, 226, 243);
+ position: absolute;
+ left: 15%;
+ top: 1%;
+ font-size: 75%;
+
+ .timeline {
+ height: 60px;
+ width: 500px;
+ bottom: 0px;
+ background-color: grey;
+ position: absolute;
+ }
+
+ .inner {
+ height: 44px;
+ width: 484px;
+ background-color: black;
+ //opacity: 0.5;
+ position: absolute;
+ margin: 8px;
+ z-index: 10;
+ }
+
+ button {
+ height: 30px;
+ width: 100px;
+ font-size: 1em;
+ position: relative;
+ margin: 5px;
+ }
+
+ input {
+ height: 30px;
+ width: 100px;
+ font-size: 1em;
+ margin: 5px;
+ }
+} \ No newline at end of file
diff --git a/src/client/views/nodes/Timeline.tsx b/src/client/views/nodes/Timeline.tsx
new file mode 100644
index 000000000..ca7ceb19f
--- /dev/null
+++ b/src/client/views/nodes/Timeline.tsx
@@ -0,0 +1,396 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { observer } from "mobx-react";
+import { observable, reaction, action, IReactionDisposer, observe, IObservableArray } from "mobx";
+import "./Timeline.scss";
+import { CollectionViewProps } from "../collections/CollectionBaseView";
+import { CollectionSubView, SubCollectionViewProps } from "../collections/CollectionSubView";
+import { DocumentViewProps, DocumentView } from "./DocumentView";
+import { CollectionFreeFormView } from "../collections/collectionFreeForm/CollectionFreeFormView";
+import { Doc, DocListCastAsync } from "../../../new_fields/Doc";
+import { Document, listSpec, createSchema, makeInterface, defaultSpec } from "../../../new_fields/Schema";
+import { FieldValue, Cast, NumCast } from "../../../new_fields/Types";
+import { emptyStatement } from "babel-types";
+import { DocumentManager } from "../../util/DocumentManager";
+import { SelectionManager } from "../../util/SelectionManager";
+import { List } from "../../../new_fields/List";
+import { Self } from "../../../new_fields/FieldSymbols";
+import { list } from "serializr";
+import { arrays } from "typescript-collections";
+import { forEach } from "typescript-collections/dist/lib/arrays";
+
+type Data = List<Doc>; //data?
+type Keyframes = List<List<Doc>>;
+
+const PositionSchema = createSchema({
+ x: defaultSpec("number", 0),
+ y: defaultSpec("number", 0)
+});
+
+type Position = makeInterface<[typeof PositionSchema]>;
+const Position = makeInterface(PositionSchema);
+
+const TimeAndPositionSchema = createSchema({
+ time: defaultSpec("number", 0),
+ position: Doc
+});
+
+type TimeAndPosition = makeInterface<[typeof TimeAndPositionSchema]>;
+const TimeAndPosition = makeInterface(TimeAndPositionSchema);
+
+
+@observer
+export class Timeline extends CollectionSubView(Document) {
+ @observable private _inner = React.createRef<HTMLDivElement>();
+ @observable private _timeInput = React.createRef<HTMLInputElement>();
+
+ @observable private _isRecording: Boolean = false;
+ @observable private _currentBar: any = null;
+ @observable private _newBar: any = null;
+ private _reactionDisposers: IReactionDisposer[] = [];
+
+ @observable private _currentBarX: number = 0;
+ @observable private _onBar: Boolean = false;
+ @observable private _keys = ["x", "y"];
+ @observable private _data: Doc[] = []; // 1D list of nodes
+ @observable private _keyframes: Doc[][] = []; //2D list of infos
+ @observable private TEMPNUM = 0;
+ @observable private _keyChanged = false;
+
+ @action
+ onRecord = (e: React.MouseEvent) => {
+ if (this._isRecording === true) {
+ this._isRecording = false;
+ return;
+ }
+ this._isRecording = true;
+ let children = Cast(this.props.Document[this.props.fieldKey], listSpec(Doc));
+ if (!children) {
+ return;
+ }
+ let childrenList = (children[Self] as any).__fields;
+
+ const addReaction = (node: Doc) => {
+ node = (node as any).value();
+ return reaction(() => {
+ return this._keys.map(key => FieldValue(node[key]));
+ }, async data => {
+ if (this._inner.current) {
+ if (!this._barMoved) {
+ if (this._data.indexOf(node) === -1) {
+ this._data.push(node);
+ let index = this._data.indexOf(node);
+
+ let timeandpos = this.setTimeAndPos(node);
+ let info: Doc[] = new Array(1000); //kinda weird
+ info[this._currentBarX] = timeandpos;
+ this._keyframes[index] = info;
+
+ //graphical yellow bar
+ let bar: HTMLDivElement = this.createBar(5, this._currentBarX, "yellow");
+ this._inner.current.appendChild(bar);
+ } else {
+ let index = this._data.indexOf(node);
+ if (this._keyframes[index][this._currentBarX] !== undefined) { //when node is in data, but doesn't have data for this specific time.
+ let timeandpos = this.setTimeAndPos(node);
+ let bar: HTMLDivElement = this.createBar(5, this._currentBarX, "yellow");
+ this._inner.current.appendChild(bar);
+ this._keyframes[index][this._currentBarX] = timeandpos;
+ } else { //when node is in data, and has data for this specific time
+ let timeandpos = this.setTimeAndPos(node);
+ this._keyframes[index][this._currentBarX] = timeandpos;
+ }
+ }
+ }
+ }
+ });
+ };
+
+ observe(childrenList as IObservableArray<Doc>, change => {
+ if (change.type === "update") {
+ this._reactionDisposers[change.index]();
+ this._reactionDisposers[change.index] = addReaction(change.newValue);
+ } else {
+
+ let removed = this._reactionDisposers.splice(change.index, change.removedCount, ...change.added.map(addReaction));
+ removed.forEach(disp => disp());
+ }
+ }, true);
+
+ }
+
+ storeKeyChange = (node: Doc) => {
+ if (this._inner.current) {
+ if (!this._barMoved) {
+ if (this._data.indexOf(node) === -1) {
+ const kf = new List();
+ this._data.push(node);
+ let index = this._data.indexOf(node);
+ let timeandpos = this.setTimeAndPos(node);
+
+ let info: Doc[] = new Array(1000); //////////////////////////////////////////////////// do something
+ info[this._currentBarX] = timeandpos;
+
+ this._keyframes[index] = info;
+
+ //graphical yellow bar
+ let bar: HTMLDivElement = this.createBar(5, this._currentBarX, "yellow");
+ this._inner.current.appendChild(bar);
+ } else {
+ let index = this._data.indexOf(node);
+ if (this._keyframes[index][this._currentBarX] === undefined) { //when node is in data, but doesn't have data for this specific time.
+ let timeandpos = this.setTimeAndPos(node);
+ this._keyframes[index][this._currentBarX] = timeandpos;
+ let bar: HTMLDivElement = this.createBar(5, this._currentBarX, "yellow");
+ this._inner.current.appendChild(bar);
+ } else { //when node is in data, and has data for this specific time
+ let timeandpos = this.setTimeAndPos(node);
+ this._keyframes[index][this._currentBarX] = timeandpos;
+
+ }
+ }
+ }
+
+ }
+ }
+
+ setTimeAndPos = (node: Doc) => {
+ let pos: Position = Position(node);
+ let timeandpos = new Doc();
+ const newPos = new Doc();
+ this._keys.forEach(key => newPos[key] = pos[key]);
+ timeandpos.position = newPos;
+ timeandpos.time = this._currentBarX;
+ return timeandpos;
+ }
+
+ @action
+ timeChange = async (time: number) => {
+ const docs = this._data;
+ docs.forEach(async (oneDoc, i) => {
+ let leftKf!: TimeAndPosition;
+ let rightKf!: TimeAndPosition;
+ let singleFrame: Doc | undefined = undefined;
+ let oneKf = this._keyframes[i];
+ oneKf.forEach((singleKf) => {
+ if (singleKf !== undefined) {
+ let leftMin = Infinity;
+ let rightMin = Infinity;
+ if (singleKf.time !== time) { //choose closest time neighbors
+ leftMin = this.calcMinLeft(oneKf, time);
+ if (leftMin !== Infinity) {
+ leftKf = TimeAndPosition(this._keyframes[i][leftMin]);
+ }
+ rightMin = this.calcMinRight(oneKf, time);
+ if (rightMin !== Infinity) {
+ rightKf = TimeAndPosition(this._keyframes[i][rightMin]);
+ }
+ } else {
+ singleFrame = singleKf;
+ }
+ }
+ });
+ if (singleFrame) {
+ if (true || oneKf[i] !== undefined) {
+ this._keys.map(key => FieldValue(oneDoc[key]));
+ }
+ } else if (leftKf && rightKf) {
+ this.interpolate(oneDoc, leftKf, rightKf, this._currentBarX);
+ }
+ });
+ }
+
+ calcMinLeft = (kfList: Doc[], time: number): number => { //returns the time of the closet keyframe to the left
+ let counter: number = Infinity;
+ let leftMin: number = Infinity;
+ kfList.forEach((kf) => {
+ if (kf !== undefined && NumCast(kf.time) < time) {
+ let diff: number = Math.abs(NumCast(kf.time) - time);
+ if (diff < counter) {
+ counter = diff;
+ leftMin = NumCast(kf.time);
+ }
+ }
+ });
+ return leftMin;
+ }
+
+ calcMinRight = (kfList: Doc[], time: number): number => { //returns the time of the closest keyframe to the right
+ let counter: number = Infinity;
+ let rightMin: number = Infinity;
+ kfList.forEach((kf) => {
+ if (kf !== undefined && NumCast(kf.time) > time) {
+ let diff: number = Math.abs(NumCast(kf.time!) - time);
+ if (diff < counter) {
+ counter = diff;
+ rightMin = NumCast(kf.time);
+ }
+ }
+ });
+ return rightMin;
+ }
+
+
+ /**
+ * Linearly interpolates a document from time1 to time2
+ * @param Doc that needs to be modified
+ * @param
+ */
+ @action
+ interpolate = async (doc: Doc, kf1: TimeAndPosition, kf2: TimeAndPosition, time: number) => {
+ const keyFrame1 = (await kf1.position)!;
+ const keyFrame2 = (await kf2.position)!;
+
+ const dif_time = kf2.time - kf1.time;
+ const ratio = (time - kf1.time) / dif_time;
+
+ this._keys.forEach(key => {
+ const diff = NumCast(keyFrame2[key]) - NumCast(keyFrame1[key]);
+ const adjusted = diff * ratio;
+ doc[key] = NumCast(keyFrame1[key]) + adjusted;
+ });
+ }
+
+ private _barMoved: boolean = false;
+ @action
+ onInnerPointerUp = (e: React.PointerEvent) => {
+ if (this._inner.current) {
+ this._barMoved = false;
+ this._inner.current.removeEventListener("pointermove", this.onInnerPointerMove);
+ }
+ this._data.forEach((node) => {
+ console.log(node.y);
+ });
+ }
+
+ @action
+ onInnerPointerDown = (e: React.PointerEvent) => {
+ e.preventDefault();
+ e.stopPropagation();
+ if (this._isRecording) {
+ if (this._inner.current) {
+ this._barMoved = true;
+ let mouse = e.nativeEvent;
+ let offsetX = Math.round(mouse.offsetX);
+ this._currentBarX = offsetX;
+ this._currentBar.style.transform = `translate(${offsetX}px)`;
+ this._inner.current.removeEventListener("pointermove", this.onInnerPointerMove); //reset
+ this._inner.current.addEventListener("pointermove", this.onInnerPointerMove);
+ this.timeChange(this._currentBarX);
+ }
+
+ }
+ }
+
+ @action
+ onInnerPointerMove = (e: PointerEvent) => {
+ e.preventDefault();
+ e.stopPropagation();
+ this._barMoved = true;
+ let offsetX = Math.round(e.offsetX);
+ this._currentBarX = offsetX;
+ this._currentBar.style.transform = `translate(${offsetX}px)`; //styling should not have to be done this way...maybe done through react??
+ this.timeChange(this._currentBarX);
+ }
+
+ createBar = (width: number, pos: number = 0, color: string = "green"): HTMLDivElement => {
+ let bar = document.createElement("div");
+ bar.style.height = "100%";
+ bar.style.width = `${width}px`;
+ bar.style.backgroundColor = color;
+ bar.style.transform = `translate(${pos}px)`; //repeated code from previous method
+ bar.style.position = "absolute";
+ bar.style.pointerEvents = "none";
+ return bar;
+ }
+
+ onTimeEntered = (e: React.KeyboardEvent) => {
+ if (this._timeInput.current) {
+ if (e.keyCode === 13) {
+ let input = parseInt(this._timeInput.current.value) || 0;
+ this._currentBar.style.transform = `translate(${input}px)`;
+ this._currentBarX = input;
+ }
+ }
+ }
+
+ componentDidMount() {
+ if (this._inner.current && this._currentBar === null) {
+ this._currentBar = this.createBar(5);
+ this._inner.current.appendChild(this._currentBar);
+ }
+
+ let doc: Doc = this.props.Document;
+ let test = this.props.Document[this.props.fieldKey];
+
+ }
+
+ componentWillUnmount() {
+ this._reactionDisposers.forEach(disp => disp());
+ this._reactionDisposers = [];
+ }
+
+ @action
+ displayKeyFrames = async (dv: DocumentView) => {
+ if (this._keyChanged) { //this runs when keyframe has been changed, so it should not delete any bars.
+ this._keyChanged = false;
+ } else {
+ this.clearBars();
+ }
+ let doc: Doc = dv.props.Document;
+ let inner: HTMLDivElement = (await this._inner.current)!;
+ this._data.forEach((node) => {
+ console.log(node);
+ console.log(doc);
+ if (node === doc) {
+ console.log("hi");
+ const index = this._data.indexOf(node);
+ this._keyframes[index].forEach(async (timeandpos) => {
+ if (timeandpos !== undefined) {
+ timeandpos = TimeAndPosition(timeandpos);
+ let time = NumCast(await timeandpos.time);
+ let bar: HTMLDivElement = this.createBar(5, time, "yellow");
+ inner.appendChild(bar);
+ }
+ });
+ }
+ });
+
+ }
+
+ @action
+ clearBars = async () => {
+ let inner: HTMLDivElement = (await this._inner.current)!;
+ console.log(inner.children);
+ inner.childNodes.forEach((bar) => {
+ if (bar !== this._currentBar) {
+ inner.removeChild(bar);
+ }
+
+ });
+
+ }
+
+
+ render() {
+ return (
+ <div>
+ <div className="timeline-container">
+ <div className="timeline">
+ <div className="inner" ref={this._inner} onPointerDown={this.onInnerPointerDown} onPointerUp={this.onInnerPointerUp}>
+ {
+ SelectionManager.SelectedDocuments().map((dv) => {
+ this.displayKeyFrames(dv);
+ })}
+
+
+
+ </div>
+ </div>
+ <button onClick={this.onRecord}>Record</button>
+ <input placeholder="Time" ref={this._timeInput} onKeyDown={this.onTimeEntered}></input>
+ </div>
+ </div>
+ );
+ }
+} \ No newline at end of file
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-24 15:05:28 +0000