From 64b4e9b4ef41fac0498553fc3c65864f4f051506 Mon Sep 17 00:00:00 2001 From: zhangjinlong Date: Tue, 13 Oct 2020 01:20:01 +0800 Subject: [PATCH] =?UTF-8?q?:art:=20=E5=88=A0=E9=99=A4=E6=9A=82=E6=97=B6?= =?UTF-8?q?=E8=BF=98=E6=9C=89bug=E9=97=AE=E9=A2=98=20todo?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/editor/SourceBox.tsx | 114 ++++++++++++++++--------- src/pages/editor/index.less | 23 ++++- src/pages/editor/models/editorModal.js | 2 +- 3 files changed, 97 insertions(+), 42 deletions(-) diff --git a/src/pages/editor/SourceBox.tsx b/src/pages/editor/SourceBox.tsx index 2548829..2edcbd1 100644 --- a/src/pages/editor/SourceBox.tsx +++ b/src/pages/editor/SourceBox.tsx @@ -7,6 +7,7 @@ import React, { useMemo, useState, createRef, + useDebugValue, } from 'react'; import { useDrop } from 'react-dnd'; import Draggable, { DraggableData, DraggableEvent } from 'react-draggable'; @@ -20,7 +21,11 @@ import { Dispatch } from 'umi'; import { StateWithHistory } from 'redux-undo'; import { dooringContext } from '@/layouts'; interface SourceBoxProps { - pstate: { pointData: { id: string; item: any; point: any; isMenu?: any }[]; curPoint: any }; + pstate: { + pointData: { id: string; item: any; point: any; isMenu?: any }[]; + curPoint: any; + status: string; + }; cstate: { pointData: { id: string; item: any; point: any }[]; curPoint: any }; scaleNum: number; canvasId: string; @@ -33,19 +38,30 @@ interface SourceBoxProps { y: number; }> >; + pointData: { id: string; item: any; point: any; isMenu?: any }[]; + setPointData: React.Dispatch< + React.SetStateAction< + { + id: string; + item: any; + point: any; + isMenu?: any; + }[] + > + >; } const SourceBox = memo((props: SourceBoxProps) => { const { pstate, scaleNum, canvasId, allType, dispatch, dragState, setDragState, cstate } = props; const context = useContext(dooringContext); - let pointData = pstate ? pstate.pointData : []; + const dataState = pstate ? pstate.pointData : []; const cpointData = cstate ? cstate.pointData : []; - const [canvasRect, setCanvasRect] = useState([]); const [isShowTip, setIsShowTip] = useState(true); - const [clonePointData, setPointData] = useState(pointData); - const [isMenu, setIsMenu] = useState(false); + + const [pointData, setPointData] = useState(dataState); + // const [isCurrentCard, setCurrentCard] = useState(false); const [{ isOver }, drop] = useDrop({ accept: allType, drop: (item: { h: number; type: string; x: number }, monitor) => { @@ -148,6 +164,45 @@ const SourceBox = memo((props: SourceBoxProps) => { } }; }, [context.theme, cpointData, dispatch, pointData]); + + useEffect(() => { + let { width, height } = document.getElementById(canvasId)!.getBoundingClientRect(); + console.log(width, height); + setCanvasRect([width, height]); + }, [canvasId, context.theme]); + + useEffect(() => { + let timer = window.setTimeout(() => { + setIsShowTip(false); + }, 3000); + return () => { + window.clearTimeout(timer); + }; + }, []); + + useEffect(() => { + // let isCuurentPoint = pointData.some(item => +item.id === (pstate.curPoint && +pstate.curPoint.id)) + // if(isCuurentPoint && pstate.curPoint.status === 'inToCanvas') { + // setPointData(dataState) + // } + if (pointData.some(item => item.isMenu)) { + //. + } else { + setPointData(dataState); + } + }, [dataState]); + + const handleDelete: Function = useMemo(() => { + return (id: any) => { + dispatch({ + type: 'editorModal/delPointData', + payload: { id }, + }); + }; + }, [dispatch]); + + const opacity = isOver ? 0.7 : 1; + const initSelect: any = (data: any = []) => { return ( data && @@ -157,40 +212,22 @@ const SourceBox = memo((props: SourceBoxProps) => { })) ); }; - useEffect(() => { - let { width, height } = document.getElementById(canvasId)!.getBoundingClientRect(); - console.log(width, height); - setCanvasRect([width, height]); - }, [canvasId, context.theme]); - useEffect(() => { - setPointData(initSelect(pointData)); - let timer = window.setTimeout(() => { - setIsShowTip(false); - }, 3000); - return () => { - window.clearTimeout(timer); - }; - }, []); - const opacity = isOver ? 0.7 : 1; const handleCurrentCard: Function = useCallback( (e: Event, status: boolean, index: number) => { e.preventDefault(); - setIsMenu(false); - if (status) { - setIsMenu(true); - } else { - setIsMenu(false); - } - (pointData = initSelect(pointData)) && - Object.keys(pointData).map(keyId => { - (+pointData[+keyId].id === +index && (pointData[+keyId].isMenu = status)) || - (pointData[+keyId].isMenu = false); + let pointDataOnMenu: any; + (pointDataOnMenu = initSelect(dataState)) && + Object.keys(pointDataOnMenu).map(keyId => { + (+pointDataOnMenu[+keyId].id === +index && (pointDataOnMenu[+keyId].isMenu = status)) || + (pointDataOnMenu[+keyId].isMenu = false); }); - setPointData(pointData); + setPointData(pointDataOnMenu); + // setCurrentCard(true) }, - [status, pointData], + [status], ); + const render = useMemo(() => { if (context.theme === 'h5') { return ( @@ -251,19 +288,21 @@ const SourceBox = memo((props: SourceBoxProps) => { className={value.isMenu ? styles.selected : styles.dragItem} key={value.id} data-grid={value.point} + onMouseDownCapture={e => handleCurrentCard(e, true, value.id)} + onDragLeave={e => handleCurrentCard(e, false, value.id)} > - {/*
-
+ -
- 删除 +
+
-
*/} +
))} @@ -396,7 +435,6 @@ const SourceBox = memo((props: SourceBoxProps) => { pointData, scaleNum, setDragState, - clonePointData, ]); return <>{render}; diff --git a/src/pages/editor/index.less b/src/pages/editor/index.less index 97e1ed0..5b64eea 100644 --- a/src/pages/editor/index.less +++ b/src/pages/editor/index.less @@ -142,9 +142,26 @@ border: 2px solid #06c; .tooltip { position: relative; - // z-index: 999999; - width: 388px; - text-align: right; + width: 161px; + height: 80px; + background: #ffffff; + border-radius: 4px; + border: 1px solid #dbdbdb; + text-align: center; + .tooltipRow1 { + margin-top: 10px; + margin-bottom: 5px; + a { + color: #4a4a4a; + cursor: pointer; + } + } + .tooltipRow2 { + a { + color: #ff001f; + cursor: pointer; + } + } } } } diff --git a/src/pages/editor/models/editorModal.js b/src/pages/editor/models/editorModal.js index 28f2552..92c4a83 100644 --- a/src/pages/editor/models/editorModal.js +++ b/src/pages/editor/models/editorModal.js @@ -4,7 +4,7 @@ * @Autor: dragon * @Date: 2020-09-24 10:11:24 * @LastEditors: dragon - * @LastEditTime: 2020-10-08 16:12:26 + * @LastEditTime: 2020-10-13 01:08:08 */ const pointData = localStorage.getItem('userData') || '[]';