fab auto hide

src/views/Action/Draggable.js

@@ -30,14 +30,28 @@ export default function Draggable(props) {
       let x = origin.x + dx;
       let y = origin.y + dy;
       const { w, h } = props.windowSize;
-      x = limitNumber(x, 0, w - props.width);
+      x = limitNumber(x, -props.width / 2, w - props.width / 2);
-      y = limitNumber(y, 0, h - props.height);
+      y = limitNumber(y, -props.height / 2, h - props.height / 2);
       setPosition({ x, y });
     }
   };
 
   const handlePointerUp = (e) => {
     setOrigin(null);
+    if (props.name !== "fab") {
+      return;
+    }
+
+    const { w, h } = props.windowSize;
+    let { x: left, y: top } = position;
+    const right = w - left - props.width;
+    const bottom = h - top - props.height;
+    const min = Math.min(left, top, right, bottom);
+    left === min && (left = -props.width / 2);
+    top === min && (top = -props.height / 2);
+    right === min && (left = w - props.width / 2);
+    bottom === min && (top = h - props.height / 2);
+    setPosition({ x: left, y: top });
   };
 
   const handleClick = (e) => {
@@ -59,8 +73,8 @@ export default function Draggable(props) {
   useEffect(() => {
     const { w, h } = props.windowSize;
     setPosition(({ x, y }) => ({
-      x: limitNumber(x, 0, w - props.width),
+      x: limitNumber(x, -props.width / 2, w - props.width / 2),
-      y: limitNumber(y, 0, h - props.height),
+      y: limitNumber(y, -props.height / 2, h - props.height / 2),
     }));
   }, [props.windowSize, props.width, props.height]);
 
@@ -71,6 +85,10 @@ export default function Draggable(props) {
         left: position.x,
         top: position.y,
         zIndex: 2147483647,
+        display: props.show ? "block" : "none",
+        transitionProperty: origin ? "none" : "all",
+        transitionDuration: "1s",
+        transitionDelay: "1s",
       }}
       onClick={handleClick}
     >

src/views/Action/index.js

@@ -1,7 +1,7 @@
 import Paper from "@mui/material/Paper";
 import Box from "@mui/material/Box";
 import Fab from "@mui/material/Fab";
-import TranslateIcon from '@mui/icons-material/Translate';
+import TranslateIcon from "@mui/icons-material/Translate";
 import ThemeProvider from "../../hooks/Theme";
 import Draggable from "./Draggable";
 import IconButton from "@mui/material/IconButton";
@@ -67,17 +67,18 @@ export default function Action() {
     windowSize,
     width: fabWidth,
     height: fabWidth,
-    left: window.innerWidth - fabWidth - fabWidth,
+    left: window.innerWidth - fabWidth,
-    top: window.innerHeight - fabWidth - fabWidth,
+    top: window.innerHeight - fabWidth,
   };
 
   return (
     <StoragesProvider>
       <ThemeProvider>
-        {showPopup ? (
         <Draggable
           key="pop"
+          name="pop"
           {...popProps}
+          show={showPopup}
           onStart={handleStart}
           onMove={handleMove}
           handler={
@@ -106,10 +107,11 @@ export default function Action() {
             <Popup />
           </Paper>
         </Draggable>
-        ) : (
         <Draggable
           key="fab"
+          name="fab"
           {...fabProps}
+          show={!showPopup}
           onStart={handleStart}
           onMove={handleMove}
           handler={
@@ -125,7 +127,6 @@ export default function Action() {
             </Fab>
           }
         />
-        )}
       </ThemeProvider>
     </StoragesProvider>
   );