fix: restores tween data correctly when focusing other inputs (#837)

vcync · Apr 7, 2023 · aa4a3d5 · aa4a3d5
1 parent fbfff08
commit aa4a3d5
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 7 deletions.
diff --git a/src/components/Controls/TweenControl.vue b/src/components/Controls/TweenControl.vue
@@ -10,7 +10,7 @@
  <c span="2">
  <Select
  :class="color"
- v-model.number="modelEasing"
+ v-model="modelEasing"
  :disabled="!!modelSteps"
  @input="updateValue"
  >
@@ -34,7 +34,13 @@
  </c>
 
  <c span="1+1">Use BPM</c>
- <c><Checkbox :class="color" v-model="modelUseBpm" @input="updateValue"/></c>
+ <c
+ ><Checkbox
+ :class="color"
+ v-model="modelUseBpm"
+ @input="updateValue"
+ emitBoolean
+ /></c>
 
  <c span="1+1"><label :for="`${111}-bpmDivision`">BPM Division</label></c>
  <c span="2">
@@ -91,7 +97,7 @@ export default {
  modelData: "",
  modelDuration: 1000,
  modelEasing: "linear",
- useBpm: true,
+ modelUseBpm: true,
  modelBpmDivision: 32,
  modelDurationAsTotalTime: false,
  modelSteps: 0
@@ -100,7 +106,7 @@ export default {
 
  created() {
  if (this.value) {
- this.modelData = JSON.stringify(this.value.data);
+ this.setDefaultData(this.value);
  }
  },
 
@@ -115,7 +121,7 @@ export default {
  const data = this.modelData.length ? JSON.parse(this.modelData) : [];
  const duration = this.modelDuration;
  const easing = this.modelEasing;
- const useBpm = this.useBpm;
+ const useBpm = this.modelUseBpm;
  const bpmDivision = this.modelBpmDivision;
  const durationAsTotalTime = this.modelDurationAsTotalTime;
  const steps = this.modelSteps;
@@ -130,15 +136,45 @@ export default {
  durationAsTotalTime,
  steps
  });
+ },
+
+ setData(value) {
+ this.modelData = value.data && JSON.stringify(value.data);
+ this.modelDuration = value.duration;
+ this.modelEasing = value.easing;
+ this.modelUseBpm = value.useBpm;
+ this.modelBpmDivision = value.bpmDivision;
+ this.modelDurationAsTotalTime = value.durationAsTotalTime;
+ this.modelSteps = value.steps;
+ },
+
+ setDefaultData() {
+ this.setData({
+ data: "",
+ duration: 1000,
+ easing: "linear",
+ useBpm: true,
+ bpmDivision: 32,
+ durationAsTotalTime: false,
+ steps: 0
+ });
  }
  },
 
  watch: {
  "$store.state.bpm"(value) {
- if (this.useBpm) {
+ if (this.modelUseBpm) {
  this.modelDuration = value / this.modelBpmDivision;
  this.updateValue();
  }
+ },
+
+ value(value) {
+ if (!value) {
+ this.setDefaultData();
+ } else {
+ this.setData(value);
+ }
  }
  }
 };

diff --git a/src/components/InputLinkComponents/Tween.vue b/src/components/InputLinkComponents/Tween.vue
@@ -46,7 +46,7 @@ export default {
  async makeLink() {
  const tween = await this.$modV.store.dispatch("dataTypes/createType", {
  type: "tween",
- args: this.localCache
+ args: { id: this.inputId, ...this.localCache }
  });
 
  this.hasLink = await this.$modV.store.dispatch("inputs/createInputLink", {
@@ -62,6 +62,16 @@ export default {
  inputId: this.inputId
  });
  }
+ },
+
+ watch: {
+ inputId() {
+ if (this.hasLink) {
+ this.localCache = this.$modV.store.state.tweens.tweens[this.inputId];
+ } else {
+ this.localCache = null;
+ }
+ }
  }
 };
 </script>