Add autoColorDark, autoColorLight options

+ Add `autoColorDark`, `autoColorLight` options
# Optimize codes

Author: ushelp

.gitignore

@@ -60,4 +60,7 @@ typings/
 # next.js build output
 .next
 
-# temp
+# temp
+
+# Test
+test

QRCode.js

@@ -3,7 +3,7 @@
  *
  * React Native QRCode generation component. Can generate standard QRCode image or base64 image data url text. Cross-browser QRCode generator for pure javascript. Support Dot style, Logo, Background image, Colorful, Title etc. settings. support binary mode.
  *
- * Version 3.8.0
+ * Version 3.9.0
  *
  * @author [ [email protected] ]
  *
@@ -1085,11 +1085,11 @@ Drawing.prototype.draw = function(oQRCode) {
 
     this._htOption.width = nWidth * nCount;
     this._htOption.height = nHeight * nCount + _htOption.titleHeight;
-    this._canvas.height = his._htOption.height + this._htOption.quietZone * 2;
+    this._canvas.height = this._htOption.height + this._htOption.quietZone * 2;
     this._canvas.width = this._htOption.width + this._htOption.quietZone * 2;
 
-    var autoColorDark = "rgba(0, 0, 0, .6)";
-    var autoColorLight = "rgba(255, 255, 255, .7)";
+    var autoColorDark = _htOption.autoColorDark;
+    var autoColorLight = _htOption.autoColorLight;
     var notAutoColorLight = "rgba(0,0,0,0)";
 
     this._oContext = this._canvas.getContext("2d");
@@ -1162,6 +1162,53 @@ Drawing.prototype.draw = function(oQRCode) {
                 var eye = oQRCode.getEye(row, col); // { isDark: true/false, type: PO_TL, PI_TL, PO_TR, PI_TR, PO_BL, PI_BL };
 
                 var nowDotScale = _htOption.dotScale;
+
+                _oContext.lineWidth = 0;
+
+                // Color handler
+                var dColor;
+                var lColor;
+                if (eye) {
+                    dColor = _htOption[eye.type] || _htOption[eye.type.substring(
+                            0, 2)] ||
+                        _htOption.colorDark;
+                    lColor = _htOption.colorLight;
+                } else {
+                    if (_htOption.backgroundImage) {
+
+                        lColor = "rgba(0,0,0,0)";
+                        if (row == 6) {
+                            dColor = _htOption.timing_H || _htOption.timing || _htOption.colorDark;
+                        } else if (col == 6) {
+                            dColor = _htOption.timing_V || _htOption.timing ||
+                                _htOption.colorDark;
+                        } else {
+
+                            if (_htOption.autoColor) {
+                                dColor = _htOption.autoColorDark;
+                                lColor = _htOption.autoColorLight;
+                            } else {
+                                dColor = _htOption.colorDark;
+                            }
+                        }
+
+                    } else {
+                        if (row == 6) {
+                            dColor = _htOption.timing_H || _htOption.timing || _htOption.colorDark;
+                        } else if (col == 6) {
+                            dColor = _htOption.timing_V || _htOption.timing ||
+                                _htOption.colorDark;
+                        } else {
+                            dColor = _htOption.colorDark;
+                        }
+                        lColor = _htOption.colorLight;
+                    }
+                }
+                _oContext.strokeStyle = bIsDark ? dColor :
+                    lColor;
+                _oContext.fillStyle = bIsDark ? dColor :
+                    lColor;
+
                 if (eye) {
                     // Is eye
                     bIsDark = eye.isDarkBlock;
@@ -1174,40 +1221,12 @@ Drawing.prototype.draw = function(oQRCode) {
                         nowDotScale = 1;
                     }
 
-
-
-                    // PX_XX, PX, colorDark, colorLight
-                    var eyeColorDark = _htOption[type] || _htOption[type.substring(0, 2)] || _htOption.colorDark;
-
-                    _oContext.lineWidth = 0;
-                    _oContext.strokeStyle = bIsDark ? eyeColorDark : _htOption.colorLight;
-                    _oContext.fillStyle = bIsDark ? eyeColorDark : _htOption.colorLight;
-
                     // _oContext.fillRect(nLeft, _htOption.titleHeight + nTop, nWidth, nHeight);
                     _oContext.fillRect(nLeft + nWidth * (1 - nowDotScale) / 2, _htOption.titleHeight +
                         nTop + nHeight * (1 -
                             nowDotScale) / 2, nWidth * nowDotScale, nHeight *
                         nowDotScale);
                 } else {
-                    _oContext.lineWidth = 0;
-                    _oContext.strokeStyle = bIsDark ? _htOption.colorDark : _htOption.colorLight;
-                    _oContext.fillStyle = bIsDark ? _htOption.colorDark : _htOption.colorLight;
-
-                    if (_htOption.backgroundImage) {
-
-                        if (_htOption.autoColor) {
-                            _oContext.strokeStyle = bIsDark ? autoColorDark : autoColorLight;
-                            _oContext.fillStyle = bIsDark ? autoColorDark : autoColorLight;
-                        } else {
-                            _oContext.fillStyle = bIsDark ? _htOption.colorDark : _htOption.colorLight;
-                            _oContext.strokeStyle = _oContext.fillStyle;
-                        }
-
-                    } else {
-                        _oContext.strokeStyle = _oContext.fillStyle;
-
-
-                    }
                     if (row == 6) {
                         // Timing Pattern
                         nowDotScale = _htOption.dotScaleTiming_H;
@@ -1436,7 +1455,9 @@ function QRCode(canvas, vOption) {
         // ==== Backgroud Image
         backgroundImage: undefined, // Background Image
         backgroundImageAlpha: 1, // Background image transparency, value between 0 and 1. default is 1.
-        autoColor: false,
+        autoColor: false, // Automatic color adjustment(for data block)
+        autoColorDark: "rgba(0, 0, 0, .6)", // Automatic color: dark CSS color
+        autoColorLight: "rgba(255, 255, 255, .7)", // Automatic color: light CSS color
 
         // ==== Event Handler
         onRenderingStart: undefined,
@@ -1551,7 +1572,7 @@ function QRCode(canvas, vOption) {
 
 
 QRCode.prototype._show = function() {
-    var _oDrawing = new Drawing(this.canvas, this._htOption);
+    var _oDrawing = new Drawing(this.canvas, Object.assign({}, this._htOption));
     this._oDrawing = _oDrawing;
     _oDrawing.draw(this._oQRCode);
 };

QRCode.min.js

@@ -1,6 +1,6 @@
 {
     "name": "easyqrcode-react-native",
-    "version": "3.8.0",
+    "version": "3.9.0",
     "description": "React Native QRCode generation component. Can get standard base64 image data url text or save image to file. Cross-browser QRCode generator for pure javascript. Support Dot style, Logo, Background image, Colorful, Title etc. settings. support binary mode.",
     "main": "QRCode.min.js",
     "scripts": {},

package.json

@@ -158,8 +158,8 @@ var qrcode = new QRCode(canvas_object, options_object);
     colorLight : "#ffffff",
     correctLevel : QRCode.CorrectLevel.H, // L, M, Q, H
 
-     // ====== dotScale
-     /*
+    // ====== dotScale
+    /*
     dotScale: 1, // For body block, must be greater than 0, less than or equal to 1. default is 1
     
     dotScaleTiming: 1, // Dafault for timing block , must be greater than 0, less than or equal to 1. default is 1
@@ -190,7 +190,9 @@ var qrcode = new QRCode(canvas_object, options_object);
     /*
     backgroundImage: '', // support: Static Image Resources, Network Images, Base64 Uri Data Images
     backgroundImageAlpha: 1, // Background image transparency, value between 0 and 1. default is 1. 
-    autoColor: false,
+    autoColor: false, // Automatic color adjustment(for data block)
+    autoColorDark: "rgba(0, 0, 0, .6)", // Automatic color: dark CSS color
+    autoColorLight: "rgba(255, 255, 255, .7)", // Automatic color: light CSS color
     */
 
     // ====== Colorful
@@ -283,7 +285,9 @@ var qrcode = new QRCode(canvas_object, options_object);
 | Backgroud Image options|  ---|--- |---|---|
 | **backgroundImage** | N | String | `undefined` | Background Image Path or Base64 encoded Image. If use relative address, relative to `easy.qrcode.min.js` |  
 | **backgroundImageAlpha** | N | Number | `1.0` |  Background image transparency. Ranges: `0-1.0`  | 
-| **autoColor** | N | Boolean | `false` |  Automatic color adjustment | 
+| **autoColor** | N | Boolean | `false` |  Automatic color adjustment(for data block) | 
+| **autoColorDark** | N | String | `rgba(0, 0, 0, .6)` |  Automatic color: dark CSS color  |
+| **autoColorLight** | N | String | `rgba(255, 255, 255, .7)` |  Automatic color: light CSS color |
 | Posotion Pattern Color options| --- | ---|---|---|
 | **PO** | N | String | `undefined` | Global Posotion Outer CSS color. if not set, the defaut is `colorDark` | 
 | **PI** | N | String | `undefined` | Global Posotion Inner CSS color. if not set, the defaut is `colorDark` |