improve sidebar drag

Author: h908714124

src/main/client/src/component/SideBar.jsx

@@ -6,6 +6,7 @@ import {
 import {
   vw,
   sanitizeSidebarWidth,
+  getRemInPixel,
 } from "src/util.js"
 import {
   useLayoutStore,
@@ -15,45 +16,51 @@ import {
 export const SideBar = ({page, children}) => {
   let dragging = useViewStateStore(state => state.dragging)
   let setDragging = useViewStateStore(state => state.setDragging)
+  let dragOffset = useRef(0)
   let sidebarWidth = useLayoutStore(state => state.sidebarWidth[page])
+  let sidebarWidthRef = useRef()
+  sidebarWidthRef.current = sidebarWidth
   let setSidebarWidth = useLayoutStore(state => state.setSidebarWidth)
   let draggingRef = useRef()
-  let ghostWidthRef = useRef()
   draggingRef.current = dragging
-  ghostWidthRef.current = sidebarWidth
+
   useEffect(() => {
-    let mousemove = (e) => {
+    let onMouseMove = (e) => {
       if (!draggingRef.current) {
         return
       }
-      let width = sanitizeSidebarWidth(vw() - e.clientX)
+      let offset = dragOffset.current
+      let width = sanitizeSidebarWidth(vw() - e.clientX + offset)
       setSidebarWidth(page, width)
     }
-    let mouseup = () => setDragging(false)
-    window.document.addEventListener("mousemove", mousemove)
-    window.document.addEventListener("mouseup", mouseup)
+    let onMouseUp = () => setDragging(false)
+    window.document.addEventListener("mousemove", onMouseMove)
+    window.document.addEventListener("mouseup", onMouseUp)
     return () => {
-      window.document.removeEventListener("mousemove", mousemove)
-      window.document.removeEventListener("mouseup", mouseup)
+      window.document.removeEventListener("mousemove", onMouseMove)
+      window.document.removeEventListener("mouseup", onMouseUp)
     }
-  }, [page, draggingRef, setDragging, setSidebarWidth])
+  }, [page, setDragging, setSidebarWidth])
+
   let onMouseDown = useCallback((e) => {
     e.preventDefault()
     setDragging(true)
+    let sidebarWidth = sidebarWidthRef.current
+    dragOffset.current = sidebarWidth + e.clientX - vw()
   }, [setDragging])
+
+  let ghostWidth = Math.trunc(getRemInPixel() * 0.5) + 2
   return (
     <div
         style={{width: sidebarWidth + "px"}}
-        className="fixed top-0 right-0 h-full bg-slate-800">
+        className="absolute border-l border-gray-500 top-0 right-0 h-full bg-slate-800">
       <div
-        onMouseDown={onMouseDown}
-        style={{right: sidebarWidth + "px"}}
-        className="fixed top-0 w-[3px] h-full bg-slate-700 z-10 cursor-col-resize" />
-      {dragging && (
-        <div
-          style={{right: sidebarWidth + "px"}}
-          className="fixed top-0 w-[3px] h-full bg-slate-600 z-20" />
-      )}
+        onMouseDown={!dragging ? onMouseDown : undefined}
+        style={{
+          right: (sidebarWidth - ghostWidth + 1),
+          width: Math.trunc(getRemInPixel() * 0.5) + 2,
+        }}
+        className="absolute top-0 h-full bg-transparent z-20 cursor-col-resize" />
       {children}
     </div>
   )