From 0034589837a027d3d1ef868b32112e925435aeed Mon Sep 17 00:00:00 2001 From: CPunisher <1343316114@qq.com> Date: Sat, 9 May 2020 00:04:36 +0800 Subject: [PATCH] Reconstruct code --- src/actions/index.js | 4 +- src/components/QrRendererBlank.js | 10 -- src/components/QrRendererRandRound.js | 113 -------------- src/components/Qrcode.js | 132 ---------------- src/components/app/App.js | 4 + src/components/app/PartDownload.js | 21 +++ src/components/app/PartParams.js | 39 +++++ src/components/app/PartStyles.js | 2 +- src/components/param/ParamList.js | 39 +++++ src/components/param/ParamSelect.js | 31 ++++ src/components/param/ParamText.js | 25 +++ src/components/renderer/Renderer25D.js | 75 +++++++++ src/components/renderer/RendererBase.js | 93 ++++++++--- src/components/renderer/RendererBlank.js | 32 ++-- .../RendererDSJ.js} | 84 +++++----- src/components/renderer/RendererImage.js | 145 ++++++++++++++++++ .../RendererRandRect.js} | 32 ++-- .../RendererRandRound.js} | 107 +++++++------ .../RendererRound.js} | 107 +++++++------ src/containers/InputText.js | 2 +- src/containers/Renderer.js | 6 +- src/containers/StyleListViewer.js | 49 ++++-- src/containers/param/ParamListViewer.js | 9 ++ src/containers/param/ParamSelectViewer.js | 18 +++ src/containers/param/ParamTextViewer.js | 21 +++ src/reducers/index.js | 25 ++- src/utils/util.js | 2 - 27 files changed, 741 insertions(+), 486 deletions(-) delete mode 100644 src/components/QrRendererBlank.js delete mode 100644 src/components/QrRendererRandRound.js create mode 100644 src/components/app/PartDownload.js create mode 100644 src/components/app/PartParams.js create mode 100644 src/components/param/ParamList.js create mode 100644 src/components/param/ParamSelect.js create mode 100644 src/components/param/ParamText.js create mode 100644 src/components/renderer/Renderer25D.js rename src/components/{QrRendererDSJ.js => renderer/RendererDSJ.js} (85%) create mode 100644 src/components/renderer/RendererImage.js rename src/components/{QrRendererRandRect.js => renderer/RendererRandRect.js} (62%) rename src/components/{QrRendererBase.js => renderer/RendererRandRound.js} (65%) rename src/components/{QrRendererRound.js => renderer/RendererRound.js} (65%) create mode 100644 src/containers/param/ParamListViewer.js create mode 100644 src/containers/param/ParamSelectViewer.js create mode 100644 src/containers/param/ParamTextViewer.js diff --git a/src/actions/index.js b/src/actions/index.js index 5b8296f..16271c7 100644 --- a/src/actions/index.js +++ b/src/actions/index.js @@ -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) => ({ diff --git a/src/components/QrRendererBlank.js b/src/components/QrRendererBlank.js deleted file mode 100644 index be3c819..0000000 --- a/src/components/QrRendererBlank.js +++ /dev/null @@ -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); - } -} - diff --git a/src/components/QrRendererRandRound.js b/src/components/QrRendererRandRound.js deleted file mode 100644 index 109122f..0000000 --- a/src/components/QrRendererRandRound.js +++ /dev/null @@ -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() - else if (type == 1) - pointList.push() - else if (type == 2) - pointList.push() - } - else if (typeTable[x][y] == QRPointType.POS_CENTER) { - if (posType == 0) { - pointList.push(); - } else if (posType == 1) { - pointList.push() - pointList.push() - } else if (posType == 2) { - pointList.push() - pointList.push() - for (let w = 0; w < vw.length; w++) { - pointList.push() - } - for (let h = 0; h < vh.length; h++) { - pointList.push() - } - } - } - else if (typeTable[x][y] == QRPointType.POS_OTHER) { - if (posType == 0) { - pointList.push(); - } - } - else { - if (type == 0) - pointList.push() - else if (type == 1) - pointList.push() - else if (type == 2) - pointList.push() - } - } - } - - 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)); - } -} - diff --git a/src/components/Qrcode.js b/src/components/Qrcode.js index 39a8f74..b0c42dc 100644 --- a/src/components/Qrcode.js +++ b/src/components/Qrcode.js @@ -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 ( - - ); - } - else { - return ( - 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 ( - - {info.key} - {this.renderParamEditor(info, index)} - - ) - }) - } - } - - render() { - return ( -
- //
- //
- //
Downloads
- //

下载二维码 — {styleList[this.state.selectedIndex].value}

- //
- //
- //
- // - // - //
- //
- //
- // - //
- ); - } } export default Qrcode; diff --git a/src/components/app/App.js b/src/components/app/App.js index 66b14ba..884c6a2 100644 --- a/src/components/app/App.js +++ b/src/components/app/App.js @@ -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() {
+ +