feature: comment on annotations
This commit is contained in:
parent
eb6d31742e
commit
7e946cb3f6
2 changed files with 33 additions and 4 deletions
|
@ -199,6 +199,14 @@
|
|||
pointer-events: all;
|
||||
}
|
||||
|
||||
.controls .annotation-comment{
|
||||
width: 100%;
|
||||
visibility: hidden;
|
||||
}
|
||||
.selected-annotation .controls .annotation-comment{
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.noUi-handle:focus {
|
||||
/* background: red;; */
|
||||
border: solid 2px #601be0;
|
||||
|
|
|
@ -1,8 +1,9 @@
|
|||
class Annotation {
|
||||
constructor(tag, t_in, t_out) {
|
||||
constructor(tag, t_in, t_out, comment) {
|
||||
this.tag = tag;
|
||||
this.t_in = Number.parseFloat(t_in);
|
||||
this.t_out = Number.parseFloat(t_out);
|
||||
this.comment = comment;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -271,6 +272,24 @@ class Annotator extends EventTarget {
|
|||
|
||||
this.controlsEl.appendChild(this.tagsEl);
|
||||
|
||||
this.commentEl = document.createElement('input');
|
||||
this.commentEl.type = 'text';
|
||||
this.commentEl.classList.add('annotation-comment');
|
||||
this.commentEl.title = "Add comment to annotation";
|
||||
this.commentEl.placeholder = "comment";
|
||||
this.commentEl.value = "";
|
||||
this.commentEl.addEventListener('keyup', (e) => {
|
||||
e.stopPropagation(); // prevent keyup event to propagate and set i/o points
|
||||
});
|
||||
this.commentEl.addEventListener('input', (e) => {
|
||||
e.stopPropagation(); // prevent keyup event
|
||||
if (this.selectedAnnotation) {
|
||||
this.selectedAnnotation.comment = this.commentEl.value;
|
||||
this.updateAnnotations(true)
|
||||
}
|
||||
});
|
||||
this.controlsEl.appendChild(this.commentEl);
|
||||
|
||||
this.load(fileurl);
|
||||
});
|
||||
}
|
||||
|
@ -311,7 +330,7 @@ class Annotator extends EventTarget {
|
|||
if (this.selectedAnnotationI == annotation_i) {
|
||||
this.annotationEl.classList.add('selected');
|
||||
}
|
||||
this.annotationEl.title = annotation.tag;
|
||||
this.annotationEl.title = `[${annotation.tag}] ${annotation.comment}`;
|
||||
|
||||
this.annotationEl.addEventListener('mouseover', (e) => {
|
||||
|
||||
|
@ -360,6 +379,7 @@ class Annotator extends EventTarget {
|
|||
this.updateAnnotations(false); //selects the right tag & highlights the annotation
|
||||
|
||||
this.wrapperEl.classList.add('selected-annotation');
|
||||
this.commentEl.value = this.selectedAnnotation.comment;
|
||||
}
|
||||
|
||||
deselectAnnotation(keep_position) {
|
||||
|
@ -368,6 +388,7 @@ class Annotator extends EventTarget {
|
|||
}
|
||||
|
||||
this.wrapperEl.classList.remove('selected-annotation');
|
||||
this.commentEl.value = "";
|
||||
|
||||
this.selectedAnnotationI = null;
|
||||
this.selectedAnnotation = null;
|
||||
|
@ -434,7 +455,7 @@ class Annotator extends EventTarget {
|
|||
.then(response => response.ok ? response.json() : null)
|
||||
.then(metadata => {
|
||||
if (metadata !== null) {
|
||||
metadata.annotations = metadata.annotations.map((a) => new Annotation(a.tag, a.t_in, a.t_out))
|
||||
metadata.annotations = metadata.annotations.map((a) => new Annotation(a.tag, a.t_in, a.t_out, a.hasOwnProperty('comment') ? a.comment : ""))
|
||||
}
|
||||
this.loadStrokes(data, metadata)
|
||||
})
|
||||
|
@ -517,7 +538,7 @@ class Annotator extends EventTarget {
|
|||
this.slider.destroy();
|
||||
}
|
||||
|
||||
this.annotations.push(new Annotation(tag, t_in, t_out));
|
||||
this.annotations.push(new Annotation(tag, t_in, t_out, ""));
|
||||
this.updateAnnotations(true);
|
||||
|
||||
this._currentTimeMs = t_out;
|
||||
|
|
Loading…
Reference in a new issue