I'm currently working on a personal project that is similar to markup.io where users can load any website and add annotations. I am struggling to implement an annotation feature that functions like the one in markup.io:
- Does not disrupt the styling or layout of the annotated website
- Maintains its correct position when scrolling or resizing the window
Based on my observations, it seems like they insert an absolutely positioned div inside the clicked element. According to what I have read in the documentation, that div would align itself according to the nearest positioned ancestor. How can one accurately calculate the top and left values to position the annotation where the user clicks? Is there a more efficient method to achieve this?
I am using React for this project.
Methods I've attempted:
- Appended the following snippet of HTML to the clicked element:
<div style="width:0px; height:0px; position:relative;">
<div style="width:50px;height:50px;position:absolute; ">this is the annotation </div>
</div>
Issue: This disrupted the page layout due to the relatively positioned div affecting the document flow.
- Created a fixed overlay covering the entire page, obtained the CSS selector of the clicked element, and drew the annotation on the overlay at the x,y coordinates of the element.
Issue: Whenever the user scrolled or resized the window, the annotation had to be redrawn based on the new position of the element. This caused performance problems with 100+ annotations as getBoundingClientRect was used to fetch the new position, leading to reflows and impacting the website's overall performance.
I hope someone can offer guidance on how to overcome these obstacles!