Support apps with max size

Author: devklick

src/components/BorderedApp/BorderedApp.tsx

@@ -42,6 +42,7 @@ function BorderedApp({
   initialDimensions,
   initialPosition,
   minDimensions = { height: 350, width: 350 },
+  maxDimensions,
   menus,
   zIndex,
   hidden,
@@ -67,6 +68,7 @@ function BorderedApp({
   } = usePositionableElement({
     elementRef: appRef,
     minDimensions,
+    maxDimensions,
     initialPosition,
     windowType: type,
     windowId: id,

src/components/BottomBar/Launcher/Launcher.tsx

@@ -14,6 +14,8 @@ interface LauncherProps {
   WindowTitle: string;
   windowId?: string;
   initialDimensions: Dimensions;
+  minDimensions?: Dimensions;
+  maxDimensions?: Dimensions;
   menus?: Array<MenuItemProps>;
   appContent: JSX.Element;
   icon: string;
@@ -24,6 +26,8 @@ function Launcher({
   windowId,
   WindowTitle,
   initialDimensions,
+  minDimensions,
+  maxDimensions,
   menus,
   appContent,
   icon,
@@ -51,6 +55,8 @@ function Launcher({
         title: WindowTitle,
         type: windowType,
         initialDimensions,
+        minDimensions,
+        maxDimensions,
         initialPosition: {
           x: getInitialPosition("x"),
           y: getInitialPosition("y"),

src/hooks/useDragToResize.ts

@@ -20,18 +20,20 @@ export interface Position {
 type MouseMovementHandler = (
   initialRect: Partial<Rect>,
   mouseDownPosition: Position,
-  mouseMoveEvent: MouseEvent
+  mouseMoveEvent: MouseEvent,
 ) => number;
 
 interface UseDragToResizeProps {
   elementRef: React.RefObject<HTMLElement>;
   elementRect: MutableRefObject<Partial<Rect>>;
   minDimensions: Dimensions;
+  maxDimensions?: Dimensions;
 }
 
 function useDragToResize({
   elementRef,
   minDimensions,
+  maxDimensions,
   elementRect,
 }: UseDragToResizeProps) {
   const resizeHandleN = useRef<HTMLDivElement>(null);
@@ -86,7 +88,11 @@ function useDragToResize({
         const newLeft =
           leftFn?.(initialRect, startPos, mouseMoveEvent) ?? initialRect.left;
 
-        if (newWidth >= minDimensions.width) {
+        if (
+          newWidth >= minDimensions.width &&
+          (!maxDimensions || newWidth <= maxDimensions.width)
+        ) {
+          console.log("maxwidth", maxDimensions?.width, "new width", newWidth);
           elementRect.current.width = newWidth;
           elementRef.current.style.width = `${elementRect.current.width}px`;
           elementRect.current.left = newLeft;
@@ -101,7 +107,10 @@ function useDragToResize({
         const newTop =
           topFn?.(initialRect, startPos, mouseMoveEvent) ?? initialRect.top;
 
-        if (newHeight >= minDimensions.height) {
+        if (
+          newHeight >= minDimensions.height &&
+          (!maxDimensions || newHeight <= maxDimensions.height)
+        ) {
           elementRect.current.height = newHeight;
           elementRef.current.style.height = `${elementRect.current.height}px`;
           elementRect.current.top = newTop;
@@ -122,37 +131,37 @@ function useDragToResize({
     const nHeightFn: MouseMovementHandler = (
       initialRect,
       mouseDownPosition,
-      mouseMoveEvent
+      mouseMoveEvent,
     ) => (initialRect.height ?? 0) + mouseDownPosition.y - mouseMoveEvent.pageY;
 
     const nTopFn: MouseMovementHandler = (
       initialRect,
       mouseDownPosition,
-      mouseMoveEvent
+      mouseMoveEvent,
     ) => (initialRect.top ?? 0) - mouseDownPosition.y + mouseMoveEvent.pageY;
 
     const eWidthFn: MouseMovementHandler = (
       initialRect,
       mouseDownPosition,
-      mouseMoveEvent
+      mouseMoveEvent,
     ) => (initialRect.width ?? 0) - mouseDownPosition.x + mouseMoveEvent.pageX;
 
     const sHeightFn: MouseMovementHandler = (
       initialRect,
       mouseDownPosition,
-      mouseMoveEvent
+      mouseMoveEvent,
     ) => (initialRect.height ?? 0) - mouseDownPosition.y + mouseMoveEvent.pageY;
 
     const wWidthFn: MouseMovementHandler = (
       initialRect,
       mouseDownPosition,
-      mouseMoveEvent
+      mouseMoveEvent,
     ) => (initialRect.width ?? 0) + mouseDownPosition.x - mouseMoveEvent.pageX;
 
     const wLeftFn: MouseMovementHandler = (
       initialRect,
       mouseDownPosition,
-      mouseMoveEvent
+      mouseMoveEvent,
     ) => (initialRect.left ?? 0) - mouseDownPosition.x + mouseMoveEvent.pageX;
     //#endregion
 
@@ -242,19 +251,19 @@ function useDragToResize({
       _resizeWRef?.current?.removeEventListener("mousedown", handleMouseDownW);
       _resizeNERef?.current?.removeEventListener(
         "mousedown",
-        handleMouseDownNE
+        handleMouseDownNE,
       );
       _resizeSERef?.current?.removeEventListener(
         "mousedown",
-        handleMouseDownSE
+        handleMouseDownSE,
       );
       _resizeSWRef?.current?.removeEventListener(
         "mousedown",
-        handleMouseDownSW
+        handleMouseDownSW,
       );
       _resizeNWRef?.current?.removeEventListener(
         "mousedown",
-        handleMouseDownNW
+        handleMouseDownNW,
       );
     };
     //#endregion

src/hooks/usePositionableElement.ts

@@ -6,6 +6,7 @@ import useWindowMinMax from "./useWindowMinMax";
 interface UsePositionableElementProps {
   elementRef: React.RefObject<HTMLElement>;
   minDimensions: Dimensions;
+  maxDimensions?: Dimensions;
   windowType: string;
   windowId: string;
   initialPosition: Position;
@@ -20,6 +21,7 @@ interface UsePositionableElementProps {
 function usePositionableElement({
   elementRef,
   minDimensions,
+  maxDimensions,
   windowType,
   windowId,
   initialPosition,
@@ -56,6 +58,7 @@ function usePositionableElement({
     elementRef,
     elementRect,
     minDimensions,
+    maxDimensions,
   });
 
   // The move hook allows the app to be moved when
@@ -71,6 +74,7 @@ function usePositionableElement({
   const { maximize, minimize } = useWindowMinMax({
     windowRef: elementRef,
     windowRect: elementRect,
+    maxDimensions,
     windowType,
     windowId,
   });

src/hooks/useWindowMinMax.ts

@@ -1,6 +1,6 @@
 import { MutableRefObject, useEffect, useRef } from "react";
 import useWindowManagerStore from "../stores/windowManagerStore";
-import { Rect } from "./useDragToResize";
+import { Dimensions, Rect } from "./useDragToResize";
 
 function toPx(value: number) {
   return `${value}px`;
@@ -9,6 +9,7 @@ function toPx(value: number) {
 interface UseWindowMinMaxProps {
   windowRef: React.RefObject<HTMLElement>;
   windowRect: MutableRefObject<Partial<Rect>>;
+  maxDimensions?: Dimensions;
   windowType: string;
   windowId: string;
 }
@@ -17,6 +18,7 @@ function useWindowMinMax({
   windowRef,
   windowId,
   windowType,
+  maxDimensions,
 }: UseWindowMinMaxProps) {
   const winMan = useWindowManagerStore();
   const oldTransition = useRef<string>("");
@@ -28,15 +30,26 @@ function useWindowMinMax({
     const window = windowRef.current;
     if (!boundary || !window) return;
 
-    windowRect.current.top = boundary.y;
-    windowRect.current.left = boundary.x;
-    windowRect.current.width = boundary.width;
-    windowRect.current.height = boundary.height;
+    // If the window/app being maximised has max dimensions set (present via maxDimensions prop)
+    // then we'll leave it's anchor (top/left) in the current position and just
+    // increase the width and height to the max allowed values
+    if (maxDimensions) {
+      windowRect.current.width = maxDimensions.width;
+      windowRect.current.height = maxDimensions.height;
+      window.style.width = toPx(maxDimensions.width);
+      window.style.height = toPx(maxDimensions.height);
+    } else {
+      // For windows/apps that do not have a max set, we max them to fill the main content area
+      windowRect.current.top = boundary.y;
+      windowRect.current.left = boundary.x;
+      windowRect.current.width = boundary.width;
+      windowRect.current.height = boundary.height;
 
-    window.style.top = toPx(boundary.y);
-    window.style.left = toPx(boundary.x);
-    window.style.width = toPx(boundary.width);
-    window.style.height = toPx(boundary.height);
+      window.style.top = toPx(boundary.y);
+      window.style.left = toPx(boundary.x);
+      window.style.width = toPx(boundary.width);
+      window.style.height = toPx(boundary.height);
+    }
   }
 
   function minimize() {
@@ -47,6 +60,8 @@ function useWindowMinMax({
     oldTransform.current = window.style.transform;
     oldOpacity.current = window.style.opacity;
 
+    // TODO: this is a crap animation and could deffo be improved.
+    // Consider using gsap, motion etc to do something a little nicer.
     window.style.transition = "all 0.2s linear";
     window.style.opacity = "0";
     window.style.transform = "scale(0.2) translate(0, 500%)";

src/programs/Calculator/CalculatorLauncher/CalculatorLauncher.tsx

@@ -11,11 +11,14 @@ function CalculatorLauncher({}: CalculatorLauncherProps) {
     <Launcher
       windowType={windowType}
       WindowTitle="Calculator"
+      // TODO: Consider supoprting an `allowResize` prop, instead of having to repeat the initial dimensions for both min and max
       initialDimensions={{ height: 400, width: 400 }}
+      maxDimensions={{ height: 400, width: 400 }}
+      minDimensions={{ height: 400, width: 400 }}
       icon=""
       menus={[]}
       appContent={<Calculator />}
-    ></Launcher>
+    />
   );
 }