fix window init position

TouK · Sep 13, 2024 · 53e07ac · 53e07ac
1 parent 6e2f052
commit 53e07ac
Showing 1 changed file with 39 additions and 7 deletions.
diff --git a/src/components/window/WindowFrame.tsx b/src/components/window/WindowFrame.tsx
@@ -1,4 +1,5 @@
 import { css, cx } from "@emotion/css";
+import { isEqual } from "lodash";
 import { mapValues } from "lodash/fp";
 import React, { forwardRef, PropsWithChildren, RefObject, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import FocusLock from "react-focus-lock";
@@ -113,7 +114,6 @@ export const WindowFrame = forwardRef((props: PropsWithChildren<WindowFrameProps
     };
   });
   const prevSize = usePreviousImmediate(size);
-  const wasMaximized = usePreviousDifferent(maximized);
 
   const { focusWrapperTheme, windowTheme, windowMargin } = useFrameTheme();
   const dragging = useRef(false);
@@ -123,7 +123,7 @@ export const WindowFrame = forwardRef((props: PropsWithChildren<WindowFrameProps
 
   const forceCenterWindow = useCallback(
     (initialPosition: Coords) => {
-      if (ref.current && !wasMaximized) {
+      if (ref.current) {
         const randomize = mapValues<Coords, number>((v: number) => Math.max(0, v + random(randomizePosition)));
         const { height, width } = ref.current.getBoundingClientRect();
         const x = (viewport.width - width) / 2;
@@ -132,13 +132,13 @@ export const WindowFrame = forwardRef((props: PropsWithChildren<WindowFrameProps
 
         setPosition(
           roundCoords({
-            x: initialPosition.x ?? calcCoord(center.x, center.x + width, width, viewport.width, windowMargin),
-            y: initialPosition.y ?? calcCoord(center.y, center.y + height, height, viewport.height, windowMargin),
+            x: initialPosition.x ?? center.x,
+            y: initialPosition.y ?? center.y,
           }),
         );
       }
     },
-    [randomizePosition, viewport.height, viewport.width, wasMaximized, windowMargin],
+    [randomizePosition, viewport.height, viewport.width],
   );
 
   const onContentChanged = useCallback(() => {
@@ -154,6 +154,23 @@ export const WindowFrame = forwardRef((props: PropsWithChildren<WindowFrameProps
 
   const contentAvailable = useContentVisibility(ref, onContentChanged);
 
+  const isInit = useRef(false);
+
+  const wasMaximized = usePreviousDifferent(maximized);
+
+  // setup position correction for screen edges
+  const calcEdgePosition = useCallback(
+    (viewport, box: Box = ref.current.getBoundingClientRect()) => {
+      const width = size?.width || box?.width || 0;
+      const height = size?.height || box?.height || 0;
+      return roundCoords({
+        x: calcCoord(box.x, box.x + box.width, width, viewport.width, windowMargin),
+        y: calcCoord(box.y, box.y + box.height, height, viewport.height, windowMargin),
+      });
+    },
+    [size, windowMargin],
+  );
+
   const savePosition = useCallback((position: Position) => !maximized && setPosition(roundCoords(position)), [maximized]);
 
   const [side, setSide] = useState<Side>(Side.none);
@@ -238,7 +255,7 @@ export const WindowFrame = forwardRef((props: PropsWithChildren<WindowFrameProps
   const maxSize = useMemo(
     () => ({
       width: `calc(100% - ${position?.x <= windowMargin ? windowMargin * 2 : position?.x || 0}px)`,
-      height: viewport.height - (position?.y <= windowMargin ? windowMargin * 2 : position?.y + windowMargin || 0),
+      height: viewport.height - (position?.y <= windowMargin ? windowMargin * 2 : position?.y || 0),
     }),
     [windowMargin, position, viewport.height],
   );
@@ -264,6 +281,21 @@ export const WindowFrame = forwardRef((props: PropsWithChildren<WindowFrameProps
 
   const currentMinHeight = useMemo(() => normalizeMinSize(minHeight, viewport.height), [normalizeMinSize, viewport.height, minHeight]);
 
+  const adjustedPosition = useMemo(() => {
+    if (!isInit && contentAvailable && position && !(maximized || wasMaximized)) {
+      const newValue = calcEdgePosition(viewport);
+
+      if (isEqual(newValue, position)) {
+        return position;
+      }
+
+      return newValue;
+    }
+
+    isInit.current = true;
+    return position;
+  }, [calcEdgePosition, contentAvailable, maximized, position, viewport, wasMaximized]);
+
   useScrollFix(ref.current);
 
   return (
@@ -278,7 +310,7 @@ export const WindowFrame = forwardRef((props: PropsWithChildren<WindowFrameProps
             style={{ display: "flex", zIndex }} // override default inline-block
             bounds="#windowsViewport"
             size={size}
-            position={maximized ? { x: 0, y: 0 } : position}
+            position={maximized ? { x: 0, y: 0 } : adjustedPosition}
             minWidth={currentMinWidth}
             minHeight={currentMinHeight}
             maxHeight={maxSize.height}