vue-annotator 


Create annotation using SVG and HTML element.

Usage

> For complete example see src/stories//.vue

``html
:drawing="enableDrawingMode"
@select="openDialog"
:minSize="[50, 50]"
:grid="[5, 5]"
:multipleSelect="keyIsDown.Ctrl"
>





`

`css

`

Enable --skipLibCheck if using typescript

> Due to https://github.com/taye/interact.js/issues/623

In tsconfig.json

`js
{
compilerOptions: {
skipLibCheck: true
}
}
`

Now it should work fine

`ts
import { Vue, Component } from 'vue-property-decorator'
import VAnnotator from 'vue-annotator'

@Component({ components: { VAnnotator } })
export class MyCanvas extends Vue {
/* Your beloved logic /
}
`

API References

$3

> \* : must be set if no background

| Parameters | Description | Type | Must Specify | Default value |
|---------- |-------- |---------- |---------- |---------- |
| width | width of drawing canvas | Number | *optional | width of background |
| height | width of drawing canvas | Number | *optional | height of background |
| 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 |
| min-size | 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 |
| multiple-select | enable multiple select | Boolean | optional | false |
| mouse-select | restrict select only for specific mouse button | String of left\|right\|middle | optional |
| delete.sync | delete selected element when set to true | Boolean | optional |




$3

> \* : will error when more than 1 element to be provided

| Method name | Description | Accepted Element |
|---------- |-------- |---------- |
| default | background element of annotation | Any HTML element |
| annotation | annotation element (accept SVG element) | , , , , , |
| drawing | *draw element via mouse click&drag | , , |

$3


| Event name | Description | Parameters |
|---------- |-------- |---------- |
| select | emit when element is click/select | element: SVG.Element |
| select-left | emit when element is clicked with left mouse button | element: SVG.Element |
| select-middle | emit when element is clicked with middle mouse button | element: SVG.Element |
| select-right | emit when element is clicked with right mouse button | element: SVG.Element |
| unselect | emit when element is unselected (by clicking the background) | element: SVG.Element |
| move | emit when element is moved | element: SVG.Element |
| move-end | emit __after__ the element is moved | element: SVG.Element |
| resize | emit when element is resized | element: SVG.Element |
| resize-end | emit __after__ the element is resized | element: SVG.Element |
| draw | emit when drawing an element | element: SVG.Element |
| draw-end | emit when drawing element is __finish__ | element: SVG.Element |
| 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.

$3


> Vue-Annotator use svg.select.js

| Class name | Description | Notes
|---------- |-------- |--------- |
| .svg_select_boundingRect | define style of rectangle in selected element | only applicable on , , |
| .svg_select_points | define style of edge circles in selected element |

default style
`CSS
.svg_select_points {
stroke-width: 1;
fill: black;
stroke-dasharray: 10 10;
stroke: black;
stroke-opacity: 0.8;
pointer-events: none; / This ons is needed if you want to deselect or drag the shape/
}

.svg_select_boundingRect {
display: none;
}
``

Support

See CONTRIBUTING.md for contributing directly via:
- Pull Requests or
- Create Issues

License

MIT License