publ-echo 0.0.4 → 0.0.6

package/src/lib/GridItem/types.ts

@@ -1,121 +0,0 @@
-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
-) => 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>;
-  isHiddenVisibility?: boolean;
-};
-
-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";

package/src/lib/GridItem/utils/calculateUtils.ts

@@ -1,173 +0,0 @@
-import { ResizeHandleAxis } from "../../Resizable/types";
-import { Position, PositionParams } from "../../GridLayoutEditor/types";
-
-export type RowHeight = number | ((width: number) => number);
-
-export function calcGridColWidth(positionParams: PositionParams): number {
-  const { margin, containerPadding, containerWidth, cols } = positionParams;
-
-  return (
-    (containerWidth - margin[0] * (cols - 1) - containerPadding[0] * 2) / cols
-  );
-}
-
-export function calcGridItemWHPx(
-  gridUnits: number,
-  colOrRowSize: number,
-  marginPx: number
-): number {
-  if (!Number.isFinite(gridUnits)) return gridUnits;
-
-  return Math.round(
-    colOrRowSize * gridUnits + Math.max(0, gridUnits - 1) * marginPx
-  );
-}
-
-export const resolveRowHeight = (rowHeight: RowHeight, width: number) =>
-  typeof rowHeight === "number" ? rowHeight : rowHeight(width);
-
-export 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 };
-  }
-): Position {
-  const { margin, containerPadding, rowHeight } = positionParams;
-  const colWidth = calcGridColWidth(positionParams);
-  const rowHeightNumber = resolveRowHeight(rowHeight, colWidth);
-
-  const 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]),
-  };
-
-  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]);
-  }
-
-  // result.z = z;
-
-  return result;
-}
-
-export function calcXY(
-  positionParams: PositionParams,
-  top: number,
-  left: number,
-  w: number,
-  h: number
-): { x: number; y: number } {
-  const { margin, cols, rowHeight, maxRows } = positionParams;
-  const colWidth = calcGridColWidth(positionParams);
-  const rowHeightNumber = resolveRowHeight(rowHeight, colWidth);
-
-  let x = Math.round((left - margin[0]) / (colWidth + margin[0]));
-  let y = Math.round((top - margin[1]) / (rowHeightNumber + margin[1]));
-
-  // Capping
-  x = clamp(x, 0, cols - w);
-  y = clamp(y, 0, maxRows - h);
-
-  return { x, y };
-}
-
-export function calcWH(
-  positionParams: PositionParams,
-  { width, height }: { width: number; height: number },
-  x: number,
-  y: number,
-  handleAxis?: ResizeHandleAxis,
-  prevW?: number,
-  prevH?: number
-): { w: number; h: number } {
-  const { margin, maxRows, cols, rowHeight } = positionParams;
-  const colWidth = calcGridColWidth(positionParams);
-  const rowHeightNumber = resolveRowHeight(rowHeight, colWidth);
-
-  let w = Math.round((width + margin[0]) / (colWidth + margin[0]));
-  let h = Math.round((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, h };
-}
-
-export function clamp(
-  num: number,
-  lowerBound: number,
-  upperBound: number
-): number {
-  return Math.max(Math.min(num, upperBound), lowerBound);
-}