[Param color adjustment]

package-lock.json

@@ -1142,6 +1142,11 @@
         "@hapi/hoek": "^8.3.0"
       }
     },
+    "@icons/material": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npm.taobao.org/@icons/material/download/@icons/material-0.2.4.tgz",
+      "integrity": "sha1-6QyfcXaLNzbnbX3WeD/Gwq+oi8g="
+    },
     "@jest/console": {
       "version": "24.9.0",
       "resolved": "https://registry.npm.taobao.org/@jest/console/download/@jest/console-24.9.0.tgz",
@@ -8415,6 +8420,11 @@
         "object-visit": "^1.0.0"
       }
     },
+    "material-colors": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npm.taobao.org/material-colors/download/material-colors-1.2.6.tgz",
+      "integrity": "sha1-bRlYhxEmmSzuzHL0vMTY8BCGX0Y="
+    },
     "md5.js": {
       "version": "1.3.5",
       "resolved": "https://registry.npm.taobao.org/md5.js/download/md5.js-1.3.5.tgz",
@@ -10791,6 +10801,19 @@
         }
       }
     },
+    "react-color": {
+      "version": "2.18.1",
+      "resolved": "https://registry.npm.taobao.org/react-color/download/react-color-2.18.1.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Freact-color%2Fdownload%2Freact-color-2.18.1.tgz",
+      "integrity": "sha1-LNqMyOBqnixSrTkaMN2tMZckcvQ=",
+      "requires": {
+        "@icons/material": "^0.2.4",
+        "lodash": "^4.17.11",
+        "material-colors": "^1.2.1",
+        "prop-types": "^15.5.10",
+        "reactcss": "^1.2.0",
+        "tinycolor2": "^1.4.1"
+      }
+    },
     "react-dev-utils": {
       "version": "10.2.1",
       "resolved": "https://registry.npm.taobao.org/react-dev-utils/download/react-dev-utils-10.2.1.tgz?cache=0&sync_timestamp=1584750310214&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Freact-dev-utils%2Fdownload%2Freact-dev-utils-10.2.1.tgz",
@@ -11117,6 +11140,14 @@
         "workbox-webpack-plugin": "4.3.1"
       }
     },
+    "reactcss": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npm.taobao.org/reactcss/download/reactcss-1.2.3.tgz",
+      "integrity": "sha1-wAATh15Vexzw39mjaKHD2rO1SN0=",
+      "requires": {
+        "lodash": "^4.0.1"
+      }
+    },
     "read-pkg": {
       "version": "3.0.0",
       "resolved": "https://registry.npm.taobao.org/read-pkg/download/read-pkg-3.0.0.tgz",
@@ -12955,6 +12986,11 @@
       "resolved": "https://registry.npm.taobao.org/timsort/download/timsort-0.3.0.tgz",
       "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q="
     },
+    "tinycolor2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npm.taobao.org/tinycolor2/download/tinycolor2-1.4.1.tgz",
+      "integrity": "sha1-9PrTM0R7wLB9TcjpIJ2POaisd+g="
+    },
     "tmp": {
       "version": "0.0.33",
       "resolved": "https://registry.npm.taobao.org/tmp/download/tmp-0.0.33.tgz",

package.json

@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^7.1.2",
     "prop-types": "^15.7.2",
     "react": "^16.13.1",
+    "react-color": "^2.18.1",
     "react-dom": "^16.13.1",
     "react-redux": "^7.2.0",
     "react-scripts": "3.4.1",

src/components/Qrcode.css

@@ -434,3 +434,7 @@ select:-moz-focusring {
     color: transparent;
     text-shadow: 0 0 0 #000;
 }
+
+.Qr-color-picker {
+    width: 200px;
+}

src/components/param/ParamColor.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {SliderPicker} from 'react-color';
+import '../Qrcode.css';
+
+const ParamColor = ({ rendererIndex, paramIndex, value, onChange }) => (
+    <SliderPicker
+        key={"input_" + rendererIndex + "_" + paramIndex}
+        className="Qr-color-picker"
+        color={value}
+        onChangeComplete={onChange}
+    />
+)
+
+ParamColor.propTypes = {
+    rendererIndex: PropTypes.number.isRequired,
+    paramIndex: PropTypes.number.isRequired,
+    value: PropTypes.string.isRequired,
+    onChange: PropTypes.func.isRequired,
+}
+
+export default ParamColor;

src/components/param/ParamList.js

@@ -3,6 +3,7 @@ import {ParamTypes} from "../../constant/ParamTypes";
 import PropTypes from "prop-types"
 import ParamTextViewer from "../../containers/param/ParamTextViewer";
 import ParamSelectViewer from "../../containers/param/ParamSelectViewer";
+import ParamColorViewer from "../../containers/param/ParamColorViewer";
 
 const ParamList = ({ rendererIndex, paramInfo }) => (
     paramInfo.map((item, paramIndex) => {
@@ -27,6 +28,16 @@ const ParamList = ({ rendererIndex, paramInfo }) => (
                     </tr>
                 )
             }
+            case ParamTypes.COLOR_EDITOR: {
+                return (
+                    <tr key={"tr_" + rendererIndex + "_" + paramIndex}>
+                        <td>{item.key}</td>
+                        <td>
+                            <ParamColorViewer rendererIndex={rendererIndex} paramIndex={paramIndex}/>
+                        </td>
+                    </tr>
+                )
+            }
         }
     })
 )

src/components/param/ParamText.js

@@ -7,7 +7,7 @@ const ParamText = ({ rendererIndex, paramIndex, value, onBlur, onKeyPress }) =>
         type="number"
         key={"input_" + rendererIndex + "_" + paramIndex}
         className="Qr-input small-input"
-        placeholder="10"
+        placeholder={value}
         defaultValue={value}
         onBlur={onBlur}
         onKeyPress={onKeyPress}

src/components/renderer/RendererBase.js

@@ -15,6 +15,8 @@ function listPoints(qrcode, params) {
     let opacity = params[2] / 100;
     let posType = params[3];
     let id = 0;
+    let otherColor = params[4];
+    let posColor = params[5];
 
     const vw = [3, -3];
     const vh = [3, -3];
@@ -27,41 +29,41 @@ function listPoints(qrcode, params) {
 
             if (typeTable[x][y] == QRPointType.ALIGN_CENTER || typeTable[x][y] == QRPointType.ALIGN_OTHER || typeTable[x][y] == QRPointType.TIMING) {
                 if (type == 0)
-                    pointList.push(<rect opacity={opacity} width={size} height={size} key={id++} fill="black" x={x + (1 - size)/2} y={y + (1 - size)/2}/>)
+                    pointList.push(<rect opacity={opacity} width={size} height={size} key={id++} fill={otherColor} x={x + (1 - size)/2} y={y + (1 - size)/2}/>)
                 else if (type == 1)
-                    pointList.push(<circle opacity={opacity} r={size / 2} key={id++} fill="black" cx={x + 0.5} cy={y + 0.5}/>)
+                    pointList.push(<circle opacity={opacity} r={size / 2} key={id++} fill={otherColor} cx={x + 0.5} cy={y + 0.5}/>)
                 else if (type == 2)
-                    pointList.push(<circle key={id++} opacity={opacity} fill="black" cx={x + 0.5} cy={y + 0.5} r={size / 2} />)
+                    pointList.push(<circle key={id++} opacity={opacity} fill={otherColor} cx={x + 0.5} cy={y + 0.5} r={size / 2} />)
             }
             else if (typeTable[x][y] == QRPointType.POS_CENTER) {
                 if (posType == 0) {
-                    pointList.push(<rect width={1} height={1} key={id++} fill="black" x={x} y={y}/>);
+                    pointList.push(<rect width={1} height={1} key={id++} fill={posColor} x={x} y={y}/>);
                 } else if (posType == 1) {
-                    pointList.push(<circle key={id++} fill="black" cx={x + 0.5} cy={y + 0.5} r={1.5} />)
+                    pointList.push(<circle key={id++} fill={posColor} cx={x + 0.5} cy={y + 0.5} r={1.5} />)
-                    pointList.push(<circle key={id++} fill="none" strokeWidth="1" stroke="black"  cx={x + 0.5} cy={y + 0.5} r={3} />)
+                    pointList.push(<circle key={id++} fill={posColor} strokeWidth="1" stroke="black"  cx={x + 0.5} cy={y + 0.5} r={3} />)
                 } else if (posType == 2) {
-                    pointList.push(<circle key={id++} fill="black" cx={x + 0.5} cy={y + 0.5} r={1.5} />)
+                    pointList.push(<circle key={id++} fill={posColor} cx={x + 0.5} cy={y + 0.5} r={1.5} />)
                     pointList.push(<circle key={id++} fill="none" strokeWidth="0.15" strokeDasharray="0.5,0.5" stroke="black"  cx={x + 0.5} cy={y + 0.5} r={3} />)
                     for (let w = 0; w < vw.length; w++) {
-                        pointList.push(<circle key={id++} fill="black" cx={x + vw[w] + 0.5} cy={y + 0.5} r={0.5} />)
+                        pointList.push(<circle key={id++} fill={posColor} cx={x + vw[w] + 0.5} cy={y + 0.5} r={0.5} />)
                     }
                     for (let h = 0; h < vh.length; h++) {
-                        pointList.push(<circle key={id++} fill="black" cx={x + 0.5} cy={y + vh[h] + 0.5} r={0.5} />)
+                        pointList.push(<circle key={id++} fill={posColor} cx={x + 0.5} cy={y + vh[h] + 0.5} r={0.5} />)
                     }
                 }
             }
             else if (typeTable[x][y] == QRPointType.POS_OTHER) {
                 if (posType == 0) {
-                    pointList.push(<rect width={1} height={1} key={id++} fill="black" x={x} y={y}/>);
+                    pointList.push(<rect width={1} height={1} key={id++} fill={posColor} x={x} y={y}/>);
                 }
             }
             else {
                 if (type == 0)
-                    pointList.push(<rect opacity={opacity} width={size} height={size} key={id++} fill="black" x={x + (1 - size)/2} y={y + (1 - size)/2}/>)
+                    pointList.push(<rect opacity={opacity} width={size} height={size} key={id++} fill={otherColor} x={x + (1 - size)/2} y={y + (1 - size)/2}/>)
                 else if (type == 1)
-                    pointList.push(<circle opacity={opacity} r={size / 2} key={id++} fill="black" cx={x + 0.5} cy={y + 0.5}/>)
+                    pointList.push(<circle opacity={opacity} r={size / 2} key={id++} fill={otherColor} cx={x + 0.5} cy={y + 0.5}/>)
                 else if (type == 2)
-                    pointList.push(<circle opacity={opacity}  key={id++} fill="black" cx={x + 0.5} cy={y + 0.5} r={0.5 * rand(0.33,1.0)} />)
+                    pointList.push(<circle opacity={opacity}  key={id++} fill={otherColor} cx={x + 0.5} cy={y + 0.5} r={0.5 * rand(0.33,1.0)} />)
             }
         }
     }
@@ -101,6 +103,16 @@ function getParamInfo() {
                 "行星",
             ]
         },
+        {
+            type: ParamTypes.COLOR_EDITOR,
+            key: '信息点颜色',
+            default: '#000000'
+        },
+        {
+            type: ParamTypes.COLOR_EDITOR,
+            key: '定位点点颜色',
+            default: '#000000'
+        }
     ];
 }
 

src/constant/ParamTypes.js

@@ -1,4 +1,6 @@
 export const ParamTypes = {
     TEXT_EDITOR: 1,
-    SELECTOR: 2
+    SELECTOR: 2,
+    COLOR_EDITOR: 3,
+    MULTI_CHECK: 4,
 }

src/containers/param/ParamColorViewer.js

@@ -0,0 +1,17 @@
+import { connect } from 'react-redux';
+import {changeParam} from "../../actions";
+import ParamColor from "../../components/param/ParamColor";
+
+const mapStateToProps = (state, ownProps) => ({
+    rendererIndex: ownProps.rendererIndex,
+    paramIndex: ownProps.paramIndex,
+    value: state.paramValue[ownProps.rendererIndex][ownProps.paramIndex]
+})
+
+const mapDispatchToProps = (dispatch, ownProps) => ({
+    onChange: (color) => {
+        dispatch(changeParam(ownProps.rendererIndex, ownProps.paramIndex, color.hex))
+    }
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(ParamColor);

src/containers/style/StyleListViewer.js

@@ -28,7 +28,7 @@ const paramValueBuffer = new Array(16).fill(new Array(16))
 
 const setParamInfo = (renderIndex, paramInfo) => {
     paramInfoBuffer[renderIndex] = paramInfo
-    paramValueBuffer[renderIndex] = paramInfo.map(item => parseInt(item.default))
+    paramValueBuffer[renderIndex] = paramInfo.map(item => item.default)
 }
 
 const mapStateToProps = state => ({

src/reducers/index.js

@@ -16,7 +16,6 @@ const initialState = {
 }
 
 export default function appReducer(state = initialState, action) {
-    console.log(state)
     switch (action.type) {
         case actionTypes.GENERATE_QR_INFO: {
             let text = action.text;
@@ -54,7 +53,7 @@ export default function appReducer(state = initialState, action) {
                     }
 
                     const newItem = item.slice();
-                    newItem[action.paramIndex] = parseInt(action.value);
+                    newItem[action.paramIndex] = isNaN(action.value) ? action.value : parseInt(action.value);
                     return newItem;
                 })
             });