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

Implement new numeric input in more places

Browse Source
This commit is contained in:
JannisX11 2023-04-04 20:16:51 +02:00
parent 999f08e930
commit e351582468
10 changed files with 103 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
css/panels.css
View File

@ -301,7 +301,19 @@
flex-grow: 1;
flex-shrink: 1;
}
.bar.slider_input_combo input.tool[type="number"] {
.bar.slider_input_combo > .numeric_input {
width: 72px;
float: none;
flex-grow: 0;
flex-shrink: 0;
}
.bar.slider_input_combo > .numeric_input > input {
padding-left: 8px;
padding-bottom: 3px;
border: none;
background-color: transparent;
}
.bar.slider_input_combo > input.tool[type="number"] {
width: 52px;
float: none;
flex-grow: 0;

4
css/setup.css
View File

@ -663,7 +663,7 @@
}
.numeric_input > div.tool {
position: absolute;
width: 25px;
width: 22px;
right: 1px;
top: 0;
color: var(--color-subtle_text);
@ -671,7 +671,7 @@
}
.numeric_input > div.tool > i {
font-size: 20px;
margin-top: 4px;
margin-top: 5px;
}
div.nslide {

2
js/animations/animation.js
View File

@ -2481,7 +2481,7 @@ Interface.definePanels(function() {
<li v-for="button in buttons" :key="button.id" :class="{placeholder_slider: button.type == 'slider'}" @click="button.type == 'impulse' && changeButtonValue(button, $event)" :buttontype="button.type">
<i v-if="button.type == 'impulse'" class="material-icons">play_arrow</i>
<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-if="button.type == 'slider'" type="number" class="dark_bordered tab_target" :step="button.step" :min="button.min" :max="button.max" v-model="button.value" @input="changeButtonValue(button, $event)">
<numeric-input v-if="button.type == 'slider'" 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>

2
js/animations/animation_controllers.js
View File

@ -1681,7 +1681,7 @@ Interface.definePanels(() => {
</ul>
<div class="controller_state_input_bar">
<label>${tl('animation_controllers.state.blend_transition')}</label>
<input type="number" class="dark_bordered" style="width: 70px;" v-model.number="state.blend_transition" min="0" step="0.05">
<numeric-input style="width: 70px;" v-model.number="state.blend_transition" min="0" step="0.05" />
</div>
<div class="controller_state_input_bar">
<label :for="state.uuid + '_shortest_path'">${tl('animation_controllers.state.shortest_path')}</label>

10
js/display_mode.js
View File

@ -1894,7 +1894,7 @@ Interface.definePanels(function() {
<input type="range" :style="{'--color-thumb': \`var(--color-axis-\${getAxisLetter(axis)})\`}" class="tool disp_range" v-model.number="slot.rotation[axis]" v-bind:trigger_type="'rotation.'+axis"
min="-180" max="180" step="1" value="0"
@input="change(axis, 'rotation')" @mousedown="start()" @change="save">
<input lang="en" type="number" class="tool disp_text" v-model.number="slot.rotation[axis]" min="-180" max="180" step="0.5" value="0" @input="change(axis, 'rotation')" @focusout="focusout(axis, 'rotation');save()" @mousedown="start()">
<numeric-input class="tool disp_text" v-model.number="slot.rotation[axis]" :min="-180" :max="180" :step="0.5" @input="change(axis, 'rotation')" @focusout="focusout(axis, 'rotation');save()" @mousedown="start()" />
</div>
<div class="bar display_slot_section_bar">
@ -1907,7 +1907,7 @@ Interface.definePanels(function() {
v-bind:max="Math.abs(slot.translation[axis]) < 10 ? 20 : (slot.translation[axis] < 0 ? 70*3-10 : 80)"
v-bind:step="Math.abs(slot.translation[axis]) < 10 ? 0.25 : 1"
value="0" @input="change(axis, 'translation')" @mousedown="start()" @change="save">
<input lang="en" type="number" class="tool disp_text" v-model.number="slot.translation[axis]" min="-80" max="80" step="0.5" value="0" @input="change(axis, 'translation')" @focusout="focusout(axis, 'translation');save()" @mousedown="start()">
<numeric-input class="tool disp_text" v-model.number="slot.translation[axis]" :min="-80" :max="80" :step="0.5" @input="change(axis, 'translation')" @focusout="focusout(axis, 'translation');save()" @mousedown="start()" />
</div>
<div class="bar display_slot_section_bar">
@ -1925,7 +1925,7 @@ Interface.definePanels(function() {
v-bind:max="slot.scale[axis] > 1 ? 4 : 2"
step="0.01"
value="0" @input="change(axis, 'scale')" @mousedown="start(axis, 'scale')" @change="save(axis, 'scale')">
<input type="number" class="tool disp_text" v-model.number="slot.scale[axis]" min="0" max="4" step="0.01" value="0" @input="change(axis, 'scale')" @focusout="focusout(axis, 'scale');save()" @mousedown="start()">
<numeric-input class="tool disp_text" v-model.number="slot.scale[axis]" :min="0" :max="4" :step="0.01" @input="change(axis, 'scale')" @focusout="focusout(axis, 'scale');save()" @mousedown="start()" />
</div>
<template v-if="reference_model == 'player'">
@ -1934,8 +1934,8 @@ Interface.definePanels(function() {
</div>
<div class="bar slider_input_combo">
<input type="range" class="tool disp_range" v-model.number="pose_angle"
min="-180" max="180" step="1" value="0">
<input lang="en" type="number" class="tool disp_text" v-model.number="pose_angle" min="-180" max="180" step="0.5">
min="-180" max="180" step="1" >
<numeric-input class="tool disp_text" v-model.number="pose_angle" :min="-180" :max="180" :step="0.5" />
</div>
</template>
</div>

10
js/interface/settings.js
View File

@ -408,7 +408,9 @@ const Settings = {
}});
//Preview
new Setting('brightness', {category: 'preview', value: 50, type: 'number', min: 0, max: 400});
new Setting('brightness', {category: 'preview', value: 50, type: 'number', min: 0, max: 400, onChange() {
Canvas.updateShading();
}});
new Setting('shading', {category: 'preview', value: true, onChange() {
Canvas.updateShading()
}});
@ -619,9 +621,7 @@ const Settings = {
Canvas.buildGrid()
}
Canvas.outlineMaterial.depthTest = !settings.seethrough_outline.value
if (hasSettingChanged('brightness')) {
Canvas.updateShading()
}
for (var id in settings) {
var setting = settings[id];
if (!Condition(setting.condition)) continue;
@ -949,7 +949,7 @@ onVueSetup(function() {
</div>
<template v-if="setting.type === 'number'">
<div class="setting_element"><input type="number" v-model.number="setting.ui_value" :min="setting.min" :max="setting.max" :step="setting.step" v-on:input="saveSettings()"></div>
<div class="setting_element"><numeric-input v-model.number="setting.ui_value" :min="setting.min" :max="setting.max" :step="setting.step" v-on:input="saveSettings()" /></div>
</template>
<template v-else-if="setting.type === 'click'">
<div class="setting_element setting_icon" v-html="getIconNode(setting.icon).outerHTML"></div>

56
js/interface/vue_components.js
View File

@ -80,3 +80,59 @@ Vue.component('select-input', {
</bb-select>
`
})
Vue.component('numeric-input', {
props: {
value: Number,
min: Number,
max: Number,
step: Number,
},
data() {return {
string_value: (this.value||0).toString(),
resolved_value: (this.value||0)
}},
watch: {
value(v) {
if (this.resolved_value != v) {
this.string_value = trimFloatNumber(v, 10);
this.resolved_value = v;
}
}
},
methods: {
change(value) {
this.string_value = typeof value == 'number' ? trimFloatNumber(value) : value;
this.resolved_value = Math.clamp(NumSlider.MolangParser.parse(this.string_value), this.min, this.max);
this.$emit('input', this.resolved_value);
},
slide(e1) {
convertTouchEvent(e1);
let last_difference = 0;
let move = e2 => {
convertTouchEvent(e2);
let difference = Math.trunc((e2.clientX - e1.clientX) / 10) * (this.step || 1);
if (difference != last_difference) {
let value = Math.clamp((parseFloat(this.value) || 0) + (difference - last_difference), this.min, this.max);
this.change(value);
last_difference = difference;
}
}
let stop = e2 => {
removeEventListeners(document, 'mousemove touchmove', move);
removeEventListeners(document, 'mouseup touchend', stop);
}
addEventListeners(document, 'mousemove touchmove', move);
addEventListeners(document, 'mouseup touchend', stop);
},
resolve() {
this.string_value = trimFloatNumber(this.resolved_value, 10);
}
},
template: `
<div class="numeric_input">
<input class="dark_bordered focusable_input" :value="string_value" @input="change($event.target.value)" inputmode="decimal" lang="en" @focusout="resolve($event)" @dblclick="resolve($event)">
<div class="tool numeric_input_slider" @mousedown="slide($event)" @touchstart="slide($event)"><i class="material-icons">code</i></div>
</div>
`
})

15
js/predicate_editor.js
View File

@ -160,9 +160,9 @@ const PredicateOverrideEditor = {
if (data.type == 'checkbox') {
override.predicate[key] = event.target.checked ? 1 : 0;
} else if (data.type == 'int') {
override.predicate[key] = parseInt(event.target.value);
override.predicate[key] = typeof event == 'number' ? Math.floor(event) : parseInt(event.target.value);
} else {
override.predicate[key] = parseFloat(event.target.value);
override.predicate[key] = typeof event == 'number' ? event : parseFloat(event.target.value);
}
},
removePredicate(override, key) {
@ -270,13 +270,12 @@ const PredicateOverrideEditor = {
<select-input :value="key" @input="changePredicateType(override, $event, value, key)" :options="available_predicate_options" />
<input type="checkbox" :checked="value > 0" @input="changePredicateValue(override, key, $event)" v-if="predicate_options[key] && predicate_options[key].type == 'checkbox'">
<input type="number" v-else
min="0"
<numeric-input v-else
:min="0"
:max="predicate_options[key] && predicate_options[key].type == 'peronetage' ? 1 : undefined"
:step="predicate_options[key] && predicate_options[key].type == 'int' ? 1 : undefined"
:value="value" @input="changePredicateValue(override, key, $event)"
class="dark_bordered"
>
/>
</li>
<div class="tool" @click="addPredicate(override)" v-if="hasMultiplePredicates(override)">
@ -312,11 +311,11 @@ const PredicateOverrideEditor = {
<select-input v-model="generator.type" :options="available_predicate_options" @input="updateGeneratorType()" />
<label>${tl('dialog.predicate_overrides.variants')}</label>
<input type="number" v-model.number="generator.variants" class="dark_bordered" min="1" step="1" style="width: 70px;">
<numeric-input v-model.number="generator.variants" class="dark_bordered" min="1" step="1" style="width: 70px;" />
<template v-if="generator.type == 'custom_model_data'">
<label>${tl('dialog.predicate_overrides.start_value')}</label>
<input type="number" v-model.number="generator.start_value" min="0" step="1" class="dark_bordered" style="width: 45px;">
<numeric-input v-model.number="generator.start_value" min="0" step="1" class="dark_bordered" style="width: 45px;" />
</template>
<label>${tl('dialog.predicate_overrides.model')}</label>

20
js/texturing/edit_texture.js
View File

@ -85,12 +85,12 @@ BARS.defineActions(function() {
</div>
<div class="tool texture_adjust_preview_toggle" @click="togglePreview()"><i class="material-icons">{{ show_preview ? 'expand_more' : 'expand_less' }}</i></div>
<div class="bar slider_input_combo">
<input type="range" class="tool" min="0" max="200" step="1" v-model="brightness" @input="change()">
<input lang="en" type="number" class="tool" min="0" max="200" step="1" v-model.number="brightness" @input="change()">
<input type="range" class="tool" min="0" max="200" step="1" v-model.number="brightness" @input="change()">
<numeric-input class="tool" :min="0" :max="200" :step="1" v-model.number="brightness" @input="change()" />
</div>
<div class="bar slider_input_combo">
<input type="range" class="tool" min="0" max="200" step="1" v-model="contrast" @input="change()">
<input lang="en" type="number" class="tool" min="0" max="200" step="1" v-model.number="contrast" @input="change()">
<input type="range" class="tool" min="0" max="200" step="1" v-model.number="contrast" @input="change()">
<numeric-input class="tool" :min="0" :max="200" :step="1" v-model.number="contrast" @input="change()" />
</div>
<div class="bar button_bar_checkbox">
<input type="checkbox" v-model="preview_changes" id="checkbox_preview_changes" @change="change()">
@ -173,12 +173,12 @@ BARS.defineActions(function() {
</div>
<div class="tool texture_adjust_preview_toggle" @click="togglePreview()"><i class="material-icons">{{ show_preview ? 'expand_more' : 'expand_less' }}</i></div>
<div class="bar slider_input_combo">
<input type="range" class="tool" min="0" max="200" step="1" v-model="saturation" @input="change()">
<input lang="en" type="number" class="tool" min="0" max="200" step="1" v-model.number="saturation" @input="change()">
<input type="range" class="tool" min="0" max="200" step="1" v-model.number="saturation" @input="change()">
<numeric-input class="tool" :min="0" :max="200" :step="1" v-model.number="saturation" @input="change()" />
</div>
<div class="bar slider_input_combo">
<input type="range" class="tool" min="-180" max="180" step="1" v-model="hue" @input="change()">
<input lang="en" type="number" class="tool" min="-180" max="180" step="1" v-model.number="hue" @input="change()">
<input type="range" class="tool" min="-180" max="180" step="1" v-model.number="hue" @input="change()">
<numeric-input class="tool" :min="-180" :max="180" :step="1" v-model.number="hue" @input="change()" />
</div>
<div class="bar button_bar_checkbox">
<input type="checkbox" v-model="preview_changes" id="checkbox_preview_changes" @change="change()">
@ -542,8 +542,8 @@ BARS.defineActions(function() {
</div>
<div class="tool texture_adjust_preview_toggle" @click="togglePreview()"><i class="material-icons">{{ show_preview ? 'expand_more' : 'expand_less' }}</i></div>
<div class="bar slider_input_combo">
<input type="range" class="tool" min="0" max="200" step="0.1" v-model="opacity" @input="change()">
<input lang="en" type="number" class="tool" style="width: 64px;" min="0" max="200" step="0.1" v-model.number="opacity" @input="change()">
<input type="range" class="tool" min="0" max="200" step="0.1" v-model.number="opacity" @input="change()">
<numeric-input class="tool" style="width: 64px;" :min="0" :max="200" :step="0.1" v-model.number="opacity" @input="change()" />
</div>
<div class="bar button_bar_checkbox">
<input type="checkbox" v-model="preview_changes" id="checkbox_preview_changes" @change="change()">

4
lang/en.json
View File

@ -1860,8 +1860,8 @@
"reference_image.layer.float": "Above Interface",
"reference_image.layer.blueprint": "Locked Blueprint",
"reference_image.scope": "Scope",
"reference_image.scope.project": "Save per project",
"reference_image.scope.global": "Save in Blockbench",
"reference_image.scope.project": "Just this project",
"reference_image.scope.global": "All projects",
"codec.fbx.export_animations": "Export Animations",