aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/views/animationtimeline/Keyframe.tsx25
-rw-r--r--src/client/views/animationtimeline/Timeline.tsx16
-rw-r--r--src/client/views/animationtimeline/Track.tsx1
-rw-r--r--src/new_fields/util.ts2
4 files changed, 26 insertions, 18 deletions
diff --git a/src/client/views/animationtimeline/Keyframe.tsx b/src/client/views/animationtimeline/Keyframe.tsx
index 810f9a057..c872b8740 100644
--- a/src/client/views/animationtimeline/Keyframe.tsx
+++ b/src/client/views/animationtimeline/Keyframe.tsx
@@ -13,7 +13,6 @@ import { InkField, StrokeData } from "../../../new_fields/InkField";
import { TimelineMenu } from "./TimelineMenu";
import { Docs } from "../../documents/Documents";
import { CollectionDockingView } from "../collections/CollectionDockingView";
-import { thisTypeAnnotation } from "babel-types";
export namespace KeyframeFunc {
export enum KeyframeType {
@@ -167,6 +166,7 @@ export class Keyframe extends React.Component<IProps> {
(fadeOut.key! as Doc).opacity = 1;
(start.key! as Doc).opacity = 0.1;
(finish.key! as Doc).opacity = 0.1;
+ this.forceUpdate();
});
}
@@ -315,6 +315,7 @@ export class Keyframe extends React.Component<IProps> {
this.keyframes[this.keyframes.length - 1].time = this.regiondata.position + this.regiondata.duration;
}
+
@action
createKeyframe = async (clientX:number) => {
this._mouseToggled = true;
@@ -327,7 +328,7 @@ export class Keyframe extends React.Component<IProps> {
}
}
-
+
@action
moveKeyframe = async (e: React.MouseEvent, kf: Doc) => {
e.preventDefault();
@@ -346,12 +347,13 @@ export class Keyframe extends React.Component<IProps> {
@action
makeKeyframeMenu = (kf :Doc, e:MouseEvent) => {
TimelineMenu.Instance.addItem("button", "Show Data", () => {
- runInAction(() => {let kvp = Docs.Create.KVPDocument(Cast(kf.key, Doc) as Doc, { width: 300, height: 300 });
- CollectionDockingView.AddRightSplit(kvp, (kf.key as Doc).data as Doc); });
- }),
+ runInAction(() => {let kvp = Docs.Create.KVPDocument(Cast(kf.key, Doc) as Doc, { width: 300, height: 300 });
+ CollectionDockingView.AddRightSplit(kvp, (kf.key as Doc).data as Doc); });
+ }),
TimelineMenu.Instance.addItem("button", "Delete", () => {
runInAction(() => {
(this.regiondata.keyframes as List<Doc>).splice(this.keyframes.indexOf(kf), 1);
+ this.forceUpdate();
});
}),
TimelineMenu.Instance.addItem("input", "Move", (val) => {
@@ -381,7 +383,10 @@ export class Keyframe extends React.Component<IProps> {
TimelineMenu.Instance.addItem("button", "Add Path", () => {
this.onContainerDown(kf, "path");
}),
- TimelineMenu.Instance.addItem("button", "Remove Region", ()=>{this.regions.splice(this.regions.indexOf(this.regiondata), 1);}),
+ TimelineMenu.Instance.addItem("button", "Remove Region", ()=>{
+ runInAction(() => {
+ this.regions.splice(this.regions.indexOf(this.regiondata), 1);}
+ );}),
TimelineMenu.Instance.addItem("input", `fadeIn: ${this.regiondata.fadeIn}ms`, (val) => {
runInAction(() => {
if (this.checkInput(val)){
@@ -554,9 +559,9 @@ export class Keyframe extends React.Component<IProps> {
}
@action
- drawKeyframes = () => {
+ drawKeyframes = () => {
let keyframeDivs:JSX.Element[] = [];
- this.keyframes.forEach( kf => {
+ DocListCast(this.regiondata.keyframes).forEach( kf => {
if (kf.type as KeyframeFunc.KeyframeType === KeyframeFunc.KeyframeType.default) {
keyframeDivs.push(
<div className="keyframe" style={{ left: `${KeyframeFunc.convertPixelTime(NumCast(kf.time), "mili", "pixel", this.props.tickSpacing, this.props.tickIncrement) - this.pixelPosition}px` }}>
@@ -581,9 +586,9 @@ export class Keyframe extends React.Component<IProps> {
}
@action
- drawKeyframeDividers = () => {
+ drawKeyframeDividers = () => {
let keyframeDividers:JSX.Element[] = [];
- this.keyframes.forEach(kf => {
+ DocListCast(this.regiondata.keyframes).forEach(kf => {
if(this.keyframes.indexOf(kf ) !== this.keyframes.length - 1) {
let left = this.keyframes[this.keyframes.indexOf(kf) + 1];
let bodyRef = React.createRef<HTMLDivElement>();
diff --git a/src/client/views/animationtimeline/Timeline.tsx b/src/client/views/animationtimeline/Timeline.tsx
index 9ac5d98d2..666048a54 100644
--- a/src/client/views/animationtimeline/Timeline.tsx
+++ b/src/client/views/animationtimeline/Timeline.tsx
@@ -155,7 +155,7 @@ export class Timeline extends React.Component<FieldViewProps> {
let scrubberbox = this._infoContainer.current!;
let left = scrubberbox.getBoundingClientRect().left;
let offsetX = Math.round(e.clientX - left) * this.props.ScreenToLocalTransform().Scale;
- this.changeCurrentBarX(offsetX);
+ this.changeCurrentBarX(offsetX + this._visibleStart);
}
@action
@@ -201,6 +201,9 @@ export class Timeline extends React.Component<FieldViewProps> {
let infoContainer = this._infoContainer.current!;
infoContainer.scrollLeft = pixel;
this._visibleStart = infoContainer.scrollLeft;
+ console.log(infoContainer.scrollLeft);
+ console.log(this._totalLength);
+ console.log(this._visibleLength);
}
@action
@@ -317,15 +320,14 @@ export class Timeline extends React.Component<FieldViewProps> {
roundToggle.style.transform = "translate(0px, 0px)";
roundToggle.style.animationName = "turnoff";
roundToggleContainer.style.animationName = "turnoff";
- timelineContainer.style.transform = `translate(0px, ${0}px)`;
- setTimeout(() => {
- this.props.Document.isAnimating = false;
- }, 500);
+ timelineContainer.style.top = `${-this._containerHeight}px`;
+ this.props.Document.isAnimating = false;
+
} else {
roundToggle.style.transform = "translate(45px, 0px)";
roundToggle.style.animationName = "turnon";
roundToggleContainer.style.animationName = "turnon";
- timelineContainer.style.transform = `translate(0px, ${this._containerHeight}px)`;
+ timelineContainer.style.top = "0px";
this.props.Document.isAnimating = true;
}
}
@@ -334,7 +336,7 @@ export class Timeline extends React.Component<FieldViewProps> {
<div>
<div style={{ visibility: this._timelineVisible ? "visible" : "hidden" }}>
<div key="timeline_wrapper" style={{ visibility: BoolCast(this.props.Document.isAnimating && this._timelineVisible) ? "visible" : "hidden", left: "0px", top: "0px", position: "absolute", width: "100%", transform: "translate(0px, 0px)" }}>
- <div key="timeline_container" className="timeline-container" ref={this._timelineContainer} style={{ height: `${this._containerHeight}px`, top: `-${this._containerHeight}px` }}>
+ <div key="timeline_container" className="timeline-container" ref={this._timelineContainer} style={{ height: `${this._containerHeight}px`, top: `0px` }}>
<div key="timeline_info" className="info-container" ref={this._infoContainer} onWheel={this.onWheelZoom}>
{this.drawTicks()}
<div key="timeline_scrubber" className="scrubber" onPointerDown={this.onScrubberDown} style={{ transform: `translate(${this._currentBarX}px)` }}>
diff --git a/src/client/views/animationtimeline/Track.tsx b/src/client/views/animationtimeline/Track.tsx
index 3ec410216..7a8f42ea7 100644
--- a/src/client/views/animationtimeline/Track.tsx
+++ b/src/client/views/animationtimeline/Track.tsx
@@ -270,6 +270,7 @@ export class Track extends React.Component<IProps> {
let inner = this._inner.current!;
let offsetX = Math.round((e.clientX - inner.getBoundingClientRect().left) * this.props.transform.Scale);
this.createRegion(KeyframeFunc.convertPixelTime(offsetX, "mili", "time", this.props.tickSpacing, this.props.tickIncrement));
+ this.forceUpdate();
}
createRegion = (position: number) => {
diff --git a/src/new_fields/util.ts b/src/new_fields/util.ts
index 04194509c..a92b1858d 100644
--- a/src/new_fields/util.ts
+++ b/src/new_fields/util.ts
@@ -69,7 +69,7 @@ const _setterImpl = action(function (target: any, prop: string | symbol | number
} else {
target.__fields[prop] = value;
}
- if (typeof value === "object" && !(value instanceof ObjectField)) debugger;
+ // if (typeof value === "object" && !(value instanceof ObjectField)) debugger;
if (writeToServer) {
if (value === undefined) target[Update]({ '$unset': { ["fields." + prop]: "" } });
else target[Update]({ '$set': { ["fields." + prop]: value instanceof ObjectField ? SerializationHelper.Serialize(value) : (value === undefined ? null : value) } });
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-12 10:39:38 +0000