feat(doubletap-rotation): add customEvent dbltap to rotate quad in mo…

…bile

src/components/DrawingQuad/drawing-quad.helpers.ts

@@ -15,5 +15,6 @@ export const eventQuadManager = (
         mouseup: () => resetQuad(QuadProps),
         touchend: () => resetQuad(QuadProps),
         dblclick: rotateQuad(container, cssClass),
+        dbltap: rotateQuad(container, cssClass),
     };
 };

src/components/DrawingQuad/drawing-quad.ts

@@ -1,5 +1,5 @@
 import { DEFAULT_ROTATE_CLASS, eventQuadManager } from ".";
-import { customEventListener } from "@utils";
+import { createDoubleTapEvent, customEventListener } from "@utils";
 import type { EventType, IQuad } from "@types";
 
 export function DrawingQuad() {
@@ -13,15 +13,9 @@ export function DrawingQuad() {
         currentQuad: null,
     };
 
-    const eventHandlers: Array<EventType> = [
-        "mousedown",
-        "touchstart",
-        "mousemove",
-        "touchmove",
-        "mouseup",
-        "touchend",
-        "dblclick",
-    ];
+    const eventHandlers = Object.keys(
+        eventQuadManager(container, QuadProps, DEFAULT_ROTATE_CLASS)
+    ) as Array<EventType>;
 
     // Add event listeners using forEach
     eventHandlers.forEach((eventType) => {
@@ -33,6 +27,11 @@ export function DrawingQuad() {
 
         if (handler) {
             customEventListener(container!, eventType, handler);
+
+            if (eventType === "dbltap") {
+                // Use the Custom Event
+                createDoubleTapEvent(container);
+            }
         }
     });
 

src/helpers/drawing-quad.create.helpers.ts

@@ -9,6 +9,9 @@ import type { IQuad, QuadEvent } from "@types";
  */
 
 export const createQuad = (QuadProps: IQuad) => (e: QuadEvent) => {
+    // Prevent default behavior of the event.
+    e.preventDefault();
+
     const clientX = "touches" in e ? e.touches[0].clientX : e.clientX;
     const clientY = "touches" in e ? e.touches[0].clientY : e.clientY;
 

src/types/EventTypes.ts

@@ -33,7 +33,8 @@ export type TouchEventType =
     | "touchstart"
     | "touchend"
     | "touchmove"
-    | "touchcancel";
+    | "touchcancel"
+    | "dbltap";
 
 /**
  * Type representing various animation events.

src/utils/animation.utils.ts

@@ -1,5 +1,3 @@
-import { logDebugMessage } from ".";
-
 /**
  * Toggle the rotation class of a DOM element and handle removal of the class after animation.
  *
@@ -11,7 +9,6 @@ export const toggleRotationClass = (
     cssClass: string
 ): void => {
     element.classList.toggle(cssClass);
-    logDebugMessage(`cssClass: ${cssClass}`);
 
     const transitionEndHandler = () => {
         element.classList.remove(cssClass);

src/utils/dom.utils.ts

@@ -71,3 +71,62 @@ export const findTargetElement = (
 
     return targetChild || null;
 };
+
+/**
+ * Function to detect a double tap on an element.
+ * @param element The element to detect the double tap on.
+ * @param callback The callback function to call when a double tap is detected.
+ */
+function detectDoubleTap(
+    element: HTMLElement,
+    callback: (clientX: number, clientY: number) => void
+): void {
+    let lastTouchTime = 0;
+    let isDoubleTap = false;
+    let clientX = 0;
+    let clientY = 0;
+
+    element.addEventListener("touchstart", (event: TouchEvent) => {
+        const currentTime = new Date().getTime();
+        const timeSinceLastTouch = currentTime - lastTouchTime;
+        //c
+        clientX = event.touches[0].clientX;
+        clientY = event.touches[0].clientY;
+
+        if (timeSinceLastTouch <= 300) {
+            // It's a double tap
+            isDoubleTap = true;
+        } else {
+            isDoubleTap = false;
+        }
+
+        lastTouchTime = currentTime;
+    });
+
+    element.addEventListener("touchend", () => {
+        if (isDoubleTap) {
+            callback(clientX, clientY);
+        }
+    });
+}
+
+/**
+ * Create a Custom Event for double tap.
+ * @param element The element to apply the Custom Event to.
+ * @returns A Custom Event for double tap.
+ */
+export function createDoubleTapEvent(element: HTMLElement): CustomEvent {
+    const dbltap = new CustomEvent("dbltap", {
+        bubbles: true,
+        cancelable: true,
+    });
+
+    detectDoubleTap(element, (clientX, clientY) => {
+        // When a double tap is detect4
+        (dbltap as any).clientX = clientX; // Add clientX to the event
+        (dbltap as any).clientY = clientY; // Add clientY to the event
+        element.dispatchEvent(dbltap);
+    });
+
+    return dbltap;
+}