@m4l/components 9.2.0 → 9.2.2

package/components/DragResizeWindowRND/helpers/index.d.ts

@@ -0,0 +1,5 @@
+export * from './expandingParentContainer';
+export * from './isElmentInViewport';
+export * from './pointPosition';
+export * from './shrinkingParentContainer';
+export * from './getInitialSize';

package/components/DragResizeWindowRND/helpers/index.js

@@ -0,0 +1 @@
+

package/components/DragResizeWindowRND/helpers/isElmentInViewport.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Determina si un elemento está visible dentro del viewport de un contenedor
+ * @param element - El elemento a verificar
+ * @param container - El contenedor que define el viewport
+ * @param options - Opciones adicionales
+ * @returns Un objeto con información sobre la visibilidad horizontal y vertical
+ */
+export declare const isElementInViewport: (element: HTMLElement, container: HTMLElement, options?: {
+    tolerance: number;
+}) => {
+    isVisibleVertically: boolean;
+    isVisibleHorizontally: boolean;
+    isFullyVisible: boolean;
+    visiblePercentage: number;
+};

package/components/DragResizeWindowRND/helpers/isElmentInViewport.js

@@ -0,0 +1 @@
+

package/components/DragResizeWindowRND/helpers/pointPosition.d.ts

@@ -0,0 +1,36 @@
+import { DraggableWindowBounds } from '../types';
+/**
+ * Verifica si el punto está dentro del rectángulo del contenedor
+ */
+export declare function isPointInsideContainer(e: React.MouseEvent<HTMLElement, MouseEvent>, container?: HTMLElement, bounds?: DraggableWindowBounds): boolean[];
+/**
+ * Resultado extendido que indica la posición del punto respecto al contenedor.
+ */
+export interface PointPosition {
+    isInside: boolean;
+    isLeft: boolean;
+    isRight: boolean;
+    isAbove: boolean;
+    isBelow: boolean;
+}
+/**
+ * Versión extendida que proporciona información detallada sobre la posición.
+ * Esta función se puede usar junto con la original cuando se necesite información adicional.
+ */
+export declare function getDetailedPointPosition(e: React.MouseEvent<HTMLElement, MouseEvent> | React.TouchEvent<HTMLElement>, element?: HTMLElement, bounds?: DraggableWindowBounds): [PointPosition, PointPosition];
+/**
+ * Resultado que indica si el punto está en la franja de arrastre en cada eje
+ */
+export interface DragStripPosition {
+    isInside: boolean;
+    isInStrip: boolean;
+}
+/**
+ * Verifica si un punto está dentro de las franjas de arrastre de un elemento
+ * y devuelve información detallada para los ejes X e Y
+ * @param e - Evento del mouse o touch
+ * @param element - Elemento a verificar
+ * @param stripWidth - Ancho de las franjas de arrastre (en píxeles)
+ * @returns - Tupla con información para el eje X y el eje Y
+ */
+export declare function isPointInDragStrip(e: React.MouseEvent<HTMLElement, MouseEvent> | React.TouchEvent<HTMLElement>, element?: HTMLElement, stripWidth?: number): [DragStripPosition, DragStripPosition];

package/components/DragResizeWindowRND/helpers/pointPosition.js

@@ -0,0 +1 @@
+

package/components/DragResizeWindowRND/helpers/shrinkingParentContainer.d.ts

@@ -0,0 +1,6 @@
+import { CurrentState, DraggableWindowBounds } from '../types';
+/**
+ * "shrinkingParentContainer": Encargada de manejar la contracción de la ventana padre
+ * 1. Si el ancho o alto de la ventana cuando se va compactando toca
+ */
+export declare const shrinkingParentContainer: (newState: CurrentState, cState: CurrentState, containerDimension: number, divRoot: HTMLElement, dimension: "Width" | "Height", allowResizeContainer: boolean | undefined, minWindowWidth: number, minWindowHeight: number, bounds?: DraggableWindowBounds) => void;

package/components/DragResizeWindowRND/helpers/shrinkingParentContainer.js

@@ -0,0 +1,34 @@
+const shrinkingParentContainer = (newState, cState, containerDimension, divRoot, dimension, allowResizeContainer = false, minWindowWidth, minWindowHeight, bounds) => {
+  const lDimension = dimension === "Width" ? "width" : "height";
+  const xOrY = dimension === "Width" ? "x" : "y";
+  const shrinkLeftTopAt = dimension === "Width" ? "shrinkLeftAt" : "shrinkTopAt";
+  const overflowDimensionAt = dimension === "Width" ? "overflowWidthAt" : "overflowHeightAt";
+  const boundsLefTop = dimension === "Width" ? bounds?.left || 0 : bounds?.top || 0;
+  const boundsRightBottom = dimension === "Width" ? bounds?.right || 0 : bounds?.bottom || 0;
+  const minWindowDimension = dimension === "Width" ? minWindowWidth : minWindowHeight;
+  const minDimension = containerDimension - boundsLefTop + boundsRightBottom > minWindowDimension ? containerDimension - boundsLefTop + boundsRightBottom : minWindowDimension;
+  let maxDimensionElement = containerDimension - cState[xOrY] + boundsRightBottom;
+  if (divRoot[`client${dimension}`] > maxDimensionElement && !allowResizeContainer) {
+    const shrunkenPixels = divRoot[`client${dimension}`] - maxDimensionElement;
+    if (shrunkenPixels < cState[xOrY] - boundsLefTop) {
+      newState[xOrY] = newState[xOrY] - shrunkenPixels;
+      newState[shrinkLeftTopAt] = newState[shrinkLeftTopAt] || cState[xOrY];
+    } else if (shrunkenPixels > cState[xOrY] - boundsLefTop) {
+      newState[xOrY] = boundsLefTop;
+      newState[shrinkLeftTopAt] = newState[shrinkLeftTopAt] || cState[xOrY];
+      maxDimensionElement = containerDimension - boundsLefTop + boundsRightBottom;
+      if (divRoot[`client${dimension}`] > maxDimensionElement) {
+        newState[lDimension] = maxDimensionElement;
+        newState[overflowDimensionAt] = newState[overflowDimensionAt] || cState[lDimension];
+        if (newState[lDimension] < minDimension) {
+          newState[lDimension] = minDimension;
+        }
+      }
+    }
+  } else {
+    return;
+  }
+};
+export {
+  shrinkingParentContainer as s
+};

package/components/DragResizeWindowRND/hooks/useRNDDimensionEffects.d.ts

@@ -0,0 +1,23 @@
+import { default as React } from 'react';
+import { CurrentState, StateRef, DraggableWindowBounds } from '../types';
+import { ContainerSize } from '../../../utils/types';
+type useOnDragStartProps = {
+    containerElement?: HTMLElement | null;
+    containerSize: ContainerSize | undefined;
+    bounds?: DraggableWindowBounds;
+    minWindowWidth: number;
+    minWindowHeight: number;
+    stateRef: React.MutableRefObject<StateRef>;
+    wrapperRef: React.RefObject<HTMLElement>;
+    currentState: CurrentState;
+    setCurrentState: React.Dispatch<React.SetStateAction<CurrentState>>;
+    allowHeightResizeContainer?: boolean;
+    allowWidthResizeContainer?: boolean;
+};
+/**
+ * "useDimensionEffects" Redimensiona la ventana si el contenedor padre es desbordado por ella.
+ * Guarda las posiciones de la ventana cuando se encoge el contenedor padre, para recuperarlas cuando se expanda.
+ * @param props
+ */
+export declare const useRNDDimensionEffects: (props: useOnDragStartProps) => void;
+export {};

package/components/DragResizeWindowRND/hooks/useRNDDimensionEffects.js

@@ -0,0 +1,90 @@
+import { useRef, useEffect } from "react";
+import { e as expandingParentContainer } from "../helpers/expandingParentContainer.js";
+import { s as shrinkingParentContainer } from "../helpers/shrinkingParentContainer.js";
+const useRNDDimensionEffects = (props) => {
+  const {
+    containerElement,
+    containerSize,
+    bounds,
+    minWindowWidth,
+    minWindowHeight,
+    stateRef,
+    wrapperRef,
+    setCurrentState,
+    allowHeightResizeContainer,
+    allowWidthResizeContainer
+  } = props;
+  const refPreviousContainerSize = useRef(void 0);
+  useEffect(() => {
+    if (!containerElement) {
+      return;
+    }
+    if (!containerSize) {
+      return;
+    }
+    if (!wrapperRef.current) {
+      return;
+    }
+    if (stateRef.current?.dragging) {
+      return;
+    }
+    if (stateRef.current?.resizing) {
+      return;
+    }
+    if (containerSize.containerHeight === 0 && containerSize.containerWidth === 0) {
+      return;
+    }
+    if (!refPreviousContainerSize.current) {
+      refPreviousContainerSize.current = { ...containerSize };
+    }
+    const newState = { ...stateRef.current };
+    const handleDimension = (dimension, allowResizeContainer = false, previousContainerSize) => {
+      if (stateRef.current?.containerSize && wrapperRef.current) {
+        const containerSizeKey = `container${dimension}`;
+        const containerSizeValue = containerSize[containerSizeKey];
+        const previousContainerSizeValue = previousContainerSize[containerSizeKey];
+        if (containerSizeValue > previousContainerSizeValue) {
+          expandingParentContainer(
+            newState,
+            containerSizeValue,
+            dimension
+          );
+        } else if (containerSizeValue < previousContainerSizeValue) {
+          shrinkingParentContainer(
+            newState,
+            stateRef.current,
+            containerSizeValue,
+            wrapperRef.current,
+            dimension,
+            allowResizeContainer,
+            minWindowWidth,
+            minWindowHeight,
+            bounds
+          );
+        }
+      }
+    };
+    handleDimension("Width", allowWidthResizeContainer, refPreviousContainerSize.current);
+    handleDimension("Height", allowHeightResizeContainer, refPreviousContainerSize.current);
+    if (newState.x !== stateRef.current.x || newState.y !== stateRef.current.y || newState.width !== stateRef.current.width || newState.height !== stateRef.current.height || newState.shrinkLeftAt !== stateRef.current.shrinkLeftAt || newState.shrinkTopAt !== stateRef.current.shrinkTopAt || newState.overflowWidthAt !== stateRef.current.overflowWidthAt || newState.overflowHeightAt !== stateRef.current.overflowHeightAt) {
+      stateRef.current = {
+        ...stateRef.current,
+        ...newState
+      };
+      setCurrentState(newState);
+    }
+    refPreviousContainerSize.current = { ...containerSize };
+  }, [
+    containerElement,
+    wrapperRef.current,
+    bounds?.left,
+    bounds?.top,
+    bounds?.right,
+    bounds?.bottom,
+    containerSize?.containerWidth,
+    containerSize?.containerHeight
+  ]);
+};
+export {
+  useRNDDimensionEffects as u
+};

package/components/DragResizeWindowRND/hooks/useRNDDragOptions.d.ts

@@ -0,0 +1,28 @@
+import { default as React } from 'react';
+import { DraggableData, DraggableEvent } from 'react-draggable';
+import { CurrentState, StateRef } from '../types';
+type useDragOptionsProps = {
+    allowHeightResizeContainer?: boolean;
+    allowWidthResizeContainer?: boolean;
+    containerElement?: HTMLElement;
+    onDragStart?: (e: DraggableEvent, draggableData: DraggableData) => boolean | void;
+    onDrag?: (e: DraggableEvent, draggableData: DraggableData) => boolean | void;
+    onDragStop?: (e: DraggableEvent, draggableData: DraggableData) => boolean | void;
+    transformScale: number;
+    stateRef: React.MutableRefObject<StateRef>;
+    setCurrentState: React.Dispatch<React.SetStateAction<CurrentState>>;
+    autoScroll?: {
+        enabled?: boolean;
+        speed?: number;
+        threshold?: number;
+    };
+};
+/**
+ * "useDragOptions" hook que maneja las opciones de dragging
+ */
+export declare const useDragOptions: (props: useDragOptionsProps) => {
+    localOnDragStart: (e: DraggableEvent, draggableData: DraggableData) => false | undefined;
+    localOnDrag: (e: DraggableEvent, draggableData: DraggableData) => false | undefined;
+    localOnDragStop: import('react-draggable').DraggableEventHandler;
+};
+export {};

package/components/DragResizeWindowRND/hooks/useRNDDragOptions.js

@@ -0,0 +1,220 @@
+import { useCallback } from "react";
+const useDragOptions = (props) => {
+  const {
+    containerElement,
+    onDragStart,
+    onDrag,
+    onDragStop,
+    transformScale,
+    stateRef,
+    setCurrentState,
+    allowHeightResizeContainer,
+    allowWidthResizeContainer
+  } = props;
+  const localOnDragStart = useCallback(
+    (e, draggableData) => {
+      const { node } = draggableData;
+      const newPosition = { y: 0, x: 0, width: 0, height: 0 };
+      if (!containerElement) {
+        return;
+      }
+      if (onDragStart) {
+        if (onDragStart(e, draggableData) === false) {
+          return false;
+        }
+      }
+      const parentRect = containerElement.getBoundingClientRect();
+      const clientRect = node.getBoundingClientRect();
+      const cLeft = clientRect.left / transformScale;
+      const pLeft = parentRect.left / transformScale;
+      const cTop = clientRect.top / transformScale;
+      const pTop = parentRect.top / transformScale;
+      newPosition.x = cLeft - pLeft + containerElement.scrollLeft;
+      newPosition.y = cTop - pTop + containerElement.scrollTop;
+      newPosition.width = stateRef.current.width;
+      newPosition.height = stateRef.current.height;
+      stateRef.current.dragging = newPosition;
+      setCurrentState((prev) => ({
+        ...prev,
+        ...newPosition,
+        shrinkLeftAt: void 0,
+        //Cancelar los flags de memoria de encogimiento del contenedor padre
+        shrinkTopAt: void 0,
+        //Cancelar los flags de memoria de encogimiento del contenedor padre
+        overflowWidthAt: void 0,
+        //Cancelar los flags de memoria de encogimiento del contenedor padre
+        overflowHeightAt: void 0,
+        //Cancelar los flags de memoria de encogimiento del contenedor padre
+        dragging: newPosition
+      }));
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [containerElement, onDragStart, transformScale]
+  );
+  const localOnDrag = useCallback((e, draggableData) => {
+    const { x, y, deltaX, deltaY } = draggableData;
+    if (!stateRef.current.dragging) {
+      return;
+    }
+    if (!containerElement) {
+      return;
+    }
+    if (onDrag) {
+      if (onDrag(e, draggableData) === false) {
+        return false;
+      }
+    }
+    const elementHeight = stateRef.current.height;
+    const elementWidth = stateRef.current.width;
+    const elementBottom = y + elementHeight;
+    const containerScrollTop = containerElement.scrollTop;
+    const containerHeight = containerElement.clientHeight;
+    const containerWidth = containerElement.clientWidth;
+    const containerScrollLeft = containerElement.scrollLeft;
+    const containerVisibleTop = containerScrollTop;
+    const containerVisibleBottom = containerVisibleTop + containerHeight;
+    const containerVisibleLeft = containerElement.scrollLeft;
+    const containerVisibleRight = containerVisibleLeft + containerElement.clientWidth;
+    const scrollThreshold = 15;
+    let newScrollLeft;
+    let newScrollTop;
+    if (deltaY < 0 && y < containerVisibleTop && containerScrollTop > 0) {
+      const scrollNeeded = Math.min(15, Math.min(scrollThreshold, containerScrollTop));
+      newScrollTop = containerElement.scrollTop - scrollNeeded;
+    } else if (deltaY > 0) {
+      if (allowHeightResizeContainer) {
+        if (elementBottom > containerVisibleBottom) {
+          if (elementHeight > containerHeight) {
+            newScrollTop = y;
+          } else {
+            newScrollTop = y + scrollThreshold;
+          }
+        }
+      }
+    }
+    if (deltaX < 0 && x < containerVisibleLeft && containerScrollLeft > 0) {
+      const scrollNeeded = Math.min(15, Math.min(scrollThreshold, containerScrollLeft));
+      newScrollLeft = containerElement.scrollLeft - scrollNeeded;
+    } else if (deltaX > 0) {
+      if (allowWidthResizeContainer) {
+        if (x > containerVisibleRight) {
+          if (elementWidth > containerWidth) {
+            newScrollLeft = x;
+          } else {
+            newScrollLeft = x + scrollThreshold;
+          }
+        }
+      }
+    }
+    if (newScrollLeft !== void 0 || newScrollTop !== void 0) {
+      setTimeout(() => {
+        containerElement.scrollTo({
+          left: newScrollLeft,
+          top: newScrollTop,
+          behavior: "smooth"
+        });
+      }, 10);
+    }
+    stateRef.current.dragging = {
+      ...stateRef.current.dragging,
+      x,
+      y
+    };
+  }, [allowHeightResizeContainer, allowWidthResizeContainer, containerElement, onDrag, stateRef]);
+  const localOnDragStop = useCallback(
+    (e, draggableData) => {
+      if (!stateRef.current.dragging) {
+        return;
+      }
+      if (!containerElement) {
+        return;
+      }
+      const containerWidth = stateRef.current.containerSize?.containerWidth || containerElement.clientWidth;
+      const containerHeight = stateRef.current.containerSize?.containerHeight || containerElement.clientHeight;
+      const elementWidth = stateRef.current.dragging.width;
+      const elementHeight = stateRef.current.dragging.height;
+      const scrollThreshold = 15;
+      const bounds = {
+        left: stateRef.current.bounds?.left || 0,
+        top: stateRef.current.bounds?.top || 0,
+        right: stateRef.current.bounds?.right || 0,
+        bottom: stateRef.current.bounds?.bottom || 0
+      };
+      let finalX = stateRef.current.dragging.x;
+      let finalY = stateRef.current.dragging.y;
+      if (finalX < bounds.left) {
+        finalX = bounds.left;
+      } else if (finalX + stateRef.current.width > containerWidth + bounds.right) {
+        if (!allowWidthResizeContainer) {
+          finalX = containerWidth - elementWidth + bounds.right;
+        }
+      }
+      if (finalY < bounds.top) {
+        finalY = bounds.top;
+      } else if (finalY + elementHeight > containerHeight + bounds.bottom) {
+        if (!allowHeightResizeContainer) {
+          finalY = containerHeight - elementHeight + bounds.bottom;
+        }
+      }
+      let newScrollLeft;
+      let newScrollTop;
+      if (allowWidthResizeContainer) {
+        if (finalX > containerWidth) {
+          if (elementWidth < containerWidth) {
+            newScrollLeft = finalX + scrollThreshold;
+          } else {
+            newScrollLeft = finalX;
+          }
+        }
+      } else {
+        if (containerElement.scrollLeft > 0) {
+          newScrollLeft = 0;
+        }
+      }
+      if (allowHeightResizeContainer) {
+        if (finalY > containerHeight) {
+          if (elementHeight < containerHeight) {
+            newScrollTop = finalY + scrollThreshold;
+          } else {
+            newScrollTop = finalY;
+          }
+        }
+      } else {
+        if (containerElement.scrollTop > 0) {
+          newScrollTop = 0;
+        }
+      }
+      if (newScrollLeft !== void 0 || newScrollTop !== void 0) {
+        setTimeout(() => {
+          containerElement.scrollTo({
+            left: newScrollLeft,
+            top: newScrollTop,
+            behavior: "smooth"
+          });
+        }, 10);
+      }
+      finalX = Math.round(finalX);
+      finalY = Math.round(finalY);
+      stateRef.current = {
+        ...stateRef.current,
+        x: finalX,
+        y: finalY,
+        dragging: void 0
+      };
+      setCurrentState((prev) => ({
+        ...prev,
+        x: finalX,
+        y: finalY,
+        dragging: void 0
+      }));
+      if (onDragStop) {
+        onDragStop(e, draggableData);
+      }
+    },
+    [stateRef, containerElement, setCurrentState, onDragStop, allowWidthResizeContainer, allowHeightResizeContainer]
+  );
+  return { localOnDragStart, localOnDrag, localOnDragStop };
+};
+export {
+  useDragOptions as u
+};

package/components/DragResizeWindowRND/hooks/useRNDReResizeOptions.d.ts

@@ -0,0 +1,45 @@
+import { default as React } from 'react';
+import { CurrentState, StateRef } from '../types';
+import { RndResizeCallback, RndResizeStartCallback } from 'react-rnd';
+type useReResizeOptionsProps = {
+    allowHeightResizeContainer?: boolean;
+    allowWidthResizeContainer?: boolean;
+    containerElement?: HTMLElement;
+    onResizeStart?: RndResizeStartCallback;
+    onResize?: RndResizeCallback;
+    onResizeStop?: RndResizeCallback;
+    stateRef: React.MutableRefObject<StateRef>;
+    setCurrentState: React.Dispatch<React.SetStateAction<CurrentState>>;
+};
+/**
+ * QUe solo se mueva si esta sobre el elemento de drag (Ok)
+ * Cuadra el resize  que no esta funcionando bien con los bounds (Ok)
+ * QUe solo haga resize si el mouse esta sobre el elemento
+ * Que cuaando se este arrando o resize no gener eventos en los layouts (Ok)
+ * Enfocar cuando es replaceMeId
+ *
+ */
+/**
+ * `useResizeOptions` provides a set of handler functions for managing
+ * resizing events (start, resize, and stop) on a component. This hook
+ * centralizes the resize logic and coordinates state updates, including
+ * calculating position changes and applying constraints.
+ * @param props - The options required to configure the resize behavior,
+ * including callbacks, references, and state setters.
+ * @returns An object containing `localOnResize`, `localOnResizeStart`,
+ * and `localOnResizeStop` handlers.
+ * @example
+ * const { localOnResize, localOnResizeStart, localOnResizeStop } = useResizeOptions({
+ *   onResizeStart: handleResizeStart,
+ *   onResize: handleResize,
+ *   onResizeStop: handleResizeStop,
+ *   stateRef,
+ *   setCurrentState,
+ * });
+ */
+export declare const useResizeOptions: (props: useReResizeOptionsProps) => {
+    localOnResize: RndResizeCallback;
+    localOnResizeStart: RndResizeStartCallback;
+    localOnResizeStop: RndResizeCallback;
+};
+export {};