Added resize hook

components/system/Window/index.tsx

@@ -1,20 +1,31 @@
 import type { ProcessComponentProps } from 'components/system/Processes/RenderProcess';
 import Titlebar from 'components/system/Window/Titlebar';
 import { useProcesses } from 'contexts/process';
+import useResizable from 'hooks/useResizeable';
+import { Rnd } from 'react-rnd';
 import StyledWindow from 'styles/components/system/Window/StyledWindow';
+import rndDefaults from 'utils/rndDefaults';
 
 const Window: React.FC<ProcessComponentProps> = ({ children, id }) => {
   const {
     processes: {
-      [id]: { minimized }
+      [id]: { maximized, minimized }
     }
   } = useProcesses();
+  const { height, width, updateSize } = useResizable(maximized);
 
   return (
-    <StyledWindow minimized={minimized}>
+    <Rnd
-      <Titlebar id={id} />
+      enableResizing={!maximized}
-      {children}
+      size={{ height, width }}
-    </StyledWindow>
+      onResizeStop={updateSize}
+      {...rndDefaults}
+    >
+      <StyledWindow minimized={minimized}>
+        <Titlebar id={id} />
+        {children}
+      </StyledWindow>
+    </Rnd>
   );
 };
 

hooks/useResizeable.ts

@@ -0,0 +1,36 @@
+import { useCallback, useState } from 'react';
+import type { RndResizeCallback } from 'react-rnd';
+
+type Size = {
+  height: string;
+  width: string;
+};
+
+type Resizable = Size & {
+  updateSize: RndResizeCallback;
+};
+
+const defaultWindowSize = {
+  height: '200px',
+  width: '250px'
+};
+
+const useResizable = (maximized = false): Resizable => {
+  const [{ height, width }, setSize] = useState<Size>(defaultWindowSize);
+  const updateSize = useCallback<RndResizeCallback>(
+    (
+      _event,
+      _direction,
+      { style: { height: elementHeight, width: elementWidth } }
+    ) => setSize({ height: elementHeight, width: elementWidth }),
+    []
+  );
+
+  return {
+    height: maximized ? '100%' : height, // TODO: Subtract taskbar height
+    width: maximized ? '100%' : width,
+    updateSize
+  };
+};
+
+export default useResizable;

package-lock.json

@@ -13,6 +13,7 @@
         "next": "^10.0.8",
         "react": "^17.0.1",
         "react-dom": "^17.0.1",
+        "react-rnd": "^10.2.4",
         "styled-components": "^5.2.1",
         "three": "0.124.0",
         "vanta": "^0.5.21"
@@ -24,6 +25,7 @@
         "@types/jest": "^26.0.20",
         "@types/node": "^14.14.34",
         "@types/react": "^17.0.3",
+        "@types/react-rnd": "^8.0.0",
         "@types/styled-components": "^5.1.8",
         "@typescript-eslint/eslint-plugin": "^4.17.0",
         "@typescript-eslint/parser": "^4.17.0",
@@ -1478,6 +1480,16 @@
         "csstype": "^3.0.2"
       }
     },
+    "node_modules/@types/react-rnd": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@types/react-rnd/-/react-rnd-8.0.0.tgz",
+      "integrity": "sha512-k/exWCXCY3CDqyJUJeny2SgsfWslWh6XU32/S0YJH6p4E8q2FK89WAPzdG0AECA2k95UC75YKErDRQ/IyvDz6g==",
+      "deprecated": "This is a stub types definition. react-rnd provides its own type definitions, so you do not need this installed.",
+      "dev": true,
+      "dependencies": {
+        "react-rnd": "*"
+      }
+    },
     "node_modules/@types/scheduler": {
       "version": "0.16.1",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.1.tgz",
@@ -5129,6 +5141,11 @@
       "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=",
       "dev": true
     },
+    "node_modules/fast-memoize": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/fast-memoize/-/fast-memoize-2.5.2.tgz",
+      "integrity": "sha512-Ue0LwpDYErFbmNnZSF0UH6eImUwDmogUO1jyE+JbN2gsQz/jICm1Ve7t9QT0rNSsfJt+Hs4/S3GnsDVjL4HVrw=="
+    },
     "node_modules/fastest-levenshtein": {
       "version": "1.0.12",
       "resolved": "https://registry.npmjs.org/fastest-levenshtein/-/fastest-levenshtein-1.0.12.tgz",
@@ -10284,6 +10301,18 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/re-resizable": {
+      "version": "6.9.0",
+      "resolved": "https://registry.npmjs.org/re-resizable/-/re-resizable-6.9.0.tgz",
+      "integrity": "sha512-3cUDG81ylyqI0Pdgle/RHwwRYq0ORZzsUaySOCO8IbEtNyaRtrIHYm/jMQ5pjcNiKCxR3vsSymIQZHwJq4gg2Q==",
+      "dependencies": {
+        "fast-memoize": "^2.5.1"
+      },
+      "peerDependencies": {
+        "react": "^16.13.1 || ^17.0.0",
+        "react-dom": "^16.13.1 || ^17.0.0"
+      }
+    },
     "node_modules/react": {
       "version": "17.0.1",
       "resolved": "https://registry.npmjs.org/react/-/react-17.0.1.tgz",
@@ -10309,6 +10338,15 @@
         "react": "17.0.1"
       }
     },
+    "node_modules/react-draggable": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/react-draggable/-/react-draggable-4.4.3.tgz",
+      "integrity": "sha512-jV4TE59MBuWm7gb6Ns3Q1mxX8Azffb7oTtDtBgFkxRvhDp38YAARmRplrj0+XGkhOJB5XziArX+4HUUABtyZ0w==",
+      "dependencies": {
+        "classnames": "^2.2.5",
+        "prop-types": "^15.6.0"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.1.tgz",
@@ -10322,6 +10360,21 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-rnd": {
+      "version": "10.2.4",
+      "resolved": "https://registry.npmjs.org/react-rnd/-/react-rnd-10.2.4.tgz",
+      "integrity": "sha512-wseACIsxa1wuZz9XatO3/JAZR748Sddehh0NtJz1Yj3X5BQm5pwRShiadfnWrUajJATurHbN0NVTUn+jEkHkPw==",
+      "dependencies": {
+        "re-resizable": "6.9.0",
+        "react-draggable": "4.4.3",
+        "tslib": "2.0.3"
+      }
+    },
+    "node_modules/react-rnd/node_modules/tslib": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz",
+      "integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ=="
+    },
     "node_modules/read-pkg": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-2.0.0.tgz",
@@ -15055,6 +15108,15 @@
         "csstype": "^3.0.2"
       }
     },
+    "@types/react-rnd": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@types/react-rnd/-/react-rnd-8.0.0.tgz",
+      "integrity": "sha512-k/exWCXCY3CDqyJUJeny2SgsfWslWh6XU32/S0YJH6p4E8q2FK89WAPzdG0AECA2k95UC75YKErDRQ/IyvDz6g==",
+      "dev": true,
+      "requires": {
+        "react-rnd": "*"
+      }
+    },
     "@types/scheduler": {
       "version": "0.16.1",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.1.tgz",
@@ -17884,6 +17946,11 @@
       "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=",
       "dev": true
     },
+    "fast-memoize": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/fast-memoize/-/fast-memoize-2.5.2.tgz",
+      "integrity": "sha512-Ue0LwpDYErFbmNnZSF0UH6eImUwDmogUO1jyE+JbN2gsQz/jICm1Ve7t9QT0rNSsfJt+Hs4/S3GnsDVjL4HVrw=="
+    },
     "fastest-levenshtein": {
       "version": "1.0.12",
       "resolved": "https://registry.npmjs.org/fastest-levenshtein/-/fastest-levenshtein-1.0.12.tgz",
@@ -21823,6 +21890,14 @@
         "unpipe": "1.0.0"
       }
     },
+    "re-resizable": {
+      "version": "6.9.0",
+      "resolved": "https://registry.npmjs.org/re-resizable/-/re-resizable-6.9.0.tgz",
+      "integrity": "sha512-3cUDG81ylyqI0Pdgle/RHwwRYq0ORZzsUaySOCO8IbEtNyaRtrIHYm/jMQ5pjcNiKCxR3vsSymIQZHwJq4gg2Q==",
+      "requires": {
+        "fast-memoize": "^2.5.1"
+      }
+    },
     "react": {
       "version": "17.0.1",
       "resolved": "https://registry.npmjs.org/react/-/react-17.0.1.tgz",
@@ -21842,6 +21917,15 @@
         "scheduler": "^0.20.1"
       }
     },
+    "react-draggable": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/react-draggable/-/react-draggable-4.4.3.tgz",
+      "integrity": "sha512-jV4TE59MBuWm7gb6Ns3Q1mxX8Azffb7oTtDtBgFkxRvhDp38YAARmRplrj0+XGkhOJB5XziArX+4HUUABtyZ0w==",
+      "requires": {
+        "classnames": "^2.2.5",
+        "prop-types": "^15.6.0"
+      }
+    },
     "react-is": {
       "version": "17.0.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.1.tgz",
@@ -21852,6 +21936,23 @@
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
       "integrity": "sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg=="
     },
+    "react-rnd": {
+      "version": "10.2.4",
+      "resolved": "https://registry.npmjs.org/react-rnd/-/react-rnd-10.2.4.tgz",
+      "integrity": "sha512-wseACIsxa1wuZz9XatO3/JAZR748Sddehh0NtJz1Yj3X5BQm5pwRShiadfnWrUajJATurHbN0NVTUn+jEkHkPw==",
+      "requires": {
+        "re-resizable": "6.9.0",
+        "react-draggable": "4.4.3",
+        "tslib": "2.0.3"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz",
+          "integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ=="
+        }
+      }
+    },
     "read-pkg": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-2.0.0.tgz",

package.json

@@ -35,6 +35,7 @@
     "next": "^10.0.8",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-rnd": "^10.2.4",
     "styled-components": "^5.2.1",
     "three": "0.124.0",
     "vanta": "^0.5.21"
@@ -46,6 +47,7 @@
     "@types/jest": "^26.0.20",
     "@types/node": "^14.14.34",
     "@types/react": "^17.0.3",
+    "@types/react-rnd": "^8.0.0",
     "@types/styled-components": "^5.1.8",
     "@typescript-eslint/eslint-plugin": "^4.17.0",
     "@typescript-eslint/parser": "^4.17.0",

utils/rndDefaults.ts

@@ -0,0 +1,55 @@
+const rndDefaults = {
+  enableUserSelectHack: false,
+  resizeHandleStyles: {
+    bottom: {
+      bottom: '-3px',
+      cursor: 'ns-resize',
+      height: '6px'
+    },
+    bottomLeft: {
+      bottom: '-3px',
+      cursor: 'nesw-resize',
+      height: '12px',
+      left: '-3px',
+      width: '12px'
+    },
+    bottomRight: {
+      bottom: '-3px',
+      cursor: 'nwse-resize',
+      height: '12px',
+      right: '-3px',
+      width: '12px'
+    },
+    left: {
+      cursor: 'ew-resize',
+      left: '-3px',
+      width: '6px'
+    },
+    right: {
+      cursor: 'ew-resize',
+      right: '-3px',
+      width: '6px'
+    },
+    top: {
+      cursor: 'ns-resize',
+      height: '6px',
+      top: '-3px'
+    },
+    topLeft: {
+      cursor: 'nwse-resize',
+      height: '12px',
+      left: '-3px',
+      top: '-3px',
+      width: '12px'
+    },
+    topRight: {
+      cursor: 'nesw-resize',
+      height: '12px',
+      right: '-3px',
+      top: '-3px',
+      width: '12px'
+    }
+  }
+};
+
+export default rndDefaults;