From f3730960b1c2e42feb5630e17f0bb454b19a9c0a Mon Sep 17 00:00:00 2001
From: Mauricio Villegas <mauricio_ville@yahoo.com>
Date: Tue, 17 Mar 2020 22:36:51 +0100
Subject: [PATCH] - Removed echo of token in circleci config and updated nwjs
 version.

nw-app:
- Added xsd xmlns to Readme component versions.

page-editor:
- Now it is possible to edit confidences of Property, TextEquiv, Coords and Baseline.
- Added support for other region types: ImageRegion, SeparatorRegion and CustomRegion.
- Fixed disablings of All mode.
- Fixed bug in lower right panel when exiting property modal.
- Removed the property tags.

page-canvas:
- Exporting isValidCoords function.
- Changes to support other region types: ImageRegion, SeparatorRegion and CustomRegion.

page2svg.xslt, svg2page.xslt:
- Support for CustomRegion.
---
 .circleci/config.yml   |   3 +-
 README.md              |   2 +-
 css/page-editor.css    |  12 +---
 html/index.html        |  19 +++++--
 js/nw-app.js           |   3 +-
 js/page-canvas.js      |  11 ++--
 js/page-editor.js      | 124 +++++++++++++++++++++++++++++------------
 package.json           |   2 +-
 web-app/common.inc.php |   4 +-
 web-app/index.php      |  19 +++++--
 xslt/page2svg.xslt     |   6 +-
 xslt/svg2page.xslt     |   8 +--
 12 files changed, 138 insertions(+), 75 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 31a6aa8..01959b1 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -8,7 +8,7 @@ jobs:
     docker:
       - image: cibuilds/github:0.12.0
     environment:
-      VERSION_NWJS: v0.35.1
+      VERSION_NWJS: v0.44.4
     steps:
       - checkout
       - run:
@@ -24,7 +24,6 @@ jobs:
             cp -r *.md css examples html js node_modules package.json xsd xslt nw-page-editor-win-x64
             mkdir artifacts
             zip -qr artifacts/nw-page-editor-win-x64.zip nw-page-editor-win-x64
-            echo ghr -t ${GITHUB_TOKEN} -u ${CIRCLE_PROJECT_USERNAME} -r ${CIRCLE_PROJECT_REPONAME} -c ${CIRCLE_SHA1} ${CIRCLE_TAG} ./artifacts/
             ghr -t ${GITHUB_TOKEN} -u ${CIRCLE_PROJECT_USERNAME} -r ${CIRCLE_PROJECT_REPONAME} -c ${CIRCLE_SHA1} ${CIRCLE_TAG} ./artifacts/
 workflows:
   version: 2
diff --git a/README.md b/README.md
index 21856b1..c9ba9a7 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,7 @@
 
 nw-page-editor - Simple app for visual editing of Page XML files.
 
-Version: 2020.03.03
+Version: 2020.03.17
 
 
 # Description
diff --git a/css/page-editor.css b/css/page-editor.css
index 4b9a6c9..83840f6 100644
--- a/css/page-editor.css
+++ b/css/page-editor.css
@@ -1,7 +1,7 @@
 /**
  * CSS styles for nw-page-editor.
  *
- * @version $Version: 2019.08.12$
+ * @version $Version: 2020.03.17$
  * @author Mauricio Villegas <mauvilsa@upv.es>
  * @copyright Copyright(c) 2015-present, Mauricio Villegas <mauvilsa@upv.es>
  * @license MIT License
@@ -162,10 +162,10 @@ body {
 
 #drawer .radio-set {
   float: right;
-  width: 35%;
+  width: 45%;
 }
 #drawer .radio-set:first-of-type {
-  width: 65%;
+  width: 55%;
 }
 
 #table-rows input,
@@ -199,7 +199,6 @@ body {
 .hide-text-edit #textinfo,
 .hide-img image,
 .hide-marker-start #xpg_polystart > polygon,
-.hide-prop-tag .prop-tag,
 .hide-text-reg .TextRegion > .TextEquiv,
 .hide-text-line .TextLine > .TextEquiv,
 .hide-text-word .Word > .TextEquiv,
@@ -217,11 +216,6 @@ body {
   stroke-opacity: 0;
 }
 
-.prop-tag {
-  fill: red;
-  font-weight: bold;
-}
-
 #xpg.highlight .selectable-member .Coords,
 #xpg.highlight .editable .Coords {
   fill-opacity: 0.5;
diff --git a/html/index.html b/html/index.html
index 89edc02..3ee4c04 100644
--- a/html/index.html
+++ b/html/index.html
@@ -2,7 +2,7 @@
 <!--
   - Main HTML file of nw-page-editor.
   -
-  - @version $Version: 2019.07.25$
+  - @version $Version: 2020.03.17$
   - @author Mauricio Villegas <mauricio_ville@yahoo.com>
   - @copyright Copyright(c) 2015-present, Mauricio Villegas <mauricio_ville@yahoo.com>
   - @license MIT License
@@ -91,8 +91,15 @@
         <label id="wordMode"><input class="mousetrap" type="radio" name="mode1" value="word"/> Word</label>
         <label id="glyphMode"><input class="mousetrap" type="radio" name="mode1" value="glyph"/> Glyph</label>
         <label id="tabMode"><input class="mousetrap" type="radio" name="mode1" value="table"/> Table</label>
-        <label id="groupMode"><input class="mousetrap" type="radio" name="mode1" value="table"/> Group</label>
-        <label id="allMode"><input class="mousetrap" type="radio" name="mode1" value="page"/> All</label>
+        <label id="groupMode"><input class="mousetrap" type="radio" name="mode1" value="group"/> Group</label>
+        <label id="otherMode"><input class="mousetrap" type="radio" name="mode1" value="other"/>
+          <select id="other-region-type" name="other-region-type">
+            <option value="ImageRegion" selected="">ImageRegion</option>
+            <option value="SeparatorRegion">SeparatorRegion</option>
+            <option value="CustomRegion">CustomRegion</option>
+          </select>
+        </label>
+        <label id="allMode"><input class="mousetrap" type="radio" name="mode1" value="all"/> All</label>
       </div>
     </fieldset>
     <fieldset id="newPropsFieldset">
@@ -169,7 +176,6 @@
       <label id="hide-text-edit"><input class="mousetrap" type="checkbox" checked=""/> Lower pane</label>
       <label id="hide-img"><input class="mousetrap" type="checkbox" checked=""/> Image</label>
       <label id="hide-marker-start"><input class="mousetrap" type="checkbox"/> Coords/Baseline start markers</label>
-      <label id="hide-prop-tag"><input class="mousetrap" type="checkbox"/> Property tag</label>
       <div class="visibility-set">
         Region:
         <label id="hide-text-reg"><input class="mousetrap" type="checkbox"/> text</label>
@@ -209,8 +215,11 @@
   <div id="prop-modal" class="modal">
     <div class="modal-content">
       <span class="close">&#215;</span>
-      <h3>Properties for <span id="props-target"></span></h3>
+      <h2><span id="props-target"></span></h2>
+      <h3>Properties</h3>
       <div id="props"></div>
+      <h3>Confidences</h3>
+      <div id="confs"></div>
     </div>
   </div>
   <div id="readme-modal" class="modal">
diff --git a/js/nw-app.js b/js/nw-app.js
index 445f3c4..54665ee 100644
--- a/js/nw-app.js
+++ b/js/nw-app.js
@@ -1,7 +1,7 @@
 /**
  * NW.js app functionality for nw-page-editor.
  *
- * @version $Version: 2020.03.03$
+ * @version $Version: 2020.03.17$
  * @author Mauricio Villegas <mauricio_ville@yahoo.com>
  * @copyright Copyright(c) 2015-present, Mauricio Villegas <mauricio_ville@yahoo.com>
  * @license MIT License
@@ -64,6 +64,7 @@ $(window).on('load', function () {
     ver.node = process.versions.node;
     ver.chromium = process.versions.chromium;
     ver.nw = process.versions.nw;
+    ver.xsd = pageCanvas.cfg.pagexmlns;
     ver['nw-page-editor'] = nw.App.manifest.version;
     return ver;
   };
diff --git a/js/page-canvas.js b/js/page-canvas.js
index 6b4f28a..1715d0d 100644
--- 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: 2019.09.05$
+ * @version $Version: 2020.03.17$
  * @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: 2019.09.05$'.replace(/^\$Version. (.*)\$/,'$1');
+  version = '$Version: 2020.03.17$'.replace(/^\$Version. (.*)\$/,'$1');
 
   /// Set PageCanvas global object ///
   if ( ! global.PageCanvas )
@@ -1047,7 +1047,7 @@
       sibl = elem.siblings('g'),
       isword = elem.hasClass('Word'),
       isline = elem.hasClass('TextLine'),
-      isreg = elem.hasClass('TextRegion');
+      isreg = elem.is('.TextRegion, .ImageRegion, .SeparatorRegion, .CustomRegion');
 
       if ( isword ) {
         var lineid = elem.closest('.TextLine').attr('id');
@@ -1202,7 +1202,7 @@
     self.mode.allSelect       = function ( textedit ) {
       return textedit ?
         self.mode.text( '.TextRegion, .TextLine, .Word, .Glyph', '> .TextEquiv > .Unicode', createSvgText ):
-        self.mode.select( '.TextRegion, .TextLine, .Word, .Glyph' ); };
+        self.mode.select( '.TextRegion, .ImageRegion, .SeparatorRegion, .CustomRegion, .TextLine, .Word, .Glyph' ); };
     self.mode.regionSelect    = function ( textedit ) {
       return textedit ?
         self.mode.text( '.TextRegion:not(.TableCell)', '> .TextEquiv > .Unicode', createSvgText, ':not(.TextRegion) > .Coords, .TableCell > .Coords' ):
@@ -2423,7 +2423,7 @@ console.log(reg[0]);
       id = '',
       num = parent.children(elem_selector).length+1,
       sibl = parent.children(),
-      siblprev = sibl.filter('.Property, .Coords, .PageImage, '+elem_selector),
+      siblprev = sibl.filter('.Property, .PageImage, .Foreground, .TextRegion, .ImageRegion, .CustomRegion, .TextLine, .Word, .Glyph'),
       elem = $(document.createElementNS(self.util.sns,'polygon'))
                .addClass('Coords'),
       g = $(document.createElementNS(self.util.sns,'g'))
@@ -2531,6 +2531,7 @@ console.log(reg[0]);
       }
       return true;
     }
+    self.util.isValidCoords = isValidCoords;
 
     /**
      * Finishes the creation of a Coords element (SVG g+polygon).
diff --git a/js/page-editor.js b/js/page-editor.js
index 5433c12..946bdea 100644
--- a/js/page-editor.js
+++ b/js/page-editor.js
@@ -1,7 +1,7 @@
 /**
  * Interactive editing of Page XMLs functionality.
  *
- * @version $Version: 2019.08.12$
+ * @version $Version: 2020.03.17$
  * @author Mauricio Villegas <mauricio_ville@yahoo.com>
  * @copyright Copyright(c) 2015-present, Mauricio Villegas <mauricio_ville@yahoo.com>
  * @license MIT License
@@ -22,7 +22,6 @@ $(window).on('load', function () {
       onLoad: function () {
           //$('#imageBase').text(pageCanvas.util.imgBase);
           handleEditMode();
-          window.setTimeout( function () { setPropertyTag(); }, 100 );
           if ( pageCanvas.cfg.modeFilter === '.xpath-select' )
             filterMode();
           setDocumentProperties();
@@ -55,8 +54,6 @@ $(window).on('load', function () {
           g.closest('.TextRegion').addClass('selected-parent-region');
           g.closest('.Page').addClass('selected-parent-page');
 
-          setPropertyTag(g);
-
           if ( prop_modal.hasClass('modal-active') )
             populatePropertyModal(g);
         },
@@ -95,7 +92,6 @@ $(window).on('load', function () {
           $('#modeElement').text('-/'+$('.editable').length);
           $('#textedit').val('');
           $('#textinfo').empty();
-          setPropertyTag();
           setDocumentProperties();
         },
       onDragStart: function () {
@@ -256,8 +252,9 @@ $(window).on('load', function () {
   /// Setup properties modal box ///
   var
   prop_elem = null,
-  prop_modal = $('#prop-modal');
-  props = $('#props');
+  prop_modal = $('#prop-modal'),
+  props_div = $('#props'),
+  confs_div = $('#confs');
   $('#prop-modal .close').click(closePropModal);
   $(window).click( function (event) { if (event.target == prop_modal[0]) closePropModal(); } );
   Mousetrap.bind( 'mod+e', function () { openPropertyModal($('.selected')); } );
@@ -265,13 +262,11 @@ $(window).on('load', function () {
   function closePropModal() {
     flushPropertyModal();
     prop_modal.removeClass('modal-active');
-    setPropertyTag();
-    setDocumentProperties();
   }
 
   function flushPropertyModal() {
     var keys = [];
-    props.find('div:not([isnew])').each( function () {
+    props_div.find('div:not([isnew])').each( function () {
         var
         key = $(this).find('input.key').val().trim();
         if ( ! key )
@@ -279,7 +274,7 @@ $(window).on('load', function () {
         else
           keys.push(key);
       } );
-    props.find('div[isnew]').each( function () {
+    props_div.find('div[isnew]').each( function () {
         var
         key = $(this).find('input.key').val().trim(),
         val = $(this).find('input.val').val().trim();
@@ -290,33 +285,15 @@ $(window).on('load', function () {
         pageCanvas.util.setProperty( key, val, prop_elem );
       } );
     Mousetrap.unbind('alt+a');
-    props.empty();
+    props_div.empty();
+    confs_div.empty();
     $('#props-target').html();
     if ( prop_elem ) {
-      setPropertyTag(prop_elem);
       updateSelectedInfo();
     }
     prop_elem = null;
   }
 
-  function setPropertyTag( elem ) {
-    $('.prop-tag').remove();
-    var nprops, bbox, text;
-    elem = typeof elem === 'undefined' ? $('.Page').parent() : elem;
-    if ( elem.length === 0 )
-      return;
-    nprops = elem.children('.Property').length;
-    bbox = elem[0].getBBox();
-    text = $(document.createElementNS( pageCanvas.util.sns, 'text' ))
-      .attr('style', 'display: block;')
-      .html('PROPS['+nprops+']')
-      .addClass('prop-tag')
-      .click(function ( event ) { return openPropertyModal(elem,event); })
-      .appendTo(elem);
-    text.attr('transform','translate('+(bbox.x+3)+','+(bbox.y-text[0].getBBox().height)+')');
-    text.removeAttr('style');
-  }
-
   function openPropertyModal( elem ) {
     if ( elem.is('.selected') )
       elem = elem.closest('g');
@@ -338,9 +315,47 @@ $(window).on('load', function () {
 
     $('#props-target').html( target === '- -' ? 'Document' : target );
 
+    function updateElemConf( elem, input ) {
+      var
+      elem_name = elem.attr('class').replace(/ .*/, ''),
+      conf_val = parseFloat(input[0].value);
+      if ( conf_val >= 0.0 && conf_val <= 1.0 && ! isNaN(conf_val) ) {
+        input.removeClass('field-invalid');
+        elem.attr('conf', input[0].value);
+        pageCanvas.registerChange(elem_name+' confidence '+elem.parent().attr('id'));
+      }
+      else {
+        input.addClass('field-invalid');
+        elem.removeAttr('conf');
+        pageCanvas.registerChange(elem_name+' confidence '+elem.parent().attr('id'));
+      }
+    }
+
+    function addConfsInput() {
+      var
+      textconf = pageCanvas.util.getTextConf(elem),
+      coordsconf = pageCanvas.util.getCoordsConf(elem),
+      baselineconf = pageCanvas.util.getBaselineConf(elem);
+      if ( elem.children('.TextEquiv').length > 0 ) {
+        var textconfin = $('<input tabIndex="1" class="conf mousetrap" type="text" value="'+(textconf ? textconf : '')+'"/>');
+        textconfin.on( 'input', function () { updateElemConf( elem.children('.TextEquiv'), textconfin ); } );
+        $('<div/>').append('Text: ').append(textconfin).appendTo(confs_div);
+      }
+      if ( elem.children('.Coords').length > 0 ) {
+        var coordsconfin = $('<input tabIndex="1" class="conf mousetrap" type="text" value="'+(coordsconf ? coordsconf : '')+'"/>');
+        coordsconfin.on( 'input', function () { updateElemConf( elem.children('.Coords'), coordsconfin ); } );
+        $('<div/>').append('Coords: ').append(coordsconfin).appendTo(confs_div);
+      }
+      if ( elem.children('.Baseline').length > 0 ) {
+        var baselineconfin = $('<input tabIndex="1" class="conf mousetrap" type="text" value="'+(baselineconf ? baselineconf : '')+'"/>');
+        baselineconfin.on( 'input', function () { updateElemConf( elem.children('.Baseline'), baselineconfin ); } );
+        $('<div/>').append('Baseline: ').append(baselineconfin).appendTo(confs_div);
+      }
+    }
+
     function checkInvalidKeys() {
       var keyDict = {};
-      props.find('input.key').each(function () {
+      props_div.find('input.key').each(function () {
           var tkey = $(this).val().trim();
           if ( tkey in keyDict ) {
             keyDict[tkey].count += 1;
@@ -361,10 +376,12 @@ $(window).on('load', function () {
       div = $('<div/>'),
       key = $('<input tabIndex="1" class="key mousetrap" type="text" value="'+escapeEnts(prop.attr('key'))+'"/>'),
       val = $('<input tabIndex="1" class="val mousetrap" type="text" value="'+(typeof prop.attr('value') === 'undefined' ? '' : escapeEnts(prop.attr('value')))+'"/>'),
+      conf = $('<input tabIndex="1" class="conf mousetrap" type="text" value="'+(typeof prop.attr('conf') === 'undefined' ? '' : escapeEnts(prop.attr('conf')))+'"/>'),
       del = $('<button tabIndex="-1">DEL</button>');
       if ( isreadonly ) {
         key.prop('disabled',true);
         val.prop('disabled',true);
+        conf.prop('disabled',true);
       }
       if ( typeof isnew !== 'undefined' && isnew )
         div.attr('isnew','');
@@ -378,25 +395,28 @@ $(window).on('load', function () {
           prop.attr('value',val[0].value);
           pageCanvas.registerChange('properties '+elem.attr('id'));
         } );
+      conf.on( 'input', function () { updateElemConf( prop, conf ); } );
       del.click( function () {
           if ( isreadonly )
             return pageCanvas.warning('Not possible to remove properties from read only elements');
           if ( confirm('Delete property ("'+prop.attr('key')+'","'+prop.attr('value')+'") from '+elem.attr('class').replace(/ .*/,'')+' with id='+elem.attr('id')+'?') ) {
             div.remove();
             pageCanvas.util.delProperty( prop.attr('key'), elem );
-            setPropertyTag(elem);
           }
         } );
       div
         .append('Key:').append(key)
         .append('Value:').append(val)
+        .append('Conf:').append(conf)
         .append(del)
         .insertBefore(add);
       key.focus();
     }
 
-    props.empty();
-    props.append(add);
+    confs_div.empty();
+    addConfsInput();
+    props_div.empty();
+    props_div.append(add);
     Mousetrap.bind( 'alt+a', function () { add.click(); return false; } );
     elem.children('.Property:not([key=protected])').each( function () { addPropInput( $(this) ); } );
     add.click( function () {
@@ -903,6 +923,7 @@ $(window).on('load', function () {
     line_type = $('#textlineRestriction').val(),
     group_member_type = $('#group-member-type').val(),
     group_size = parseInt($('#group-members input').val()),
+    other_region_type = $('#other-region-type').val(),
     page = $('#pageMode input'),
     region = $('#regMode input'),
     line = $('#lineMode input'),
@@ -910,6 +931,7 @@ $(window).on('load', function () {
     glyph = $('#glyphMode input'),
     table = $('#tabMode input'),
     group = $('#groupMode input'),
+    other = $('#otherMode input'),
     all = $('#allMode input'),
     select = $('#selMode input'),
     baseline = $('#baseMode input'),
@@ -920,6 +942,8 @@ $(window).on('load', function () {
 
     pageCanvas.cfg.coordsMaxPoints = rect_checked ? 4 : 0;
 
+    function isvalidpoly( points, elem, complete ) { return pageCanvas.util.isValidCoords(points, elem, complete, other_region_type); }
+
     var coords_restriction = false;
     if ( $('#coordsRestriction').val() === '4' && axis_checked )
       coords_restriction = pageCanvas.enum.restrict.AxisAlignedRectangle;
@@ -1087,17 +1111,43 @@ $(window).on('load', function () {
         pageCanvas.mode.modifyGroup( group_member_type );
     }
 
+    /// Other regions modes ///
+    else if ( other.prop('checked') ) {
+      /// Disable invalid ///
+      if ( baseline.prop('checked') || modify.prop('checked') )
+        select.prop('checked',true);
+      disable_invalid([baseline, modify, text]);
+      /// Region select ///
+      if ( select.prop('checked') )
+        pageCanvas.mode.select( '.'+other_region_type, ':not(.'+other_region_type+') > .Coords' );
+      /// Region coords ///
+      else if( coords.prop('checked') ) {
+        if ( coords_restriction )
+          pageCanvas.mode.rect( '.'+other_region_type, '> .Coords', ':not(.'+other_region_type+') > .Coords', isvalidpoly );
+        else
+          pageCanvas.mode.points( '.'+other_region_type, '> .Coords', ':not(.'+other_region_type+') > .Coords', isvalidpoly );
+      }
+      /// Region drag ///
+      else if( drag.prop('checked') )
+        pageCanvas.mode.drag( '.'+other_region_type+':hasCoords', '.Page', undefined, ':not(.'+other_region_type+') > .Coords' );
+      /// Region create ///
+      else if( create.prop('checked') )
+        pageCanvas.mode.editModeCoordsCreate( coords_restriction, '.'+other_region_type, other_region_type, '.Page', other_region_type[0].toLowerCase() );
+    }
+
     /// All mode ///
     else if ( all.prop('checked') ) {
       select.prop('checked',true);
       pageCanvas.mode.allSelect( text_checked );
       /// Disable invalid ///
-      disable_invalid([baseline, coords, drag, create, modify, text, edit]);
+      disable_invalid([baseline, coords, drag, create, modify, edit]);
     }
 
     var
     modeElem = $('#editModesFieldset input[name=mode1]:checked').parent().text().trim(),
     modeType = $('#editModesFieldset input[name=mode2]:checked').parent().text().trim();
+    if ( $('#editModesFieldset input[name=mode1]:checked').parent().attr('id') == 'otherMode' )
+      modeElem = $('#editModesFieldset input[name=mode1]:checked').parent().find('option:checked').val();
 
     $('#modeActive').text(modeElem+'-'+modeType);
     $('#modeElement').text('-/'+$('.editable').length);
@@ -1105,7 +1155,7 @@ $(window).on('load', function () {
       highlightEditables();
     saveDrawerState();
   }
-  $('#editModesFieldset input, #newPropsFieldset select, #newPropsFieldset input')
+  $('#editModesFieldset select, #editModesFieldset input, #newPropsFieldset select, #newPropsFieldset input')
     .change(handleEditMode);
 
   /// Handle round points ///
diff --git a/package.json b/package.json
index 0aee1c9..2e42a12 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "nw-page-editor",
-  "version": "2020.03.03",
+  "version": "2020.03.17",
   "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
index c0981d9..3c0d255 100644
--- 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.03.03$
+ * @version $Version: 2020.03.17$
  * @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.03.03");
+$version = str_replace('Version: ','',"Version: 2020.03.17");
 $v = '?v='.$version;
 
 /// User authentication ///
diff --git a/web-app/index.php b/web-app/index.php
index 72e0956..5946eb6 100644
--- a/web-app/index.php
+++ b/web-app/index.php
@@ -2,7 +2,7 @@
 <!--
   - Main PHP file of nw-page-editor web edition.
   -
-  - @version $Version: 2020.03.03$
+  - @version $Version: 2020.03.17$
   - @author Mauricio Villegas <mauricio_ville@yahoo.com>
   - @copyright Copyright(c) 2015-present, Mauricio Villegas <mauricio_ville@yahoo.com>
   - @license MIT License
@@ -133,8 +133,15 @@
         <label id="wordMode"><input class="mousetrap" type="radio" name="mode1" value="word"/> Word</label>
         <label id="glyphMode"><input class="mousetrap" type="radio" name="mode1" value="glyph"/> Glyph</label>
         <label id="tabMode"><input class="mousetrap" type="radio" name="mode1" value="table"/> Table</label>
-        <label id="groupMode"><input class="mousetrap" type="radio" name="mode1" value="table"/> Group</label>
-        <label id="allMode"><input class="mousetrap" type="radio" name="mode1" value="page"/> All</label>
+        <label id="groupMode"><input class="mousetrap" type="radio" name="mode1" value="group"/> Group</label>
+        <label id="otherMode"><input class="mousetrap" type="radio" name="mode1" value="other"/>
+          <select id="other-region-type" name="other-region-type">
+            <option value="ImageRegion" selected="">ImageRegion</option>
+            <option value="SeparatorRegion">SeparatorRegion</option>
+            <option value="CustomRegion">CustomRegion</option>
+          </select>
+        </label>
+        <label id="allMode"><input class="mousetrap" type="radio" name="mode1" value="all"/> All</label>
       </div>
     </fieldset>
     <fieldset id="newPropsFieldset">
@@ -211,7 +218,6 @@
       <label id="hide-text-edit"><input class="mousetrap" type="checkbox" checked=""/> Lower pane</label>
       <label id="hide-img"><input class="mousetrap" type="checkbox" checked=""/> Image</label>
       <label id="hide-marker-start"><input class="mousetrap" type="checkbox"/> Coords/Baseline start markers</label>
-      <label id="hide-prop-tag"><input class="mousetrap" type="checkbox"/> Property tag</label>
       <div class="visibility-set">
         Region:
         <label id="hide-text-reg"><input class="mousetrap" type="checkbox"/> text</label>
@@ -251,8 +257,11 @@
   <div id="prop-modal" class="modal">
     <div class="modal-content">
       <span class="close">&#215;</span>
-      <h3>Properties for <span id="props-target"></span></h3>
+      <h2><span id="props-target"></span></h2>
+      <h3>Properties</h3>
       <div id="props"></div>
+      <h3>Confidences</h3>
+      <div id="confs"></div>
     </div>
   </div>
   <div id="readme-modal" class="modal">
diff --git a/xslt/page2svg.xslt b/xslt/page2svg.xslt
index 3a718c5..326a9ef 100644
--- a/xslt/page2svg.xslt
+++ b/xslt/page2svg.xslt
@@ -2,7 +2,7 @@
 <!--
   - XSLT that transforms Page XMLs to SVGs.
   -
-  - @version $Version: 2019.07.01$
+  - @version $Version: 2020.03.17$
   - @author Mauricio Villegas <mauricio_ville@yahoo.com>
   - @copyright Copyright(c) 2015-present, Mauricio Villegas <mauricio_ville@yahoo.com>
   - @license MIT License
@@ -21,7 +21,7 @@
   <xsl:output method="xml" indent="yes" encoding="utf-8" omit-xml-declaration="no"/>
   <xsl:strip-space elements="*"/>
 
-  <xsl:param name="xsltVersion" select="'2019.07.01'"/>
+  <xsl:param name="xsltVersion" select="'2020.03.17'"/>
 
   <xsl:template match="@* | node()">
     <xsl:copy>
@@ -68,7 +68,7 @@
 
   <xsl:template match="page:ImageOrientation"/>
 
-  <xsl:template match="page:TextRegion | page:TableRegion | page:TextLine | page:Word | page:Glyph | page:Property | page:Group | page:Member | page:ImageRegion | page:SeparatorRegion | page:TextEquiv">
+  <xsl:template match="page:TextRegion | page:TableRegion | page:TextLine | page:Word | page:Glyph | page:Property | page:Group | page:Member | page:ImageRegion | page:SeparatorRegion | page:CustomRegion | page:TextEquiv">
     <g class="{local-name()}">
       <xsl:apply-templates select="@* | node()"/>
     </g>
diff --git a/xslt/svg2page.xslt b/xslt/svg2page.xslt
index 1982d14..3f57b5f 100644
--- a/xslt/svg2page.xslt
+++ b/xslt/svg2page.xslt
@@ -2,7 +2,7 @@
 <!--
   - XSLT that transforms SVGs to Page XMLs.
   -
-  - @version $Version: 2019.07.01$
+  - @version $Version: 2020.03.17$
   - @author Mauricio Villegas <mauricio_ville@yahoo.com>
   - @copyright Copyright(c) 2015-present, Mauricio Villegas <mauricio_ville@yahoo.com>
   - @license MIT License
@@ -18,7 +18,7 @@
   <xsl:output method="xml" indent="yes" encoding="utf-8" omit-xml-declaration="no"/>
   <xsl:strip-space elements="*"/>
 
-  <xsl:param name="xsltVersion" select="'2019.07.01'"/>
+  <xsl:param name="xsltVersion" select="'2020.03.17'"/>
 
   <xsl:template match="@* | node()">
     <xsl:copy>
@@ -65,10 +65,10 @@
   <xsl:template match="svg:image"/>
   <xsl:template match="@style"/>
 
-  <xsl:template match="svg:g[@class='TextRegion' or @class='TableRegion' or @class='TextLine' or @class='Word' or @class='Glyph' or @class='Property' or @class='Group' or @class='Member' or @class='ImageRegion' or @class='SeparatorRegion' or @class='TextEquiv']">
+  <xsl:template match="svg:g[@class='TextRegion' or @class='TableRegion' or @class='TextLine' or @class='Word' or @class='Glyph' or @class='Property' or @class='Group' or @class='Member' or @class='ImageRegion' or @class='SeparatorRegion' or @class='CustomRegion' or @class='TextEquiv']">
     <xsl:element name="{@class}">
       <xsl:apply-templates select="@*[local-name()!='class'] | node()"/>
-      <xsl:if test="(@class='TextRegion' or @class='TableRegion' or @class='TextLine' or @class='Word' or @class='Glyph' or @class='ImageRegion' or @class='SeparatorRegion') and not(svg:polygon[@class='Coords'])">
+      <xsl:if test="(@class='TextRegion' or @class='TableRegion' or @class='TextLine' or @class='Word' or @class='Glyph' or @class='ImageRegion' or @class='SeparatorRegion' or @class='CustomRegion') and not(svg:polygon[@class='Coords'])">
         <Coords points="0,0 0,0"/>
       </xsl:if>
     </xsl:element>