Skip to content

Commit

Permalink
[project-s] データ構造の整理とリファクタリング (#1625)
Browse files Browse the repository at this point in the history
  • Loading branch information
@sigprogramming
sigprogramming authored Oct 28, 2023
1 parent 0def6f0 commit 1c727ea
Show file tree
Hide file tree
Showing 10 changed files with 255 additions and 281 deletions.
13 changes: 6 additions & 7 deletions src/components/Sing/CharacterMenuButton.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -185,7 +185,7 @@ export default defineComponent({
`No engineId for target character style (speakerUuid == ${speakerUuid}, styleId == ${styleId})`
);
store.dispatch("SET_SINGER", { engineId, styleId });
store.dispatch("SET_SINGER", { singer: { engineId, styleId } });
};
const getDefaultStyle = (speakerUuid: string) => {
Expand All @@ -210,13 +210,12 @@ export default defineComponent({
const selectedCharacterInfo = computed(() => {
if (
userOrderedCharacterInfos.value === undefined ||
store.state.engineId === undefined ||
store.state.styleId === undefined
store.state.singer === undefined
)
return undefined;
return store.getters.CHARACTER_INFO(
store.state.engineId,
store.state.styleId
store.state.singer.engineId,
store.state.singer.styleId
);
});
Expand All @@ -228,8 +227,8 @@ export default defineComponent({
() =>
selectedCharacterInfo.value?.metas.styles.find(
(style) =>
style.styleId === store.state.styleId &&
style.engineId === store.state.engineId
style.styleId === store.state.singer?.styleId &&
style.engineId === store.state.singer?.engineId
)?.styleId
);
Expand Down
54 changes: 7 additions & 47 deletions src/components/Sing/ScoreSequencer.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -171,32 +171,13 @@ export default defineComponent({
const dragMoveCurrentY = ref();
const dragDurationCurrentX = ref();
// 分解能（Ticks Per Quarter Note）
const tpqn = computed(() => state.score?.tpqn ?? 480);
const tpqn = computed(() => state.score.tpqn);
// ノート
const notes = computed(() => state.score?.notes ?? []);
const notes = computed(() => state.score.notes);
// テンポ
const tempos = computed(() => {
return (
state.score?.tempos ?? [
{
position: 0,
tempo: 120,
},
]
);
});
const tempos = computed(() => state.score.tempos);
// 拍子
const timeSignatures = computed(() => {
return (
state.score?.timeSignatures ?? [
{
measureNumber: 1,
beats: 4,
beatType: 4,
},
]
);
});
const timeSignatures = computed(() => state.score.timeSignatures);
// ズーム状態
const zoomX = computed(() => state.sequencerZoomX);
const zoomY = computed(() => state.sequencerZoomY);
Expand Down Expand Up @@ -314,9 +295,6 @@ export default defineComponent({
// ドラッグでのノートの移動
const dragMove = () => {
if (!state.score) {
throw new Error("Score is undefined.");
}
if (dragMode.value !== DragMode.MOVE) {
cancelAnimationFrame(dragId.value);
return;
Expand Down Expand Up @@ -345,7 +323,7 @@ export default defineComponent({
// 選択中のノートのpositionとnoteNumberを変更
let isNotesChanged = false;
const newNotes = [...state.score.notes].map((note) => {
const newNotes = state.score.notes.map((note) => {
if (selectedNoteIds.value.includes(note.id)) {
if (amountPositionX === 0 && amountPositionY === 0) {
return note;
Expand Down Expand Up @@ -389,17 +367,14 @@ export default defineComponent({
// ノート右ドラッグ
// FIXME: 左右ドラッグロジックを統一する
const dragRight = () => {
if (!state.score) {
throw new Error("Score is undefined.");
}
if (dragMode.value !== DragMode.NOTE_RIGHT) {
cancelAnimationFrame(dragId.value);
return;
}
const distanceX = cursorX.value - dragDurationCurrentX.value;
if (snapWidth.value <= Math.abs(distanceX)) {
let isNotesChanged = false;
const newNotes = [...state.score.notes].map((note) => {
const newNotes = state.score.notes.map((note) => {
if (selectedNoteIds.value.includes(note.id)) {
const duration =
note.duration +
Expand Down Expand Up @@ -441,17 +416,14 @@ export default defineComponent({
// ノート左ドラッグ
// FIXME: 左右ドラッグロジックを統一する
const dragLeft = () => {
if (!state.score) {
throw new Error("Score is undefined.");
}
if (dragMode.value !== DragMode.NOTE_LEFT) {
cancelAnimationFrame(dragId.value);
return;
}
const distanceX = cursorX.value - dragDurationCurrentX.value;
if (snapWidth.value <= Math.abs(distanceX)) {
let isNotesChanged = false;
const newNotes = [...state.score.notes].map((note) => {
const newNotes = state.score.notes.map((note) => {
if (selectedNoteIds.value.includes(note.id)) {
const position =
note.position +
Expand Down Expand Up @@ -516,9 +488,6 @@ export default defineComponent({
// キーボードイベント
const handleNotesArrowUp = () => {
if (!state.score) {
throw new Error("Score is undefined.");
}
const newNotes = state.score.notes.map((note) => {
if (selectedNoteIds.value.includes(note.id)) {
const noteNumber = Math.min(note.noteNumber + 1, 127);
Expand All @@ -537,9 +506,6 @@ export default defineComponent({
};
const handleNotesArrowDown = () => {
if (!state.score) {
throw new Error("Score is undefined.");
}
const newNotes = state.score.notes.map((note) => {
if (selectedNoteIds.value.includes(note.id)) {
const noteNumber = Math.max(note.noteNumber - 1, 0);
Expand All @@ -558,9 +524,6 @@ export default defineComponent({
};
const handleNotesArrowRight = () => {
if (!state.score) {
throw new Error("Score is undefined.");
}
const newNotes = state.score.notes.map((note) => {
if (selectedNoteIds.value.includes(note.id)) {
const position = note.position + snapTicks.value;
Expand All @@ -576,9 +539,6 @@ export default defineComponent({
};
const handleNotesArrowLeft = () => {
if (!state.score) {
throw new Error("Score is undefined.");
}
const newNotes = state.score.notes.map((note) => {
if (selectedNoteIds.value.includes(note.id)) {
const position = note.position - snapTicks.value;
Expand Down
2 changes: 1 addition & 1 deletion src/components/Sing/SequencerNote.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ export default defineComponent({
setup(props, { emit }) {
const store = useStore();
const state = store.state;
const tpqn = computed(() => state.score?.tpqn ?? 480);
const tpqn = computed(() => state.score.tpqn);
const zoomX = computed(() => state.sequencerZoomX);
const zoomY = computed(() => state.sequencerZoomY);
const positionX = computed(() => {
Expand Down
14 changes: 8 additions & 6 deletions src/components/Sing/SingerPanel.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,16 +31,18 @@ export default defineComponent({
);
const characterInfo = computed(() => {
const engineId = store.state.engineId;
const styleId = store.state.styleId;
if (userOrderedCharacterInfos.value === undefined) return undefined;
if (engineId === undefined || styleId === undefined) return undefined;
return store.getters.CHARACTER_INFO(engineId, styleId);
if (!userOrderedCharacterInfos.value || !store.state.singer) {
return undefined;
}
return store.getters.CHARACTER_INFO(
store.state.singer.engineId,
store.state.singer.styleId
);
});
const characterName = computed(() => {
const style = characterInfo.value?.metas.styles.find(
(style) => style.styleId === store.state.styleId
(style) => style.styleId === store.state.singer?.styleId
);
return style?.styleName
? `${characterInfo.value?.metas.speakerName} (${style?.styleName})`
Expand Down
81 changes: 39 additions & 42 deletions src/components/Sing/ToolBar.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,11 +33,11 @@
<div class="sing-playback-position">{{ playbackPositionStr }}</div>
<q-input
type="number"
:model-value="tempoInputBuffer"
:model-value="bpmInputBuffer"
dense
hide-bottom-space
class="sing-tempo"
@update:model-value="setTempoInputBuffer"
@update:model-value="setBpmInputBuffer"
@change="setTempo"
>
<template #prepend>
Expand Down Expand Up @@ -110,35 +110,35 @@ export default defineComponent({
const userOrderedCharacterInfos = computed(
() => store.getters.USER_ORDERED_CHARACTER_INFOS
);
const selectedCharacterInfo = computed(() =>
userOrderedCharacterInfos.value !== undefined &&
store.state.engineId !== undefined &&
store.state.styleId !== undefined
? store.getters.CHARACTER_INFO(
store.state.engineId,
store.state.styleId
)
: undefined
);
const selectedStyleIconPath = computed(
() =>
selectedCharacterInfo.value?.metas.styles.find(
(style) =>
style.styleId === store.state.styleId &&
style.engineId === store.state.engineId
)?.iconPath
);
const selectedCharacterInfo = computed(() => {
if (!userOrderedCharacterInfos.value || !store.state.singer) {
return undefined;
}
return store.getters.CHARACTER_INFO(
store.state.singer.engineId,
store.state.singer.styleId
);
});
const selectedStyleIconPath = computed(() => {
const styles = selectedCharacterInfo.value?.metas.styles;
return styles?.find((style) => {
return (
style.styleId === store.state.singer?.styleId &&
style.engineId === store.state.singer?.engineId
);
})?.iconPath;
});
const tempoInputBuffer = ref(0);
const bpmInputBuffer = ref(0);
const beatsInputBuffer = ref(0);
const beatTypeInputBuffer = ref(0);
const setTempoInputBuffer = (tempoStr: string | number | null) => {
const tempo = Number(tempoStr);
if (!Number.isFinite(tempo) || tempo <= 0) {
const setBpmInputBuffer = (bpmStr: string | number | null) => {
const bpm = Number(bpmStr);
if (!Number.isFinite(bpm) || bpm <= 0) {
return;
}
tempoInputBuffer.value = tempo;
bpmInputBuffer.value = bpm;
};
const setBeatsInputBuffer = (beatsStr: string | number | null) => {
const beats = Number(beatsStr);
Expand All @@ -158,10 +158,7 @@ export default defineComponent({
const playPos = ref(0);
const playbackPositionStr = computed(() => {
let playTime = 0;
if (store.state.score) {
playTime = store.getters.TICK_TO_SECOND(playPos.value);
}
const playTime = store.getters.TICK_TO_SECOND(playPos.value);
const intPlayTime = Math.floor(playTime);
const min = Math.floor(intPlayTime / 60);
Expand All @@ -173,22 +170,22 @@ export default defineComponent({
return `${minStr}:${secStr}.${milliSecStr}`;
});
const tempos = computed(() => store.state.score?.tempos);
const timeSignatures = computed(() => store.state.score?.timeSignatures);
const tempos = computed(() => store.state.score.tempos);
const timeSignatures = computed(() => store.state.score.timeSignatures);
const nowPlaying = computed(() => store.state.nowPlaying);
watch(
tempos,
() => {
tempoInputBuffer.value = tempos.value?.[0].tempo ?? 0;
bpmInputBuffer.value = tempos.value[0].bpm;
},
{ deep: true }
);
watch(
timeSignatures,
() => {
beatsInputBuffer.value = timeSignatures.value?.[0].beats ?? 0;
beatTypeInputBuffer.value = timeSignatures.value?.[0].beatType ?? 0;
beatsInputBuffer.value = timeSignatures.value[0].beats;
beatTypeInputBuffer.value = timeSignatures.value[0].beatType;
},
{ deep: true }
);
Expand All @@ -209,12 +206,12 @@ export default defineComponent({
});
const setTempo = async () => {
const tempo = tempoInputBuffer.value;
if (tempo === 0) return;
const bpm = bpmInputBuffer.value;
if (bpm === 0) return;
await store.dispatch("SET_TEMPO", {
tempo: {
position: 0,
tempo: tempo,
bpm,
},
});
};
Expand All @@ -226,8 +223,8 @@ export default defineComponent({
await store.dispatch("SET_TIME_SIGNATURE", {
timeSignature: {
measureNumber: 1,
beats: beats,
beatType: beatType,
beats,
beatType,
},
});
};
Expand Down Expand Up @@ -255,7 +252,7 @@ export default defineComponent({
});
const snapTypeSelectOptions = computed(() => {
const tpqn = store.state.score?.tpqn ?? 480;
const tpqn = store.state.score.tpqn;
return getSnapTypes(tpqn)
.sort((a, b) => {
if (isTriplet(a) === isTriplet(b)) {
Expand Down Expand Up @@ -292,10 +289,10 @@ export default defineComponent({
isShowSinger,
toggleShowSinger,
selectedStyleIconPath,
tempoInputBuffer,
bpmInputBuffer,
beatsInputBuffer,
beatTypeInputBuffer,
setTempoInputBuffer,
setBpmInputBuffer,
setBeatsInputBuffer,
setBeatTypeInputBuffer,
setTempo,
Expand Down
Loading

0 comments on commit 1c727ea

Please sign in to comment.