publ-echo-test 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (68) hide show
  1. package/README.md +29 -0
  2. package/css/gle-styles.css +169 -0
  3. package/css/resizable-styles.css +76 -0
  4. package/dist/external-lib/classnames/index.d.ts +5 -0
  5. package/dist/external-lib/classnames/index.js +60 -0
  6. package/dist/external-lib/lodash.isEqual/index.d.ts +30 -0
  7. package/dist/external-lib/lodash.isEqual/index.js +1661 -0
  8. package/dist/lib/Draggable/Draggable.d.ts +17 -0
  9. package/dist/lib/Draggable/Draggable.js +192 -0
  10. package/dist/lib/Draggable/DraggableCore.d.ts +5 -0
  11. package/dist/lib/Draggable/DraggableCore.js +266 -0
  12. package/dist/lib/Draggable/constants.d.ts +12 -0
  13. package/dist/lib/Draggable/constants.js +12 -0
  14. package/dist/lib/Draggable/index.d.ts +2 -0
  15. package/dist/lib/Draggable/index.js +2 -0
  16. package/dist/lib/Draggable/types.d.ts +55 -0
  17. package/dist/lib/Draggable/types.js +1 -0
  18. package/dist/lib/Draggable/utils/domHelpers.d.ts +22 -0
  19. package/dist/lib/Draggable/utils/domHelpers.js +222 -0
  20. package/dist/lib/Draggable/utils/getPrefix.d.ts +5 -0
  21. package/dist/lib/Draggable/utils/getPrefix.js +41 -0
  22. package/dist/lib/Draggable/utils/positionHelpers.d.ts +7 -0
  23. package/dist/lib/Draggable/utils/positionHelpers.js +32 -0
  24. package/dist/lib/Draggable/utils/types.d.ts +30 -0
  25. package/dist/lib/Draggable/utils/types.js +1 -0
  26. package/dist/lib/Draggable/utils/validationHelpers.d.ts +4 -0
  27. package/dist/lib/Draggable/utils/validationHelpers.js +16 -0
  28. package/dist/lib/GridItem/GridItem.d.ts +5 -0
  29. package/dist/lib/GridItem/GridItem.js +350 -0
  30. package/dist/lib/GridItem/index.d.ts +1 -0
  31. package/dist/lib/GridItem/index.js +1 -0
  32. package/dist/lib/GridItem/types.d.ts +107 -0
  33. package/dist/lib/GridItem/types.js +1 -0
  34. package/dist/lib/GridItem/utils/calculateUtils.d.ts +30 -0
  35. package/dist/lib/GridItem/utils/calculateUtils.js +108 -0
  36. package/dist/lib/GridLayoutEditor/ReactGridLayout.d.ts +6 -0
  37. package/dist/lib/GridLayoutEditor/ReactGridLayout.js +456 -0
  38. package/dist/lib/GridLayoutEditor/ResponsiveGridLayout.d.ts +4 -0
  39. package/dist/lib/GridLayoutEditor/ResponsiveGridLayout.js +117 -0
  40. package/dist/lib/GridLayoutEditor/index.d.ts +3 -0
  41. package/dist/lib/GridLayoutEditor/index.js +2 -0
  42. package/dist/lib/GridLayoutEditor/types.d.ts +133 -0
  43. package/dist/lib/GridLayoutEditor/types.js +1 -0
  44. package/dist/lib/GridLayoutEditor/utils/renderHelpers.d.ts +165 -0
  45. package/dist/lib/GridLayoutEditor/utils/renderHelpers.js +566 -0
  46. package/dist/lib/GridLayoutEditor/utils/responsiveUtils.d.ts +26 -0
  47. package/dist/lib/GridLayoutEditor/utils/responsiveUtils.js +77 -0
  48. package/dist/lib/Resizable/Resizable.d.ts +6 -0
  49. package/dist/lib/Resizable/Resizable.js +215 -0
  50. package/dist/lib/Resizable/ResizableBox.d.ts +7 -0
  51. package/dist/lib/Resizable/ResizableBox.js +57 -0
  52. package/dist/lib/Resizable/index.d.ts +1 -0
  53. package/dist/lib/Resizable/index.js +1 -0
  54. package/dist/lib/Resizable/types.d.ts +63 -0
  55. package/dist/lib/Resizable/types.js +1 -0
  56. package/dist/lib/Resizable/utils/cloneElement.d.ts +2 -0
  57. package/dist/lib/Resizable/utils/cloneElement.js +21 -0
  58. package/dist/lib/components/WidthProvider.d.ts +9 -0
  59. package/dist/lib/components/WidthProvider.js +65 -0
  60. package/dist/lib/components/index.d.ts +1 -0
  61. package/dist/lib/components/index.js +1 -0
  62. package/dist/lib/components/types.d.ts +13 -0
  63. package/dist/lib/components/types.js +1 -0
  64. package/dist/lib/index.d.ts +5 -0
  65. package/dist/lib/index.js +5 -0
  66. package/dist/lib/types.d.ts +4 -0
  67. package/dist/lib/types.js +1 -0
  68. package/package.json +56 -0
@@ -0,0 +1,17 @@
1
+ import React from "react";
2
+ import { Bounds, ControlPosition } from "./utils/types";
3
+ import { AxisType, DraggableCoreDefaultProps, DraggablePositionType, PropsWithChildren } from "./types";
4
+ export type DraggableDefaultProps = {
5
+ axis?: AxisType;
6
+ bounds?: Bounds | string | false;
7
+ defaultClassName?: string;
8
+ defaultClassNameDragging?: string;
9
+ defaultClassNameDragged?: string;
10
+ defaultPosition?: ControlPosition;
11
+ scale?: number;
12
+ nodeRef?: React.RefObject<HTMLElement>;
13
+ className?: string;
14
+ style?: Object;
15
+ } & DraggableCoreDefaultProps & DraggablePositionType;
16
+ declare const Draggable: ({ children, axis, bounds, defaultClassName, defaultClassNameDragging, defaultClassNameDragged, defaultPosition, scale, ...props }: PropsWithChildren<DraggableDefaultProps>) => React.ReactElement;
17
+ export default Draggable;
@@ -0,0 +1,192 @@
1
+ var __assign = (this && this.__assign) || function () {
2
+ __assign = Object.assign || function(t) {
3
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
4
+ s = arguments[i];
5
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
+ t[p] = s[p];
7
+ }
8
+ return t;
9
+ };
10
+ return __assign.apply(this, arguments);
11
+ };
12
+ var __rest = (this && this.__rest) || function (s, e) {
13
+ var t = {};
14
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
15
+ t[p] = s[p];
16
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
17
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
18
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
19
+ t[p[i]] = s[p[i]];
20
+ }
21
+ return t;
22
+ };
23
+ import { jsx as _jsx } from "react/jsx-runtime";
24
+ import React, { useEffect, useRef, useState } from "react";
25
+ import DraggableCore from "./DraggableCore";
26
+ import { canDragX, canDragY, cloneBounds, createDraggableData, } from "./utils/positionHelpers";
27
+ import { int, isNum } from "./utils/validationHelpers";
28
+ import { createCSSTransform, createSVGTransform, innerHeight, innerWidth, outerHeight, outerWidth, } from "./utils/domHelpers";
29
+ import classNames from "../../external-lib/classnames";
30
+ var Draggable = function (_a) {
31
+ var _b, _c;
32
+ var children = _a.children, _d = _a.axis, axis = _d === void 0 ? "both" : _d, _e = _a.bounds, bounds = _e === void 0 ? false : _e, _f = _a.defaultClassName, defaultClassName = _f === void 0 ? "react-draggable" : _f, _g = _a.defaultClassNameDragging, defaultClassNameDragging = _g === void 0 ? "react-draggable-dragging" : _g, _h = _a.defaultClassNameDragged, defaultClassNameDragged = _h === void 0 ? "react-draggable-dragged" : _h, _j = _a.defaultPosition, defaultPosition = _j === void 0 ? { x: 0, y: 0 } : _j, _k = _a.scale, scale = _k === void 0 ? 1 : _k, props = __rest(_a, ["children", "axis", "bounds", "defaultClassName", "defaultClassNameDragging", "defaultClassNameDragged", "defaultPosition", "scale"]);
33
+ var position = props.position, positionOffset = props.positionOffset, draggableCoreProps = __rest(props, ["position", "positionOffset"]);
34
+ var draggableRef = useRef(null);
35
+ var _l = useState({
36
+ dragged: false,
37
+ dragging: false,
38
+ x: position ? position === null || position === void 0 ? void 0 : position.x : defaultPosition.x,
39
+ y: position ? position === null || position === void 0 ? void 0 : position.y : defaultPosition.y,
40
+ slackX: 0,
41
+ slackY: 0,
42
+ isElementSVG: false,
43
+ prevPropsPosition: position,
44
+ }), draggableState = _l[0], setDraggableState = _l[1];
45
+ /**
46
+ * @when Draggable이 화면에 그려질 때
47
+ * @expected 해당 DOMNode가 SVGElement인지를 확인
48
+ * @clear 페이지를 나갔을 때 dragging을 false로 변경하여 drag되지 않도록 설정
49
+ */
50
+ useEffect(function () {
51
+ if (typeof window.SVGElement !== "undefined" &&
52
+ findDOMNode() instanceof window.SVGElement) {
53
+ setDraggableState(function (prevState) { return (__assign(__assign({}, prevState), { isElementSVG: true })); });
54
+ }
55
+ return function () {
56
+ setDraggableState(function (prevState) { return (__assign(__assign({}, prevState), { dragging: false })); });
57
+ };
58
+ }, []);
59
+ var style = {};
60
+ var svgTransform = null;
61
+ var findDOMNode = function () {
62
+ var _a, _b;
63
+ return (_b = (_a = props === null || props === void 0 ? void 0 : props.nodeRef) === null || _a === void 0 ? void 0 : _a.current) !== null && _b !== void 0 ? _b : draggableRef === null || draggableRef === void 0 ? void 0 : draggableRef.current;
64
+ };
65
+ var getBoundPosition = function (x, y, node) {
66
+ var _a;
67
+ if (!bounds)
68
+ return [x, y];
69
+ var newBounds = bounds;
70
+ newBounds = typeof bounds === "string" ? bounds : cloneBounds(bounds);
71
+ if (typeof newBounds === "string") {
72
+ var ownerWindow = (_a = node === null || node === void 0 ? void 0 : node.ownerDocument) === null || _a === void 0 ? void 0 : _a.defaultView;
73
+ var boundNode = void 0;
74
+ if (newBounds === "parent") {
75
+ boundNode = node === null || node === void 0 ? void 0 : node.parentNode;
76
+ }
77
+ else {
78
+ boundNode = node === null || node === void 0 ? void 0 : node.ownerDocument.querySelector(newBounds);
79
+ }
80
+ if (!(ownerWindow && boundNode instanceof ownerWindow.HTMLElement)) {
81
+ throw new Error('Bounds selector "' + newBounds + '" could not find an element');
82
+ }
83
+ var boundNodeElement = boundNode;
84
+ var nodeStyle = ownerWindow.getComputedStyle(node);
85
+ var boundNodeStyle = ownerWindow.getComputedStyle(boundNodeElement);
86
+ newBounds = {
87
+ left: -node.offsetLeft +
88
+ int(boundNodeStyle.paddingLeft) +
89
+ int(nodeStyle.marginLeft),
90
+ top: -node.offsetTop +
91
+ int(boundNodeStyle.paddingTop) +
92
+ int(nodeStyle.marginTop),
93
+ right: innerWidth(boundNodeElement) -
94
+ outerWidth(node) -
95
+ node.offsetLeft +
96
+ int(boundNodeStyle.paddingRight) -
97
+ int(nodeStyle.marginRight),
98
+ bottom: innerHeight(boundNodeElement) -
99
+ outerHeight(node) -
100
+ node.offsetTop +
101
+ int(boundNodeStyle.paddingBottom) -
102
+ int(nodeStyle.marginBottom),
103
+ };
104
+ }
105
+ if (isNum(newBounds.right))
106
+ x = Math.min(x, newBounds.right);
107
+ if (isNum(newBounds.bottom))
108
+ y = Math.min(y, newBounds.bottom);
109
+ if (isNum(newBounds.left))
110
+ x = Math.max(x, newBounds.left);
111
+ if (isNum(newBounds.top))
112
+ y = Math.max(y, newBounds.top);
113
+ return [x, y];
114
+ };
115
+ var handleDragStart = function (e, coreData) {
116
+ if (props.onStart) {
117
+ var shouldStart = props.onStart(e, createDraggableData(draggableState, scale, coreData));
118
+ if (shouldStart === false)
119
+ return false;
120
+ }
121
+ setDraggableState(function (prev) { return (__assign(__assign({}, prev), { dragged: true, dragging: true })); });
122
+ };
123
+ var handleDrag = function (e, coreData, node) {
124
+ if (!draggableState.dragging)
125
+ return false;
126
+ var uiData = createDraggableData(draggableState, scale, coreData);
127
+ var newState = __assign(__assign({}, draggableState), { x: uiData.x, y: uiData.y });
128
+ if (bounds) {
129
+ var x = newState.x, y = newState.y;
130
+ newState.x += draggableState.slackX;
131
+ newState.y += draggableState.slackY;
132
+ var _a = getBoundPosition(newState.x, newState.y, node), newBoundPositionX = _a[0], newBoundPositionY = _a[1];
133
+ newState.x = newBoundPositionX;
134
+ newState.y = newBoundPositionY;
135
+ newState.slackX = draggableState.slackX + (x - newState.x);
136
+ newState.slackY = draggableState.slackY + (y - newState.y);
137
+ uiData.x = newState.x;
138
+ uiData.y = newState.y;
139
+ uiData.deltaX = newState.x - draggableState.x;
140
+ uiData.deltaY = newState.y - draggableState.y;
141
+ }
142
+ if (props.onDrag) {
143
+ var shouldUpdate = props.onDrag(e, uiData);
144
+ if (shouldUpdate === false)
145
+ return false;
146
+ }
147
+ setDraggableState(function (prevState) { return (__assign(__assign({}, prevState), { x: newState.x, y: newState.y })); });
148
+ };
149
+ var handleDragStop = function (e, coreData) {
150
+ if (!draggableState.dragging)
151
+ return false;
152
+ if (props.onStop) {
153
+ var shouldContinue = props.onStop(e, createDraggableData(draggableState, scale, coreData));
154
+ if (shouldContinue === false)
155
+ return false;
156
+ }
157
+ if (position && Boolean(position)) {
158
+ var x_1 = position.x, y_1 = position.y;
159
+ setDraggableState(function (prevState) { return (__assign(__assign({}, prevState), { x: x_1, y: y_1, dragging: false, slackX: 0, slackY: 0 })); });
160
+ }
161
+ else {
162
+ setDraggableState(function (prevState) { return (__assign(__assign({}, prevState), { dragging: false, slackX: 0, slackY: 0 })); });
163
+ }
164
+ };
165
+ var controlled = Boolean(position);
166
+ var draggable = !controlled || draggableState.dragging;
167
+ var validPosition = position || defaultPosition;
168
+ var transformOptions = {
169
+ x: canDragX(axis) && draggable ? draggableState.x : validPosition.x,
170
+ y: canDragY(axis) && draggable ? draggableState.y : validPosition.y,
171
+ };
172
+ if (draggableState.isElementSVG) {
173
+ svgTransform = createSVGTransform(transformOptions, positionOffset);
174
+ }
175
+ else {
176
+ style = createCSSTransform(transformOptions, positionOffset);
177
+ }
178
+ var className = classNames(props.className || "", defaultClassName, (_b = {}, _b[defaultClassNameDragging] = draggableState.dragging, _b), (_c = {}, _c[defaultClassNameDragged] = draggableState.dragged, _c));
179
+ // NOTE - class형 컴포넌트에서 사용되는 getDerivedStateFromProps에 대응하기 위한 조건문입니다.
180
+ if (position &&
181
+ (!draggableState.prevPropsPosition ||
182
+ position.x !== draggableState.prevPropsPosition.x ||
183
+ position.y !== draggableState.prevPropsPosition.y)) {
184
+ setDraggableState(function (prevState) { return (__assign(__assign({}, prevState), { x: position.x, y: position.y, prevPropsPosition: __assign({}, position) })); });
185
+ }
186
+ return (_jsx(DraggableCore, __assign({}, draggableCoreProps, { onStart: handleDragStart, onDrag: handleDrag, onStop: handleDragStop, children: React.cloneElement(children, {
187
+ className: className,
188
+ style: __assign(__assign({}, props.style), style),
189
+ transform: svgTransform,
190
+ }) })));
191
+ };
192
+ export default Draggable;
@@ -0,0 +1,5 @@
1
+ import React from "react";
2
+ import { DraggableCoreDefaultProps, PropsWithChildren } from "./types";
3
+ type Props = DraggableCoreDefaultProps;
4
+ declare const DraggableCore: ({ allowAnyClick, disabled, enableUserSelectHack, onStart, onDrag, onStop, onMouseDown, scale, children, ...props }: PropsWithChildren<Props>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
5
+ export default DraggableCore;
@@ -0,0 +1,266 @@
1
+ var __assign = (this && this.__assign) || function () {
2
+ __assign = Object.assign || function(t) {
3
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
4
+ s = arguments[i];
5
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
+ t[p] = s[p];
7
+ }
8
+ return t;
9
+ };
10
+ return __assign.apply(this, arguments);
11
+ };
12
+ var __rest = (this && this.__rest) || function (s, e) {
13
+ var t = {};
14
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
15
+ t[p] = s[p];
16
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
17
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
18
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
19
+ t[p[i]] = s[p[i]];
20
+ }
21
+ return t;
22
+ };
23
+ import React, { useEffect, useRef, useState } from "react";
24
+ import { addEvent, addUserSelectStyles, getTouch, getTouchIdentifier, matchSelectorAndParentsTo, offsetXYFromParent, removeEvent, removeUserSelectStyles, } from "./utils/domHelpers";
25
+ import { isNum } from "./utils/validationHelpers";
26
+ import { snapToGrid } from "./utils/positionHelpers";
27
+ import { EVENTS } from "./constants";
28
+ var DraggableCore = function (_a) {
29
+ var _b;
30
+ var _c = _a.allowAnyClick, allowAnyClick = _c === void 0 ? false : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.enableUserSelectHack, enableUserSelectHack = _e === void 0 ? true : _e, _f = _a.onStart, onStart = _f === void 0 ? function () { } : _f, _g = _a.onDrag, onDrag = _g === void 0 ? function () { } : _g, _h = _a.onStop, onStop = _h === void 0 ? function () { } : _h, _j = _a.onMouseDown, onMouseDown = _j === void 0 ? function () { } : _j, _k = _a.scale, scale = _k === void 0 ? 1 : _k, children = _a.children, props = __rest(_a, ["allowAnyClick", "disabled", "enableUserSelectHack", "onStart", "onDrag", "onStop", "onMouseDown", "scale", "children"]);
31
+ var draggableCoreRef = useRef(null);
32
+ var isMounted = useRef(false);
33
+ var _l = useState({
34
+ dragging: false,
35
+ lastX: NaN,
36
+ lastY: NaN,
37
+ touchIdentifier: null,
38
+ }), draggableCoreState = _l[0], setDraggableCoreState = _l[1];
39
+ /**
40
+ * @when DraggableCore가 랜더링 했을 때
41
+ * @expected 해당 DOMNode에서 Drag가 동작할 수 있도록 event를 추가합니다.
42
+ * @clear 등록된 모든 EventListener들을 remove합니다.
43
+ */
44
+ useEffect(function () {
45
+ var thisNode = findDOMNode();
46
+ if (thisNode) {
47
+ addEvent(thisNode, EVENTS.TOUCH.START, handleTouchStart, {
48
+ passive: false,
49
+ });
50
+ if (draggableCoreState.dragging) {
51
+ addEvent(thisNode.ownerDocument, dragEventFor.MOVE, handleDrag);
52
+ addEvent(thisNode.ownerDocument, dragEventFor.STOP, handleDragStop);
53
+ }
54
+ else {
55
+ removeEvent(thisNode.ownerDocument, dragEventFor.MOVE, handleDrag);
56
+ removeEvent(thisNode.ownerDocument, dragEventFor.STOP, handleDragStop);
57
+ }
58
+ }
59
+ return function () {
60
+ if (thisNode) {
61
+ var ownerDocument = thisNode.ownerDocument;
62
+ removeEvent(ownerDocument, EVENTS.MOUSE.MOVE, handleDrag);
63
+ removeEvent(ownerDocument, EVENTS.MOUSE.STOP, handleDragStop);
64
+ removeEvent(ownerDocument, EVENTS.TOUCH.MOVE, handleDrag);
65
+ removeEvent(ownerDocument, EVENTS.TOUCH.STOP, handleDragStop);
66
+ removeEvent(thisNode, EVENTS.TOUCH.START, handleTouchStart, {
67
+ passive: false,
68
+ });
69
+ }
70
+ };
71
+ }, [handleDragStart, handleDrag, handleDragStop]);
72
+ /**
73
+ * @when DraggableCore가 랜더링 했을 때
74
+ * @expected mount된 상태를 true로 변경합니다.
75
+ * @clear mount된 상태를 false로 변경하고, 등록된 styles을 제거합니다.
76
+ */
77
+ useEffect(function () {
78
+ isMounted.current = true;
79
+ return function () {
80
+ isMounted.current = false;
81
+ var thisNode = findDOMNode();
82
+ if (thisNode) {
83
+ var ownerDocument = thisNode.ownerDocument;
84
+ if (enableUserSelectHack)
85
+ removeUserSelectStyles(ownerDocument);
86
+ }
87
+ };
88
+ // NOTE - react-draggable과 동일하게 동작하게 하기 위해서 dependency를 제거하였습니다.
89
+ }, []);
90
+ var dragEventFor = EVENTS.MOUSE;
91
+ // NOTE - draggable할 node element를 찾는 함수
92
+ var findDOMNode = function () {
93
+ var _a, _b;
94
+ return (_b = (_a = props === null || props === void 0 ? void 0 : props.nodeRef) === null || _a === void 0 ? void 0 : _a.current) !== null && _b !== void 0 ? _b : draggableCoreRef === null || draggableCoreRef === void 0 ? void 0 : draggableCoreRef.current;
95
+ };
96
+ // NOTE - event 발생 시 {x, y} position을 가져오는 함수
97
+ var getControlPosition = function (e, touchIdentifier) {
98
+ var _a;
99
+ var touchObj = typeof touchIdentifier === "number" ? getTouch(e, touchIdentifier) : null;
100
+ // NOTE - 올바르게 touch를 하지 않은 경우
101
+ if (typeof touchIdentifier === "number" && !touchObj)
102
+ return null;
103
+ var thisNode = findDOMNode();
104
+ var offsetParent = (props === null || props === void 0 ? void 0 : props.offsetParent) ||
105
+ (thisNode === null || thisNode === void 0 ? void 0 : thisNode.offsetParent) ||
106
+ ((_a = thisNode === null || thisNode === void 0 ? void 0 : thisNode.ownerDocument) === null || _a === void 0 ? void 0 : _a.body);
107
+ if (!offsetParent)
108
+ return null;
109
+ return offsetXYFromParent(touchObj || e, offsetParent, scale);
110
+ };
111
+ var createCoreData = function (x, y) {
112
+ var isStart = !isNum(draggableCoreState.lastX);
113
+ var node = findDOMNode();
114
+ if (!node)
115
+ return;
116
+ if (isStart) {
117
+ return {
118
+ node: node,
119
+ deltaX: 0,
120
+ deltaY: 0,
121
+ lastX: x,
122
+ lastY: y,
123
+ x: x,
124
+ y: y,
125
+ };
126
+ }
127
+ else {
128
+ return {
129
+ node: node,
130
+ deltaX: x - draggableCoreState.lastX,
131
+ deltaY: y - draggableCoreState.lastY,
132
+ lastX: draggableCoreState.lastX,
133
+ lastY: draggableCoreState.lastY,
134
+ x: x,
135
+ y: y,
136
+ };
137
+ }
138
+ };
139
+ function handleDragStart(e) {
140
+ onMouseDown && onMouseDown(e);
141
+ // NOTE - left clicks만 가능
142
+ if (!allowAnyClick && typeof e.button === "number" && e.button !== 0) {
143
+ return false;
144
+ }
145
+ var thisNode = findDOMNode();
146
+ if (!thisNode || !thisNode.ownerDocument || !thisNode.ownerDocument.body) {
147
+ throw new Error("<DraggableCore> not mounted on DragStart!");
148
+ }
149
+ var ownerDocument = thisNode.ownerDocument;
150
+ // NOTE - handle || cancel prop이 제공되었을 때 selector와 match되는지를 확인
151
+ // handle prop이 존재할 때, matchSelectorAndParentsTo 메소드를 통해 thisNode와 일치하는 element만 Drag 가능
152
+ // cancel prop이 존재할 때, matchSelectorAndParentsTo 메소드를 통해 thisNode와 일치하는 element는 Drag 불가능
153
+ if (disabled ||
154
+ !(ownerDocument.defaultView &&
155
+ e.target instanceof ownerDocument.defaultView.Node) ||
156
+ (props.handle &&
157
+ !matchSelectorAndParentsTo(e.target, props.handle, thisNode)) ||
158
+ (props.cancel &&
159
+ matchSelectorAndParentsTo(e.target, props.cancel, thisNode))) {
160
+ return;
161
+ }
162
+ // NOTE - ipad || iphone과 같은 mobile 기기에서 scroll 방지
163
+ if (e.type === "touchstart")
164
+ e.preventDefault();
165
+ // NOTE - touch event가 발생했을 때 multi touch 상황에서 각각의 터치를 구분하고 다른 처리를 할 수 있게 하기 위함입니다.
166
+ var touchIdentifier = getTouchIdentifier(e);
167
+ if (touchIdentifier) {
168
+ setDraggableCoreState(__assign(__assign({}, draggableCoreState), { touchIdentifier: touchIdentifier }));
169
+ }
170
+ var position = getControlPosition(e, touchIdentifier);
171
+ if (!position)
172
+ return;
173
+ var x = position.x, y = position.y;
174
+ var coreEvent = createCoreData(x, y);
175
+ if (!coreEvent)
176
+ return;
177
+ var shouldUpdate = onStart(e, coreEvent);
178
+ if (shouldUpdate === false || isMounted.current === false)
179
+ return;
180
+ if (enableUserSelectHack)
181
+ addUserSelectStyles(ownerDocument);
182
+ setDraggableCoreState(function (prev) { return (__assign(__assign({}, prev), { dragging: true, lastX: x, lastY: y })); });
183
+ }
184
+ function handleDrag(e) {
185
+ var _a;
186
+ var position = getControlPosition(e, draggableCoreState.touchIdentifier);
187
+ if (!position)
188
+ return;
189
+ var x = position.x, y = position.y;
190
+ if (Array.isArray(props.grid)) {
191
+ var deltaX = x - draggableCoreState.lastX;
192
+ var deltaY = y - draggableCoreState.lastY;
193
+ _a = snapToGrid(props.grid, deltaX, deltaY), deltaX = _a[0], deltaY = _a[1];
194
+ if (!deltaX && !deltaY)
195
+ return;
196
+ x = draggableCoreState.lastX + deltaX;
197
+ y = draggableCoreState.lastY + deltaY;
198
+ }
199
+ var coreEvent = createCoreData(x, y);
200
+ var thisNode = findDOMNode();
201
+ if (!coreEvent || !thisNode)
202
+ return;
203
+ var shouldUpdate = onDrag(e, coreEvent, thisNode);
204
+ if (shouldUpdate === false || isMounted.current === false) {
205
+ handleDragStop(e);
206
+ return;
207
+ }
208
+ setDraggableCoreState(function (prevState) { return (__assign(__assign({}, prevState), { lastX: x, lastY: y })); });
209
+ }
210
+ function handleDragStop(e) {
211
+ var _a;
212
+ if (!draggableCoreState.dragging)
213
+ return;
214
+ var position = getControlPosition(e, draggableCoreState.touchIdentifier);
215
+ if (!position)
216
+ return;
217
+ var x = position.x, y = position.y;
218
+ if (Array.isArray(props === null || props === void 0 ? void 0 : props.grid)) {
219
+ var deltaX = x - draggableCoreState.lastX || 0;
220
+ var deltaY = y - draggableCoreState.lastY || 0;
221
+ _a = snapToGrid(props === null || props === void 0 ? void 0 : props.grid, deltaX, deltaY), deltaX = _a[0], deltaY = _a[1];
222
+ x = draggableCoreState.lastX + deltaX;
223
+ y = draggableCoreState.lastY + deltaY;
224
+ }
225
+ var coreEvent = createCoreData(x, y);
226
+ if (!coreEvent)
227
+ return;
228
+ var shouldContinue = onStop(e, coreEvent);
229
+ if (shouldContinue === false || isMounted.current === false)
230
+ return false;
231
+ var thisNode = findDOMNode();
232
+ if (thisNode) {
233
+ if (enableUserSelectHack)
234
+ removeUserSelectStyles(thisNode.ownerDocument);
235
+ }
236
+ setDraggableCoreState(function (prev) { return (__assign(__assign({}, prev), { dragging: false, lastX: NaN, lastY: NaN })); });
237
+ if (thisNode) {
238
+ removeEvent(thisNode.ownerDocument, dragEventFor.MOVE, handleDrag);
239
+ removeEvent(thisNode.ownerDocument, dragEventFor.STOP, handleDragStop);
240
+ }
241
+ }
242
+ var handleMouseDown = function (e) {
243
+ dragEventFor = EVENTS.MOUSE;
244
+ return handleDragStart(e);
245
+ };
246
+ var handleMouseUp = function (e) {
247
+ dragEventFor = EVENTS.MOUSE;
248
+ return handleDragStop(e);
249
+ };
250
+ // NOTE - handleMouseDown(start drag)과 동일하지만 touch device에 대응
251
+ var handleTouchStart = function (e) {
252
+ dragEventFor = EVENTS.TOUCH;
253
+ return handleDragStart(e);
254
+ };
255
+ var handleTouchEnd = function (e) {
256
+ dragEventFor = EVENTS.TOUCH;
257
+ return handleDragStop(e);
258
+ };
259
+ return React.cloneElement(children, {
260
+ onMouseDown: handleMouseDown,
261
+ onMouseUp: handleMouseUp,
262
+ onTouchEnd: handleTouchEnd,
263
+ ref: (_b = props.nodeRef) !== null && _b !== void 0 ? _b : draggableCoreRef,
264
+ });
265
+ };
266
+ export default DraggableCore;
@@ -0,0 +1,12 @@
1
+ export declare const EVENTS: {
2
+ TOUCH: {
3
+ START: string;
4
+ MOVE: string;
5
+ STOP: string;
6
+ };
7
+ MOUSE: {
8
+ START: string;
9
+ MOVE: string;
10
+ STOP: string;
11
+ };
12
+ };
@@ -0,0 +1,12 @@
1
+ export var EVENTS = {
2
+ TOUCH: {
3
+ START: "touchstart",
4
+ MOVE: "touchmove",
5
+ STOP: "touchend",
6
+ },
7
+ MOUSE: {
8
+ START: "mousedown",
9
+ MOVE: "mousemove",
10
+ STOP: "mouseup",
11
+ },
12
+ };
@@ -0,0 +1,2 @@
1
+ export { default as Draggable } from "./Draggable";
2
+ export { default as DraggableCore } from "./DraggableCore";
@@ -0,0 +1,2 @@
1
+ export { default as Draggable } from "./Draggable";
2
+ export { default as DraggableCore } from "./DraggableCore";
@@ -0,0 +1,55 @@
1
+ import { ReactElement, RefObject } from "react";
2
+ import { ControlPosition, DraggableEventHandler, PositionOffsetControlPosition } from "./utils/types";
3
+ export type DraggableCoreState = {
4
+ dragging: boolean;
5
+ lastX: number;
6
+ lastY: number;
7
+ touchIdentifier?: number | null;
8
+ };
9
+ export type DraggableData = {
10
+ node: HTMLElement;
11
+ x: number;
12
+ y: number;
13
+ deltaX: number;
14
+ deltaY: number;
15
+ lastX: number;
16
+ lastY: number;
17
+ };
18
+ export type DraggableCoreDefaultProps = {
19
+ allowAnyClick?: boolean;
20
+ disabled?: boolean;
21
+ enableUserSelectHack?: boolean;
22
+ onStart?: DraggableEventHandler | Function;
23
+ onDrag?: DraggableEventHandler | Function;
24
+ onStop?: DraggableEventHandler | Function;
25
+ onMouseDown?: (e: MouseEvent) => void;
26
+ scale?: number;
27
+ cancel?: string;
28
+ children: ReactElement<any>;
29
+ offsetParent?: HTMLElement;
30
+ grid?: [number, number];
31
+ handle?: string;
32
+ nodeRef?: RefObject<HTMLElement>;
33
+ className?: string;
34
+ style?: Object;
35
+ };
36
+ export type DraggableState = {
37
+ dragging: boolean;
38
+ dragged: boolean;
39
+ x: number;
40
+ y: number;
41
+ slackX: number;
42
+ slackY: number;
43
+ isElementSVG: boolean;
44
+ prevPropsPosition?: ControlPosition;
45
+ };
46
+ export type DraggablePositionType = {
47
+ positionOffset?: PositionOffsetControlPosition;
48
+ position?: ControlPosition;
49
+ };
50
+ export type DraggableProps = DraggablePositionType & DraggableCoreDefaultProps;
51
+ export type PropsWithChildren<P> = P & {
52
+ children: ReactElement<any>;
53
+ };
54
+ export type AxisType = "both" | "x" | "y" | "none";
55
+ export type DraggableEvent = React.MouseEvent<HTMLElement | SVGElement> | React.TouchEvent<HTMLElement | SVGElement> | MouseEvent | TouchEvent;
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,22 @@
1
+ import type { ControlPosition, PositionOffsetControlPosition, MouseTouchEvent, EventWithOffset, EventHandler } from "./types";
2
+ export declare const matchSelector: (el: Node, selector: string) => boolean;
3
+ export declare const matchSelectorAndParentsTo: (el: Node, selector: string, baseNode: Node) => boolean;
4
+ export declare const addEvent: (el: Node, eventType: string, handler: EventHandler<any>, inputOptions?: Object) => void;
5
+ export declare const removeEvent: (el: Node, eventType: string, handler: EventHandler<any>, inputOptions?: Object) => void;
6
+ export declare const outerHeight: (node: HTMLElement) => number;
7
+ export declare const outerWidth: (node: HTMLElement) => number;
8
+ export declare const innerHeight: (node: HTMLElement) => number;
9
+ export declare const innerWidth: (node: HTMLElement) => number;
10
+ export declare const offsetXYFromParent: (evt: EventWithOffset, offsetParent: Element, scale: number) => ControlPosition;
11
+ export declare const createCSSTransform: (controlPos: ControlPosition, positionOffset?: PositionOffsetControlPosition) => Object;
12
+ export declare const createSVGTransform: (controlPos: ControlPosition, positionOffset?: PositionOffsetControlPosition) => string;
13
+ export declare const getTranslation: ({ x, y }: ControlPosition, unitSuffix: string, positionOffset?: PositionOffsetControlPosition) => string;
14
+ export declare const getTouch: (e: MouseTouchEvent, identifier: number) => {
15
+ clientX: number;
16
+ clientY: number;
17
+ };
18
+ export declare const getTouchIdentifier: (e: MouseTouchEvent) => number | undefined;
19
+ export declare const addUserSelectStyles: (doc?: Document) => void;
20
+ export declare const removeUserSelectStyles: (doc?: Document) => void;
21
+ export declare const addClassName: (el: HTMLElement, className: string) => void;
22
+ export declare const removeClassName: (el: HTMLElement, className: string) => void;