{"action":"created","issue":{"url":"https://api.github.com/repos/wojtekmaj/react-pdf/issues/221","repository_url":"https://api.github.com/repos/wojtekmaj/react-pdf","labels_url":"https://api.github.com/repos/wojtekmaj/react-pdf/issues/221/labels{/name}","comments_url":"https://api.github.com/repos/wojtekmaj/react-pdf/issues/221/comments","events_url":"https://api.github.com/repos/wojtekmaj/react-pdf/issues/221/events","html_url":"https://github.com/wojtekmaj/react-pdf/issues/221","id":328179286,"node_id":"MDU6SXNzdWUzMjgxNzkyODY=","number":221,"title":"<Page> sometimes fails to re-render when passed a rotate prop","user":{"login":"kilsen","id":240653,"node_id":"MDQ6VXNlcjI0MDY1Mw==","avatar_url":"https://avatars3.githubusercontent.com/u/240653?v=4","gravatar_id":"","url":"https://api.github.com/users/kilsen","html_url":"https://github.com/kilsen","followers_url":"https://api.github.com/users/kilsen/followers","following_url":"https://api.github.com/users/kilsen/following{/other_user}","gists_url":"https://api.github.com/users/kilsen/gists{/gist_id}","starred_url":"https://api.github.com/users/kilsen/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/kilsen/subscriptions","organizations_url":"https://api.github.com/users/kilsen/orgs","repos_url":"https://api.github.com/users/kilsen/repos","events_url":"https://api.github.com/users/kilsen/events{/privacy}","received_events_url":"https://api.github.com/users/kilsen/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":{"login":"wojtekmaj","id":5426427,"node_id":"MDQ6VXNlcjU0MjY0Mjc=","avatar_url":"https://avatars2.githubusercontent.com/u/5426427?v=4","gravatar_id":"","url":"https://api.github.com/users/wojtekmaj","html_url":"https://github.com/wojtekmaj","followers_url":"https://api.github.com/users/wojtekmaj/followers","following_url":"https://api.github.com/users/wojtekmaj/following{/other_user}","gists_url":"https://api.github.com/users/wojtekmaj/gists{/gist_id}","starred_url":"https://api.github.com/users/wojtekmaj/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/wojtekmaj/subscriptions","organizations_url":"https://api.github.com/users/wojtekmaj/orgs","repos_url":"https://api.github.com/users/wojtekmaj/repos","events_url":"https://api.github.com/users/wojtekmaj/events{/privacy}","received_events_url":"https://api.github.com/users/wojtekmaj/received_events","type":"User","site_admin":false},"assignees":[{"login":"wojtekmaj","id":5426427,"node_id":"MDQ6VXNlcjU0MjY0Mjc=","avatar_url":"https://avatars2.githubusercontent.com/u/5426427?v=4","gravatar_id":"","url":"https://api.github.com/users/wojtekmaj","html_url":"https://github.com/wojtekmaj","followers_url":"https://api.github.com/users/wojtekmaj/followers","following_url":"https://api.github.com/users/wojtekmaj/following{/other_user}","gists_url":"https://api.github.com/users/wojtekmaj/gists{/gist_id}","starred_url":"https://api.github.com/users/wojtekmaj/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/wojtekmaj/subscriptions","organizations_url":"https://api.github.com/users/wojtekmaj/orgs","repos_url":"https://api.github.com/users/wojtekmaj/repos","events_url":"https://api.github.com/users/wojtekmaj/events{/privacy}","received_events_url":"https://api.github.com/users/wojtekmaj/received_events","type":"User","site_admin":false}],"milestone":null,"comments":2,"created_at":"2018-05-31T15:09:56Z","updated_at":"2018-10-09T14:33:26Z","closed_at":null,"author_association":"NONE","body":"**What are you trying to achieve? Please describe.**\r\nThe use case is a bit complex; I'll do my best to explain it.\r\n\r\nI'm displaying a multi-page PDF and giving the user the ability to rotate each page that he views. I need to \"remember\" the rotation value of each page, because the user can view any page in the document at any time (via a set of pagination controls in my UI). So I maintain the rotation value for each page in an array in my component's state, and pass the rotate prop to the Page component. When a user clicks on a \"Rotate\" button in my UI, I change the rotation for the current page. (In my case, I'm rotating 90 degrees counter-clockwise; so I add 270 to the current rotation value, and then adjust the value modulo 360.) When I first open the document, I don't know the rotation value of each page (as defined in the PDF dictionary object). But I'm able to get the pageInfo of a page after it's loaded. So, on initial display of each page, I do NOT pass the rotate prop. Then, in the onLoadSuccess handler of the page load (only the FIRST load of each page), I record the initial rotate value for the page. For example, suppose page 1 is stored in the PDF rotated 180. If I'm displaying page 1, my render() method applies logic to display it like this the first time:\r\n```\r\n<Page pageNumber=1 onLoadSuccess={this.handlePageLoaded}/>\r\n```\r\nMy handlePageLoaded(page) method sets the rotation of page 1 (from page.pageInfo.rotate) and then the render() method is re-invoked and this time it displays the page this way:\r\n```\r\n<Page pageNumber=1 rotate=180 />\r\n```\r\n(Effectively, this causes no change to the display, because the rotation value didn't actually change.) Then, when the user clicks my \"Rotate\" button, I update the rotation for page 1 by adding 270 (modulo 360), and this triggers my render() method to display the page like this:\r\n```\r\n<Page pageNumber=1 rotate=90/>\r\n```\r\nand the user sees the page rotate immediately. \r\n\r\nSo far so good. With one exception: if the initial state of the page in the PDF is rotated 270 degrees. Then, my render() method produces the following:\r\n```\r\n<Page pageNumber=1 onLoadSuccess={this.handlePageLoaded}/>\r\n```\r\nfollowed by\r\n```\r\n<Page pageNumber=1 rotate=270/>\r\n```\r\nand finally, when the user clicks my \"Rotate\" button:\r\n```\r\n<Page pageNumber=1 rotate=0/>\r\n```\r\nbut the page does not re-render on the display; the user does not see the page rotate! If the user then clicks my \"Rotate\" button a second time, the display updates as expected (it flips 180 degrees, to reflect the fact that the user clicked the button twice).\r\n\r\nNote that this only happens if the initial rotation value for the page (as defined in the PDF) is 270. In that case, attempting to go from 270 to 0 fails to cause a re-render of the page on the display. The other 3 cases -- namely, an initial PDF-defined page rotation value of 0, 90, or 180 -- all work fine.\r\n \r\n**Describe solutions you've tried**\r\nI was able to work around the problem by rendering the <Page> component the first time (when I don't know the pre-defined rotation value for the page) with an invalid rotate prop value. Like this:\r\n```\r\n<Page pageNumber=1 rotate=-1 onLoadSuccess={this.handlePageLoaded}/>\r\n```\r\nI get a React warning in my browser console (only 0, 90, 180, and 270 are valid values for the rotate prop). But the page always rotates when I tell it to.\r\n\r\n**Environment**\r\n - Browser [e.g. Chrome 57, Firefox 59]: Chrome Version 66.0.3359.181 (Official Build) (64-bit)\r\n - React-PDF version [e.g 3.0.4]: 3.0.5\r\n"},"comment":{"url":"https://api.github.com/repos/wojtekmaj/react-pdf/issues/comments/428216292","html_url":"https://github.com/wojtekmaj/react-pdf/issues/221#issuecomment-428216292","issue_url":"https://api.github.com/repos/wojtekmaj/react-pdf/issues/221","id":428216292,"node_id":"MDEyOklzc3VlQ29tbWVudDQyODIxNjI5Mg==","user":{"login":"kilsen","id":240653,"node_id":"MDQ6VXNlcjI0MDY1Mw==","avatar_url":"https://avatars3.githubusercontent.com/u/240653?v=4","gravatar_id":"","url":"https://api.github.com/users/kilsen","html_url":"https://github.com/kilsen","followers_url":"https://api.github.com/users/kilsen/followers","following_url":"https://api.github.com/users/kilsen/following{/other_user}","gists_url":"https://api.github.com/users/kilsen/gists{/gist_id}","starred_url":"https://api.github.com/users/kilsen/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/kilsen/subscriptions","organizations_url":"https://api.github.com/users/kilsen/orgs","repos_url":"https://api.github.com/users/kilsen/repos","events_url":"https://api.github.com/users/kilsen/events{/privacy}","received_events_url":"https://api.github.com/users/kilsen/received_events","type":"User","site_admin":false},"created_at":"2018-10-09T14:33:26Z","updated_at":"2018-10-09T14:33:26Z","author_association":"NONE","body":"I'm attaching two files. \r\n\r\nThe file need-rotation.pdf consists of 4 pages that I constructed with MS-Word. I put a text box on each page indicating the required rotation to make the page appear \"normal\" (portrait mode, with text right-side-up).\r\n\r\nThe file rotated.pdf actually has the pages rotated as indicated.\r\n\r\nSo if you open the PDF and try rotating each page counterclockwise (add 270 to the existing rotation value and then adjust it modulo 360) you should see the issue.\r\n\r\n[rotated.pdf](https://github.com/wojtekmaj/react-pdf/files/2460821/rotated.pdf)\r\n[need-rotation.pdf](https://github.com/wojtekmaj/react-pdf/files/2460822/need-rotation.pdf)\r\n\r\n"}}
{"actor":{"display_login":"kilsen"}}