Improve fitting derived pyramid to source pyramid

Author: hackermd

src/pyramid.js

@@ -585,10 +585,10 @@ function _fitImagePyramid (pyramid, refPyramid) {
   // Fit the pyramid levels to the reference image pyramid
   const fittedPyramid = {
     extent: [...refPyramid.extent],
-    origins: [...refPyramid.origins],
-    resolutions: [...refPyramid.resolutions],
-    gridSizes: [...refPyramid.gridSizes],
-    tileSizes: [...refPyramid.tileSizes],
+    origins: [],
+    resolutions: [],
+    gridSizes: [],
+    tileSizes: [],
     pixelSpacings: [],
     metadata: [],
     frameMappings: []
@@ -597,19 +597,36 @@ function _fitImagePyramid (pyramid, refPyramid) {
     const index = matchingLevelIndices.find(element => element[0] === i)
     if (index) {
       const j = index[1]
-      fittedPyramid.gridSizes[i] = [...pyramid.gridSizes[j]]
-      fittedPyramid.tileSizes[i] = [...pyramid.tileSizes[j]]
+      fittedPyramid.origins.push([...pyramid.origins[j]])
+      fittedPyramid.gridSizes.push([...pyramid.gridSizes[j]])
+      fittedPyramid.tileSizes.push([...pyramid.tileSizes[j]])
+      fittedPyramid.resolutions.push(Number(refPyramid.resolutions[i]))
       fittedPyramid.pixelSpacings.push([...pyramid.pixelSpacings[j]])
       fittedPyramid.metadata.push(pyramid.metadata[j])
       fittedPyramid.frameMappings.push(pyramid.frameMappings[j])
-    } else {
-      fittedPyramid.pixelSpacings.push(undefined)
-      fittedPyramid.metadata.push(undefined)
-      fittedPyramid.frameMappings.push(undefined)
     }
   }
 
-  return fittedPyramid
+  let minZoom = 0
+  for (let i = 0; i < refPyramid.resolutions.length; i++) {
+    for (let j = 0; j < fittedPyramid.resolutions.length; j++) {
+      if (refPyramid.resolutions[i] === fittedPyramid.resolutions[j]) {
+        minZoom = i
+        break
+      }
+    }
+  }
+  let maxZoom = refPyramid.resolutions.length - 1
+  for (let i = (refPyramid.resolutions.length - 1); i >= minZoom; i--) {
+    for (let j = (fittedPyramid.resolutions.length - 1); j >= 0; j--) {
+      if (refPyramid.resolutions[i] === fittedPyramid.resolutions[j]) {
+        maxZoom = i
+        break
+      }
+    }
+  }
+
+  return [fittedPyramid, minZoom, maxZoom]
 }
 
 export {

src/viewer.js

@@ -1279,10 +1279,10 @@ class VolumeImageViewer {
         const map = this[_overviewMap].getOverviewMap()
 
         const overviewElement = this[_overviewMap].element
-        const overviewChildren = overviewElement.children
-        const overviewmapElement = Object.values(overviewChildren).find(
+        const overviewmapElement = Object.values(overviewElement.children).find(
           c => c.className === 'ol-overviewmap-map'
         )
+        // TODO: color "ol-overviewmap-map-box" using primary color
         overviewmapElement.style.width = `${width}px`
         overviewmapElement.style.height = `${height}px`
         map.updateSize()
@@ -3662,7 +3662,10 @@ class VolumeImageViewer {
     )
 
     const pyramid = _computeImagePyramid({ metadata })
-    const fittedPyramid = _fitImagePyramid(pyramid, this[_pyramid])
+    const [fittedPyramid, minZoomLevel, maxZoomLevel] = _fitImagePyramid(
+      pyramid,
+      this[_pyramid]
+    )
 
     const tileGrid = new TileGrid({
       extent: fittedPyramid.extent,
@@ -3694,18 +3697,6 @@ class VolumeImageViewer {
         bins: Math.pow(2, 8)
       })
 
-      const minZoomLevel = fittedPyramid.metadata.findIndex(item => {
-        return item !== undefined
-      })
-      let maxZoomLevel = fittedPyramid.metadata.findIndex((item, index) => {
-        return index > minZoomLevel && item === undefined
-      })
-      if (maxZoomLevel < 0) {
-        maxZoomLevel = fittedPyramid.metadata.length - 1
-      } else if (maxZoomLevel > 0) {
-        maxZoomLevel = maxZoomLevel - 1
-      }
-
       const defaultSegmentStyle = {
         opacity: 0.75,
         paletteColorLookupTable: buildPaletteColorLookupTable({
@@ -4082,7 +4073,10 @@ class VolumeImageViewer {
     )
 
     const pyramid = _computeImagePyramid({ metadata })
-    const fittedPyramid = _fitImagePyramid(pyramid, this[_pyramid])
+    const [fittedPyramid, minZoomLevel, maxZoomLevel] = _fitImagePyramid(
+      pyramid,
+      this[_pyramid]
+    )
 
     const tileGrid = new TileGrid({
       extent: fittedPyramid.extent,
@@ -4182,18 +4176,6 @@ class VolumeImageViewer {
         }
       }
 
-      const minZoomLevel = fittedPyramid.metadata.findIndex(item => {
-        return item !== undefined
-      })
-      let maxZoomLevel = fittedPyramid.metadata.findIndex((item, index) => {
-        return index > minZoomLevel && item === undefined
-      })
-      if (maxZoomLevel < 0) {
-        maxZoomLevel = fittedPyramid.metadata.length - 1
-      } else if (maxZoomLevel > 0) {
-        maxZoomLevel = maxZoomLevel - 1
-      }
-
       const defaultMappingStyle = {
         opacity: 1.0,
         limitValues: [