Refactoring and adding some basic events

- Emit move related event, close #15
- Emit resize related event
- Breaking change draw related event by renaming event name
- Refactor by registering interact logic using MutationObserver

Author: DrSensor

README.md

@@ -62,6 +62,7 @@ export class MyCanvas extends Vue {
 
 </details>
 
+For complete example see [`src/stories/*/*.vue`](./src/stories)
 
 ### Props
 > \* : must be set if no background
@@ -70,7 +71,7 @@ export class MyCanvas extends Vue {
 |---------- |-------- |---------- |---------- |---------- |
 | `width` | width of drawing canvas | `Number` | *optional | width of background |
 | `height` | width of drawing canvas | `Number` | *optional | height of background |
-| `grid` | set grid for sanpping. `:grid="[w,h]"` for setting width and height. `:grid="w"` for setting grid in square | `Array[2]` or `Number` | optional | `null` |
+| `grid` | set grid for snapping. `:grid="[w,h]"` for setting width and height. `:grid="w"` for setting grid in square | `Array[2]` or `Number` | optional | `null` |
 | `minSize` | set minimum size of annotation. `:minSize="[w,h]"` for set minimum width and height of annotation size. `:grid="w"` for set minimum width and height of annotation size equal to `w` | `Array[2]` or `Number` | optional | `false` |
 | `drawing` | switch to drawing mode | `Boolean` | optional | `false` |
 | `inertia` | enable inertia moment animation when interacting | `Boolean` | optional | `false` |
@@ -92,14 +93,19 @@ export class MyCanvas extends Vue {
 |---------- |-------- |---------- |
 | `select` | emit when element is click/select | element: [`SVG.Element`](http://svgjs.com/elements/#elements) |
 | `unselect` | emit when element is unselected (by clicking the background) | element: [`SVG.Element`](http://svgjs.com/elements/#elements) |
-| `drawfinish` | emit when drawing element is finish | element: [`SVG.Element`](http://svgjs.com/elements/#elements) |
-| `drawcancel` | emit when drawing element is canceled (via right click) |
+| `move` | emit when element is moved | element: [`SVG.Element`](http://svgjs.com/elements/#elements) |
+| `move-end` | emit __after__ the element is moved | element: [`SVG.Element`](http://svgjs.com/elements/#elements) |
+| `resize` | emit when element is resized | element: [`SVG.Element`](http://svgjs.com/elements/#elements) |
+| `resize-end` | emit __after__ the element is resized | element: [`SVG.Element`](http://svgjs.com/elements/#elements) |
+| `draw` | emit when drawing an element | element: [`SVG.Element`](http://svgjs.com/elements/#elements) |
+| `draw-end` | emit when drawing element is finish | element: [`SVG.Element`](http://svgjs.com/elements/#elements) |
+| `draw-cancel` | emit when drawing element is canceled (via right click) |
 | `update:delete` | emit when shape was successfully deleted |
 
 > Tips: use `element.node.isSameNode(this.$refs.myAnnotation)` for identifying the element.
 
 ### Style CSS
-> Vue-Annotator use `svg.select.js` with this predefined style that can be override
+> Vue-Annotator use `svg.select.js`
 
 | Class name | Description | Notes
 |---------- |-------- |--------- |

index.d.ts

@@ -32,12 +32,6 @@ export default class VAnnotator extends Vue {
     background: SVGForeignObjectElement
     annotations: SVGGElement
 
-    /** @see select.js */
-    selectables: Interactable
-
-    /** @see manipulate.js */
-    interactables: InteractStatic[]
-
     /** @see drawing.js */
     drawingable?: Interactable
   }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-annotator",
-  "version": "0.12.1",
+  "version": "0.13.0",
   "description": "Vue Component for drawing annotation (box, etc)",
   "homepage": "http://vue-annotator.surge.sh",
   "repository": "github:DrSensor/vue-annotator",

src/components/Annotator.vue

@@ -89,12 +89,30 @@ export default {
     } else this.$forceUpdate()
   },
 
+  created () {
+    this.observer = new MutationObserver(mutations => {
+      for (const mutation of mutations) {
+        if (mutation.type === 'childList') {
+          for (const node of mutation.addedNodes) {
+            this.makeInteractable(node, this.drawing)
+            this.makeSelectable(node)
+          }
+          for (const node of mutation.removedNodes)
+            interact(node).unset()
+        }
+      }
+    })
+  },
+
   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)
+    this.$nextTick(() => {
+      this.background = SVG.adopt(this.$refs.bgSvg)
+      this.annotations = SVG.adopt(this.$refs.annotations)
+      this.enableSelection(!this.noSelect)
+      this.enableInteraction(!this.noInteract)
+      this.enableDrawing(this.drawing)
+      this.observer.observe(this.annotations.node, { childList: true })
+    })
   }
 }
 </script>

src/mixins/delete.js

@@ -1,3 +1,4 @@
+import interact from 'interactjs'
 import SVG from 'svg.js'
 import 'svg.select.js'
 
@@ -13,26 +14,13 @@ export default {
   },
 
   methods: {
-    $_gracefulUnset (elm) {
-      const unset = (interacts, callback) => interacts.forEach((interack, index) => {
-        if (interack.target.isSameNode(elm)) {
-          callback(interack)
-          delete interacts[index]
-          interacts.splice(index, 1)
-        }
-      })
-
-      unset(this.interactables, inter => inter.unset())
-      unset(this.selectables, inter => this.background.off('click', inter.unselectListener))
-    },
-
     triggerDelete () {
       this.$refs.annotations.childNodes.forEach(elm => {
         const shape = SVG.adopt(elm)
         if (shape.data('selected')) {
-          this.$_gracefulUnset(elm)
+          interact(elm).unset()
           shape.selectize(false, { deepSelect: ['g', 'foreignObject', 'polygon'].includes(shape.type) })
-          setTimeout(() => shape.remove(), 100)   // Dirty hack for multiple select delete
+          this.$nextTick(() => shape.remove())
         }
       })
       this.$emit('update:delete', false)

src/mixins/drawing.js

@@ -37,17 +37,17 @@ export default {
                 .attr('oncontextmenu', 'return false;')
                 .on('contextmenu', event => {
                   annotator.draw('cancel').data('canceled', true)
-                  this.$emit('drawcancel')
+                  this.$emit('draw-cancel')
                 })
             },
 
-            onmove: event => annotator.draw('update', event),
+            onmove: event => this.$emit('draw', annotator.draw('update', event)),
 
             onend: event => {
               if (!annotator.data('canceled')) {
                 annotator.draw('stop', event).style('cursor', null).removeClass('foreground').toParent(this.annotations).off('contextmenu')
                 this.$forceUpdate()
-                this.$emit('drawfinish', annotator)
+                this.$emit('draw-end', annotator)
               } else annotator.off('contextmenu').data('canceled', null)
 
               for (const key in attr) {

src/mixins/manipulate.js

@@ -16,12 +16,6 @@ export default {
     multipleSelect: Boolean
   },
 
-  data () {
-    return {
-      interactables: []     // waste of memory?
-    }
-  },
-
   methods: {
     /** @func fixDrawingMode is hard fix, need to think another solution */
     makeInteractable (node, fixDrawingMode = false) {
@@ -39,8 +33,10 @@ export default {
           },
           autoScroll: true,
 
+          onend: event => this.$emit('move-end', SVG.adopt(event.target)),
+
           // call this function on every dragmove event
-          onmove: event => SVG.adopt(event.target).dmove(event.dx, event.dy)
+          onmove: event => this.$emit('move', SVG.adopt(event.target).dmove(event.dx, event.dy))
         })
 
         .resizable({
@@ -61,7 +57,9 @@ export default {
             min: { width: this.minWidth, height: this.minHeight }
           },
 
-          // call this function on every resizemove event
+          onend: event => this.$emit('resize-end', SVG.adopt(event.target)),
+
+          // called on every resizemove event
           onmove: (event) => {
             const target = SVG.adopt(event.target)
 
@@ -104,6 +102,8 @@ export default {
                 target.size(event.rect.width, event.rect.height)
                 break
             }
+
+            this.$emit('resize', target)
           }
         })
 
@@ -113,28 +113,20 @@ export default {
     enableInteraction (enabled = true) {
       if (this.$refs.annotations.hasChildNodes()) {
         this.$refs.annotations.childNodes.forEach((node, id) => {
-          if (!enabled && this.interactables.length) {
-            this.interactables.forEach(interaction => interaction.draggable(false).resizable(false))
-          } else this.interactables[id] = this.makeInteractable(node)
+          if (!enabled) {
+            interact(node).draggable(false).resizable(false)
+          } else 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))
+    this.$on('draw-end', annotator => this.makeInteractable(annotator.node, false))
   },
 
-  updated () {
-    this.$_onUpdate(this.drawing)
+  beforeDestroy () {
+    this.$off('draw-end')
   },
 
   computed: {

src/mixins/select.js

@@ -7,12 +7,6 @@ export default {
     multipleSelect: Boolean
   },
 
-  data () {
-    return {
-      selectables: []     // waste of memory?
-    }
-  },
-
   methods: {
     makeSelectable (node) {
       const annotator = SVG.adopt(node)
@@ -57,36 +51,35 @@ export default {
       }
       const selection = interact(node).on('tap', selectListener)
 
-      selection.unselectListener = () => {
-        if (annotator.data('selected')) {
-          annotator.selectize(false, { deepSelect: ['g', 'foreignObject', 'polygon'].includes(annotator.type) })
-          annotator.data('selected', null)
-          this.$emit('unselect', annotator)
-        }
-      }
-
-      this.background.on('click', selection.unselectListener)
       return selection
     },
 
     enableSelection (enabled = true) {
       if (this.$refs.annotations.hasChildNodes()) {
         this.$refs.annotations.childNodes.forEach((node, id) => {
-          if (!enabled && this.selectables.length) {
-            this.selectables.forEach(selection => selection.off('tap'))
+          if (!enabled) {
+            interact(node).selection.off('tap')
             this.background.fire('click') // unselect all
             this.background.off('click')
-          } else this.selectables[id] = this.makeSelectable(node)
+          } else {
+            this.makeSelectable(node)
+            this.background.on('click', this.unselectAll)
+          }
         })
       }
-    }
-  },
+    },
 
-  updated () {
-    if ((this.$refs.annotations.hasChildNodes() ? this.$refs.annotations.childNodes.length : 0) > this.selectables.length) {
-      const element = this.$refs.annotations.childNodes[this.$refs.annotations.childNodes.length - 1]
-      const selection = this.makeSelectable(element)
-      this.selectables.push(selection)
+    unselectAll () {
+      if (this.$refs.annotations.hasChildNodes()) {
+        this.$refs.annotations.childNodes.forEach((node, id) => {
+          const annotator = SVG.adopt(node)
+          if (annotator.data('selected')) {
+            annotator.selectize(false, { deepSelect: ['g', 'foreignObject', 'polygon'].includes(annotator.type) })
+            annotator.data('selected', null)
+            this.$emit('unselect', annotator)
+          }
+        })
+      }
     }
   }
 }

src/stories/Interact and Manipulate/Create.vue

@@ -2,7 +2,7 @@
   <div id="annotation">
     <button @click="drawing = !drawing">{{drawing ? "stop" : "drawing" }}</button>
     <annotations :drawing="drawing" :inertia="inertia" :minSize="minSize" :grid="grid" :multipleSelect="multipleSelect"
-                @drawfinish="drawfinish" @drawcancel="drawcancel">
+                @draw-end="drawfinish" @draw-cancel="drawcancel" @draw="onDraw">
       <img draggable="false" src="https://cdn.css-tricks.com/wp-content/uploads/2017/01/vue-2-1.jpg" />
       <!-- <polygon class="stroke" slot="drawing" /> not supported yet -->
       <rect class="stroke" slot="drawing" />
@@ -40,6 +40,9 @@ export default {
     },
     drawcancel () {
       this.$action('cancel drawing')
+    },
+    onDraw (element) {
+      console.log(element.node)
     }
   }
 }

src/stories/Interact and Manipulate/DetectChange.vue

@@ -0,0 +1,62 @@
+<template>
+  <div id="annotation">
+    <annotations @move-end="moved" @resize="resized" :minSize="minSize" width="600" height="600" :grid="grid" :inertia="inertia" :multipleSelect="multipleSelect">
+      <rect class="stroke" slot="annotation" x="100" y="100" width="100" height="100" />
+      <rect class="stroke" slot="annotation" x="300" y="150" width="170" height="100" />
+    </annotations>
+  </div>
+</template>
+
+<script>
+import Annotator from 'components/Annotator'
+
+import { number, boolean } from '@storybook/addon-knobs/dist/vue'
+
+export default {
+  data () {
+    return {
+      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)
+    }
+  },
+  methods: {
+    moved (element) {
+      const nextRect = element.next()
+      if (nextRect)
+        nextRect.animate().move(element.x(), element.y())
+    },
+
+    resized (element) {
+      const nextRect = element.next()
+      if (nextRect)
+        nextRect.size(element.width(), element.height())
+    }
+  },
+  components: {
+    annotations: Annotator
+  }
+}
+</script>
+
+<style scoped>
+svg {
+  background: whitesmoke;
+}
+
+#annotation {
+  width: 100%;
+  height: 100%;
+}
+
+.stroke {
+  stroke: limegreen;
+  stroke-width: 3px;
+}
+
+.stroke:hover {
+  stroke: orange;
+  stroke-width: 3px;
+}
+</style>