Fix dynamic slot not interactable

- Fixes #2 by internally listening on @drawfinish

Author: DrSensor

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-annotator",
-  "version": "0.12.0",
+  "version": "0.12.1",
   "description": "Vue Component for drawing annotation (box, etc)",
   "homepage": "http://vue-annotator.surge.sh",
   "repository": "github:DrSensor/vue-annotator",
@@ -50,10 +50,10 @@
     "surge": "^0.19.0"
   },
   "peerDependencies": {
-    "svg.js": "^2.6.3"
+    "svg.js": "^2.6.4"
   },
   "dependencies": {
-    "interactjs": "^1.3.2",
+    "interactjs": "^1.3.3",
     "svg.draw.js": "^2.0.3",
     "svg.select.js": "^2.1.2"
   }

src/components/Annotator.vue

@@ -73,15 +73,15 @@ export default {
 
   updated () {
     this.w = parseInt(this.width) || this.$refs.bg.scrollWidth
-    this.h = parseInt(this.width) || this.$refs.bg.scrollHeight
+    this.h = parseInt(this.height) || this.$refs.bg.scrollHeight
   },
 
   beforeMount () {
     if (this.$slots.default) {
       const media = this.$slots.default.filter(el => ['img', 'video', 'audio', 'picture'].includes(el.tag))
       const interval = setInterval(() => {
         const loadComplete = media.every(el => el.elm.complete)
-        if (loadComplete) {
+        if (loadComplete && this.$refs.annotations) {
           clearInterval(interval)
           this.$forceUpdate()
         }
@@ -92,7 +92,6 @@ export default {
   mounted () {
     this.background = SVG.adopt(this.$refs.bgSvg)
     this.annotations = SVG.adopt(this.$refs.annotations)
-
     this.enableInteraction(!this.noInteract)
     this.enableSelection(!this.noSelect)
     this.enableDrawing(this.drawing)

src/mixins/manipulate.js

@@ -118,15 +118,23 @@ export default {
           } else this.interactables[id] = this.makeInteractable(node)
         })
       }
+    },
+
+    $_onUpdate (isDrawing) {
+      if ((this.$refs.annotations.hasChildNodes() ? this.$refs.annotations.childNodes.length : 0) > this.interactables.length) {
+        const element = this.$refs.annotations.childNodes[this.$refs.annotations.childNodes.length - 1]
+        const interaction = this.makeInteractable(element, isDrawing)
+        this.interactables.push(interaction)
+      }
     }
   },
 
+  mounted () {
+    this.$on('drawfinish', () => this.$_onUpdate(false))
+  },
+
   updated () {
-    if ((this.$refs.annotations.hasChildNodes() ? this.$refs.annotations.childNodes.length : 0) > this.interactables.length) {
-      const element = this.$refs.annotations.childNodes[this.$refs.annotations.childNodes.length - 1]
-      const interaction = this.makeInteractable(element, true)
-      this.interactables.push(interaction)
-    }
+    this.$_onUpdate(this.drawing)
   },
 
   computed: {

src/stories/Interact and Manipulate/Select.vue

@@ -2,10 +2,14 @@
   <div id="annotation">
     <pre>Try to open <b>Action Logger</b> panel</pre>
     <pre>and also Vue-devtools > Events</pre>
+    <button @click="onAdd">Add rectangle</button>
     <annotations :minSize="minSize" width="600" height="600" :grid="grid" :inertia="inertia" :multipleSelect="multipleSelect"
                  @select="selected" @unselect="unselect">
+      <img draggable="false" src="https://cdn.css-tricks.com/wp-content/uploads/2017/01/vue-2-1.jpg" />
       <polygon ref="myAnnotation" class="stroke" slot="annotation" points="200,10 250,190 160,210" />
-      <rect class="stroke" slot="annotation" x="300" y="150" width="170" height="100" />
+      <template slot="annotation" v-for="(offset, key) in offsetList">
+        <rect class="stroke" :x="300+offset" :y="150+offset" width="170" height="100" :key="key" />
+      </template>
     </annotations>
   </div>
 </template>
@@ -22,7 +26,8 @@ export default {
       minSize: number('minimum diameter', 50),
       grid: [number('gird width', 0), number('gird height', 0)],
       inertia: boolean('enable inertia', true),
-      multipleSelect: boolean('enable multiple select', false)
+      multipleSelect: boolean('enable multiple select', false),
+      offsetList: [10,20,30]
     }
   },
   components: {
@@ -44,6 +49,11 @@ export default {
 
     unselect (element) {
       this.$action('unselect', `<${element.type}>`)
+    },
+
+    onAdd () {
+      const lastOffset = this.offsetList[this.offsetList.length - 1]
+      this.offsetList.push(lastOffset+10)
     }
   }
 }