diff --git a/inception/inception-html-apache-annotator-editor/src/main/ts/src/apache-annotator/ApacheAnnotatorSelector.ts b/inception/inception-html-apache-annotator-editor/src/main/ts/src/apache-annotator/ApacheAnnotatorSelector.ts
index e2029278166..b39aaec4d5d 100644
--- a/inception/inception-html-apache-annotator-editor/src/main/ts/src/apache-annotator/ApacheAnnotatorSelector.ts
+++ b/inception/inception-html-apache-annotator-editor/src/main/ts/src/apache-annotator/ApacheAnnotatorSelector.ts
@@ -27,6 +27,10 @@ export class ApacheAnnotatorSelector {
private popupContent: HTMLElement | undefined
private popupAnchor: HTMLElement | undefined
+ private clickCount = 0
+ private clickTimer: number
+ private CLICK_DELAY = 300
+
public constructor (element: Element, ajax: DiamAjax) {
this.ajax = ajax
this.root = element
@@ -63,6 +67,8 @@ export class ApacheAnnotatorSelector {
}
public showSelector (event: Event): void {
+ console.warn("showSelector")
+
const mouseEvent = event as MouseEvent
this.destroyPopup()
@@ -76,7 +82,7 @@ export class ApacheAnnotatorSelector {
// inline label
const vid = hls[0].getAttribute('data-iaa-id')
if (!vid) return
- this.ajax.selectAnnotation(vid)
+ this.onClick(mouseEvent, vid)
return
}
@@ -106,7 +112,7 @@ export class ApacheAnnotatorSelector {
labelArea.classList.add('iaa-label')
labelArea.textContent = label !== NO_LABEL ? label : 'no label'
labelArea.style.cursor = 'pointer'
- labelArea.addEventListener('click', e => this.onSelectAnnotation(e, vid))
+ labelArea.addEventListener('mouseup', e => this.onClick(e, vid))
menuItem.appendChild(labelArea)
const deleteButton = document.createElement('a')
@@ -122,13 +128,53 @@ export class ApacheAnnotatorSelector {
this.popup = createPopper(this.popupAnchor, this.popupContent, { placement: 'top' })
}
- private onSelectAnnotation (event: Event, id: VID) {
- console.log(`Selecting annotation ${id}`)
+ /**
+ * Distinguish between double clicks and single clicks . This is relevant when clicking on
+ * annotations. For clicking on text nodes, this is not really relevant.
+ */
+ private onClick (event: MouseEvent, id: VID) {
+ if (event.button != 0) return
+
+ const singleClickAction = this.onSelectAnnotation.bind(this)
+ const doubleClickAction = this.onExtensionAction.bind(this)
+
event.stopPropagation()
+ event.preventDefault()
+
+ this.clickCount++
+ console.warn(this.clickCount, id)
+ if (this.clickCount === 1) {
+ this.clickTimer = window.setTimeout(() => {
+ try {
+ singleClickAction(id) // perform single-click action
+ } finally {
+ this.clickCount = 0 // after action performed, reset counter
+ }
+ }, this.CLICK_DELAY)
+ } else {
+ if (this.clickTimer !== null) {
+ clearTimeout(this.clickTimer) // prevent single-click action
+ }
+ try {
+ doubleClickAction(id) // perform double-click action
+ } finally {
+ this.clickCount = 0 // after action performed, reset counter
+ }
+ }
+ }
+
+ private onSelectAnnotation (id: VID) {
+ console.warn(`Selecting annotation ${id}`)
this.destroyPopup()
this.ajax.selectAnnotation(id)
}
+ private onExtensionAction (id: VID) {
+ console.warn(`Trigger extension action on annotation ${id}`)
+ this.destroyPopup()
+ this.ajax.triggerExtensionAction(id)
+ }
+
private onDeleteAnnotation (event: Event, id: VID) {
console.log(`Deleting annotation ${id}`)
event.stopPropagation()