search

DrSensor / vue-annotator

Vue Component for drawing annotation (rect, polygon, etc) using SVG element
http://vue-annotator.surge.sh
MIT License
79 stars 16 forks source link

problem with drawing slot #27

Open YoussefKassem opened 4 years ago

YoussefKassem commented 4 years ago

Hello guys. When i use the slot="annotation" on the rect element the annotation doesnt go out of the canvas border. Furthermore the annotation doesn't move faster than my mouse cursor when selected. On the other hand the annotation i create my self with slot="drawing" on the rect element move way faster than my mouse cursor and they go outside the borders. Can anyone help me understand why this is happening?

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

<rect class="stroke" slot="annotation" x="100" y="100" width="100" height="100" />

YoussefKassem commented 4 years ago

when i set the restriction to 'parent' in the makeInteractable method inside the manipulate.js it still doesnt restrict the rectangle i draw to the borders of the canvas

restrict: fixDrawingMode ? undefined : { restriction: 'parent' },

YoussefKassem commented 4 years ago

I was able to solve the issue by making a small change in the Annotator.vue component.

<g ref="annotations" class="foreground" id=group> <slot name="drawing" /> </g>

I simply switched the annotation slot with the drawing slot inside the element which groups all the drawn annotations. Now when i draw rectangles they stay inside the parent div and dragging the boxes is smooth.