Documentation Index
Fetch the complete documentation index at: https://docs.velt.dev/docs/llms.txt
Use this file to discover all available pages before exploring further.
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.
React / Next.js
Other Frameworks
<VeltComments onCommentAdd={(event) => yourMethod(event)} />
const yourMethod = (event) => {
event?.addContext({ position: {x: 200, y: 100}, commentType: 'manual'});
}
const veltCommentsTag = document.querySelector('velt-comments');
veltCommentsTag?.addEventListener('onCommentAdd', (event) => {
console.log('*** onCommentAdd ***');
console.log(event.detail);
event.detail?.addContext({ position: {x: 200, y: 100}, commentType: 'manual'});
});
- Handle click events on your canvas and use the
addManualComment method to create a comment with custom metadata.
React / Next.js
Other Frameworks
const context = {
position: {x: 200, y: 100},
};
const commentElement = useCommentUtils();
commentElement.addManualComment({ context });
const context = {
position: {x: 200, y: 100},
};
const commentElement = Velt.getCommentElement();
commentElement.addManualComment({ context: context});
Retrieve all Comment Annotations
Retrieve all Comment Annotations using the useCommentAnnotations() hook.To learn more about the useCommentAnnotations() hook, read here. React / Next.js
Other Frameworks
let commentAnnotations = useCommentAnnotations()
const commentElement = Velt.getCommentElement();
let subscription = commentElement.getAllCommentAnnotations().subscribe((commentAnnotations) => {
// console.log(commentAnnotations);
});
subscription?.unsubscribe()
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. React / Next.js
Other Frameworks
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>
)
const commentElement = Velt.getCommentElement();
let subscription = commentElement.getAllCommentAnnotations().subscribe((commentAnnotations) => {
renderCommentAnnotations(commentAnnotations);
});
const commentsContainer = document.getElementById('comments-container');
function renderCommentAnnotations(commentAnnotations) {
commentAnnotations.forEach((commentAnnotation) => {
if (!document.getElementById(`comment-pin-container-${commentAnnotation.annotationId}`)) {
// Add Comment Pin if it doesn't exist
const { x, y } = commentAnnotation.context.position;
var commentPinContainer = document.createElement('div');
commentPinContainer.className = 'comment-pin-container';
commentPinContainer.id = `comment-pin-container-${commentAnnotation.annotationId}`;
commentPinContainer.style.left = x + 'px';
commentPinContainer.style.top = y + 'px';
commentPinContainer.innerHTML = `<velt-comment-pin annotation-id="${commentAnnotation?.annotationId}"></velt-comment-pin>`;
commentsContainer?.appendChild(commentPinContainer);
}
});
}
import { VeltCommentPin, useCommentAnnotations } from '@veltdev/react';
export default function YourDocument() {
const yourMethod = (event) => {
event?.addContext({ position: {x: 200, y: 100}, commentType: 'manual'});
}
let commentAnnotations = useCommentAnnotations()
return (
<VeltComments onCommentAdd={(event) => yourMethod(event)} />
<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>
)
}
