From 92a904a0a6a02338eaeef146e499078506a32189 Mon Sep 17 00:00:00 2001
From: Johannes Zillmann <jz@datameer.com>
Date: Sat, 7 Jan 2017 11:38:06 +0100
Subject: [PATCH] Basic infrastructure for debug view

---
 src/css/styles.css                            |  9 ++
 src/javascript/components/App.jsx             |  2 +-
 src/javascript/components/PdfView.jsx         | 95 ++++++++++++++++++-
 src/javascript/index.jsx                      |  1 +
 src/javascript/models/AppState.jsx            |  4 +
 .../transformations/NoOpTransformation.jsx    | 13 +++
 .../transformations/RoundYTransformation.jsx  | 21 ++++
 .../models/transformations/Transformation.jsx | 19 ++++
 8 files changed, 159 insertions(+), 5 deletions(-)
 create mode 100644 src/css/styles.css
 create mode 100644 src/javascript/models/transformations/NoOpTransformation.jsx
 create mode 100644 src/javascript/models/transformations/RoundYTransformation.jsx
 create mode 100644 src/javascript/models/transformations/Transformation.jsx

diff --git a/src/css/styles.css b/src/css/styles.css
new file mode 100644
index 0000000..552b2d1
--- /dev/null
+++ b/src/css/styles.css
@@ -0,0 +1,9 @@
+a {
+    cursor: pointer;
+}
+
+.disabled {
+    pointer-events: none;
+    cursor: default;
+    opacity: 0.6;
+}
\ No newline at end of file
diff --git a/src/javascript/components/App.jsx b/src/javascript/components/App.jsx
index 2eaa49a..3c15ce5 100644
--- a/src/javascript/components/App.jsx
+++ b/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;
         }
 
diff --git a/src/javascript/components/PdfView.jsx b/src/javascript/components/PdfView.jsx
index f416d16..ab95776 100644
--- a/src/javascript/components/PdfView.jsx
+++ b/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 header = "Parsed " + this.props.pdfPages.length + " pages!"
+        const {transformations, currentTransformation, pageNr} = this.state;
+        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>
             );
     }
diff --git a/src/javascript/index.jsx b/src/javascript/index.jsx
index 10d02c7..bb7076f 100644
--- a/src/javascript/index.jsx
+++ b/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';
diff --git a/src/javascript/models/AppState.jsx b/src/javascript/models/AppState.jsx
index 15a9c9b..dd86e74 100644
--- a/src/javascript/models/AppState.jsx
+++ b/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);
diff --git a/src/javascript/models/transformations/NoOpTransformation.jsx b/src/javascript/models/transformations/NoOpTransformation.jsx
new file mode 100644
index 0000000..a327986
--- /dev/null
+++ b/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;
+    }
+
+}
\ No newline at end of file
diff --git a/src/javascript/models/transformations/RoundYTransformation.jsx b/src/javascript/models/transformations/RoundYTransformation.jsx
new file mode 100644
index 0000000..a6e6033
--- /dev/null
+++ b/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)
+                }
+            })
+        };
+    }
+
+}
\ No newline at end of file
diff --git a/src/javascript/models/transformations/Transformation.jsx b/src/javascript/models/transformations/Transformation.jsx
new file mode 100644
index 0000000..3287cbb
--- /dev/null
+++ b/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.");
+    }
+}
\ No newline at end of file