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

Reconstruct code

This commit is contained in:
CPunisher 2020-05-09 00:04:36 +08:00
parent c680be15a1
commit 0034589837
27 changed files with 741 additions and 486 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/actions/index.js
View File

@ -10,9 +10,9 @@ export const changeStyle = index => ({
index
})
export const createParam = (rendererIndex, params) => ({
export const createParam = (paramInfo, paramValue) => ({
type: actionTypes.CREATE_PARAM,
rendererIndex, params
paramInfo, paramValue
})
export const changeParam = (rendererIndex, paramIndex, value) => ({

10
src/components/QrRendererBlank.js
View File

@ -1,10 +0,0 @@
import React from "react";
import './Qrcode.css'
import {defaultRenderer} from "../utils/util";
export default class QrRendererBlank extends React.Component {
render() {
return defaultRenderer(this.props.qrcode);
}
}

113
src/components/QrRendererRandRound.js
View File

@ -1,113 +0,0 @@
import React from "react";
import './Qrcode.css'
import {getTypeTable, QRPointType} from "../utils/qrcodeHandler";
import {rand, defaultRenderer} from "../utils/util";
function listPoint(props) {
if (!props.qrcode) return []
const qrcode = props.qrcode;
const nCount = qrcode.getModuleCount();
const typeTable = getTypeTable(qrcode);
const pointList = new Array(nCount);
let type = props.params[0];
let size = props.params[1] / 100;
let opacity = props.params[2] / 100;
let posType = props.params[3];
let id = 0;
const vw = [3, -3];
const vh = [3, -3];
if (size <= 0) size = 1.0
for (let x = 0; x < nCount; x++) {
for (let y = 0; y < nCount; y++) {
if (qrcode.isDark(x, y) == false) continue;
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}/>)
else if (type == 1)
pointList.push(<circle opacity={opacity} r={size / 2} key={id++} fill="black" 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} />)
}
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}/>);
} 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} />)
} 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="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} />)
}
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} />)
}
}
}
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}/>);
}
}
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}/>)
else if (type == 1)
pointList.push(<circle opacity={opacity} r={size / 2} key={id++} fill="black" 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)} />)
}
}
}
return pointList;
}
export default class QrRendererRandRound extends React.Component {
constructor(props) {
super(props);
if (this.props.setParamInfo) {
this.props.setParamInfo([
{
key: '信息点样式',
default: 2,
choices: [
"矩形",
"圆形",
"随机"
]
},
{
key: '信息点缩放',
default: 80
},
{
key: '信息点不透明度',
default: 100,
},
{
key: '定位点样式',
default: 2,
choices: [
"矩形",
"圆形",
"行星",
]
},
]
);
}
}
render() {
return defaultRenderer(this.props.qrcode, listPoint(this.props));
}
}

132
src/components/Qrcode.js
View File

@ -17,70 +17,7 @@ import QrRendererBlank from "./QrRendererBlank";
import QrRendererRandRect from "./QrRendererRandRect";
import QrRendererDSJ from "./QrRendererDSJ";
const styleList = [
{value: "A1", renderer: QrRendererBase},
{value: "A2", renderer: QrRendererRound},
{value: "A3", renderer: QrRendererRandRound},
{value: "SP — 1", renderer: QrRendererDSJ},
{value: "SP — 2", renderer: QrRendererRandRect},
{value: "C2", renderer: QrRendererBlank},
{value: "D1", renderer: QrRendererBlank},
{value: "D2", renderer: QrRendererBlank},
];
class Qrcode extends React.Component {
paramInfoBuffer;
paramValueBuffer;
constructor(props) {
super(props);
this.state = {
text: '',
selectedIndex: 0,
options: {text: ''},
qrcode: null,
paramInfo: [],
paramValue: [],
correctLevel: 0
};
this.paramInfoBuffer = new Array(16).fill(new Array(16));
this.paramValueBuffer = new Array(16).fill(new Array(16));
}
componentDidMount() {
const text = 'https://qrbtf.com/';
this.setState({
paramInfo: this.paramInfoBuffer,
paramValue: this.paramValueBuffer,
text: text,
options: {text: text},
qrcode: getQrcodeData({text: text, correctLevel: this.state.correctLevel})
});
}
setParamInfo = (index) => {
const _this = this;
return function (params) {
_this.paramInfoBuffer[index] = params;
_this.paramValueBuffer[index] = params.map(p => {
return p.default
});
}
}
setParamValue = (valueIndex, value) => {
const newValue = this.state.paramValue.slice();
newValue[this.state.selectedIndex][valueIndex] = value;
this.setState({paramValue: newValue});
}
handleCreate = (e) => {
let text = this.state.text
if (text.length <= 0) text = 'https://qrbtf.com/';
this.setState({text: text, options: {text: text}, qrcode: getQrcodeData({text: text, correctLevel: this.state.correctLevel})});
if (e) e.target.blur();
}
downloadSvg = (e) => {
const style = styleList[this.state.selectedIndex]
@ -93,75 +30,6 @@ class Qrcode extends React.Component {
const el = React.createElement(style.renderer, {qrcode: this.state.qrcode, params: this.state.paramValue[this.state.selectedIndex]})
saveImg(style.value, ReactDOMServer.renderToString(el), 1500, 1500)
}
renderParamEditor = (info, index) => {
if (info.choices) {
return (
<select
className="Qr-select"
key={"select_" + this.state.selectedIndex + "_" + index}
value={this.state.paramValue[this.state.selectedIndex][index]}
onChange={(e) => this.setParamValue(index, e.target.value)}>
{
info.choices.map((choice, index) => {
return (
<option key={"option_" + this.state.selectedIndex + "_" + index}
value={index}>
{choice}
</option>
);
})
}
</select>
);
}
else {
return (
<input
type="number"
key={"input_" + this.state.selectedIndex + "_" + index}
className="Qr-input small-input"
placeholder="10"
defaultValue={this.state.paramValue[this.state.selectedIndex][index]}
onBlur={(e) => this.setParamValue(index, e.target.value)}
onKeyPress={(e) => {if(e.key === 'Enter') {this.setParamValue(index, e.target.value); e.target.blur()}}}/>
);
}
}
renderAdjustment = () => {
const target = this.state.paramInfo[this.state.selectedIndex];
if (target instanceof Array) {
return target.map((info, index) => {
return (
<tr key={"tr_" + index}>
<td key={"title_" + index}>{info.key}</td>
<td key={"editor_" + index}>{this.renderParamEditor(info, index)}</td>
</tr>
)
})
}
}
render() {
return (
<div></div>
// <div className="Qr-titled">
// <div className="Qr-Centered title-margin">
// <div className="Qr-s-title">Downloads</div>
// <p className="Qr-s-subtitle">下载二维码 — {styleList[this.state.selectedIndex].value}</p>
// </div>
// <div className="Qr-Centered">
// <div className="div-btn">
// <button className="dl-btn" onClick={this.downloadSvg}>SVG</button>
// <button className="dl-btn" onClick={this.downloadImg}>JPG</button>
// </div>
// <div id="wx-message"></div>
// </div>
//
// </div>
);
}
}
export default Qrcode;

4
src/components/app/App.js
View File

@ -6,6 +6,8 @@ import Header from "../header/Header";
import PartInput from "./PartInput";
import PartStyles from "./PartStyles";
import PartMore from "./PartMore";
import PartParams from "./PartParams";
import PartDownload from "./PartDownload";
function App() {
return (
@ -15,6 +17,8 @@ function App() {
<Header/>
<PartInput/>
<PartStyles/>
<PartParams/>
<PartDownload/>
<PartMore/>
<Footer/>
</div>

21
src/components/app/PartDownload.js Normal file
View File

@ -0,0 +1,21 @@
import React from 'react';
import './App.css';
const PartDownload = () => (
<div className="Qr-titled">
<div className="Qr-Centered title-margin">
<div className="Qr-s-title">Downloads</div>
<p className="Qr-s-subtitle">下载二维码</p>
</div>
<div className="Qr-Centered">
<div className="div-btn">
<button className="dl-btn">SVG</button>
<button className="dl-btn">JPG</button>
</div>
<div id="wx-message"></div>
</div>
</div>
)
export default PartDownload;

39
src/components/app/PartParams.js Normal file
View File

@ -0,0 +1,39 @@
import React from 'react';
import './App.css';
import ParamListViewer from "../../containers/param/ParamListViewer";
const PartParams = () => (
<div className="Qr-titled-nobg">
<div className="Qr-Centered title-margin">
<div className="Qr-s-title">Parameters</div>
<p className="Qr-s-subtitle">参数调整</p>
</div>
<div className="Qr-Centered">
<div className="Qr-div-table">
<table className="Qr-table">
<tbody>
{/*<tr>*/}
{/* <td>容错率</td>*/}
{/* <td>*/}
{/* <select*/}
{/* className="Qr-select"*/}
{/* value={this.state.correctLevel}*/}
{/* onChange={(e) => {*/}
{/* this.setState({correctLevel: parseInt(e.target.value)}, () => this.handleCreate())*/}
{/* }}>*/}
{/* <option value={1}>7%</option>*/}
{/* <option value={0}>15%</option>*/}
{/* <option value={3}>25%</option>*/}
{/* <option value={2}>30%</option>*/}
{/* </select>*/}
{/* </td>*/}
{/*</tr>*/}
<ParamListViewer/>
</tbody>
</table>
</div>
</div>
</div>
)
export default PartParams;

2
src/components/app/PartStyles.js
View File

@ -9,7 +9,7 @@ const PartStyles = () => (
<p className="Qr-s-subtitle">点击选择样式</p>
</div>
<div className="Qr-s">
<StyleListViewer/>
{React.createElement(StyleListViewer())}
</div>
</div>
)

39
src/components/param/ParamList.js Normal file
View File

@ -0,0 +1,39 @@
import React from 'react';
import {ParamTypes} from "../../constant/ParamTypes";
import PropTypes from "prop-types"
import ParamTextViewer from "../../containers/param/ParamTextViewer";
import ParamSelectViewer from "../../containers/param/ParamSelectViewer";
const ParamList = ({ rendererIndex, paramInfo }) => (
paramInfo.map((item, paramIndex) => {
switch (item.type) {
case ParamTypes.TEXT_EDITOR: {
return (
<tr>
<td>{item.key}</td>
<td>
<ParamTextViewer rendererIndex={rendererIndex} paramIndex={paramIndex}/>
</td>
</tr>
)
}
case ParamTypes.SELECTOR: {
return (
<tr>
<td>{item.key}</td>
<td>
<ParamSelectViewer rendererIndex={rendererIndex} paramIndex={paramIndex}/>
</td>
</tr>
)
}
}
})
)
ParamList.propTypes = {
rendererIndex: PropTypes.number.isRequired,
paramInfo: PropTypes.array
}
export default ParamList;

31
src/components/param/ParamSelect.js Normal file
View File

@ -0,0 +1,31 @@
import React from 'react';
import PropTypes from 'prop-types'
import '../Qrcode.css';
const ParamList = ({ rendererIndex, paramIndex, value, info, onChange }) => (
<select
className="Qr-select"
key={"select_" + rendererIndex + "_" + paramIndex}
value={value}
onChange={onChange}>
{
info.choices.map((choice, index) => {
return (
<option key={"option_" + rendererIndex + "_" + paramIndex + "_" + index } value={index}>
{choice}
</option>
);
})
}
</select>
)
ParamList.propTypes = {
rendererIndex: PropTypes.number.isRequired,
paramIndex: PropTypes.number.isRequired,
value: PropTypes.number.isRequired,
info: PropTypes.object.isRequired,
onChange: PropTypes.func.isRequired
}
export default ParamList;

25
src/components/param/ParamText.js Normal file
View File

@ -0,0 +1,25 @@
import React from 'react';
import PropTypes from 'prop-types'
import '../Qrcode.css';
const ParamText = ({ rendererIndex, paramIndex, value, onBlur, onKeyPress }) => (
<input
type="number"
key={"input_" + rendererIndex + "_" + paramIndex}
className="Qr-input small-input"
placeholder="10"
defaultValue={value}
onBlur={onBlur}
onKeyPress={onKeyPress}
/>
)
ParamText.propTypes = {
rendererIndex: PropTypes.number.isRequired,
paramIndex: PropTypes.number.isRequired,
value: PropTypes.string.isRequired,
onBlur: PropTypes.func.isRequired,
onKeyPress: PropTypes.func.isRequired
}
export default ParamText;

75
src/components/renderer/Renderer25D.js Normal file
View File

@ -0,0 +1,75 @@
import React, { useEffect } from "react";
import {defaultViewBox} from "../../utils/util";
import {ParamTypes} from "../../constant/ParamTypes";
import {getTypeTable, QRPointType} from "../../utils/qrcodeHandler";
function listPoints(qrcode, params) {
if (!qrcode) return []
const nCount = qrcode.getModuleCount();
const typeTable = getTypeTable(qrcode);
const pointList = new Array(nCount);
let size = 1.001;
let size2 = 1.001;
let height = params[0];
let height2 = params[1];
let id = 0;
const X = [-Math.sqrt(3)/2, 1/2];
const Y = [ Math.sqrt(3)/2, 1/2];
const Z = [0, 0];
const matrixString = 'matrix(' + String(X[0]) + ', ' + String(X[1]) + ', ' + String(Y[0]) + ', ' + String(Y[1]) + ', ' + String(Z[0]) + ', ' + String(Z[1]) + ')'
if (height <= 0) height = 1.0;
if (height2 <= 0) height2 = 1.0;
for (let x = 0; x < nCount; x++) {
for (let y = 0; y < nCount; y++) {
if (qrcode.isDark(x, y) == false) continue;
else if (typeTable[x][y] == QRPointType.POS_OTHER || typeTable[x][y] == QRPointType.POS_CENTER) {
pointList.push(<rect width={size2} height={size2} key={id++} fill="#FF7F89" x={x + (1 - size2)/2} y={y + (1 - size2)/2} transform={matrixString}/>);
pointList.push(<rect width={height2} height={size2} key={id++} fill="#FFEBF3" x={0} y={0} transform={matrixString+'translate('+String(x + (1 - size2)/2 + size2)+','+String(y + (1 - size2)/2)+') '+'skewY(45) '}/>);
pointList.push(<rect width={size2} height={height2} key={id++} fill="#FFD7D9" x={0} y={0} transform={matrixString+'translate('+String(x + (1 - size2)/2)+','+String(y + size2 + (1 - size2)/2)+') '+'skewX(45) '}/>);
}
else {
pointList.push(<rect width={size} height={size} key={id++} fill="#FF7F89" x={x + (1 - size)/2} y={y + (1 - size)/2} transform={matrixString}/>);
pointList.push(<rect width={height} height={size} key={id++} fill="#FFEBF3" x={0} y={0} transform={matrixString+'translate('+String(x + (1 - size)/2 + size)+','+String(y + (1 - size)/2)+') '+'skewY(45) '}/>);
pointList.push(<rect width={size} height={height} key={id++} fill="#FFD7D9" x={0} y={0} transform={matrixString+'translate('+String(x + (1 - size)/2)+','+String(y + size + (1 - size)/2)+') '+'skewX(45) '}/>);
}
}
}
return pointList;
}
function getParamInfo() {
return [
{
type: ParamTypes.TEXT_EDITOR,
key: '柱体高度',
default: 0.5,
},
{
type: ParamTypes.TEXT_EDITOR,
key: '定位点柱体高度',
default: 0.5,
},
];
}
const Renderer25D = ({ qrcode, params, setParamInfo}) => {
useEffect(() => {
setParamInfo(getParamInfo());
}, [setParamInfo]);
return (
<svg className="Qr-item-svg" width="100%" height="100%" viewBox={defaultViewBox(qrcode)} fill="white"
xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
{listPoints(qrcode, params)}
</svg>
)
}
export default Renderer25D

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

@ -1,22 +1,71 @@
import React from "react";
import {defaultViewBox} from "../../utils/util";
import React, { useEffect } from "react";
import {defaultViewBox, rand} from "../../utils/util";
import {ParamTypes} from "../../constant/ParamTypes";
import {createParam} from "../../actions";
import {getTypeTable, QRPointType} from "../../utils/qrcodeHandler";
function listPoints(qrcode, params) {
if (!qrcode) return[]
if (!qrcode) return []
const nCount = qrcode.getModuleCount();
const pointList = []
let id = 0
const typeTable = getTypeTable(qrcode);
const pointList = new Array(nCount);
let type = params[0];
let size = params[1] / 100;
let opacity = params[2] / 100;
let posType = params[3];
let id = 0;
const vw = [3, -3];
const vh = [3, -3];
if (size <= 0) size = 1.0
for (let x = 0; x < nCount; x++) {
for (let y = 0; y < nCount; y++) {
if (qrcode.isDark(x, y)) {
pointList.push(<rect key={id++} width={1} height={1} fill={"black"} x={x} y={y}/>)
if (qrcode.isDark(x, y) == false) continue;
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}/>)
else if (type == 1)
pointList.push(<circle opacity={opacity} r={size / 2} key={id++} fill="black" 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} />)
}
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}/>);
} 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} />)
} 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="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} />)
}
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} />)
}
}
}
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}/>);
}
}
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}/>)
else if (type == 1)
pointList.push(<circle opacity={opacity} r={size / 2} key={id++} fill="black" 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)} />)
}
}
}
return pointList;
}
@ -55,23 +104,17 @@ function getParamInfo() {
];
}
export default class RendererBase extends React.Component {
const RendererBase = ({ qrcode, params, setParamInfo}) => {
useEffect(() => {
setParamInfo(getParamInfo());
}, [setParamInfo]);
constructor(props) {
super(props);
}
componentDidMount() {
this.props.setParamInfo(this.props.rendererIndex, getParamInfo())
}
render() {
return (
<svg className="Qr-item-svg" width="100%" height="100%" viewBox={defaultViewBox(this.props.qrcode)} fill="white"
xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
{listPoints(this.props.qrcode, this.props.params)}
</svg>
)
}
return (
<svg className="Qr-item-svg" width="100%" height="100%" viewBox={defaultViewBox(qrcode)} fill="white"
xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
{listPoints(qrcode, params)}
</svg>
)
}
export default RendererBase

32
src/components/renderer/RendererBlank.js
View File

@ -1,31 +1,25 @@
import React from "react";
import React, { useEffect } from "react";
import {defaultViewBox} from "../../utils/util";
function listPoints(qrcode, params) {
if (!qrcode) return[]
return []
}
function getParamInfo() {
return []
return [];
}
export default class RendererBlank extends React.Component {
const RenderBlank = ({ qrcode, params, setParamInfo}) => {
useEffect(() => {
setParamInfo(getParamInfo());
}, [setParamInfo]);
constructor(props) {
super(props);
}
componentDidMount() {
}
render() {
return (
<svg className="Qr-item-svg" width="100%" height="100%" viewBox={defaultViewBox(this.props.qrcode)} fill="white"
xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
{listPoints(this.props.qrcode, this.props.params)}
</svg>
)
}
return (
<svg className="Qr-item-svg" width="100%" height="100%" viewBox={defaultViewBox(qrcode)} fill="white"
xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
{listPoints(qrcode, params)}
</svg>
)
}
export default RenderBlank

84
src/components/QrRendererDSJ.js → src/components/renderer/RendererDSJ.js
View File

@ -1,21 +1,20 @@
import React from "react";
import './Qrcode.css'
import {getTypeTable, QRPointType} from "../utils/qrcodeHandler";
import {defaultRenderer, rand} from "../utils/util";
import React, { useEffect } from "react";
import {defaultViewBox} from "../../utils/util";
import {ParamTypes} from "../../constant/ParamTypes";
import {getTypeTable, QRPointType} from "../../utils/qrcodeHandler";
function listPoint(props) {
if (!props.qrcode) return []
function listPoints(qrcode, params) {
if (!qrcode) return []
const qrcode = props.qrcode;
const nCount = qrcode.getModuleCount();
const typeTable = getTypeTable(qrcode);
const pointList = [];
const g1 = [];
const g2 = [];
let width2 = props.params[0] / 100;
let width1 = props.params[1] / 100;
let posType = props.params[2];
let width2 = params[0] / 100;
let width1 = params[1] / 100;
let posType = params[2];
let id = 0;
if (width2 <= 0) width2 = 80;
@ -158,34 +157,41 @@ function listPoint(props) {
return pointList;
}
export default class QrRendererDSJ extends React.Component {
constructor(props) {
super(props);
if (this.props.setParamInfo) {
this.props.setParamInfo([
{
key: '信息点缩放',
default: 70,
},
{
key: 'x 宽度',
default: 70,
},
{
key: '定位点样式',
default: 1,
choices: [
"矩形",
"DSJ",
]
},
]
);
}
}
render() {
return defaultRenderer(this.props.qrcode, listPoint(this.props));
}
function getParamInfo() {
return [
{
type: ParamTypes.TEXT_EDITOR,
key: '信息点缩放',
default: 70,
},
{
type: ParamTypes.TEXT_EDITOR,
key: 'x 宽度',
default: 70,
},
{
type: ParamTypes.SELECTOR,
key: '定位点样式',
default: 1,
choices: [
"矩形",
"DSJ",
]
},
]
}
const RenderDSJ = ({ qrcode, params, setParamInfo}) => {
useEffect(() => {
setParamInfo(getParamInfo());
}, [setParamInfo]);
return (
<svg className="Qr-item-svg" width="100%" height="100%" viewBox={defaultViewBox(qrcode)} fill="white"
xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
{listPoints(qrcode, params)}
</svg>
)
}
export default RenderDSJ

145
src/components/renderer/RendererImage.js Normal file
View File

File diff suppressed because one or more lines are too long

32
src/components/QrRendererRandRect.js → src/components/renderer/RendererRandRect.js
View File

@ -1,11 +1,11 @@
import React from "react";
import './Qrcode.css'
import {defaultRenderer, rand, randRGB} from "../utils/util";
import React, { useEffect } from "react";
import {defaultViewBox, rand} from "../../utils/util";
import {ParamTypes} from "../../constant/ParamTypes";
import {getTypeTable, QRPointType} from "../../utils/qrcodeHandler";
function listPoint(props) {
if (!props.qrcode) return []
function listPoints(qrcode, params) {
if (!qrcode) return []
const qrcode = props.qrcode;
const nCount = qrcode.getModuleCount();
const pointList = [];
let id = 0;
@ -38,9 +38,21 @@ function listPoint(props) {
return pointList;
}
export default class QrRendererRandRect extends React.Component {
render() {
return defaultRenderer(this.props.qrcode, listPoint(this.props));
}
function getParamInfo() {
return []
}
const RendererRandRect = ({ qrcode, params, setParamInfo}) => {
useEffect(() => {
setParamInfo(getParamInfo());
}, [setParamInfo]);
return (
<svg className="Qr-item-svg" width="100%" height="100%" viewBox={defaultViewBox(qrcode)} fill="white"
xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
{listPoints(qrcode, params)}
</svg>
)
}
export default RendererRandRect

107
src/components/QrRendererBase.js → src/components/renderer/RendererRandRound.js
View File

@ -1,20 +1,19 @@
import React from "react";
import './Qrcode.css'
import {getTypeTable, QRPointType} from "../utils/qrcodeHandler";
import {defaultRenderer, rand} from "../utils/util";
import React, { useEffect } from "react";
import {defaultViewBox, rand} from "../../utils/util";
import {ParamTypes} from "../../constant/ParamTypes";
import {getTypeTable, QRPointType} from "../../utils/qrcodeHandler";
function listPoint(props) {
if (!props.qrcode) return []
function listPoints(qrcode, params) {
if (!qrcode) return []
const qrcode = props.qrcode;
const nCount = qrcode.getModuleCount();
const typeTable = getTypeTable(qrcode);
const pointList = new Array(nCount);
let type = props.params[0];
let size = props.params[1] / 100;
let opacity = props.params[2] / 100;
let posType = props.params[3];
let type = params[0];
let size = params[1] / 100;
let opacity = params[2] / 100;
let posType = params[3];
let id = 0;
const vw = [3, -3];
@ -70,44 +69,52 @@ function listPoint(props) {
return pointList;
}
export default class QrRendererBase extends React.Component {
constructor(props) {
super(props);
if (this.props.setParamInfo) {
this.props.setParamInfo([
{
key: '信息点样式',
default: 0,
choices: [
"矩形",
"圆形",
"随机"
]
},
{
key: '信息点缩放',
default: 100
},
{
key: '信息点不透明度',
default: 100,
},
{
key: '定位点样式',
default: 0,
choices: [
"矩形",
"圆形",
"行星",
]
},
]
);
}
}
render() {
return defaultRenderer(this.props.qrcode, listPoint(this.props));
}
function getParamInfo() {
return [
{
type: ParamTypes.SELECTOR,
key: '信息点样式',
default: 2,
choices: [
"矩形",
"圆形",
"随机"
]
},
{
type: ParamTypes.TEXT_EDITOR,
key: '信息点缩放',
default: 80
},
{
type: ParamTypes.TEXT_EDITOR,
key: '信息点不透明度',
default: 100,
},
{
type: ParamTypes.SELECTOR,
key: '定位点样式',
default: 2,
choices: [
"矩形",
"圆形",
"行星",
]
},
];
}
const RendererRandRound = ({ qrcode, params, setParamInfo}) => {
useEffect(() => {
setParamInfo(getParamInfo());
}, [setParamInfo]);
return (
<svg className="Qr-item-svg" width="100%" height="100%" viewBox={defaultViewBox(qrcode)} fill="white"
xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
{listPoints(qrcode, params)}
</svg>
)
}
export default RendererRandRound

107
src/components/QrRendererRound.js → src/components/renderer/RendererRound.js
View File

@ -1,20 +1,19 @@
import React from "react";
import './Qrcode.css'
import {getTypeTable, QRPointType} from "../utils/qrcodeHandler";
import {defaultRenderer, rand} from "../utils/util";
import React, { useEffect } from "react";
import {defaultViewBox, rand} from "../../utils/util";
import {ParamTypes} from "../../constant/ParamTypes";
import {getTypeTable, QRPointType} from "../../utils/qrcodeHandler";
function listPoint(props) {
if (!props.qrcode) return []
function listPoints(qrcode, params) {
if (!qrcode) return []
const qrcode = props.qrcode;
const nCount = qrcode.getModuleCount();
const typeTable = getTypeTable(qrcode);
const pointList = new Array(nCount);
let type = props.params[0];
let size = props.params[1] / 100;
let opacity = props.params[2] / 100;
let posType = props.params[3];
let type = params[0];
let size = params[1] / 100;
let opacity = params[2] / 100;
let posType = params[3];
let id = 0;
const vw = [3, -3];
@ -70,44 +69,52 @@ function listPoint(props) {
return pointList;
}
export default class QrRendererRound extends React.Component {
constructor(props) {
super(props);
if (this.props.setParamInfo) {
this.props.setParamInfo([
{
key: '信息点样式',
default: 1,
choices: [
"矩形",
"圆形",
"随机"
]
},
{
key: '信息点缩放',
default: 50
},
{
key: '信息点不透明度',
default: 30,
},
{
key: '定位点样式',
default: 1,
choices: [
"矩形",
"圆形",
"行星",
]
},
]
);
}
}
render() {
return defaultRenderer(this.props.qrcode, listPoint(this.props));
}
function getParamInfo() {
return [
{
type: ParamTypes.SELECTOR,
key: '信息点样式',
default: 1,
choices: [
"矩形",
"圆形",
"随机"
]
},
{
type: ParamTypes.TEXT_EDITOR,
key: '信息点缩放',
default: 50
},
{
type: ParamTypes.TEXT_EDITOR,
key: '信息点不透明度',
default: 30,
},
{
type: ParamTypes.SELECTOR,
key: '定位点样式',
default: 1,
choices: [
"矩形",
"圆形",
"行星",
]
},
]
}
const RendererRound = ({ qrcode, params, setParamInfo}) => {
useEffect(() => {
setParamInfo(getParamInfo());
}, [setParamInfo]);
return (
<svg className="Qr-item-svg" width="100%" height="100%" viewBox={defaultViewBox(qrcode)} fill="white"
xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
{listPoints(qrcode, params)}
</svg>
)
}
export default RendererRound

2
src/containers/InputText.js
View File

@ -1,6 +1,6 @@
import React from "react";
import { connect } from 'react-redux';
import { genQRInfo } from "../actions";
import React from "react";
const InputText = ({ dispatch }) => (
<div className="Qr-Centered">

6
src/containers/Renderer.js
View File

@ -1,6 +1,4 @@
import React from "react";
import { connect } from 'react-redux';
import {createParam} from "../actions";
const mapStateToProps = (state, ownProps) => ({
qrcode: state.qrcode,
@ -8,8 +6,8 @@ const mapStateToProps = (state, ownProps) => ({
rendererIndex: ownProps.index
})
const mapDispatchToProps = (dispatch) => ({
setParamInfo: (index, params) => dispatch(createParam(index, params)),
const mapDispatchToProps = (dispatch, ownProps) => ({
setParamInfo: (params) => ownProps.setParamInfo(ownProps.index, params)
})
export default function Renderer(WrappedRenderer) {

49
src/containers/StyleListViewer.js
View File

@ -1,27 +1,42 @@
import React from "react";
import { connect } from 'react-redux';
import {changeStyle} from "../actions";
import {connect, useDispatch} from 'react-redux';
import {changeStyle, createParam} from "../actions";
import StyleList from "../components/style/StyleList";
import Renderer from "./Renderer";
import RendererBlank from "../components/renderer/RendererBlank";
import RendererBase from "../components/renderer/RendererBase";
import RendererDSJ from "../components/renderer/RendererDSJ";
import RendererRound from "../components/renderer/RendererRound";
import RendererRandRound from "../components/renderer/RendererRandRound";
import RendererRandRect from "../components/renderer/RendererRandRect";
import Renderer25D from "../components/renderer/Renderer25D";
import RendererImage from "../components/renderer/RendererImage";
import * as React from "react";
const styles = [
{value: 'A1', renderer: RendererBase},
{value: 'A2', renderer: RendererBlank},
{value: 'B1', renderer: RendererBlank},
{value: 'B2', renderer: RendererBlank},
{value: 'C1', renderer: RendererBlank},
{value: 'C2', renderer: RendererBlank},
{value: 'D1', renderer: RendererBlank},
{value: "A1", renderer: RendererBase},
{value: "A2", renderer: RendererRound},
{value: "A3", renderer: RendererRandRound},
{value: "SP — 1", renderer: RendererDSJ},
{value: "SP — 2", renderer: RendererRandRect},
{value: "B1", renderer: Renderer25D},
{value: "C1", renderer: RendererImage},
{value: "D1", renderer: RendererBlank},
]
const paramInfoBuffer = new Array(16).fill(new Array(16))
const paramValueBuffer = new Array(16).fill(new Array(16))
const setParamInfo = (renderIndex, paramInfo) => {
paramInfoBuffer[renderIndex] = paramInfo
paramValueBuffer[renderIndex] = paramInfo.map(item => item.default)
}
const mapStateToProps = state => ({
styles: styles.map((style, index) => {
return {
value: style.value,
selected: state.selectedIndex == index,
renderer: React.createElement(Renderer(style.renderer), {index: index})
renderer: React.createElement(Renderer(style.renderer), {index: index, setParamInfo: setParamInfo})
}
})
})
@ -30,7 +45,11 @@ const mapDispatchToProps = dispatch => ({
onSelected: index => dispatch(changeStyle(index))
})
export default connect(
mapStateToProps,
mapDispatchToProps
)(StyleList)
const StyleListViewer = () => {
let res = connect(mapStateToProps, mapDispatchToProps)(StyleList)
const dispatch = useDispatch()
dispatch(createParam(paramInfoBuffer, paramValueBuffer))
return res;
}
export default StyleListViewer;

9
src/containers/param/ParamListViewer.js Normal file
View File

@ -0,0 +1,9 @@
import { connect } from 'react-redux';
import ParamList from "../../components/param/ParamList";
const mapStateToProps = (state) => ({
rendererIndex: state.selectedIndex,
paramInfo: state.paramInfo[state.selectedIndex]
})
export default connect(mapStateToProps, null)(ParamList)

18
src/containers/param/ParamSelectViewer.js Normal file
View File

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

21
src/containers/param/ParamTextViewer.js Normal file
View File

@ -0,0 +1,21 @@
import { connect } from 'react-redux';
import ParamText from "../../components/param/ParamText";
import {changeParam} from "../../actions";
const mapStateToProps = (state, ownProps) => ({
rendererIndex: ownProps.rendererIndex,
paramIndex: ownProps.paramIndex,
value: state.paramValue[ownProps.rendererIndex][ownProps.paramIndex]
})
const mapDispatchToProps = (dispatch, ownProps) => ({
onBlur: (e) => dispatch(changeParam(ownProps.rendererIndex, ownProps.paramIndex, e.target.value)),
onKeyPress: (e) => {
if(e.key === 'Enter') {
dispatch(changeParam(ownProps.rendererIndex, ownProps.paramIndex, e.target.value));
e.target.blur()
}
}
})
export default connect(mapStateToProps, mapDispatchToProps)(ParamText);

25
src/reducers/index.js
View File

@ -1,4 +1,3 @@
import { combineReducers } from "redux";
import {getQrcodeData} from "../utils/qrcodeHandler";
import {actionTypes} from "../constant/ActionTypes";
@ -10,6 +9,7 @@ const initialState = {
}
export default function appReducer(state = initialState, action) {
console.log(state)
switch (action.type) {
case actionTypes.GENERATE_QR_INFO: {
return Object.assign({}, state, {
@ -23,21 +23,20 @@ export default function appReducer(state = initialState, action) {
}
case actionTypes.CREATE_PARAM: {
return Object.assign({}, state, {
paramInfo: Object.assign([], [...state.paramInfo], {
[action.rendererIndex]: action.params
}),
paramValue: Object.assign([], [...state.paramValue], {
[action.rendererIndex]: action.params.map(obj => obj.default)
})
});
paramInfo: action.paramInfo,
paramValue: action.paramValue
})
}
case actionTypes.CHANGE_PARAM: {
return Object.assign({}, state, {
paramValue: Object.assign([], [...state.paramValue], {
[action.rendererIndex]:
Object.assign([], [...state.paramValue[action.rendererIndex]], {
[action.paramIndex]: action.value
})
paramValue: state.paramValue.map((item, index) => {
if (index != action.rendererIndex) {
return item;
}
const newItem = item.slice();
newItem[action.paramIndex] = action.value;
return newItem;
})
});
}

2
src/utils/util.js
View File

@ -1,5 +1,3 @@
import React from "react";
let seed = 0;
export function srand(sd) {