fix:clear multi global svg elements

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-peel",
   "description": "react-peel is a react library to create realistic peeling effects. No dependencies.",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/index.tsx

@@ -1,4 +1,4 @@
-import { useRef, useEffect, forwardRef } from "react";
+import { forwardRef, useEffect, useRef } from "react";
 
 import PeelLib, { PeelCorners } from "./peel";
 import { HtmlDivProps, PeelOptions, Props, TCoords } from "./types";
@@ -89,7 +89,7 @@ function Peel(
 
     initialize();
     return () => {
-      peelRef.current && peelRef.current.removeEvents();
+      peelRef.current && peelRef.current.clear();
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [options]);

src/main.tsx

@@ -1,6 +1,5 @@
-import React from "react";
+import React, { useEffect, useRef } from "react";
 import ReactDOM from "react-dom/client";
-import { useRef, useEffect } from "react";
 import { PeelBack, PeelBottom, PeelTop, PeelWrapper } from ".";
 
 // eslint-disable-next-line react-refresh/only-export-components

src/peel.js

@@ -137,8 +137,8 @@ export default function () {
 
   // Event Helpers
 
-  function addEvent(el, type, fn) {
-    el.addEventListener(type, fn);
+  function addEvent(el, type, fn, opt) {
+    el.addEventListener(type, fn, opt);
   }
 
   function removeEvent(el, type, fn) {
@@ -442,10 +442,40 @@ export default function () {
     }
 
     this.addEvent(el, "mousedown", dragStart.bind(this, false));
-    this.addEvent(el, "touchstart", dragStart.bind(this, true));
+    this.addEvent(
+      el,
+      "touchstart",
+      dragStart.bind(this, true),
+      checkPassiveEventSupport()
+        ? {
+            passive: true,
+          }
+        : false
+    );
     this.dragEventsSetup = true;
   };
 
+  /**
+   * Check passive event listener browser compatibility.
+   * @public
+   */
+
+  function checkPassiveEventSupport() {
+    let supportsPassive = false;
+    try {
+      const options = Object.defineProperty({}, "passive", {
+        get: function () {
+          supportsPassive = true;
+          return null;
+        },
+      });
+      window.addEventListener("test", null, options);
+    } catch (err) {
+      console.warn("Passive event listener not support");
+    }
+    return supportsPassive;
+  }
+
   /**
    * Remove all event handlers previously added to the instance.
    * @public
@@ -457,6 +487,27 @@ export default function () {
     this.events = [];
   };
 
+  /**
+   * Remove global svg elements.
+   * @public
+   */
+  Peel.prototype.removeGlobalSvgElements = function () {
+    var globalSvgElements = document.getElementsByClassName(
+      prefix("svg-clip-element")
+    );
+
+    [...globalSvgElements].forEach((e) => e.remove());
+  };
+
+  /**
+   * Clear everything.
+   * @public
+   */
+  Peel.prototype.clear = function () {
+    this.removeEvents();
+    this.removeGlobalSvgElements();
+  };
+
   /**
    * Sets the peel effect to a point in time along a previously
    * specified path. Will throw an error if no path exists.
@@ -562,8 +613,8 @@ export default function () {
    * @param {Function} fn The handler function.
    * @private
    */
-  Peel.prototype.addEvent = function (el, type, fn) {
-    addEvent(el, type, fn);
+  Peel.prototype.addEvent = function (el, type, fn, opt) {
+    addEvent(el, type, fn, opt);
     this.events.push({
       el: el,
       type: type,
@@ -1278,6 +1329,22 @@ export default function () {
     setTransform(this.el, "translate(0px,0px)");
   }
 
+  // /**
+  //  * Sets up the global SVG element and its nested defs object to use for new
+  //  * clip paths.
+  //  * @returns {SVGElement}
+  //  * @public
+  //  */
+  // SVGClip.getGlobalSvgElement = function () {
+  //   if (!this.defs) {
+  //     this.svg = createSVGElement("svg", null, {
+  //       class: prefix("svg-clip-element"),
+  //     });
+  //     this.defs = createSVGElement("defs", this.svg);
+  //   }
+  //   return this.defs;
+  // };
+
   /**
    * Sets up the global SVG element and its nested defs object to use for new
    * clip paths.