Add custom timeline playback range

css/panels.css

@@ -1184,6 +1184,18 @@
 		display: block;
 		margin-left: -2px;
 	}
+	#timeline_custom_range_indicator {
+		position: absolute;
+		z-index: 0;
+		pointer-events: none;
+		height: 100%;
+		top: 0;
+		opacity: 0.86;
+		border-radius: 3px;
+		background-color: var(--color-button);
+		border-right: 1px solid var(--color-border);
+		border-left: 1px solid var(--color-border);
+	}
 
 	#panel_timeline .keyframe {
 		position: absolute;

js/animations/timeline.js

@@ -69,6 +69,7 @@ const Timeline = {
 	get second() {return Timeline.time},
 	get animation_length() {return Animation.selected ? Animation.selected.length : 0;},
 	playing: false,
+	custom_range: [0, 0],
 	graph_editor_limit: 10_000,
 	selector: {
 		start: [0, 0],
@@ -537,7 +538,7 @@ const Timeline = {
 		BarItems.play_animation.setIcon('pause')
 		Timeline.last_frame_timecode = Date.now();
 		if (Animation.selected.loop == 'hold' && Timeline.time >= (Animation.selected.length||1e3)) {
-			Timeline.setTime(0)
+			Timeline.setTime(Timeline.custom_range[0])
 		}
 		if (Timeline.time > 0) {
 			Animator.animations.forEach(animation => {
@@ -553,6 +554,7 @@ const Timeline = {
 		if (!Animation.selected) return;
 
 		let max_length = Animation.selected.length || 1e3;
+		let max_time = Timeline.custom_range[1] || max_length;
 		let new_time;
 		if (Animation.selected && Animation.selected.anim_time_update) {
 			new_time = Animator.MolangParser.parse(Animation.selected.anim_time_update);
@@ -562,21 +564,21 @@ const Timeline = {
 		}
 		let time = Timeline.time + (new_time - Timeline.time) * (Timeline.playback_speed/100)
 		if (Animation.selected.loop == 'hold') {
-			time = Math.clamp(time, 0, Animation.selected.length);
+			time = Math.clamp(time, Timeline.custom_range[0], max_time);
 		}
 		Timeline.last_frame_timecode = Date.now();
 
-		if (time < max_length) {
+		if (time < max_time) {
 			Timeline.setTime(time);
 		} else {
 			if (Animation.selected.loop == 'loop' || BarItems.looped_animation_playback.value) {
-				Timeline.setTime(0)
+				Timeline.setTime(Timeline.custom_range[0]);
 			} else if (Animation.selected.loop == 'once') {
-				Timeline.setTime(0)
+				Timeline.setTime(Timeline.custom_range[0]);
 				Animator.preview()
 				Timeline.pause()
 			} else if (Animation.selected.loop == 'hold') {
-				Timeline.setTime(max_length);
+				Timeline.setTime(max_time);
 				Timeline.pause()
 			}
 		}
@@ -657,6 +659,9 @@ const Timeline = {
 		'looped_animation_playback',
 		'jump_to_timeline_start',
 		'jump_to_timeline_end',
+		'set_timeline_range_start',
+		'set_timeline_range_end',
+		'disable_timeline_range',
 		new MenuSeparator('copypaste'),
 		'paste',
 		'apply_animation_preset',
@@ -730,6 +735,7 @@ Interface.definePanels(() => {
 				timecodes: [],
 				animators: Timeline.animators,
 				markers: [],
+				custom_range: Timeline.custom_range,
 				waveforms: Timeline.waveforms,
 				focus_channel: null,
 				playhead: Timeline.time,
@@ -1473,6 +1479,9 @@ Interface.definePanels(() => {
 						</div>
 						<div id="timeline_time_wrapper">
 						<div id="timeline_time" v-bind:style="{width: (size*length)+'px', left: -scroll_left+'px'}">
+								<div id="timeline_custom_range_indicator" v-if="custom_range[1]"
+									v-bind:style="{left: (custom_range[0] * size) + 'px', width: ((custom_range[1] - custom_range[0]) * size) + 'px'}"
+								/>
 								<div v-for="t in timecodes" class="timeline_timecode" :key="t.text" :style="{left: (t.time * size) + 'px', width: (t.width * size) + 'px'}">
 									<span>{{ t.text }}</span>
 									<div class="substeps">
@@ -1852,6 +1861,31 @@ BARS.defineActions(function() {
 			}
 		}
 	})
+	new Action('set_timeline_range_start', {
+		icon: 'logout',
+		category: 'animation',
+		condition: {modes: ['animate']},
+		click() {
+			Timeline.custom_range.set(0, Timeline.time);
+		}
+	})
+	new Action('set_timeline_range_end', {
+		icon: 'login',
+		category: 'animation',
+		condition: {modes: ['animate']},
+		click() {
+			Timeline.custom_range.set(1, Timeline.time);
+		}
+	})
+	new Action('disable_timeline_range', {
+		icon: 'code_off',
+		category: 'animation',
+		condition: {modes: ['animate']},
+		condition: () => Timeline.custom_range[1],
+		click() {
+			Timeline.custom_range.replace([0, 0]);
+		}
+	})
 
 	new Action('bring_up_all_animations', {
 		icon: 'fa-sort-amount-up',

js/util/array_util.js

@@ -43,6 +43,10 @@ Array.prototype.purge = function() {
 	this.splice(0, this.length);
 	return this;
 }
+Array.prototype.set = function(index, value) {
+	this.splice(index, 1, value);
+	return this;
+}
 Array.prototype.replace = function(items) {
 	this.splice(0, this.length, ...items);
 	return this;

lang/en.json

@@ -1831,6 +1831,12 @@
 	"action.jump_to_timeline_end": "Jump to Animation End",
 	"action.timeline_frame_back": "Jump 1 Frame Back",
 	"action.timeline_frame_forth": "Jump 1 Frame Forth",
+	"action.set_timeline_range_start": "Set Timeline Range Start",
+	"action.set_timeline_range_start.desc": "Set the start point for a custom playback range in the animation timeline",
+	"action.set_timeline_range_end": "Set Timeline Range End",
+	"action.set_timeline_range_end.desc": "Set the start point for a custom playback range in the animation timeline",
+	"action.disable_timeline_range": "Disable Timeline Range",
+	"action.disable_timeline_range.desc": "Disable the custom playback range in the animation timeline",
 	"action.bring_up_all_animations": "Bring Up All Animators",
 	"action.bring_up_all_animations.desc": "Brings all modified animators into the timeline",
 	"action.fold_all_animations": "Fold All Animators",