An element's zone can be incorrectly displayed for polygons close to the edges

This element has a polygon that spans the entire image. But in element and transcription edition modals, its polygon is displayed with 25px margins around the image:

This is linked to improper image coordinates handling. The element's polygon is [[0,0],[0,650],[430,650],[430,0],[0,0]]. The ElementImage component, used by all three element and transcription edition modals, adds 25px of margins around the polygon to give some "context" around it, causing a bounding box of [[-25,-25],[-25,700],[480,700],[480,-25],[-25,-25]]. This exceeds the image's size.

A crop of -25,-25,480,700 causes a HTTP 400 in Cantaloupe, and more generally will cause errors in every IIIF server. iiifUri avoids this by at least requiring positive coordinates, but it does not have access to the image's size, so the crop will remain as 0,0,480,700. Cantaloupe happens to follow the IIIF spec and ignore coordinates that go beyond the image's size, but not every IIIF server follows the spec this well, so this shouldn't be trusted.

This results in the frontend believing it will get a 480×700 image when it will only get 430×650, causing those excessive margins visible in the modal.

This can more generally occur with polygons that are less than 25 pixels away from the edges of any image; this polygon was drawn over the first line and not the second one:

A rewrite of iiifUri or of boundingBox would probably be required to handle this situation correctly, along with some handling after the image finishes loading to size it correctly inside of the SVG.