mirror/blockbench
2
0
Fork 0
mirror of https://github.com/JannisX11/blockbench.git synced 2024-11-21 01:13:37 +08:00
Code Issues Packages Projects Releases Wiki Activity

Implement #1218 handle to move GIF crop frame

Browse Source 
implement button to change animated texture FPS
This commit is contained in:
JannisX11 2022-03-17 23:42:12 +01:00
parent 714025f64d
commit f8ec39d494
3 changed files with 38 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
css/window.css
View File

@ -1148,6 +1148,8 @@
text-align: center;
color: var(--color-subtle_text);
font-family: var(--font-code);
pointer-events: initial;
cursor: move;
}
#gif_recording_controls {
pointer-events: initial;

29
js/preview/screenshot.js
View File

@ -310,12 +310,31 @@ const Screencam = {
frame_label = Interface.createElement('div', {id: 'gif_recording_frame_label'});
frame.append(frame_label);
function drag(e1) {
let crop_original = Object.assign({}, crop);
function move(e2) {
convertTouchEvent(e2);
crop.left = crop_original.left + (e2.clientX - e1.clientX);
crop.right = crop_original.right - (e2.clientX - e1.clientX);
crop.top = crop_original.top + (e2.clientY - e1.clientY);
crop.bottom = crop_original.bottom - (e2.clientY - e1.clientY);
updateCrop();
}
function stop(e3) {
removeEventListeners(document, 'mousemove touchmove', move);
removeEventListeners(document, 'mouseup touchend', stop);
}
addEventListeners(document, 'mousemove touchmove', move);
addEventListeners(document, 'mouseup touchend', stop);
}
addEventListeners(frame_label, 'mousedown touchstart', e => drag(e, 'right', 'top'));
let resizer_top_right = Interface.createElement('div', {style: 'top: -2px; right: -2px;', class: 'gif_recording_frame_handle gif_resize_ne'}, Blockbench.getIconNode('arrow_back_ios'));
let resizer_top_left = Interface.createElement('div', {style: 'top: -2px; left: -2px;', class: 'gif_recording_frame_handle gif_resize_nw'}, Blockbench.getIconNode('arrow_back_ios'));
let resizer_bottom_right = Interface.createElement('div', {style: 'bottom: -2px; right: -2px;',class: 'gif_recording_frame_handle gif_resize_se'}, Blockbench.getIconNode('arrow_back_ios'));
let resizer_bottom_left = Interface.createElement('div', {style: 'bottom: -2px; left: -2px;', class: 'gif_recording_frame_handle gif_resize_sw'}, Blockbench.getIconNode('arrow_back_ios'));
function drag(e1, x_value, y_value) {
function resize(e1, x_value, y_value) {
let crop_original = Object.assign({}, crop);
function move(e2) {
convertTouchEvent(e2);
@ -330,10 +349,10 @@ const Screencam = {
addEventListeners(document, 'mousemove touchmove', move);
addEventListeners(document, 'mouseup touchend', stop);
}
addEventListeners(resizer_top_right, 'mousedown touchstart', e => drag(e, 'right', 'top'));
addEventListeners(resizer_top_left, 'mousedown touchstart', e => drag(e, 'left', 'top'));
addEventListeners(resizer_bottom_right, 'mousedown touchstart', e => drag(e, 'right', 'bottom'));
addEventListeners(resizer_bottom_left, 'mousedown touchstart', e => drag(e, 'left', 'bottom'));
addEventListeners(resizer_top_right, 'mousedown touchstart', e => resize(e, 'right', 'top'));
addEventListeners(resizer_top_left, 'mousedown touchstart', e => resize(e, 'left', 'top'));
addEventListeners(resizer_bottom_right, 'mousedown touchstart', e => resize(e, 'right', 'bottom'));
addEventListeners(resizer_bottom_left, 'mousedown touchstart', e => resize(e, 'left', 'bottom'));
frame.append(resizer_top_right);
frame.append(resizer_top_left);
frame.append(resizer_bottom_right);

12
js/texturing/textures.js
View File

@ -1708,6 +1708,16 @@ BARS.defineActions(function() {
TextureAnimator.update(textures);
}
})
new Action('animated_texture_fps', {
name: 'settings.texture_fps',
description: 'settings.texture_fps.desc',
icon: 'speed',
category: 'textures',
condition: textureAnimationCondition,
click() {
settings.texture_fps.trigger()
}
})
})
Interface.definePanels(function() {
@ -1834,12 +1844,14 @@ Interface.definePanels(function() {
<div class="texture_animation_frame" v-for="i in maxFrameCount()"></div>
<div id="animated_texture_playhead" :style="{left: getPlayheadPos() + 'px'}"></div>
</div>
<div class="tool_wrapper_2"></div>
</div>
</div>
`,
mounted() {
BarItems.animated_textures.toElement('#texture_animation_playback .tool_wrapper')
BarItems.animated_texture_frame.setWidth(52).toElement('#texture_animation_playback .tool_wrapper')
BarItems.animated_texture_fps.toElement('#texture_animation_playback .tool_wrapper_2')
}
},
menu: new Menu([