Skip to content

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

Before merging, check that #716 (closed) and #717 (closed) are fixed after this rewrite. Also test the 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.

Edited by Erwan Rouchet