From 1b1403fe851f220fa9ede0537a70677ff6f2360d Mon Sep 17 00:00:00 2001
From: novlan1 <1576271227@qq.com>
Date: Thu, 8 Aug 2024 18:29:40 +0800
Subject: [PATCH] =?UTF-8?q?feat(fab):=20=E6=8B=96=E5=8A=A8=E6=97=B6?=
 =?UTF-8?q?=E4=BF=9D=E7=95=99=E8=BE=B9=E7=95=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/fab/demos/base.vue |  2 +-
 src/fab/fab.tsx        | 47 +++++++++++++++++++++++++++++++++++++++---
 2 files changed, 45 insertions(+), 4 deletions(-)

diff --git a/src/fab/demos/base.vue b/src/fab/demos/base.vue
index 0ad8ee546..603bdc372 100644
--- a/src/fab/demos/base.vue
+++ b/src/fab/demos/base.vue
@@ -1,5 +1,5 @@
 <template>
-  <t-fab :icon="iconFunc" @click="onClick" />
+  <t-fab :icon="iconFunc" draggable @click="onClick" />
 </template>
 
 <script lang="ts" setup>
diff --git a/src/fab/fab.tsx b/src/fab/fab.tsx
index 0961c6407..5f2050d92 100644
--- a/src/fab/fab.tsx
+++ b/src/fab/fab.tsx
@@ -8,6 +8,8 @@ import { TdFabProps } from './type';
 
 const { prefix } = config;
 const name = `${prefix}-fab`;
+const getNumber = (num: string) => num.replace(/[^\d]/g, '');
+
 export default defineComponent({
   name,
   props: FabProps,
@@ -16,12 +18,17 @@ export default defineComponent({
 
     const fabClass = usePrefixClass('fab');
     const fabRef = ref();
+    const fabButtonRef = ref();
 
     const handleClick = (e: MouseEvent) => {
       props.onClick?.({ e });
     };
 
     const mounted = ref(false);
+    const fabButtonSize = ref({
+      width: 48,
+      height: 48,
+    });
     const btnSwitchPos = ref({
       x: 16,
       y: 32,
@@ -54,8 +61,9 @@ export default defineComponent({
       }
       const offsetX = e.touches[0].pageX - switchPos.value.startX;
       const offsetY = e.touches[0].pageY - switchPos.value.startY;
-      const x = Math.floor(switchPos.value.x - offsetX);
-      const y = Math.floor(switchPos.value.y - offsetY);
+      let x = Math.floor(switchPos.value.x - offsetX);
+      let y = Math.floor(switchPos.value.y - offsetY);
+      [x, y] = getSwitchButtonSafeAreaXY(x, y);
       btnSwitchPos.value.x = x;
       btnSwitchPos.value.y = y;
       switchPos.value.endX = x;
@@ -63,6 +71,34 @@ export default defineComponent({
       switchPos.value.hasMoved = true;
     };
 
+    const getSwitchButtonSafeAreaXY = (x: number, y: number) => {
+      const bottomThreshold = 0;
+      const top = 0;
+      const windowTop = 0;
+      const windowBottom = 0;
+      const windowWidth = Math.min(window.innerWidth, document.documentElement.clientWidth, screen.width);
+      const windowHeight = Math.min(window.innerHeight, document.documentElement.clientHeight, screen.height);
+      const docWidth = windowWidth;
+      const docHeight = windowHeight - top;
+
+      // check edge
+      if (x + fabButtonSize.value.width > docWidth) {
+        x = docWidth - fabButtonSize.value.width;
+      }
+      if (y + fabButtonSize.value.height - windowTop > docHeight) {
+        y = docHeight - fabButtonSize.value.height + windowTop;
+      }
+
+      if (x < 0) {
+        x = 0;
+      }
+      if (y < bottomThreshold + windowBottom) {
+        y = bottomThreshold + windowBottom;
+      }
+      // safe area for iOS Home indicator
+      return [x, y];
+    };
+
     const onTouchEnd = (e: TouchEvent) => {
       if (!switchPos.value.hasMoved) {
         return;
@@ -74,6 +110,7 @@ export default defineComponent({
     };
 
     const setSwitchPosition = (switchX: number, switchY: number) => {
+      [switchX, switchY] = getSwitchButtonSafeAreaXY(switchX, switchY);
       switchPos.value.x = switchX;
       switchPos.value.y = switchY;
       btnSwitchPos.value.x = switchX;
@@ -88,12 +125,15 @@ export default defineComponent({
     onMounted(() => {
       mounted.value = true;
       resetDraggableParams();
+
+      const info = window.getComputedStyle(fabButtonRef.value.$el);
+      fabButtonSize.value.height = +getNumber(info.height);
+      fabButtonSize.value.width = +getNumber(info.width);
     });
 
     const getFabOriginStyle = () => {
       const info = window.getComputedStyle(fabRef.value);
       const { right, bottom } = info || {};
-      const getNumber = (num: string) => num.replace(/[^\d]/g, '');
 
       return {
         right: +(getNumber(right) || 0),
@@ -137,6 +177,7 @@ export default defineComponent({
             class={`${fabClass.value}__button`}
             {...(props.buttonProps as TdFabProps['buttonProps'])}
             icon={icon}
+            ref={fabButtonRef}
           >
             {props.text}
           </TButton>