Make keyframe sliders tab targets

Improve tab target switching performance
Fix issues with animation loops
This commit is contained in:
JannisX11 2022-05-19 20:49:26 +02:00
parent c19a365054
commit 29bcd54b8b
4 changed files with 25 additions and 17 deletions

View File

@ -405,7 +405,7 @@ class Animation {
}
}
get time() {
return (this.length && this.loop === 'loop') ? (Timeline.time % this.length) : Timeline.time;
return (this.length && this.loop === 'loop') ? ((Timeline.time - 0.001) % this.length) + 0.001 : Timeline.time;
}
createUniqueName(arr) {
var scope = this;
@ -2127,8 +2127,8 @@ Interface.definePanels(function() {
<ul id="placeholder_buttons">
<li v-for="button in buttons" :key="button.id" :class="{placeholder_slider: button.type == 'slider'}">
<input v-if="button.type == 'toggle'" type="checkbox" :value="button.value == 1" @change="changeButtonValue(button, $event)" :id="'placeholder_button_'+button.id">
<input v-else type="number" class="dark_bordered" :step="button.step" :min="button.min" :max="button.max" v-model="button.value" @input="changeButtonValue(button, $event)">
<input v-if="button.type == 'toggle'" type="checkbox" class="tab_target" :value="button.value == 1" @change="changeButtonValue(button, $event)" :id="'placeholder_button_'+button.id">
<input v-else type="number" class="dark_bordered tab_target" :step="button.step" :min="button.min" :max="button.max" v-model="button.value" @input="changeButtonValue(button, $event)">
<label :for="'placeholder_button_'+button.id" @mousedown="slideButton(button, $event)" @touchstart="slideButton(button, $event)">{{ button.id }}</label>
</li>
</ul>

View File

@ -648,20 +648,21 @@ Interface.definePanels(() => {
for (let time = Math.clamp(this.scroll_left - 9, 0, Infinity); time < (clientWidth + this.scroll_left - this.head_width); time += step) {
Timeline.time = time / this.size;
let snap_kf = keyframes.find(kf => Timeline.time <= kf.time && Timeline.time > kf.time - step / this.size );
if (snap_kf) {
Timeline.time = snap_kf.time;
}
let value = ba.interpolate(this.graph_editor_channel, false, this.graph_editor_axis);
points.push(value);
min = Math.min(min, value);
max = Math.max(max, value);
if (snap_kf) snap_kf.display_value = value;
if (time >= Animation.selected.length && Animation.selected.length && Animation.selected.loop === 'loop') {
Timeline.time = Animation.selected.time;
let value = ba.interpolate(this.graph_editor_channel, false, this.graph_editor_axis);
if (Timeline.time > Animation.selected.length && Animation.selected.length && Animation.selected.loop === 'loop') {
if (points.length && !loop_points.length) loop_points.push(points.last())
loop_points.push(value);
} else {
points.push(value);
min = Math.min(min, value);
max = Math.max(max, value);
}
}
@ -682,7 +683,7 @@ Interface.definePanels(() => {
this.loop_graph = '';
if (loop_points.length) {
loop_points.forEach((value, i) => {
i = i + points.length - loop_points.length;
i = i + points.length - 1;
this.loop_graph += `${this.loop_graph.length ? 'L' : 'M'}${i*step} ${this.graph_offset - value * this.graph_size} `
})
}
@ -942,7 +943,8 @@ Interface.definePanels(() => {
addEventListeners(document, 'mouseup touchend', off);
},
clamp: Math.clamp,
trimFloatNumber
trimFloatNumber,
a() {console.trace('nee')}
},
watch: {
size() {this.updateTimecodes()},

View File

@ -611,10 +611,16 @@ addEventListeners(document, 'keydown mousedown', function(e) {
//Tab
if (e.which == 9 && !open_dialog) {
var all_inputs = $('.tab_target:visible:not(.prism-editor-wrapper), .prism-editor-wrapper.tab_target:visible > pre[contenteditable="true"]')
var index = all_inputs.index(input_focus)+1;
if (index >= all_inputs.length) index = 0;
var next = $(all_inputs.get(index))
let all_visible_inputs = [];
var all_inputs = document.querySelectorAll('.tab_target:not(.prism-editor-wrapper), .prism-editor-wrapper.tab_target > pre[contenteditable="true"]')
all_inputs.forEach(input => {
if (input.isConnected && input.offsetParent && $(input).is(':visible')) {
all_visible_inputs.push(input);
}
})
var index = all_visible_inputs.indexOf(input_focus)+1;
if (index >= all_visible_inputs.length) index = 0;
var next = $(all_visible_inputs[index])
if (next.length) {
if (next.hasClass('cube_name')) {

File diff suppressed because one or more lines are too long