erp5_document_scanner: patch cropperjs

Always render cropper when resizing

erp5_document_scanner: limit video/image height

erp5_document_scanner: add related less file

erp5_document_scanner: disable the black layer around the image

erp5_document_scanner: fix the image/video size

erp5_document_scanner: restore cropbox data when resizing

erp5_document_scanner: improve image review

bt5/erp5_document_scanner/PathTemplateItem/web_page_module/scanner_gadget_document_scanner_css.css

@@ -15,13 +15,9 @@ div[data-gadget-url$="gadget_document_scanner.html"] .camera-output,
 div[data-gadget-url$="gadget_document_scanner.html"] .canvas {
   max-width: 100%;
   width: auto;
-  max-height: 500px;
   filter: brightness(1);
   text-align: center;
 }
-div[data-gadget-url$="gadget_document_scanner.html"] .camera-input {
-  background-color: rgba(0, 0, 0, 0.5);
-}
 div[data-gadget-url$="gadget_document_scanner.html"] .page-number {
   display: inline;
 }
@@ -98,15 +94,20 @@ div[data-gadget-url$="gadget_document_scanner.html"] .new-btn {
   width: calc(6em + 1px);
   height: calc(6em + 1px);
 }
-div[data-gadget-url$="gadget_document_scanner.html"] .img-container {
+div[data-gadget-url$="gadget_document_scanner.html"] .review-img-container {
+  height: 70vh;
+}
+div[data-gadget-url$="gadget_document_scanner.html"] .img-container,
+div[data-gadget-url$="gadget_document_scanner.html"] .camera-input {
   /* Never limit the container height here */
   position: relative;
   width: 100%;
-  max-height: 500px;
 }
-div[data-gadget-url$="gadget_document_scanner.html"] .img-container img {
-  max-width: 100%;
-  width: 100%;
+div[data-gadget-url$="gadget_document_scanner.html"] .img-container img,
+div[data-gadget-url$="gadget_document_scanner.html"] .camera-input img,
+div[data-gadget-url$="gadget_document_scanner.html"] .img-container video,
+div[data-gadget-url$="gadget_document_scanner.html"] .camera-input video {
+  height: 70vh;
 }
 div[data-gadget-url$="gadget_document_scanner.html"] .btn-thumbnail:before {
   color: #000;

bt5/erp5_document_scanner/PathTemplateItem/web_page_module/scanner_gadget_document_scanner_css.xml

@@ -244,7 +244,7 @@
                   </item>
                   <item>
                       <key> <string>serial</string> </key>
-                      <value> <string>982.61223.17950.60723</string> </value>
+                      <value> <string>982.62807.48775.28757</string> </value>
                   </item>
                   <item>
                       <key> <string>state</string> </key>
@@ -262,7 +262,7 @@
                           </tuple>
                           <state>
                             <tuple>
-                              <float>1585822646.11</float>
+                              <float>1585922346.12</float>
                               <string>UTC</string>
                             </tuple>
                           </state>

bt5/erp5_document_scanner/PathTemplateItem/web_page_module/scanner_gadget_document_scanner_js.js

@@ -191,9 +191,10 @@
         guides: true,
         center: true,
         background: false,
-        minContainerWidth: 0,
-        minContainerHeight: 0,
+        minContainerWidth: 1,
+        minContainerHeight: 1,
         responsive: true,
+        restore: true,
         // Avoid any cropper calculation or guessing
         scalable: false,
         rotatable: false,
@@ -730,7 +731,9 @@
 
         div = domsugar('div', {'class': 'camera'}, [
           buildPageTitle(gadget, result_list[0][2]),
-          domsugar('img', {src: gadget.state['blob_url_' + gadget.state.display_index]})
+          domsugar('div', {'class': 'review-img-container'}, [
+            domsugar('img', {src: gadget.state['blob_url_' + gadget.state.display_index]})
+          ]),
           // XXX TODO: why is the button rendering different from the other pages?
           domsugar('div', {'class': 'edit-picture'}, button_list),
           result_list[1]
@@ -796,8 +799,7 @@
       display_step: 'display_video',
       display_index: null,
       page_count: 0,
-      camera_list: [],
-      is_cropper_size_confirmed: false
+      camera_list: []
     })
     .declareMethod('render', function (options) {
       // This method is called during the ERP5 form rendering
@@ -1037,4 +1039,4 @@
 
 }(rJS, RSVP, window, document, navigator, Cropper, Promise, JSON, jIO,
   promiseEventListener, domsugar, createImageBitmap, FormData, Caman,
-  FileReader, DataView, URL, fx));
+  FileReader, DataView, URL, fx));
\ No newline at end of file

bt5/erp5_document_scanner/PathTemplateItem/web_page_module/scanner_gadget_document_scanner_js.xml

@@ -244,7 +244,7 @@
                   </item>
                   <item>
                       <key> <string>serial</string> </key>
-                      <value> <string>982.62865.31516.35805</string> </value>
+                      <value> <string>982.62866.16795.56132</string> </value>
                   </item>
                   <item>
                       <key> <string>state</string> </key>
@@ -262,7 +262,7 @@
                           </tuple>
                           <state>
                             <tuple>
-                              <float>1585921095.31</float>
+                              <float>1585922429.02</float>
                               <string>UTC</string>
                             </tuple>
                           </state>

bt5/erp5_document_scanner/SkinTemplateItem/portal_skins/erp5_document_scanner/cropper.css.css

@@ -55,7 +55,8 @@
 }
 
 .cropper-modal {
-  background-color: #000;
+  /* Disable the black layer around the image
+  background-color: #000;*/
   opacity: 0.5;
 }
 

bt5/erp5_document_scanner/SkinTemplateItem/portal_skins/erp5_document_scanner/cropper.js.js

@@ -1793,38 +1793,31 @@
 
   var handlers = {
     resize: function resize() {
+      // Always render fully
+      // Otherwise, there are some display issue when increasing the window size (part of the canvas is hidden)
       var options = this.options,
           container = this.container,
           containerData = this.containerData;
       var minContainerWidth = Number(options.minContainerWidth) || MIN_CONTAINER_WIDTH;
       var minContainerHeight = Number(options.minContainerHeight) || MIN_CONTAINER_HEIGHT;
 
-      if (this.disabled || containerData.width <= minContainerWidth || containerData.height <= minContainerHeight) {
-        return;
-      }
-
       var ratio = container.offsetWidth / containerData.width; // Resize when width changed or height changed
 
-      if (ratio !== 1 || container.offsetHeight !== containerData.height) {
-        var canvasData;
-        var cropBoxData;
+      var canvasData;
+      var cropBoxData;
 
-        if (options.restore) {
-          canvasData = this.getCanvasData();
-          cropBoxData = this.getCropBoxData();
-        }
+      canvasData = this.getCanvasData();
+      cropBoxData = this.getCropBoxData();
 
-        this.render();
+      this.render();
+
+      this.setCanvasData(forEach(canvasData, function (n, i) {
+        canvasData[i] = n * ratio;
+      }));
+      this.setCropBoxData(forEach(cropBoxData, function (n, i) {
+        cropBoxData[i] = n * ratio;
+      }));
 
-        if (options.restore) {
-          this.setCanvasData(forEach(canvasData, function (n, i) {
-            canvasData[i] = n * ratio;
-          }));
-          this.setCropBoxData(forEach(cropBoxData, function (n, i) {
-            cropBoxData[i] = n * ratio;
-          }));
-        }
-      }
     },
     dblclick: function dblclick() {
       if (this.disabled || this.options.dragMode === DRAG_MODE_NONE) {

bt5/erp5_document_scanner/SkinTemplateItem/portal_skins/erp5_document_scanner/documentscannercss.less.txt

@@ -13,16 +13,10 @@ div[data-gadget-url$="gadget_document_scanner.html"] {
   .photo, .video, .camera-output, .canvas {
     max-width: 100%;
     width: auto;
-    max-height: 500px;
     filter: brightness(1);
     text-align: center;
   }
 
-  .camera-input {
-    // Mimic cropper background
-    background-color: rgba(0, 0, 0, 0.5);
-  }
-
   .page-number {
     display: inline;
   }
@@ -100,9 +94,17 @@ div[data-gadget-url$="gadget_document_scanner.html"] {
     height: calc(6em + 1px);
   }
 
-  .img-container {
+  .review-img-container {
+      height: 70vh;
+  }
+
+  .img-container, .camera-input {
     /* Never limit the container height here */
-    max-width: 100%;
+    position: relative;
+    width: 100%;
+    img, video {
+      height: 70vh;
+    }
   }
 
   .btn-thumbnail:before {