Fix page scaling given width/height and scale at the same time

Fixes #322
wojtekmaj · Jan 5, 2019 · 200f8da · 200f8da
1 parent 238c4a0
commit 200f8da
Show file tree

Hide file tree

Showing 2 changed files with 110 additions and 1 deletion.
diff --git a/src/Page.jsx b/src/Page.jsx
@@ -218,7 +218,7 @@ export class PageInternal extends PureComponent {
 
     // If width/height is defined, calculate the scale of the page so it could be of desired width.
     if (width || height) {
-      const viewport = page.getViewport(scaleWithDefault, rotate);
+      const viewport = page.getViewport(1, rotate);
       pageScale = width
         ? width / viewport.width
         : height / viewport.height;

diff --git a/src/__tests__/Page.jsx b/src/__tests__/Page.jsx
@@ -638,6 +638,45 @@ describe('Page', () => {
     });
   });
 
+
+  it('requests page to be rendered at its original size given nothing', () => {
+    const { func: onLoadSuccess, promise: onLoadSuccessPromise } = makeAsyncCallback();
+
+    const component = shallow(
+      <Page
+        onLoadSuccess={onLoadSuccess}
+        pageIndex={0}
+        pdf={pdf}
+      />
+    );
+
+    expect.assertions(1);
+    return onLoadSuccessPromise.then((page) => {
+      component.update();
+      expect(page.width).toEqual(page.originalWidth);
+    });
+  });
+
+  it('requests page to be rendered with a proper scale when given scale', () => {
+    const { func: onLoadSuccess, promise: onLoadSuccessPromise } = makeAsyncCallback();
+    const scale = 1.5;
+
+    const component = shallow(
+      <Page
+        onLoadSuccess={onLoadSuccess}
+        pageIndex={0}
+        pdf={pdf}
+        scale={scale}
+      />
+    );
+
+    expect.assertions(1);
+    return onLoadSuccessPromise.then((page) => {
+      component.update();
+      expect(page.width).toEqual(page.originalWidth * scale);
+    });
+  });
+
   it('requests page to be rendered with a proper scale when given width', () => {
     const { func: onLoadSuccess, promise: onLoadSuccessPromise } = makeAsyncCallback();
     const width = 600;
@@ -658,6 +697,28 @@ describe('Page', () => {
     });
   });
 
+  it('requests page to be rendered with a proper scale when given width and scale (multiplies)', () => {
+    const { func: onLoadSuccess, promise: onLoadSuccessPromise } = makeAsyncCallback();
+    const width = 600;
+    const scale = 1.5;
+
+    const component = shallow(
+      <Page
+        onLoadSuccess={onLoadSuccess}
+        pageIndex={0}
+        pdf={pdf}
+        width={width}
+        scale={scale}
+      />
+    );
+
+    expect.assertions(1);
+    return onLoadSuccessPromise.then((page) => {
+      component.update();
+      expect(page.width).toBeCloseTo(width * scale);
+    });
+  });
+
   it('requests page to be rendered with a proper scale when given height', () => {
     const { func: onLoadSuccess, promise: onLoadSuccessPromise } = makeAsyncCallback();
     const height = 850;
@@ -678,6 +739,28 @@ describe('Page', () => {
     });
   });
 
+  it('requests page to be rendered with a proper scale when given height and scale (multiplies)', () => {
+    const { func: onLoadSuccess, promise: onLoadSuccessPromise } = makeAsyncCallback();
+    const height = 850;
+    const scale = 1.5;
+
+    const component = shallow(
+      <Page
+        height={height}
+        onLoadSuccess={onLoadSuccess}
+        pageIndex={0}
+        pdf={pdf}
+        scale={scale}
+      />
+    );
+
+    expect.assertions(1);
+    return onLoadSuccessPromise.then((page) => {
+      component.update();
+      expect(page.height).toBeCloseTo(height * scale);
+    });
+  });
+
   it('requests page to be rendered with a proper scale when given width and height (ignores height)', () => {
     const { func: onLoadSuccess, promise: onLoadSuccessPromise } = makeAsyncCallback();
     const width = 600;
@@ -702,6 +785,32 @@ describe('Page', () => {
     });
   });
 
+  it('requests page to be rendered with a proper scale when given width, height and scale (ignores height, multiplies)', () => {
+    const { func: onLoadSuccess, promise: onLoadSuccessPromise } = makeAsyncCallback();
+    const width = 600;
+    const height = 100;
+    const scale = 1.5;
+
+    const component = shallow(
+      <Page
+        height={height}
+        onLoadSuccess={onLoadSuccess}
+        pageIndex={0}
+        pdf={pdf}
+        width={width}
+        scale={scale}
+      />
+    );
+
+    expect.assertions(2);
+    return onLoadSuccessPromise.then((page) => {
+      component.update();
+      expect(page.width).toBeCloseTo(width * scale);
+      // Expect proportions to be correct even though invalid height was provided
+      expect(page.height).toEqual(page.originalHeight * (page.width / page.originalWidth));
+    });
+  });
+
   it('calls onClick callback when clicked a page (sample of mouse events family)', () => {
     const onClick = jest.fn();