github/h5-Dooring
1
0
Fork 0
mirror of https://github.com/MrXujiang/h5-Dooring.git synced 2025-12-13 19:12:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

添加画布引导提示

Browse Source
This commit is contained in:
xujiang 2020-08-26 22:19:01 +08:00
parent e7030a79ac
commit 2d29d88639
1 changed files with 25 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/pages/editor/SourceBox.js
View File

@ -2,6 +2,7 @@ import React, { memo, useEffect, useState } from 'react'
import { useDrop } from 'react-dnd' import { useDrop } from 'react-dnd'
import Draggable from 'react-draggable' import Draggable from 'react-draggable'
import GridLayout from 'react-grid-layout' import GridLayout from 'react-grid-layout'
import { Tooltip } from 'antd'
import { connect } from 'dva' import { connect } from 'dva'
import DynamicEngine from 'components/DynamicEngine' import DynamicEngine from 'components/DynamicEngine'
import styles from './index.less' import styles from './index.less'
@ -9,6 +10,7 @@ import styles from './index.less'
const SourceBox = memo((props) => { const SourceBox = memo((props) => {
const { pointData, scaleNum, canvasId, dispatch } = props const { pointData, scaleNum, canvasId, dispatch } = props
const [canvasRect, setCanvasRect] = useState([]) const [canvasRect, setCanvasRect] = useState([])
const [isShowTip, setIsShowTip] = useState(true)
const [{ isOver }, drop] = useDrop({ const [{ isOver }, drop] = useDrop({
accept: [], accept: [],
collect: (monitor) => ({ collect: (monitor) => ({
@ -47,6 +49,12 @@ const SourceBox = memo((props) => {
setCanvasRect([width, height]) setCanvasRect([width, height])
}, [canvasId]) }, [canvasId])
useEffect(() => {
setTimeout(() => {
setIsShowTip(false)
}, 3000)
}, [])
const opacity = isOver ? 0.7 : 1 const opacity = isOver ? 0.7 : 1
const backgroundColor = isOver ? 1 : 0.7 const backgroundColor = isOver ? 1 : 0.7
@ -63,21 +71,23 @@ const SourceBox = memo((props) => {
}} }}
ref={drop} ref={drop}
> >
<div <Tooltip placement="right" title="鼠标按住此处拖拽画布" visible={isShowTip}>
className="js_box" <div
style={{ className="js_box"
width: '12px', style={{
height: '100%', width: '12px',
position: 'absolute', height: '100%',
borderRadius: '0 6px 6px 0', position: 'absolute',
backgroundColor: '#2f54eb', borderRadius: '0 6px 6px 0',
right: '-12px', backgroundColor: '#2f54eb',
top: '0', right: '-12px',
color: '#fff', top: '0',
cursor: 'move' color: '#fff',
}} cursor: 'move'
> }}
</div> />
</Tooltip>
{ {
pointData.length > 0 ? pointData.length > 0 ?
<GridLayout <GridLayout