aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/views/nodes/Timeline.tsx128
1 files changed, 46 insertions, 82 deletions
diff --git a/src/client/views/nodes/Timeline.tsx b/src/client/views/nodes/Timeline.tsx
index 0b09dcb9d..6d93b06d1 100644
--- a/src/client/views/nodes/Timeline.tsx
+++ b/src/client/views/nodes/Timeline.tsx
@@ -7,7 +7,6 @@ import { KeyFrame } from "./KeyFrame";
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";
@@ -21,21 +20,21 @@ import { Self } from "../../../new_fields/FieldSymbols";
type IndividualDocKeyFrame = List<Doc>;
type KeyframeList = List<List<Doc>>;
-const DocKeyFrameSchema = createSchema({
+const PositionSchema = createSchema({
x: defaultSpec("number", 0),
y: defaultSpec("number", 0)
});
-type DocKeyFrame = makeInterface<[typeof DocKeyFrameSchema]>;
-const DocKeyFrame = makeInterface(DocKeyFrameSchema);
+type Position = makeInterface<[typeof PositionSchema]>;
+const Position = makeInterface(PositionSchema);
-const IndividualDocTimeKeyFrameSchema = createSchema({
+const TimeAndPositionSchema = createSchema({
time: defaultSpec("number", 0),
- keyframe: Doc//DocKeyFrame
+ keyframe: Doc //Position
});
-type IndividualDocTimeKeyFrame = makeInterface<[typeof IndividualDocTimeKeyFrameSchema]>;
-const IndividualDocTimeKeyFrame = makeInterface(IndividualDocTimeKeyFrameSchema);
+type TimeAndPosition = makeInterface<[typeof TimeAndPositionSchema]>;
+const TimeAndPosition = makeInterface(TimeAndPositionSchema);
@observer
@@ -54,12 +53,9 @@ export class Timeline extends CollectionSubView(Document) {
@observable private _onBar: Boolean = false;
@observable private _keys = ["x", "y"];
@observable private _frames: Doc[] = [];
- @observable private _keyList: String[] = []; //list of _keys
- @observable private _keyFrameList: String[] = []; //list of _keyList
- @observable private _topLevelList: String[] = []; //list of _keyFrameList
- private temp1:any = null;
- private temp2:any = null;
+ private temp1: any = null;
+ private temp2: any = null;
@action
onRecord = (e: React.MouseEvent) => {
@@ -110,23 +106,6 @@ export class Timeline extends CollectionSubView(Document) {
});
}
});
-
- // for (let i in this._keys) { //add _keys to _keyList
- // let key = this._keys[i];
- // this._keyList.push(key);
- // }
-
- // for (let i in this._keyList) { //add keyList to _keyFrameList
- // let keyList = this._keyList[i];
- // this._keyFrameList.push(keyList);
- // }
-
- // for (let i in this._topLevelList) { //add _keyFrameList to _topLevelList
- // let keyFrameList = this._keyFrameList[i];
- // this._topLevelList.push(keyFrameList);
- // }
-
- //keyFrame.document[key] = data[index];
}
});
};
@@ -156,79 +135,64 @@ export class Timeline extends CollectionSubView(Document) {
@action
timeChange = async (time: number) => { //x position of mouse relative to inner box can be passed in?
//data is list of docs
- let keyFrame: KeyFrame; //keyframe reference
+ let keyFrame: TimeAndPosition; //keyframe reference
const docs = (await DocListCastAsync(this.props.Document[this.props.fieldKey]))!;
const kfList: KeyframeList = Cast(this.props.Document.keyframes, listSpec(Doc)) as any;
const list = await Promise.all(kfList.map(l => Promise.all(l)));
for (let i in docs) {
let oneDoc = docs[i];
- let oneKf = list[i]; //use child getter if keyframes is list of keyframes (because collection is list of children)
-
- //first find frame with closest time
- //after find frame: need to do await for specific frame, except cast to Doc instead of listSpec(Doc)
- //then make a promise for that
- //_frames array is probably irrelevant (so can probably get rid of this._keyFrames.forEach(async).. section)
- //lastly, set all properties of current keyframe to that of the stored and now accessed keyframe (singleKf)***
-
- for (let i in oneKf) {
- let singleKf = oneKf[i][i];
- let min: Number = Infinity;
- if (singleKf !== undefined && singleKf.time === time) {
- //singleKf remains singleΚf
- } else { //choose closest time neighbor and reset singleKf to that keyFrame
- for (let j in oneKf) {
- const difference: Number = Math.abs(oneKf[j][j].time - time);
- if (difference < min) {
- min = difference;
- singleKf = oneKf[j][j];
+ let oneKf: TimeAndPosition[] = list[i].map(TimeAndPosition);
+ let leftKf!: TimeAndPosition;
+ let rightKf!: TimeAndPosition;
+ for (let j in oneKf) {
+ let singleKf: TimeAndPosition = oneKf[j];
+ let leftMin: Number = Infinity;
+ let rightMin: Number = Infinity;
+ if (singleKf.time !== time) { //choose closest time neighbors
+ for (let k in oneKf) {
+ if (oneKf[k].time < time) {
+ const diff: Number = Math.abs(oneKf[k].time - time);
+ if (diff < leftMin) {
+ leftMin = diff;
+ leftKf = oneKf[k];
+ }
+ } else {
+ const diff: Number = Math.abs(oneKf[k].time - time);
+ if (diff < rightMin) {
+ rightMin = diff;
+ rightKf = oneKf[k];
+ }
}
}
}
- const kfProm: KeyframeList = Cast(singleKf, Doc) as any;
- const prom = await Promise.all(kfProm.map(l => Promise.all(l)));
}
-
- this._keyFrames.forEach(async kf => { //checks if there is a keyframe that is tracking this document
- if (kf.doc.document === oneDoc) { //oneDoc used to be element...
- keyFrame = kf;
- this._frames = (await DocListCastAsync(keyFrame.doc.frames))!;
- }
- }),
- this._keys.forEach((key) => { //for each key
- if (keyFrame.doc.frames !== undefined) { //should this check if frames is onekf
- this._frames.forEach(frame => {
- if (frame.time === time) {
- keyFrame.doc[key] = frame[key]; //set the doc's position to the frames' stored values
- }
- });
- }
- });
+ this.interpolate(oneDoc, leftKf, rightKf, time);
}
}
-
+
/**
* Linearly interpolates a document from time1 to time2
* @param Doc that needs to be modified
* @param
*/
@action
- interpolate = async (doc: Doc, kf1: IndividualDocTimeKeyFrame, kf2: IndividualDocTimeKeyFrame, time: number) => {
- const keyFrame1 = DocKeyFrame(await kf1.keyframe);
- const keyFrame2 = DocKeyFrame(await kf2.keyframe);
+ interpolate = async (doc: Doc, kf1: TimeAndPosition, kf2: TimeAndPosition, time: number) => {
+ const keyFrame1 = Position(await kf1.keyframe);
+ const keyFrame2 = Position(await kf2.keyframe);
- const dif_X = NumCast(keyFrame2.X) - NumCast(keyFrame1.X);
- const dif_Y = NumCast(keyFrame2.Y) - NumCast(keyFrame1.Y);
- const dif_time = kf2.time - kf1.time;
+ const dif_X = NumCast(keyFrame2.X) - NumCast(keyFrame1.X);
+ const dif_Y = NumCast(keyFrame2.Y) - NumCast(keyFrame1.Y);
+ const dif_time = kf2.time - kf1.time;
const ratio = (time - kf1.time) / dif_time;
- const adjusted_X = dif_X * ratio;
- const adjusted_Y = dif_Y * ratio;
-
- doc.X = keyFrame1.x + adjusted_X;
- doc.Y = keyFrame1.y + adjusted_Y;
+ const adjusted_X = dif_X * ratio;
+ const adjusted_Y = dif_Y * ratio;
+
+ doc.X = keyFrame1.x + adjusted_X;
+ doc.Y = keyFrame1.y + adjusted_Y;
}
- @action
+ @action
onInterpolate = (e: React.MouseEvent) => {
}
@@ -239,7 +203,7 @@ export class Timeline extends CollectionSubView(Document) {
dv.props.Document;
}
-
+
@action
onInnerPointerUp = (e: React.PointerEvent) => {
if (this._inner.current) {
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-24 20:02:54 +0000