Share app position/dimensions between various hooks that modify it

Author: devklick

src/components/BorderedApp/BorderedApp.tsx

@@ -1,13 +1,12 @@
 import React, { useRef } from "react";
-import useDragToMove from "../../hooks/useDragToMove";
 import useWindowManagerStore from "../../stores/windowManagerStore";
 
 import "./BorderedApp.scss";
-import useDragToResize, { Dimensions } from "../../hooks/useDragToResize";
+import { Dimensions } from "../../hooks/useDragToResize";
 import BorderedAppMenu, {
   BorderedAppMenuItemProps,
 } from "./BorderedAppMenu/BorderedAppMenu";
-import useWindowMinMax from "../../hooks/useWindowMinMax";
+import usePositionableElement from "../../hooks/usePositionableElement";
 
 interface BorderedAppProps {
   title: string;
@@ -45,7 +44,7 @@ function BorderedApp({
   const resizeSERef = useRef<HTMLDivElement>(null);
   const resizeSWRef = useRef<HTMLDivElement>(null);
 
-  useDragToResize({
+  const { clickToMoveRef, maximize, minimize } = usePositionableElement({
     elementRef: appRef,
     resizeERef,
     resizeNRef,
@@ -58,12 +57,6 @@ function BorderedApp({
     minDimensions,
   });
 
-  const [clickRef] = useDragToMove({
-    moveRef: appRef,
-  });
-
-  const { minimize, maximize } = useWindowMinMax(appRef);
-
   function onClickClose() {
     winMan.closeWindow(type, id);
   }
@@ -83,7 +76,7 @@ function BorderedApp({
       <div className="bordered-app__edge-e" ref={resizeERef} />
       <div
         className="bordered-app__title-bar"
-        ref={clickRef}
+        ref={clickToMoveRef}
         onDoubleClick={maximize}
       >
         <div className="bordered-app__window-menus-wrapper">

src/hooks/useDragToMove.ts

@@ -1,10 +1,12 @@
 import React, {
+  MutableRefObject,
   RefCallback,
   useCallback,
   useEffect,
   useRef,
   useState,
 } from "react";
+import { Rect } from "./useDragToResize";
 
 // https://stackoverflow.com/a/39192992/6236042
 
@@ -16,52 +18,28 @@ function hasStyle(value: unknown): value is StyledElement {
   return !!value && typeof value === "object" && "style" in value;
 }
 
-const id = (x: { x: number; y: number }) => x;
-
 interface UseDraggableProps {
-  onDrag?: (x: { x: number; y: number }) => {
-    x: number;
-    y: number;
-  };
   /**
    * A reference to the element that can be used to move the draggable element.
    * If omitted, clicking anywhere on the entire draggable element will
    * allow you to move it.
    */
   moveRef?: React.RefObject<HTMLElement> | null;
+
+  elementRect: MutableRefObject<Partial<Rect>>;
 }
 
 // complex logic should be a hook, not a component
 const useDragToMove = ({
-  onDrag = id,
   moveRef = null,
+  elementRect,
 }: UseDraggableProps): [React.RefCallback<HTMLElement>, boolean] => {
-  // this state doesn't change often, so it's fine
   const [pressed, setPressed] = useState(false);
-
-  // do not store position in useState! even if you useEffect on
-  // it and update `transform` CSS property, React still rerenders
-  // on every state change, and it LAGS
-  const position = useRef<{ x: number; y: number }>({ x: 0, y: 0 });
   const ref = useRef<HTMLElement | null>(null);
 
-  // we've moved the code into the hook, and it would be weird to
-  // return `ref` and `handleMouseDown` to be set on the same element
-  // why not just do the job on our own here and use a function-ref
-  // to subscribe to `mousedown` too? it would go like this:
   const unsubscribe = useRef<VoidFunction>();
   const legacyRef: RefCallback<HTMLElement> = useCallback(
     (elem) => {
-      // in a production version of this code I'd use a
-      // `useComposeRef` hook to compose function-ref and object-ref
-      // into one ref, and then would return it. combining
-      // hooks in this way by hand is error-prone
-
-      // then I'd also split out the rest of this function into a
-      // separate hook to be called like this:
-      // const legacyRef = useDomEvent('mousedown');
-      // const combinedRef = useCombinedRef(ref, legacyRef);
-      // return [combinedRef, pressed];
       ref.current = elem;
       if (unsubscribe.current) {
         unsubscribe.current;
@@ -85,37 +63,26 @@ const useDragToMove = ({
   );
 
   useEffect(() => {
-    // why subscribe in a `useEffect`? because we want to subscribe
-    // to mousemove only when pressed, otherwise it will lag even
-    // when you're not dragging
     if (!pressed) {
       return;
     }
 
-    // updating the page without any throttling is a bad idea
-    // requestAnimationFrame-based throttle would probably be fine,
-    // but be aware that naive implementation might make element
-    // lag 1 frame behind cursor, and it will appear to be lagging
-    // even at 60 FPS
     const handleMouseMove = throttle(
       (event: { movementX: number; movementY: number }) => {
-        // needed for TypeScript anyway
-        if (!ref.current || !position.current) {
+        if (!ref.current || !elementRect.current) {
           return;
         }
-        const pos = position.current;
-        // it's important to save it into variable here,
-        // otherwise we might capture reference to an element
-        // that was long gone. not really sure what's correct
-        // behavior for a case when you've been scrolling, and
-        // the target element was replaced. probably some formulae
-        // needed to handle that case. TODO
+
+        elementRect.current.left =
+          (elementRect.current.left ?? 0) + event.movementX;
+
+        elementRect.current.top =
+          (elementRect.current.top ?? 0) + event.movementY;
+
         const elem = moveRef?.current ?? ref.current;
-        position.current = onDrag({
-          x: pos.x + event.movementX,
-          y: pos.y + event.movementY,
-        });
-        elem.style.transform = `translate(${position.current.x}px, ${position.current.y}px)`;
+
+        elem.style.left = `${elementRect.current.left}px`;
+        elem.style.top = `${elementRect.current.top}px`;
       }
     );
     const handleMouseUp = (e: MouseEvent) => {
@@ -138,7 +105,7 @@ const useDragToMove = ({
     // if `onDrag` wasn't defined with `useCallback`, we'd have to
     // resubscribe to 2 DOM events here, not to say it would mess
     // with `throttle` and reset its internal timer
-  }, [pressed, onDrag, moveRef]);
+  }, [pressed, moveRef, elementRect]);
 
   // actually it makes sense to return an array only when
   // you expect that on the caller side all of the fields

src/hooks/useDragToResize.ts

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from "react";
+import { MutableRefObject, useEffect } from "react";
 
 // reference: https://stackoverflow.com/questions/62436814/react-drag-corner-of-element-to-resize-contents
 
@@ -25,6 +25,7 @@ type MouseMovementHandler = (
 
 interface UseDragToResizeProps {
   elementRef: React.RefObject<HTMLElement>;
+  elementRect: MutableRefObject<Partial<Rect>>;
   minDimensions: Dimensions;
   resizeNRef?: React.RefObject<HTMLElement> | null;
   resizeNERef?: React.RefObject<HTMLElement> | null;
@@ -47,28 +48,8 @@ function useDragToResize({
   resizeSERef,
   resizeSWRef,
   minDimensions,
+  elementRect,
 }: UseDragToResizeProps): void {
-  const elementRect = useRef<Partial<Rect>>({
-    width: undefined,
-    height: undefined,
-    left: undefined,
-    top: undefined,
-  });
-
-  // Since we dont know the size that the element should initialize to,
-  // we need to grab the sizes from the element rect
-  useEffect(() => {
-    if (elementRef.current) {
-      const rect = elementRef.current?.getBoundingClientRect();
-      elementRect.current = {
-        height: rect.height,
-        width: rect.width,
-        left: rect.left,
-        top: rect.top,
-      };
-    }
-  }, [elementRef]);
-
   useEffect(() => {
     /**
      * Whenever a mousedown event happens on any of the resize refs,

src/hooks/usePositionableElement.ts

@@ -0,0 +1,101 @@
+import { useEffect, useRef } from "react";
+import useDragToResize, { Dimensions, Rect } from "./useDragToResize";
+import useDragToMove from "./useDragToMove";
+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;
+}
+
+/**
+ * Allows an element to be moved and resized.
+ *
+ * Essentially wraps around a bunch of other hooks,
+ * holding the elements position in a single shared ref.
+ */
+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
+  // time we need to make a change to the position/dimensions.
+  const elementRect = useRef<Partial<Rect>>({
+    width: undefined,
+    height: undefined,
+    left: undefined,
+    top: undefined,
+  });
+
+  // Since we dont know the size that the element should initialize to,
+  // we need to grab the sizes from the element rect
+  useEffect(() => {
+    if (elementRef.current) {
+      const rect = elementRef.current?.getBoundingClientRect();
+      elementRect.current = {
+        height: rect.height,
+        width: rect.width,
+        left: rect.left,
+        top: rect.top,
+      };
+    }
+  }, [elementRef]);
+
+  // The resize hook allows the app to be resized
+  // 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({
+    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({
+    moveRef: elementRef,
+    elementRect,
+  });
+
+  // Allows the the element to be minimized or maximized.
+  // Again, it needs to know the elementRect for the same reason mentioned above.
+  const { maximize, minimize } = useWindowMinMax({
+    windowRef: elementRef,
+    windowRect: elementRect,
+  });
+
+  return {
+    clickToMoveRef,
+    minimize,
+    maximize,
+  };
+}
+
+export default usePositionableElement;

src/hooks/useWindowMinMax.ts

@@ -1,21 +1,32 @@
+import { MutableRefObject } from "react";
 import useWindowManagerStore from "../stores/windowManagerStore";
+import { Rect } from "./useDragToResize";
 
 function toPx(value: number) {
   return `${value}px`;
 }
-function useWindowMinMax(windowRef: React.RefObject<HTMLElement>) {
+
+interface UseWindowMinMaxProps {
+  windowRef: React.RefObject<HTMLElement>;
+  windowRect: MutableRefObject<Partial<Rect>>;
+}
+function useWindowMinMax({ windowRect, windowRef }: UseWindowMinMaxProps) {
   const winMan = useWindowManagerStore();
 
   function maximize() {
     const boundary = winMan.contentRef.current?.getBoundingClientRect();
     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;
+
     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.transform = "";
   }
 
   function minimize() {