Keyframe data points stuff
This commit is contained in:
parent
3ebf9efff7
commit
031d21246a
@ -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();
|
||||
|
@ -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>
|
||||
|
Loading…
x
Reference in New Issue
Block a user