diff --git a/__tests__/src/components/ThumbnailNavigation.test.js b/__tests__/src/components/ThumbnailNavigation.test.js index 24940223925a16632dbd0a6dcbca8d0a7defd39a..67173837815e7b127784a502db0a22ac08732053 100644 --- a/__tests__/src/components/ThumbnailNavigation.test.js +++ b/__tests__/src/components/ThumbnailNavigation.test.js @@ -100,6 +100,12 @@ describe('ThumbnailNavigation', () => { expect(wrapper.instance().areaHeight()).toEqual(150); expect(rightWrapper.instance().areaHeight(99)).toEqual(99); }); + describe('without any canvases', () => { + it('returns the default for the calculated size', () => { + wrapper = createWrapper({ canvasGroupings: new CanvasGroupings([]).groupings() }); + expect(wrapper.instance().calculateScaledSize(0)).toEqual(108); + }); + }); }); describe('keyboard navigation', () => { const setNextCanvas = jest.fn(); diff --git a/src/components/ThumbnailNavigation.js b/src/components/ThumbnailNavigation.js index fb85a483815b11b45d68ddccb007814fd9f54915..7b049704005b73cd073ea4ba67f153af4ff8f0e9 100644 --- a/src/components/ThumbnailNavigation.js +++ b/src/components/ThumbnailNavigation.js @@ -69,7 +69,9 @@ export class ThumbnailNavigation extends Component { */ calculateScaledSize(index) { const { thumbnailNavigation, canvasGroupings, position } = this.props; - const canvases = canvasGroupings[index] || []; + const canvases = canvasGroupings[index]; + if (!canvases) return thumbnailNavigation.width + this.spacing; + const world = new CanvasWorld(canvases); const bounds = world.worldBounds(); switch (position) { diff --git a/src/lib/CanvasWorld.js b/src/lib/CanvasWorld.js index cb1e0078ce34bb39f03cc0ab81e229eb957cbda4..acdd5c24539355d5df2166c0699c36d5d57302c1 100644 --- a/src/lib/CanvasWorld.js +++ b/src/lib/CanvasWorld.js @@ -203,8 +203,8 @@ export default class CanvasWorld { * lined up horizontally starting from left to right. */ worldBounds() { - const worldWidth = Math.max(...this.canvasDimensions.map(c => c.x + c.width)); - const worldHeight = Math.max(...this.canvasDimensions.map(c => c.y + c.height)); + const worldWidth = Math.max(0, ...this.canvasDimensions.map(c => c.x + c.width)); + const worldHeight = Math.max(0, ...this.canvasDimensions.map(c => c.y + c.height)); return [ 0,