# vue-annotation

> Draw Rect, Bbox, Annotation, Labeling Library For Vue3 Composition api

Latest version **0.3.0** (published 2024-01-31) · MIT license · 0 weekly downloads

## Install

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

## 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.3.0 |
| Published | 2024-01-31 |
| First published | 2024-01-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 6 |
| Unpacked size | 304.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Mr.Jeon |
| Maintainers | mrjeon15 |
| Keywords | vue, vue3, annotation, labeling, draggable, resize, simple |

## Links

- npm: https://www.npmjs.com/package/vue-annotation
- Homepage: https://github.com/JeonChangMin15/vue-annotation
- npm.io page: https://npm.io/package/vue-annotation

## Dependencies (6)

- [d3](https://npm.io/package/d3.md) ^7.8.5
- [vue](https://npm.io/package/vue.md) ^3.3.11
- [sass](https://npm.io/package/sass.md) ^1.70.0
- [lodash](https://npm.io/package/lodash.md) ^4.17.21
- [vue-router](https://npm.io/package/vue-router.md) ^4.2.5
- [@vueuse/core](https://npm.io/package/@vueuse/core.md) ^10.7.2

## Alternatives

- [exif-parser](https://npm.io/package/exif-parser.md) — 3.8M weekly downloads
- [vite-plugin-compression](https://npm.io/package/vite-plugin-compression.md) — 569.5K weekly downloads
- [pica](https://npm.io/package/pica.md) — 442.4K weekly downloads
- [@reportportal/client-javascript](https://npm.io/package/@reportportal/client-javascript.md) — 408.8K weekly downloads
- [@tldraw/state](https://npm.io/package/@tldraw/state.md) — 316.0K weekly downloads

## Recent versions

- 0.3.0 (latest) — 2024-01-31
- 0.2.5 — 2024-01-31
- 0.2.4 — 2024-01-30
- 0.2.3 — 2024-01-30
- 0.2.2 — 2024-01-29
- 0.2.1 — 2024-01-29
- 0.2.0 — 2024-01-29
- 0.1.0 — 2024-01-29
- 0.0.10 — 2024-01-29
- 0.0.9 — 2024-01-29
- 0.0.8 — 2024-01-29
- 0.0.7 — 2024-01-29
- 0.0.6 — 2024-01-29
- 0.0.5 — 2024-01-29
- 0.0.4 — 2024-01-29
- … 3 more at https://npm.io/package/vue-annotation/versions

## README

# Simple Vue Annotation for Vue3 Composition api

### Example

![annotation](https://github.com/JeonChangMin15/vue-annotation/assets/89255072/fdea21da-ea02-4ac2-951e-71078f7c3bd0)

### Features

- Draggable and Resizeable
- Customize Box style
- Get Box Info (position, width, height)

### Install

```
npm i vue-annotation
```

### How To Use

```javascript
<script setup lang="ts">
import { watch } from "vue";
import { useAnnotation } from "vue-annotation";
const { svgRef, globalBox, deleteBox } = useAnnotation({ boxStrokeWidth: 2 });

// if want to see box infos, write this code
watch(globalBox, () => {
  console.log(globalBox);
});
</script>

<template>
  <div>
    <button @click="deleteBox">Box Delete Button</button>
    <svg
      ref="svgRef"
      :width="200"
      :height="200"
    >
      <image href="/src/assets/images/chiwa.jpg" />
    </svg>
  </div>
</template>
```

- This library uses D3.js, so it draws boxes inside an SVG tag within a template tag. To do this, it is necessary to declare the **svgRef** from the useAnnotation composable as the ref of the SVG tag.

### useAnnotation Props

| Props             | Type   | Default |
| ----------------- | ------ | ------- |
| boxStrokeWidth    | number | 1       |
| boxStrokeColor    | string | blue    |
| boxFillColor      | string | #FFCCCC |
| boxFillOpacity    | number | 0.4     |
| circleRadius      | number | 6       |
| circleFillColor   | string | red     |
| circleStrokeColor | string | black   |

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