fix scroll bar

2020-06-22 21:43:31 +08:00 · 2020-06-22 21:43:31 +08:00 · eeda28ab6c
parent f8dac04b8d ffbce77b82
commit eeda28ab6c
5 changed files with 122 additions and 14 deletions
--- a/src/components/Qrcode.css
+++ b/src/components/Qrcode.css
@ -64,7 +64,6 @@
 .Qr-s {
    overflow-x: scroll;
    overflow-y: hidden;
-    overflow-scrolling: touch;
    width: calc(100vw - var(--scrollbar-width));
    white-space: nowrap;
    display: flex;
@ -100,8 +99,8 @@

@media (min-width: 1000px) {
    .Qr-box {
-        padding-left: calc((100vw - 1000px) / 2 + 23px);
-        padding-right: calc((100vw - 1000px) / 2 + 13px);
+        padding-left: calc((100vw - var(--scrollbar-width) - 1000px) / 2 + 23px);
+        padding-right: calc((100vw - var(--scrollbar-width) - 1000px) / 2 + 13px);
    }
 }

@ -195,10 +194,14 @@
    color: #000000;
 }

-.Qr-item-selected .Qr-item-desc-inner {
+.Qr-item:hover .Qr-item-desc-inner {
    opacity: 1;
 }

+.Qr-item-selected .Qr-item-desc-inner {
+    opacity: 1!important;
+}
+
 .Qr-item-detail {
    color: rgba(0,0,0,0.3);
    margin-top: 5px;
--- a/src/components/app/PartMore.js
+++ b/src/components/app/PartMore.js
@ -12,7 +12,7 @@ const PartMore = () => (
            <div className="Qr-article">
                <p><GitHubButton className="github-btn" href="https://github.com/ciaochaos/qrbtf" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star ciaochaos/qrbtf on GitHub">Star</GitHubButton></p>
                <h2>最新消息</h2>
-                <p><b>2020.6.22</b><br/>新增 A — a1、A — b1、A — b2 样式，添加样式描述，增加电脑端横向拖拽滑动。</p>
+                <p><b>2020.6.22</b><br/>新增 A — a1、A — a2、A — b1、A — b2 样式，添加样式描述，新增桌面端横向拖拽滑动。</p>
                <p><b>2020.6.11</b><br/>QRBTF React 组件发布！快在你的应用中引入 react-qrbtf 吧。<LinkTrace href='https://github.com/cpunisher/react-qrbtf' rel="noopener noreferrer" target="_blank">访问项目</LinkTrace>。</p>
                <p><b>2020.5.23</b><br/>网站开源啦！<LinkTrace href='https://github.com/ciaochaos/qrbtf' rel="noopener noreferrer" target="_blank">点击访问</LinkTrace> 我们的 Github。期待你也来参与设计、开发！给个 Star 支持一下不？查看文章 <LinkTrace href='https://mp.weixin.qq.com/s/GFEMCWQu3e2qhTuBabnHmQ' rel="noopener noreferrer" target="_blank">QRBTF 开源啦！来写个二维码样式吧～</LinkTrace>。</p>
                <p><b>2020.5.22</b><br/>新增 C2 样式、下载计数（好像还不太稳定）、普通二维码上传、颜色选择、背景图片上传、输入提示、桌面端横向滚动提示。</p>
--- a/src/components/app/PartStyles.js
+++ b/src/components/app/PartStyles.js
@ -1,4 +1,4 @@
-import React, {useEffect, useRef, useState} from 'react';
+import React, {useEffect, useState} from 'react';
 import './App.css';
 import StyleListViewer from "../../containers/style/StyleListViewer";
 import {isPC} from "../../utils/navigatorUtils";
@ -20,7 +20,12 @@ const PartStyles = ({ setParamInfo }) => {
                {isPC() ? <div className="Qr-style-hint">拖拽滑动</div> : null}
            </div>
        </div>
-        <ScrollContainer hideScrollbars={false} className="Qr-s" style={{visibility: loaded ? "visible" :"hidden"}}>
+        <ScrollContainer
+            className="Qr-s"
+            hideScrollbars={false}
+            horizontal={true}
+            vertical={false}
+            style={{visibility: loaded ? "visible" :"hidden"}}>
            {styleList}
        </ScrollContainer>
    </div>)
--- a/src/components/renderer/RendererLine.js
+++ b/src/components/renderer/RendererLine.js
@ -4,6 +4,7 @@ import {getTypeTable, QRPointType} from "../../utils/qrcodeHandler";
 import {createRenderer} from "../style/Renderer";
 import LinkTrace from "../link/LinkTrace";
 import RenderDSJ from "./RendererDSJ";
+import {rand} from "../../utils/util";

 function listPoints(qrcode, params) {
    if (!qrcode) return []
@ -40,7 +41,7 @@ function listPoints(qrcode, params) {

    for (let x = 0; x < nCount; x++) {
        for (let y = 0; y < nCount; y++) {
-            if (!available[x][y] || !ava2[x][y] || qrcode.isDark(x, y) === false) continue;
+            if (qrcode.isDark(x, y) === false) continue;

            if (typeTable[x][y] === QRPointType.POS_CENTER) {
                if (posType === 0) {
@ -192,7 +193,7 @@ function listPoints(qrcode, params) {
                        let end = 0;
                        let ctn = true;
                        while (ctn && x + end < nCount  && y - end >= 0) {
-                            if (qrcode.isDark(x + end, y - end) && ava2[x + end][y - end]) {
+                            if (qrcode.isDark(x + end, y - end) && available[x + end][y - end]) {
                                end++;
                            } else {
                                ctn = false;
@ -210,6 +211,45 @@ function listPoints(qrcode, params) {
                        pointList.push(<circle opacity={opacity} r={size / 2} key={id++} fill={otherColor} cx={x + 0.5} cy={y + 0.5}/>)
                    }
                }
+                if (type === 5) {
+                    if (x === 0 || y === nCount - 1 || ((x > 0 && y < nCount - 1) && (!qrcode.isDark(x - 1, y + 1) || !ava2[x - 1][y + 1]))) {
+                        let start = 0;
+                        let end = 0;
+                        let ctn = true;
+                        while (ctn && x + end < nCount  && y - end >= 0) {
+                            if (qrcode.isDark(x + end, y - end) && ava2[x + end][y - end]) {
+                                end++;
+                            } else {
+                                ctn = false;
+                            }
+                        }
+                        if (end - start > 1) {
+                            for (let i = start; i < end; i++) {
+                                ava2[x + i][y - i] = false;
+                            }
+                            pointList.push(<line opacity={opacity} x1={x + 0.5} y1={y + 0.5} x2={x + (end - start - 1) + 0.5} y2={y - (end - start - 1) + 0.5} strokeWidth={size / 2 * rand(0.3,1)} stroke={otherColor} strokeLinecap="round" key={id++}/>)
+                        }
+                    }
+                    if (y === 0 || x === 0 || ((y > 0 && x > 0) && (!qrcode.isDark(x - 1, y - 1) || !available[x - 1][y - 1]))) {
+                        let start = 0;
+                        let end = 0;
+                        let ctn = true;
+                        while (ctn && y + end < nCount && x + end < nCount) {
+                            if (qrcode.isDark(x + end, y + end) && available[x + end][y + end]) {
+                                end++;
+                            } else {
+                                ctn = false;
+                            }
+                        }
+                        if (end - start > 1) {
+                            for (let i = start; i < end; i++) {
+                                available[x + i][y + i] = false;
+                            }
+                            pointList.push(<line opacity={opacity} x1={x + 0.5} y1={y + 0.5} x2={x + end - start - 1 + 0.5} y2={y + end - start - 1 + 0.5} strokeWidth={size / 2 * rand(0.3,1)} stroke={otherColor} strokeLinecap="round" key={id++}/>)
+                        }
+                    }
+                    pointList.push(<circle opacity={opacity} r={0.5 * rand(0.33,0.9)} key={id++} fill={otherColor} cx={x + 0.5} cy={y + 0.5}/>)
+                }
            }
        }
    }
@ -222,13 +262,14 @@ function getParamInfoLine() {
        {
            type: ParamTypes.SELECTOR,
            key: '连线方向',
-            default: 1,
+            default: 2,
            choices: [
                "左右",
                "上下",
                "纵横",
                "左上 — 右下",
-                "右上 — 左下"
+                "右上 — 左下",
+                "交叉"
            ]
        },
        {
@ -265,11 +306,69 @@ function getParamInfoLine() {
    ];
 }

+function getParamInfoLine2() {
+    return [
+        {
+            type: ParamTypes.SELECTOR,
+            key: '连线方向',
+            default: 5,
+            choices: [
+                "左右",
+                "上下",
+                "纵横",
+                "左上 — 右下",
+                "右上 — 左下",
+                "交叉"
+            ]
+        },
+        {
+            type: ParamTypes.TEXT_EDITOR,
+            key: '连线粗细',
+            default: 50
+        },
+        {
+            type: ParamTypes.TEXT_EDITOR,
+            key: '连线不透明度',
+            default: 100,
+        },
+        {
+            type: ParamTypes.SELECTOR,
+            key: '定位点样式',
+            default: 0,
+            choices: [
+                "矩形",
+                "圆形",
+                "行星",
+                "圆角矩形",
+            ]
+        },
+        {
+            type: ParamTypes.COLOR_EDITOR,
+            key: '连线颜色',
+            default: '#000000'
+        },
+        {
+            type: ParamTypes.COLOR_EDITOR,
+            key: '定位点点颜色',
+            default: '#000000'
+        }
+    ];
+}
+
 export const RendererLine= createRenderer({
    listPoints: listPoints,
    getParamInfo: getParamInfoLine,
 });

+export const RendererLine2= createRenderer({
+    listPoints: listPoints,
+    getParamInfo: getParamInfoLine2,
+});
+
 RendererLine.detail = (
    <div>连连看，可选方向</div>
+);
+
+RendererLine2.detail = (
+    <div>交错相连</div>
 );
--- a/src/containers/style/StyleListViewer.js
+++ b/src/containers/style/StyleListViewer.js
@ -7,9 +7,9 @@ import RendererRandRect from "../../components/renderer/RendererRandRect";
 import Renderer25D from "../../components/renderer/Renderer25D";
 import RendererImage from "../../components/renderer/RendererImage";
 import RendererResImage from "../../components/renderer/RendererResImage";
-import {RendererRandRound, RendererRect, RendererRound} from "../../components/renderer/RendererBase";
-import {RendererLine} from "../../components/renderer/RendererLine";
-import { RendererFuncA , RendererFuncB } from "../../components/renderer/RendererFunc";
+import { RendererRandRound, RendererRect, RendererRound } from "../../components/renderer/RendererBase";
+import { RendererLine, RendererLine2 } from "../../components/renderer/RendererLine";
+import { RendererFuncA, RendererFuncB } from "../../components/renderer/RendererFunc";
 import * as React from "react";

 const styles = [
@ -17,6 +17,7 @@ const styles = [
    {value: "A2", renderer: RendererRound},
    {value: "A3", renderer: RendererRandRound},
    {value: "A — a1", renderer: RendererLine},
+    {value: "A — a2", renderer: RendererLine2},
    {value: "A — b1", renderer: RendererFuncA},
    {value: "A — b2", renderer: RendererFuncB},
    {value: "SP — 1", renderer: RendererDSJ},