cleanup bordered app

Author: devklick

src/components/BorderedApp/BorderedApp.tsx

@@ -1,13 +1,12 @@
 import React, { useRef } from "react";
 import useWindowManagerStore from "../../stores/windowManagerStore";
-
-import "./BorderedApp.scss";
 import { Dimensions } from "../../hooks/useDragToResize";
 import BorderedAppMenu, {
   BorderedAppMenuItemProps,
 } from "./BorderedAppMenu/BorderedAppMenu";
 import usePositionableElement from "../../hooks/usePositionableElement";
 
+import "./BorderedApp.scss";
 interface BorderedAppProps {
   title: string;
   type: string;
@@ -32,28 +31,20 @@ function BorderedApp({
   // Need a ref to point to the app for moving it around the screen
   const appRef = useRef<HTMLDivElement>(null);
 
-  // Need a ref for each of the cardinal (n,e,s,w)
-  // and ordinal (ne, se, sw, nw) directions. These represent
-  // the edges and corners of the app and are used for resizing it
-  const resizeNRef = useRef<HTMLDivElement>(null);
-  const resizeERef = useRef<HTMLDivElement>(null);
-  const resizeSRef = useRef<HTMLDivElement>(null);
-  const resizeWRef = useRef<HTMLDivElement>(null);
-  const resizeNERef = useRef<HTMLDivElement>(null);
-  const resizeNWRef = useRef<HTMLDivElement>(null);
-  const resizeSERef = useRef<HTMLDivElement>(null);
-  const resizeSWRef = useRef<HTMLDivElement>(null);
-
-  const { clickToMoveRef, maximize, minimize } = usePositionableElement({
+  const {
+    resizeHandleN,
+    resizeHandleNE,
+    resizeHandleE,
+    resizeHandleSE,
+    resizeHandleS,
+    resizeHandleSW,
+    resizeHandleW,
+    resizeHandleNW,
+    moveHandle,
+    maximize,
+    minimize,
+  } = usePositionableElement({
     elementRef: appRef,
-    resizeERef,
-    resizeNRef,
-    resizeSRef,
-    resizeWRef,
-    resizeNERef,
-    resizeNWRef,
-    resizeSERef,
-    resizeSWRef,
     minDimensions,
   });
 
@@ -70,13 +61,13 @@ function BorderedApp({
         height: initialDimensions.height,
       }}
     >
-      <div className="bordered-app__corner-nw" ref={resizeNWRef} />
-      <div className="bordered-app__edge-n" ref={resizeNRef} />
-      <div className="bordered-app__corner-ne" ref={resizeNERef} />
-      <div className="bordered-app__edge-e" ref={resizeERef} />
+      <div className="bordered-app__corner-nw" ref={resizeHandleNW} />
+      <div className="bordered-app__edge-n" ref={resizeHandleN} />
+      <div className="bordered-app__corner-ne" ref={resizeHandleNE} />
+      <div className="bordered-app__edge-e" ref={resizeHandleE} />
       <div
         className="bordered-app__title-bar"
-        ref={clickToMoveRef}
+        ref={moveHandle}
         onDoubleClick={maximize}
       >
         <div className="bordered-app__window-menus-wrapper">
@@ -111,10 +102,10 @@ function BorderedApp({
         </div>
       </div>
       <div className="bordered-app__content">{children}</div>
-      <div className="bordered-app__corner-sw" ref={resizeSWRef} />
-      <div className="bordered-app__edge-s" ref={resizeSRef} />
-      <div className="bordered-app__corner-se" ref={resizeSERef} />
-      <div className="bordered-app__edge-w" ref={resizeWRef} />
+      <div className="bordered-app__corner-sw" ref={resizeHandleSW} />
+      <div className="bordered-app__edge-s" ref={resizeHandleS} />
+      <div className="bordered-app__corner-se" ref={resizeHandleSE} />
+      <div className="bordered-app__edge-w" ref={resizeHandleW} />
     </div>
   );
 }

src/hooks/useDragToMove.ts

@@ -30,15 +30,12 @@ interface UseDraggableProps {
 }
 
 // complex logic should be a hook, not a component
-const useDragToMove = ({
-  moveRef = null,
-  elementRect,
-}: UseDraggableProps): [React.RefCallback<HTMLElement>, boolean] => {
+const useDragToMove = ({ moveRef = null, elementRect }: UseDraggableProps) => {
   const [pressed, setPressed] = useState(false);
   const ref = useRef<HTMLElement | null>(null);
 
   const unsubscribe = useRef<VoidFunction>();
-  const legacyRef: RefCallback<HTMLElement> = useCallback(
+  const moveHandle: RefCallback<HTMLElement> = useCallback(
     (elem) => {
       ref.current = elem;
       if (unsubscribe.current) {
@@ -110,7 +107,7 @@ const useDragToMove = ({
   // actually it makes sense to return an array only when
   // you expect that on the caller side all of the fields
   // will be usually renamed
-  return [legacyRef, pressed];
+  return { moveHandle, pressed };
 
   // > seems the best of them all to me
   // this code doesn't look pretty anymore, huh?

src/hooks/useDragToResize.ts

@@ -1,4 +1,4 @@
-import { MutableRefObject, useEffect } from "react";
+import { MutableRefObject, useEffect, useRef } from "react";
 
 // reference: https://stackoverflow.com/questions/62436814/react-drag-corner-of-element-to-resize-contents
 
@@ -27,29 +27,22 @@ interface UseDragToResizeProps {
   elementRef: React.RefObject<HTMLElement>;
   elementRect: MutableRefObject<Partial<Rect>>;
   minDimensions: Dimensions;
-  resizeNRef?: React.RefObject<HTMLElement> | null;
-  resizeNERef?: React.RefObject<HTMLElement> | null;
-  resizeERef?: React.RefObject<HTMLElement> | null;
-  resizeSERef?: React.RefObject<HTMLElement> | null;
-  resizeSRef?: React.RefObject<HTMLElement> | null;
-  resizeSWRef?: React.RefObject<HTMLElement> | null;
-  resizeWRef?: React.RefObject<HTMLElement> | null;
-  resizeNWRef?: React.RefObject<HTMLElement> | null;
 }
 
 function useDragToResize({
   elementRef,
-  resizeERef,
-  resizeNRef,
-  resizeSRef,
-  resizeWRef,
-  resizeNERef,
-  resizeNWRef,
-  resizeSERef,
-  resizeSWRef,
   minDimensions,
   elementRect,
-}: UseDragToResizeProps): void {
+}: UseDragToResizeProps) {
+  const resizeHandleN = useRef<HTMLDivElement>(null);
+  const resizeHandleNE = useRef<HTMLDivElement>(null);
+  const resizeHandleE = useRef<HTMLDivElement>(null);
+  const resizeHandleSE = useRef<HTMLDivElement>(null);
+  const resizeHandleS = useRef<HTMLDivElement>(null);
+  const resizeHandleSW = useRef<HTMLDivElement>(null);
+  const resizeHandleW = useRef<HTMLDivElement>(null);
+  const resizeHandleNW = useRef<HTMLDivElement>(null);
+
   useEffect(() => {
     /**
      * Whenever a mousedown event happens on any of the resize refs,
@@ -222,25 +215,25 @@ function useDragToResize({
     //#endregion
 
     //#region add/remove handlers
-    resizeERef?.current?.addEventListener("mousedown", handleMouseDownE);
-    resizeNRef?.current?.addEventListener("mousedown", handleMouseDownN);
-    resizeSRef?.current?.addEventListener("mousedown", handleMouseDownS);
-    resizeWRef?.current?.addEventListener("mousedown", handleMouseDownW);
-
-    resizeNERef?.current?.addEventListener("mousedown", handleMouseDownNE);
-    resizeSERef?.current?.addEventListener("mousedown", handleMouseDownSE);
-    resizeSWRef?.current?.addEventListener("mousedown", handleMouseDownSW);
-    resizeNWRef?.current?.addEventListener("mousedown", handleMouseDownNW);
-
-    const _resizeERef = resizeERef;
-    const _resizeNRef = resizeNRef;
-    const _resizeSRef = resizeSRef;
-    const _resizeWRef = resizeWRef;
-
-    const _resizeNERef = resizeNERef;
-    const _resizeSERef = resizeSERef;
-    const _resizeSWRef = resizeSWRef;
-    const _resizeNWRef = resizeNWRef;
+    resizeHandleE?.current?.addEventListener("mousedown", handleMouseDownE);
+    resizeHandleN?.current?.addEventListener("mousedown", handleMouseDownN);
+    resizeHandleS?.current?.addEventListener("mousedown", handleMouseDownS);
+    resizeHandleW?.current?.addEventListener("mousedown", handleMouseDownW);
+
+    resizeHandleNE?.current?.addEventListener("mousedown", handleMouseDownNE);
+    resizeHandleSE?.current?.addEventListener("mousedown", handleMouseDownSE);
+    resizeHandleSW?.current?.addEventListener("mousedown", handleMouseDownSW);
+    resizeHandleNW?.current?.addEventListener("mousedown", handleMouseDownNW);
+
+    const _resizeERef = resizeHandleE;
+    const _resizeNRef = resizeHandleN;
+    const _resizeSRef = resizeHandleS;
+    const _resizeWRef = resizeHandleW;
+
+    const _resizeNERef = resizeHandleNE;
+    const _resizeSERef = resizeHandleSE;
+    const _resizeSWRef = resizeHandleSW;
+    const _resizeNWRef = resizeHandleNW;
 
     return () => {
       _resizeERef?.current?.removeEventListener("mousedown", handleMouseDownE);
@@ -266,6 +259,17 @@ function useDragToResize({
     };
     //#endregion
   });
+
+  return {
+    resizeHandleN: resizeHandleN,
+    resizeHandleNE: resizeHandleNE,
+    resizeHandleE: resizeHandleE,
+    resizeHandleSE: resizeHandleSE,
+    resizeHandleS: resizeHandleS,
+    resizeHandleSW: resizeHandleSW,
+    resizeHandleW: resizeHandleW,
+    resizeHandleNW: resizeHandleNW,
+  };
 }
 
 export default useDragToResize;

src/hooks/usePositionableElement.ts

@@ -6,14 +6,6 @@ import useWindowMinMax from "./useWindowMinMax";
 interface UsePositionableElementProps {
   elementRef: React.RefObject<HTMLElement>;
   minDimensions: Dimensions;
-  resizeNRef?: React.RefObject<HTMLElement> | null;
-  resizeNERef?: React.RefObject<HTMLElement> | null;
-  resizeERef?: React.RefObject<HTMLElement> | null;
-  resizeSERef?: React.RefObject<HTMLElement> | null;
-  resizeSRef?: React.RefObject<HTMLElement> | null;
-  resizeSWRef?: React.RefObject<HTMLElement> | null;
-  resizeWRef?: React.RefObject<HTMLElement> | null;
-  resizeNWRef?: React.RefObject<HTMLElement> | null;
 }
 
 /**
@@ -25,14 +17,6 @@ interface UsePositionableElementProps {
 function usePositionableElement({
   elementRef,
   minDimensions,
-  resizeNRef,
-  resizeNERef,
-  resizeERef,
-  resizeSERef,
-  resizeSRef,
-  resizeSWRef,
-  resizeWRef,
-  resizeNWRef,
 }: UsePositionableElementProps) {
   // Hold a single ref for the elements rect,
   // so we dont have to call getBoundingClientRect every
@@ -62,24 +46,16 @@ function usePositionableElement({
   // by dragging the corners or edges of the element.
   // It needs to know the elementRect, so any changes
   // it makes can be shared with the other hooks.
-  useDragToResize({
+  const resizeHandles = useDragToResize({
     elementRef,
     elementRect,
     minDimensions,
-    resizeNRef,
-    resizeNERef,
-    resizeERef,
-    resizeSERef,
-    resizeSRef,
-    resizeSWRef,
-    resizeWRef,
-    resizeNWRef,
   });
 
   // The move hook allows the app to be moved when
   // the element that has the clickToMoveRef is clicked and dragged.
   // Again, it needs to know the elementRect for the same reason mentioned above.
-  const [clickToMoveRef] = useDragToMove({
+  const { moveHandle } = useDragToMove({
     moveRef: elementRef,
     elementRect,
   });
@@ -92,9 +68,10 @@ function usePositionableElement({
   });
 
   return {
-    clickToMoveRef,
+    moveHandle,
     minimize,
     maximize,
+    ...resizeHandles,
   };
 }
 

src/stores/windowManagerStore.ts

@@ -2,6 +2,7 @@ import React, { ReactNode, createRef } from "react";
 import { create } from "zustand";
 
 interface WindowManagerStoreState {
+  contentRef: React.RefObject<HTMLDivElement>;
   /**
    * A map of all windows.
    * The key is the type of window, and the value is another map.
@@ -12,16 +13,15 @@ interface WindowManagerStoreState {
   getWindows: () => Array<ReactNode>;
   addWindow: (windowType: string, windowId: string, window: ReactNode) => void;
   closeWindow: (windowType: string, windowId: string) => void;
-  contentRef: React.RefObject<HTMLDivElement>;
 }
 const useWindowManagerStore = create<WindowManagerStoreState>()((set, get) => ({
+  contentRef: createRef<HTMLDivElement>(),
   windowsMap: new Map(),
   getWindows() {
     return Array.from(get().windowsMap.values()).flatMap((map) =>
       Array.from(map.values())
     );
   },
-  contentRef: createRef<HTMLDivElement>(),
   addWindow(windowType, windowId, window) {
     const windowsMap = get().windowsMap;
     const windowsOfType = windowsMap.get(windowType);