From 1a97cef4406578b8470ae41994959a3087632d75 Mon Sep 17 00:00:00 2001 From: Johannes Zillmann Date: Mon, 9 Jan 2017 20:08:32 +0100 Subject: [PATCH] Add status to loading view --- package.json | 1 + src/javascript/components/App.jsx | 9 ++- src/javascript/components/LoadingView.jsx | 87 ++++++++++++++++++++- src/javascript/functions/pdfToTextItems.jsx | 32 -------- src/javascript/models/AppState.jsx | 39 +++------ 5 files changed, 101 insertions(+), 67 deletions(-) delete mode 100644 src/javascript/functions/pdfToTextItems.jsx diff --git a/package.json b/package.json index 84f8f61..61153f8 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "bootstrap": "^3.3.7", "enumify": "^1.0.4", "pdfjs-dist": "^1.6.317", + "rc-progress": "^2.0.5", "react": "^15.3.2", "react-bootstrap": "^0.30.3", "react-dom": "^15.3.2", diff --git a/src/javascript/components/App.jsx b/src/javascript/components/App.jsx index 3c15ce5..c3bf0a4 100644 --- a/src/javascript/components/App.jsx +++ b/src/javascript/components/App.jsx @@ -15,18 +15,19 @@ export default class App extends React.Component { }; render() { - console.debug(this.props.appState); + // console.debug(this.props.appState); + const appState = this.props.appState; var mainView; switch (this.props.appState.mainView) { case View.UPLOAD: - mainView = + mainView = break; case View.LOADING: - mainView = + mainView = break; case View.PDF_VIEW: - mainView = + mainView = break; } diff --git a/src/javascript/components/LoadingView.jsx b/src/javascript/components/LoadingView.jsx index 7dd442e..3798527 100644 --- a/src/javascript/components/LoadingView.jsx +++ b/src/javascript/components/LoadingView.jsx @@ -1,21 +1,102 @@ import React from 'react'; -import Spinner from './lib/Spinner.jsx'; +import pdfjs from 'pdfjs-dist'; +import { Line } from 'rc-progress'; + +import PdfPage from '../models/PdfPage.jsx'; +import TextItem from '../models/TextItem.jsx'; export default class LoadingView extends React.Component { + static propTypes = { + fileBuffer: React.PropTypes.object.isRequired, + storePdfPagesFunction: React.PropTypes.func.isRequired, + }; + + constructor(props) { + super(props); + this.state = { + parsedPages: 0, + pdfPages: [] + }; + } + + anounceInitialParse(pdfPages) { + this.setState({ + pdfPages: pdfPages + }); + } + + anouncePageParsed(index, textItems) { + //TODO might make problems.. concat unordered and order at the end ? + this.state.pdfPages[index].textItems = textItems; + this.setState({ + parsedPages: this.state.parsedPages + 1 + }); + } + + + componentWillMount() { + const anounceInitialParseFunction = this.anounceInitialParse.bind(this); + const anouncePageParsedFunction = this.anouncePageParsed.bind(this); + PDFJS.getDocument(this.props.fileBuffer).then(function(pdfDocument) { + console.log('Number of pages: ' + pdfDocument.numPages); + // console.debug(pdfDocument); + const numPages = pdfDocument.numPages; + // const numPages = 4; // hack + var pdfPages = []; + for (var i = 0; i < numPages; i++) { + pdfPages.push(new PdfPage({ + index: i + })); + } + anounceInitialParseFunction(pdfPages); + for (var i = 1; i <= numPages; i++) { + pdfDocument.getPage(i).then(function(page) { + page.getTextContent().then(function(textContent) { + // console.debug(textContent); + const textItems = textContent.items.map(function(item) { + return new TextItem({ + x: item.transform[4], + y: item.transform[5], + width: item.width, + height: item.height, + text: item.str + }); + }); + anouncePageParsedFunction(page.pageIndex, textItems); + }); + }); + } + }); + } + + + + render() { + const {parsedPages, pdfPages} = this.state; + var percentDone = 0; + var details = ''; + if (pdfPages.length > 0) { + percentDone = parsedPages / pdfPages.length * 100; + details = parsedPages + ' / ' + pdfPages.length + if (parsedPages == pdfPages.length) { + this.props.storePdfPagesFunction(this.state.pdfPages); + } + } return (



-
- +

Uploading and parsing PDF... +
+ { ' ' + details }
); } diff --git a/src/javascript/functions/pdfToTextItems.jsx b/src/javascript/functions/pdfToTextItems.jsx deleted file mode 100644 index 81ab8fc..0000000 --- a/src/javascript/functions/pdfToTextItems.jsx +++ /dev/null @@ -1,32 +0,0 @@ -import pdfjs from 'pdfjs-dist'; - -import AppState from '../models/AppState.jsx'; -import TextItem from '../models/TextItem.jsx'; - -export function pdfToTextItemsAsync(fileBuffer:ArrayBuffer, appState:AppState) { - PDFJS.getDocument(fileBuffer).then(function(pdfDocument) { - console.log('Number of pages: ' + pdfDocument.numPages); - // console.debug(pdfDocument); - const numPages = pdfDocument.numPages; - // const numPages = 3; - appState.setPageCount(numPages); - for (var i = 0; i <= numPages; i++) { - pdfDocument.getPage(i).then(function(page) { - page.getTextContent().then(function(textContent) { - // console.debug(textContent); - const textItems = textContent.items.map(function(item) { - const transform = item.transform; - return new TextItem({ - x: transform[4], - y: transform[5], - width: item.width, - height: item.height, - text: item.str - }); - }); - appState.setPdfPage(page.pageIndex, textItems); - }); - }); - } - }); -} \ No newline at end of file diff --git a/src/javascript/models/AppState.jsx b/src/javascript/models/AppState.jsx index 952805a..878883d 100644 --- a/src/javascript/models/AppState.jsx +++ b/src/javascript/models/AppState.jsx @@ -1,8 +1,5 @@ import { Enum } from 'enumify'; -import { pdfToTextItemsAsync } from '../functions/pdfToTextItems.jsx' -import PdfPage from './PdfPage.jsx'; - import NoOpTransformation from './transformations/NoOpTransformation.jsx'; import RoundCoordinatesTransformation from './transformations/RoundCoordinatesTransformation.jsx'; import CombineSameYTransformation from './transformations/CombineSameYTransformation.jsx'; @@ -13,46 +10,32 @@ export default class AppState { constructor(options) { this.renderFunction = options.renderFunction; this.mainView = View.UPLOAD; - this.pagesToUpload = 0; - this.uploadedPages = 0; + this.fileBuffer; this.pdfPages = []; this.transformations = [new NoOpTransformation(), new RoundCoordinatesTransformation(), new CombineSameYTransformation()]; //bind functions this.render = this.render.bind(this); - this.uploadPdf = this.uploadPdf.bind(this); - this.setPageCount = this.setPageCount.bind(this); - this.setPdfPage = this.setPdfPage.bind(this); + this.storeFileBuffer = this.storeFileBuffer.bind(this); + this.storePdfPages = this.storePdfPages.bind(this); } render() { this.renderFunction(this) } - uploadPdf(fileBuffer:ArrayBuffer) { - pdfToTextItemsAsync(fileBuffer, this); + // the uploaded pdf as file buffer + storeFileBuffer(fileBuffer:ArrayBuffer) { + this.fileBuffer = fileBuffer; this.mainView = View.LOADING; this.render() } - setPageCount(numPages) { - this.pagesToUpload = numPages; - for (var i = 0; i < numPages; i++) { - this.pdfPages.push(new PdfPage({ - index: i - })); - } - } - - setPdfPage(pageIndex, textItems) { - console.debug("Upload " + pageIndex); - this.pdfPages[pageIndex].textItems = textItems; - this.uploadedPages++; - if (this.uploadedPages == this.pagesToUpload) { - console.debug("Fin"); - this.mainView = View.PDF_VIEW; - this.render(); - } + storePdfPages(pdfPages) { + this.pdfPages = pdfPages; + this.fileBuffer = null; + this.mainView = View.PDF_VIEW; + this.render(); } }