[Editor] Remove the various listeners when destroying the editor manager

This commit is contained in:
Calixte Denizet 2024-06-18 21:05:26 +02:00
parent 9dbe4c246b
commit 390afcb685
10 changed files with 244 additions and 129 deletions

View file

@ -534,6 +534,8 @@ class ColorManager {
* some action like copy/paste, undo/redo, ...
*/
class AnnotationEditorUIManager {
#abortController = new AbortController();
#activeEditor = null;
#allEditors = new Map();
@ -600,10 +602,6 @@ class AnnotationEditorUIManager {
#boundCut = this.cut.bind(this);
#boundDragOver = this.dragOver.bind(this);
#boundDrop = this.drop.bind(this);
#boundPaste = this.paste.bind(this);
#boundKeydown = this.keydown.bind(this);
@ -616,8 +614,6 @@ class AnnotationEditorUIManager {
#boundOnScaleChanging = this.onScaleChanging.bind(this);
#boundSelectionChange = this.#selectionChange.bind(this);
#boundOnRotationChanging = this.onRotationChanging.bind(this);
#previousStates = {
@ -785,6 +781,7 @@ class AnnotationEditorUIManager {
enableHighlightFloatingButton,
mlManager
) {
this._signal = this.#abortController.signal;
this.#container = container;
this.#viewer = viewer;
this.#altTextManager = altTextManager;
@ -820,9 +817,10 @@ class AnnotationEditorUIManager {
}
destroy() {
this.#removeDragAndDropListeners();
this.#removeKeyboardManager();
this.#removeFocusManager();
this.#abortController?.abort();
this.#abortController = null;
this._signal = null;
this._eventBus._off("editingaction", this.#boundOnEditingAction);
this._eventBus._off("pagechanging", this.#boundOnPageChanging);
this._eventBus._off("scalechanging", this.#boundOnScaleChanging);
@ -847,7 +845,6 @@ class AnnotationEditorUIManager {
clearTimeout(this.#translationTimeoutId);
this.#translationTimeoutId = null;
}
this.#removeSelectionListener();
}
async mlGuess(data) {
@ -1084,6 +1081,7 @@ class AnnotationEditorUIManager {
this.#highlightWhenShiftUp = this.isShiftKeyDown;
if (!this.isShiftKeyDown) {
const signal = this._signal;
const pointerup = e => {
if (e.type === "pointerup" && e.button !== 0) {
// Do nothing on right click.
@ -1095,8 +1093,8 @@ class AnnotationEditorUIManager {
this.#onSelectEnd("main_toolbar");
}
};
window.addEventListener("pointerup", pointerup);
window.addEventListener("blur", pointerup);
window.addEventListener("pointerup", pointerup, { signal });
window.addEventListener("blur", pointerup, { signal });
}
}
@ -1109,16 +1107,19 @@ class AnnotationEditorUIManager {
}
#addSelectionListener() {
document.addEventListener("selectionchange", this.#boundSelectionChange);
}
#removeSelectionListener() {
document.removeEventListener("selectionchange", this.#boundSelectionChange);
document.addEventListener(
"selectionchange",
this.#selectionChange.bind(this),
{
signal: this._signal,
}
);
}
#addFocusManager() {
window.addEventListener("focus", this.#boundFocus);
window.addEventListener("blur", this.#boundBlur);
const signal = this._signal;
window.addEventListener("focus", this.#boundFocus, { signal });
window.addEventListener("blur", this.#boundBlur, { signal });
}
#removeFocusManager() {
@ -1160,16 +1161,17 @@ class AnnotationEditorUIManager {
() => {
lastEditor._focusEventsAllowed = true;
},
{ once: true }
{ once: true, signal: this._signal }
);
lastActiveElement.focus();
}
#addKeyboardManager() {
const signal = this._signal;
// The keyboard events are caught at the container level in order to be able
// to execute some callbacks even if the current page doesn't have focus.
window.addEventListener("keydown", this.#boundKeydown);
window.addEventListener("keyup", this.#boundKeyup);
window.addEventListener("keydown", this.#boundKeydown, { signal });
window.addEventListener("keyup", this.#boundKeyup, { signal });
}
#removeKeyboardManager() {
@ -1178,9 +1180,10 @@ class AnnotationEditorUIManager {
}
#addCopyPasteListeners() {
document.addEventListener("copy", this.#boundCopy);
document.addEventListener("cut", this.#boundCut);
document.addEventListener("paste", this.#boundPaste);
const signal = this._signal;
document.addEventListener("copy", this.#boundCopy, { signal });
document.addEventListener("cut", this.#boundCut, { signal });
document.addEventListener("paste", this.#boundPaste, { signal });
}
#removeCopyPasteListeners() {
@ -1190,13 +1193,9 @@ class AnnotationEditorUIManager {
}
#addDragAndDropListeners() {
document.addEventListener("dragover", this.#boundDragOver);
document.addEventListener("drop", this.#boundDrop);
}
#removeDragAndDropListeners() {
document.removeEventListener("dragover", this.#boundDragOver);
document.removeEventListener("drop", this.#boundDrop);
const signal = this._signal;
document.addEventListener("dragover", this.dragOver.bind(this), { signal });
document.addEventListener("drop", this.drop.bind(this), { signal });
}
addEditListeners() {