publ-echo 0.0.1

package/src/lib/GridLayoutEditor/utils/responsiveUtils.ts

@@ -0,0 +1,111 @@
+import {
+  Breakpoint,
+  Breakpoints,
+  CompactType,
+  Layout,
+  ResponsiveLayout,
+} from "../types";
+import { cloneLayout, compact, correctBounds } from "./renderHelpers";
+
+/**
+ * Given a width, find the highest breakpoint that matches is valid for it (width > breakpoint).
+ *
+ * @param  {Object} breakpoints Breakpoints object (e.g. {lg: 1200, md: 960, ...})
+ * @param  {Number} width Screen width.
+ */
+export function getBreakpointFromWidth(
+  breakpoints: Breakpoints<Breakpoint>,
+  width: number
+): Breakpoint {
+  const sorted = sortBreakpoints(breakpoints);
+  let matching = sorted[0];
+  for (let i = 1, len = sorted.length; i < len; i++) {
+    const breakpointName = sorted[i];
+    if (width > breakpoints[breakpointName]) matching = breakpointName;
+  }
+  return matching;
+}
+
+/**
+ * Given a breakpoint, get the # of cols set for it.
+ */
+export function getColsFromBreakpoint(
+  breakpoint: Breakpoint,
+  cols: Breakpoints<Breakpoint>
+): number {
+  if (!cols[breakpoint]) {
+    throw new Error(
+      "ResponsiveGridLayout: `cols` entry for breakpoint " +
+        breakpoint +
+        " is missing!"
+    );
+  }
+  return cols[breakpoint];
+}
+
+/**
+ * Given existing layouts and a new breakpoint, find or generate a new layout.
+ *
+ * This finds the layout above the new one and generates from it, if it exists.
+ */
+export function findOrGenerateResponsiveLayout(
+  layouts: ResponsiveLayout<Breakpoint>,
+  breakpoints: Breakpoints<Breakpoint>,
+  breakpoint: Breakpoint,
+  lastBreakpoint: Breakpoint,
+  cols: number,
+  compactType: CompactType,
+  overlap: boolean
+): Layout {
+  // If it already exists, just return it.
+  if (layouts[breakpoint]) {
+    return cloneLayout(layouts[breakpoint]);
+  }
+  // Find or generate the next layout
+  let layout = layouts[lastBreakpoint];
+  const breakpointsSorted = sortBreakpoints(breakpoints);
+
+  // Above?
+  for (
+    let i = breakpointsSorted.indexOf(breakpoint);
+    i < breakpointsSorted.length;
+    i++
+  ) {
+    const b = breakpointsSorted[i];
+    if (layouts[b]) {
+      layout = layouts[b];
+      break;
+    }
+  }
+  if (!layout) {
+    // below?
+    for (let i = breakpointsSorted.indexOf(breakpoint) - 1; i >= 0; i--) {
+      const b = breakpointsSorted[i];
+      if (layouts[b]) {
+        layout = layouts[b];
+        break;
+      }
+    }
+  }
+
+  layout = cloneLayout(layout || []); // clone layout so we don't modify existing items
+  return overlap
+    ? layout
+    : compact(correctBounds(layout, { cols: cols }), compactType, cols);
+}
+
+/**
+ * Given breakpoints, return an array of breakpoints sorted by width. This is usually
+ * e.g. ['xxs', 'xs', 'sm', ...]
+ *
+ * @param  {Object} breakpoints Key/value pair of breakpoint names to widths.
+ * @return {Array}              Sorted breakpoints.
+ */
+export function sortBreakpoints(
+  breakpoints: Breakpoints<Breakpoint>
+): Array<Breakpoint> {
+  const keys: Array<string> = Object.keys(breakpoints);
+  return keys.sort(function (a, b) {
+    return breakpoints[a] - breakpoints[b];
+  });
+}

package/src/lib/PreviewGLE/ReactGridLayoutPreview.tsx

@@ -0,0 +1,46 @@
+import ReactGridLayout from "../GridLayoutEditor/ReactGridLayout";
+import { Layout } from "../GridLayoutEditor/types";
+import styled from "styled-components";
+import { WidthProvider } from "../components";
+
+type Props = {
+  layout: Layout;
+  props: any;
+};
+
+// const Responsive = WidthProvider(ReactGridLayout);
+
+// NOTE - 예시용으로 확인할 수 있게 props을 받았지만 추후에 배포될 때 제거 필요
+function ReactGridLayoutPreview({ layout, props }: Props) {
+  const defaultProps = {
+    isDraggable: false,
+    isResizable: false,
+  };
+
+  // const [layout, setLayout] = useState<Layout>(lay);
+  function onLayoutChange(newLayout: Layout) {
+    // setLayout(newLayout);
+  }
+
+  return (
+    <ReactGridLayout
+      layout={layout}
+      onLayoutChange={onLayoutChange}
+      {...defaultProps}
+      {...props}
+    >
+      {layout.map((each) => (
+        <S_SampleBox key={each.i}>{each.i}</S_SampleBox>
+      ))}
+    </ReactGridLayout>
+  );
+}
+
+const S_SampleBox = styled.div`
+  width: 100px;
+  height: 100px;
+  background-color: #fbff00;
+  border: #3c1eff 1px solid;
+`;
+
+export default ReactGridLayoutPreview;

package/src/lib/PreviewGLE/ResponsiveGridLayoutPreview.tsx

@@ -0,0 +1,54 @@
+import styled from "styled-components";
+import ResponsiveGridLayout from "../GridLayoutEditor/ResponsiveGridLayout";
+import { Layout } from "../GridLayoutEditor/types";
+import { WidthProvider } from "../components";
+import _ from "lodash";
+
+type Props = {
+  layouts: { [key: string]: Layout };
+  props: any;
+};
+
+const Responsive = WidthProvider(ResponsiveGridLayout);
+
+// NOTE - 예시용으로 확인할 수 있게 props을 받았지만 추후에 배포될 때 제거 필요
+function ResponsiveGridLayoutPreview({ layouts, props }: Props) {
+  const defaultProps = {
+    isDraggable: false,
+    isResizable: false,
+  };
+
+  function generateDOM() {
+    return _.map(layouts.lg, function (l, i) {
+      return (
+        <S_SampleBox key={i} className={l.static ? "static" : ""}>
+          {l.static ? (
+            <span
+              className="text"
+              title="This item is static and cannot be removed or resized."
+            >
+              Static - {i}
+            </span>
+          ) : (
+            <span className="text">{i}</span>
+          )}
+        </S_SampleBox>
+      );
+    });
+  }
+
+  return (
+    <Responsive layouts={layouts} {...defaultProps} {...props}>
+      {generateDOM()}
+    </Responsive>
+  );
+}
+
+const S_SampleBox = styled.div`
+  width: 100px;
+  height: 100px;
+  background-color: #fbff00;
+  border: #3c1eff 1px solid;
+`;
+
+export default ResponsiveGridLayoutPreview;

package/src/lib/PreviewGLE/index.ts

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

package/src/lib/Resizable/Resizable.tsx

@@ -0,0 +1,323 @@
+import React, { ReactElement, RefObject, SyntheticEvent, useRef } from "react";
+import DraggableCore from "../Draggable/DraggableCore";
+import { PropsWithChildren } from "../Draggable/types";
+import {
+  DragCallbackData,
+  ReactRef,
+  ResizableProps,
+  ResizeHandleAxis,
+} from "./types";
+import { cloneElement } from "./utils/cloneElement";
+import "./styles/styles.css";
+
+type HandleRefsType = {
+  [key in ResizeHandleAxis]: RefObject<HTMLElement>;
+};
+
+type Props = ResizableProps;
+
+const Resizable = ({
+  children,
+  axis = "both",
+  handleSize = [20, 20],
+  lockAspectRatio = false,
+  minConstraints = [20, 20],
+  maxConstraints = [Infinity, Infinity],
+  resizeHandles = ["se"],
+  transformScale = 1,
+  ...props
+}: PropsWithChildren<Props>) => {
+  const handleRefs = useRef<HandleRefsType>({
+    s: useRef<HTMLElement>(null),
+    n: useRef<HTMLElement>(null),
+    e: useRef<HTMLElement>(null),
+    w: useRef<HTMLElement>(null),
+    se: useRef<HTMLElement>(null),
+    sw: useRef<HTMLElement>(null),
+    ne: useRef<HTMLElement>(null),
+    nw: useRef<HTMLElement>(null),
+  });
+
+  let startPosition = useRef<{ top: number; left: number } | null>(null);
+  let startSize = useRef<{ width: number; height: number } | null>(null);
+
+  let lastHandleRect: DOMRect | null = null;
+  let slack: [number, number] | null = null;
+
+  const {
+    className,
+    draggableOpts,
+    width,
+    height,
+    handle,
+    onResize,
+    onResizeStop,
+    onResizeStart,
+    ...restProps
+  } = props;
+
+  const resetData = () => {
+    lastHandleRect = slack = null;
+  };
+
+  // NOTE - 최소 또는 최대 제약 조건 width와 height 계산, 비율 고정 계산
+  const checkConstraints = (
+    width: number,
+    height: number
+  ): [number, number] => {
+    if (!minConstraints && !maxConstraints && !lockAspectRatio) {
+      return [width, height];
+    }
+
+    if (lockAspectRatio) {
+      const ratio = props.width / props.height;
+      const deltaWidth = width - props.width;
+      const deltaHeight = height - props.height;
+
+      if (Math.abs(deltaWidth) > Math.abs(deltaHeight * ratio)) {
+        height = width / ratio;
+      } else {
+        width = height * ratio;
+      }
+    }
+
+    const [oldW, oldH] = [width, height];
+
+    let [slackW, slackH] = slack || [0, 0];
+
+    width += slackW;
+    height += slackH;
+
+    if (minConstraints) {
+      width = Math.max(minConstraints[0], width);
+
+      height = Math.max(minConstraints[1], height);
+    }
+
+    if (maxConstraints) {
+      width = Math.min(maxConstraints[0], width);
+      height = Math.min(maxConstraints[1], height);
+    }
+
+    slack = [slackW + (oldW - width), slackH + (oldH - height)];
+
+    return [width, height];
+  };
+
+  const checkTopLeft = (
+    deltaX: number,
+    deltaY: number,
+    top: number,
+    left: number,
+    width: number,
+    height: number,
+    handleAxis: ResizeHandleAxis
+  ): [number, number] => {
+    let newTop = top;
+    let newLeft = left;
+
+    if (!startPosition.current || !startSize.current) return [newTop, newLeft];
+
+    const currentSumOfLeftAndWidth = left + width;
+    const startSumOfLeftAndWidth =
+      startPosition.current.left + startSize.current.width;
+
+    const currentSumOfTopAndHeight = top + height;
+    const startSumOfTopAndHeight =
+      startPosition.current.top + startSize.current.height;
+
+    const resizableLeft =
+      startPosition.current.left + (startSize.current.width - width);
+    const resizableTop =
+      startPosition.current.top + (startSize.current.height - height);
+
+    if (deltaX < 0) {
+      if (handleAxis === "nw" || handleAxis === "w" || handleAxis === "sw") {
+        if (currentSumOfLeftAndWidth > startSumOfLeftAndWidth) {
+          newLeft = Math.min(left, resizableLeft);
+        }
+      }
+    }
+
+    if (deltaY < 0) {
+      if (handleAxis === "nw" || handleAxis === "n" || handleAxis === "ne") {
+        if (currentSumOfTopAndHeight > startSumOfTopAndHeight) {
+          newTop = Math.min(top, resizableTop);
+        }
+      }
+    }
+
+    if (deltaX > 0) {
+      if (handleAxis === "nw" || handleAxis === "w" || handleAxis === "sw") {
+        if (width >= minConstraints[0]) {
+          newLeft = Math.max(left, resizableLeft);
+        }
+      }
+    }
+
+    if (deltaY > 0) {
+      if (handleAxis === "nw" || handleAxis === "n" || handleAxis === "ne") {
+        if (height >= minConstraints[1]) {
+          newTop = Math.max(top, resizableTop);
+        }
+      }
+    }
+
+    return [newTop, newLeft];
+  };
+
+  const resizeHandler = (
+    handlerName: "onResize" | "onResizeStart" | "onResizeStop",
+    handleAxis: ResizeHandleAxis
+  ): Function => {
+    return (
+      e: SyntheticEvent<any>,
+      { node, deltaX, deltaY }: DragCallbackData
+    ) => {
+      if (handlerName === "onResizeStart") {
+        const position = { top: props.top ?? 0, left: props.left ?? 0 };
+        startPosition.current = position;
+        startSize.current = {
+          width: props.width ?? 0,
+          height: props.height ?? 0,
+        };
+
+        resetData();
+      }
+
+      const canDragX =
+        (axis === "both" || axis === "x") &&
+        handleAxis !== "n" &&
+        handleAxis !== "s";
+      const canDragY =
+        (axis === "both" || axis === "y") &&
+        handleAxis !== "e" &&
+        handleAxis !== "w";
+
+      if (!canDragX && !canDragY) return;
+
+      const axisV = handleAxis[0];
+      const axisH = handleAxis[handleAxis.length - 1];
+      const handleRect = node.getBoundingClientRect();
+
+      // if (lastHandleRect !== null) {
+      //   if (axisH === "w") {
+      //     const deltaLeftSinceLast = handleRect.left - lastHandleRect.left;
+      //     deltaX += deltaLeftSinceLast;
+      //   }
+      //   if (axisV === "n") {
+      //     const deltaTopSinceLast = handleRect.top - lastHandleRect.top;
+      //     deltaY += deltaTopSinceLast;
+      //   }
+      // }
+
+      lastHandleRect = handleRect;
+
+      if (axisH === "w") {
+        deltaX = -deltaX;
+      }
+
+      if (axisV === "n") {
+        deltaY = -deltaY;
+      }
+
+      let width = props.width + (canDragX ? deltaX / transformScale : 0);
+      let height = props.height + (canDragY ? deltaY / transformScale : 0);
+
+      let left = props?.left ?? 0;
+      let top = props?.top ?? 0;
+
+      if (axisV === "n") {
+        top = top - deltaY;
+      }
+
+      if (axisH === "w") {
+        left = left - deltaX;
+      }
+
+      [width, height] = checkConstraints(width, height);
+
+      [top, left] = checkTopLeft(
+        deltaX,
+        deltaY,
+        top,
+        left,
+        width,
+        height,
+        handleAxis
+      );
+
+      const isDimensionsChanged =
+        width !== props.width || height !== props.height;
+
+      const cb =
+        typeof props[handlerName] === "function" ? props[handlerName] : null;
+      const isCbSkipped = handlerName === "onResize" && !isDimensionsChanged;
+
+      if (cb && !isCbSkipped) {
+        cb(e, { node, size: { width, height, top, left }, handle: handleAxis });
+      }
+
+      if (handlerName === "onResizeStop") {
+        startPosition.current = null;
+        startSize.current = null;
+
+        resetData();
+      }
+    };
+  };
+
+  const renderResizeHandle = (
+    handleAxis: ResizeHandleAxis,
+    ref: ReactRef<HTMLElement> | null
+  ): ReactElement<any> => {
+    if (!handle) {
+      return (
+        <span
+          className={`react-resizable-handle react-resizable-handle-${handleAxis}`}
+          ref={ref}
+        />
+      );
+    }
+
+    if (typeof handle === "function") {
+      return handle(handleAxis, ref);
+    }
+
+    const isDOMElement = typeof handle.type === "string";
+
+    const props = {
+      ref,
+      ...(isDOMElement ? {} : { handleAxis }),
+    };
+
+    return React.cloneElement(handle, props);
+  };
+
+  return cloneElement(children, {
+    ...restProps,
+    className: `${className ? `${className} ` : ""}react-resizable`,
+    children: [
+      // ...children.props.children,
+      React.Children.map(children.props.children, (child) => child),
+      ...resizeHandles.map((handleAxis) => {
+        const ref = handleRefs?.current && handleRefs.current[handleAxis];
+
+        return (
+          <DraggableCore
+            {...draggableOpts}
+            nodeRef={ref}
+            key={`resizableHandle-${handleAxis}`}
+            onStop={resizeHandler("onResizeStop", handleAxis)}
+            onStart={resizeHandler("onResizeStart", handleAxis)}
+            onDrag={resizeHandler("onResize", handleAxis)}
+          >
+            {renderResizeHandle(handleAxis, ref)}
+          </DraggableCore>
+        );
+      }),
+    ],
+  });
+};
+
+export default Resizable;

package/src/lib/Resizable/ResizableBox.tsx

@@ -0,0 +1,109 @@
+import { SyntheticEvent, useState } from "react";
+import { ResizableBoxState, ResizableProps, ResizeCallbackData } from "./types";
+import { PropsWithChildren } from "../Draggable/types";
+import Resizable from "./Resizable";
+
+type ResizableBoxProps = ResizableProps & {
+  style?: Object;
+};
+
+const ResizableBox = ({
+  children,
+  ...props
+}: PropsWithChildren<ResizableBoxProps>) => {
+  const {
+    handle,
+    handleSize,
+    onResize,
+    onResizeStart,
+    onResizeStop,
+    draggableOpts,
+    minConstraints,
+    maxConstraints,
+    lockAspectRatio,
+    axis,
+    width,
+    height,
+    resizeHandles,
+    style,
+    transformScale,
+    ...restProps
+  } = props;
+
+  const [resizableBoxState, setResizableBoxState] = useState<ResizableBoxState>(
+    {
+      width: width,
+      height: height,
+      propsWidth: width,
+      propsHeight: height,
+    }
+  );
+
+  const handleResize = (
+    e: SyntheticEvent<any>,
+    data: ResizeCallbackData
+  ): void => {
+    const { size } = data;
+
+    if (props.onResize) {
+      setResizableBoxState((prevState) => ({
+        ...prevState,
+        width: size.width,
+        height: size.height,
+      }));
+
+      props.onResize(e, data);
+    } else {
+      setResizableBoxState((prevState) => ({
+        ...prevState,
+        width: size.width,
+        height: size.height,
+      }));
+    }
+  };
+
+  // NOTE - class형 컴포넌트에서 사용되는 getDerivedStateFromProps에 대응하기 위한 조건문입니다.
+  if (
+    width !== resizableBoxState.propsWidth ||
+    height !== resizableBoxState.propsHeight
+  ) {
+    setResizableBoxState({
+      width: width,
+      height: height,
+      propsWidth: width,
+      propsHeight: height,
+    });
+  }
+
+  return (
+    <>
+      <Resizable
+        axis={axis}
+        draggableOpts={draggableOpts}
+        handle={handle}
+        handleSize={handleSize}
+        height={resizableBoxState.height}
+        lockAspectRatio={lockAspectRatio}
+        maxConstraints={maxConstraints}
+        minConstraints={minConstraints}
+        onResizeStart={onResizeStart}
+        onResize={handleResize}
+        onResizeStop={onResizeStop}
+        resizeHandles={resizeHandles}
+        transformScale={transformScale}
+        width={resizableBoxState.width}
+      >
+        <div
+          {...restProps}
+          style={{
+            ...style,
+            width: resizableBoxState.width + "px",
+            height: resizableBoxState.height + "px",
+          }}
+        />
+      </Resizable>
+    </>
+  );
+};
+
+export default ResizableBox;

package/src/lib/Resizable/index.ts

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