Merge pull request #5 from trionesdev/develop

merge commits
trionesdev · Dec 15, 2023 · 123de98 · 123de98
2 parents 2cd4a63 + 4605039
commit 123de98
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 46 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,5 @@
 node_modules/
 .idea
 yarn.lock
-package-lock.json
+package-lock.json
+.npmrc
diff --git 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"
   }
 }
diff --git 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
@@ -8,64 +8,85 @@ 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',
+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'
-    }
-})
+        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<DashedBoxProps> = 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',
+            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'
+            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
-    }
+        return boxStyles;
+    };
 
     const handleSpanStyles = (): CSSProperties => {
-        const spanStyles: CSSProperties = {}
-        if (hoverNode == hoverNode.root) {
-
+        const spanStyles: CSSProperties = {};
+        if (!hoverNode || hoverNode == hoverNode?.root) {
         } else {
             if (rect.top > 10) {
-                spanStyles.top = 'auto';
-                spanStyles.bottom = '100%';
+                spanStyles.top = "auto";
+                spanStyles.bottom = "100%";
             } else {
-                spanStyles.top = '100%';
-                spanStyles.bottom = 'auto';
+                spanStyles.top = "100%";
+                spanStyles.bottom = "auto";
             }
         }
-        return spanStyles
-    }
-
+        return spanStyles;
+    };
 
-    return <>
-        {!dragging && hoverNode && (hoverNode != selectionNode) && <DashedBoxStyled style={handleBoxStyles()}>
-            {hoverNode && hoverNode != hoverNode.root &&
-                <span className={`td-aux-dashed-box-title`} style={handleSpanStyles()}>{hoverNode?.title}</span>}
-        </DashedBoxStyled>}
-    </>
-})
+    return (
+        <>
+            {!dragging && hoverNode && hoverNode != selectionNode && (
+                <DashedBoxWrapperStyled>
+                    <DashedBoxStyled style={handleBoxStyles()}>
+                        {hoverNode && hoverNode != hoverNode.root && (
+                            <span
+                                className={`td-aux-dashed-box-title`}
+                                style={handleSpanStyles()}
+                            >
+                {hoverNode?.title}
+              </span>
+                        )}
+                    </DashedBoxStyled>
+                </DashedBoxWrapperStyled>
+            )}
+        </>
+    );
+});