fix sidebar resize

Author: h908714124

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

@@ -11,14 +11,18 @@ import {
 import {
   useAuthStore,
 } from "src/store.js"
+import {
+  useLayoutStore,
+} from "src/layout.js"
 import {
   StompContext,
   tfetch,
   doTry,
   getRemInPixel,
+  DELTA,
 } from "src/util.js"
 
-export const Chat = ({chatId}) => {
+export const Chat = ({page, chatId, className}) => {
   let [messages, setMessages] = useState([])
   let [users, setUsers] = useState([])
   let messageRef = useRef()
@@ -90,6 +94,8 @@ export const Chat = ({chatId}) => {
 
   return <>
     <SplitPane
+      className={className}
+      page={page}
       messageRef={messageRef}
       topElement={<>
         {users.map(user => (
@@ -123,12 +129,20 @@ function isLastChildVisible(container) {
   return lastChildTop < containerBottom
 }
 
-function SplitPane({messageRef, topElement, bottomElement}) {
+function SplitPane({className, page, messageRef, topElement, bottomElement}) {
+  let sidebarWidth = useLayoutStore(state => state.sidebarWidth[page])
   let [dragOffset, setDragOffset] = useState(Number.NaN)
   let [splitPos, setSplitPos] = useState(200)
   let splitPosRef = useRef()
   splitPosRef.current = splitPos
   let containerRef = useRef()
+
+  useEffect(() => {
+    let splitPos = splitPosRef.current
+    setSplitPos(Math.trunc(splitPos) % 2 ? splitPos + DELTA : splitPos - DELTA)
+    return undefined
+  }, [sidebarWidth])
+
   useEffect(() => {
     let onMouseMove = (e) => {
       if (Number.isNaN(dragOffset)) {
@@ -168,6 +182,7 @@ function SplitPane({messageRef, topElement, bottomElement}) {
       className={twJoin(
         "grow border-t border-x border-gray-500 bg-gray-900 flex flex-col overflow-y-hidden",
         !Number.isNaN(dragOffset) && "cursor-row-resize",
+        className,
       )}>
       <div
         style={{height: topElementHeight + "px"}}
@@ -192,7 +207,7 @@ function SplitBar({splitPos, dragOffset, onMouseDown, container}) {
   }
   let innerHeight = Math.trunc(getRemInPixel() * 0.5)
   let rect = container.getBoundingClientRect()
-  let parentRect = container.parentNode.getBoundingClientRect()
+  let parentRect = container.offsetParent.getBoundingClientRect()
   let width = rect.width
   let left = rect.left - parentRect.left
   return <>

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" page="game" chatId={gameId}/>
     </>
   )
 }

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

@@ -38,6 +38,6 @@ function Panel() {
     return undefined
   }, [auth])
   return <>
-    <Chat chatId="Lobby"/>
+    <Chat page="lobby" 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 {