publ-echo 0.0.4 → 0.0.6

package/src/lib/Draggable/DraggableCore.tsx

@@ -1,352 +0,0 @@
-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

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

package/src/lib/Draggable/types.ts

@@ -1,74 +0,0 @@
-import { ReactElement, RefObject } from "react";
-import {
-  ControlPosition,
-  DraggableEventHandler,
-  PositionOffsetControlPosition,
-} from "./utils/types";
-
-// draggableCore
-export type DraggableCoreState = {
-  dragging: boolean;
-  lastX: number;
-  lastY: number;
-  touchIdentifier?: number | null;
-};
-
-export type DraggableData = {
-  node: HTMLElement;
-  x: number;
-  y: number;
-  deltaX: number;
-  deltaY: number;
-  lastX: number;
-  lastY: number;
-};
-
-export type DraggableCoreDefaultProps = {
-  allowAnyClick?: boolean;
-  disabled?: boolean;
-  enableUserSelectHack?: boolean;
-  onStart?: DraggableEventHandler | Function;
-  onDrag?: DraggableEventHandler | Function;
-  onStop?: DraggableEventHandler | Function;
-  onMouseDown?: (e: MouseEvent) => void;
-  scale?: number;
-  cancel?: string;
-  children: ReactElement<any>;
-  offsetParent?: HTMLElement;
-  grid?: [number, number];
-  handle?: string;
-  nodeRef?: RefObject<HTMLElement>;
-  className?: string;
-  style?: Object;
-};
-
-// draggable type
-export type DraggableState = {
-  dragging: boolean;
-  dragged: boolean;
-  x: number;
-  y: number;
-  slackX: number;
-  slackY: number;
-  isElementSVG: boolean;
-  prevPropsPosition?: ControlPosition;
-};
-
-export type DraggablePositionType = {
-  positionOffset?: PositionOffsetControlPosition;
-  position?: ControlPosition;
-};
-
-export type DraggableProps = DraggablePositionType & DraggableCoreDefaultProps;
-
-export type PropsWithChildren<P> = P & {
-  children: ReactElement<any>;
-};
-
-export type AxisType = "both" | "x" | "y" | "none";
-
-export type DraggableEvent =
-  | React.MouseEvent<HTMLElement | SVGElement>
-  | React.TouchEvent<HTMLElement | SVGElement>
-  | MouseEvent
-  | TouchEvent;

package/src/lib/Draggable/utils/domHelpers.ts

@@ -1,284 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import browserPrefix, { browserPrefixToKey } from "./getPrefix";
-import type {
-  ControlPosition,
-  PositionOffsetControlPosition,
-  MouseTouchEvent,
-  EventWithOffset,
-  EventHandler,
-} from "./types";
-import { findInArray, int, isFunction } from "./validationHelpers";
-
-export const matchSelector = (el: Node, selector: string): boolean => {
-  let matchedSelector = "";
-  const selectors = [
-    "matches",
-    "webkitMatchesSelector",
-    // "mozMatchesSelector",
-    // "msMatchesSelector",
-    // "oMatchesSelector",
-  ];
-  const callback = (method: keyof Element) => {
-    return isFunction((el as Element)[method]);
-  };
-
-  if (!matchedSelector) {
-    matchedSelector = findInArray(selectors, callback);
-
-    if (
-      matchedSelector === "matches" ||
-      matchedSelector === "webkitMatchesSelector"
-    ) {
-      return (el as Element)[matchedSelector](selector);
-    }
-  }
-
-  return false;
-};
-
-export const matchSelectorAndParentsTo = (
-  el: Node,
-  selector: string,
-  baseNode: Node
-): boolean => {
-  let node = el;
-
-  do {
-    if (matchSelector(node, selector)) return true;
-    if (node === baseNode) return false;
-    if (node.parentNode) node = node.parentNode;
-  } while (node);
-
-  return false;
-};
-
-export const addEvent = (
-  el: Node,
-  eventType: string,
-  handler: EventHandler<any>,
-  inputOptions?: Object
-): void => {
-  if (!el) return;
-
-  const options = { capture: true, ...inputOptions };
-
-  if (el.addEventListener) {
-    el.addEventListener(eventType, handler, options);
-  }
-  // if (el.addEventListener) {
-  //   el.addEventListener(eventType, handler, options);
-  // } else {
-  //   (el as { [key: string]: any })['on' + eventType] = handler;
-  // }
-};
-
-export const removeEvent = (
-  el: Node,
-  eventType: string,
-  handler: EventHandler<any>,
-  inputOptions?: Object
-): void => {
-  if (!el) return;
-
-  const options = { capture: true, ...inputOptions };
-
-  if (el.removeEventListener) {
-    el.removeEventListener(eventType, handler, options);
-  }
-  // if (el.removeEventListener) {
-  //   el.removeEventListener(eventType, handler, options);
-  // } else {
-  //   (el as { [key: string]: any })['on' + eventType] = null;
-  // }
-};
-
-export const outerHeight = (node: HTMLElement): number => {
-  let height = node.clientHeight;
-  const computedStyle = node.ownerDocument.defaultView?.getComputedStyle(node);
-
-  if (computedStyle) {
-    height += int(computedStyle.borderTopWidth);
-    height += int(computedStyle.borderBottomWidth);
-    return height;
-  } else {
-    return height;
-  }
-};
-
-export const outerWidth = (node: HTMLElement): number => {
-  let width = node.clientWidth;
-  const computedStyle = node.ownerDocument.defaultView?.getComputedStyle(node);
-
-  if (computedStyle) {
-    width += int(computedStyle.borderLeftWidth);
-    width += int(computedStyle.borderRightWidth);
-    return width;
-  } else {
-    return width;
-  }
-};
-export const innerHeight = (node: HTMLElement): number => {
-  let height = node.clientHeight;
-  const computedStyle = node.ownerDocument.defaultView?.getComputedStyle(node);
-
-  if (computedStyle) {
-    height -= int(computedStyle.paddingTop);
-    height -= int(computedStyle.paddingBottom);
-    return height;
-  } else {
-    return height;
-  }
-};
-
-export const innerWidth = (node: HTMLElement): number => {
-  let width = node.clientWidth;
-
-  const computedStyle = node.ownerDocument.defaultView?.getComputedStyle(node);
-
-  if (computedStyle) {
-    width -= int(computedStyle.paddingLeft);
-    width -= int(computedStyle.paddingRight);
-
-    return width;
-  } else {
-    return width;
-  }
-};
-
-export const offsetXYFromParent = (
-  evt: EventWithOffset,
-  offsetParent: Element,
-  scale: number
-): ControlPosition => {
-  const isBody = offsetParent.ownerDocument.body;
-  const offsetParentRect = isBody
-    ? { left: 0, top: 0 }
-    : offsetParent.getBoundingClientRect();
-
-  const x =
-    (evt.clientX + offsetParent.scrollLeft - offsetParentRect.left) / scale;
-  const y =
-    (evt.clientY + offsetParent.scrollTop - offsetParentRect.top) / scale;
-
-  return { x, y };
-};
-
-export const createCSSTransform = (
-  controlPos: ControlPosition,
-  positionOffset?: PositionOffsetControlPosition
-): Object => {
-  const translation = getTranslation(controlPos, "px", positionOffset);
-  return { [browserPrefixToKey("transform", browserPrefix)]: translation };
-};
-
-export const createSVGTransform = (
-  controlPos: ControlPosition,
-  positionOffset?: PositionOffsetControlPosition
-): string => {
-  const translation = getTranslation(controlPos, "", positionOffset);
-
-  return translation;
-};
-
-export const getTranslation = (
-  { x, y }: ControlPosition,
-  unitSuffix: string,
-  positionOffset?: PositionOffsetControlPosition
-): string => {
-  let translation = `translate(${x}${unitSuffix},${y}${unitSuffix})`;
-
-  if (positionOffset) {
-    const defaultX = `${
-      typeof positionOffset.x === "string"
-        ? positionOffset.x
-        : positionOffset.x + unitSuffix
-    }`;
-    const defaultY = `${
-      typeof positionOffset.y === "string"
-        ? positionOffset.y
-        : positionOffset.y + unitSuffix
-    }`;
-
-    translation = `translate(${defaultX}, ${defaultY})` + translation;
-  }
-
-  return translation;
-};
-
-export const getTouch = (
-  e: MouseTouchEvent,
-  identifier: number
-): { clientX: number; clientY: number } => {
-  return (
-    (e.targetTouches &&
-      findInArray(e.targetTouches, (t: any) => identifier === t.identifier)) ||
-    (e.changedTouches &&
-      findInArray(e.changedTouches, (t: any) => identifier === t.identifier))
-  );
-};
-
-export const getTouchIdentifier = (e: MouseTouchEvent): number | undefined => {
-  if (e.targetTouches && e.targetTouches[0]) {
-    return e.targetTouches[0].identifier;
-  }
-
-  if (e.changedTouches && e.changedTouches[0]) {
-    return e.changedTouches[0].identifier;
-  }
-};
-
-export const addUserSelectStyles = (doc?: Document) => {
-  if (!doc) return;
-
-  let styleEl = doc.getElementById("react-draggable-style-el");
-
-  if (!styleEl) {
-    styleEl = doc.createElement("style");
-    styleEl.id = "react-draggable-style-el";
-    styleEl.innerHTML =
-      ".react-draggable-transparent-selection *::-moz-selection {all: inherit;}\n";
-    styleEl.innerHTML +=
-      ".react-draggable-transparent-selection *::selection {all: inherit;}\n";
-    doc.getElementsByTagName("head")[0].appendChild(styleEl);
-  }
-
-  if (doc.body) addClassName(doc.body, "react-draggable-transparent-selection");
-};
-
-export const removeUserSelectStyles = (doc?: Document) => {
-  if (!doc) return;
-
-  if (doc.body) {
-    removeClassName(doc.body, "react-draggable-transparent-selection");
-  }
-
-  if (doc.getSelection()) {
-    doc.getSelection()?.empty();
-  } else {
-    const selection = (doc.defaultView || window).getSelection();
-    if (selection && selection.type !== "Caret") {
-      selection.removeAllRanges();
-    }
-  }
-};
-
-export const addClassName = (el: HTMLElement, className: string) => {
-  if (el.classList) {
-    el.classList.add(className);
-  } else {
-    if (!el.className.match(new RegExp(`(?:^|\\s)${className}(?!\\S)`))) {
-      el.className += ` ${className}`;
-    }
-  }
-};
-
-export const removeClassName = (el: HTMLElement, className: string) => {
-  if (el.classList) {
-    el.classList.remove(className);
-  } else {
-    el.className = el.className.replace(
-      new RegExp(`(?:^|\\s)${className}(?!\\S)`, "g"),
-      ""
-    );
-  }
-};