Rewrite iiifUri
// js/helpers/iiif.js
string iiifUri(zone, { width?: number, height?: number } = {}
From an element's zone (with an image and a polygon), return a IIIF URL that returns an image cropped to the zone and resized to get a maximum width and height of width
and height
. If the maximum width or height exceed the cropped region's size, clamp them to the maximum sizes (most servers do not support resizes above 100%).
> const image = {
url: 'http://lol/1234',
width: 500,
height: 700
}
> const zone = {
image,
polygon: [[100, 200], [100, 600], [400, 600], [400, 200], [100, 200]]
}
> iiifUri(zone)
"http://lol/1234/100,200,300,400/full/0/default.jpg"
> iiifUri(zone, { width: 52 })
"http://lol/1234/100,200,300,400/52,/0/default.jpg"
> iiifUri(zone, { height: 114 })
"http://lol/1234/100,200,300,400/,114/0/default.jpg"
> iiifUri(zone, { width: 52, height: 114 })
"http://lol/1234/100,200,300,400/52,114/0/default.jpg"
> iiifUri(zone, { width: 99999, height: 99999 })
// This could also just be /full/
"http://lol/1234/100,200,300,400/300,400/0/default.jpg"
> iiifUri(zone, { width: -1 })
Error
> iiifUri(zone, { height: 0 })
Error
> iiifUri({})
Error
> iiifUri({ polygon: … })
Error
> iiifUri({ image, polygon: [[-100, -100], [99999, 99999]] })
// Could also be /full/
"http://lol/1234/0,0,500,700/full/0/default.jpg"
All of the existing calls to this function should be updated to match this. Sending the entire zone will allow for a proper bounds check. This function should have a lot of unit tests, because it is both pretty easy to test and pretty critical to display elements properly.
Known uses of this function:
- Element/ChildElement
- Element/Main
⚠ Also used a filter in the<template>
part, not just in properties. - Image/Elements
- Image/ElementImage
- Image/ImageLayer
- Image/InteractiveImage
- Navigation/ElementThumbnail
View full image
, List elements on this image
, creating and editing elements, creating and editing transcriptions, folder navigation, non-folder element display, and if possible, Himanis acts, as vue/Element/ChildElement.vue
is affected and is only there for the edge case of acts.