publ-echo 0.0.1

package/src/lib/Draggable/Draggable.tsx

@@ -0,0 +1,303 @@
+import React, { useEffect, useRef, useState } from "react";
+import DraggableCore from "./DraggableCore";
+import { Bounds, ControlPosition, DraggableEventHandler } from "./utils/types";
+import {
+  AxisType,
+  DraggableCoreDefaultProps,
+  DraggablePositionType,
+  DraggableState,
+  PropsWithChildren,
+} from "./types";
+import {
+  canDragX,
+  canDragY,
+  cloneBounds,
+  createDraggableData,
+} from "./utils/positionHelpers";
+import { int, isNum } from "./utils/validationHelpers";
+import {
+  createCSSTransform,
+  createSVGTransform,
+  innerHeight,
+  innerWidth,
+  outerHeight,
+  outerWidth,
+} from "./utils/domHelpers";
+import classNames from "classnames";
+
+export type DraggableDefaultProps = {
+  axis?: AxisType;
+  bounds?: Bounds | string | false;
+  defaultClassName?: string;
+  defaultClassNameDragging?: string;
+  defaultClassNameDragged?: string;
+  defaultPosition?: ControlPosition;
+  scale?: number;
+  nodeRef?: React.RefObject<HTMLElement>;
+  className?: string;
+  style?: Object;
+} & DraggableCoreDefaultProps &
+  DraggablePositionType;
+
+const Draggable = ({
+  children,
+  axis = "both",
+  bounds = false,
+  defaultClassName = "react-draggable",
+  defaultClassNameDragging = "react-draggable-dragging",
+  defaultClassNameDragged = "react-draggable-dragged",
+  defaultPosition = { x: 0, y: 0 },
+  scale = 1,
+  ...props
+}: PropsWithChildren<DraggableDefaultProps>) => {
+  const { position, positionOffset, ...draggableCoreProps } = props;
+
+  const draggableRef = useRef<HTMLElement>(null);
+
+  const [draggableState, setDraggableState] = useState<DraggableState>({
+    dragged: false,
+    dragging: false,
+    x: position ? position?.x : defaultPosition.x,
+    y: position ? position?.y : defaultPosition.y,
+    slackX: 0,
+    slackY: 0,
+    isElementSVG: false,
+    prevPropsPosition: position,
+  });
+
+  /**
+   * @when Draggable이 화면에 그려질 때
+   * @expected 해당 DOMNode가 SVGElement인지를 확인
+   * @clear 페이지를 나갔을 때 dragging을 false로 변경하여 drag되지 않도록 설정
+   */
+  useEffect(() => {
+    if (
+      typeof window.SVGElement !== "undefined" &&
+      findDOMNode() instanceof window.SVGElement
+    ) {
+      setDraggableState((prevState) => ({ ...prevState, isElementSVG: true }));
+    }
+
+    return () => {
+      setDraggableState((prevState) => ({ ...prevState, dragging: false }));
+    };
+  }, []);
+
+  let style = {};
+  let svgTransform = null;
+
+  const findDOMNode = (): HTMLElement | null => {
+    return props?.nodeRef?.current ?? draggableRef?.current;
+  };
+
+  const getBoundPosition = (
+    x: number,
+    y: number,
+    node?: HTMLElement | null
+  ): [number, number] => {
+    if (!bounds) return [x, y];
+
+    let newBounds = bounds;
+    newBounds = typeof bounds === "string" ? bounds : cloneBounds(bounds);
+
+    if (typeof newBounds === "string") {
+      const ownerWindow = node?.ownerDocument?.defaultView;
+
+      let boundNode;
+
+      if (newBounds === "parent") {
+        boundNode = node?.parentNode;
+      } else {
+        boundNode = node?.ownerDocument.querySelector(newBounds);
+      }
+
+      if (!(ownerWindow && boundNode instanceof ownerWindow.HTMLElement)) {
+        throw new Error(
+          'Bounds selector "' + newBounds + '" could not find an element'
+        );
+      }
+
+      const boundNodeElement: HTMLElement = boundNode;
+      const nodeStyle = ownerWindow.getComputedStyle(node);
+      const boundNodeStyle = ownerWindow.getComputedStyle(boundNodeElement);
+
+      newBounds = {
+        left:
+          -node.offsetLeft +
+          int(boundNodeStyle.paddingLeft) +
+          int(nodeStyle.marginLeft),
+        top:
+          -node.offsetTop +
+          int(boundNodeStyle.paddingTop) +
+          int(nodeStyle.marginTop),
+        right:
+          innerWidth(boundNodeElement) -
+          outerWidth(node) -
+          node.offsetLeft +
+          int(boundNodeStyle.paddingRight) -
+          int(nodeStyle.marginRight),
+        bottom:
+          innerHeight(boundNodeElement) -
+          outerHeight(node) -
+          node.offsetTop +
+          int(boundNodeStyle.paddingBottom) -
+          int(nodeStyle.marginBottom),
+      };
+    }
+
+    if (isNum(newBounds.right)) x = Math.min(x, newBounds.right);
+    if (isNum(newBounds.bottom)) y = Math.min(y, newBounds.bottom);
+
+    if (isNum(newBounds.left)) x = Math.max(x, newBounds.left);
+    if (isNum(newBounds.top)) y = Math.max(y, newBounds.top);
+
+    return [x, y];
+  };
+
+  const handleDragStart: DraggableEventHandler = (e, coreData) => {
+    if (props.onStart) {
+      const shouldStart = props.onStart(
+        e,
+        createDraggableData(draggableState, scale, coreData)
+      );
+
+      if (shouldStart === false) return false;
+    }
+
+    setDraggableState((prev) => ({ ...prev, dragged: true, dragging: true }));
+  };
+
+  const handleDrag: DraggableEventHandler = (e, coreData, node) => {
+    if (!draggableState.dragging) return false;
+
+    const uiData = createDraggableData(draggableState, scale, coreData);
+    const newState: DraggableState = {
+      ...draggableState,
+      x: uiData.x,
+      y: uiData.y,
+    };
+
+    if (bounds) {
+      const { x, y } = newState;
+
+      newState.x += draggableState.slackX;
+      newState.y += draggableState.slackY;
+
+      const [newBoundPositionX, newBoundPositionY] = getBoundPosition(
+        newState.x,
+        newState.y,
+        node
+      );
+
+      newState.x = newBoundPositionX;
+      newState.y = newBoundPositionY;
+
+      newState.slackX = draggableState.slackX + (x - newState.x);
+      newState.slackY = draggableState.slackY + (y - newState.y);
+
+      uiData.x = newState.x;
+      uiData.y = newState.y;
+      uiData.deltaX = newState.x - draggableState.x;
+      uiData.deltaY = newState.y - draggableState.y;
+    }
+
+    if (props.onDrag) {
+      const shouldUpdate = props.onDrag(e, uiData);
+
+      if (shouldUpdate === false) return false;
+    }
+
+    setDraggableState((prevState) => ({
+      ...prevState,
+      x: newState.x,
+      y: newState.y,
+    }));
+  };
+
+  const handleDragStop: DraggableEventHandler = (e, coreData) => {
+    if (!draggableState.dragging) return false;
+
+    if (props.onStop) {
+      const shouldContinue = props.onStop(
+        e,
+        createDraggableData(draggableState, scale, coreData)
+      );
+
+      if (shouldContinue === false) return false;
+    }
+
+    if (position && Boolean(position)) {
+      const { x, y } = position;
+
+      setDraggableState((prevState) => ({
+        ...prevState,
+        x,
+        y,
+        dragging: false,
+        slackX: 0,
+        slackY: 0,
+      }));
+    } else {
+      setDraggableState((prevState) => ({
+        ...prevState,
+        dragging: false,
+        slackX: 0,
+        slackY: 0,
+      }));
+    }
+  };
+
+  const controlled = Boolean(position);
+  const draggable = !controlled || draggableState.dragging;
+
+  const validPosition = position || defaultPosition;
+  const transformOptions = {
+    x: canDragX(axis) && draggable ? draggableState.x : validPosition.x,
+    y: canDragY(axis) && draggable ? draggableState.y : validPosition.y,
+  };
+
+  if (draggableState.isElementSVG) {
+    svgTransform = createSVGTransform(transformOptions, positionOffset);
+  } else {
+    style = createCSSTransform(transformOptions, positionOffset);
+  }
+
+  const className = classNames(
+    props.className || "",
+    defaultClassName,
+    { [defaultClassNameDragging]: draggableState.dragging },
+    { [defaultClassNameDragged]: draggableState.dragged }
+  );
+
+  // NOTE - class형 컴포넌트에서 사용되는 getDerivedStateFromProps에 대응하기 위한 조건문입니다.
+  if (
+    position &&
+    (!draggableState.prevPropsPosition ||
+      position.x !== draggableState.prevPropsPosition.x ||
+      position.y !== draggableState.prevPropsPosition.y)
+  ) {
+    setDraggableState((prevState) => ({
+      ...prevState,
+      x: position.x,
+      y: position.y,
+      prevPropsPosition: { ...position },
+    }));
+  }
+
+  return (
+    <DraggableCore
+      {...draggableCoreProps}
+      onStart={handleDragStart}
+      onDrag={handleDrag}
+      onStop={handleDragStop}
+    >
+      {React.cloneElement(children, {
+        className,
+        style: { ...props.style, ...style },
+        transform: svgTransform,
+      })}
+    </DraggableCore>
+  );
+};
+
+export default Draggable;

package/src/lib/Draggable/DraggableCore.tsx

@@ -0,0 +1,352 @@
+import React, { useEffect, useRef, useState } from "react";
+import type {
+  ControlPosition,
+  EventHandler,
+  MouseTouchEvent,
+} from "./utils/types";
+import {
+  DraggableCoreDefaultProps,
+  DraggableCoreState,
+  DraggableData,
+  PropsWithChildren,
+} from "./types";
+import {
+  addEvent,
+  addUserSelectStyles,
+  getTouch,
+  getTouchIdentifier,
+  matchSelectorAndParentsTo,
+  offsetXYFromParent,
+  removeEvent,
+  removeUserSelectStyles,
+} from "./utils/domHelpers";
+import { isNum } from "./utils/validationHelpers";
+import { snapToGrid } from "./utils/positionHelpers";
+import { EVENTS } from "./constants";
+
+type Props = DraggableCoreDefaultProps;
+
+const DraggableCore = ({
+  allowAnyClick = false,
+  disabled = false,
+  enableUserSelectHack = true,
+  onStart = function () {},
+  onDrag = function () {},
+  onStop = function () {},
+  onMouseDown = function () {},
+  scale = 1,
+  children,
+  ...props
+}: PropsWithChildren<Props>) => {
+  const draggableCoreRef = useRef<HTMLElement>(null);
+  const isMounted = useRef(false);
+
+  const [draggableCoreState, setDraggableCoreState] =
+    useState<DraggableCoreState>({
+      dragging: false,
+      lastX: NaN,
+      lastY: NaN,
+      touchIdentifier: null,
+    });
+
+  /**
+   * @when DraggableCore가 랜더링 했을 때
+   * @expected 해당 DOMNode에서 Drag가 동작할 수 있도록 event를 추가합니다.
+   * @clear 등록된 모든 EventListener들을 remove합니다.
+   */
+  useEffect(() => {
+    const thisNode = findDOMNode();
+
+    if (thisNode) {
+      addEvent(thisNode, EVENTS.TOUCH.START, handleTouchStart, {
+        passive: false,
+      });
+
+      if (draggableCoreState.dragging) {
+        addEvent(thisNode.ownerDocument, dragEventFor.MOVE, handleDrag);
+        addEvent(thisNode.ownerDocument, dragEventFor.STOP, handleDragStop);
+      } else {
+        removeEvent(thisNode.ownerDocument, dragEventFor.MOVE, handleDrag);
+        removeEvent(thisNode.ownerDocument, dragEventFor.STOP, handleDragStop);
+      }
+    }
+
+    return () => {
+      if (thisNode) {
+        const { ownerDocument } = thisNode;
+
+        removeEvent(ownerDocument, EVENTS.MOUSE.MOVE, handleDrag);
+        removeEvent(ownerDocument, EVENTS.MOUSE.STOP, handleDragStop);
+        removeEvent(ownerDocument, EVENTS.TOUCH.MOVE, handleDrag);
+        removeEvent(ownerDocument, EVENTS.TOUCH.STOP, handleDragStop);
+        removeEvent(thisNode, EVENTS.TOUCH.START, handleTouchStart, {
+          passive: false,
+        });
+      }
+    };
+  }, [handleDragStart, handleDrag, handleDragStop]);
+
+  /**
+   * @when DraggableCore가 랜더링 했을 때
+   * @expected mount된 상태를 true로 변경합니다.
+   * @clear mount된 상태를 false로 변경하고, 등록된 styles을 제거합니다.
+   */
+  useEffect(() => {
+    isMounted.current = true;
+
+    return () => {
+      isMounted.current = false;
+
+      const thisNode = findDOMNode();
+
+      if (thisNode) {
+        const { ownerDocument } = thisNode;
+
+        if (enableUserSelectHack) removeUserSelectStyles(ownerDocument);
+      }
+    };
+    // NOTE - react-draggable과 동일하게 동작하게 하기 위해서 dependency를 제거하였습니다.
+  }, []);
+
+  let dragEventFor = EVENTS.MOUSE;
+
+  // NOTE - draggable할 node element를 찾는 함수
+  const findDOMNode = (): HTMLElement | null => {
+    return props?.nodeRef?.current ?? draggableCoreRef?.current;
+  };
+
+  // NOTE - event 발생 시 {x, y} position을 가져오는 함수
+  const getControlPosition = (
+    e: MouseTouchEvent,
+    touchIdentifier?: number | null
+  ): ControlPosition | null => {
+    const touchObj =
+      typeof touchIdentifier === "number" ? getTouch(e, touchIdentifier) : null;
+
+    // NOTE - 올바르게 touch를 하지 않은 경우
+    if (typeof touchIdentifier === "number" && !touchObj) return null;
+
+    const thisNode = findDOMNode();
+
+    const offsetParent =
+      props?.offsetParent ||
+      thisNode?.offsetParent ||
+      thisNode?.ownerDocument?.body;
+
+    if (!offsetParent) return null;
+
+    return offsetXYFromParent(touchObj || e, offsetParent, scale);
+  };
+
+  const createCoreData = (x: number, y: number): DraggableData | void => {
+    const isStart = !isNum(draggableCoreState.lastX);
+    const node = findDOMNode();
+
+    if (!node) return;
+
+    if (isStart) {
+      return {
+        node,
+        deltaX: 0,
+        deltaY: 0,
+        lastX: x,
+        lastY: y,
+        x,
+        y,
+      };
+    } else {
+      return {
+        node,
+        deltaX: x - draggableCoreState.lastX,
+        deltaY: y - draggableCoreState.lastY,
+        lastX: draggableCoreState.lastX,
+        lastY: draggableCoreState.lastY,
+        x,
+        y,
+      };
+    }
+  };
+
+  function handleDragStart(e: MouseTouchEvent): void | false {
+    onMouseDown && onMouseDown(e);
+
+    // NOTE - left clicks만 가능
+    if (!allowAnyClick && typeof e.button === "number" && e.button !== 0) {
+      return false;
+    }
+
+    const thisNode = findDOMNode();
+
+    if (!thisNode || !thisNode.ownerDocument || !thisNode.ownerDocument.body) {
+      throw new Error("<DraggableCore> not mounted on DragStart!");
+    }
+
+    const { ownerDocument } = thisNode;
+
+    // NOTE - handle || cancel prop이 제공되었을 때 selector와 match되는지를 확인
+    // handle prop이 존재할 때, matchSelectorAndParentsTo 메소드를 통해 thisNode와 일치하는 element만 Drag 가능
+    // cancel prop이 존재할 때,  matchSelectorAndParentsTo 메소드를 통해 thisNode와 일치하는 element는 Drag 불가능
+    if (
+      disabled ||
+      !(
+        ownerDocument.defaultView &&
+        e.target instanceof ownerDocument.defaultView.Node
+      ) ||
+      (props.handle &&
+        !matchSelectorAndParentsTo(e.target, props.handle, thisNode)) ||
+      (props.cancel &&
+        matchSelectorAndParentsTo(e.target, props.cancel, thisNode))
+    ) {
+      return;
+    }
+
+    // NOTE - ipad || iphone과 같은 mobile 기기에서 scroll 방지
+    if (e.type === "touchstart") e.preventDefault();
+
+    // NOTE - touch event가 발생했을 때 multi touch 상황에서 각각의 터치를 구분하고 다른 처리를 할 수 있게 하기 위함입니다.
+    const touchIdentifier = getTouchIdentifier(e);
+
+    if (touchIdentifier) {
+      setDraggableCoreState({ ...draggableCoreState, touchIdentifier });
+    }
+
+    const position = getControlPosition(e, touchIdentifier);
+
+    if (!position) return;
+
+    const { x, y } = position;
+
+    const coreEvent = createCoreData(x, y);
+
+    if (!coreEvent) return;
+
+    const shouldUpdate = onStart(e, coreEvent);
+
+    if (shouldUpdate === false || isMounted.current === false) return;
+
+    if (enableUserSelectHack) addUserSelectStyles(ownerDocument);
+
+    setDraggableCoreState((prev) => ({
+      ...prev,
+      dragging: true,
+      lastX: x,
+      lastY: y,
+    }));
+  }
+
+  function handleDrag(e: MouseTouchEvent): void | false {
+    const position = getControlPosition(e, draggableCoreState.touchIdentifier);
+
+    if (!position) return;
+
+    let { x, y } = position;
+
+    if (Array.isArray(props.grid)) {
+      let deltaX = x - draggableCoreState.lastX;
+      let deltaY = y - draggableCoreState.lastY;
+
+      [deltaX, deltaY] = snapToGrid(props.grid, deltaX, deltaY);
+
+      if (!deltaX && !deltaY) return;
+
+      x = draggableCoreState.lastX + deltaX;
+      y = draggableCoreState.lastY + deltaY;
+    }
+
+    const coreEvent = createCoreData(x, y);
+    const thisNode = findDOMNode();
+
+    if (!coreEvent || !thisNode) return;
+
+    const shouldUpdate = onDrag(e, coreEvent, thisNode);
+
+    if (shouldUpdate === false || isMounted.current === false) {
+      handleDragStop(e);
+
+      return;
+    }
+
+    setDraggableCoreState((prevState) => ({
+      ...prevState,
+      lastX: x,
+      lastY: y,
+    }));
+  }
+
+  function handleDragStop(e: MouseTouchEvent): void | false {
+    if (!draggableCoreState.dragging) return;
+
+    const position = getControlPosition(e, draggableCoreState.touchIdentifier);
+
+    if (!position) return;
+
+    let { x, y } = position;
+
+    if (Array.isArray(props?.grid)) {
+      let deltaX = x - draggableCoreState.lastX || 0;
+      let deltaY = y - draggableCoreState.lastY || 0;
+      [deltaX, deltaY] = snapToGrid(props?.grid, deltaX, deltaY);
+      x = draggableCoreState.lastX + deltaX;
+      y = draggableCoreState.lastY + deltaY;
+    }
+
+    const coreEvent = createCoreData(x, y);
+
+    if (!coreEvent) return;
+
+    const shouldContinue = onStop(e, coreEvent);
+
+    if (shouldContinue === false || isMounted.current === false) return false;
+
+    const thisNode = findDOMNode();
+
+    if (thisNode) {
+      if (enableUserSelectHack) removeUserSelectStyles(thisNode.ownerDocument);
+    }
+
+    setDraggableCoreState((prev) => ({
+      ...prev,
+      dragging: false,
+      lastX: NaN,
+      lastY: NaN,
+    }));
+
+    if (thisNode) {
+      removeEvent(thisNode.ownerDocument, dragEventFor.MOVE, handleDrag);
+      removeEvent(thisNode.ownerDocument, dragEventFor.STOP, handleDragStop);
+    }
+  }
+
+  const handleMouseDown: EventHandler<MouseTouchEvent> = (e) => {
+    dragEventFor = EVENTS.MOUSE;
+
+    return handleDragStart(e);
+  };
+
+  const handleMouseUp: EventHandler<MouseTouchEvent> = (e) => {
+    dragEventFor = EVENTS.MOUSE;
+
+    return handleDragStop(e);
+  };
+
+  // NOTE - handleMouseDown(start drag)과 동일하지만 touch device에 대응
+  const handleTouchStart: EventHandler<MouseTouchEvent> = (e) => {
+    dragEventFor = EVENTS.TOUCH;
+
+    return handleDragStart(e);
+  };
+  const handleTouchEnd: EventHandler<MouseTouchEvent> = (e) => {
+    dragEventFor = EVENTS.TOUCH;
+
+    return handleDragStop(e);
+  };
+
+  return React.cloneElement(children, {
+    onMouseDown: handleMouseDown,
+    onMouseUp: handleMouseUp,
+    onTouchEnd: handleTouchEnd,
+    ref: props.nodeRef ?? draggableCoreRef,
+  });
+};
+
+export default DraggableCore;

package/src/lib/Draggable/constants.ts

@@ -0,0 +1,12 @@
+export const EVENTS = {
+  TOUCH: {
+    START: "touchstart",
+    MOVE: "touchmove",
+    STOP: "touchend",
+  },
+  MOUSE: {
+    START: "mousedown",
+    MOVE: "mousemove",
+    STOP: "mouseup",
+  },
+};

package/src/lib/Draggable/index.ts

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