fix sidebar resize

Author: h908714124

src/main/client/src/Router.jsx

@@ -34,7 +34,7 @@ import {
   StompContext,
 } from "src/util.js"
 import {
-  useLayoutStore,
+  useViewStateStore,
 } from "src/layout.js"
 
 export const Router = createBrowserRouter(
@@ -63,7 +63,7 @@ export const Router = createBrowserRouter(
 )
 
 function Frame() {
-  let dragging = useLayoutStore(state => state.dragging)
+  let dragging = useViewStateStore(state => state.dragging)
   return <>
     <div className={twJoin(
         "h-full",

src/main/client/src/component/Chat.jsx

@@ -11,14 +11,17 @@ import {
 import {
   useAuthStore,
 } from "src/store.js"
+import {
+  useViewStateStore,
+} from "src/layout.js"
 import {
   StompContext,
   tfetch,
   doTry,
   getRemInPixel,
 } from "src/util.js"
 
-export const Chat = ({chatId}) => {
+export const Chat = ({chatId, className}) => {
   let [messages, setMessages] = useState([])
   let [users, setUsers] = useState([])
   let messageRef = useRef()
@@ -90,6 +93,7 @@ export const Chat = ({chatId}) => {
 
   return <>
     <SplitPane
+      className={className}
       messageRef={messageRef}
       topElement={<>
         {users.map(user => (
@@ -104,7 +108,7 @@ export const Chat = ({chatId}) => {
     />
     <form className="flex-none mb-2" onSubmit={onSendMessage}>
       <input
-        className="w-full px-1 py-2 border border-gray-500 bg-stone-800 text-stone-100 focus:outline-none"
+        className="w-full px-1 py-1 border border-gray-500 bg-stone-800 text-stone-100 focus:outline-none"
         type="text"
         name="message"
       />
@@ -123,12 +127,13 @@ function isLastChildVisible(container) {
   return lastChildTop < containerBottom
 }
 
-function SplitPane({messageRef, topElement, bottomElement}) {
+function SplitPane({className, messageRef, topElement, bottomElement}) {
   let [dragOffset, setDragOffset] = useState(Number.NaN)
   let [splitPos, setSplitPos] = useState(200)
   let splitPosRef = useRef()
   splitPosRef.current = splitPos
   let containerRef = useRef()
+
   useEffect(() => {
     let onMouseMove = (e) => {
       if (Number.isNaN(dragOffset)) {
@@ -166,48 +171,58 @@ function SplitPane({messageRef, topElement, bottomElement}) {
         containerRef.current = ref
       }}
       className={twJoin(
-        "grow border-t border-x border-gray-500 bg-gray-900 flex flex-col overflow-y-hidden",
+        "grow flex flex-col gap-y-2 overflow-y-hidden",
         !Number.isNaN(dragOffset) && "cursor-row-resize",
+        className,
       )}>
       <div
         style={{height: topElementHeight + "px"}}
-        className="px-1 pt-1 pb-2 flex-none overflow-y-scroll">
+        className="p-1 bg-gray-900 border border-gray-500 flex-none overflow-y-scroll">
         {topElement}
       </div>
       <SplitBar
         container={containerRef.current}
         splitPos={splitPos}
         dragOffset={dragOffset}
         onMouseDown={onMouseDown} />
-      <div ref={messageRef} className="px-1 pt-3 pb-1 overflow-y-scroll">
+      <div ref={messageRef} className="p-1 bg-gray-900 border-t border-x border-gray-500 h-full overflow-y-scroll">
         {bottomElement}
       </div>
     </div>
   )
 }
 
 function SplitBar({splitPos, dragOffset, onMouseDown, container}) {
+  let dragging = useViewStateStore(state => state.dragging)
   if (!container) {
     return <div />
   }
   let innerHeight = Math.trunc(getRemInPixel() * 0.5)
   let rect = container.getBoundingClientRect()
-  let parentRect = container.parentNode.getBoundingClientRect()
-  let width = rect.width
+  let parentRect = container.offsetParent.getBoundingClientRect()
+  let width = dragging ? 2 * rect.width : rect.width
   let left = rect.left - parentRect.left
+  let lineClass = twJoin(
+    "absolute h-[1px] z-20 cursor-row-resize",
+    "bg-transparent",
+  )
+  let barClass = twJoin(
+    "absolute z-20 cursor-row-resize",
+    "bg-transparent",
+  )
   return <>
     <div
       onMouseDown={Number.isNaN(dragOffset) ? onMouseDown : undefined}
-      style={{top: Math.trunc(splitPos - 1), height: 1, width: width, left: left}}
-      className="absolute h-[1px] bg-gray-500 z-20 cursor-row-resize" />
+      style={{top: Math.trunc(splitPos), height: 1, width: width, left: left}}
+      className={lineClass} />
     <div
       onMouseDown={Number.isNaN(dragOffset) ? onMouseDown : undefined}
-      style={{top: Math.trunc(splitPos), height: innerHeight, width: width, left: left}}
-      className="absolute bg-slate-800 z-20 cursor-row-resize" />
+      style={{top: Math.trunc(splitPos + 1), height: innerHeight, width: width, left: left}}
+      className={barClass} />
     <div
       onMouseDown={Number.isNaN(dragOffset) ? onMouseDown : undefined}
-      style={{top: Math.trunc(splitPos + innerHeight), height: 1, width: width, left: left}}
-      className="absolute h-[1px] bg-gray-500 z-20 cursor-row-resize" />
+      style={{top: Math.trunc(splitPos + innerHeight + 1), height: 1, width: width, left: left}}
+      className={lineClass} />
   </>
 }
 

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

@@ -1,7 +1,6 @@
 import {
   useRef,
   useEffect,
-  useState,
   useCallback,
 } from "react"
 import {
@@ -18,28 +17,19 @@ export const SideBar = ({page, children}) => {
   let setDragging = useViewStateStore(state => state.setDragging)
   let sidebarWidth = useLayoutStore(state => state.sidebarWidth[page])
   let setSidebarWidth = useLayoutStore(state => state.setSidebarWidth)
-  let [ghostWidth, setGhostWidth] = useState(sidebarWidth)
   let draggingRef = useRef()
   let ghostWidthRef = useRef()
   draggingRef.current = dragging
-  ghostWidthRef.current = ghostWidth
+  ghostWidthRef.current = sidebarWidth
   useEffect(() => {
     let mousemove = (e) => {
       if (!draggingRef.current) {
         return
       }
       let width = sanitizeSidebarWidth(vw() - e.clientX)
-      setGhostWidth(width)
-    }
-    let mouseup = () => {
-      if (!draggingRef.current) {
-        return
-      }
-      let width = sanitizeSidebarWidth(ghostWidthRef.current)
-      setSidebarWidth(page, Math.trunc(width))
-      setGhostWidth(Math.trunc(width))
-      setDragging(false)
+      setSidebarWidth(page, width)
     }
+    let mouseup = () => setDragging(false)
     window.document.addEventListener("mousemove", mousemove)
     window.document.addEventListener("mouseup", mouseup)
     return () => {
@@ -61,7 +51,7 @@ export const SideBar = ({page, children}) => {
         className="fixed top-0 w-[3px] h-full bg-slate-700 z-10 cursor-col-resize" />
       {dragging && (
         <div
-          style={{right: ghostWidth + "px"}}
+          style={{right: sidebarWidth + "px"}}
           className="fixed top-0 w-[3px] h-full bg-slate-600 z-20" />
       )}
       {children}

src/main/client/src/feature/game/GamePanel.jsx

@@ -176,7 +176,7 @@ function Panel() {
           {(result.w > result.b ? "W+" : "B+") + Math.abs(result.b - result.w)}
         </div>
       )}
-      <Chat chatId={gameId}/>
+      <Chat className="mt-1" chatId={gameId}/>
     </>
   )
 }

src/main/client/src/feature/lobby/LobbyPanel.jsx

@@ -38,6 +38,6 @@ function Panel() {
     return undefined
   }, [auth])
   return <>
-    <Chat chatId="Lobby"/>
+    <Chat chatId="Lobby" />
   </>
 }

src/main/client/src/layout.js

@@ -9,10 +9,9 @@ import {
 } from "zustand/middleware"
 import {
   getRemInPixel,
+  DELTA,
 } from "src/util.js"
 
-const TINY = 0.0001220703125
-
 export const useViewStateStore = create((set, get) => ({
   zoom: 0,
   dragging: false,
@@ -26,7 +25,7 @@ export const useViewStateStore = create((set, get) => ({
       if (Math.trunc(zoom)) {
         state.zoom = zoom
       } else {
-        state.zoom = get().zoom ? 0 : TINY // force re-render
+        state.zoom = get().zoom ? 0 : DELTA // force re-render
       }
     }))
   },

src/main/client/src/util.js

@@ -23,6 +23,9 @@ export const ANY_REMOVED = REMOVED_W | REMOVED_B
 
 export const COLORS = BLACK | WHITE
 
+// some number that is small, yet big enough for adding to typical pixel values like 100 or 1000
+export const DELTA = 0.0001220703125
+
 export async function tfetch(url, options) {
   let response
   try {