Basic infrastructure for debug view

src/css/styles.css

@@ -0,0 +1,9 @@
+a {
+    cursor: pointer;
+}
+
+.disabled {
+    pointer-events: none;
+    cursor: default;
+    opacity: 0.6;
+}

src/javascript/components/App.jsx

@@ -26,7 +26,7 @@ export default class App extends React.Component {
             mainView = <LoadingView/>
             break;
         case View.PDF_VIEW:
-            mainView = <PdfView pdfPages={ this.props.appState.pdfPages } />
+            mainView = <PdfView pdfPages={ this.props.appState.pdfPages } transformations={ this.props.appState.transformations } />
             break;
         }
 

src/javascript/components/PdfView.jsx

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import Badge from 'react-bootstrap/lib/Badge'
+
 import PdfPageView from './PdfPageView.jsx';
 
 // A view which displays the TextItems of multiple PdfPages
@@ -7,18 +9,103 @@ export default class PdfView extends React.Component {
 
     static propTypes = {
         pdfPages: React.PropTypes.array.isRequired,
+        transformations: React.PropTypes.array.isRequired,
     };
 
+    constructor(props) {
+        super(props);
+        this.state = {
+            transformations: this.props.transformations,
+            currentTransformation: 0,
+            pageNr: -1
+        };
+    }
+
+    selectPage(pageNr) {
+        this.setState({
+            pageNr: pageNr
+        });
+
+    }
+
+    nextTransformation() {
+        console.debug("nextTransformation");
+        this.setState({
+            currentTransformation: this.state.currentTransformation + 1
+        });
+        console.debug(this.state.currentTransformation);
+    }
+
+    prevTransformation() {
+        console.debug("prevTransformation");
+        this.setState({
+            currentTransformation: this.state.currentTransformation - 1
+        });
+        console.debug(this.state.currentTransformation);
+    }
+
+
     render() {
-        console.debug(this.props.pdfPages);
+        const {transformations, currentTransformation, pageNr} = this.state;
-        const header = "Parsed " + this.props.pdfPages.length + " pages!"
+        const {pdfPages} = this.props;
+
+        const header = "Parsed " + pdfPages.length + " pages!"
+
+        var pageLinks = [];
+        pageLinks.push(<a key={ -1 } onClick={ this.selectPage.bind(this, -1) } style={ { fontSize: '1.20em' } }>All</a>);
+        pdfPages.forEach((pdfPage, i) => pageLinks.push(<a key={ i } onClick={ this.selectPage.bind(this, i) } style={ { fontSize: '1.10em' } }>
+                                                          { " " + i }
+                                                        </a>));
+
+        const currentTransformationName = transformations[currentTransformation].name;
+        const prevLink = <a onClick={ this.prevTransformation.bind(this) } className={ currentTransformation > 0 ? '' : 'disabled' }>
+                           { '<==' }
+                         </a>;
+        const nextLink = <a onClick={ this.nextTransformation.bind(this) } className={ currentTransformation < transformations.length - 1 ? '' : 'disabled' }>
+                           { '==>' }
+                         </a>;
+
+
+        //TODO only transform selected page ?
+        const transformedPdfPages = pdfPages.map(pdfPage => {
+            for (var i = 0; i <= currentTransformation; i++) {
+                pdfPage = transformations[i].transform(pdfPage);
+            }
+            return pdfPage;
+        });
+
+        var pageComponents;
+        if (pageNr >= 0) {
+            pageComponents = <PdfPageView key={ pageNr } pdfPage={ transformedPdfPages[pageNr] } />;
+        } else {
+            pageComponents = transformedPdfPages.map((page) => <PdfPageView key={ page.index } pdfPage={ page } />);
+        }
+
         return (
             <div>
               <div>
-                { header }
+                <Badge>
+                  { pdfPages.length }
+                </Badge> pages!
+              </div>
+              <div style={ { textAlign: 'center' } }>
+                <div>
+                  <b>Pages:</b>
+                </div>
+                <div>
+                  { pageLinks }
+                </div>
+                <div>
+                  <b>Current Transformation:</b>
+                </div>
+                <div>
+                  { prevLink }
+                  { " " + currentTransformationName + " " }
+                  { nextLink }
+                </div>
               </div>
               <hr/>
-              { this.props.pdfPages.map((page) => <PdfPageView key={ page.index } pdfPage={ page } />) }
+              { pageComponents }
             </div>
             );
     }

src/javascript/index.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 
 import 'bootstrap/dist/css/bootstrap.css';
+import '../css/styles.css';
 
 import App from './components/App.jsx';
 import AppState from './models/AppState.jsx';

src/javascript/models/AppState.jsx

@@ -3,6 +3,9 @@ import { Enum } from 'enumify';
 import { pdfToTextItemsAsync } from '../functions/pdfToTextItems.jsx'
 import PdfPage from './PdfPage.jsx';
 
+import NoOpTransformation from './transformations/NoOpTransformation.jsx';
+import RoundYTransformation from './transformations/RoundYTransformation.jsx';
+
 // Holds the state of the Application
 export default class AppState {
 
@@ -12,6 +15,7 @@ export default class AppState {
         this.pagesToUpload = 0;
         this.uploadedPages = 0;
         this.pdfPages = [];
+        this.transformations = [new NoOpTransformation(), new RoundYTransformation()];
 
         //bind functions
         this.render = this.render.bind(this);

src/javascript/models/transformations/NoOpTransformation.jsx

@@ -0,0 +1,13 @@
+import Transformation from './Transformation.jsx';
+
+export default class NoOpTransformation extends Transformation {
+
+    constructor() {
+        super("Original");
+    }
+
+    transform(pdfPage:PdfPage) {
+        return pdfPage;
+    }
+
+}

src/javascript/models/transformations/RoundYTransformation.jsx

@@ -0,0 +1,21 @@
+import Transformation from './Transformation.jsx';
+
+export default class RoundYTransformation extends Transformation {
+
+    constructor() {
+        super("Round all Y");
+    }
+
+    transform(pdfPage:PdfPage) {
+        return {
+            ...pdfPage,
+            textItems: pdfPage.textItems.map(textItem => {
+                return {
+                    ...textItem,
+                    y: Math.round(textItem.y)
+                }
+            })
+        };
+    }
+
+}

src/javascript/models/transformations/Transformation.jsx

@@ -0,0 +1,19 @@
+import AppState from '../PdfPage.jsx';
+
+// A transformation from an PdfPage to an PdfPage
+export default class Transformation {
+
+    constructor(name) {
+        if (this.constructor === Transformation) {
+            throw new TypeError("Can not construct abstract class.");
+        }
+        if (this.transform === Transformation.prototype.transform) {
+            throw new TypeError("Please implement abstract method 'transform()'.");
+        }
+        this.name = name;
+    }
+
+    transform(pdfPage:PdfPage) {
+        throw new TypeError("Do not call abstract method foo from child.");
+    }
+}