Init app windows in centre of screen

Author: devklick

src/components/BorderedApp/BorderedApp.tsx

@@ -2,7 +2,7 @@ import React, { useRef } from "react";
 import useWindowManagerStore, {
   BaseProps,
 } from "../../stores/windowManagerStore";
-import { Dimensions } from "../../hooks/useDragToResize";
+import { Dimensions, Position } from "../../hooks/useDragToResize";
 import BorderedAppMenu from "./BorderedAppMenu/BorderedAppMenu";
 import usePositionableElement from "../../hooks/usePositionableElement";
 import useSystemSettings from "../../stores/systemSettingsStore";
@@ -27,6 +27,7 @@ interface BorderedAppProps extends BaseProps {
   type: string;
   id: string;
   initialDimensions: Dimensions;
+  initialPosition: Position;
   maxDimensions?: Dimensions;
   minDimensions?: Dimensions;
   menus?: Array<MenuItemProps>;
@@ -38,6 +39,7 @@ function BorderedApp({
   id,
   children,
   initialDimensions,
+  initialPosition,
   minDimensions = { height: 350, width: 350 },
   menus,
   zIndex,
@@ -64,6 +66,7 @@ function BorderedApp({
   } = usePositionableElement({
     elementRef: appRef,
     minDimensions,
+    initialPosition,
     windowType: type,
     windowId: id,
   });
@@ -78,6 +81,7 @@ function BorderedApp({
       ref={appRef}
       onMouseDown={() => winMan.focusWindow(type, id)}
       initialDimensions={initialDimensions}
+      initialPosition={initialPosition}
       zIndex={zIndex}
       backgroundColor={settings.mainColor}
       display={hidden === true ? "none" : "grid"}

src/components/BorderedApp/styles.ts

@@ -1,8 +1,9 @@
 import styled from "@emotion/styled";
-import { Dimensions } from "../../hooks/useDragToResize";
+import { Dimensions, Position } from "../../hooks/useDragToResize";
 
 interface StyledBorderedAppProps {
   initialDimensions: Dimensions;
+  initialPosition: Position;
   zIndex: number | undefined;
   backgroundColor: string;
   display: "none" | "grid";
@@ -25,6 +26,8 @@ export const StyledBorderedApp = styled.div<StyledBorderedAppProps>`
   z-index: ${(props) => props.zIndex};
   background-color: ${(props) => props.backgroundColor};
   display: ${(props) => props.display};
+  left: ${(props) => props.initialPosition.x}px;
+  top: ${(props) => props.initialPosition.y}px;
 `;
 export const StyledCorner = styled.div<{
   location: "ne" | "se" | "sw" | "nw";

src/components/BottomBar/Launcher/Launcher.tsx

@@ -34,13 +34,27 @@ function Launcher({
 
   function addWindow() {
     const id = windowId ?? uuid();
+    const boundingRect = winMan.contentRef.current?.getBoundingClientRect();
+    function getInitialPosition(axis: "x" | "y"): number {
+      if (!boundingRect) return 0;
+      const dimension = axis === "x" ? "width" : "height";
+      return (
+        (boundingRect[axis] ?? 0) +
+        (boundingRect[dimension] ?? 0) / 2 -
+        initialDimensions[dimension] / 2
+      );
+    }
     winMan.addWindow(windowType, id, {
       component: BorderedApp,
       props: {
         id,
         title: WindowTitle,
         type: windowType,
         initialDimensions,
+        initialPosition: {
+          x: getInitialPosition("x"),
+          y: getInitialPosition("y"),
+        },
         menus,
       },
       key: id,

src/hooks/usePositionableElement.ts

@@ -1,5 +1,5 @@
 import { useEffect, useRef } from "react";
-import useDragToResize, { Dimensions, Rect } from "./useDragToResize";
+import useDragToResize, { Dimensions, Position, Rect } from "./useDragToResize";
 import useDragToMove from "./useDragToMove";
 import useWindowMinMax from "./useWindowMinMax";
 
@@ -8,6 +8,7 @@ interface UsePositionableElementProps {
   minDimensions: Dimensions;
   windowType: string;
   windowId: string;
+  initialPosition: Position;
 }
 
 /**
@@ -21,6 +22,7 @@ function usePositionableElement({
   minDimensions,
   windowType,
   windowId,
+  initialPosition,
 }: UsePositionableElementProps) {
   // Hold a single ref for the elements rect,
   // so we dont have to call getBoundingClientRect every
@@ -40,11 +42,11 @@ function usePositionableElement({
       elementRect.current = {
         height: rect.height,
         width: rect.width,
-        left: rect.left,
-        top: rect.top,
+        left: initialPosition.x,
+        top: initialPosition.y,
       };
     }
-  }, [elementRef]);
+  }, [elementRef, initialPosition.x, initialPosition.y]);
 
   // The resize hook allows the app to be resized
   // by dragging the corners or edges of the element.