From 3b9ed595667bc537a59c966d5cf0ff30c9c811ca Mon Sep 17 00:00:00 2001
From: id-ilych <id-ilych@users.noreply.github.com>
Date: Tue, 8 May 2018 08:59:17 +0200
Subject: [PATCH] [Optimization] Generate only required pieces

Inverted pieces is generated along with regular ones to use when background image is set.
But these cases are mutually exclusive so you either need regular OR inverted ones.
Now only pieces that are going to be used are generated which is roughly 2x speed up.
---
 lib/QRCode.js | 44 ++++++++++++++++++++++----------------------
 1 file changed, 22 insertions(+), 22 deletions(-)

diff --git a/lib/QRCode.js b/lib/QRCode.js
index 80f81ce3..b2f09cb6 100644
--- a/lib/QRCode.js
+++ b/lib/QRCode.js
@@ -80,34 +80,34 @@ export default class QRCode extends Component {
      var logoY = ((this.props.size/2)-(this.props.logoSize/2));
      var logoSize = this.props.logoSize;
 
-     var pieces = [];
-     var nonPieces = [];
-
      //Add the SVG element of each piece in the body of the QR Code
-     for (var y = 0; y < length; y++) {
-       for (var x = 0; x < length; x++) {
-         var module = modules[x][y];
-         var px = (x * xsize + this.props.padding * xsize);
-         var py = (y * ysize + this.props.padding * ysize);
+     var makePieces = (params) => {
+       var invert = Boolean(params && params.invert);
+       var result = [];
 
-         //TODO: Add function to compute if pieces overlap with circular logos (more complex. Must see if tl or br is inside the radius from the centre of the circle (pythagoras theorem?))
-         var overlapsWithLogo = (
+       for (var y = 0; y < length; y++) {
+         for (var x = 0; x < length; x++) {
+           var module = Boolean(modules[x][y]);
+           var px = (x * xsize + this.props.padding * xsize);
+           var py = (y * ysize + this.props.padding * ysize);
 
-           px>logoX && px<(logoX+logoSize) && py>logoY && py<(logoY+logoSize) ||//Piece's top left is inside the logo area
-           (px+xsize)>logoX && (px+xsize)<(logoX+logoSize) && (py+ysize)>logoY && (py+ysize)<(logoY+logoSize)//Piece's bottom right is inside the logo area
+           //TODO: Add function to compute if pieces overlap with circular logos (more complex. Must see if tl or br is inside the radius from the centre of the circle (pythagoras theorem?))
+           var overlapsWithLogo = (
 
-         );
+             px>logoX && px<(logoX+logoSize) && py>logoY && py<(logoY+logoSize) ||//Piece's top left is inside the logo area
+             (px+xsize)>logoX && (px+xsize)<(logoX+logoSize) && (py+ysize)>logoY && (py+ysize)<(logoY+logoSize)//Piece's bottom right is inside the logo area
 
-         if(!this.props.logo || (this.props.logo && !overlapsWithLogo)){
+           );
 
-           if (module) {
-             pieces.push(this.getPiece(x,y,modules));
-           }
-           else{
-             nonPieces.push(this.getPiece(x,y,modules));
+           if(!this.props.logo || (this.props.logo && !overlapsWithLogo)){
+
+             if (module !== invert) {
+               result.push(this.getPiece(x,y,modules));
+             }
            }
          }
        }
+       return result;
      }
 
      if(this.props.backgroundImage){
@@ -118,7 +118,7 @@ export default class QRCode extends Component {
              <Svg style={{backgroundColor:'transparent',height:this.props.size,width:this.props.size}}>
               <Defs>
                 <ClipPath id="clip">
-                  {nonPieces}
+                  {makePieces({invert: true})}
                 </ClipPath>
               </Defs>
                  <Rect clipPath="url(#clip)" fill='white' x={0} y={0} height='100%' width='100%'/>
@@ -132,7 +132,7 @@ export default class QRCode extends Component {
            <Svg style={{backgroundColor:this.props.backgroundColor,height:this.props.size,width:this.props.size}}>
             <Defs>
               <ClipPath id="clip">
-                {pieces}
+                {makePieces()}
               </ClipPath>
               <LinearGradient id="grad" x1={this.props.gradientDirection[0]} y1={this.props.gradientDirection[1]} x2={this.props.gradientDirection[2]} y2={this.props.gradientDirection[3]}>
                   <Stop offset="0" stopColor={this.props.linearGradient[0]} stopOpacity="1" />
@@ -151,7 +151,7 @@ export default class QRCode extends Component {
            <Svg style={{backgroundColor:this.props.backgroundColor,height:this.props.size,width:this.props.size}}>
             <Defs>
               <ClipPath id="clip">
-                {pieces}
+                {makePieces()}
               </ClipPath>
             </Defs>
                <Rect clipPath="url(#clip)" fill='white' x={0} y={0} height='100%' width='100%' fill={this.props.color}/>