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

[title & icon]

This commit is contained in:
CPunisher 2020-08-15 14:37:55 +08:00
parent 7dbcff5908
commit 77f5858001
19 changed files with 329 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/actions/index.js
View File

@ -36,3 +36,17 @@ export const loadDownloadData = (data) => ({
type: actionTypes.LOAD_DOWNLOAD_DATA,
data
})
export const changeTitle = (title) => {
return {
type: actionTypes.CHANGE_TITLE,
title
}
}
export const changeIcon = (icon) => {
return {
type: actionTypes.CHANGE_ICON,
icon
}
}

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

@ -2,6 +2,8 @@ import React from 'react';
import './App.css';
import ParamListViewer from "../../containers/param/ParamListViewer";
import ParamCorrectLevelViewer from "../../containers/param/ParamCorrectLevelViewer";
import ParamTitleViewer from "../../containers/param/disposable/ParamTitleViewer";
import ParamIconViewer from "../../containers/param/disposable/ParamIconViewer";
const PartParams = () => (
<div className="Qr-titled-nobg">
@ -12,6 +14,8 @@ const PartParams = () => (
<div className="Qr-Centered">
<div className="Qr-div-table">
<ParamCorrectLevelViewer/>
<ParamTitleViewer/>
<ParamIconViewer/>
<ParamListViewer/>
</div>
</div>

18
src/components/param/FrameworkParam.js Normal file
View File

@ -0,0 +1,18 @@
import React from 'react';
import PropTypes from 'prop-types'
import '../Qrcode.css';
const FrameworkParam = ({ paramName, children, ...other }) => (
<table className="Qr-table" {...other}>
<tbody>
<tr>
<td>{ paramName }</td>
<td>
{ children }
</td>
</tr>
</tbody>
</table>
)
export default FrameworkParam;

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

@ -42,7 +42,7 @@ const ParamColor = ({ rendererIndex, paramIndex, value, onChange }) => {
<div style={styles.cover} onClick={() => setDisplay(false)} />
<TwitterPicker
key={"input_" + rendererIndex + "_" + paramIndex}
triangle="none"
triangle="hide"
color={value}
colors={['#FF6900', '#FCB900', '#7BDCB5', '#00D084', '#8ED1FC', '#0693E3', '#ABB8C3', '#EB144C', '#F78DA7', '#9900EF']}
onChangeComplete={onChange}

31
src/components/param/ParamCorrectLevel.js
View File

@ -1,31 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types'
import '../Qrcode.css';
const ParamCorrectLevel = ({value, onChange}) => (
<table className="Qr-table">
<tbody>
<tr>
<td>容错率</td>
<td>
<select
className="Qr-select"
value={value}
onChange={onChange}>
<option value={1}>7%</option>
<option value={0}>15%</option>
<option value={3}>25%</option>
<option value={2}>30%</option>
</select>
</td>
</tr>
</tbody>
</table>
)
ParamCorrectLevel.propTypes = {
value: PropTypes.number.isRequired,
onChange: PropTypes.func.isRequired
}
export default ParamCorrectLevel;

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

@ -6,6 +6,7 @@ import ParamSelectViewer from "../../containers/param/ParamSelectViewer";
import ParamColorViewer from "../../containers/param/ParamColorViewer";
import ParamUploadViewer from "../../containers/param/ParamUploadViewer";
import ParamCheckBoxViewer from "../../containers/param/ParamCheckBoxViewer";
import FrameworkParam from "./FrameworkParam";
const mapTypeToComponent = ({
[ParamTypes.TEXT_EDITOR]: ParamTextViewer,
@ -18,19 +19,12 @@ const mapTypeToComponent = ({
const ParamList = ({ rendererIndex, paramInfo }) => (
paramInfo.map((item, paramIndex) => {
return (
<table className="Qr-table" key={"tr_" + rendererIndex + "_" + paramIndex}>
<tbody>
<tr>
<td>{item.key}</td>
<td>
<FrameworkParam key={"tr_" + rendererIndex + "_" + paramIndex} paramName={item.key}>
{React.createElement(mapTypeToComponent[item.type], {
rendererIndex: rendererIndex,
paramIndex: paramIndex
})}
</td>
</tr>
</tbody>
</table>
</FrameworkParam>
);
})
)

25
src/components/param/disposable/ParamCorrectLevel.js Normal file
View File

@ -0,0 +1,25 @@
import React from 'react';
import PropTypes from 'prop-types'
import '../../Qrcode.css';
import FrameworkParam from "../FrameworkParam";
const ParamCorrectLevel = ({value, onChange}) => (
<FrameworkParam paramName={"容错率"}>
<select
className="Qr-select"
value={value}
onChange={onChange}>
<option value={1}>7%</option>
<option value={0}>15%</option>
<option value={3}>25%</option>
<option value={2}>30%</option>
</select>
</FrameworkParam>
)
ParamCorrectLevel.propTypes = {
value: PropTypes.number.isRequired,
onChange: PropTypes.func.isRequired
}
export default ParamCorrectLevel;

50
src/components/param/disposable/ParamIcon.js Normal file
View File

@ -0,0 +1,50 @@
import React from 'react';
import PropTypes from 'prop-types'
import '../../Qrcode.css';
import FrameworkParam from "../FrameworkParam";
import {getExactValue} from "../../../utils/util";
import ParamIconSrcViewer from "../../../containers/param/disposable/ParamIconSrcViewer";
const IconParams = ({ icon, onChange }) => {
const { enabled, src, scale } = icon;
if (getExactValue(enabled, 0)) {
return (
<React.Fragment>
<FrameworkParam paramName={"图标源"}>
<ParamIconSrcViewer icon={icon} onChange={onChange}/>
</FrameworkParam>
<FrameworkParam paramName={"图标缩放"}>
<input
type="number"
className="Qr-input small-input"
value={scale}
onChange={(e) => onChange({...icon, scale: e.target.value})}
/>
</FrameworkParam>
</React.Fragment>
)
}
return null;
}
const ParamIcon = ({icon, onChange}) => (
<React.Fragment>
<FrameworkParam paramName={"启用图标"}>
<select
className="Qr-select"
value={icon.enabled}
onChange={(e) => onChange({...icon, enabled: e.target.value})}>
<option value={0}>否</option>
<option value={1}>是</option>
</select>
</FrameworkParam>
<IconParams icon={icon} onChange={onChange}/>
</React.Fragment>
)
ParamIcon.propTypes = {
icon: PropTypes.object.isRequired,
onChange: PropTypes.func.isRequired
}
export default ParamIcon;

67
src/components/param/disposable/ParamTitle.js Normal file
View File

@ -0,0 +1,67 @@
import React from 'react';
import PropTypes from 'prop-types'
import '../../Qrcode.css';
import FrameworkParam from "../FrameworkParam";
import {getExactValue} from "../../../utils/util";
import ParamTitleColorViewer from "../../../containers/param/disposable/ParamTitleColorViewer";
const TitleParams = ({ title, onChange }) => {
const { enabled, text, color, size, align } = title;
if (getExactValue(enabled, 0)) {
return (
<React.Fragment>
<FrameworkParam paramName={"标题内容"}>
<input
type="text"
className="Qr-input small-input"
value={text}
onChange={(e) => onChange({...title, text: e.target.value})}
/>
</FrameworkParam>
<FrameworkParam paramName={"标题颜色"}>
<ParamTitleColorViewer title={title} onChange={onChange}/>
</FrameworkParam>
<FrameworkParam paramName={"标题大小"}>
<input
type="number"
className="Qr-input small-input"
value={size}
onChange={(e) => onChange({...title, size: e.target.value})}
/>
</FrameworkParam>
<FrameworkParam paramName={"标题对齐"}>
<select
className="Qr-select"
value={title.align}
onChange={(e) => onChange({...title, align: e.target.value})}>
<option value={"middle"}>中间</option>
<option value={"bottom"}>底部</option>
</select>
</FrameworkParam>
</React.Fragment>
)
}
return null;
}
const ParamTitle = ({title, onChange}) => (
<React.Fragment>
<FrameworkParam paramName={"启用标题"}>
<select
className="Qr-select"
value={title.enabled}
onChange={(e) => onChange({...title, enabled: e.target.value})}>
<option value={0}>否</option>
<option value={1}>是</option>
</select>
</FrameworkParam>
<TitleParams title={title} onChange={onChange}/>
</React.Fragment>
)
ParamTitle.propTypes = {
title: PropTypes.object.isRequired,
onChange: PropTypes.func.isRequired
}
export default ParamTitle;

1
src/components/renderer/RendererFunc.js
View File

@ -13,7 +13,6 @@ function listPoints(qrcode, params) {
let type = params[0];
let size = params[1] / 100;
let funcType = params[1];
let opacity = params[2] / 100;
let posType = params[3];
let id = 0;
let otherColor = params[4];

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

@ -1,5 +1,5 @@
import React, {useEffect} from "react";
import {extend} from "../../utils/util";
import {extend, getExactValue} from "../../utils/util";
const Renderer = ({ rendererType, ...other }) => (
React.createElement(rendererType, other)
@ -9,7 +9,6 @@ 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';
@ -17,16 +16,65 @@ export function createRenderer(renderer) {
return String(-nCount / 5) + ' ' + String(-nCount / 5) + ' ' + String(nCount + nCount / 5 * 2) + ' ' + String(nCount + nCount / 5 * 2);
}
let drawIcon = function (qrcode, title, icon) {
if (!qrcode) return []
if (!title && !icon) return null;
let id = 0;
const titleEnabled = getExactValue(title.enabled, 0);
const iconEnabled = getExactValue(icon.enabled, 0);
const {text, color, size, align} = title;
const {src, scale} = icon;
const nCount = qrcode.getModuleCount();
// const { fontSize, color, verticalAlign, ...titleStyle } = styles.title || {};
// const titleVerticalAlign = titleAlign || verticalAlign || (icon ? "bottom" : "middle");
// iconScale = iconScale > .33 ? .33 : iconScale;
const titleStyle = {};
const titleVerticalAlign = align;
const iconSize = Number(nCount * (scale > .33 ? .33 : scale));
const iconXY = (nCount - iconSize) / 2;
const pointList = [];
if ((titleEnabled && align === "middle") || iconEnabled) {
pointList.push(<rect key={id++} width={iconSize} height={iconSize} rx="2" ry="2" fill="#FFFFFF" x={iconXY} y={iconXY} />);
}
if (icon && iconEnabled) {
pointList.push(<image key={id++} xlinkHref={src} width={iconSize - 2} x={iconXY + 1} y={iconXY + 1} />);
}
if (title && titleEnabled) {
// const svgWidth = styles.svg && styles.svg.width ? styles.svg.width.replace("px", "") : 300;
// const titleFontSize = Number(nCount + nCount / 5 * 2) * (titleSize || fontSize || 12) / svgWidth;
// const titleFontColor = titleColor || color || "#000000";
const svgWidth = 300;
const titleFontSize = Number(nCount + nCount / 5 * 2) * size / svgWidth;
const titleFontColor = color;
const fontY = titleVerticalAlign === "middle"
? (icon ? (iconXY + iconSize) : (nCount / 2 + titleFontSize * .5))
: Number(nCount + nCount / 5) - titleFontSize * .5;
pointList.push(<text key={id++} x={nCount / 2} y={fontY} fill={titleFontColor} style={{ ...titleStyle, fontSize: titleFontSize }} textAnchor="middle">{text}</text>)
}
return pointList;
}
export function createRenderer(renderer) {
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}) => {
return ({ qrcode, params, title, icon, setParamInfo}) => {
useEffect(() => {
setParamInfo(renderer.getParamInfo());
}, [setParamInfo]);
@ -37,7 +85,7 @@ export function createRenderer(renderer) {
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 })}
{drawIcon(qrcode, title, icon)}
</svg>
);
}

2
src/constant/ActionTypes.js
View File

@ -5,4 +5,6 @@ export const actionTypes = {
CREATE_PARAM: 'CREATE_PARAM',
CHANGE_PARAM: 'CHANGE_PARAM',
LOAD_DOWNLOAD_DATA: 'LOAD_DOWNLOAD_DATA',
CHANGE_TITLE: 'CHANGE_TITLE',
CHANGE_ICON: 'CHANGE_ICON'
}

2
src/containers/param/ParamCorrectLevelViewer.js
View File

@ -1,5 +1,5 @@
import {changeCorrectLevel} from "../../actions";
import ParamCorrectLevel from "../../components/param/ParamCorrectLevel";
import ParamCorrectLevel from "../../components/param/disposable/ParamCorrectLevel";
import {connect} from "react-redux";
const mapStateToProps = (state) => ({

23
src/containers/param/disposable/ParamIconSrcViewer.js Normal file
View File

@ -0,0 +1,23 @@
import { connect } from 'react-redux';
import {isPicture, toBase64} from "../../../utils/imageUtils";
import ParamUpload from "../../../components/param/ParamUpload";
const mapStateToProps = (state, ownProps) => ({
rendererIndex: -1,
paramIndex: -1,
})
const mapDispatchToProps = (dispatch, ownProps) => ({
onChange: (e) => {
if (e.target.files.length > 0) {
const file = e.target.files[0];
if (isPicture(file)) {
toBase64(file, 1.0).then(res => {
ownProps.onChange({ ...ownProps.icon, src: res})
})
}
}
}
})
export default connect(mapStateToProps, mapDispatchToProps)(ParamUpload);

15
src/containers/param/disposable/ParamIconViewer.js Normal file
View File

@ -0,0 +1,15 @@
import { connect } from 'react-redux';
import ParamIcon from "../../../components/param/disposable/ParamIcon";
import {changeIcon} from "../../../actions";
const mapStateToProps = (state, ownProps) => ({
icon: state.icon
})
const mapDispatchToProps = (dispatch, ownProps) => ({
onChange: (icon) => {
dispatch(changeIcon(icon))
}
})
export default connect(mapStateToProps, mapDispatchToProps)(ParamIcon);

16
src/containers/param/disposable/ParamTitleColorViewer.js Normal file
View File

@ -0,0 +1,16 @@
import { connect } from 'react-redux';
import ParamColor from "../../../components/param/ParamColor";
const mapStateToProps = (state, ownProps) => ({
rendererIndex: -1,
paramIndex: -1,
value: state.title.color
})
const mapDispatchToProps = (dispatch, ownProps) => ({
onChange: (color) => {
ownProps.onChange({ ...ownProps.title, color: color.hex })
}
})
export default connect(mapStateToProps, mapDispatchToProps)(ParamColor);

15
src/containers/param/disposable/ParamTitleViewer.js Normal file
View File

@ -0,0 +1,15 @@
import { connect } from 'react-redux';
import ParamTitle from "../../../components/param/disposable/ParamTitle";
import {changeTitle} from "../../../actions";
const mapStateToProps = (state, ownProps) => ({
title: state.title
})
const mapDispatchToProps = (dispatch, ownProps) => ({
onChange: (title) => {
dispatch(changeTitle(title))
}
})
export default connect(mapStateToProps, mapDispatchToProps)(ParamTitle);

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

@ -7,6 +7,8 @@ const mapStateToProps = (state, ownProps) => ({
rendererIndex: ownProps.index,
qrcode: state.qrcode,
params: fillEmptyWith(state.paramValue[ownProps.index].slice(), 0),
title: state.title,
icon: state.icon,
selected: state.selectedIndex === ownProps.index,
})

12
src/reducers/index.js
View File

@ -13,6 +13,8 @@ const initialState = {
history: [],
downloadData: [],
qrcode: encodeData({text: QRBTF_URL, correctLevel: 0}),
icon: { enabled: 0, src: '', scale: 0.33 },
title: { enabled: 0, text: '', color: 'black', size: 20, align: 'middle'},
paramInfo: new Array(16).fill(new Array(16)),
paramValue: new Array(16).fill(new Array(16))
}
@ -65,6 +67,16 @@ export default function appReducer(state = initialState, action) {
downloadData: action.data
});
}
case actionTypes.CHANGE_TITLE: {
return Object.assign({}, state, {
title: Object.assign({}, state.title, action.title)
});
}
case actionTypes.CHANGE_ICON: {
return Object.assign({}, state, {
icon: Object.assign({}, state.icon, action.icon)
});
}
default: return state
}
}