Uniform scale keyframe editing

This commit is contained in:
JannisX11 2021-06-08 20:44:51 +02:00
parent a0104271cb
commit 103a2f37dc
2 changed files with 64 additions and 28 deletions

View File

@ -831,6 +831,7 @@ Interface.definePanels(function() {
components: {VuePrismEditor},
data() { return {
keyframes: Timeline.selected,
uniform_scale: true,
channel_colors: {
x: 'color_x',
y: 'color_y',
@ -839,7 +840,13 @@ Interface.definePanels(function() {
}},
methods: {
updateInput(axis, value, data_point) {
updateKeyframeValue(axis, value, data_point)
if (axis == 'uniform') {
updateKeyframeValue('x', value, data_point);
updateKeyframeValue('y', value, data_point);
updateKeyframeValue('z', value, data_point);
} else {
updateKeyframeValue(axis, value, data_point);
}
},
getKeyframeInfos() {
let list = [tl('timeline.'+this.channel)];
@ -906,6 +913,14 @@ Interface.definePanels(function() {
<div id="keyframe_type_label">
<label>{{ tl('panel.keyframe.type', [getKeyframeInfos()]) }}</label>
<div
class="in_list_button"
v-if="channel == 'scale'"
v-on:click.stop="uniform_scale = !uniform_scale"
title="${ tl('panel.keyframe.toggle_uniform_scale') }"
>
<i class="material-icons">{{ uniform_scale ? 'calendar_view_day' : 'view_list' }}</i>
</div>
<div
class="in_list_button"
v-if="(keyframes[0].transform && keyframes[0].data_points.length <= 1) || channel == 'particle' || channel == 'sound'"
@ -928,33 +943,53 @@ Interface.definePanels(function() {
</div>
</div>
<div
v-for="(property, key) in data_point.constructor.properties"
v-if="property.exposed != false && Condition(property.condition, data_point)"
class="bar flex"
:id="'keyframe_bar_' + property.name"
>
<label :class="[channel_colors[key]]" :style="{'font-weight': channel_colors[key] ? 'bolder' : 'unset'}">{{ property.label }}</label>
<vue-prism-editor
v-if="property.type == 'molang'"
class="molang_input dark_bordered keyframe_input tab_target"
v-model="data_point[key+'_string']"
@change="updateInput(key, $event, data_point_i)"
@focus="focusAxis(key)"
language="molang"
ignoreTabKey="true"
:line-numbers="false"
/>
<input
v-else
type="text"
class="dark_bordered code keyframe_input tab_target"
v-model="data_point[key]"
:list="key == 'locator' && 'locator_suggestion_list'"
@focus="key == 'locator' && updateLocatorSuggestionList()"
@input="updateInput(key, $event.target.value, data_point_i)"
/>
</div>
<template v-if="uniform_scale && data_point.x_string == data_point.y_string && data_point.y_string == data_point.z_string">
<div
class="bar flex"
id="keyframe_bar_uniform_scale"
>
<label>${ tl('generic.all') }</label>
<vue-prism-editor
class="molang_input dark_bordered keyframe_input tab_target"
v-model="data_point['x_string']"
@change="updateInput('uniform', $event, data_point_i)"
language="molang"
ignoreTabKey="true"
:line-numbers="false"
/>
</div>
</template>
<template v-else>
<div
v-for="(property, key) in data_point.constructor.properties"
v-if="property.exposed != false && Condition(property.condition, data_point)"
class="bar flex"
:id="'keyframe_bar_' + property.name"
>
<label :class="[channel_colors[key]]" :style="{'font-weight': channel_colors[key] ? 'bolder' : 'unset'}">{{ property.label }}</label>
<vue-prism-editor
v-if="property.type == 'molang'"
class="molang_input dark_bordered keyframe_input tab_target"
v-model="data_point[key+'_string']"
@change="updateInput(key, $event, data_point_i)"
@focus="focusAxis(key)"
language="molang"
ignoreTabKey="true"
:line-numbers="false"
/>
<input
v-else
type="text"
class="dark_bordered code keyframe_input tab_target"
v-model="data_point[key]"
:list="key == 'locator' && 'locator_suggestion_list'"
@focus="key == 'locator' && updateLocatorSuggestionList()"
@input="updateInput(key, $event.target.value, data_point_i)"
/>
</div>
</template>
</div>
</ul>
</template>

View File

@ -1285,6 +1285,7 @@
"panel.animations": "Animations",
"panel.keyframe": "Keyframe",
"panel.keyframe.type": "Keyframe (%0)",
"panel.keyframe.toggle_uniform_scale": "Toggle Uniform Scale",
"panel.keyframe.add_data_point": "Add Keyframe Data Point",
"panel.keyframe.remove_data_point": "Remove Data Point",
"panel.keyframe.pre": "Pre",