mirror of
https://github.com/MrXujiang/h5-Dooring.git
synced 2025-12-12 01:47:08 +00:00
🎨 画布侧边栏优化, 控制条复位键合并, List组件图片自适应优化
This commit is contained in:
parent
aabdcf4281
commit
699fd5cdcf
@ -146,7 +146,7 @@ cnpm run start
|
|||||||
|
|
||||||
|
|
||||||
## 持续升级
|
## 持续升级
|
||||||
正在升级1.3版本,敬请期待...
|
正在升级1.5版本,敬请期待...
|
||||||
|
|
||||||
## 赞助
|
## 赞助
|
||||||
开源不易, 有了您的赞助, 我们会做的更好~
|
开源不易, 有了您的赞助, 我们会做的更好~
|
||||||
|
|||||||
@ -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,
|
||||||
}}
|
}}
|
||||||
|
|||||||
@ -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
|
||||||
|
|||||||
@ -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}
|
||||||
|
|||||||
@ -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>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user