[Editor] Disable pointer events in the parent layer while an editor is resized

This commit is contained in:
Calixte Denizet 2023-09-28 15:09:50 +02:00
parent f78a5ff79e
commit 4f6fa35a28
3 changed files with 12 additions and 2 deletions

View File

@ -193,12 +193,16 @@ class AnnotationEditorLayer {
this.#uiManager.addCommands(params);
}
togglePointerEvents(enabled = false) {
this.div.classList.toggle("disabled", !enabled);
}
/**
* Enable pointer events on the main div in order to enable
* editor creation.
*/
enable() {
this.div.style.pointerEvents = "auto";
this.togglePointerEvents(true);
const annotationElementIds = new Set();
for (const editor of this.#editors.values()) {
editor.enableEditing();
@ -235,7 +239,7 @@ class AnnotationEditorLayer {
*/
disable() {
this.#isDisabling = true;
this.div.style.pointerEvents = "none";
this.togglePointerEvents(false);
const hiddenAnnotationIds = new Set();
for (const editor of this.#editors.values()) {
editor.disableEditing();

View File

@ -628,6 +628,7 @@ class AnnotationEditor {
const savedDraggable = this._isDraggable;
this._isDraggable = false;
const pointerMoveOptions = { passive: true, capture: true };
this.parent.togglePointerEvents(false);
window.addEventListener(
"pointermove",
boundResizerPointermove,
@ -643,6 +644,7 @@ class AnnotationEditor {
window.getComputedStyle(event.target).cursor;
const pointerUpCallback = () => {
this.parent.togglePointerEvents(true);
this.#toggleAltTextButton(true);
this._isDraggable = savedDraggable;
window.removeEventListener("pointerup", pointerUpCallback);

View File

@ -121,6 +121,10 @@
height: 100%;
}
.annotationEditorLayer.disabled {
pointer-events: none;
}
.annotationEditorLayer.freetextEditing {
cursor: var(--editorFreeText-editing-cursor);
}