feat: added waitForRelease (to let waves dissolve immediately)

README.md

@@ -69,6 +69,7 @@ After installing and registering the plugin, this is all you need to get started
     - [finalOpacity](#finalopacity)
     - [duration](#duration)
     - [dissolveDuration](#dissolveduration)
+    - [waitForRelease](#waitforrelease)
     - [easing](#easing)
     - [cancellationPeriod](#cancellationperiod)
     - [trigger](#trigger)
@@ -248,6 +249,7 @@ export default {
 | [finalOpacity](#finalopacity)                          |      `0.1`       | `number`                      |
 | [duration](#duration)                                  |      `0.4`       | `number`                      |
 | [dissolveDuration](#dissolveduration)                  |      `0.15`      | `number`                      |
+| [waitForRelease](#waitforrelease)                      |      `true`      | `boolean`                     |
 | [easing](#easing)                                      |    `ease-out`    | `string`                      |
 | [cancellationPeriod](#cancellationperiod)              |       `75`       | `number`                      |
 | [trigger](#trigger)                                    |     `"auto"`     | `string \| boolean \| "auto"` |
@@ -455,6 +457,13 @@ export default {
 
 </details>
 
+#### waitForRelease
+
+- **type:** `boolean`
+- _default:_ `true`
+
+> When `true`, the wave will not dissolve until the user releases the pointer.
+
 #### easing
 
 - **type:** `string` ([`<easing-function>`](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function))

src/__snapshots__/options.test.ts.snap

@@ -16,5 +16,6 @@ exports[`has documented default options 1`] = `
   "stopPropagation": false,
   "tagName": "div",
   "trigger": "auto",
+  "waitForRelease": true,
 }
 `;

src/options.ts

@@ -38,6 +38,12 @@ interface IVWaveDirectiveOptions {
    * 0.15
    */
   dissolveDuration: number
+  /* When `true`, the wave will not dissolve until the user releases the pointer.
+   *
+   * @default
+   * true
+   */
+  waitForRelease: boolean
   /**
    * Any valid CSS `<timing-function>`
    *
@@ -146,6 +152,7 @@ const DEFAULT_PLUGIN_OPTIONS: IVWavePluginOptions = {
   finalOpacity: 0.1,
   duration: 0.4,
   dissolveDuration: 0.15,
+  waitForRelease: true,
   easing: 'ease-out',
   cancellationPeriod: 75,
   trigger: 'auto',

src/wave.ts

@@ -39,7 +39,7 @@ const wave = (screenPos: Vector, el: HTMLElement, options: IVWaveDirectiveOption
   waveContainer.appendChild(waveEl)
   el.appendChild(waveContainer)
 
-  let shouldDissolveWave = false
+  let shouldDissolveWave = !options.waitForRelease
   const releaseWave = (e?: PointerEvent) => {
     if (typeof e !== 'undefined') {
       document.removeEventListener('pointerup', releaseWave)
@@ -67,8 +67,10 @@ const wave = (screenPos: Vector, el: HTMLElement, options: IVWaveDirectiveOption
     }, options.dissolveDuration * 1000)
   }
 
-  document.addEventListener('pointerup', releaseWave)
-  document.addEventListener('pointercancel', releaseWave)
+  if (options.waitForRelease) {
+    document.addEventListener('pointerup', releaseWave)
+    document.addEventListener('pointercancel', releaseWave)
+  }
 
   const token = setTimeout(() => {
     document.removeEventListener('pointercancel', cancelWave)