publ-echo 0.0.1

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

@@ -0,0 +1,173 @@
+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);
+}