# vue-annotator

> Vue Component for drawing annotation (box, etc)

Latest version **0.13.2** (published 2018-04-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-annotator
pnpm add vue-annotator
yarn add vue-annotator
bun add vue-annotator
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.13.2 |
| Published | 2018-04-17 |
| First published | 2017-12-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 190.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 80 |
| Author | Fahmi Akbar Wildana |
| Maintainers | cimenx |

## Links

- npm: https://www.npmjs.com/package/vue-annotator
- Repository: https://github.com/DrSensor/vue-annotator
- Homepage: http://vue-annotator.surge.sh
- Issues: https://github.com/DrSensor/vue-annotator/issues
- npm.io page: https://npm.io/package/vue-annotator

## Dependencies (3)

- [interactjs](https://npm.io/package/interactjs.md) ^1.3.3
- [svg.draw.js](https://npm.io/package/svg.draw.js.md) ^2.0.3
- [svg.select.js](https://npm.io/package/svg.select.js.md) ^2.1.2

## Recent versions

- 0.13.2 (latest) — 2018-04-17
- 0.13.1 — 2018-04-15
- 0.13.0 — 2018-04-14
- 0.12.1 — 2018-04-11
- 0.12.0 — 2018-04-11
- 0.11.5 — 2018-04-08
- 0.11.4 — 2018-04-07
- 0.11.3 — 2018-04-06
- 0.11.2 — 2018-04-06
- 0.11.1 — 2018-01-14
- 0.10.2 — 2018-01-03
- 0.10.1 — 2018-01-01
- 0.10.0 — 2017-12-30
- 0.9.0 — 2017-12-27

## README

# vue-annotator [![CircleCI](https://circleci.com/gh/DrSensor/vue-annotator.svg?)](https://circleci.com/gh/DrSensor/vue-annotator)
[![npm](https://img.shields.io/npm/v/vue-annotator.svg)](http://npmjs.com/vue-annotator)
[![npm](https://img.shields.io/npm/dm/vue-annotator.svg)](http://npmjs.com/vue-annotator)
[![donate](https://img.shields.io/badge/donate-$-yellowgreen.svg?maxAge=2592000&style=flat)](https://github.com/DrSensor/vue-annotator/blob/master/DONATE.md)

Create annotation using SVG and HTML element.

## Usage

> For complete example see [`src/stories/*/*.vue`](./src/stories)

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

    <img draggable="false" src="background.png" />

    <rect slot="annotation" stroke="green" x="300" y="150" width="170" height="100" />
    <polygon slot="annotation" stroke="purple" points="200,10 250,190 160,210" />

    <rect slot="drawing" stroke="red" />

</v-annotator>
```

```css
<style scoped>
@import '~vue-annotator/style.css';

/* Your beloved style */
</style>
```

<details>
<summary>Enable <code>--skipLibCheck</code> if using typescript</summary>

> 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 */
}
```

</details>

## API References

### Props
> \* : 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 |


### Slots
> \* : 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) | `<rect>`, `<ellipse>`, `<circle>`, `<polygon>`, `<path>`, `<foreignObject>` |
| `drawing` | *draw element via mouse click&drag | `<rect>`, `<ellipse>`, `<circle>` |

### Events
| Event name | Description | Parameters |
|---------- |-------- |---------- |
| `select` | emit when element is click/select | element: [`SVG.Element`](http://svgjs.com/elements/#elements) |
| `select-left` | emit when element is clicked with **left** mouse button | element: [`SVG.Element`](http://svgjs.com/elements/#elements) |
| `select-middle` | emit when element is clicked with **middle** mouse button | element: [`SVG.Element`](http://svgjs.com/elements/#elements) |
| `select-right` | emit when element is clicked with **right** mouse button | 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) |
| `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`

| Class name | Description | Notes
|---------- |-------- |--------- |
| `.svg_select_boundingRect` | define style of rectangle in selected element | only applicable on `<rect>`, `<circle>`, `<ellipse>` |
| `.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](https://github.com/DrSensor/vue-annotator/blob/master/CONTRIBUTING.md) for contributing directly via:
- [Pull Requests](https://github.com/DrSensor/vue-annotator/blob/master/CONTRIBUTING.md/#pull-requests) or
- [Create Issues](https://github.com/DrSensor/vue-annotator/blob/master/CONTRIBUTING.md/#create-issues)

## License
[MIT](https://github.com/DrSensor/vue-annotator/blob/master/LICENSE) License

---
_Source: https://npm.io/package/vue-annotator · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._