1 | 'use strict';
|
2 |
|
3 | Object.defineProperty(exports, "__esModule", {
|
4 | value: true
|
5 | });
|
6 |
|
7 | var _extends2 = require('babel-runtime/helpers/extends');
|
8 |
|
9 | var _extends3 = _interopRequireDefault(_extends2);
|
10 |
|
11 | var _stringify = require('babel-runtime/core-js/json/stringify');
|
12 |
|
13 | var _stringify2 = _interopRequireDefault(_stringify);
|
14 |
|
15 | var _regenerator = require('babel-runtime/regenerator');
|
16 |
|
17 | var _regenerator2 = _interopRequireDefault(_regenerator);
|
18 |
|
19 | var _asyncToGenerator2 = require('babel-runtime/helpers/asyncToGenerator');
|
20 |
|
21 | var _asyncToGenerator3 = _interopRequireDefault(_asyncToGenerator2);
|
22 |
|
23 | var _propTypes = require('prop-types');
|
24 |
|
25 | var _propTypes2 = _interopRequireDefault(_propTypes);
|
26 |
|
27 | var _react = require('react');
|
28 |
|
29 | var _react2 = _interopRequireDefault(_react);
|
30 |
|
31 | var _recompose = require('recompose');
|
32 |
|
33 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
34 |
|
35 | var PointerUser = function PointerUser(_ref) {
|
36 | var threshold = _ref.threshold,
|
37 | children = _ref.children,
|
38 | updateState = _ref.updateState,
|
39 | resetState = _ref.resetState,
|
40 | state = _ref.state,
|
41 | _ref$state = _ref.state,
|
42 | mainDelta = _ref$state.mainDelta,
|
43 | initLeft = _ref$state.initLeft,
|
44 | initTop = _ref$state.initTop,
|
45 | previousLeft = _ref$state.previousLeft,
|
46 | previousTop = _ref$state.previousTop,
|
47 | isDragging = _ref$state.isDragging,
|
48 | hasCapture = _ref$state.hasCapture,
|
49 | delta = _ref$state.delta;
|
50 |
|
51 | var onDown = function () {
|
52 | var _ref2 = (0, _asyncToGenerator3.default)( _regenerator2.default.mark(function _callee(e) {
|
53 | return _regenerator2.default.wrap(function _callee$(_context) {
|
54 | while (1) {
|
55 | switch (_context.prev = _context.next) {
|
56 | case 0:
|
57 | e.target.setPointerCapture(e.pointerId);
|
58 |
|
59 | _context.next = 3;
|
60 | return updateState({ initLeft: e.clientX, initTop: e.clientY });
|
61 |
|
62 | case 3:
|
63 | _context.next = 5;
|
64 | return updateState({ isDragging: true });
|
65 |
|
66 | case 5:
|
67 | case 'end':
|
68 | return _context.stop();
|
69 | }
|
70 | }
|
71 | }, _callee, undefined);
|
72 | }));
|
73 |
|
74 | return function onDown(_x) {
|
75 | return _ref2.apply(this, arguments);
|
76 | };
|
77 | }();
|
78 | var extractPositionDelta = function () {
|
79 | var _ref3 = (0, _asyncToGenerator3.default)( _regenerator2.default.mark(function _callee2(e) {
|
80 | var left, top, delta, mainDelta;
|
81 | return _regenerator2.default.wrap(function _callee2$(_context2) {
|
82 | while (1) {
|
83 | switch (_context2.prev = _context2.next) {
|
84 | case 0:
|
85 | left = e.clientX;
|
86 | top = e.clientY;
|
87 | delta = { left: left - previousLeft, top: top - previousTop };
|
88 | mainDelta = {
|
89 | left: left - initLeft,
|
90 | top: top - initTop
|
91 | };
|
92 | _context2.next = 6;
|
93 | return updateState({ previousLeft: left });
|
94 |
|
95 | case 6:
|
96 | _context2.next = 8;
|
97 | return updateState({ previousTop: top });
|
98 |
|
99 | case 8:
|
100 | _context2.next = 10;
|
101 | return updateState({ delta: delta });
|
102 |
|
103 | case 10:
|
104 | _context2.next = 12;
|
105 | return updateState({ mainDelta: mainDelta });
|
106 |
|
107 | case 12:
|
108 |
|
109 | console.log(delta, mainDelta);
|
110 | return _context2.abrupt('return', delta);
|
111 |
|
112 | case 14:
|
113 | case 'end':
|
114 | return _context2.stop();
|
115 | }
|
116 | }
|
117 | }, _callee2, undefined);
|
118 | }));
|
119 |
|
120 | return function extractPositionDelta(_x2) {
|
121 | return _ref3.apply(this, arguments);
|
122 | };
|
123 | }();
|
124 | var onMove = function onMove(e) {
|
125 |
|
126 | if (!isDragging) {
|
127 | return;
|
128 | }
|
129 |
|
130 | var _extractPositionDelta = extractPositionDelta(e),
|
131 | left = _extractPositionDelta.left,
|
132 | top = _extractPositionDelta.top;
|
133 |
|
134 |
|
135 | };
|
136 | var onUp = function () {
|
137 | var _ref4 = (0, _asyncToGenerator3.default)( _regenerator2.default.mark(function _callee3(e) {
|
138 | return _regenerator2.default.wrap(function _callee3$(_context3) {
|
139 | while (1) {
|
140 | switch (_context3.prev = _context3.next) {
|
141 | case 0:
|
142 | _context3.next = 2;
|
143 | return updateState({ isDragging: false });
|
144 |
|
145 | case 2:
|
146 | _context3.next = 4;
|
147 | return updateState({ mainDelta: { left: 0, top: 0 } });
|
148 |
|
149 | case 4:
|
150 | console.log('onUp left: ' + (0, _stringify2.default)(state));
|
151 |
|
152 | case 5:
|
153 | case 'end':
|
154 | return _context3.stop();
|
155 | }
|
156 | }
|
157 | }, _callee3, undefined);
|
158 | }));
|
159 |
|
160 | return function onUp(_x3) {
|
161 | return _ref4.apply(this, arguments);
|
162 | };
|
163 | }();
|
164 | var onGotCapture = function onGotCapture() {
|
165 | updateState({ hasCapture: true });
|
166 | };
|
167 | var onLostCapture = function onLostCapture() {
|
168 | updateState({ hasCapture: false });
|
169 | };
|
170 | return children({
|
171 | onDown: onDown,
|
172 | onMove: onMove,
|
173 | onUp: onUp,
|
174 | onGotCapture: onGotCapture,
|
175 | onLostCapture: onLostCapture,
|
176 | hasCapture: hasCapture,
|
177 | mainDelta: mainDelta,
|
178 | previousLeft: previousLeft,
|
179 | previousTop: previousTop,
|
180 | delta: delta,
|
181 | initLeft: initLeft,
|
182 | initTop: initTop,
|
183 | updateState: updateState
|
184 | });
|
185 | };
|
186 |
|
187 | PointerUser.propTypes = {};
|
188 | var mapStateToProps = function mapStateToProps(state) {
|
189 | return {};
|
190 | };
|
191 |
|
192 | var initialState = {
|
193 | hasCapture: false,
|
194 | isDragging: false,
|
195 | previousLeft: 0,
|
196 | initLeft: 0,
|
197 | previousTop: 0,
|
198 | initTop: 0,
|
199 | delta: {
|
200 | left: 0,
|
201 | top: 0
|
202 | },
|
203 | mainDelta: {
|
204 | left: 0,
|
205 | top: 0
|
206 | }
|
207 | };
|
208 |
|
209 | var enhance = (0, _recompose.compose)((0, _recompose.withState)('state', 'setState', initialState), (0, _recompose.withHandlers)({
|
210 | updateState: function updateState(_ref5) {
|
211 | var state = _ref5.state,
|
212 | setState = _ref5.setState;
|
213 | return function (patch) {
|
214 | return setState((0, _extends3.default)({}, state, patch));
|
215 | };
|
216 | },
|
217 | resetState: function resetState(_ref6) {
|
218 | var setState = _ref6.setState;
|
219 | return function () {
|
220 | return setState({ initialState: initialState });
|
221 | };
|
222 | }
|
223 | })
|
224 |
|
225 |
|
226 | );
|
227 |
|
228 | exports.default = enhance(PointerUser); |
\ | No newline at end of file |