From 7f6bf42f60c64219235fb97c889886acf6c0e264 Mon Sep 17 00:00:00 2001
From: Yifan Xu <jamesxu182@gmail.com>
Date: Fri, 26 Apr 2019 15:09:52 +0100
Subject: [PATCH] provide an optional property to detect_on of interactivity

---
 src/App.vue                         |  1 +
 src/components/Main.vue             |  9 +++++++++
 src/vue-particles/vue-particles.vue | 13 ++++++++++---
 3 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index ac78b014..2c4c6c11 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -31,6 +31,7 @@
         hoverMode="grab"
         :clickEffect="true"
         clickMode="push"
+        detectOn="canvas"
       >
       </vue-particles>
 
diff --git a/src/components/Main.vue b/src/components/Main.vue
index bd591912..39b0842b 100644
--- a/src/components/Main.vue
+++ b/src/components/Main.vue
@@ -175,6 +175,15 @@ Vue.use(VueParticles)
             "push", "remove", "repulse", "bubble"
           </td>
         </tr>
+        <tr>
+          <td data-th="Name">detectOn</td>
+          <td data-th="Type">String</td>
+          <td data-th="Default">canvas</td>
+          <td data-th="Description">
+            Available detect on:
+            "canvas", "window"
+          </td>
+        </tr>
       </table>
     </div>
 
diff --git a/src/vue-particles/vue-particles.vue b/src/vue-particles/vue-particles.vue
index aa54ea15..92d704ba 100644
--- a/src/vue-particles/vue-particles.vue
+++ b/src/vue-particles/vue-particles.vue
@@ -17,6 +17,7 @@
     :hoverMode="hoverMode"
     :clickEffect="clickEffect"
     :clickMode="clickMode"
+    :detectOn="detectOn"
   ></div>
 </template>
 <script>
@@ -88,6 +89,10 @@
       clickMode: {
         type: String,
         default: 'push'
+      },
+      detectOn: {
+        type: String,
+        default: 'canvas'
       }
     },
     mounted () {
@@ -109,7 +114,8 @@
           this.hoverEffect,
           this.hoverMode,
           this.clickEffect,
-          this.clickMode
+          this.clickMode,
+          this.detectOn
         )
       })
     },
@@ -129,7 +135,8 @@
         hoverEffect,
         hoverMode,
         clickEffect,
-        clickMode
+        clickMode,
+        detectOn,
       ) {
         particlesJS(this.id, {
           "particles": {
@@ -197,7 +204,7 @@
             }
           },
           "interactivity": {
-            "detect_on": "canvas",
+            "detect_on": detectOn,
             "events": {
               "onhover": {
                 "enable": hoverEffect,