@m4l/components 0.2.14 → 0.2.16

package/components/DragResizeWindow/index.b5206081.js

@@ -0,0 +1,445 @@
+import React__default, { useState, useRef, useCallback, useEffect, useMemo } from "react";
+import { D as DraggableCore_1 } from "../../react-draggable.312ab17d.js";
+import clsx from "clsx";
+import { styled } from "@mui/material/styles";
+import { M as MAP_ZINDEX_OVER_MAP } from "../maps/components/Map/index.b79ceae4.js";
+import { generateUtilityClasses } from "@mui/material";
+import "@mui/base";
+import { M as MAP_ZINDEX_OVER_MAP$1 } from "../PopupsProvider/index.c9400f03.js";
+import { R as Resizable } from "../../react-resizable.f2c58a4c.js";
+import { jsx } from "react/jsx-runtime";
+const DraggeableWindowRoot = styled("div")`
+    position: absolute;
+    left: 0px;
+    top:0px;
+    background-color: gray;
+    z-index: ${MAP_ZINDEX_OVER_MAP};
+    prop2:2;
+
+
+    ${(props) => props.theme.components?.M4LDragResizeWindow?.styleOverrides}
+`;
+const COMPONENT_CLASS_NAME = "M4LDraggableWindow";
+const DEFAULT_TRANSFORM_SCALE = 1;
+const draggableWindowClasses = generateUtilityClasses(COMPONENT_CLASS_NAME, [
+  "root",
+  "draggableHandle",
+  "dragging"
+]);
+function setTransform({ top, left, width, height }) {
+  const translate = `translate(${left}px,${top}px)`;
+  return {
+    transform: translate,
+    WebkitTransform: translate,
+    MozTransform: translate,
+    msTransform: translate,
+    OTransform: translate,
+    width: `${width}px`,
+    height: `${height}px`,
+    position: "absolute",
+    prop1: 1
+  };
+}
+const DragResizeWindow = (props) => {
+  const {
+    style,
+    className,
+    children,
+    defaultPosition = {
+      left: 50,
+      top: 50,
+      width: 100,
+      height: 100
+    },
+    containerElement,
+    containerSize,
+    transformScale = DEFAULT_TRANSFORM_SCALE,
+    bounds,
+    minWindowWidth = 200,
+    minWindowHeight = 100,
+    draggableHandle = `.${draggableWindowClasses.draggableHandle}`,
+    draggableCancel,
+    draggable = true,
+    onDragStart,
+    onDrag,
+    onDragStop,
+    onMouseDown,
+    resizeable = true,
+    resizeHandles = ["se", "nw"],
+    resizeHandle,
+    onResizeStart,
+    onResize,
+    onResizeStop,
+    ...others
+  } = props;
+  const [currentState, setCurrentState] = useState({
+    ...defaultPosition
+  });
+  const stateRef = useRef({
+    bounds,
+    data: void 0,
+    dragging: void 0,
+    containerSize: containerSize ? {
+      ...containerSize
+    } : void 0,
+    ...defaultPosition
+  });
+  const elementRef = useRef(null);
+  const localOnDragStart = useCallback((e, draggableData) => {
+    const {
+      node
+    } = draggableData;
+    const newPosition = {
+      top: 0,
+      left: 0
+    };
+    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.left = cLeft - pLeft + containerElement.scrollLeft;
+    newPosition.top = cTop - pTop + containerElement.scrollTop;
+    if (onDragStart) {
+      if (onDragStart(e, draggableData) === false) {
+        return false;
+      }
+    }
+    stateRef.current.dragging = newPosition;
+    setCurrentState((prev) => ({
+      ...prev,
+      ...newPosition,
+      shrinkLeftAt: void 0,
+      shrinkTopAt: void 0,
+      overflowWidthAt: void 0,
+      overflowHeightAt: void 0,
+      dragging: newPosition
+    }));
+  }, []);
+  const localOnDrag = useCallback((e, draggableData) => {
+    const {
+      deltaX,
+      deltaY
+    } = draggableData;
+    if (!stateRef.current.dragging) {
+      return;
+    }
+    if (onDrag) {
+      if (onDrag(e, draggableData) === false) {
+        return false;
+      }
+    }
+    let top = stateRef.current.dragging.top + deltaY;
+    let left = stateRef.current.dragging.left + deltaX;
+    const newPosition = {
+      top,
+      left
+    };
+    stateRef.current.dragging = newPosition;
+    setCurrentState((prev) => ({
+      ...prev,
+      ...newPosition,
+      dragging: newPosition
+    }));
+  }, []);
+  const localOnDragStop = useCallback((e, draggableData) => {
+    if (!stateRef.current.dragging) {
+      return;
+    }
+    const {
+      left,
+      top
+    } = stateRef.current.dragging;
+    if (onDragStop) {
+      if (onDragStop(e, draggableData) === false) {
+        return false;
+      }
+    }
+    const newPosition = {
+      top,
+      left
+    };
+    stateRef.current.dragging = void 0;
+    setCurrentState((prev) => ({
+      ...prev,
+      ...newPosition,
+      dragging: void 0
+    }));
+  }, []);
+  const onResizeHandler = useCallback((e, data, handlerName) => {
+    const {
+      size,
+      handle
+    } = data;
+    const handler = props[handlerName];
+    if (handler) {
+      handler(e, data);
+    }
+    if (handlerName === "onResizeStart") {
+      stateRef.current.initialPostion = {
+        left: stateRef.current.left,
+        top: stateRef.current.top,
+        width: stateRef.current.width,
+        height: stateRef.current.height
+      };
+    }
+    const resizing = handlerName === "onResizeStop" ? void 0 : {
+      ...size,
+      handle
+    };
+    setCurrentState((prev) => ({
+      ...prev,
+      ...size,
+      ...handlerName === "onResizeStart" ? {
+        shrinkLeftAt: void 0,
+        shrinkTopAt: void 0,
+        overflowWidthAt: void 0,
+        overflowHeightAt: void 0
+      } : {},
+      resizing
+    }));
+    stateRef.current.resizing = resizing;
+  }, []);
+  const localOnResizeStart = useCallback((e, callbackData) => {
+    onResizeHandler(e, callbackData, "onResizeStart");
+  }, []);
+  const localOnResize = useCallback((e, callbackData) => {
+    onResizeHandler(e, callbackData, "onResize");
+  }, []);
+  const localOnResizeStop = useCallback((e, callbackData) => {
+    onResizeHandler(e, callbackData, "onResizeStop");
+  }, []);
+  const shringkingFunction = useCallback((newState, cState, containerElement2, divRoot, dimension) => {
+    const lDimension = dimension === "Width" ? "width" : "height";
+    const leftTop = dimension === "Width" ? "left" : "top";
+    const shrinkLeftTopAt = dimension === "Width" ? "shrinkLeftAt" : "shrinkTopAt";
+    const overflowDimensionAt = dimension === "Width" ? "overflowWidthAt" : "overflowHeightAt";
+    const boundsLefTop = dimension === "Width" ? bounds?.left || 0 : bounds?.top || 0;
+    const boundsRigthBottom = dimension === "Width" ? bounds?.right || 0 : bounds?.bottom || 0;
+    const minWindowDimension = dimension === "Width" ? minWindowWidth : minWindowHeight;
+    const minDimension = containerElement2[`client${dimension}`] - boundsLefTop + boundsRigthBottom > minWindowDimension ? containerElement2[`client${dimension}`] - boundsLefTop + boundsRigthBottom : minWindowDimension;
+    let maxDimensionElement = containerElement2[`client${dimension}`] - cState[leftTop] + boundsRigthBottom;
+    if (divRoot[`client${dimension}`] > maxDimensionElement) {
+      const shrinkedPixels = divRoot[`client${dimension}`] - maxDimensionElement;
+      if (shrinkedPixels < cState[leftTop] - boundsLefTop) {
+        newState[leftTop] = newState[leftTop] - shrinkedPixels;
+        newState[shrinkLeftTopAt] = newState[shrinkLeftTopAt] || cState[leftTop];
+      } else if (shrinkedPixels > cState[leftTop] - boundsLefTop) {
+        newState[leftTop] = boundsLefTop;
+        newState[shrinkLeftTopAt] = newState[shrinkLeftTopAt] || cState[leftTop];
+        maxDimensionElement = containerElement2[`client${dimension}`] - boundsLefTop + boundsRigthBottom;
+        if (divRoot[`client${dimension}`] > maxDimensionElement) {
+          newState[lDimension] = maxDimensionElement;
+          newState[overflowDimensionAt] = newState[overflowDimensionAt] || cState[lDimension];
+          if (newState[lDimension] < minDimension) {
+            newState[lDimension] = minDimension;
+          }
+        }
+      }
+    } else {
+      return;
+    }
+  }, []);
+  const expandingFunction = useCallback((newState, _currentState, containerElement2, _divRoot, dimension) => {
+    const lDimension = dimension === "Width" ? "width" : "height";
+    const leftTop = dimension === "Width" ? "left" : "top";
+    const shrinkLeftTopAt = dimension === "Width" ? "shrinkLeftAt" : "shrinkTopAt";
+    const overflowDimensionAt = dimension === "Width" ? "overflowWidthAt" : "overflowHeightAt";
+    const boundsLefTop = dimension === "Width" ? bounds?.left || 0 : bounds?.top || 0;
+    const boundsRigthBottom = dimension === "Width" ? bounds?.right || 0 : bounds?.bottom || 0;
+    let maxDimensionElement = containerElement2.clientWidth - boundsLefTop + boundsRigthBottom;
+    const valOverflowDimensionAt = newState[overflowDimensionAt];
+    if (valOverflowDimensionAt) {
+      if (valOverflowDimensionAt > maxDimensionElement) {
+        newState[lDimension] = maxDimensionElement;
+      } else {
+        newState[lDimension] = valOverflowDimensionAt;
+        newState[overflowDimensionAt] = void 0;
+      }
+    }
+    const valShrinkLeftTopAt = newState[shrinkLeftTopAt];
+    if (valShrinkLeftTopAt && !newState[overflowDimensionAt]) {
+      const dimensionAvailable = containerElement2[`client${dimension}`] - boundsLefTop - newState[lDimension] + boundsRigthBottom;
+      if (valShrinkLeftTopAt <= dimensionAvailable) {
+        newState[leftTop] = valShrinkLeftTopAt;
+        newState[shrinkLeftTopAt] = void 0;
+      } else {
+        newState[leftTop] = dimensionAvailable;
+      }
+    }
+  }, []);
+  const equalsFunction = useCallback((newState, _currentState, containerElement2, divRoot, dimension) => {
+    const lDimension = dimension === "Width" ? "width" : "height";
+    const leftTop = dimension === "Width" ? "left" : "top";
+    const boundsLefTop = dimension === "Width" ? bounds?.left || 0 : bounds?.top || 0;
+    const boundsRigthBottom = dimension === "Width" ? bounds?.right || 0 : bounds?.bottom || 0;
+    const maxDimensionWithoutBounds = containerElement2[`client${dimension}`] - boundsLefTop + boundsRigthBottom;
+    let rightBottomBoundary = containerElement2[`client${dimension}`] - newState[lDimension] + boundsRigthBottom;
+    if (newState[lDimension] !== divRoot[`client${dimension}`])
+      ;
+    if (newState.resizing && stateRef.current.initialPostion) {
+      if (!newState.resizing.handle.includes("w")) {
+        if (newState[leftTop] + newState[lDimension] > containerElement2[`client${dimension}`] + boundsRigthBottom) {
+          newState[lDimension] = containerElement2[`client${dimension}`] - newState[leftTop] + boundsRigthBottom;
+        }
+      } else {
+        if (newState[leftTop] < boundsLefTop) {
+          newState[leftTop] = boundsLefTop;
+        } else {
+          const dif = newState[lDimension] - stateRef.current.initialPostion[lDimension];
+          if (dif > 0) {
+            if (newState[leftTop] - dif >= boundsLefTop) {
+              newState[lDimension] = stateRef.current.initialPostion[lDimension] + dif;
+              newState[leftTop] = newState[leftTop] - dif;
+              if (newState[leftTop] + newState[lDimension] > maxDimensionWithoutBounds)
+                ;
+            } else {
+              console.log("Ampliando mover leftTop al bound y dejar la ultima dimension", newState[leftTop], "a", newState[lDimension], stateRef.current.initialPostion[lDimension]);
+              newState[leftTop] = boundsLefTop;
+              newState[lDimension] = stateRef.current.initialPostion[lDimension];
+            }
+          } else if (dif < 0) {
+            newState[leftTop] = newState[leftTop] - dif;
+            newState[lDimension] = stateRef.current.initialPostion[lDimension] + dif;
+          }
+        }
+      }
+    }
+    if (newState[lDimension] > maxDimensionWithoutBounds) {
+      newState[lDimension] = maxDimensionWithoutBounds;
+    }
+    if (newState[leftTop] < boundsLefTop) {
+      newState[leftTop] = boundsLefTop;
+    }
+    rightBottomBoundary = containerElement2[`client${dimension}`] + boundsRigthBottom;
+    if (newState[leftTop] > rightBottomBoundary) {
+      newState[leftTop] = rightBottomBoundary;
+    }
+    if (!newState.resizing && newState[leftTop] + newState[lDimension] > containerElement2[`client${dimension}`] + boundsRigthBottom) {
+      let outWidthHeight = newState[leftTop] + newState[lDimension] - (containerElement2[`client${dimension}`] + boundsRigthBottom);
+      if (newState[leftTop] - boundsLefTop > outWidthHeight) {
+        newState[leftTop] = newState[leftTop] - outWidthHeight;
+      }
+    }
+    if (newState.resizing && stateRef.current.initialPostion) {
+      stateRef.current.initialPostion[lDimension] = newState[lDimension];
+      stateRef.current.initialPostion[leftTop] = newState[leftTop];
+    }
+  }, []);
+  useEffect(() => {
+    if (stateRef.current.containerSize === void 0 && containerSize) {
+      stateRef.current.containerSize = containerSize;
+    }
+    if (!(containerSize && elementRef?.current && stateRef.current.containerSize)) {
+      return;
+    }
+    if (currentState?.dragging) {
+      return;
+    }
+    const newState = {
+      ...currentState
+    };
+    let cActionWidth = "equals";
+    let cActionHeigth = "equals";
+    if (containerElement.clientWidth > stateRef.current.containerSize.containerWidth) {
+      cActionWidth = "expanding";
+      expandingFunction(newState, currentState, containerElement, elementRef.current, "Width");
+    } else if (containerElement.clientWidth < stateRef.current.containerSize.containerWidth) {
+      cActionWidth = "shrinking";
+      shringkingFunction(newState, currentState, containerElement, elementRef.current, "Width");
+    }
+    if (containerElement.clientHeight > stateRef.current.containerSize.containerHeight) {
+      cActionHeigth = "expanding";
+      expandingFunction(newState, currentState, containerElement, elementRef.current, "Height");
+    } else if (containerElement.clientHeight < stateRef.current.containerSize.containerHeight) {
+      cActionHeigth = "shrinking";
+      shringkingFunction(newState, currentState, containerElement, elementRef.current, "Height");
+    }
+    if (cActionWidth === "equals") {
+      equalsFunction(newState, currentState, containerElement, elementRef.current, "Width");
+    }
+    if (cActionHeigth === "equals") {
+      equalsFunction(newState, currentState, containerElement, elementRef.current, "Height");
+    }
+    stateRef.current.containerSize = {
+      ...containerSize
+    };
+    if (newState.left !== currentState.left || newState.top !== currentState.top || newState.width !== currentState.width || newState.height !== currentState.height || newState.shrinkLeftAt !== currentState.shrinkLeftAt || newState.shrinkTopAt !== currentState.shrinkTopAt || newState.overflowWidthAt !== currentState.overflowWidthAt || newState.overflowHeightAt !== currentState.overflowHeightAt) {
+      setCurrentState(newState);
+    }
+    if (!newState.resizing) {
+      stateRef.current.left = newState.left;
+      stateRef.current.top = newState.top;
+      stateRef.current.height = newState.height;
+      stateRef.current.width = newState.width;
+    }
+  }, [currentState, elementRef.current, bounds?.left, bounds?.top, bounds?.right, bounds?.bottom, containerSize?.containerWidth, containerSize?.containerHeight]);
+  const mixinResizable = useCallback((child, position) => {
+    const minConstraints = [minWindowWidth, minWindowHeight];
+    return /* @__PURE__ */ jsx(
+      Resizable,
+      {
+        draggableOpts: {
+          disabled: !resizeable
+        },
+        className: resizeable ? void 0 : "react-resizable-hide",
+        width: position.width,
+        height: position.height,
+        minConstraints,
+        onResizeStop: localOnResizeStop,
+        onResizeStart: localOnResizeStart,
+        onResize: localOnResize,
+        transformScale,
+        resizeHandles,
+        handle: resizeHandle,
+        children: child
+      }
+    );
+  }, [resizeable, transformScale]);
+  const mixinDraggable = useCallback((child) => {
+    return /* @__PURE__ */ jsx(
+      DraggableCore_1,
+      {
+        onStart: localOnDragStart,
+        onDrag: localOnDrag,
+        onStop: localOnDragStop,
+        handle: draggableHandle,
+        cancel: ".react-resizable-handle" + (draggableCancel ? "," + draggableCancel : ""),
+        scale: transformScale,
+        nodeRef: elementRef,
+        onMouseDown,
+        ...others,
+        children: child
+      }
+    );
+  }, [elementRef, transformScale, draggableHandle, draggableCancel]);
+  const classNameFinal = clsx(draggableWindowClasses.root, className, {
+    "react-draggable": true
+  });
+  const styleFinal = {
+    ...style,
+    ...setTransform(currentState),
+    zIndex: MAP_ZINDEX_OVER_MAP$1,
+    prop2: 1,
+    backgroundColor: "gray"
+  };
+  const memoChildren = useMemo(() => {
+    return children;
+  }, []);
+  const divChildRoot = /* @__PURE__ */ jsx(DraggeableWindowRoot, {
+    className: classNameFinal,
+    ref: elementRef,
+    style: styleFinal,
+    role: "none",
+    children: memoChildren
+  });
+  const dragResizeWindow = mixinDraggable(mixinResizable(divChildRoot, currentState));
+  return /* @__PURE__ */ jsx(React__default.Fragment, {
+    children: dragResizeWindow
+  });
+};
+export {
+  DragResizeWindow as D,
+  draggableWindowClasses as d
+};

package/components/DragResizeWindow/index.d.ts

@@ -0,0 +1,2 @@
+export { DragResizeWindow } from './DragResizeWindow';
+export { draggableWindowClasses } from './classes/index';

package/components/DragResizeWindow/types.d.ts

@@ -0,0 +1,169 @@
+import { ReactNode } from 'react';
+import { DraggableCoreProps, DraggableData, DraggableEventHandler } from 'react-draggable';
+import { ResizeCallbackData, ResizeHandle } from 'react-resizable';
+import { ContainerSize } from '../../utils/types';
+export declare type CorrectionPosition = {
+    nCorrection: number;
+    x: number;
+    y: number;
+};
+export declare type Position = {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+};
+export interface CurrentState extends Position {
+    /**
+     * "dragging" indica la posición actual cuando se está moviendo el ventana
+     */
+    dragging?: {
+        top: number;
+        left: number;
+    };
+    /**
+     * "resizing" indica el tamaño actual cuando se está redimensionando el ventana
+     */
+    resizing?: {
+        width: number;
+        height: number;
+        handle: ResizeHandle;
+    };
+    /**
+     * Posicion inicial antes de comenzar el dragging o resizing
+     */
+    initialPostion?: Position;
+    /**
+     * "shrinkLeftAt" Indica en que valor estaba el left antes de compactar padre en un resize
+     */
+    shrinkLeftAt?: number;
+    /**
+     * "shrinkTopAt" Indica en que valor estaba el top antes de compactar padre en un resize
+     */
+    shrinkTopAt?: number;
+    /**
+     * "overflowWidthAt" Indica en que valor estaba el width antes de compactar padre en un resize
+     */
+    overflowWidthAt?: number;
+    /**
+     * "overflowHeidhtAt" Indica en que valor estaba el Height antes de compactar padre en un resize
+     */
+    overflowHeightAt?: number;
+}
+export declare type PartialPosition = {
+    left: number;
+    top: number;
+};
+export declare type DraggableWindowBounds = {
+    left?: number;
+    right?: number;
+    top?: number;
+    bottom?: number;
+};
+export declare type ResizeCallback = ((e: React.SyntheticEvent, data: ResizeCallbackData) => any) | undefined;
+export declare type ResizeHandleComponente = React.ReactNode | ((resizeHandle: ResizeHandle, ref: React.RefObject<any>) => React.ReactNode) | undefined;
+export interface PositionParams extends ContainerSize {
+}
+export declare type ContainerAction = 'equals' | 'shrinking' | 'expanding';
+export interface DraggableWindowProps extends Partial<Omit<DraggableCoreProps, 'onStart' | 'onDrag' | 'onStop' | 'disabled' | 'handle' | 'cancel'>> {
+    children: ReactNode;
+    /**
+     * "className" permite identificar si es placeHolder y estilar
+     */
+    className?: string;
+    /**
+     * Inline-style object to pass to the root element.
+     */
+    style?: React.CSSProperties | undefined;
+    /**
+     * zIndex: Permite modificar en los ventanas freeMove (popups) el zIndex
+     */
+    zIndex?: number;
+    /**
+     * minWindowWidth: Ancho mínimo que puede tener la ventana
+     */
+    minWindowWidth?: number;
+    /**
+     * minWindowHeight: Altura mínima que puede tener la ventana
+     */
+    minWindowHeight?: number;
+    /**
+     * defaultPosition permite definir la posición inicial de la ventana
+     * TODO: Debe tambien recibir anchorEl y anchorPosition y calcular la posición en base a este
+     */
+    defaultPosition?: Position;
+    /**
+     * "bounds" permite definir los limites de movimiento de la ventana
+     */
+    bounds?: DraggableWindowBounds;
+    /**
+     *
+     * we should set scale coefficient to avoid render artefacts while dragging.
+     */
+    transformScale?: number | undefined;
+    /**
+ * "containerElement" contenedor padre
+ */
+    containerElement: HTMLElement;
+    /**
+     * "containerSize" tamaño del contenedor padre
+     */
+    containerSize?: ContainerSize | undefined;
+    /**
+     * "draggable" permite definir si la ventana es "dragable" o no. Por defecto es "true
+     */
+    draggable?: boolean;
+    /**
+     * "handle" permite definir el elemento que se debe usar para arrastrar la ventana
+     * Ejemplo: ".handle_title", default  `.${draggableWindowClasses.draggableHandle}`
+     */
+    draggableHandle?: string;
+    /**
+     * "cancel" permite definir el elemento que no se debe usar para arrastrar la ventana
+     * Ejemplo: ".title_buttons"
+     */
+    draggableCancel?: string;
+    /**
+     * "onDrag" función que maneja el onDrag de la ventana
+     */
+    onDrag?: DraggableEventHandler;
+    /**
+     * "onDragStart" función que maneja el onDragStart de la ventana
+     */
+    onDragStart?: DraggableEventHandler;
+    /**
+     * "onDragStop" función que maneja el onDragStop de la ventana
+     */
+    onDragStop?: DraggableEventHandler;
+    /**
+     * "resizable" permite definir si la ventana es "resizable" o no. Por defecto es "true
+     */
+    resizeable?: boolean;
+    /**
+     * "resizeHandles" permite definir de donde se va a poder redimensionar la ventana
+     */
+    resizeHandles?: ResizeHandle[] | undefined;
+    /**
+     * "resizeHandle" permite definir el elemento que se debe usar para redimensionar la ventana
+     */
+    resizeHandle?: ResizeHandleComponente;
+    /**
+     * "onResize" función para el que usa el componente, pueda tomar decisiones en base a este evento
+     */
+    onResize?: ResizeCallback;
+    /**
+     * "onResizeStart" función para el que usa el componente, pueda tomar decisiones en base a este evento
+     */
+    onResizeStart?: ResizeCallback;
+    /**
+     * "onResizeStop" función para el que usa el componente, pueda tomar decisiones en base a este evento
+     */
+    onResizeStop?: ResizeCallback;
+}
+export interface stateRef extends Pick<DraggableWindowProps, 'bounds'>, CurrentState {
+    data?: DraggableData;
+    /**
+     * containerSize: Tamaño del contenedor padre la ultima vez que se actualizó
+     */
+    containerSize?: ContainerSize | undefined;
+}

package/components/DragResizeWindow/utils.d.ts

@@ -0,0 +1,2 @@
+import { Position } from "./types";
+export declare function setTransform({ top, left, width, height }: Position): Record<string, any>;