publ-echo 0.0.1

package/src/lib/Draggable/types.ts

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

@@ -0,0 +1,284 @@
+/* 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"),
+      ""
+    );
+  }
+};

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

@@ -0,0 +1,42 @@
+const prefixes = ["Moz", "Webkit", "O", "ms"];
+
+export function getPrefix(prop: string = "transform"): string {
+  if (typeof window === "undefined") return "";
+
+  const style = window.document?.documentElement?.style;
+  if (!style) return "";
+
+  if (prop in style) return "";
+
+  for (let i = 0; i < prefixes.length; i++) {
+    if (browserPrefixToKey(prop, prefixes[i]) in style) return prefixes[i];
+  }
+
+  return "";
+}
+
+export function browserPrefixToKey(prop: string, prefix: string): string {
+  return prefix ? `${prefix}${kebabToTitleCase(prop)}` : prop;
+}
+
+export function browserPrefixToStyle(prop: string, prefix: string): string {
+  return prefix ? `-${prefix.toLowerCase()}-${prop}` : prop;
+}
+
+function kebabToTitleCase(str: string): string {
+  let out = "";
+  let shouldCapitalize = true;
+  for (let i = 0; i < str.length; i++) {
+    if (shouldCapitalize) {
+      out += str[i].toUpperCase();
+      shouldCapitalize = false;
+    } else if (str[i] === "-") {
+      shouldCapitalize = true;
+    } else {
+      out += str[i];
+    }
+  }
+  return out;
+}
+
+export default getPrefix();

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

@@ -0,0 +1,49 @@
+import { AxisType, DraggableData, DraggableState } from "./../types";
+import type { Bounds } from "./types";
+
+export function snapToGrid(
+  grid: [number, number],
+  pendingX: number,
+  pendingY: number
+): [number, number] {
+  const x = Math.round(pendingX / grid[0]) * grid[0];
+  const y = Math.round(pendingY / grid[1]) * grid[1];
+
+  return [x, y];
+}
+
+export function canDragX(axis: AxisType): boolean {
+  return axis === "both" || axis === "x";
+}
+
+export function canDragY(axis: AxisType): boolean {
+  return axis === "both" || axis === "y";
+}
+
+export const cloneBounds = (bounds: Bounds): Bounds => {
+  return {
+    left: bounds.left,
+    top: bounds.top,
+    right: bounds.right,
+    bottom: bounds.bottom,
+  };
+};
+
+export const createDraggableData = (
+  draggableState: DraggableState,
+  scale: number,
+  coreData: DraggableData
+): DraggableData => {
+  const deltaX = coreData.deltaX / scale;
+  const deltaY = coreData.deltaY / scale;
+
+  return {
+    node: coreData.node,
+    x: draggableState.x + deltaX,
+    y: draggableState.y + deltaY,
+    deltaX,
+    deltaY,
+    lastX: draggableState.x,
+    lastY: draggableState.y,
+  };
+};

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

@@ -0,0 +1,41 @@
+import { DraggableData } from "../types";
+
+export type DraggableEvent =
+  | React.MouseEvent<HTMLElement | SVGElement>
+  | React.TouchEvent<HTMLElement | SVGElement>
+  | MouseEvent
+  | TouchEvent;
+
+export type DraggableEventHandler = (
+  e: MouseEvent,
+  data: DraggableData,
+  el?: HTMLElement | null
+) => void | false;
+
+export type Bounds = {
+  left: number;
+  top: number;
+  right: number;
+  bottom: number;
+};
+
+export type ControlPosition = { x: number; y: number };
+export type PositionOffsetControlPosition = {
+  x: number | string;
+  y: number | string;
+};
+export type EventHandler<T> = (e: T) => void | false;
+
+export interface SVGElement extends HTMLElement {}
+
+export interface TouchEvent2 extends TouchEvent {
+  changedTouches: TouchList;
+  targetTouches: TouchList;
+}
+
+export type MouseTouchEvent = MouseEvent & TouchEvent2;
+
+export type EventWithOffset = {
+  clientX: number;
+  clientY: number;
+};

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

@@ -0,0 +1,23 @@
+export const findInArray = (
+  array: Array<any> | TouchList,
+  callback: Function
+): any => {
+  for (let i = 0, length = array.length; i < length; i++) {
+    if (callback.apply(callback, [array[i], i, array])) return array[i];
+  }
+};
+
+export const isFunction = (func: any): boolean => {
+  return (
+    typeof func === "function" ||
+    Object.prototype.toString.call(func) === "[object Function]"
+  );
+};
+
+export const isNum = (num: any): boolean => {
+  return typeof num === "number" && !isNaN(num);
+};
+
+export const int = (a: string): number => {
+  return parseInt(a, 10);
+};