Skip to content

Commit

Permalink
divタグをAudioDetail.vueからAccentPhrase.vueへ移動 (#1588)
Browse files Browse the repository at this point in the history
  • Loading branch information
@thiramisu
thiramisu authored Sep 30, 2023
1 parent 13edc43 commit 3cea9c6
Show file tree
Hide file tree
Showing 2 changed files with 217 additions and 219 deletions.
352 changes: 196 additions & 156 deletions src/components/AccentPhrase.vue
View file
Original file line number Diff line number Diff line change
@@ -1,165 +1,175 @@
<template>
<context-menu :menudata="contextMenudata" />
<!-- スライダーここから -->
<!-- ｱｸｾﾝﾄ項目のスライダー -->
<template v-if="selectedDetail === 'accent'">
<audio-accent
:accent-phrase-index="index"
:accent-phrase="accentPhrase"
:ui-locked="uiLocked"
:shift-key-flag="shiftKeyFlag"
:on-change-accent="changeAccent"
/>
</template>
<!-- ｲﾝﾄﾈｰｼｮﾝ項目のスライダー -->
<template v-if="selectedDetail === 'pitch'">
<div
v-for="(mora, moraIndex) in accentPhrase.moras"
:key="moraIndex"
class="q-mb-sm pitch-cell"
:style="{ 'grid-column': `${moraIndex * 2 + 1} / span 1` }"
>
<audio-parameter
:mora-index="moraIndex"
:value="mora.pitch"
<div
ref="container"
class="mora-table"
:class="[isActive && 'mora-table-focus', uiLocked || 'mora-table-hover']"
@click="$emit('click', index)"
>
<context-menu :menudata="contextMenudata" />
<!-- スライダーここから -->
<!-- ｱｸｾﾝﾄ項目のスライダー -->
<template v-if="selectedDetail === 'accent'">
<audio-accent
:accent-phrase-index="index"
:accent-phrase="accentPhrase"
:ui-locked="uiLocked"
:min="minPitch"
:max="maxPitch"
:disable="mora.pitch == 0.0"
:type="'pitch'"
:clip="false"
:shift-key-flag="shiftKeyFlag"
@change-value="changeMoraData"
:on-change-accent="changeAccent"
/>
</div>
<div v-if="accentPhrase.pauseMora" />
</template>
<!-- 長さ項目のスライダー -->
<template v-if="selectedDetail === 'length'">
<div
v-for="(mora, moraIndex) in accentPhrase.moras"
:key="moraIndex"
class="q-mb-sm pitch-cell"
:style="{ 'grid-column': `${moraIndex * 2 + 1} / span 1` }"
>
<!-- consonant length -->
<audio-parameter
v-if="mora.consonant && mora.consonantLength != undefined"
:mora-index="moraIndex"
:value="mora.consonantLength"
:ui-locked="uiLocked"
:min="minMoraLength"
:max="maxMoraLength"
:step="0.001"
:type="'consonant'"
:clip="true"
:shift-key-flag="shiftKeyFlag"
@change-value="changeMoraData"
@mouse-over="handleLengthHoverText"
/>
<!-- vowel length -->
<audio-parameter
:mora-index="moraIndex"
:value="mora.vowelLength"
:ui-locked="uiLocked"
:min="minMoraLength"
:max="maxMoraLength"
:step="0.001"
:type="'vowel'"
:clip="mora.consonant ? true : false"
:shift-key-flag="shiftKeyFlag"
@change-value="changeMoraData"
@mouse-over="handleLengthHoverText"
/>
</div>
<div
v-if="accentPhrase.pauseMora"
class="q-mb-sm pitch-cell"
:style="{
'grid-column': `${accentPhrase.moras.length * 2 + 1} / span 1`,
}"
>
<!-- pause length -->
<audio-parameter
:mora-index="accentPhrase.moras.length"
:value="accentPhrase.pauseMora.vowelLength"
:ui-locked="uiLocked"
:min="0"
:max="1.0"
:step="0.01"
:type="'pause'"
:shift-key-flag="shiftKeyFlag"
@change-value="changeMoraData"
/>
</div>
</template>
<!-- スライダーここまで -->
<!-- 読みテキスト・アクセント句の分割と結合ここから -->
<template v-for="(mora, moraIndex) in accentPhrase.moras" :key="moraIndex">
<div
class="text-cell"
:class="{
'text-cell-highlighted': isEditableMora(mora.vowel, moraIndex),
}"
:style="{
'grid-column': `${moraIndex * 2 + 1} / span 1`,
}"
@mouseover="handleHoverText(true, moraIndex)"
@mouseleave="handleHoverText(false, moraIndex)"
@click.stop="uiLocked || handleChangeVoicing(mora, moraIndex)"
>
<span class="text-cell-inner">
{{ getHoveredText(mora, moraIndex) }}
</span>
<q-popup-edit
v-if="selectedDetail == 'accent' && !uiLocked"
v-slot="scope"
:model-value="pronunciation"
auto-save
transition-show="none"
transition-hide="none"
@save="handleChangePronounce($event)"
</template>
<!-- ｲﾝﾄﾈｰｼｮﾝ項目のスライダー -->
<template v-if="selectedDetail === 'pitch'">
<div
v-for="(mora, moraIndex) in accentPhrase.moras"
:key="moraIndex"
class="q-mb-sm pitch-cell"
:style="{ 'grid-column': `${moraIndex * 2 + 1} / span 1` }"
>
<audio-parameter
:mora-index="moraIndex"
:value="mora.pitch"
:ui-locked="uiLocked"
:min="minPitch"
:max="maxPitch"
:disable="mora.pitch == 0.0"
:type="'pitch'"
:clip="false"
:shift-key-flag="shiftKeyFlag"
@change-value="changeMoraData"
/>
</div>
<div v-if="accentPhrase.pauseMora" />
</template>
<!-- 長さ項目のスライダー -->
<template v-if="selectedDetail === 'length'">
<div
v-for="(mora, moraIndex) in accentPhrase.moras"
:key="moraIndex"
class="q-mb-sm pitch-cell"
:style="{ 'grid-column': `${moraIndex * 2 + 1} / span 1` }"
>
<q-input
v-model="scope.value"
dense
:input-style="{
width: `${scope.value.length + 1}em`,
minWidth: '50px',
}"
:aria-label="`${index + 1}番目のアクセント区間の読み`"
autofocus
outlined
@keyup.enter="scope.set"
<!-- consonant length -->
<audio-parameter
v-if="mora.consonant && mora.consonantLength != undefined"
:mora-index="moraIndex"
:value="mora.consonantLength"
:ui-locked="uiLocked"
:min="minMoraLength"
:max="maxMoraLength"
:step="0.001"
:type="'consonant'"
:clip="true"
:shift-key-flag="shiftKeyFlag"
@change-value="changeMoraData"
@mouse-over="handleLengthHoverText"
/>
<!-- vowel length -->
<audio-parameter
:mora-index="moraIndex"
:value="mora.vowelLength"
:ui-locked="uiLocked"
:min="minMoraLength"
:max="maxMoraLength"
:step="0.001"
:type="'vowel'"
:clip="mora.consonant ? true : false"
:shift-key-flag="shiftKeyFlag"
@change-value="changeMoraData"
@mouse-over="handleLengthHoverText"
/>
</q-popup-edit>
</div>
<div
v-if="!isLast || moraIndex < accentPhrase.moras.length - 1"
:class="[
'splitter-cell',
{
'splitter-cell-accent': selectedDetail == 'accent',
'splitter-cell-be-split': moraIndex == accentPhrase.moras.length - 1,
'splitter-cell-be-split-pause': accentPhrase.pauseMora,
},
]"
:style="{ 'grid-column': `${moraIndex * 2 + 2} / span 1` }"
@click.stop="uiLocked || toggleAccentPhraseSplit(false, moraIndex)"
/>
</template>
<template v-if="accentPhrase.pauseMora">
<div class="text-cell">
<span class="text-cell-inner">
{{ accentPhrase.pauseMora.text }}
</span>
</div>
<div
class="splitter-cell splitter-cell-be-split splitter-cell-be-split-pause"
@click.stop="uiLocked || toggleAccentPhraseSplit(true)"
/>
</template>
<!-- 読みテキスト・アクセント句の分割と結合ここまで -->
</div>
<div
v-if="accentPhrase.pauseMora"
class="q-mb-sm pitch-cell"
:style="{
'grid-column': `${accentPhrase.moras.length * 2 + 1} / span 1`,
}"
>
<!-- pause length -->
<audio-parameter
:mora-index="accentPhrase.moras.length"
:value="accentPhrase.pauseMora.vowelLength"
:ui-locked="uiLocked"
:min="0"
:max="1.0"
:step="0.01"
:type="'pause'"
:shift-key-flag="shiftKeyFlag"
@change-value="changeMoraData"
/>
</div>
</template>
<!-- スライダーここまで -->
<!-- 読みテキスト・アクセント句の分割と結合ここから -->
<template v-for="(mora, moraIndex) in accentPhrase.moras" :key="moraIndex">
<div
class="text-cell"
:class="{
'text-cell-highlighted': isEditableMora(mora.vowel, moraIndex),
}"
:style="{
'grid-column': `${moraIndex * 2 + 1} / span 1`,
}"
@mouseover="handleHoverText(true, moraIndex)"
@mouseleave="handleHoverText(false, moraIndex)"
@click.stop="uiLocked || handleChangeVoicing(mora, moraIndex)"
>
<span class="text-cell-inner">
{{ getHoveredText(mora, moraIndex) }}
</span>
<q-popup-edit
v-if="selectedDetail == 'accent' && !uiLocked"
v-slot="scope"
:model-value="pronunciation"
auto-save
transition-show="none"
transition-hide="none"
@save="handleChangePronounce($event)"
>
<q-input
v-model="scope.value"
dense
:input-style="{
width: `${scope.value.length + 1}em`,
minWidth: '50px',
}"
:aria-label="`${index + 1}番目のアクセント区間の読み`"
autofocus
outlined
@keyup.enter="scope.set"
/>
</q-popup-edit>
</div>
<div
v-if="!isLast || moraIndex < accentPhrase.moras.length - 1"
:class="[
'splitter-cell',
{
'splitter-cell-accent': selectedDetail == 'accent',
'splitter-cell-be-split':
moraIndex == accentPhrase.moras.length - 1,
'splitter-cell-be-split-pause': accentPhrase.pauseMora,
},
]"
:style="{ 'grid-column': `${moraIndex * 2 + 2} / span 1` }"
@click.stop="uiLocked || toggleAccentPhraseSplit(false, moraIndex)"
/>
</template>
<template v-if="accentPhrase.pauseMora">
<div class="text-cell">
<span class="text-cell-inner">
{{ accentPhrase.pauseMora.text }}
</span>
</div>
<div
class="
splitter-cell splitter-cell-be-split splitter-cell-be-split-pause
"
@click.stop="uiLocked || toggleAccentPhraseSplit(true)"
/>
</template>
<!-- 読みテキスト・アクセント句の分割と結合ここまで -->
</div>
</template>

<script setup lang="ts">
Expand All @@ -178,12 +188,22 @@ const props =
audioKey: AudioKey;
accentPhrase: AccentPhrase;
index: number;
isActive: boolean;
isLast: boolean;
selectedDetail: DetailTypes;
shiftKeyFlag: boolean;
altKeyFlag: boolean;
}>();
defineEmits<{
(e: "click", index: number): void;
}>();
const container = ref<HTMLElement>();
defineExpose({
container,
});
type DetailTypes = "accent" | "pitch" | "length";
const store = useStore();
Expand Down Expand Up @@ -415,4 +435,24 @@ const handleChangeVoicing = (mora: Mora, moraIndex: number) => {
display: inline-block;
position: relative;
}
.mora-table {
display: inline-grid;
align-self: stretch;
grid-template-rows: 1fr 60px 30px;
&:last-child {
padding-right: 20px;
}
}
.mora-table-hover:hover {
cursor: pointer;
background-color: colors.$active-point-hover;
}
.mora-table-focus {
// hover色に負けるので、importantが必要
background-color: colors.$active-point-focus !important;
}
</style>
Loading

0 comments on commit 3cea9c6

Please sign in to comment.