Comment Pin Positioning
Setup
1
Add custom metadata when comment is added
You have two options for adding comments with custom positioning metadata:
Option A: Velt-Managed Click Events
- Use the
onCommentAdd
prop of the VeltComments component to add custom metadata when a comment is added. - You need to set the mandatory
commentType: 'manual'
property to the metadata object.
<VeltComments onCommentAdd={(event) => yourMethod(event)} />
const yourMethod = (event) => {
event?.addContext({ postion: {x: 200, y: 100}, commentType: 'manual'});
}
Option B: Custom Click Event Handling
- Handle click events on your canvas and use the
addManualComment
method to create a comment with custom metadata.
const context = {
postion: {x: 200, y: 100},
};
const commentElement = useCommentUtils();
commentElement.addManualComment({ context });
2
Retrieve all Comment Annotations
Retrieve all Comment Annotations
using the useCommentAnnotations()
hook.
To learn more about the useCommentAnnotations()
hook, read here.
let commentAnnotations = useCommentAnnotations()
3
Render the Velt Comment Pin component and set the position
Add the Velt Comment Pin
component and pass in the Comment Annotation Id
.
Now retrieve the context
to retrieve the custom metadata you set earlier and use it to set the position of the Comment Pin
.
let commentAnnotations = useCommentAnnotations()
return (
<div className='comments-container'>
{
commentAnnotations.map((commentAnnotation) => {
return (
<div key={commentAnnotation.annotationId} style={{
position: 'absolute',
left: commentAnnotation.context.position.x + dragPosition.x,
top: commentAnnotation.context.position.y + dragPosition.y,
transform: 'translate(0%, -100%)'
}}>
<VeltCommentPin annotationId={commentAnnotation.annotationId}></VeltCommentPin>
</div>
)
})
}
</div>
)