mirror of
https://github.com/JannisX11/blockbench.git
synced 2025-01-30 15:42:42 +08:00
Implement timeline frame number display
This commit is contained in:
parent
f11633143e
commit
35fe4dbdf8
@ -1172,6 +1172,21 @@
|
||||
padding-left: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
#timeline_corner > span {
|
||||
color: var(--color-subtle_text);
|
||||
font-family: var(--font-code);
|
||||
text-align: center;
|
||||
padding: 2px;
|
||||
width: 24px;
|
||||
flex-shrink: 100;
|
||||
}
|
||||
#timeline_framenumber {
|
||||
color: var(--color-subtle_text);
|
||||
font-family: var(--font-code);
|
||||
margin-right: auto;
|
||||
padding: 2px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
#timeline_corner > .tool {
|
||||
height: 26px;
|
||||
}
|
||||
|
@ -224,13 +224,14 @@ const Timeline = {
|
||||
}
|
||||
},
|
||||
setTimecode(time) {
|
||||
let second_fractions = settings.timecode_frame_number.value ? 1/Timeline.getStep() : 100;
|
||||
let second_fractions = 100;
|
||||
let m = Math.floor(time/60)
|
||||
let s = Math.floor(time%60)
|
||||
let f = Math.floor((time%1) * second_fractions)
|
||||
if ((s+'').length === 1) {s = '0'+s}
|
||||
if ((f+'').length === 1) {f = '0'+f}
|
||||
Timeline.vue.timestamp = `${m}:${s}:${f}`;
|
||||
Timeline.vue.framenumber = Math.round(time/Timeline.getStep());
|
||||
},
|
||||
snapTime(time, animation) {
|
||||
//return time;
|
||||
@ -395,7 +396,7 @@ const Timeline = {
|
||||
while (times.length < 3) {
|
||||
times.push(0)
|
||||
}
|
||||
let second_fractions = settings.timecode_frame_number.value ? 1/Timeline.getStep() : 100;
|
||||
let second_fractions = 100;
|
||||
let seconds
|
||||
= times[0]*60
|
||||
+ limitNumber(times[1], 0, 59)
|
||||
@ -405,6 +406,26 @@ const Timeline = {
|
||||
Animator.preview()
|
||||
}
|
||||
})
|
||||
//Enter Frame
|
||||
$('#timeline_framenumber').click(e => {
|
||||
if ($('#timeline_framenumber').attr('contenteditable') == 'true') return;
|
||||
|
||||
$('#timeline_framenumber').attr('contenteditable', true).trigger('focus');
|
||||
document.execCommand('selectAll');
|
||||
})
|
||||
.on('focusout keydown', e => {
|
||||
if (e.type === 'focusout' || Keybinds.extra.confirm.keybind.isTriggered(e) || Keybinds.extra.cancel.keybind.isTriggered(e)) {
|
||||
$('#timeline_framenumber').attr('contenteditable', false)
|
||||
}
|
||||
})
|
||||
.on('keyup', e => {
|
||||
let frame = parseInt($('#timeline_framenumber').text())
|
||||
let seconds = frame * Timeline.getStep();
|
||||
if (Math.abs(seconds-Timeline.time) > 1e-3 ) {
|
||||
Timeline.setTime(seconds, true)
|
||||
Animator.preview()
|
||||
}
|
||||
})
|
||||
|
||||
$('#timeline_vue').on('mousewheel scroll', function(e) {
|
||||
e.preventDefault()
|
||||
@ -666,6 +687,7 @@ Interface.definePanels(() => {
|
||||
focus_channel: null,
|
||||
playhead: Timeline.time,
|
||||
timestamp: '0',
|
||||
framenumber: '0',
|
||||
|
||||
graph_editor_open: false,
|
||||
graph_editor_channel: 'rotation',
|
||||
@ -839,7 +861,6 @@ Interface.definePanels(() => {
|
||||
updateTimecodes() {
|
||||
if (!this._isMounted) return;
|
||||
this.timecodes.empty();
|
||||
let second_fractions = settings.timecode_frame_number.value ? 1/Timeline.getStep() : 100;
|
||||
let timeline_container_width = Panels.timeline.node.clientWidth - this.head_width;
|
||||
this.length = Timeline.getMaxLength();
|
||||
|
||||
@ -871,7 +892,7 @@ Interface.definePanels(() => {
|
||||
var i = Math.floor(this.scroll_left / this.size / step) * step;
|
||||
while (i < Math.ceil((this.scroll_left + timeline_container_width) / this.size / step) * step) {
|
||||
if (settings.timecode_frame_number.value) {
|
||||
var text = `${Math.floor(i)}:${Math.round((i % 1) * second_fractions)}`;
|
||||
var text = Math.round(i / Timeline.getStep());
|
||||
} else {
|
||||
var text = Math.round(i*100)/100;
|
||||
}
|
||||
@ -1360,6 +1381,8 @@ Interface.definePanels(() => {
|
||||
<div id="timeline_header">
|
||||
<div id="timeline_corner" v-bind:style="{width: head_width+'px'}">
|
||||
<div id="timeline_timestamp">{{ timestamp }}</div>
|
||||
<span id="">/</span>
|
||||
<div id="timeline_framenumber">{{ framenumber }}</div>
|
||||
<div class="channel_axis_selector" v-if="graph_editor_open">
|
||||
<div @click="graph_editor_axis = 'x';" :class="{selected: graph_editor_axis == 'x'}" style="color: var(--color-axis-x);">X</div>
|
||||
<div @click="graph_editor_axis = 'y';" :class="{selected: graph_editor_axis == 'y'}" style="color: var(--color-axis-y);">Y</div>
|
||||
|
Loading…
Reference in New Issue
Block a user