Keyframe data points stuff

This commit is contained in:
JannisX11 2020-09-20 23:03:28 +02:00
parent 3ebf9efff7
commit 031d21246a
2 changed files with 57 additions and 37 deletions

View File

@ -5,6 +5,8 @@ class Keyframe {
this.time = 0;
this.color = -1;
this.selected = 0;
this.data_points = [{}]
/*
this.x = '0';
this.y = '0';
this.z = '0';
@ -15,15 +17,28 @@ class Keyframe {
this.locator = '';
this.script = '';
this.instructions = '';
*/
this.uuid = (uuid && isUUID(uuid)) ? uuid : guid();
if (typeof data === 'object') {
Merge.string(this, data, 'channel')
this.transform = this.channel === 'rotation' || this.channel === 'position' || this.channel === 'scale';
this.extend(data)
if (this.channel === 'scale' && data.x == undefined && data.y == undefined && data.z == undefined) {
this.x = this.y = this.z = 1;
}
}
/** POS FX
* points |1 |-1
* instances |0 |1
* entries |0 |1
* parts |0 |1
* versions |0 |0
* variants |0 |0
* variations |1 |0
* sides |1 |1
*/
}
extend(data) {
Merge.number(this, data, 'time')
@ -75,18 +90,20 @@ class Keyframe {
calc(axis) {
return Molang.parse(this[axis])
}
set(axis, value) {
this[axis] = value;
set(axis, value, data_point = 0) {
if (this.data_points[data_point]) {
this.data_points[data_point][axis] = value;
}
return this;
}
offset(axis, amount) {
offset(axis, amount, data_point = 0) {
var value = this.get(axis)
if (!value || value === '0') {
this.set(axis, amount)
this.set(axis, amount, data_point)
return amount;
}
if (typeof value === 'number') {
this.set(axis, value+amount)
this.set(axis, value+amount, data_point)
return value+amount
}
var start = value.match(/^-?\s*\d*(\.\d+)?\s*(\+|-)/)
@ -103,7 +120,7 @@ class Keyframe {
value = trimFloatNumber(amount) +(value.substr(0,1)=='-'?'':'+')+ value
}
}
this.set(axis, value)
this.set(axis, value, data_point)
return value;
}
flip(axis) {
@ -127,6 +144,7 @@ class Keyframe {
for (var i = 0; i < 3; i++) {
if (i != axis) {
let l = getAxisLetter(i)
this.data_points.forEach(this.data_points)
this.set(l, negate(this.get(l)))
}
}
@ -345,9 +363,9 @@ class Keyframe {
])
// Misc Functions
function updateKeyframeValue(axis, value) {
function updateKeyframeValue(axis, value, data_point) {
Timeline.selected.forEach(function(kf) {
kf.set(axis, value);
kf.set(axis, value, data_point);
})
if (!['effect', 'locator', 'script'].includes(axis)) {
Animator.preview();

View File

@ -408,7 +408,7 @@ function setupPanels() {
methods: {
updateInput(axis, value) {
console.log(this.keyframes[0].x)
updateKeyframeValue(axis, value)
updateKeyframeValue(data_point, axis, value)
},
getKeyframeInfos() {
let list = [tl('timeline.'+this.channel)];
@ -439,36 +439,38 @@ function setupPanels() {
<template v-if="channel != false">
<p id="keyframe_type_label">{{ tl('panel.keyframe.type', [getKeyframeInfos()]) }}</p>
<div v-for="data_point of keyframe[0].data_points">
<p id="keyframe_type_label">{{ tl('panel.keyframe.type', [getKeyframeInfos()]) }}</p>
<div class="bar flex" id="keyframe_bar_x" v-if="keyframes[0].animator instanceof BoneAnimator">
<label class="color_x" style="font-weight: bolder">X</label>
<vue-prism-editor class="molang_input dark_bordered keyframe_input tab_target" :value="keyframes[0].x.toString()" v-model="keyframes[0].x" @change="updateInput('x', $event)" language="molang" :line-numbers="false" />
</div>
<div class="bar flex" id="keyframe_bar_y" v-if="keyframes[0].animator instanceof BoneAnimator">
<label class="color_y" style="font-weight: bolder">Y</label>
<vue-prism-editor class="molang_input dark_bordered keyframe_input tab_target" :value="keyframes[0].y.toString()" v-model="keyframes[0].y" @change="updateInput('y', $event)" language="molang" :line-numbers="false" />
</div>
<div class="bar flex" id="keyframe_bar_z" v-if="keyframes[0].animator instanceof BoneAnimator">
<label class="color_z" style="font-weight: bolder">Z</label>
<vue-prism-editor class="molang_input dark_bordered keyframe_input tab_target" :value="keyframes[0].z.toString()" v-model="keyframes[0].z" @change="updateInput('z', $event)" language="molang" :line-numbers="false" />
</div>
<div class="bar flex" id="keyframe_bar_x" v-if="data_point.animator instanceof BoneAnimator">
<label class="color_x" style="font-weight: bolder">X</label>
<vue-prism-editor class="molang_input dark_bordered keyframe_input tab_target" :value="data_point.x.toString()" v-model="data_point.x" @change="updateInput('x', $event)" language="molang" :line-numbers="false" />
</div>
<div class="bar flex" id="keyframe_bar_y" v-if="data_point.animator instanceof BoneAnimator">
<label class="color_y" style="font-weight: bolder">Y</label>
<vue-prism-editor class="molang_input dark_bordered keyframe_input tab_target" :value="data_point.y.toString()" v-model="data_point.y" @change="updateInput('y', $event)" language="molang" :line-numbers="false" />
</div>
<div class="bar flex" id="keyframe_bar_z" v-if="data_point.animator instanceof BoneAnimator">
<label class="color_z" style="font-weight: bolder">Z</label>
<vue-prism-editor class="molang_input dark_bordered keyframe_input tab_target" :value="data_point.z.toString()" v-model="data_point.z" @change="updateInput('z', $event)" language="molang" :line-numbers="false" />
</div>
<div class="bar flex" id="keyframe_bar_effect" v-if="channel == 'particle' || channel == 'sound'">
<label>{{ tl('data.effect') }}</label>
<input type="text" class="dark_bordered code keyframe_input tab_target" v-model="keyframes[0].effect" @input="updateInput('effect', $event)">
</div>
<div class="bar flex" id="keyframe_bar_locator" v-if="channel == 'particle'">
<label>{{ tl('data.locator') }}</label>
<input @focus="focus()" @focusout="focusout()" type="text" class="dark_bordered code keyframe_input tab_target" v-model="keyframes[0].locator" @input="updateInput('locator', $event)">
</div>
<div class="bar flex" id="keyframe_bar_script" v-if="channel == 'particle'">
<label>{{ tl('timeline.pre_effect_script') }}</label>
<vue-prism-editor class="molang_input dark_bordered keyframe_input tab_target" v-model="keyframes[0].script" @change="updateInput('script', $event)" language="molang" :line-numbers="false" />
</div>
<div class="bar" id="keyframe_bar_instructions" v-if="channel == 'timeline'">
<label>{{ tl('timeline.timeline') }}</label>
<vue-prism-editor class="molang_input dark_bordered keyframe_input tab_target" v-model="keyframes[0].instructions" @change="updateInput('instructions', $event)" language="molang" :line-numbers="false" />
<div class="bar flex" id="keyframe_bar_effect" v-if="channel == 'particle' || channel == 'sound'">
<label>{{ tl('data.effect') }}</label>
<input type="text" class="dark_bordered code keyframe_input tab_target" v-model="data_point.effect" @input="updateInput('effect', $event)">
</div>
<div class="bar flex" id="keyframe_bar_locator" v-if="channel == 'particle'">
<label>{{ tl('data.locator') }}</label>
<input @focus="focus()" @focusout="focusout()" type="text" class="dark_bordered code keyframe_input tab_target" v-model="data_point.locator" @input="updateInput('locator', $event)">
</div>
<div class="bar flex" id="keyframe_bar_script" v-if="channel == 'particle'">
<label>{{ tl('timeline.pre_effect_script') }}</label>
<vue-prism-editor class="molang_input dark_bordered keyframe_input tab_target" v-model="data_point.script" @change="updateInput('script', $event)" language="molang" :line-numbers="false" />
</div>
<div class="bar" id="keyframe_bar_instructions" v-if="channel == 'timeline'">
<label>{{ tl('timeline.timeline') }}</label>
<vue-prism-editor class="molang_input dark_bordered keyframe_input tab_target" v-model="data_point.instructions" @change="updateInput('instructions', $event)" language="molang" :line-numbers="false" />
</div>
</div>
</template>
</div>