Socket
Socket
Sign inDemoInstall

vue-annotator

Package Overview
Dependencies
5
Maintainers
1
Versions
14
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    vue-annotator

Vue Component for drawing annotation (box, etc)


Version published
Weekly downloads
217
decreased by-31.33%
Maintainers
1
Install size
2.68 MB
Created
Weekly downloads
 

Readme

Source

vue-annotator CircleCI

npm npm donate

Create annotation using SVG and HTML element.

Usage

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

<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>
<style scoped>
@import '~vue-annotator/style.css';

/* Your beloved style */
</style>
Enable --skipLibCheck if using typescript

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

In tsconfig.json

{
  compilerOptions: {
    skipLibCheck: true
  }
}

Now it should work fine

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

Props

* : must be set if no background

ParametersDescriptionTypeMust SpecifyDefault value
widthwidth of drawing canvasNumber*optionalwidth of background
heightwidth of drawing canvasNumber*optionalheight of background
gridset grid for snapping. :grid="[w,h]" for setting width and height. :grid="w" for setting grid in squareArray[2] or Numberoptionalnull
min-sizeset 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 wArray[2] or Numberoptionalfalse
drawingswitch to drawing modeBooleanoptionalfalse
inertiaenable inertia moment animation when interactingBooleanoptionalfalse
multiple-selectenable multiple selectBooleanoptionalfalse
mouse-selectrestrict select only for specific mouse buttonString of left|right|middleoptional
delete.syncdelete selected element when set to trueBooleanoptional

Slots

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

Method nameDescriptionAccepted Element
defaultbackground element of annotationAny HTML element
annotationannotation element (accept SVG element)<rect>, <ellipse>, <circle>, <polygon>, <path>, <foreignObject>
drawing*draw element via mouse click&drag<rect>, <ellipse>, <circle>

Events

Event nameDescriptionParameters
selectemit when element is click/selectelement: SVG.Element
select-leftemit when element is clicked with left mouse buttonelement: SVG.Element
select-middleemit when element is clicked with middle mouse buttonelement: SVG.Element
select-rightemit when element is clicked with right mouse buttonelement: SVG.Element
unselectemit when element is unselected (by clicking the background)element: SVG.Element
moveemit when element is movedelement: SVG.Element
move-endemit after the element is movedelement: SVG.Element
resizeemit when element is resizedelement: SVG.Element
resize-endemit after the element is resizedelement: SVG.Element
drawemit when drawing an elementelement: SVG.Element
draw-endemit when drawing element is finishelement: SVG.Element
draw-cancelemit when drawing element is canceled (via right click)
update:deleteemit 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 nameDescriptionNotes
.svg_select_boundingRectdefine style of rectangle in selected elementonly applicable on <rect>, <circle>, <ellipse>
.svg_select_pointsdefine style of edge circles in selected element

default style

.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:

License

MIT License

FAQs

Last updated on 17 Apr 2018

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc