page-canvas:

- Added keyboard shortcuts to zoom to page and to element. svg-canvas: - Added function to fit viewbox to an element. xslt: - Fixed poppler2page.xslt to prevent invalid xml when there are word elements without text.
mauvilsa · Oct 2, 2020 · cdd874f · cdd874f
1 parent 1e5ad31
commit cdd874f
Show file tree

Hide file tree

Showing 6 changed files with 73 additions and 12 deletions.
diff --git a/README.md b/README.md
@@ -2,7 +2,7 @@
 
 nw-page-editor - Simple app for visual editing of Page XML files.
 
-Version: 2020.07.03
+Version: 2020.10.02
 
 
 # Description
@@ -251,7 +251,9 @@ docker run --rm -d -p 8080:80 -e CSS=mystyle.css -e JS=mycode.js -v $(pwd)/data:
 <tr><td>minus + .</td>             <td>Delete selected dragpoint</td></tr>
 <tr><td>plus + .</td>              <td>Add dragpoint next to selected</td></tr>
 
-<tr><td>ctrl/cmd + 0</td>          <td>View full page (initial zoom)</td></tr>
+<tr><td>ctrl/cmd + 0</td>          <td>View full document (initial zoom)</td></tr>
+<tr><td>ctrl/cmd + 1</td>          <td>Zoom to page of selected element or hovered</td></tr>
+<tr><td>ctrl/cmd + 2</td>          <td>Zoom to selected element or hovered</td></tr>
 <tr><td>ctrl/cmd + plus/minus</td> <td>Zoom in/out</td></tr>
 <tr><td>shift + mouse wheel</td>   <td>Zoom in/out</td></tr>
 <tr><td>ctrl/cmd + arrows</td>     <td>Move (pan) the image in the respective direction</td></tr>

diff --git a/js/page-canvas.js b/js/page-canvas.js
@@ -1,7 +1,7 @@
 /**
  * Javascript library for viewing and interactive editing of Page XMLs.
  *
- * @version $Version: 2020.06.25$
+ * @version $Version: 2020.10.02$
  * @author Mauricio Villegas <mauricio_ville@yahoo.com>
  * @copyright Copyright(c) 2015-present, Mauricio Villegas <mauricio_ville@yahoo.com>
  * @license MIT License
@@ -23,7 +23,7 @@
   'use strict';
 
   var
-  version = '$Version: 2020.06.25$'.replace(/^\$Version. (.*)\$/,'$1');
+  version = '$Version: 2020.10.02$'.replace(/^\$Version. (.*)\$/,'$1');
 
   /// Set PageCanvas global object ///
   if ( ! global.PageCanvas )
@@ -1124,6 +1124,38 @@
     Mousetrap.bind( 'mod+pagedown', function () { scaleFont(0.9); return false; } );
     Mousetrap.bind( 'mod+pageup', function () { scaleFont(1/0.9); return false; } );
 
+
+    /**
+     * Zooms to page of selected element or hovered.
+     */
+    function zoomToPage() {
+      var pagesel = $(self.util.svgRoot).find('.selected').closest('g.Page');
+      if ( pagesel.length == 0 ) {
+        pagesel = self.util.toScreenCoords(self.util.mouseCoords);
+        pagesel = $(self.util.elementsFromPointPolyfill(pagesel.x, pagesel.y)).closest('g.Page');
+      }
+      if ( pagesel.length > 0 )
+        self.fitElem(pagesel);
+    }
+    Mousetrap.bind( 'mod+1', zoomToPage );
+
+
+    /**
+     * Zooms to selected element or hovered.
+     */
+    function zoomToElem() {
+      var elemsel = $(self.util.svgRoot).find('.selected').closest('g');
+      if ( elemsel.length == 0 ) {
+        elemsel = self.util.toScreenCoords(self.util.mouseCoords);
+        elemsel = $(self.util.elementsFromPointPolyfill(elemsel.x, elemsel.y)).closest('g');
+        elemsel = elemsel.filter('.selected');
+      }
+      if ( elemsel.length > 0 )
+        self.fitElem(elemsel);
+    }
+    Mousetrap.bind( 'mod+2', zoomToElem );
+
+
     /**
      * Toggles production of the selected element's group.
      */

diff --git a/js/svg-canvas.js b/js/svg-canvas.js
@@ -1,7 +1,7 @@
 /**
  * Javascript library for viewing and interactive editing of SVGs.
  *
- * @version $Version: 2020.07.03$
+ * @version $Version: 2020.10.02$
  * @author Mauricio Villegas <mauricio_ville@yahoo.com>
  * @copyright Copyright(c) 2015-present, Mauricio Villegas <mauricio_ville@yahoo.com>
  * @license MIT License
@@ -23,7 +23,7 @@
   var
   sns = 'http://www.w3.org/2000/svg',
   xns = 'http://www.w3.org/1999/xlink',
-  version = '$Version: 2020.07.03$'.replace(/^\$Version. (.*)\$/,'$1');
+  version = '$Version: 2020.10.02$'.replace(/^\$Version. (.*)\$/,'$1');
 
   /// Set SvgCanvas global object ///
   if ( ! global.SvgCanvas )
@@ -482,6 +482,30 @@
         return false;
       }
 
+      function fitElem(elem) {
+        var rect = elem[0].getBBox();
+        if ( rect.width/rect.height < canvasR && rect.height > 0 ) {
+          boxH = rect.height ;
+          boxW = boxH * canvasR ;
+          boxY0 = rect.y ;
+          boxX0 = rect.x + ( rect.width - boxW ) / 2 ;
+        }
+        else if ( rect.width > 0 ) {
+          boxW = rect.width ;
+          boxH = boxW / canvasR ;
+          boxX0 = rect.x ;
+          boxY0 = rect.y + ( rect.height - boxH ) / 2 ;
+        }
+        else
+          return false;
+        svgRoot.setAttribute( 'viewBox', boxX0+' '+boxY0+' '+boxW+' '+boxH );
+        fitState = FITTED.NONE;
+        dragpointScale();
+        for ( var k=0; k<self.cfg.onPanZoomChange.length; k++ )
+          self.cfg.onPanZoomChange[k](boxW,boxH);
+        return false;
+      }
+
       function fitPage() {
         if( svgR < canvasR )
           fitHeight();
@@ -595,6 +619,7 @@
 
       self.fitWidth = fitWidth;
       self.fitHeight = fitHeight;
+      self.fitElem = fitElem;
       self.fitPage = fitPage;
       self.setViewBox = setViewBox;
 
@@ -1149,6 +1174,7 @@
 
       return elements;
     }
+    self.util.elementsFromPointPolyfill = elementsFromPointPolyfill;
 
 
     //////////////////

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "nw-page-editor",
-  "version": "2020.07.03",
+  "version": "2020.10.02",
   "description": "Simple app for visual editing of Page XML files",
   "main": "./html/index.html#1",
   "author": "Mauricio Villegas <mauricio_ville@yahoo.com>",

diff --git a/web-app/common.inc.php b/web-app/common.inc.php
@@ -2,13 +2,13 @@
 /**
  * Common code to be executed by other php scripts.
  *
- * @version $Version: 2020.07.03$
+ * @version $Version: 2020.10.02$
  * @author Mauricio Villegas <mauricio_ville@yahoo.com>
  * @copyright Copyright(c) 2017-present, Mauricio Villegas <mauricio_ville@yahoo.com>
  * @license MIT License
  */
 
-$version = str_replace('Version: ','',"Version: 2020.07.03");
+$version = str_replace('Version: ','',"Version: 2020.10.02");
 $v = '?v='.$version;
 
 /// User authentication ///

diff --git a/xslt/poppler2page.xslt b/xslt/poppler2page.xslt
@@ -2,7 +2,7 @@
 <!--
   - XSLT that transforms poppler's pdftotext xhtml to Page XML.
   -
-  - @version $Version: 2020.04.14$
+  - @version $Version: 2020.10.02$
   - @author Mauricio Villegas <mauricio@omnius.com>
   - @copyright Copyright(c) 2018-present, Mauricio Villegas <mauricio@omnius.com>
   -->
@@ -16,7 +16,7 @@
   <xsl:output method="xml" indent="yes" encoding="utf-8" omit-xml-declaration="no"/>
   <xsl:strip-space elements="*"/>
 
-  <xsl:param name="xsltVersion" select="'2020.04.14'"/>
+  <xsl:param name="xsltVersion" select="'2020.10.02'"/>
   <xsl:param name="filename"/>
   <xsl:param name="createdate"/>
 
@@ -74,7 +74,8 @@
   </xsl:template>
 
   <!-- word as Word with TextEquiv -->
-  <xsl:template match="_:line/_:word">
+  <xsl:template match="_:word[not(text())]"/>
+  <xsl:template match="_:line/_:word[text()]">
     <xsl:variable name="pg" select="count(ancestor::_:page/preceding-sibling::_:page)+1"/>
     <xsl:variable name="fl" select="count(ancestor::_:flow/preceding-sibling::_:flow)+1"/>
     <xsl:variable name="bk" select="count(ancestor::_:block/preceding-sibling::_:block)+1"/>