rounded-annotation-bug

rounded-box-annotation-bug.md

RoundedBoxAnnotation

I've been working on yet to be released library which will be published under the npm scope @skribble.dev.

I encountered this bug while building out the functionality.

The box was rendering in the wrong position when the position of the target was not set to relative. This should not be the case since the position of the paths is generated from a rect which is relative the bounding box of the target.

• First checked that the rect being calculated was correct. I had to turn on rulers to ensure that the x and y offset values were correct.
• Then I tried using the BoxAnnotation. This positioned the svg paths correctly relative to the target element.
• I've narrowed the bug down to the createRoundedPath function.
• While making this fix I managed to reduce the number of unnecessary renders by the roughjs library which caused the borders to be updated whenever the button was hovered on. This was done by memoizing the return from useAnnotatedProps. Controversially, Object.values(props) was used to spread the values to the array passed to useMemo.
• I've taken a slight diversion. I need to fix the rounded padding so I want to improve the following aspects of the annotations.
  • Allow units other than pixels. This library has been useful.
    • Create dom-utils for this
    • Apply to padding
    • Apply to radius
  • Allow borderRadius to be a string and apply it to both the target and the annotation.
  • Simplify the rounded rough annotation calculation
    • This has been done by adding the x and y offsets to the path calculation. This was all that was missing.