feat(Delete Confirmation): implement delete confirmation popup and enhance delete button functionality

- Added a global delete key handler to manage delete/backspace key presses, triggering a confirmation popup for deleting selected annotations.
- Introduced a delete confirmation popup with options to cancel or confirm deletion, improving user experience and preventing accidental deletions.
- Updated the annotation toolbar to include a delete button that shows/hides based on annotation selection state.
- Emitted an 'ANNOTATION_DESELECT' event to handle deselection logic across annotations.
- Enhanced styling for the delete confirmation popup and button interactions for better UI consistency.

Author: Aman Kumar

src/core/event-emitter.core.ts

@@ -36,6 +36,7 @@ export type InstanceEventType =
   | 'ANNOTATION_SELECTED'
   | 'ANNOTATION_CREATED'
   | 'ANNOTATION_DELETED'
+  | 'ANNOTATION_DESELECT'
   | 'ANNOTATION_UPDATED'
   | 'DRAWING_STARTED'
   | 'DRAWING_FINISHED'

src/style/global.css

@@ -451,4 +451,128 @@ span.a-active-highlight {
   .pdf-error-message {
     color: var(--text-on-background-light);
   }
+}
+
+/* ========================== */
+/* Delete Confirmation Popup */
+/* ========================== */
+
+.a-delete-confirmation-popup {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10000;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  animation: fadeIn 0.2s ease-out;
+}
+
+.a-delete-confirmation-popup .a-popup-content {
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+  max-width: 400px;
+  width: 90%;
+  overflow: hidden;
+  animation: slideIn 0.2s ease-out;
+}
+
+.a-delete-confirmation-popup .a-popup-header {
+  padding: 20px 20px 0 20px;
+  border-bottom: 1px solid #e5e5e5;
+}
+
+.a-delete-confirmation-popup .a-popup-header h3 {
+  margin: 0 0 20px 0;
+  font-size: 18px;
+  font-weight: 600;
+  color: #333;
+}
+
+.a-delete-confirmation-popup .a-popup-body {
+  padding: 20px;
+}
+
+.a-delete-confirmation-popup .a-popup-body p {
+  margin: 0 0 10px 0;
+  color: #666;
+  line-height: 1.5;
+}
+
+.a-delete-confirmation-popup .a-popup-body .a-annotation-type {
+  margin: 0;
+  color: #999;
+  font-size: 14px;
+  font-style: italic;
+}
+
+.a-delete-confirmation-popup .a-popup-actions {
+  padding: 0 20px 20px 20px;
+  display: flex;
+  gap: 10px;
+  justify-content: flex-end;
+}
+
+.a-delete-confirmation-popup .a-btn {
+  padding: 8px 16px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  transition: all 0.2s;
+  border: none;
+  outline: none;
+}
+
+.a-delete-confirmation-popup .a-btn-cancel {
+  border: 1px solid #ddd;
+  background: white;
+  color: #666;
+}
+
+.a-delete-confirmation-popup .a-btn-cancel:hover {
+  background: #f8f9fa;
+  border-color: #adb5bd;
+}
+
+.a-delete-confirmation-popup .a-btn-delete {
+  border: 1px solid #dc3545;
+  background: #dc3545;
+  color: white;
+}
+
+.a-delete-confirmation-popup .a-btn-delete:hover {
+  background: #c82333;
+  border-color: #c82333;
+}
+
+.a-delete-confirmation-popup .a-btn:focus {
+  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
+}
+
+/* Animations */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes slideIn {
+  from {
+    transform: translateY(-20px);
+    opacity: 0;
+  }
+
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
 }

src/style/toolbar.css

@@ -476,6 +476,35 @@
   width: 14px;
 }
 
+.a-toolbar-button .a-annotation-toolbar-delete-icon::before {
+  content: '\e872';
+  font-size: 1.34rem !important;
+}
+
+/* Smooth transitions for delete button visibility */
+.a-toolbar-item[data-delete-button] {
+  transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
+}
+
+.a-toolbar-item[data-delete-button].hidden {
+  opacity: 0;
+  transform: scale(0.8);
+  pointer-events: none;
+}
+
+/* Right container styling for better alignment */
+.a-annotation-toolbar-right-container {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-left: auto;
+}
+
+/* Ensure delete button has consistent spacing with shape buttons */
+.a-annotation-toolbar-right-container .a-toolbar-item[data-delete-button] {
+  margin-left: 8px;
+}
+
 .a-annotation-shape-button {
   display: inline-flex;
   align-items: center;

src/types/events.types.ts

@@ -22,6 +22,7 @@ export type Events =
   | 'ANNOTATION_SELECTED'
   | 'ANNOTATION_CREATED'
   | 'ANNOTATION_DELETED'
+  | 'ANNOTATION_DESELECT'
   | 'ANNOTATION_UPDATED'
   | 'DRAWING_STARTED'
   | 'DRAWING_FINISHED'

src/viewer/annotations/ellipse-annotation.ts

@@ -54,7 +54,6 @@ export class EllipseAnnotation extends Annotation {
     instanceId: string;
     containerId: string;
   };
-  private _onDeleteKeyBound = this._onDeleteKey.bind(this);
   private _bindOnScaleChange = this._onScaleChange.bind(this);
 
   /**
@@ -220,22 +219,23 @@ export class EllipseAnnotation extends Annotation {
     this._onShapeUpdate();
   }
 
-  /** Adds resizers and listens for Delete/Backspace. */
+  /** Adds resizers. */
   public select(): void {
     if (!this._resizer) {
       this._resizer = new Resizer(this.__svg, this.__element as any, this._onShapeUpdate.bind(this), this._constraints);
       this.__svg.focus();
-      this.__svg.addEventListener('keydown', this._onDeleteKeyBound);
     }
   }
 
   /** Removes resizers and key listener. */
   public deselect(): void {
     if (this._resizer) {
-      this.__svg.removeEventListener('keydown', this._onDeleteKeyBound);
       this._resizer.removeResizers();
       this._resizer = null;
     }
+
+    // Emit deselection event
+    this.events.emit('ANNOTATION_DESELECT');
   }
 
   /**
@@ -313,14 +313,6 @@ export class EllipseAnnotation extends Annotation {
     this.__svg.appendChild(this.__hitElementRect);
   }
 
-  /**
-   * Handles Delete/Backspace key to remove the annotation.
-   * @param e Keyboard event
-   */
-  private _onDeleteKey(e: KeyboardEvent): void {
-    if (e.key === 'Delete' || e.key === 'Backspace') this.deleteAnnotation();
-  }
-
   /**
    * Stores logical geometry for zoom recalculation.
    * @param scale Current scale factor

src/viewer/annotations/line-annotation.ts

@@ -54,7 +54,6 @@ export class LineAnnotation extends Annotation {
     instanceId: string;
     containerId: string;
   };
-  private _onDeleteKeyBound = this._onDeleteKey.bind(this);
   private _bindOnScaleChange = this._onScaleChange.bind(this);
 
   /**
@@ -227,25 +226,26 @@ export class LineAnnotation extends Annotation {
   }
 
   /**
-   * Select this annotation, adding resize handles and delete‐key listener.
+   * Select this annotation, adding resize handles.
    */
   public select(): void {
     if (!this._resizer) {
       this._resizer = new Resizer(this.__svg, this.__element as SVGGraphicsElement, this._onShapeUpdate.bind(this), this.__annotationDrawerContainer.getBoundingClientRect());
       this.__svg.focus();
-      this.__svg.addEventListener('keydown', this._onDeleteKeyBound);
     }
   }
 
   /**
-   * Deselect this annotation, removing handles and delete‐key listener.
+   * Deselect this annotation, removing handles.
    */
   public deselect(): void {
     if (this._resizer) {
-      this.__svg.removeEventListener('keydown', this._onDeleteKeyBound);
       this._resizer.removeResizers();
       this._resizer = null;
     }
+
+    // Emit deselection event
+    this.events.emit('ANNOTATION_DESELECT');
   }
 
   /**
@@ -338,13 +338,6 @@ export class LineAnnotation extends Annotation {
     this.__svg.appendChild(hit);
   }
 
-  /** Handle Delete/Backspace key to remove annotation. */
-  private _onDeleteKey(e: KeyboardEvent): void {
-    if (e.key === 'Delete' || e.key === 'Backspace') {
-      this.deleteAnnotation();
-    }
-  }
-
   /** Capture logical (unscaled) endpoints for later zoom updates. */
   private _captureOriginal(): void {
     const { x1, y1, x2, y2 } = this._logicalCoords();

src/viewer/annotations/rectangle-annotation.ts

@@ -46,7 +46,6 @@ export class RectangleAnnotation extends Annotation {
     instanceId: string;
     containerId: string;
   };
-  private _onDeleteKeyBound = this._onDeleteKey.bind(this);
   private _bindOnScaleChange = this._onScaleChange.bind(this);
 
   /** Unique identifier of this annotation. */
@@ -222,25 +221,26 @@ export class RectangleAnnotation extends Annotation {
   }
 
   /**
-   * Selects this annotation, adding resizers and Delete/Backspace handler.
+   * Selects this annotation, adding resizers.
    */
   public select(): void {
     if (!this._resizer) {
       this._resizer = new Resizer(this.__svg, this.__element as SVGGraphicsElement, this._onShapeUpdate.bind(this), this._constraints);
       this.__svg.focus();
-      this._addDeleteEvent();
     }
   }
 
   /**
-   * Deselects this annotation, removing resizers and keyboard handler.
+   * Deselects this annotation, removing resizers.
    */
   public deselect(): void {
     if (this._resizer) {
-      this._removeDeleteEvent();
       this._resizer.removeResizers();
       this._resizer = null;
     }
+
+    // Emit deselection event
+    this.events.emit('ANNOTATION_DESELECT');
   }
 
   /**
@@ -250,7 +250,6 @@ export class RectangleAnnotation extends Annotation {
   public deleteAnnotation(suppressEvent = false): void {
     if (this.__svg) {
       if (this._resizer) {
-        this._removeDeleteEvent();
         this._resizer.removeResizers();
         this._resizer = null;
       }
@@ -384,25 +383,6 @@ export class RectangleAnnotation extends Annotation {
     }
   }
 
-  /** Adds keyboard listener for Delete/Backspace. */
-  private _addDeleteEvent(): void {
-    this.__svg.addEventListener('keydown', this._onDeleteKeyBound);
-  }
-
-  /** Removes keyboard listener for Delete/Backspace. */
-  private _removeDeleteEvent(): void {
-    this.__svg.removeEventListener('keydown', this._onDeleteKeyBound);
-  }
-
-  /**
-   * Handles Delete or Backspace key to delete the annotation.
-   */
-  private _onDeleteKey(event: KeyboardEvent): void {
-    if (event.key === 'Delete' || event.key === 'Backspace') {
-      this.deleteAnnotation();
-    }
-  }
-
   /** Captures current un-scaled position and size for zoom adjustments. */
   private _maintainOriginalBounding(zoomLevel = 1): void {
     // Always normalize to scale=1 for consistency, regardless of current zoom