Configure "Show more" Display in Annotations Component as CSS

[joncameron]

Description

The amount of text shown and the "Show more" button should change depending on how the component changes shape to fill available space on the page.

Could be useful to have it be configurable when this button displays as a prop.

Done Looks Like

• Add prop for "Show more" display to be set up when component is initialized
• Identify how many rows are populating in the text
• Make CSS changes based on the height (show more/less)

[Dananji]

The display of 'Show more' button can be turned ON/OFF by using the value of showMoreSettings: { enableShowMore: false, textLineLimit: 6 } prop passed into MarkersDisplay component at the time of initialization.

The calculation for truncating longer annotation texts uses a temporary Canvas object to calculate average character width based on font, fontSize, and clientWidth of the annotation text HTML div element for a given annotation text.
Using this average character width, the code calculates the maximum number of characters the div can display without exceeding the textLineLimit value given in the props.

This calculation is performed every time the browser is resized, to accurately truncate the text as the component size changes.

Display of longer texts in an annotation:

Display of multiple shorter texts in a single annotation, where the count of texts in the annotation exceeds the given textLineLimit number: