feat: hide temp pin click

src/components/comments/canvas-pin-adapter/index.ts

@@ -132,6 +132,9 @@ export class CanvasPin implements PinAdapter {
 
     pinElement.remove();
     this.pins.delete(uuid);
+
+    if (uuid === 'temporary-pin') return;
+
     this.annotations = this.annotations.filter((annotation) => annotation.uuid !== uuid);
   }
 
@@ -186,6 +189,7 @@ export class CanvasPin implements PinAdapter {
     document.body.addEventListener('keyup', this.resetPins);
     document.body.addEventListener('select-annotation', this.annotationSelected);
     document.body.addEventListener('toggle-annotation-sidebar', this.onToggleAnnotationSidebar);
+    document.body.addEventListener('click', this.hideTemporaryPin);
   }
 
   public setCommentsMetadata = (side: 'left' | 'right', avatar: string, name: string): void => {
@@ -205,6 +209,7 @@ export class CanvasPin implements PinAdapter {
     document.body.removeEventListener('keyup', this.resetPins);
     document.body.removeEventListener('select-annotation', this.annotationSelected);
     document.body.removeEventListener('toggle-annotation-sidebar', this.onToggleAnnotationSidebar);
+    document.body.addEventListener('click', this.hideTemporaryPin);
   }
 
   /**
@@ -367,7 +372,7 @@ export class CanvasPin implements PinAdapter {
    * @param {CustomEvent} event
    * @returns {void}
    */
-  private annotationSelected = ({ detail: { uuid } }: CustomEvent): void => {
+  private annotationSelected = ({ detail: { uuid, haltGoToPin } }: CustomEvent): void => {
     if (!uuid) return;
 
     const annotation = JSON.parse(this.selectedPin?.getAttribute('annotation') ?? '{}');
@@ -385,6 +390,9 @@ export class CanvasPin implements PinAdapter {
     pinElement.setAttribute('active', '');
 
     this.selectedPin = pinElement;
+
+    if (haltGoToPin) return;
+
     this.goToPin(uuid);
   };
 
@@ -441,7 +449,7 @@ export class CanvasPin implements PinAdapter {
     const transform = context.getTransform();
 
     const invertedMatrix = transform.inverse();
-    const transformedPoint = new DOMPoint(x, y).matrixTransform(invertedMatrix);
+    const transformedPoint = new DOMPoint(x, y - 31).matrixTransform(invertedMatrix);
 
     this.onPinFixedObserver.publish({
       x: transformedPoint.x,
@@ -483,4 +491,19 @@ export class CanvasPin implements PinAdapter {
       this.removeAnnotationPin('temporary-pin');
     }
   };
+
+  /**
+   * @function hideTemporaryPin
+   * @description hides the temporary pin if click outside an observed element
+   * @param {MouseEvent} event the mouse event object
+   * @returns {void}
+   */
+  private hideTemporaryPin = (event: MouseEvent): void => {
+    const target = event.target as HTMLElement;
+
+    if (this.canvas.contains(target) || this.pins.get('temporary-pin')?.contains(target)) return;
+
+    this.removeAnnotationPin('temporary-pin');
+    this.temporaryPinCoordinates = null;
+  };
 }

src/components/comments/html-pin-adapter/index.test.ts

@@ -142,7 +142,7 @@ describe('HTMLPinAdapter', () => {
 
       instance['addListeners']();
 
-      expect(bodyAddEventListenerSpy).toHaveBeenCalledTimes(2);
+      expect(bodyAddEventListenerSpy).toHaveBeenCalledTimes(3);
       expect(wrapperAddEventListenerSpy).toHaveBeenCalledTimes(6);
     });
 
@@ -158,7 +158,7 @@ describe('HTMLPinAdapter', () => {
 
       instance['removeListeners']();
 
-      expect(bodyRemoveEventListenerSpy).toHaveBeenCalledTimes(1);
+      expect(bodyRemoveEventListenerSpy).toHaveBeenCalledTimes(2);
       expect(wrapperRemoveEventListenerSpy).toHaveBeenCalledTimes(6);
     });
   });

src/components/comments/html-pin-adapter/index.ts

@@ -180,6 +180,7 @@ export class HTMLPin implements PinAdapter {
     Object.keys(this.elementsWithDataId).forEach((id) => this.addElementListeners(id));
     document.body.addEventListener('keyup', this.resetPins);
     document.body.addEventListener('toggle-annotation-sidebar', this.onToggleAnnotationSidebar);
+    document.body.addEventListener('click', this.hideTemporaryPin);
   }
 
   /**
@@ -202,6 +203,7 @@ export class HTMLPin implements PinAdapter {
   private removeListeners(): void {
     Object.keys(this.elementsWithDataId).forEach((id) => this.removeElementListeners(id));
     document.body.removeEventListener('keyup', this.resetPins);
+    document.body.removeEventListener('click', this.hideTemporaryPin);
   }
 
   /**
@@ -296,6 +298,8 @@ export class HTMLPin implements PinAdapter {
       this.pins.delete(uuid);
     }
 
+    if (uuid === 'temporary-pin') return;
+
     this.annotations = this.annotations.filter((annotation) => {
       return annotation.uuid !== uuid;
     });
@@ -453,6 +457,23 @@ export class HTMLPin implements PinAdapter {
     });
   }
 
+  /**
+   * @function hideTemporaryPin
+   * @description hides the temporary pin if click outside an observed element
+   * @param {MouseEvent} event the mouse event object
+   * @returns {void}
+   */
+  private hideTemporaryPin = (event: MouseEvent): void => {
+    const target = event.target as HTMLElement;
+
+    this.divWrappers.forEach((wrapper) => {
+      if (wrapper.contains(target) || this.pins.get('temporary-pin')?.contains(target)) return;
+
+      this.removeAnnotationPin('temporary-pin');
+      this.temporaryPinCoordinates = {};
+    });
+  };
+
   /**
    * @function clearElement
    * @description clears an element that no longer has the specified data attribute
@@ -820,6 +841,7 @@ export class HTMLPin implements PinAdapter {
 
     if (this.pins.has('temporary-pin')) {
       this.removeAnnotationPin('temporary-pin');
+      this.temporaryPinCoordinates.elementId = undefined;
     }
   };
 }

src/components/comments/index.ts

@@ -302,7 +302,7 @@ export class Comments extends BaseComponent {
 
       document.body.dispatchEvent(
         new CustomEvent('select-annotation', {
-          detail: { uuid: annotation.uuid },
+          detail: { uuid: annotation.uuid, haltGoToPin: true },
           composed: true,
           bubbles: true,
         }),