From 19f4d38bc29df3f0e67e1b93ee5791dce08a83b2 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Fri, 3 Nov 2023 11:57:12 +0800
Subject: [PATCH] Optimize HideScrollbar

---
 .../css/components/common/hide-scrollbar.scss |  4 +-
 src/assets/css/pages/tools-framework.scss     |  1 +
 src/components/common/HideScrollbar.tsx       | 78 +++++++------------
 .../common/sidebar/SidebarScroll.tsx          |  1 -
 4 files changed, 31 insertions(+), 53 deletions(-)

diff --git a/src/assets/css/components/common/hide-scrollbar.scss b/src/assets/css/components/common/hide-scrollbar.scss
index 32076ac..427964a 100644
--- a/src/assets/css/components/common/hide-scrollbar.scss
+++ b/src/assets/css/components/common/hide-scrollbar.scss
@@ -68,14 +68,14 @@
   }
 
   .vertical-scrollbar {
-    padding: 12px 4px;
+    padding: 12px 2px;
     height: 100%;
     left: 100%;
     top: 0;
     transform: translateX(-100%);
 
     .box {
-      width: 8px;
+      width: 6px;
     }
   }
 
diff --git a/src/assets/css/pages/tools-framework.scss b/src/assets/css/pages/tools-framework.scss
index 9906a03..937d667 100644
--- a/src/assets/css/pages/tools-framework.scss
+++ b/src/assets/css/pages/tools-framework.scss
@@ -11,5 +11,6 @@ body {
 
 .right-panel {
   flex: 1;
+  width: 0;
   background-color: constants.$background-color;
 }
\ No newline at end of file
diff --git a/src/components/common/HideScrollbar.tsx b/src/components/common/HideScrollbar.tsx
index 3448b0d..6b2dad0 100644
--- a/src/components/common/HideScrollbar.tsx
+++ b/src/components/common/HideScrollbar.tsx
@@ -13,7 +13,6 @@ interface HideScrollbarProps
     minWidth?: string | number
     minHeight?: string | number
     scrollbarWidth?: string | number
-    animationTransitionTime?: number
     autoHideWaitingTime?: number
 }
 
@@ -174,9 +173,10 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
         minWidth,
         minHeight,
         scrollbarWidth,
-        animationTransitionTime,
         autoHideWaitingTime,
         children,
+        style,
+        className,
         ..._props
     } = props
 
@@ -412,35 +412,33 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
     }
 
     useEffect(() => {
-        const windowResizeListener = () => {
-            setTimeout(() => {
-                setVerticalScrollbarWidth(
-                    (rootRef.current?.offsetWidth ?? 0) - (rootRef.current?.clientWidth ?? 0)
-                )
-                setHorizontalScrollbarWidth(
-                    (rootRef.current?.offsetHeight ?? 0) - (rootRef.current?.clientHeight ?? 0)
+        const resizeObserver = new ResizeObserver(() => {
+            setVerticalScrollbarWidth(
+                (rootRef.current?.offsetWidth ?? 0) - (rootRef.current?.clientWidth ?? 0)
+            )
+            setHorizontalScrollbarWidth(
+                (rootRef.current?.offsetHeight ?? 0) - (rootRef.current?.clientHeight ?? 0)
+            )
+
+            rootRef.current &&
+                setVerticalScrollbarLength(
+                    (rootRef.current.clientHeight / (contentRef.current?.clientHeight ?? 0)) * 100
                 )
 
-                rootRef.current &&
-                    setVerticalScrollbarLength(
-                        (rootRef.current.clientHeight / (contentRef.current?.clientHeight ?? 0)) *
-                            100
-                    )
+            rootRef.current &&
+                setHorizontalScrollbarLength(
+                    (rootRef.current.clientWidth / (contentRef.current?.clientWidth ?? 0)) * 100
+                )
+            refreshLayout()
+        })
+        maskRef.current && resizeObserver.observe(maskRef.current)
 
-                rootRef.current &&
-                    setHorizontalScrollbarLength(
-                        (rootRef.current.clientWidth / (contentRef.current?.clientWidth ?? 0)) * 100
-                    )
-                refreshLayout()
-            }, animationTransitionTime)
-
-            return windowResizeListener
+        return () => {
+            maskRef.current && resizeObserver.unobserve(maskRef.current)
         }
-        setTimeout(() => {
-            windowResizeListener()
-        }, 1000)
-        window.addEventListener('resize', windowResizeListener())
+    }, [])
 
+    useEffect(() => {
         rootRef.current?.removeEventListener('wheel', wheelListenerRef.current)
         if (isPreventAnyScroll) {
             const handleDefaultWheel = (event: WheelEvent) => {
@@ -462,28 +460,7 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
             wheelListenerRef.current = handleDefaultWheel
             rootRef.current?.addEventListener('wheel', handleDefaultWheel, { passive: false })
         }
-
-        rootRef.current &&
-            setVerticalScrollbarLength(
-                (rootRef.current.clientHeight / (contentRef.current?.clientHeight ?? 0)) * 100
-            )
-
-        rootRef.current &&
-            setHorizontalScrollbarLength(
-                (rootRef.current.clientWidth / (contentRef.current?.clientWidth ?? 0)) * 100
-            )
-
-        return () => {
-            window.removeEventListener('resize', windowResizeListener)
-        }
-    }, [
-        animationTransitionTime,
-        horizontalScrollbarLength,
-        isPreventAnyScroll,
-        isPreventHorizontalScroll,
-        isPreventScroll,
-        isPreventVerticalScroll
-    ])
+    }, [isPreventAnyScroll, isPreventHorizontalScroll, isPreventScroll, isPreventVerticalScroll])
 
     return (
         <>
@@ -507,13 +484,14 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
             >
                 <div
                     ref={rootRef}
-                    className={'hide-scrollbar-selection'}
+                    className={`hide-scrollbar-selection${className ? ` ${className}` : ''}`}
                     tabIndex={0}
                     style={{
                         width: `calc(${maskRef.current?.clientWidth}px + ${verticalScrollbarWidth}px)`,
                         height: `calc(${maskRef.current?.clientHeight}px + ${horizontalScrollbarWidth}px)`,
                         touchAction: isPreventAnyScroll ? 'none' : '',
-                        msTouchAction: isPreventAnyScroll ? 'none' : ''
+                        msTouchAction: isPreventAnyScroll ? 'none' : '',
+                        ...style
                     }}
                     {..._props}
                     onMouseDown={isPreventAnyScroll ? handleDefaultMouseDown : undefined}
diff --git a/src/components/common/sidebar/SidebarScroll.tsx b/src/components/common/sidebar/SidebarScroll.tsx
index cdd1fa5..4a7c8d7 100644
--- a/src/components/common/sidebar/SidebarScroll.tsx
+++ b/src/components/common/sidebar/SidebarScroll.tsx
@@ -21,7 +21,6 @@ const SidebarScroll = forwardRef<SidebarScrollElement, React.PropsWithChildren>(
             <HideScrollbar
                 isShowVerticalScrollbar={true}
                 scrollbarWidth={2}
-                animationTransitionTime={300}
                 autoHideWaitingTime={800}
                 ref={hideScrollbarRef}
             >