publ-echo 0.0.1

package/src/lib/GridItem/GridItem.tsx

@@ -0,0 +1,493 @@
+import React, { ReactElement, useRef, useState } from "react";
+import {
+  GridItemProps,
+  PartialPosition,
+  ReactDraggableCallbackData,
+  ResizeEventType,
+  ResizeHandlerNameType,
+} from "./types";
+import { DraggableCore } from "../Draggable";
+import classNames from "classnames";
+import {
+  calcGridColWidth,
+  calcGridItemPosition,
+  calcGridItemWHPx,
+  calcWH,
+  calcXY,
+  clamp,
+  resolveRowHeight,
+} from "./utils/calculateUtils";
+import { Position, PositionParams } from "../GridLayoutEditor/types";
+import {
+  perc,
+  setTopLeft,
+  setTransform,
+} from "../GridLayoutEditor/utils/renderHelpers";
+import { Resizable } from "../Resizable";
+import { PropsWithChildren } from "../../utils/types";
+import { ResizeCallbackData } from "../Resizable/types";
+import { DraggableEvent } from "../Draggable/types";
+
+const GridItem = ({ children, ...props }: PropsWithChildren<GridItemProps>) => {
+  const {
+    resizeHandle,
+    cols,
+    isDraggable,
+    transformScale = 1,
+    isResizable,
+    useCSSTransforms,
+    className,
+    cancel = "",
+    handle = "",
+    x,
+    y,
+    z,
+    w,
+    h,
+    minH = 1,
+    minW = 1,
+    maxH = Infinity,
+    maxW = Infinity,
+    i,
+    isHiddenVisibility = false,
+    containerWidth,
+  } = props;
+
+  const [resizing, setResizing] = useState<{
+    width: number;
+    height: number;
+    top: number;
+    left: number;
+  }>();
+  const [dragging, setDragging] = useState<{ top: number; left: number }>();
+  const [dragStart, setDragStart] = useState<{ x: number; y: number }>();
+
+  const [isDragging, setIsDragging] = useState(false);
+  const [isResizing, setIsResizing] = useState(false);
+
+  const elementRef = useRef<HTMLDivElement>(null);
+
+  // const moveDroppingItem = (prevProps: GridItemProps) => {
+  //   const { droppingPosition } = props;
+  //   if (!droppingPosition) return;
+  //   const node = elementRef.current;
+  //   // Can't find DOM node (are we unmounted?)
+  //   if (!node) return;
+
+  //   const prevDroppingPosition = prevProps.droppingPosition || {
+  //     left: 0,
+  //     top: 0,
+  //   };
+  //   const shouldDrag =
+  //     (dragging && droppingPosition.left !== prevDroppingPosition.left) ||
+  //     droppingPosition.top !== prevDroppingPosition.top;
+
+  //   if (!dragging) {
+  //     onDragStart(droppingPosition.e, {
+  //       node,
+  //       deltaX: droppingPosition.left,
+  //       deltaY: droppingPosition.top,
+  //     });
+  //   } else if (shouldDrag) {
+  //     const deltaX = droppingPosition.left - dragging.left;
+  //     const deltaY = droppingPosition.top - dragging.top;
+
+  //     onDrag(droppingPosition.e, {
+  //       node,
+  //       deltaX,
+  //       deltaY,
+  //     });
+  //   }
+  // };
+
+  const getPositionParams = (prop: GridItemProps = props): PositionParams => {
+    return {
+      cols: prop.cols,
+      containerPadding: prop.containerPadding,
+      containerWidth: prop.containerWidth,
+      margin: prop.margin,
+      maxRows: prop.maxRows,
+      rowHeight: prop.rowHeight,
+    };
+  };
+
+  const createStyle = (
+    pos: Position
+  ): { [key: string]: string | undefined | number } => {
+    const { usePercentages, containerWidth, useCSSTransforms } = props;
+    let style;
+
+    if (useCSSTransforms) {
+      style = setTransform(pos);
+    } else {
+      style = setTopLeft(pos);
+
+      if (usePercentages) {
+        if (containerWidth == null) {
+          throw new Error("Container width is missing!");
+        }
+        style.left = perc(pos.left / containerWidth);
+        style.width = perc(pos.width / containerWidth);
+      }
+    }
+
+    return style;
+  };
+
+  /**
+   * Mix a Draggable instance into a child.
+   * @param  {Element} child    Child element.
+   * @return {Element}          Child wrapped in Draggable.
+   */
+  const mixinDraggable = (child: ReactElement<any>, isDraggable: boolean) => {
+    return (
+      <DraggableCore
+        disabled={!isDraggable}
+        onStart={onDragStart}
+        onDrag={onDrag}
+        onStop={onDragStop}
+        handle={handle}
+        cancel={".react-resizable-handle" + (cancel ? "," + cancel : "")}
+        scale={transformScale}
+        nodeRef={elementRef}
+      >
+        {child}
+      </DraggableCore>
+    );
+  };
+
+  /**
+   * Mix a Resizable instance into a child.
+   * @param  {Element} child    Child element.
+   * @param  {Object} position  Position object (pixel values)
+   * @return {Element}          Child wrapped in Resizable.
+   */
+  const mixinResizable = (
+    child: ReactElement<any>,
+    position: Position,
+    isResizable: boolean
+  ): ReactElement<any> => {
+    const positionParams = getPositionParams();
+
+    // const maxWidth = calcGridItemPosition(
+    //   positionParams,
+    //   x,
+    //   y,
+    //   z,
+    //   cols - x, // TODO - 수정 필요
+    //   h
+    // ).width;
+
+    const mins = calcGridItemPosition(positionParams, x, y, z, minW, minH);
+    const maxes = calcGridItemPosition(positionParams, x, y, z, maxW, maxH);
+    const minConstraints = [mins.width, mins.height] as [number, number];
+    const maxConstraints = [
+      Math.min(maxes.width, containerWidth),
+      Math.min(maxes.height, Infinity),
+    ] as [number, number];
+
+    return (
+      <Resizable
+        draggableOpts={{
+          disabled: !isResizable,
+        }}
+        className={isResizable ? undefined : "react-resizable-hide"}
+        width={position.width}
+        height={position.height}
+        top={position.top}
+        left={position.left}
+        minConstraints={minConstraints}
+        maxConstraints={maxConstraints}
+        onResizeStop={onResizeStop}
+        onResizeStart={onResizeStart}
+        onResize={onResize}
+        transformScale={transformScale}
+        resizeHandles={props.resizeHandles}
+        handle={resizeHandle}
+      >
+        {child}
+      </Resizable>
+    );
+  };
+
+  /**
+   * onDragStart event handler
+   * @param  {Event}  e             event data
+   * @param  {Object} callbackData  an object with node, delta and position information
+   */
+  const onDragStart = (
+    e: DraggableEvent,
+    { node, deltaX, deltaY }: ReactDraggableCallbackData
+  ) => {
+    const newPosition: PartialPosition = { top: 0, left: 0 };
+
+    const { offsetParent } = node;
+    if (!offsetParent) return;
+
+    const parentRect = offsetParent.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 + offsetParent.scrollLeft;
+    newPosition.top = cTop - pTop + offsetParent.scrollTop;
+
+    setDragging(newPosition);
+
+    const { x, y } = calcXY(
+      getPositionParams(),
+      newPosition.top,
+      newPosition.left,
+      props.w!,
+      props.h!
+    );
+
+    setDragStart({ x, y });
+    props.onDragStart &&
+      props.onDragStart(props.i, x, y, { e, node, newPosition });
+  };
+
+  /**
+   * onDrag event handler
+   * @param  {Event}  e             event data
+   * @param  {Object} callbackData  an object with node, delta and position information
+   */
+  const onDrag = (
+    e: DraggableEvent,
+    { node, deltaX, deltaY }: ReactDraggableCallbackData
+  ) => {
+    if (!dragging) {
+      throw new Error("onDrag called before onDragStart.");
+    }
+
+    setIsDragging(true);
+
+    let top = dragging.top + deltaY;
+    let left = dragging.left + deltaX;
+
+    const { isBounded, i, w, h, containerWidth } = props;
+    const positionParams = getPositionParams();
+
+    if (isBounded) {
+      const { offsetParent } = node;
+
+      if (offsetParent) {
+        const { margin, rowHeight } = props;
+        const colWidth = calcGridColWidth(positionParams);
+
+        let rowHeightNumber = resolveRowHeight(rowHeight, colWidth);
+
+        const bottomBoundary =
+          offsetParent.clientHeight -
+          calcGridItemWHPx(h, rowHeightNumber, margin[1]);
+        top = clamp(top, 0, bottomBoundary);
+
+        const rightBoundary =
+          containerWidth - calcGridItemWHPx(w, colWidth, margin[0]);
+        left = clamp(left, 0, rightBoundary);
+      }
+    }
+
+    const newPosition: PartialPosition = { top, left };
+
+    setDragging(newPosition);
+
+    const { x, y } = calcXY(positionParams, top, left, w, h);
+
+    props.onDrag && props.onDrag(i, x, y, { e, node, newPosition });
+  };
+
+  /**
+   * onDragStop event handler
+   * @param  {Event}  e             event data
+   * @param  {Object} callbackData  an object with node, delta and position information
+   */
+  const onDragStop = (
+    e: DraggableEvent,
+    { node, deltaX, deltaY }: ReactDraggableCallbackData
+  ) => {
+    if (!dragging) {
+      throw new Error("onDragEnd called before onDragStart.");
+    }
+    const { w, h, i } = props;
+    const { left, top } = dragging;
+    const { x, y } = calcXY(getPositionParams(), top, left, w, h);
+    const newPosition: PartialPosition = { top, left };
+
+    let change = dragStart?.x !== x || dragStart?.y !== y;
+
+    setDragging(undefined);
+    setDragStart(undefined);
+    setIsDragging(false);
+
+    props.onDragStop &&
+      props.onDragStop(i, x, y, { e, node, newPosition, change });
+  };
+
+  const getResizableXYPosition = (
+    handle: ResizeCallbackData["handle"],
+    width: number,
+    height: number,
+    prevW: number,
+    prevH: number
+  ) => {
+    let newX = x;
+    let newY = y;
+
+    if (handle === "nw") {
+      // NOTE - nw left(X)와 top(Y) 둘다 변경
+      if (width > prevW) {
+        newX = x - (width - prevW);
+      } else {
+        newX = x + (prevW - width);
+      }
+
+      if (height > prevH) {
+        newY = y - (height - prevH);
+      } else {
+        newY = y + (prevH - height);
+      }
+    }
+
+    if (handle === "n" || handle === "ne") {
+      // NOTE - n, ne left(X) 고정 & top(Y) 변경
+      if (height > prevH) {
+        newY = y - (height - prevH);
+      } else {
+        newY = y + (prevH - height);
+      }
+    }
+
+    if (handle === "w" || handle === "sw") {
+      // NOTE - s, sw left(X) 변경 top(Y) 고정
+      if (width > prevW) {
+        newX = x - (width - prevW);
+      } else {
+        newX = x + (prevW - width);
+      }
+    }
+
+    return { newX, newY };
+  };
+
+  /**
+   * onResizeStart event handler
+   * @param  {ResizeEventType}  e             event data
+   * @param  {Object} callbackData  an object with node and size information
+   */
+  const onResizeStart: (
+    e: ResizeEventType,
+    data: ResizeCallbackData
+  ) => void = (e, callbackData) => {
+    onResizeHandler(e, callbackData, "onResizeStart");
+  };
+
+  /**
+   * onResize event handler
+   * @param  {ResizeEventType}  e             event data
+   * @param  {Object} callbackData  an object with node and size information
+   */
+  const onResize: (e: ResizeEventType, data: ResizeCallbackData) => void = (
+    e,
+    callbackData
+  ) => {
+    setIsResizing(true);
+    onResizeHandler(e, callbackData, "onResize");
+  };
+
+  /**
+   * onResizeStop event handler
+   * @param  {ResizeEventType}  e             event data
+   * @param  {Object} callbackData  an object with node and size information
+   */
+  const onResizeStop: (e: ResizeEventType, data: ResizeCallbackData) => void = (
+    e,
+    callbackData
+  ) => {
+    setIsResizing(false);
+    onResizeHandler(e, callbackData, "onResizeStop");
+  };
+
+  /**
+   * Wrapper around drag events to provide more useful data.
+   * All drag events call the function with the given handler name,
+   * with the signature (index, x, y).
+   *
+   * @param  {String} handlerName Handler name to wrap.
+   * @return {Function}           Handler function.
+   */
+  const onResizeHandler = (
+    e: ResizeEventType,
+    { node, size, handle }: ResizeCallbackData,
+    handlerName: ResizeHandlerNameType
+  ): void => {
+    const handler = props[handlerName];
+
+    if (!handler) return;
+
+    const { w: prevW, h: prevH } = props;
+
+    // Get new XY
+    let { w, h } = calcWH(
+      getPositionParams(),
+      size,
+      x,
+      y,
+      handle,
+      prevW,
+      prevH
+    );
+
+    // minW should be at least 1
+    // minW = Math.max(minW, 1);
+
+    // maxW should be at most (cols - x)
+    // maxW = Math.min(maxW, cols - x);
+
+    w = clamp(w, minW, maxW);
+    h = clamp(h, minH, maxH);
+
+    setResizing(handlerName === "onResizeStop" ? undefined : size);
+
+    const { newX, newY } = getResizableXYPosition(handle, w, h, prevW, prevH);
+
+    handler(i, w, h, { e, node, size }, newX, newY);
+  };
+
+  const pos = calcGridItemPosition(getPositionParams(), x, y, z, w, h, {
+    dragging,
+    resizing,
+  });
+
+  const child = React.Children.only(children);
+
+  let newChild = React.cloneElement(child, {
+    ref: elementRef,
+    className: classNames("react-grid-item", child.props.className, className, {
+      static: props.static,
+      isResizing:
+        Boolean(resizing) && Boolean(isResizing) && Boolean(isHiddenVisibility),
+      resizing: Boolean(resizing),
+      "react-draggable": isDraggable,
+      isDragging:
+        Boolean(isDragging) && Boolean(dragging) && Boolean(isHiddenVisibility),
+      "react-draggable-dragging": Boolean(dragging),
+      // dropping: Boolean(droppingPosition),
+      cssTransforms: useCSSTransforms,
+    }),
+    style: {
+      ...props.style,
+      ...child.props.style,
+      ...createStyle(pos),
+    },
+  });
+
+  newChild = mixinResizable(newChild, pos, isResizable);
+  newChild = mixinDraggable(newChild, isDraggable);
+
+  return newChild;
+};
+
+export default GridItem;

package/src/lib/GridItem/index.ts

@@ -0,0 +1 @@
+export { default as GridItem } from "./GridItem";

package/src/lib/GridItem/types.ts

@@ -0,0 +1,121 @@
+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";