work on removing debounce

BeksOmega · BeksOmega · commit 7a88b711c01d · 2025-08-08T22:36:18.000-07:00
diff --git a/demo.html b/demo.html
@@ -12,11 +12,12 @@
         height: 100vh;
         margin: 0;
       }
-      #annotated-text {
+      .annotated-text {
         font-size: 2em;
-        padding: 20px;
+        padding: 4px;
         border: 1px solid #ccc;
         cursor: pointer;
+        margin: 8px;
       }
       .instructions {
         margin-top: 20px;
@@ -26,7 +27,27 @@
     </style>
   </head>
   <body>
-    <div id="annotated-text">Click me to toggle the annotation.</div>
+    <div class="annotated-text">Click me to toggle the annotation.</div>
+    <div class="annotated-text">Click me to toggle the annotation.</div>
+    <div class="annotated-text">Click me to toggle the annotation.</div>
+    <div class="annotated-text">Click me to toggle the annotation.</div>
+    <div class="annotated-text">Click me to toggle the annotation.</div>
+    <div class="annotated-text">Click me to toggle the annotation.</div>
+    <div class="annotated-text">Click me to toggle the annotation.</div>
+    <div class="annotated-text">Click me to toggle the annotation.</div>
+    <div class="annotated-text">Click me to toggle the annotation.</div>
+    <div class="annotated-text">Click me to toggle the annotation.</div>
+    <div class="annotated-text">Click me to toggle the annotation.</div>
+    <div class="annotated-text">Click me to toggle the annotation.</div>
+    <div class="annotated-text">Click me to toggle the annotation.</div>
+    <div class="annotated-text">Click me to toggle the annotation.</div>
+    <div class="annotated-text">Click me to toggle the annotation.</div>
+    <div class="annotated-text">Click me to toggle the annotation.</div>
+    <div class="annotated-text">Click me to toggle the annotation.</div>
+    <div class="annotated-text">Click me to toggle the annotation.</div>
+    <div class="annotated-text">Click me to toggle the annotation.</div>
+    <div class="annotated-text">Click me to toggle the annotation.</div>
+    <div class="annotated-text">Click me to toggle the annotation.</div>
 
     <div class="instructions">
       This demo shows the animated `hide()` method.
@@ -36,21 +57,27 @@
     <script>
       const { annotate } = RoughNotation;
 
-      const el = document.getElementById("annotated-text");
-      const annotation = annotate(el, {
-        type: "underline",
-        color: "red",
-        animationDuration: 1000,
-        animateOnHide: true,
-      });
+      const els = document.getElementsByClassName("annotated-text");
+      const annotations = Array.from(els).map((el) =>
+        annotate(el, {
+          type: "underline",
+          color: "red",
+          animationDuration: 1000,
+          animateOnHide: true,
+        })
+      );
 
-      el.addEventListener("click", () => {
-        if (annotation.isShowing()) {
-          annotation.hide();
-        } else {
-          annotation.show();
-        }
-      });
+      for (let i = 0; i < annotations.length; i++) {
+        const annotation = annotations[i];
+        const el = els[i];
+        el.addEventListener("click", () => {
+          if (annotation.isShowing()) {
+            annotation.hide();
+          } else {
+            annotation.show();
+          }
+        });
+      }
 
       // Initially show the annotation
       annotation.show();
diff --git a/src/rough-notation.ts b/src/rough-notation.ts
@@ -15,7 +15,6 @@ type AnnotationState = "unattached" | "not-showing" | "showing";
 class RoughAnnotationImpl implements RoughAnnotation {
   private _state: AnnotationState = "unattached";
   private _config: RoughAnnotationConfig;
-  private _resizing = false;
   private _ro?: any; // ResizeObserver is not supported in typescript std lib yet
   private _seed = randomSeed();
 
@@ -90,16 +89,8 @@ class RoughAnnotationImpl implements RoughAnnotation {
   }
 
   private _resizeListener = () => {
-    if (!this._resizing) {
-      this._resizing = true;
-      setTimeout(() => {
-        this._resizing = false;
-        if (this._state === "showing") {
-          if (this.haveRectsChanged()) {
-            this.show();
-          }
-        }
-      }, 400);
+    if (this._state === "showing" && this.haveRectsChanged()) {
+      this.show();
     }
   };
 
@@ -203,7 +194,7 @@ class RoughAnnotationImpl implements RoughAnnotation {
       case "unattached":
         break;
       case "showing":
-        this.hide();
+        this.hide(/* force */ true);
         if (this._svg) {
           this.render(this._svg, true);
         }
@@ -217,12 +208,15 @@ class RoughAnnotationImpl implements RoughAnnotation {
     }
   }
 
-  hide(): void {
+  /**
+   * @param force - If true, the annotation will be hidden immediately without animation.
+   */
+  hide(force?: boolean): void {
     if (!this.isShowing()) {
       return;
     }
     const animate = this.animateOnHide ?? false;
-    if (this._svg && animate) {
+    if (this._svg && !force && animate) {
       const paths = Array.from(this._svg.querySelectorAll("path"));
       if (paths.length > 0) {
         const animationDuration =
