integrate store + simple parsing

package.json

@@ -19,8 +19,10 @@
     "url": "https://github.com/jzillmann/pdf-to-markdown"
   },
   "dependencies": {
+    "keen-ui": "^0.8.9",
     "pdfjs-dist": "^1.6.317",
-    "vue": "^2.0.5"
+    "vue": "^2.0.5",
+    "vue-material": "^0.3.3"
   },
   "devDependencies": {
     "babel-core": "^6.18.2",

src/App.vue

@@ -1,18 +1,26 @@
 <template>
   <div id="app">
-    <img src="./assets/logo.png">
+    <hello v-if="state.uploaded"/>
-     <dropzone id="myVueDropzone" url="https://httpbin.org/post" v-on:vdropzone-success="showSuccess" v-on:vdropzone-fileAdded="fileAdded"></dropzone>
+    <!--img src="./assets/logo.png"-->
+     <dropzone v-else id="myVueDropzone" url="https://httpbin.org/post" v-on:vdropzone-success="showSuccess" v-on:vdropzone-fileAdded="fileAdded"></dropzone>
   </div>
 </template>
 
 <script>
+import store from './store.js'
 import Hello from './components/Hello'
 import Dropzone from './components/Dropzone'
 
 export default {
   name: 'app',
   components: {
-    Dropzone
+    Hello,
+    Dropzone,
+  },
+  data() {
+    return {
+      state: store.state
+    }
   },
   methods: {
       'fileAdded': function (file) {

src/components/Dropzone.vue

@@ -14,6 +14,7 @@
 </template>
 
 <script>
+import store from '../store.js'
 import pdfjs from 'pdfjs-dist';
 export default {
     props : {
@@ -45,7 +46,7 @@ export default {
     data() {
         return {
             hovering : false,
-            image: null
+            image: null,
         }
     },
     computed: {
@@ -60,28 +61,70 @@ export default {
           console.debug(files);
           if (!files.length) return;
 
-          var reader = new FileReader();
+          const reader = new FileReader();
           reader.onload = (evt) => {
             console.debug("Loaded");
-            var buffer = evt.target.result;
+            const buffer = evt.target.result;
+            // const lines = []
+            const pages= []
             PDFJS.getDocument(buffer).then(function (pdfDocument) {
-              console.log('Number of pages: ' + pdfDocument.numPages);
+              //console.log('Number of pages: ' + pdfDocument.numPages);
+              // console.debug(pdfDocument);
+              for (var i = 0; i <= 3; i++) {
+                pdfDocument.getPage(i).then(function(page){
+                  page.getTextContent().then(function(textContent) {
+                          var text = '';
+                          var line;
+                          var lineY;
+                          //console.debug(textContent);
+                          const pageTextContents = []
+                          textContent.items.map(function(item) {
+                            const transform = item.transform;
+                            const x = transform[4];
+                            const y = transform[5];
+                            const width = item.width;
+                            const height = item.height;
+                            pageTextContents.push({
+                              text: item.str,
+                              x: x,
+                              y: y,
+                              width: item.width,
+                              height: item.height
+                            });
+                            if(!line){
+                              console.debug("First line: "+item.str);
+                              lineY = y;
+                              line = item.str;
+                            } else {
+                              if (y === lineY){
+                                console.debug("Add to line: "+line +" / "+ item.str);
+                                line += item.str;
+                              } else {
+                                console.debug("Start line: "+line+ " / " +item.str);
+                                text += line + '\n';
+                                line = item.str;
+                                lineY = y;
+                              }
+                            }
+                            // console.debug('|'+item.str+'|');
+                            // lines.push(item.str);
+                            // lines.push(text)
+                          });
+                          text += line ;
+                          console.debug("Push Page ");
+                          console.debug(text);
+                          pages.push(text)
+                          console.debug(pageTextContents);
+                  });
+                });
+              }
             });
+            console.debug("Store all");
+            console.debug(pages);
+            store.upload(pages);
+            console.debug("now:"+store.state.uploaded);
           };
-          reader.readAsDataURL(files[0]);
+          reader.readAsArrayBuffer(files[0]);
-
-
-          this.createImage(files[0]);
-      },
-      createImage(file) {
-          var image = new Image();
-          var reader = new FileReader();
-          var vm = this;
-
-          reader.onload = (e) => {
-              vm.image = e.target.result;
-          };
-          reader.readAsDataURL(file);
       },
       removeImage: function (e) {
           this.image = '';

src/components/Hello.vue

@@ -1,31 +1,23 @@
 <template>
   <div class="hello">
     <h1>{{ msg }}</h1>
-    <h2>Essential Links</h2>
+    <div>
-    <ul>
+      Uploaded: {{state.uploaded}}
-      <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
+    </div>
-      <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
+    <div v-for="line in state.pages">
-      <li><a href="https://gitter.im/vuejs/vue" target="_blank">Gitter Chat</a></li>
+    <textarea :value="line" rows="50" cols="150"></textarea>
-      <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
+    </div>
-      <br>
-      <li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li>
-    </ul>
-    <h2>Ecosystem</h2>
-    <ul>
-      <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
-      <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
-      <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
-    </ul>
   </div>
 </template>
 
 <script>
+import store from '../store.js'
 export default {
   name: 'hello',
   data () {
     return {
-      msg: 'Welcome to Your!! Vue.js App'
+      msg: 'Welcome to Your!! Vue.js App',
+      state: store.state
     }
   }
 }

src/store.js

@@ -0,0 +1,14 @@
+// Holds the state of the application
+export default {
+
+    state: {
+        uploaded: false,
+        pages: []
+    },
+
+    upload: function(pages) {
+        console.debug("Store: upload");
+        this.state.uploaded = true;
+        this.state.pages = pages;
+    },
+}