fix scroll bar

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-left: calc((100vw - var(--scrollbar-width) - 1000px) / 2 + 23px);
-        padding-right: calc((100vw - 1000px) / 2 + 13px);
+        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;

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>

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>)

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>
 );

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 { RendererRandRound, RendererRect, RendererRound } from "../../components/renderer/RendererBase";
-import {RendererLine} from "../../components/renderer/RendererLine";
+import { RendererLine, RendererLine2 } from "../../components/renderer/RendererLine";
-import { RendererFuncA , RendererFuncB } from "../../components/renderer/RendererFunc";
+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},