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

code arrangement

This commit is contained in:
CPunisher 2020-05-20 20:10:45 +08:00
parent 63aab81fae
commit c7fabf6581
16 changed files with 194 additions and 382 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,13 +3,6 @@ import './App.css';
import StyleListViewer from "../../containers/style/StyleListViewer";
import {isPC} from "../../utils/util";
const PCMessage = () => {
if (isPC()) {
return <div className="Qr-style-hint">按住 shift 滚动</div>
}
return null
}
const PartStyles = ({ setParamInfo }) => {
const [loaded, setLoaded] = useState(false);
useEffect(() => {
@ -21,7 +14,10 @@ const PartStyles = ({ setParamInfo }) => {
return (<div className="Qr-titled" id="Qr-style">
<div className="Qr-Centered title-margin">
<div className="Qr-s-title">Styles</div>
<p className="Qr-s-subtitle Qr-rel">点击选择样式<PCMessage/></p>
<div className="Qr-s-subtitle Qr-rel">
点击选择样式
{isPC() ? <div className="Qr-style-hint">按住 shift 滚动</div> : null}
</div>
</div>
<div className="Qr-s" style={{visibility: loaded ? "visible" :"hidden"}}>
{styleList}

21
src/components/renderer/Renderer25D.js
View File

@ -1,7 +1,7 @@
import React, { useEffect } from "react";
import {defaultViewBox} from "../../utils/util";
import React from "react";
import {ParamTypes} from "../../constant/ParamTypes";
import {getTypeTable, QRPointType} from "../../utils/qrcodeHandler";
import {createRenderer} from "../style/Renderer";
function listPoints(qrcode, params) {
if (!qrcode) return []
@ -84,17 +84,10 @@ function viewBox(qrcode) {
return String(-nCount) + ' ' + String(-nCount / 2) + ' ' + String(nCount * 2) + ' ' + String(nCount * 2);
}
const Renderer25D = ({ qrcode, params, setParamInfo}) => {
useEffect(() => {
setParamInfo(getParamInfo());
}, [setParamInfo]);
return (
<svg className="Qr-item-svg" width="100%" height="100%" viewBox={viewBox(qrcode)} fill="white"
xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
{listPoints(qrcode, params)}
</svg>
)
}
const Renderer25D = createRenderer({
listPoints: listPoints,
getParamInfo: getParamInfo,
getViewBox: viewBox
})
export default Renderer25D

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

@ -1,7 +1,8 @@
import React, { useEffect } from "react";
import {defaultViewBox, rand} from "../../utils/util";
import {ParamTypes} from "../../constant/ParamTypes";
import {getTypeTable, QRPointType} from "../../utils/qrcodeHandler";
import {createRenderer} from "../style/Renderer";
import {rand} from "../../utils/util";
function listPoints(qrcode, params) {
if (!qrcode) return []
@ -71,7 +72,7 @@ function listPoints(qrcode, params) {
return pointList;
}
function getParamInfo() {
function getParamInfoRect() {
return [
{
type: ParamTypes.SELECTOR,
@ -116,17 +117,107 @@ function getParamInfo() {
];
}
const RendererBase = ({ 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>
)
function getParamInfoRound() {
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: [
"矩形",
"圆形",
"行星",
]
},
{
type: ParamTypes.COLOR_EDITOR,
key: '信息点颜色',
default: '#000000'
},
{
type: ParamTypes.COLOR_EDITOR,
key: '定位点点颜色',
default: '#000000'
}
];
}
export default RendererBase
function getParamInfoRandRound() {
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: [
"矩形",
"圆形",
"行星",
]
},
{
type: ParamTypes.COLOR_EDITOR,
key: '信息点颜色',
default: '#000000'
},
{
type: ParamTypes.COLOR_EDITOR,
key: '定位点点颜色',
default: '#000000'
}
];
}
export const RendererRect= createRenderer({
listPoints: listPoints,
getParamInfo: getParamInfoRect,
});
export const RendererRound = createRenderer({
listPoints: listPoints,
getParamInfo: getParamInfoRound,
});
export const RendererRandRound = createRenderer({
listPoints: listPoints,
getParamInfo: getParamInfoRandRound,
});

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

@ -1,25 +1,6 @@
import React, { useEffect } from "react";
import {defaultViewBox} from "../../utils/util";
import React from "react";
import {createRenderer} from "../style/Renderer";
function listPoints(qrcode, params) {
return []
}
function getParamInfo() {
return [];
}
const RenderBlank = ({ 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>
)
}
const RenderBlank = createRenderer()
export default RenderBlank

20
src/components/renderer/RendererDSJ.js
View File

@ -1,7 +1,7 @@
import React, { useEffect } from "react";
import {defaultViewBox} from "../../utils/util";
import React from "react";
import {ParamTypes} from "../../constant/ParamTypes";
import {getTypeTable, QRPointType} from "../../utils/qrcodeHandler";
import {createRenderer} from "../style/Renderer";
function listPoints(qrcode, params) {
if (!qrcode) return []
@ -188,17 +188,9 @@ function getParamInfo() {
]
}
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>
)
}
const RenderDSJ = createRenderer({
listPoints: listPoints,
getParamInfo: getParamInfo,
})
export default RenderDSJ

24
src/components/renderer/RendererImage.js
View File

File diff suppressed because one or more lines are too long

17
src/components/renderer/RendererRandRect.js
View File

@ -1,5 +1,6 @@
import React, { useEffect } from "react";
import {defaultViewBox, rand} from "../../utils/util";
import {createRenderer} from "../style/Renderer";
function listPoints(qrcode, params) {
if (!qrcode) return []
@ -40,17 +41,9 @@ 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>
)
}
const RendererRandRect = createRenderer({
listPoints: listPoints,
getParamInfo: getParamInfo
})
export default RendererRandRect

132
src/components/renderer/RendererRandRound.js
View File

@ -1,132 +0,0 @@
import React, { useEffect } from "react";
import {defaultViewBox, rand} 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 type = params[0];
let size = params[1] / 100;
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];
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={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={otherColor} cx={x + 0.5} cy={y + 0.5}/>)
else if (type == 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={posColor} x={x} y={y}/>);
} else if (posType == 1) {
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={posColor} cx={x + 0.5} cy={y + 0.5} r={3} />)
} else if (posType == 2) {
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={posColor} cx={x + 0.5} cy={y + 0.5} r={3} />)
for (let w = 0; w < vw.length; w++) {
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={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={posColor} x={x} y={y}/>);
}
}
else {
if (type == 0)
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={otherColor} cx={x + 0.5} cy={y + 0.5}/>)
else if (type == 2)
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)} />)
}
}
}
return pointList;
}
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: [
"矩形",
"圆形",
"行星",
]
},
{
type: ParamTypes.COLOR_EDITOR,
key: '信息点颜色',
default: '#000000'
},
{
type: ParamTypes.COLOR_EDITOR,
key: '定位点点颜色',
default: '#000000'
}
];
}
const RendererBase = ({ 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 RendererBase

6
src/components/renderer/RendererResImage.js
View File

File diff suppressed because one or more lines are too long

132
src/components/renderer/RendererRound.js
View File

@ -1,132 +0,0 @@
import React, { useEffect } from "react";
import {defaultViewBox, rand} 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 type = params[0];
let size = params[1] / 100;
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];
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={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={otherColor} cx={x + 0.5} cy={y + 0.5}/>)
else if (type == 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={posColor} x={x} y={y}/>);
} else if (posType == 1) {
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={posColor} cx={x + 0.5} cy={y + 0.5} r={3} />)
} else if (posType == 2) {
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={posColor} cx={x + 0.5} cy={y + 0.5} r={3} />)
for (let w = 0; w < vw.length; w++) {
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={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={posColor} x={x} y={y}/>);
}
}
else {
if (type == 0)
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={otherColor} cx={x + 0.5} cy={y + 0.5}/>)
else if (type == 2)
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)} />)
}
}
}
return pointList;
}
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: [
"矩形",
"圆形",
"行星",
]
},
{
type: ParamTypes.COLOR_EDITOR,
key: '信息点颜色',
default: '#000000'
},
{
type: ParamTypes.COLOR_EDITOR,
key: '定位点点颜色',
default: '#000000'
}
];
}
const RendererBase = ({ 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 RendererBase

37
src/components/style/Renderer.js
View File

@ -1,4 +1,5 @@
import React from "react";
import React, {useEffect} from "react";
import {extend} from "../../utils/util";
const Renderer = ({ rendererType, ...other }) => (
React.createElement(rendererType, other)
@ -8,4 +9,38 @@ function areEqual(prevProps, nextProps) {
return !(prevProps.selected == true || nextProps.selected == true)
}
export function createRenderer(renderer) {
let defaultViewBox = function (qrcode) {
if (!qrcode) return '0 0 0 0';
const nCount = qrcode.getModuleCount();
return String(-nCount / 5) + ' ' + String(-nCount / 5) + ' ' + String(nCount + nCount / 5 * 2) + ' ' + String(nCount + nCount / 5 * 2);
}
renderer = extend({
getViewBox: defaultViewBox,
listPoints: (qrcode, params) => { return []; },
getParamInfo: () => {return []; },
beginRendering: ({ qrcode, params, setParamInfo }) => {},
beforeListing: ({ qrcode, params, setParamInfo }) => {},
afterListing: ({ qrcode, params, setParamInfo }) => {},
}, renderer);
return ({ qrcode, params, setParamInfo}) => {
useEffect(() => {
setParamInfo(renderer.getParamInfo());
}, [setParamInfo]);
renderer.beginRendering({ qrcode, params, setParamInfo });
return (
<svg className="Qr-item-svg" width="100%" height="100%" viewBox={renderer.getViewBox(qrcode)} fill="white"
xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
{renderer.beforeListing({ qrcode, params, setParamInfo })}
{renderer.listPoints(qrcode, params)}
{renderer.afterListing({ qrcode, params, setParamInfo })}
</svg>
);
}
}
export default React.memo(Renderer, areEqual)

4
src/constant/References.js
View File

File diff suppressed because one or more lines are too long

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

@ -2,18 +2,16 @@ import {connect} from 'react-redux';
import {changeStyle} from "../../actions";
import StyleList from "../../components/style/StyleList";
import RendererViewer from "./RendererViewer";
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";
import RendererResImage from "../../components/renderer/RendererResImage";
import {RendererRandRound, RendererRect, RendererRound} from "../../components/renderer/RendererBase";
import * as React from "react";
const styles = [
{value: "A1", renderer: RendererBase},
{value: "A1", renderer: RendererRect},
{value: "A2", renderer: RendererRound},
{value: "A3", renderer: RendererRandRound},
{value: "SP — 1", renderer: RendererDSJ},

4
src/reducers/index.js
View File

@ -1,13 +1,13 @@
import {encodeData} from "../utils/qrcodeHandler";
import {actionTypes} from "../constant/ActionTypes";
import {QRBTF_URL} from "../constant/References";
import RendererBase from "../components/renderer/RendererBase";
import {getExactValue} from "../utils/util";
import {RendererRect} from "../components/renderer/RendererBase";
const initialState = {
selectedIndex: 0,
value: 'A1',
rendererType: RendererBase,
rendererType: RendererRect,
correctLevel: 0,
textUrl: QRBTF_URL,
history: [],

8
src/utils/qrcodeHandler.js
View File

@ -1,12 +1,6 @@
import { qrcode as QRCodeEncoder } from "./qrcodeEncoder";
import jsQR from "jsqr";
function extend(target, options) {
for (let name in options) {
target[name] = options[name]
}
return target
}
import { extend } from "./util";
export var QRPointType = {
DATA: 0,

7
src/utils/util.js
View File

@ -82,6 +82,13 @@ export function getExactValue(value, defaultValue) {
return value;
}
export function extend(target, options) {
for (let name in options) {
target[name] = options[name]
}
return target
}
export function toBase64(file, width, height) {
let canvas = document.createElement('canvas');
let ctx = canvas.getContext('2d');