publ-echo-test 0.0.332 → 0.0.334

package/dist/lib/GridItem/types.d.ts

@@ -0,0 +1,112 @@
+import { DragEvent, SyntheticEvent } from 'react';
+import { RowHeight } from '../GridLayoutEditor/types';
+import { ResizeHandleAxis, ResizeHandleType } from '../Resizable/types';
+export type PartialPosition = {
+    top: number;
+    left: number;
+};
+export type ResizeEventType = SyntheticEvent | MouseEvent | TouchEvent;
+export type GridResizeEvent = {
+    e: ResizeEventType;
+    node: HTMLElement;
+    size: Size;
+};
+export type GridDragEvent = {
+    e: ResizeEventType;
+    node: HTMLElement;
+    newPosition: PartialPosition;
+};
+export type GridItemCallback<Data extends GridDragEvent | GridResizeEvent> = (i: string, x: number, y: number, data: Data, isGroup?: boolean) => void;
+type ResizeGridItemCallback<Data extends GridDragEvent | GridResizeEvent> = (i: string, w: number, h: number, data: Data, x: number, y: number) => void;
+export type GridDragStopEvent = GridDragEvent & {
+    change: boolean;
+};
+export type Size = {
+    width: number;
+    height: number;
+    top: number;
+    left: number;
+};
+export type GridItemStateType = {
+    resizing?: {
+        width: number;
+        height: number;
+    };
+    dragging?: {
+        top: number;
+        left: number;
+    };
+    className: string;
+};
+export type GridItemProps = {
+    margin: [number, number];
+    containerPadding: [number, number];
+    rowHeight: RowHeight;
+    maxRows: number;
+    isDraggable: boolean;
+    isResizable: boolean;
+    isBounded: boolean;
+    static?: boolean;
+    useCSSTransforms?: boolean;
+    usePercentages?: boolean;
+    transformScale?: number;
+    droppingPosition?: DroppingPosition;
+    cols: number;
+    containerWidth: number;
+    className?: string;
+    style?: Object;
+    cancel?: string;
+    handle?: string;
+    minW?: number;
+    maxW?: number;
+    minH?: number;
+    maxH?: number;
+    x: number;
+    y: number;
+    z: number;
+    w: number;
+    h: number;
+    i: string;
+    resizeHandles?: ResizeHandleAxis[];
+    resizeHandle?: ResizeHandleType;
+    onDrag?: GridItemCallback<GridDragEvent>;
+    onDragStart?: GridItemCallback<GridDragEvent>;
+    onDragStop?: GridItemCallback<GridDragStopEvent>;
+    onResize?: ResizeGridItemCallback<GridResizeEvent>;
+    onResizeStart?: ResizeGridItemCallback<GridResizeEvent>;
+    onResizeStop?: ResizeGridItemCallback<GridResizeEvent>;
+    onFitToContent?: (i: string, w: number, h: number, x: number, y: number, { hasPaddingChanged }: {
+        hasPaddingChanged: boolean;
+    }) => void;
+    isHiddenVisibility?: boolean;
+    customColWidth?: number;
+    autoResize: boolean;
+    zOrder?: number;
+    zOrderInternal?: string;
+};
+export type GridItemDefaultProps = {
+    className: string;
+    cancel: string;
+    handle: string;
+    minH: number;
+    minW: number;
+    maxH: number;
+    maxW: number;
+    transformScale: number;
+};
+export type DroppingPosition = {
+    left: number;
+    top: number;
+    e: DragEvent<HTMLDivElement>;
+};
+export type ReactDraggableCallbackData = {
+    node: HTMLElement;
+    x: number;
+    y: number;
+    deltaX: number;
+    deltaY: number;
+    lastX: number;
+    lastY: number;
+};
+export type ResizeHandlerNameType = 'onResizeStart' | 'onResize' | 'onResizeStop';
+export {};

package/dist/lib/GridItem/types.js

@@ -0,0 +1 @@
+export {};

package/dist/lib/GridItem/utils/calculateUtils.d.ts

@@ -0,0 +1,30 @@
+import { ResizeHandleAxis } from "../../Resizable/types";
+import { Position, PositionParams } from "../../GridLayoutEditor/types";
+export type RowHeight = number | ((width: number) => number);
+export declare function calcGridColWidth(positionParams: PositionParams): number;
+export declare function calcGridItemWHPx(gridUnits: number, colOrRowSize: number, marginPx: number): number;
+export declare const resolveRowHeight: (rowHeight: RowHeight, width: number) => number;
+export declare function calcGridItemPosition(positionParams: PositionParams, x: number, y: number, z: number, w: number, h: number, state?: {
+    resizing?: {
+        width: number;
+        height: number;
+        top: number;
+        left: number;
+    };
+    dragging?: {
+        top: number;
+        left: number;
+    };
+}, customColWidth?: number): Position;
+export declare function calcXY(positionParams: PositionParams, top: number, left: number, w: number, h: number): {
+    x: number;
+    y: number;
+};
+export declare function calcWH(positionParams: PositionParams, { width, height }: {
+    width: number;
+    height: number;
+}, x: number, y: number, handleAxis?: ResizeHandleAxis, prevW?: number, prevH?: number, shouldCeil?: boolean): {
+    w: number;
+    h: number;
+};
+export declare function clamp(num: number, lowerBound: number, upperBound: number): number;

package/dist/lib/GridItem/utils/calculateUtils.js

@@ -0,0 +1,115 @@
+export function calcGridColWidth(positionParams) {
+    var margin = positionParams.margin, containerPadding = positionParams.containerPadding, containerWidth = positionParams.containerWidth, cols = positionParams.cols;
+    return ((containerWidth - margin[0] * (cols - 1) - containerPadding[0] * 2) / cols);
+}
+export function calcGridItemWHPx(gridUnits, colOrRowSize, marginPx) {
+    if (!Number.isFinite(gridUnits))
+        return gridUnits;
+    return Number((colOrRowSize * gridUnits + Math.max(0, gridUnits - 1) * marginPx).toFixed(1));
+}
+export var resolveRowHeight = function (rowHeight, width) {
+    return typeof rowHeight === "number" ? rowHeight : rowHeight(width);
+};
+export function calcGridItemPosition(positionParams, x, y, z, w, h, state, customColWidth) {
+    var margin = positionParams.margin, containerPadding = positionParams.containerPadding, rowHeight = positionParams.rowHeight;
+    var colWidth = customColWidth !== null && customColWidth !== void 0 ? customColWidth : calcGridColWidth(positionParams);
+    var rowHeightNumber = resolveRowHeight(rowHeight, colWidth);
+    var result = {
+        left: Math.round((colWidth + margin[0]) * x + containerPadding[0]),
+        top: Math.round((rowHeightNumber + margin[1]) * y + containerPadding[1]),
+        width: w === Infinity ? w : calcGridItemWHPx(w, colWidth, margin[0]),
+        height: h === Infinity ? h : calcGridItemWHPx(h, rowHeightNumber, margin[1]),
+        z: z,
+    };
+    if (state && state.resizing) {
+        result.width = Math.round(state.resizing.width);
+        result.height = Math.round(state.resizing.height);
+        result.top = Math.round(state.resizing.top);
+        result.left = Math.round(state.resizing.left);
+    }
+    else {
+        result.width = calcGridItemWHPx(w, colWidth, margin[0]);
+        result.height = calcGridItemWHPx(h, rowHeightNumber, margin[1]);
+    }
+    if (state && state.dragging) {
+        result.top = Math.round(state.dragging.top);
+        result.left = Math.round(state.dragging.left);
+    }
+    else {
+        result.top = Math.round((rowHeightNumber + margin[1]) * y + containerPadding[1]);
+        result.left = Math.round((colWidth + margin[0]) * x + containerPadding[0]);
+    }
+    return result;
+}
+export function calcXY(positionParams, top, left, w, h) {
+    var margin = positionParams.margin, cols = positionParams.cols, rowHeight = positionParams.rowHeight, maxRows = positionParams.maxRows;
+    var colWidth = calcGridColWidth(positionParams);
+    var rowHeightNumber = resolveRowHeight(rowHeight, colWidth);
+    var x = Math.round((left - margin[0]) / (colWidth + margin[0]));
+    var y = Math.round((top - margin[1]) / (rowHeightNumber + margin[1]));
+    // Capping
+    x = clamp(x, 0, cols - w);
+    y = clamp(y, 0, maxRows - h);
+    return { x: x, y: y };
+}
+export function calcWH(positionParams, _a, x, y, handleAxis, prevW, prevH, shouldCeil) {
+    var width = _a.width, height = _a.height;
+    var margin = positionParams.margin, maxRows = positionParams.maxRows, cols = positionParams.cols, rowHeight = positionParams.rowHeight;
+    var colWidth = calcGridColWidth(positionParams);
+    var rowHeightNumber = resolveRowHeight(rowHeight, colWidth);
+    var roundOrCeil = shouldCeil ? Math.ceil : Math.round;
+    var w = roundOrCeil(truncateToOneDecimal((width + margin[0]) / (colWidth + margin[0])));
+    var h = roundOrCeil(roundToOneDecimal((height + margin[1]) / (rowHeightNumber + margin[1])));
+    // // Capping
+    // w = clamp(w, 0, cols - x);
+    // h = clamp(h, 0, maxRows - y);
+    if (handleAxis === "nw") {
+        if (x <= 0 && y <= 0 && prevW && prevH) {
+            w = Math.max(Math.min(w, prevW), 0);
+            h = Math.max(Math.min(h, prevH), 0);
+        }
+        if (x <= 0 && prevW) {
+            w = Math.max(Math.min(w, prevW), 0);
+            h = Math.max(Math.min(h, maxRows - y), 0);
+        }
+        if (y <= 0 && prevH) {
+            h = Math.max(Math.min(h, prevH), 0);
+        }
+    }
+    if (handleAxis === "w" || handleAxis === "sw") {
+        if (x <= 0 && prevW) {
+            w = Math.max(Math.min(w, prevW), 0);
+            h = Math.max(Math.min(h, maxRows - y), 0);
+        }
+    }
+    if (handleAxis === "n") {
+        if (y <= 0 && prevH) {
+            w = Math.max(Math.min(w, cols - x), 0);
+            h = Math.max(Math.min(h, prevH), 0);
+        }
+    }
+    if (handleAxis === "ne") {
+        if (y <= 0 && prevH) {
+            w = Math.max(Math.min(w, cols - x), 0);
+            h = Math.max(Math.min(h, prevH), 0);
+        }
+        else {
+            w = Math.max(Math.min(w, cols - x), 0);
+            h = Math.max(Math.min(h, maxRows - y), 0);
+        }
+    }
+    if (handleAxis === "e" || handleAxis === "se") {
+        w = Math.max(Math.min(w, cols - x), 0);
+        h = Math.max(Math.min(h, maxRows - y), 0);
+    }
+    return { w: w, h: h };
+}
+export function clamp(num, lowerBound, upperBound) {
+    return Math.max(Math.min(num, upperBound), lowerBound);
+}
+function roundToOneDecimal(num) {
+    return Math.floor(num * 10) / 10;
+}
+function truncateToOneDecimal(num) {
+    return Math.floor(num * 10) / 10;
+}

package/dist/lib/GridLayoutEditor/ReactGridLayout.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+import type { ReactElement } from "react";
+import { PropsWithChildren } from "../types";
+import { ReactGridLayoutProps } from "./types";
+declare const ReactGridLayout: ({ children, ...props }: PropsWithChildren<ReactGridLayoutProps>) => React.ReactElement;
+export default ReactGridLayout;