feat: close tranbox when click away

src/views/Selection/DraggableResizable.js

@@ -148,6 +148,7 @@ export default function DraggableResizable({
   },
   onChangeSize,
   onChangePosition,
+  ...props
 }) {
   const lineWidth = 4;
   const [position, setPosition] = useState(defaultPosition);
@@ -182,6 +183,7 @@ export default function DraggableResizable({
         gridTemplateRows: `${lineWidth * 2}px auto ${lineWidth * 2}px`,
         zIndex: 2147483647,
       }}
+      {...props}
     >
       <Pointer
         direction="TopLeft"

src/views/Selection/TranBox.js

@@ -175,6 +175,7 @@ export default function TranBox({
           header={<Header setShowPopup={setShowBox} />}
           onChangeSize={setBoxSize}
           onChangePosition={setBoxPosition}
+          onClick={(e) => e.stopPropagation()}
         >
           <Divider />
           <TranForm

src/views/Selection/index.js

@@ -132,6 +132,18 @@ export default function Slection({
     }
   }, [handleTranbox, contextMenuType]);
 
+  useEffect(() => {
+    if (tranboxSetting.hideClickAway) {
+      const handleHideBox = () => {
+        setShowBox(false);
+      };
+      window.addEventListener("click", handleHideBox);
+      return () => {
+        window.removeEventListener("click", handleHideBox);
+      };
+    }
+  }, [tranboxSetting.hideClickAway]);
+
   return (
     <>
       {showBox && (