From b021b8e00fb78c0bbf81100a30f81647f56814e9 Mon Sep 17 00:00:00 2001 From: "Bane.Shi" Date: Thu, 14 Dec 2023 12:26:43 +0800 Subject: [PATCH 1/5] feat: merge from dnd --- .gitignore | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/.gitignore b/.gitignore index 324d433..0322d3f 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,5 @@ node_modules/ .idea yarn.lock -package-lock.json \ No newline at end of file +package-lock.json +.npmrc \ No newline at end of file From aa02a3920d86dbdc359571769a044512ad19904a Mon Sep 17 00:00:00 2001 From: "Bane.Shi" Date: Thu, 14 Dec 2023 12:27:21 +0800 Subject: [PATCH 2/5] feat: merge from dnd --- .npmrc | 7 ------- 1 file changed, 7 deletions(-) delete mode 100644 .npmrc diff --git a/.npmrc b/.npmrc deleted file mode 100644 index 8ee76a2..0000000 --- a/.npmrc +++ /dev/null @@ -1,7 +0,0 @@ -; 请妥善保管您的配置 -; 请妥善保管您的配置 -registry=https://moensun-npm.pkg.coding.net/npm/moensun/ -always-auth=true -//moensun-npm.pkg.coding.net/npm/moensun/:username=moensun-1653547579859 -//moensun-npm.pkg.coding.net/npm/moensun/:_password=ZjMzYjU1MmM3NGYwMGJjYmQ5NDRmNzUwMTc1ZjJkNWRhZmU4ZDI5Mg== -//moensun-npm.pkg.coding.net/npm/moensun/:email=fengxiaotx@163.com From b5a4e8a3614e5a277d0cdb4690dca99b2654c93e Mon Sep 17 00:00:00 2001 From: gzxmac Date: Thu, 14 Dec 2023 13:41:50 +0800 Subject: [PATCH 3/5] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8Dhover=E6=97=B6?= =?UTF-8?q?=E5=85=83=E7=B4=A0=E6=8A=96=E5=8A=A8=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/widget/AuxToolsWidget/DashedBox.tsx | 135 ++++++++++-------- 1 file changed, 78 insertions(+), 57 deletions(-) diff --git a/packages/form-designer-react/src/widget/AuxToolsWidget/DashedBox.tsx b/packages/form-designer-react/src/widget/AuxToolsWidget/DashedBox.tsx index e12f1a9..c73054e 100644 --- a/packages/form-designer-react/src/widget/AuxToolsWidget/DashedBox.tsx +++ b/packages/form-designer-react/src/widget/AuxToolsWidget/DashedBox.tsx @@ -1,71 +1,92 @@ import styled from "@emotion/styled"; -import React, {CSSProperties} from "react"; -import {FC} from "react"; -import {useOperation, useValidNodeOffsetRect, useViewport} from "../../hooks"; -import {observer} from "@formily/react"; +import React, { CSSProperties } from "react"; +import { FC } from "react"; +import { useOperation, useValidNodeOffsetRect, useViewport } from "../../hooks"; +import { observer } from "@formily/react"; /** * hoverNode 不要用useEffect监听 */ -const DashedBoxStyled = styled('div')({ - position: 'absolute', - boxSizing: 'border-box', - pointerEvents: 'none', - '.td-aux-dashed-box-title': { - position: 'absolute', - left: 0, - fontSize: '12px', - userSelect: 'none', - visibility: 'hidden' - } -}) +const DashedBoxStyled = styled("div")({ + position: "absolute", + boxSizing: "border-box", + pointerEvents: "none", + ".td-aux-dashed-box-title": { + position: "absolute", + left: 0, + fontSize: "12px", + userSelect: "none", + visibility: "hidden", + }, +}); +/** + * 解决鼠标hover时对高度计算不正确导致的抖动问题 + */ +const DashedBoxWrapperStyled = styled("div")({ + position: "absolute", + top: 0, + left: 0, + bottom: 0, + right: 0, + overflow: "hidden", +}); -type DashedBoxProps = {} +type DashedBoxProps = {}; export const DashedBox: FC = observer(({}) => { - const {dragging, hoverNode, selectionNode} = useOperation() - const rect = useValidNodeOffsetRect(hoverNode) + const { dragging, hoverNode, selectionNode } = useOperation(); + const rect = useValidNodeOffsetRect(hoverNode); - const handleBoxStyles = (): React.CSSProperties => { - const boxStyles: React.CSSProperties = { - top: 0, - left: 0, - pointerEvents: 'none', - boxSizing: 'border-box', - visibility: 'hidden', - zIndex: 2, - } - if (rect) { - boxStyles.height = `${rect.height}px` - boxStyles.width = `${rect.width}px` - boxStyles.border = `1px dashed #1890FF` - boxStyles.transform = `perspective(1px) translate3d(0px, ${rect.top}px, 0px)` - boxStyles.visibility = 'visible' - } - return boxStyles + const handleBoxStyles = (): React.CSSProperties => { + const boxStyles: React.CSSProperties = { + top: 0, + left: 0, + pointerEvents: "none", + boxSizing: "border-box", + visibility: "hidden", + zIndex: 2, + }; + if (rect) { + boxStyles.height = `${rect.height}px`; + boxStyles.width = `${rect.width}px`; + boxStyles.border = `1px dashed #1890FF`; + boxStyles.transform = `perspective(1px) translate3d(0px, ${rect.top}px, 0px)`; + boxStyles.visibility = "visible"; } + return boxStyles; + }; - const handleSpanStyles = (): CSSProperties => { - const spanStyles: CSSProperties = {} - if (hoverNode == hoverNode.root) { - - } else { - if (rect.top > 10) { - spanStyles.top = 'auto'; - spanStyles.bottom = '100%'; - } else { - spanStyles.top = '100%'; - spanStyles.bottom = 'auto'; - } - } - return spanStyles + const handleSpanStyles = (): CSSProperties => { + const spanStyles: CSSProperties = {}; + if (hoverNode == hoverNode.root) { + } else { + if (rect.top > 10) { + spanStyles.top = "auto"; + spanStyles.bottom = "100%"; + } else { + spanStyles.top = "100%"; + spanStyles.bottom = "auto"; + } } + return spanStyles; + }; - - return <> - {!dragging && hoverNode && (hoverNode != selectionNode) && - {hoverNode && hoverNode != hoverNode.root && - {hoverNode?.title}} - } + return ( + <> + {!dragging && hoverNode && hoverNode != selectionNode && ( + + + {hoverNode && hoverNode != hoverNode.root && ( + + {hoverNode?.title} + + )} + + + )} -}) \ No newline at end of file + ); +}); From 8794bb0b1688ae816cdf6c728c74b3c1927036c6 Mon Sep 17 00:00:00 2001 From: "bane.shi" Date: Thu, 14 Dec 2023 22:44:30 +0800 Subject: [PATCH 4/5] no message --- packages/form-designer-react/package.json | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/form-designer-react/package.json b/packages/form-designer-react/package.json index 192589e..f367e3d 100644 --- a/packages/form-designer-react/package.json +++ b/packages/form-designer-react/package.json @@ -38,8 +38,6 @@ "lodash": "^4.17.21", "randomstring": "^1.3.0", "react": "^18.2.0", - "react-dnd": "^16.0.1", - "react-dnd-html5-backend": "^16.0.1", "react-dom": "^18.2.0" } } From 46050394961df4c5b29784c87d2828c47eed5110 Mon Sep 17 00:00:00 2001 From: "Bane.Shi" Date: Fri, 15 Dec 2023 10:15:24 +0800 Subject: [PATCH 5/5] fix: fix hoverNode is undefined error --- .../src/panel/StudioPanel.tsx | 2 +- .../src/widget/AuxToolsWidget/DashedBox.tsx | 134 +++++++++--------- 2 files changed, 68 insertions(+), 68 deletions(-) diff --git a/packages/form-designer-react/src/panel/StudioPanel.tsx b/packages/form-designer-react/src/panel/StudioPanel.tsx index f8b3b1f..7ac13ee 100644 --- a/packages/form-designer-react/src/panel/StudioPanel.tsx +++ b/packages/form-designer-react/src/panel/StudioPanel.tsx @@ -1,4 +1,4 @@ -import React, {CSSProperties, FC} from "react"; +import React, {FC} from "react"; import styled from "@emotion/styled"; import {useOperation} from "../hooks"; import {css, Global} from "@emotion/react"; diff --git a/packages/form-designer-react/src/widget/AuxToolsWidget/DashedBox.tsx b/packages/form-designer-react/src/widget/AuxToolsWidget/DashedBox.tsx index c73054e..ce513c1 100644 --- a/packages/form-designer-react/src/widget/AuxToolsWidget/DashedBox.tsx +++ b/packages/form-designer-react/src/widget/AuxToolsWidget/DashedBox.tsx @@ -1,92 +1,92 @@ import styled from "@emotion/styled"; -import React, { CSSProperties } from "react"; -import { FC } from "react"; -import { useOperation, useValidNodeOffsetRect, useViewport } from "../../hooks"; -import { observer } from "@formily/react"; +import React, {CSSProperties} from "react"; +import {FC} from "react"; +import {useOperation, useValidNodeOffsetRect, useViewport} from "../../hooks"; +import {observer} from "@formily/react"; /** * hoverNode 不要用useEffect监听 */ const DashedBoxStyled = styled("div")({ - position: "absolute", - boxSizing: "border-box", - pointerEvents: "none", - ".td-aux-dashed-box-title": { position: "absolute", - left: 0, - fontSize: "12px", - userSelect: "none", - visibility: "hidden", - }, + boxSizing: "border-box", + pointerEvents: "none", + ".td-aux-dashed-box-title": { + position: "absolute", + left: 0, + fontSize: "12px", + userSelect: "none", + visibility: "hidden", + }, }); /** * 解决鼠标hover时对高度计算不正确导致的抖动问题 */ const DashedBoxWrapperStyled = styled("div")({ - position: "absolute", - top: 0, - left: 0, - bottom: 0, - right: 0, - overflow: "hidden", + position: "absolute", + top: 0, + left: 0, + bottom: 0, + right: 0, + overflow: "hidden", }); type DashedBoxProps = {}; export const DashedBox: FC = observer(({}) => { - const { dragging, hoverNode, selectionNode } = useOperation(); - const rect = useValidNodeOffsetRect(hoverNode); + const {dragging, hoverNode, selectionNode} = useOperation(); + const rect = useValidNodeOffsetRect(hoverNode); - const handleBoxStyles = (): React.CSSProperties => { - const boxStyles: React.CSSProperties = { - top: 0, - left: 0, - pointerEvents: "none", - boxSizing: "border-box", - visibility: "hidden", - zIndex: 2, + const handleBoxStyles = (): React.CSSProperties => { + const boxStyles: React.CSSProperties = { + top: 0, + left: 0, + pointerEvents: "none", + boxSizing: "border-box", + visibility: "hidden", + zIndex: 2, + }; + if (rect) { + boxStyles.height = `${rect.height}px`; + boxStyles.width = `${rect.width}px`; + boxStyles.border = `1px dashed #1890FF`; + boxStyles.transform = `perspective(1px) translate3d(0px, ${rect.top}px, 0px)`; + boxStyles.visibility = "visible"; + } + return boxStyles; }; - if (rect) { - boxStyles.height = `${rect.height}px`; - boxStyles.width = `${rect.width}px`; - boxStyles.border = `1px dashed #1890FF`; - boxStyles.transform = `perspective(1px) translate3d(0px, ${rect.top}px, 0px)`; - boxStyles.visibility = "visible"; - } - return boxStyles; - }; - const handleSpanStyles = (): CSSProperties => { - const spanStyles: CSSProperties = {}; - if (hoverNode == hoverNode.root) { - } else { - if (rect.top > 10) { - spanStyles.top = "auto"; - spanStyles.bottom = "100%"; - } else { - spanStyles.top = "100%"; - spanStyles.bottom = "auto"; - } - } - return spanStyles; - }; + const handleSpanStyles = (): CSSProperties => { + const spanStyles: CSSProperties = {}; + if (!hoverNode || hoverNode == hoverNode?.root) { + } else { + if (rect.top > 10) { + spanStyles.top = "auto"; + spanStyles.bottom = "100%"; + } else { + spanStyles.top = "100%"; + spanStyles.bottom = "auto"; + } + } + return spanStyles; + }; - return ( - <> - {!dragging && hoverNode && hoverNode != selectionNode && ( - - - {hoverNode && hoverNode != hoverNode.root && ( - + return ( + <> + {!dragging && hoverNode && hoverNode != selectionNode && ( + + + {hoverNode && hoverNode != hoverNode.root && ( + {hoverNode?.title} + )} + + )} - - - )} - - ); + + ); });