|
@@ -17,7 +17,10 @@
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
</transition-group>
|
|
</transition-group>
|
|
- <template v-for="(tag, index) in specialTagList" :key="index">
|
|
|
|
|
|
+ <template
|
|
|
|
+ v-for="tag in specialTagList"
|
|
|
|
+ :key="`${tag.offsetX}_${tag.offsetY}`"
|
|
|
|
+ >
|
|
<div
|
|
<div
|
|
v-if="tag.tagType === 'TEXT'"
|
|
v-if="tag.tagType === 'TEXT'"
|
|
class="score-container special-container"
|
|
class="score-container special-container"
|
|
@@ -28,8 +31,13 @@
|
|
@mouseup.stop
|
|
@mouseup.stop
|
|
>
|
|
>
|
|
<a-textarea
|
|
<a-textarea
|
|
|
|
+ :key="`${tag.offsetX}_${tag.offsetY}`"
|
|
v-model:value="tag.tagName"
|
|
v-model:value="tag.tagName"
|
|
- class="tag-textarea tw-m-auto"
|
|
|
|
|
|
+ :class="[
|
|
|
|
+ 'tag-textarea',
|
|
|
|
+ 'tw-m-auto',
|
|
|
|
+ { 'is-empty': checkTagContentIsEmpty(tag.tagName) },
|
|
|
|
+ ]"
|
|
:autosize="{ minRows: 1, maxRows: 6 }"
|
|
:autosize="{ minRows: 1, maxRows: 6 }"
|
|
:maxlength="32"
|
|
:maxlength="32"
|
|
@blur="specialTagBlur(tag)"
|
|
@blur="specialTagBlur(tag)"
|
|
@@ -112,10 +120,12 @@ const hasMember = (track: any) => {
|
|
const focusedTrack = (track: Track) => {
|
|
const focusedTrack = (track: Track) => {
|
|
return store.focusTracks.includes(track) || hasMember(track);
|
|
return store.focusTracks.includes(track) || hasMember(track);
|
|
};
|
|
};
|
|
|
|
+const checkTagContentIsEmpty = (cont) => {
|
|
|
|
+ return !cont.trim().replace("\n", "");
|
|
|
|
+};
|
|
const specialTagBlur = (tag) => {
|
|
const specialTagBlur = (tag) => {
|
|
- const tagName = tag.tagName.trim().replace("\n", "");
|
|
|
|
- if (tagName) return;
|
|
|
|
- console.log(tagName);
|
|
|
|
|
|
+ const contIsEmpty = checkTagContentIsEmpty(tag.tagName);
|
|
|
|
+ if (!contIsEmpty) return;
|
|
emit("delete-specialtag", tag);
|
|
emit("delete-specialtag", tag);
|
|
};
|
|
};
|
|
|
|
|
|
@@ -178,8 +188,8 @@ watch(
|
|
.score-container.special-container {
|
|
.score-container.special-container {
|
|
width: auto;
|
|
width: auto;
|
|
height: auto;
|
|
height: auto;
|
|
- margin-top: none;
|
|
|
|
- margin-left: none;
|
|
|
|
|
|
+ margin-top: 0;
|
|
|
|
+ margin-left: 0;
|
|
max-width: 200px;
|
|
max-width: 200px;
|
|
max-height: 200px;
|
|
max-height: 200px;
|
|
transform: translate(-50%, -50%);
|
|
transform: translate(-50%, -50%);
|
|
@@ -200,6 +210,7 @@ watch(
|
|
border-color: transparent;
|
|
border-color: transparent;
|
|
outline: none;
|
|
outline: none;
|
|
}
|
|
}
|
|
|
|
+.score-container .tag-textarea.is-empty,
|
|
.score-container .tag-textarea:hover,
|
|
.score-container .tag-textarea:hover,
|
|
.score-container .tag-textarea:focus {
|
|
.score-container .tag-textarea:focus {
|
|
background-color: rgba(255, 255, 255, 0.8);
|
|
background-color: rgba(255, 255, 255, 0.8);
|