From b540010af589683ad9e6dfa9baac60d0614d7ac0 Mon Sep 17 00:00:00 2001
From: Spartak <assorium@gmail.com>
Date: Wed, 10 Jun 2020 13:42:17 +0300
Subject: [PATCH] added watchers to checnge options reactively

---
 demo/VueRoughNotation.vue       | 37 +++++++++++++++++++++++++++++++++
 src/components/RoughNotation.js | 10 +++++++++
 2 files changed, 47 insertions(+)

diff --git a/demo/VueRoughNotation.vue b/demo/VueRoughNotation.vue
index 0d76aa2..72a8c63 100644
--- a/demo/VueRoughNotation.vue
+++ b/demo/VueRoughNotation.vue
@@ -98,6 +98,23 @@
       </div>
     </div>
 
+    <div class="section" style="background-color: #f5f5f5;">
+      <div class="content">
+        <h3>
+          <RoughNotation
+            :is-show="true"
+            type="box"
+            :color="colorChanging"
+            :stroke-width="strokeWidthChanging"
+            :padding="paddingChanging"
+          >Reactive change</RoughNotation>
+        </h3>
+        <p>
+        Color, Stroke width, Padding will change reactively
+        </p>
+      </div>
+    </div>
+
     <div class="content">
       <p>
         <a target="_blank" href="https://github.com/Leecason/vue-rough-notation/tree/master/demo">
@@ -109,6 +126,12 @@
 </template>
 
 <script>
+Array.prototype.getNext = function () {
+	let el = this.shift();
+	this.push( el );
+	return el;
+}
+
 export default {
   name: 'VueRoughNotation',
 
@@ -189,6 +212,20 @@ export default {
     ],
     showGroup: false,
     showNoAnim: false,
+    colorChanging: '#263238',
+    strokeWidthChanging: 1,
+    paddingChanging: 1
   }),
+
+  mounted() {
+    let colors = ['#263238', '#b71c1c', '#4a148c', '#0d47a1', '#ffd54f', '#ffd54f', '#1b5e20', '#f57f17']
+    setInterval(() => {
+      this.colorChanging = colors.getNext()
+      if(this.strokeWidthChanging > 6) this.strokeWidthChanging = 0
+      this.strokeWidthChanging++
+      if(this.paddingChanging > 9) this.paddingChanging = 0
+      this.paddingChanging += 3
+    }, 500)
+  },
 };
 </script>
diff --git a/src/components/RoughNotation.js b/src/components/RoughNotation.js
index 9ef17cc..5dc7248 100644
--- a/src/components/RoughNotation.js
+++ b/src/components/RoughNotation.js
@@ -94,6 +94,16 @@ export default (options) => ({
         this.hide();
       }
     }, { immediate: true });
+
+    this.$watch('color', (value) => {
+      this.annotation.color = value
+    });
+    this.$watch('strokeWidth', (value) => {
+      this.annotation.strokeWidth = value
+    });
+    this.$watch('padding', (value) => {
+      this.annotation.padding = value
+    });
   },
 
   beforeDestroy () {