Security News
Introducing the Socket Python SDK
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
vue-annotator
Advanced tools
Create annotation using SVG and HTML element.
<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" />
</annotator>
* : 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 sanpping. :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 |
multipleSelect | enable multiple select | Boolean | optional | false |
delete.sync | delete selected element when set to true | Boolean | optional |
* : 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> |
Event name | Description | Parameters |
---|---|---|
select | emit when element is click/select | element: SVG.Element |
unselect | emit when element is unselected (by clicking the background) | element: SVG.Element |
drawfinish | emit when drawing element is finish | element: SVG.Element |
drawcancel | 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.
Vue-Annotator use
svg.select.js
with this predefined style that can be override
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
.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;
}
See CONTRIBUTING.md for contributing directly via:
MIT License
FAQs
Vue Component for drawing annotation (box, etc)
The npm package vue-annotator receives a total of 185 weekly downloads. As such, vue-annotator popularity was classified as not popular.
We found that vue-annotator demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
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.
Security News
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
Security News
Floating dependency ranges in npm can introduce instability and security risks into your project by allowing unverified or incompatible versions to be installed automatically, leading to unpredictable behavior and potential conflicts.
Security News
A new Rust RFC proposes "Trusted Publishing" for Crates.io, introducing short-lived access tokens via OIDC to improve security and reduce risks associated with long-lived API tokens.