storytold/storyteller-bevy
2
0
Fork 0
mirror of https://github.com/storytold/storyteller-bevy.git synced 2026-10-17 00:13:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

display clip start and end

Browse Source
This commit is contained in:
Lee-Orr
2024-03-18 14:53:04 -04:00
parent c9fef4425c
commit c145540a51
4 changed files with 49 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
studio-frontend/src/app/anim-editor.element.ts
+31 -13
View File
@@ -28,7 +28,7 @@ export class AnimEditorElement extends LitElement {
@state() timelineEnd = 5;
@state() clipStart = 0;
@state() clipEnd = 15_000;
@state() clipEnd = 0;
@state() playHead = 0;
@state() playing = false;
@@ -103,21 +103,22 @@ export class AnimEditorElement extends LitElement {
this.keyframes = keyframes;
let min = 0;
let max = 5;
let min = Infinity
let max = -Infinity;
for (const keyframe of Object.keys(this.keyframes)) {
let time = this.keyframes[keyframe].time;
if (typeof time != "number") {
continue;
}
if (time > max) {
max = time + 1;
max = time;
}
if (time < min) {
min = time;
}
}
this.clipStart = min;
this.clipEnd = max;
this.timelineEnd = max;
this.timelineStart = min;
this.clipStart = Math.max(min, 0.);
this.clipEnd = Math.max(max, min);
}
@@ -136,6 +137,17 @@ export class AnimEditorElement extends LitElement {
}
}
@on("rangeStart-change")
onRangeStartChange({detail}: {detail:number}): void {
this.timelineStart = detail;
}
@on("rangeEnd-change")
onRangeEndChange({detail}: {detail:number}): void {
this.timelineStart = detail;
}
onSidebarResize(event: PointerEvent): void {
this.sidebarWidth = Math.max(Math.min(this.sidebarWidth + event.movementX, 512), 128);
}
@@ -225,10 +237,16 @@ export class AnimEditorElement extends LitElement {
const selected = typeof this.selected_track === "object" && "track" in this.selected_track ? this.selected_track.track : false;
const can_add_selected = typeof this.selected_track === "object" && "outside_entity" in this.selected_track ? this.selected_track.outside_entity : false;
let length = this.timelineEnd - this.timelineStart;
let clip_start = (this.clipStart - this.timelineStart) / length;
let clip_end = (this.clipEnd - this.timelineStart) / length;
let track_count = {
let timeline_css_variables = {
'--track-count': `${this.trackCount()}`,
'--row-count': `calc(var(--track-count) + ${can_add_selected ? 2 : 1})`
'--row-count': `calc(var(--track-count) + ${can_add_selected ? 2 : 1})`,
'--clip-end': `${clip_end * 100}%`,
'--clip-start': `${clip_start * 100}%`
};
const tracklist = this.track_ordered.map((entity) => {
@@ -263,7 +281,7 @@ export class AnimEditorElement extends LitElement {
<div class="sidebar"
style=${styleMap({
width: `${this.sidebarWidth}px`,
...track_count
...timeline_css_variables
})}
>
<sts-toolbar>
@@ -314,14 +332,14 @@ export class AnimEditorElement extends LitElement {
</div>
</div>
<div class="divider" style=${styleMap(track_count)}
<div class="divider" style=${styleMap(timeline_css_variables)}
${drag({
move: this.onSidebarResize,
})}
></div>
<sts-anim-timeline class="timeline"
style=${styleMap(track_count)}
style=${styleMap(timeline_css_variables)}
.rangeStart=${bind(this, "timelineStart")}
.rangeEnd=${bind(this, "timelineEnd")}
.clipStart=${this.clipStart}
studio-frontend/src/app/anim-timeline.element.scss
+2
View File
@@ -18,6 +18,8 @@
inset: 0;
grid-row: 1 / span var(--row-count);
background: linear-gradient(90deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.2) calc(var(--clip-start) - 1px), rgba(255,255,255,0.1) var(--clip-start), rgba(255,255,255,0.1) var(--clip-end), rgba(0,0,0,0.2) calc(var(--clip-end) + 1px));
&.panning {
cursor: grabbing;
}
studio-frontend/src/app/anim-timeline.element.ts
+10 -4
View File
@@ -58,6 +58,12 @@ export class AnimTimelineElement extends LitElement {
@property({ type: Number }) rangeStart = 0;
/** The time (in seconds) at the right edge of the timeline view */
@property({ type: Number }) rangeEnd = 5;
/** The time (in seconds) at the start of the clip */
@property({ type: Number }) clipStart = 0;
/** The time (in seconds) at the end of the clip */
@property({ type: Number }) clipEnd = 5;
/** The time (in seconds) of the current play-head position */
@property({ type: Number }) playHead = 0;
@@ -151,8 +157,8 @@ export class AnimTimelineElement extends LitElement {
const deltaTimeScale = delta * 0.001 * currentRange;
const rangeStart = this.rangeStart - deltaTimeScale * focusPoint;
const rangeEnd = this.rangeEnd + deltaTimeScale * (1 - focusPoint);
const rangeStart = Math.max(this.rangeStart - deltaTimeScale * focusPoint, 0.);
const rangeEnd = Math.max(this.rangeEnd + deltaTimeScale * (1 - focusPoint), rangeStart + 0.01);
this.dispatchEvent(new CustomEvent("rangeStart-change", { detail: rangeStart }));
this.dispatchEvent(new CustomEvent("rangeEnd-change", { detail: rangeEnd }));
@@ -174,8 +180,8 @@ export class AnimTimelineElement extends LitElement {
const deltaChange = deltaPx * 0.001;
const scaledChange = (this.rangeEnd - this.rangeStart) * deltaChange;
const rangeStart = this.rangeStart - scaledChange;
const rangeEnd = this.rangeEnd - scaledChange;
const rangeStart = Math.max(this.rangeStart - scaledChange, 0);
const rangeEnd = Math.max(this.rangeEnd - scaledChange, rangeStart + 0.01);
this.dispatchEvent(new CustomEvent("rangeStart-change", { detail: rangeStart }));
this.dispatchEvent(new CustomEvent("rangeEnd-change", { detail: rangeEnd }));
studio/src/anim/timeline_animation.rs
+6 -6
View File
@@ -205,7 +205,7 @@ fn process_timeline_events(
r_global_seek_time.playing = false;
}
TimelineInteractionEvent::Seek(time) => {
r_global_seek_time.time = *time;
r_global_seek_time.time = time.max(0.);
}
}
@@ -316,7 +316,7 @@ fn generate_transform_animation(
if (time - last_time).abs() > 0.00001 {
translation_list.push(Tween::new(
EaseMethod::Linear,
Duration::from_secs_f32(time - last_time),
Duration::from_secs_f32((time - last_time).max(0.00001)),
TransformPositionLens {
start,
end: translation,
@@ -336,7 +336,7 @@ fn generate_transform_animation(
if (time - last_time).abs() > 0.00001 {
rotation_list.push(Tween::new(
EaseMethod::Linear,
Duration::from_secs_f32(time - last_time),
Duration::from_secs_f32((time - last_time).max(0.00001)),
TransformRotationLens {
start,
end: rotation,
@@ -353,7 +353,7 @@ fn generate_transform_animation(
if (time - last_time).abs() > 0.00001 {
scale_list.push(Tween::new(
EaseMethod::Linear,
Duration::from_secs_f32(time - last_time),
Duration::from_secs_f32((time - last_time).max(0.00001)),
TransformScaleLens { start, end: scale },
));
}
@@ -433,7 +433,7 @@ pub fn timeline_bound_component_animator_system<T: Component>(
mut query: Query<(Entity, &mut T, &mut Animator<T>)>,
events: ResMut<Events<TweenCompleted>>,
) {
if time.is_changed() {
if time.is_changed() && time.time >= 0.0 {
info!("Animating with time: {time:?}");
let mut events: Mut<Events<TweenCompleted>> = events.into();
for (entity, target, mut animator) in query.iter_mut() {
@@ -452,7 +452,7 @@ pub fn timeline_bound_component_animator_system<T: Component>(
} else {
info!("setting tween time to {}", time.time);
let tween = animator.tweenable_mut();
tween.set_elapsed(Duration::from_secs_f32(time.time));
tween.set_elapsed(Duration::from_secs_f32(time.time.max(0.)));
info!("Tween time set successfully");
tween.tick(Duration::ZERO, &mut target, entity, &mut events);
}