Fix AnnotatePoint positioning bug

[AgentHagu]

What is the purpose of this pull request?

• Documentation update
• Bug fix
• Feature addition or enhancement
• Code maintenance
• DevOps
• Improve developer experience
• Others, please explain:

Overview of changes:
Fixes #2728

Refer to #2728 (comment) for detailed explanation of issue and the fix employed

TLDR:

• AnnotatePoint normally computes its position based on its parent element's offsetWidth and offsetHeight
• However, if the parent element is hidden, offsetWidth and offsetHeight will return 0
• This will result in invalid results, like top: -Infinity%, left: -Infinity% css
• AnnotatePoint does not properly recompute its position when the parent element is no longer hidden

Anything you'd like to highlight/discuss:
NIL

Testing instructions:

1. Create a test site/page with AnnotatePoints in Annotate, both outside and within Tab, e.g.:

<annotate src="{{ baseUrl }}/gitAndGithub/branch/images/branchesAsLabels1.png" height="500">
<a-point x="2%" y="27%" label="[1]" opacity="0"/>
<a-point x="2%" y="47%" label="[2]" opacity="0"/>
<a-point x="35%" y="25%" label="[3]" opacity="0"/>
<a-point x="65%" y="10%" label="[4]" opacity="0"/>
<a-point x="85%" y="10%" label="[5]" opacity="0"/>
</annotate>

<tabs>
  <tab header="CLI">
    Text in the first tab
    <markdown>_some markdown_</markdown>
  </tab>
  <tab header="Sourcetree" >

<annotate src="{{ baseUrl }}/gitAndGithub/branch/images/branchesAsLabels1.png" height="500">
<a-point x="2%" y="27%" label="[1]" opacity="0"/>
<a-point x="2%" y="47%" label="[2]" opacity="0"/>
<a-point x="35%" y="25%" label="[3]" opacity="0"/>
<a-point x="65%" y="10%" label="[4]" opacity="0"/>
<a-point x="85%" y="10%" label="[5]" opacity="0"/>
</annotate>

  </tab>
</tabs>

2. Run markbind serve -d
3. Verify that the AnnotatePoints positioning is correct for both outside and within a Tab

Proposed commit message: (wrap lines at 72 characters)
Fix AnnotatePoint positioning bug

Add ResizeObserver to recompute and update AnnotatePoint
position whenever the Tab is opened or closed

---

Checklist: ☑️

• Updated the documentation for feature additions and enhancements
• Added tests for bug fixes or features
• Linked all related issues
• No unrelated changes

---

Reviewer checklist:

Indicate the SEMVER impact of the PR:

• Major (when you make incompatible API changes)
• Minor (when you add functionality in a backward compatible manner)
• Patch (when you make backward compatible bug fixes)

At the end of the review, please label the PR with the appropriate label: r.Major, r.Minor, r.Patch.

Breaking change release note preparation (if applicable):

• To be included in the release note for any feature that is made obsolete/breaking

Give a brief explanation note about:

• what was the old feature that was made obsolete
• any replacement feature (if any), and
• how the author should modify his website to migrate from the old feature to the replacement feature (if possible).

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 52.84%. Comparing base (8e52d96) to head (ad4ea43).
Report is 1 commits behind head on master.

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #2732   +/-   ##
=======================================
  Coverage   52.84%   52.84%           
=======================================
  Files         130      130           
  Lines        7162     7162           
  Branches     1572     1479   -93     
=======================================
  Hits         3785     3785           
  Misses       3222     3222           
  Partials      155      155           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[gerteck]

LGTM!

Ideally, we can add a testcase and manually trigger a resize and perhaps check the state if we have more bandwidth to do so in the future.

Using ResizeObserver accounts for image loading as well as dynamic image visibility to recalculate the annotation points.

[damithc]

Thanks for the quick fix @AgentHagu, @gerteck

Hope we can push this out as a new version soon.

[damithc]

Tried the new version and it works! Thanks again for the fix, @AgentHagu and @gerteck 💯