🎨 画布侧边栏优化, 控制条复位键合并, List组件图片自适应优化

This commit is contained in:
xujiang 2020-10-29 23:03:26 +08:00
parent aabdcf4281
commit 699fd5cdcf
6 changed files with 12 additions and 36 deletions

View File

@ -146,7 +146,7 @@ cnpm run start
## 持续升级 ## 持续升级
正在升级1.3版本,敬请期待... 正在升级1.5版本,敬请期待...
## 赞助 ## 赞助
开源不易, 有了您的赞助, 我们会做的更好~ 开源不易, 有了您的赞助, 我们会做的更好~

View File

@ -39,7 +39,7 @@ const List = memo((props: IListConfig) => {
alt={item.desc} alt={item.desc}
style={{ style={{
width: parseFloat(imgSize), width: parseFloat(imgSize),
height: imgSize, height: imgSize + 'px',
objectFit: 'cover', objectFit: 'cover',
borderRadius: round, borderRadius: round,
}} }}

View File

@ -103,6 +103,7 @@ const Container = (props: {
const backSize = () => { const backSize = () => {
setScale(1); setScale(1);
setDragState({ x: 0, y: 0 });
}; };
const CpIcon = { const CpIcon = {
@ -372,10 +373,6 @@ const Container = (props: {
}; };
}, []); }, []);
const updateDrag = useCallback(() => {
setDragState({ x: 0, y: 0 });
}, []);
const mousemovefn = useMemo(() => { const mousemovefn = useMemo(() => {
return (e: React.MouseEvent<HTMLDivElement>) => { return (e: React.MouseEvent<HTMLDivElement>) => {
if (diffmove.move) { if (diffmove.move) {
@ -503,12 +500,7 @@ const Container = (props: {
canvasId={canvasId} canvasId={canvasId}
allType={allType} allType={allType}
/> />
<CanvasControl <CanvasControl scaleNum={scaleNum} handleSlider={handleSlider} backSize={backSize} />
scaleNum={scaleNum}
handleSlider={handleSlider}
backSize={backSize}
updateDrag={updateDrag}
/>
</div> </div>
{renderRight} {renderRight}
<div <div

View File

@ -192,23 +192,6 @@ const SourceBox = memo((props: SourceBoxProps) => {
}} }}
ref={drop} ref={drop}
> >
<Tooltip placement="right" title="鼠标按住此处拖拽画布" visible={isShowTip}>
<div
className="js_box"
style={{
width: '10px',
height: '100%',
position: 'absolute',
borderRadius: '0 6px 6px 0',
backgroundColor: '#2f54eb',
right: '-10px',
top: '0',
color: '#fff',
cursor: 'move',
}}
/>
</Tooltip>
{pointData.length > 0 ? ( {pointData.length > 0 ? (
<GridLayout <GridLayout
className={styles.layout} className={styles.layout}

View File

@ -6,11 +6,10 @@ interface CanvasControlProps {
scaleNum: number; scaleNum: number;
handleSlider: Function; handleSlider: Function;
backSize(event: MouseEvent<HTMLDivElement>): void; backSize(event: MouseEvent<HTMLDivElement>): void;
updateDrag(event: MouseEvent<HTMLDivElement>): void;
} }
const CanvasControl = (props: CanvasControlProps) => { const CanvasControl = (props: CanvasControlProps) => {
const { scaleNum, handleSlider, backSize, updateDrag } = props; const { scaleNum, handleSlider, backSize } = props;
return ( return (
<div className={styles.sliderWrap}> <div className={styles.sliderWrap}>
<span <span
@ -33,9 +32,6 @@ const CanvasControl = (props: CanvasControlProps) => {
<span className={styles.backSize}> <span className={styles.backSize}>
<ExpandOutlined onClick={backSize} /> <ExpandOutlined onClick={backSize} />
</span> </span>
<span className={styles.backSize}>
<ReloadOutlined onClick={updateDrag} />
</span>
</div> </div>
); );
}; };

View File

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import { Tabs, message } from 'antd'; import { Tabs, message, Button } from 'antd';
import { history } from 'umi'; import { history } from 'umi';
import { import {
MobileOutlined, MobileOutlined,
@ -95,11 +95,16 @@ const Home = () => {
<GithubOutlined /> <GithubOutlined />
</a> </a>
<p> <p>
Welcome to H5-Dooring{' '} Welcome to H5-Dooring
<span role="img" aria-label="welcome"> <span role="img" aria-label="welcome">
👋 👋
</span> </span>
</p> </p>
<p>
<Button type="primary">
<a href="https://www.oschina.net/p/h5-dooring">dooring投票</a>
</Button>
</p>
</div> </div>
</footer> </footer>
</div> </div>