Cloned2Preserve
/
qrbtf
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Param color adjustment]

This commit is contained in:
CPunisher 2020-05-11 00:13:38 +08:00
parent 1d81bba201
commit 47e31499e1
11 changed files with 122 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
package-lock.json generated
View File

@ -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",

1
package.json
View File

@ -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",

4
src/components/Qrcode.css
View File

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

22
src/components/param/ParamColor.js Normal file
View File

@ -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;

11
src/components/param/ParamList.js
View File

@ -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>
)
}
}
})
)

2
src/components/param/ParamText.js
View File

@ -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}

38
src/components/renderer/RendererBase.js
View File

@ -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="none" strokeWidth="1" stroke="black" cx={x + 0.5} cy={y + 0.5} r={3} />)
pointList.push(<circle key={id++} fill={posColor} cx={x + 0.5} cy={y + 0.5} r={1.5} />)
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'
}
];
}

4
src/constant/ParamTypes.js
View File

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

17
src/containers/param/ParamColorViewer.js Normal file
View File

@ -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);

2
src/containers/style/StyleListViewer.js
View File

@ -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 => ({

3
src/reducers/index.js
View File

@ -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;
})
});