From 47e31499e13fa4a29b3e69e6551268f3badb67b2 Mon Sep 17 00:00:00 2001 From: CPunisher <1343316114@qq.com> Date: Mon, 11 May 2020 00:13:38 +0800 Subject: [PATCH] [Param color adjustment] --- package-lock.json | 36 ++++++++++++++++++++++ package.json | 1 + src/components/Qrcode.css | 4 +++ src/components/param/ParamColor.js | 22 ++++++++++++++ src/components/param/ParamList.js | 11 +++++++ src/components/param/ParamText.js | 2 +- src/components/renderer/RendererBase.js | 38 ++++++++++++++++-------- src/constant/ParamTypes.js | 4 ++- src/containers/param/ParamColorViewer.js | 17 +++++++++++ src/containers/style/StyleListViewer.js | 2 +- src/reducers/index.js | 3 +- 11 files changed, 122 insertions(+), 18 deletions(-) create mode 100644 src/components/param/ParamColor.js create mode 100644 src/containers/param/ParamColorViewer.js diff --git a/package-lock.json b/package-lock.json index f3f49f1..c7d0a6f 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 0c28453..0f35c44 100644 --- a/package.json +++ b/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", diff --git a/src/components/Qrcode.css b/src/components/Qrcode.css index 7e5c9c5..5520677 100644 --- a/src/components/Qrcode.css +++ b/src/components/Qrcode.css @@ -434,3 +434,7 @@ select:-moz-focusring { color: transparent; text-shadow: 0 0 0 #000; } + +.Qr-color-picker { + width: 200px; +} diff --git a/src/components/param/ParamColor.js b/src/components/param/ParamColor.js new file mode 100644 index 0000000..3e62e87 --- /dev/null +++ b/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 }) => ( + +) + +ParamColor.propTypes = { + rendererIndex: PropTypes.number.isRequired, + paramIndex: PropTypes.number.isRequired, + value: PropTypes.string.isRequired, + onChange: PropTypes.func.isRequired, +} + +export default ParamColor; diff --git a/src/components/param/ParamList.js b/src/components/param/ParamList.js index b03b170..fb4f334 100644 --- a/src/components/param/ParamList.js +++ b/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 }) => ( ) } + case ParamTypes.COLOR_EDITOR: { + return ( + + {item.key} + + + + + ) + } } }) ) diff --git a/src/components/param/ParamText.js b/src/components/param/ParamText.js index 50e486d..c573290 100644 --- a/src/components/param/ParamText.js +++ b/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} diff --git a/src/components/renderer/RendererBase.js b/src/components/renderer/RendererBase.js index 18df062..30c496d 100644 --- a/src/components/renderer/RendererBase.js +++ b/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() + pointList.push() else if (type == 1) - pointList.push() + pointList.push() else if (type == 2) - pointList.push() + pointList.push() } else if (typeTable[x][y] == QRPointType.POS_CENTER) { if (posType == 0) { - pointList.push(); + pointList.push(); } else if (posType == 1) { - pointList.push() - pointList.push() + pointList.push() + pointList.push() } else if (posType == 2) { - pointList.push() + pointList.push() pointList.push() for (let w = 0; w < vw.length; w++) { - pointList.push() + pointList.push() } for (let h = 0; h < vh.length; h++) { - pointList.push() + pointList.push() } } } else if (typeTable[x][y] == QRPointType.POS_OTHER) { if (posType == 0) { - pointList.push(); + pointList.push(); } } else { if (type == 0) - pointList.push() + pointList.push() else if (type == 1) - pointList.push() + pointList.push() else if (type == 2) - pointList.push() + pointList.push() } } } @@ -101,6 +103,16 @@ function getParamInfo() { "行星", ] }, + { + type: ParamTypes.COLOR_EDITOR, + key: '信息点颜色', + default: '#000000' + }, + { + type: ParamTypes.COLOR_EDITOR, + key: '定位点点颜色', + default: '#000000' + } ]; } diff --git a/src/constant/ParamTypes.js b/src/constant/ParamTypes.js index 74f3fec..c0b5c9b 100644 --- a/src/constant/ParamTypes.js +++ b/src/constant/ParamTypes.js @@ -1,4 +1,6 @@ export const ParamTypes = { TEXT_EDITOR: 1, - SELECTOR: 2 + SELECTOR: 2, + COLOR_EDITOR: 3, + MULTI_CHECK: 4, } diff --git a/src/containers/param/ParamColorViewer.js b/src/containers/param/ParamColorViewer.js new file mode 100644 index 0000000..b225c6f --- /dev/null +++ b/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); diff --git a/src/containers/style/StyleListViewer.js b/src/containers/style/StyleListViewer.js index 53b1a8f..0ca61c7 100644 --- a/src/containers/style/StyleListViewer.js +++ b/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 => ({ diff --git a/src/reducers/index.js b/src/reducers/index.js index 7236347..074841f 100644 --- a/src/reducers/index.js +++ b/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; }) });