better coordination for scrolling; page decoration

share/base.css

@@ -9,17 +9,28 @@
   overflow:auto;
   background-color:grey;
 }
-.p {
+.d {
   position:relative;
-  background-color:white;
   margin: 13px auto;
+  border: 1px solid black;
+  overflow: hidden;
+}
+.p {
+  position:absolute;
+  top:0;
+  left:0;
+  width:100%;
+  height:100%;
+  background-color:white;
   overflow: hidden;
 }
 .b {
   position:absolute;
+  border-width:0;
   top:0;
   left:0;
-  background-color:white;
+  width:100%;
+  height:100%;
   overflow:hidden;
   display:block;
   transform-origin:0% 0%;

share/pdf2htmlEX.js

@@ -6,7 +6,7 @@
  * pdf2htmlEX.js
  *
  * handles UI events/actions/effects
- *
+
  * Copyright 2012 Lu Wang <coolwanglu@gmail.com>
  */
 
@@ -27,7 +27,7 @@ var pdf2htmlEX = (function(){
     return [ctm[0] * pos[0] + ctm[2] * pos[1] + ctm[4]
            ,ctm[1] * pos[0] + ctm[3] * pos[1] + ctm[5]];
   };
-  var Page = function(page) {
+  var Page = function(page, container) {
     if(page == undefined) return undefined;
 
     this.p = $(page);
@@ -47,6 +47,7 @@ var pdf2htmlEX = (function(){
 
     this.ctm = this.data.ctm;
     this.ictm = invert(this.ctm);
+    this.container = container;
   };
   Page.prototype.hide = function(){
     this.b.hide();
@@ -74,11 +75,22 @@ var pdf2htmlEX = (function(){
     this.p.width(this.b.width() * this.set_r);
   };
   Page.prototype.is_visible = function() {
-    var p = this.p;
-    var off = p.position();
-    return !((off.top + p.height() < 0) || (off.top > p.offsetParent().height()));
+    var off = this.position();
+    return !((off[1] > this.height()) || (off[1] + this.container.height() < 0));
   };
 
+  /* return the coordinate of the top-left corner of container
+   * in our cooridnate system
+   */
+  Page.prototype.position = function () {
+    var off = this.p.offset();
+    var off_c = this.container.offset();
+    return [off_c.left-off.left, off_c.top-off.top];
+  };
+  Page.prototype.height = function() {
+    return this.p.height();
+  }
+
   return {
     pages : [],
     container : null,
@@ -100,7 +112,7 @@ var pdf2htmlEX = (function(){
       var pl= $('.p', this.container);
       /* don't use for(..in..) */
       for(var i = 0, l = pl.length; i < l; ++i) {
-        var p = new Page(pl[i]);
+        var p = new Page(pl[i], this.container);
         new_pages[p.n] = p;
       }
       this.pages = new_pages;
@@ -148,10 +160,11 @@ var pdf2htmlEX = (function(){
       var pl = this.pages;
       for(var i in pl) {
         var p = pl[i];
-        if(p.is_visible())
+        if(p.is_visible()){
           p.show();
-        else
+        } else {
           p.hide();
+        }
       }
     },
 
@@ -224,9 +237,10 @@ var pdf2htmlEX = (function(){
       var t = $(e.currentTarget);
       var cur_page = _.get_containing_page(t);
       if(cur_page == undefined) return;
-    
-      var off = cur_page.p.position();
-      var cur_pos = transform(cur_page.ictm, [-off.left, cur_page.p.height()+off.top]);
+
+      var cur_pos = cur_page.position();
+      //get the coordinates in default user system
+      cur_pos = transform(cur_page.ictm, [cur_pos[0], cur_page.height()-cur_pos[1]]);
 
       var detail_str = t.attr('data-dest-detail');
       if(detail_str == undefined) return;
@@ -241,10 +255,11 @@ var pdf2htmlEX = (function(){
           var pos = [(detail[2] == null) ? cur_pos[0] : detail[2]
                     ,(detail[3] == null) ? cur_pos[1] : detail[3]];
           pos = transform(cur_page.ctm, pos);
-          var off = target_page.p.position();
 
-          _.container.scrollLeft(_.container.scrollLeft()+off.left+pos[0]);
-          _.container.scrollTop(_.container.scrollTop()+off.top+target_page.p.height()-pos[1]);
+          var cur_target_pos = target_page.position();
+
+          _.container.scrollLeft(_.container.scrollLeft()-cur_target_pos[0]+pos[0]);
+          _.container.scrollTop(_.container.scrollTop()-cur_target_pos[1]+target_page.height()-pos[1]);
           ok = true;
           break;
         default:

src/HTMLRenderer/general.cc

@@ -154,21 +154,11 @@ void HTMLRenderer::startPage(int pageNum, GfxState *state)
     assert((!line_opened) && "Open line in startPage detected!");
 
     html_fout 
-        << "<div id=\"p" << pageNum << "\" data-page-no=\"" << pageNum
-            << "\" class=\"p\" style=\"width:" 
+        << "<div class=\"d\" style=\"width:" 
             << (pageWidth) << "px;height:" 
             << (pageHeight) << "px;\">"
-        << "<div class=\"b\" style=\"width:" 
-            << pageWidth << "px;height:" 
-            << pageHeight << "px;";
-
-    /*
-    {
-        auto prefixes = {"", "-ms-", "-moz-", "-webkit-", "-o-"};
-        for(auto iter = prefixes.begin(); iter != prefixes.end(); ++iter)
-            html_fout << *iter << "transform:scale(" << scale_factor2 << ");";
-    }
-    */
+        << "<div id=\"p" << pageNum << "\" data-page-no=\"" << pageNum << "\" class=\"p\">"
+        << "<div class=\"b\" style=\"";
 
     if(param->process_nontext)
     {
@@ -246,7 +236,7 @@ void HTMLRenderer::endPage() {
     html_fout << "}'></div>";
     
     // close page
-    html_fout << "</div>" << endl;
+    html_fout << "</div></div>" << endl;
 }
 
 void HTMLRenderer::pre_process()

src/include/HTMLRenderer.h

@@ -36,6 +36,7 @@
  * _ - white space
  * a - Annot link
  * b - page Box
+ * d - page Decoration
  * l - Line
  * i - Image
  * j - Js data