You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

83 lines
2.2 KiB

<template lang="pug">
extends ../annotation.pug
block annotation-area
div.card
header.card-header
div.card-header-title.has-background-royalblue
div.field.is-grouped.is-grouped-multiline
div.control(v-for="label in labels")
div.tags.has-addons
a.tag.is-medium(
v-shortkey.once="[ label.shortcut ]"
v-bind:style="{ \
color: label.text_color, \
backgroundColor: label.background_color \
}"
v-on:click="addLabel(label)"
v-on:shortkey="addLabel(label)"
) {{ label.text }}
span.tag.is-medium {{ label.shortcut }}
div.card-content
div.field.is-grouped.is-grouped-multiline
div.control(v-for="annotation in annotations[pageNumber]")
div.tags.has-addons
span.tag.is-medium(
v-bind:style="{ \
color: id2label[annotation.label].text_color, \
backgroundColor: id2label[annotation.label].background_color \
}"
) {{ id2label[annotation.label].text }}
button.delete.is-small(v-on:click="removeLabel(annotation)")
hr
div.content(v-if="docs[pageNumber]") {{ docs[pageNumber].text }}
</template>
<style scoped>
.card-header-title {
padding: 1.5rem;
}
hr {
margin: 0.8rem 0;
}
</style>
<script>
import annotationMixin from './demo_mixin';
import { demoTextClassification } from './demo_data';
export default {
mixins: [annotationMixin],
data: () => ({ ...demoTextClassification }),
methods: {
isIn(label) {
for (let i = 0; i < this.annotations[this.pageNumber].length; i++) {
const a = this.annotations[this.pageNumber][i];
if (a.label === label.id) {
return a;
}
}
return false;
},
addLabel(label) {
const a = this.isIn(label);
if (a) {
this.removeLabel(a);
} else {
const annotation = {
id: this.annotationId++,
label: label.id,
};
this.annotations[this.pageNumber].push(annotation);
console.log(this.annotations); // eslint-disable-line no-console
}
},
},
};
</script>