security_vision
/
chronodiagram
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feature: comment on annotations

This commit is contained in:
Ruben van de Ven 2022-05-25 10:04:55 +02:00
parent eb6d31742e
commit 7e946cb3f6
2 changed files with 33 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/www/annotate.html
View File

@ -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;

29
app/www/annotate.js
View File

@ -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;