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.

   React / Next.js

   <VeltComments onCommentAdd={(event) => yourMethod(event)} />
   
   const yourMethod = (event) => {
     event?.addContext({ position: {x: 200, y: 100}, commentType: 'manual'});
   }
   

   Other Frameworks

   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'});
   });
   
   

   Option B: Custom Click Event Handling

   • Handle click events on your canvas and use the addManualComment method to create a comment with custom metadata.

   React / Next.js

   const context = {
     position: {x: 200, y: 100},
   };
   const commentElement = useCommentUtils();
   commentElement.addManualComment({ context });
   

   Other Frameworks

   const context = {
     position: {x: 200, y: 100},
   };
   const commentElement = Velt.getCommentElement();
   commentElement.addManualComment({ context: context});
   
2. Retrieve all Comment Annotations

   Retrieve all Comment Annotations using the useCommentAnnotations() hook.

   To learn more about the useCommentAnnotations() hook, read here.

   React / Next.js

   let commentAnnotations = useCommentAnnotations()
   

   Other Frameworks

   const commentElement = Velt.getCommentElement();
   let subscription = commentElement.getAllCommentAnnotations().subscribe((commentAnnotations) => {
     // console.log(commentAnnotations);
   });
   

   To unsubscribe from the subscription:

   subscription?.unsubscribe()
   
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.

   React / Next.js

   
   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>
   )
   

   Other Frameworks

   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);
       }
     });
   }
   
   

React / Next.js

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>
  )
}

<script>
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'});
});

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);
    }
  });
}

</script>