@studiometa/js-toolkit 2.0.0-beta.10 → 2.0.0-beta.14
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.
- package/Base/index.cjs +295 -0
- package/Base/index.js +88 -174
- package/Base/managers/ChildrenManager.cjs +125 -0
- package/Base/managers/ChildrenManager.js +29 -55
- package/Base/managers/EventsManager.cjs +185 -0
- package/Base/managers/EventsManager.js +84 -130
- package/Base/managers/OptionsManager.cjs +176 -0
- package/Base/managers/OptionsManager.js +46 -88
- package/Base/managers/RefsManager.cjs +99 -0
- package/Base/managers/RefsManager.js +22 -38
- package/Base/managers/ServicesManager.cjs +133 -0
- package/Base/managers/ServicesManager.js +31 -65
- package/Base/utils.cjs +46 -0
- package/Base/utils.js +12 -11
- package/decorators/index.cjs +50 -0
- package/decorators/index.js +18 -8
- package/decorators/withBreakpointManager.cjs +92 -0
- package/decorators/withBreakpointManager.js +18 -39
- package/decorators/withBreakpointObserver.cjs +117 -0
- package/decorators/withBreakpointObserver.js +40 -88
- package/decorators/withDrag.cjs +55 -0
- package/decorators/withDrag.js +18 -26
- package/decorators/withExtraConfig.cjs +45 -0
- package/decorators/withExtraConfig.js +11 -12
- package/decorators/withIntersectionObserver.cjs +62 -0
- package/decorators/withIntersectionObserver.js +23 -32
- package/decorators/withMountWhenInView.cjs +69 -0
- package/decorators/withMountWhenInView.js +26 -53
- package/decorators/withScrolledInView.cjs +113 -0
- package/decorators/withScrolledInView.js +50 -63
- package/decorators/withVue2.cjs +61 -0
- package/decorators/withVue2.js +21 -32
- package/helpers/createApp.cjs +57 -0
- package/helpers/createApp.js +12 -12
- package/helpers/importOnInteraction.cjs +57 -0
- package/helpers/importOnInteraction.js +17 -18
- package/helpers/importWhenIdle.cjs +53 -0
- package/helpers/importWhenIdle.js +13 -17
- package/helpers/importWhenVisible.cjs +55 -0
- package/helpers/importWhenVisible.js +16 -18
- package/helpers/index.cjs +42 -0
- package/helpers/index.js +10 -4
- package/helpers/utils.cjs +40 -0
- package/helpers/utils.js +7 -6
- package/index.cjs +39 -0
- package/index.js +7 -4
- package/package.json +14 -3
- package/services/Service.cjs +76 -0
- package/services/Service.js +13 -32
- package/services/drag.cjs +195 -0
- package/services/drag.js +60 -90
- package/services/index.cjs +48 -0
- package/services/index.js +16 -7
- package/services/key.cjs +102 -0
- package/services/key.js +34 -52
- package/services/load.cjs +71 -0
- package/services/load.js +13 -24
- package/services/pointer.cjs +160 -0
- package/services/pointer.js +60 -87
- package/services/raf.cjs +82 -0
- package/services/raf.js +16 -33
- package/services/resize.cjs +107 -0
- package/services/resize.js +31 -49
- package/services/scroll.cjs +130 -0
- package/services/scroll.js +44 -62
- package/utils/collide/boundingRectToCircle.cjs +39 -0
- package/utils/collide/boundingRectToCircle.d.ts +1 -1
- package/utils/collide/boundingRectToCircle.js +7 -10
- package/utils/collide/collideCircleCircle.cjs +39 -0
- package/utils/collide/collideCircleCircle.js +8 -7
- package/utils/collide/collideCircleRect.cjs +51 -0
- package/utils/collide/collideCircleRect.js +10 -12
- package/utils/collide/collidePointCircle.cjs +36 -0
- package/utils/collide/collidePointCircle.js +8 -5
- package/utils/collide/collidePointRect.cjs +33 -0
- package/utils/collide/collidePointRect.js +5 -2
- package/utils/collide/collideRectRect.cjs +33 -0
- package/utils/collide/collideRectRect.js +5 -2
- package/utils/collide/index.cjs +46 -0
- package/utils/collide/index.js +14 -6
- package/utils/css/classes.cjs +49 -0
- package/utils/css/classes.js +13 -12
- package/utils/css/index.cjs +42 -0
- package/utils/css/index.js +10 -6
- package/utils/css/matrix.cjs +34 -0
- package/utils/css/matrix.js +6 -5
- package/utils/css/styles.cjs +52 -0
- package/utils/css/styles.js +13 -12
- package/utils/css/transition.cjs +122 -0
- package/utils/css/transition.js +62 -117
- package/utils/debounce.cjs +39 -0
- package/utils/debounce.js +7 -9
- package/utils/focusTrap.cjs +89 -0
- package/utils/focusTrap.js +30 -21
- package/utils/history.cjs +96 -0
- package/utils/history.js +28 -57
- package/utils/index.cjs +58 -0
- package/utils/index.d.ts +1 -0
- package/utils/index.js +30 -11
- package/utils/keyCodes.cjs +40 -0
- package/utils/keyCodes.js +5 -2
- package/utils/math/clamp.cjs +33 -0
- package/utils/math/clamp.js +5 -2
- package/utils/math/clamp01.cjs +39 -0
- package/utils/math/clamp01.js +6 -3
- package/utils/math/damp.cjs +33 -0
- package/utils/math/damp.js +5 -4
- package/utils/math/ease.cjs +93 -0
- package/utils/math/ease.js +50 -25
- package/utils/math/index.cjs +49 -0
- package/utils/math/index.js +17 -8
- package/utils/math/inertiaFinalValue.cjs +42 -0
- package/utils/math/inertiaFinalValue.js +8 -10
- package/utils/math/lerp.cjs +33 -0
- package/utils/math/lerp.js +5 -2
- package/utils/math/map.cjs +33 -0
- package/utils/math/map.js +5 -2
- package/utils/math/round.cjs +33 -0
- package/utils/math/round.js +5 -3
- package/utils/memoize.cjs +48 -0
- package/utils/memoize.js +10 -19
- package/utils/nextFrame.cjs +45 -0
- package/utils/nextFrame.js +14 -9
- package/utils/object/autoBind.cjs +56 -0
- package/utils/object/autoBind.js +12 -22
- package/utils/object/getAllProperties.cjs +42 -0
- package/utils/object/getAllProperties.js +10 -13
- package/utils/object/index.cjs +40 -0
- package/utils/object/index.js +8 -3
- package/utils/object/isObject.cjs +33 -0
- package/utils/object/isObject.js +6 -3
- package/utils/scrollTo.cjs +87 -0
- package/utils/scrollTo.js +20 -40
- package/utils/string/index.cjs +54 -0
- package/utils/string/index.js +22 -10
- package/utils/string/withLeadingCharacters.cjs +39 -0
- package/utils/string/withLeadingCharacters.js +7 -4
- package/utils/string/withLeadingSlash.cjs +39 -0
- package/utils/string/withLeadingSlash.js +7 -4
- package/utils/string/withTrailingCharacters.cjs +39 -0
- package/utils/string/withTrailingCharacters.js +7 -4
- package/utils/string/withTrailingSlash.cjs +39 -0
- package/utils/string/withTrailingSlash.js +7 -4
- package/utils/string/withoutLeadingCharacters.cjs +33 -0
- package/utils/string/withoutLeadingCharacters.js +6 -3
- package/utils/string/withoutLeadingCharactersRecursive.cjs +44 -0
- package/utils/string/withoutLeadingCharactersRecursive.js +8 -7
- package/utils/string/withoutLeadingSlash.cjs +39 -0
- package/utils/string/withoutLeadingSlash.js +7 -4
- package/utils/string/withoutTrailingCharacters.cjs +33 -0
- package/utils/string/withoutTrailingCharacters.js +6 -3
- package/utils/string/withoutTrailingCharactersRecursive.cjs +44 -0
- package/utils/string/withoutTrailingCharactersRecursive.js +8 -7
- package/utils/string/withoutTrailingSlash.cjs +39 -0
- package/utils/string/withoutTrailingSlash.js +7 -4
- package/utils/throttle.cjs +41 -0
- package/utils/throttle.js +9 -9
- package/index.modern.js +0 -1
- package/index.umd.js +0 -1
|
@@ -0,0 +1,195 @@
|
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __reExport = (target, module2, copyDefault, desc) => {
|
|
13
|
+
if (module2 && typeof module2 === "object" || typeof module2 === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(module2))
|
|
15
|
+
if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
|
|
16
|
+
__defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return target;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (module2, isNodeMode) => {
|
|
21
|
+
return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
|
|
22
|
+
};
|
|
23
|
+
var __toCommonJS = /* @__PURE__ */ ((cache) => {
|
|
24
|
+
return (module2, temp) => {
|
|
25
|
+
return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
|
|
26
|
+
};
|
|
27
|
+
})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
|
|
28
|
+
|
|
29
|
+
// packages/js-toolkit/services/drag.js
|
|
30
|
+
var drag_exports = {};
|
|
31
|
+
__export(drag_exports, {
|
|
32
|
+
default: () => useDrag
|
|
33
|
+
});
|
|
34
|
+
var import_Service = __toESM(require("./Service.cjs"), 1);
|
|
35
|
+
var import_pointer = __toESM(require("./pointer.cjs"), 1);
|
|
36
|
+
var import_raf = __toESM(require("./raf.cjs"), 1);
|
|
37
|
+
var import_inertiaFinalValue = __toESM(require("../utils/math/inertiaFinalValue.cjs"), 1);
|
|
38
|
+
var MODES = {
|
|
39
|
+
START: "start",
|
|
40
|
+
DRAG: "drag",
|
|
41
|
+
DROP: "drop",
|
|
42
|
+
INERTIA: "inertia",
|
|
43
|
+
STOP: "stop"
|
|
44
|
+
};
|
|
45
|
+
var instanceIds = 0;
|
|
46
|
+
var Drag = class extends import_Service.default {
|
|
47
|
+
id;
|
|
48
|
+
props = {
|
|
49
|
+
target: null,
|
|
50
|
+
mode: void 0,
|
|
51
|
+
isGrabbing: false,
|
|
52
|
+
hasInertia: false,
|
|
53
|
+
x: 0,
|
|
54
|
+
y: 0,
|
|
55
|
+
delta: {
|
|
56
|
+
x: 0,
|
|
57
|
+
y: 0
|
|
58
|
+
},
|
|
59
|
+
origin: {
|
|
60
|
+
x: 0,
|
|
61
|
+
y: 0
|
|
62
|
+
},
|
|
63
|
+
distance: {
|
|
64
|
+
x: 0,
|
|
65
|
+
y: 0
|
|
66
|
+
},
|
|
67
|
+
final: {
|
|
68
|
+
x: 0,
|
|
69
|
+
y: 0
|
|
70
|
+
}
|
|
71
|
+
};
|
|
72
|
+
options = {
|
|
73
|
+
dampFactor: 0.85
|
|
74
|
+
};
|
|
75
|
+
constructor(target, options = {}) {
|
|
76
|
+
super();
|
|
77
|
+
instanceIds += 1;
|
|
78
|
+
this.id = `drag-${instanceIds}`;
|
|
79
|
+
this.props.target = target;
|
|
80
|
+
this.options = { ...this.options, ...options };
|
|
81
|
+
this.pointerHandler = this.pointerHandler.bind(this);
|
|
82
|
+
this.rafHandler = this.rafHandler.bind(this);
|
|
83
|
+
return this;
|
|
84
|
+
}
|
|
85
|
+
init() {
|
|
86
|
+
const options = { passive: true };
|
|
87
|
+
this.props.target.addEventListener("mousedown", this, options);
|
|
88
|
+
this.props.target.addEventListener("touchstart", this, options);
|
|
89
|
+
const pointer = (0, import_pointer.default)();
|
|
90
|
+
pointer.add(this.id, this.pointerHandler);
|
|
91
|
+
return this;
|
|
92
|
+
}
|
|
93
|
+
kill() {
|
|
94
|
+
this.props.target.removeEventListener("mousemove", this);
|
|
95
|
+
this.props.target.removeEventListener("touchmove", this);
|
|
96
|
+
const pointer = (0, import_pointer.default)();
|
|
97
|
+
pointer.remove(this.id);
|
|
98
|
+
return this;
|
|
99
|
+
}
|
|
100
|
+
handleEvent(event) {
|
|
101
|
+
const x = event instanceof MouseEvent ? event.clientX : event.touches[0].clientX;
|
|
102
|
+
const y = event instanceof MouseEvent ? event.clientY : event.touches[0].clientY;
|
|
103
|
+
this.start(x, y);
|
|
104
|
+
}
|
|
105
|
+
start(x, y) {
|
|
106
|
+
this.props.x = x;
|
|
107
|
+
this.props.y = y;
|
|
108
|
+
this.props.origin.x = x;
|
|
109
|
+
this.props.origin.y = y;
|
|
110
|
+
this.props.delta.x = 0;
|
|
111
|
+
this.props.delta.y = 0;
|
|
112
|
+
this.props.distance.x = 0;
|
|
113
|
+
this.props.distance.y = 0;
|
|
114
|
+
this.props.final.x = x;
|
|
115
|
+
this.props.final.y = y;
|
|
116
|
+
this.props.mode = MODES.START;
|
|
117
|
+
this.props.isGrabbing = true;
|
|
118
|
+
this.trigger(this.props);
|
|
119
|
+
}
|
|
120
|
+
drop() {
|
|
121
|
+
this.props.isGrabbing = false;
|
|
122
|
+
this.props.mode = MODES.DROP;
|
|
123
|
+
this.props.hasInertia = true;
|
|
124
|
+
this.props.final.x = (0, import_inertiaFinalValue.default)(this.props.x, this.props.delta.x, this.options.dampFactor);
|
|
125
|
+
this.props.final.y = (0, import_inertiaFinalValue.default)(this.props.y, this.props.delta.y, this.options.dampFactor);
|
|
126
|
+
this.trigger(this.props);
|
|
127
|
+
setTimeout(() => {
|
|
128
|
+
const raf = (0, import_raf.default)();
|
|
129
|
+
raf.remove(this.id);
|
|
130
|
+
raf.add(this.id, this.rafHandler);
|
|
131
|
+
}, 0);
|
|
132
|
+
}
|
|
133
|
+
stop() {
|
|
134
|
+
(0, import_raf.default)().remove(this.id);
|
|
135
|
+
this.props.hasInertia = false;
|
|
136
|
+
this.props.mode = MODES.STOP;
|
|
137
|
+
this.trigger(this.props);
|
|
138
|
+
}
|
|
139
|
+
rafHandler() {
|
|
140
|
+
if (!this.props.isGrabbing) {
|
|
141
|
+
this.props.x += this.props.delta.x;
|
|
142
|
+
this.props.y += this.props.delta.y;
|
|
143
|
+
this.props.distance.x = this.props.x - this.props.origin.x;
|
|
144
|
+
this.props.distance.y = this.props.y - this.props.origin.y;
|
|
145
|
+
this.props.delta.x *= this.options.dampFactor;
|
|
146
|
+
this.props.delta.y *= this.options.dampFactor;
|
|
147
|
+
if (this.props.mode !== MODES.INERTIA) {
|
|
148
|
+
this.props.mode = MODES.INERTIA;
|
|
149
|
+
}
|
|
150
|
+
this.trigger(this.props);
|
|
151
|
+
if (Math.abs(this.props.delta.x) < 0.1 && Math.abs(this.props.delta.y) < 0.1) {
|
|
152
|
+
this.stop();
|
|
153
|
+
}
|
|
154
|
+
}
|
|
155
|
+
}
|
|
156
|
+
pointerHandler(props) {
|
|
157
|
+
if (this.props.isGrabbing) {
|
|
158
|
+
this.props.x = props.x;
|
|
159
|
+
this.props.y = props.y;
|
|
160
|
+
this.props.delta.x = props.delta.x;
|
|
161
|
+
this.props.delta.y = props.delta.y;
|
|
162
|
+
this.props.final.x = props.x;
|
|
163
|
+
this.props.final.y = props.y;
|
|
164
|
+
this.props.distance.x = this.props.x - this.props.origin.x;
|
|
165
|
+
this.props.distance.y = this.props.y - this.props.origin.y;
|
|
166
|
+
if (this.props.mode !== MODES.DRAG) {
|
|
167
|
+
this.props.mode = MODES.DRAG;
|
|
168
|
+
}
|
|
169
|
+
this.trigger(this.props);
|
|
170
|
+
if (!props.isDown) {
|
|
171
|
+
this.drop();
|
|
172
|
+
}
|
|
173
|
+
}
|
|
174
|
+
}
|
|
175
|
+
updateProps() {
|
|
176
|
+
return this.props;
|
|
177
|
+
}
|
|
178
|
+
};
|
|
179
|
+
var instances = /* @__PURE__ */ new WeakMap();
|
|
180
|
+
function useDrag(target, options) {
|
|
181
|
+
let drag = instances.get(target);
|
|
182
|
+
if (!drag) {
|
|
183
|
+
const instance = new Drag(target, options);
|
|
184
|
+
drag = {
|
|
185
|
+
add: instance.add.bind(instance),
|
|
186
|
+
remove: instance.remove.bind(instance),
|
|
187
|
+
has: instance.has.bind(instance),
|
|
188
|
+
props: instance.updateProps.bind(instance)
|
|
189
|
+
};
|
|
190
|
+
instances.set(target, drag);
|
|
191
|
+
}
|
|
192
|
+
return drag;
|
|
193
|
+
}
|
|
194
|
+
module.exports = __toCommonJS(drag_exports);
|
|
195
|
+
if (module.exports.default) module.exports = module.exports.default;
|
package/services/drag.js
CHANGED
|
@@ -1,92 +1,74 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
var MODES = {
|
|
12
|
-
START: 'start',
|
|
13
|
-
DRAG: 'drag',
|
|
14
|
-
DROP: 'drop',
|
|
15
|
-
INERTIA: 'inertia',
|
|
16
|
-
STOP: 'stop'
|
|
1
|
+
import Service from "./Service.js";
|
|
2
|
+
import usePointer from "./pointer.js";
|
|
3
|
+
import useRaf from "./raf.js";
|
|
4
|
+
import inertiaFinalValue from "../utils/math/inertiaFinalValue.js";
|
|
5
|
+
const MODES = {
|
|
6
|
+
START: "start",
|
|
7
|
+
DRAG: "drag",
|
|
8
|
+
DROP: "drop",
|
|
9
|
+
INERTIA: "inertia",
|
|
10
|
+
STOP: "stop"
|
|
17
11
|
};
|
|
18
|
-
|
|
19
|
-
|
|
12
|
+
let instanceIds = 0;
|
|
20
13
|
class Drag extends Service {
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
isGrabbing: false,
|
|
31
|
-
hasInertia: false,
|
|
14
|
+
id;
|
|
15
|
+
props = {
|
|
16
|
+
target: null,
|
|
17
|
+
mode: void 0,
|
|
18
|
+
isGrabbing: false,
|
|
19
|
+
hasInertia: false,
|
|
20
|
+
x: 0,
|
|
21
|
+
y: 0,
|
|
22
|
+
delta: {
|
|
32
23
|
x: 0,
|
|
33
|
-
y: 0
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
dampFactor: 0.85
|
|
54
|
-
});
|
|
55
|
-
|
|
24
|
+
y: 0
|
|
25
|
+
},
|
|
26
|
+
origin: {
|
|
27
|
+
x: 0,
|
|
28
|
+
y: 0
|
|
29
|
+
},
|
|
30
|
+
distance: {
|
|
31
|
+
x: 0,
|
|
32
|
+
y: 0
|
|
33
|
+
},
|
|
34
|
+
final: {
|
|
35
|
+
x: 0,
|
|
36
|
+
y: 0
|
|
37
|
+
}
|
|
38
|
+
};
|
|
39
|
+
options = {
|
|
40
|
+
dampFactor: 0.85
|
|
41
|
+
};
|
|
42
|
+
constructor(target, options = {}) {
|
|
43
|
+
super();
|
|
56
44
|
instanceIds += 1;
|
|
57
|
-
this.id =
|
|
45
|
+
this.id = `drag-${instanceIds}`;
|
|
58
46
|
this.props.target = target;
|
|
59
|
-
this.options =
|
|
47
|
+
this.options = { ...this.options, ...options };
|
|
60
48
|
this.pointerHandler = this.pointerHandler.bind(this);
|
|
61
49
|
this.rafHandler = this.rafHandler.bind(this);
|
|
62
50
|
return this;
|
|
63
51
|
}
|
|
64
|
-
|
|
65
52
|
init() {
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
this.props.target.addEventListener('touchstart', this, options);
|
|
71
|
-
var pointer = usePointer();
|
|
53
|
+
const options = { passive: true };
|
|
54
|
+
this.props.target.addEventListener("mousedown", this, options);
|
|
55
|
+
this.props.target.addEventListener("touchstart", this, options);
|
|
56
|
+
const pointer = usePointer();
|
|
72
57
|
pointer.add(this.id, this.pointerHandler);
|
|
73
58
|
return this;
|
|
74
59
|
}
|
|
75
|
-
|
|
76
60
|
kill() {
|
|
77
|
-
this.props.target.removeEventListener(
|
|
78
|
-
this.props.target.removeEventListener(
|
|
79
|
-
|
|
61
|
+
this.props.target.removeEventListener("mousemove", this);
|
|
62
|
+
this.props.target.removeEventListener("touchmove", this);
|
|
63
|
+
const pointer = usePointer();
|
|
80
64
|
pointer.remove(this.id);
|
|
81
65
|
return this;
|
|
82
66
|
}
|
|
83
|
-
|
|
84
67
|
handleEvent(event) {
|
|
85
|
-
|
|
86
|
-
|
|
68
|
+
const x = event instanceof MouseEvent ? event.clientX : event.touches[0].clientX;
|
|
69
|
+
const y = event instanceof MouseEvent ? event.clientY : event.touches[0].clientY;
|
|
87
70
|
this.start(x, y);
|
|
88
71
|
}
|
|
89
|
-
|
|
90
72
|
start(x, y) {
|
|
91
73
|
this.props.x = x;
|
|
92
74
|
this.props.y = y;
|
|
@@ -102,7 +84,6 @@ class Drag extends Service {
|
|
|
102
84
|
this.props.isGrabbing = true;
|
|
103
85
|
this.trigger(this.props);
|
|
104
86
|
}
|
|
105
|
-
|
|
106
87
|
drop() {
|
|
107
88
|
this.props.isGrabbing = false;
|
|
108
89
|
this.props.mode = MODES.DROP;
|
|
@@ -111,19 +92,17 @@ class Drag extends Service {
|
|
|
111
92
|
this.props.final.y = inertiaFinalValue(this.props.y, this.props.delta.y, this.options.dampFactor);
|
|
112
93
|
this.trigger(this.props);
|
|
113
94
|
setTimeout(() => {
|
|
114
|
-
|
|
95
|
+
const raf = useRaf();
|
|
115
96
|
raf.remove(this.id);
|
|
116
97
|
raf.add(this.id, this.rafHandler);
|
|
117
98
|
}, 0);
|
|
118
99
|
}
|
|
119
|
-
|
|
120
100
|
stop() {
|
|
121
101
|
useRaf().remove(this.id);
|
|
122
102
|
this.props.hasInertia = false;
|
|
123
103
|
this.props.mode = MODES.STOP;
|
|
124
104
|
this.trigger(this.props);
|
|
125
105
|
}
|
|
126
|
-
|
|
127
106
|
rafHandler() {
|
|
128
107
|
if (!this.props.isGrabbing) {
|
|
129
108
|
this.props.x += this.props.delta.x;
|
|
@@ -132,19 +111,15 @@ class Drag extends Service {
|
|
|
132
111
|
this.props.distance.y = this.props.y - this.props.origin.y;
|
|
133
112
|
this.props.delta.x *= this.options.dampFactor;
|
|
134
113
|
this.props.delta.y *= this.options.dampFactor;
|
|
135
|
-
|
|
136
114
|
if (this.props.mode !== MODES.INERTIA) {
|
|
137
115
|
this.props.mode = MODES.INERTIA;
|
|
138
116
|
}
|
|
139
|
-
|
|
140
117
|
this.trigger(this.props);
|
|
141
|
-
|
|
142
118
|
if (Math.abs(this.props.delta.x) < 0.1 && Math.abs(this.props.delta.y) < 0.1) {
|
|
143
119
|
this.stop();
|
|
144
120
|
}
|
|
145
121
|
}
|
|
146
122
|
}
|
|
147
|
-
|
|
148
123
|
pointerHandler(props) {
|
|
149
124
|
if (this.props.isGrabbing) {
|
|
150
125
|
this.props.x = props.x;
|
|
@@ -155,31 +130,24 @@ class Drag extends Service {
|
|
|
155
130
|
this.props.final.y = props.y;
|
|
156
131
|
this.props.distance.x = this.props.x - this.props.origin.x;
|
|
157
132
|
this.props.distance.y = this.props.y - this.props.origin.y;
|
|
158
|
-
|
|
159
133
|
if (this.props.mode !== MODES.DRAG) {
|
|
160
134
|
this.props.mode = MODES.DRAG;
|
|
161
135
|
}
|
|
162
|
-
|
|
163
136
|
this.trigger(this.props);
|
|
164
|
-
|
|
165
137
|
if (!props.isDown) {
|
|
166
138
|
this.drop();
|
|
167
139
|
}
|
|
168
140
|
}
|
|
169
141
|
}
|
|
170
|
-
|
|
171
142
|
updateProps() {
|
|
172
143
|
return this.props;
|
|
173
144
|
}
|
|
174
|
-
|
|
175
145
|
}
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
var drag = instances.get(target);
|
|
180
|
-
|
|
146
|
+
const instances = /* @__PURE__ */ new WeakMap();
|
|
147
|
+
function useDrag(target, options) {
|
|
148
|
+
let drag = instances.get(target);
|
|
181
149
|
if (!drag) {
|
|
182
|
-
|
|
150
|
+
const instance = new Drag(target, options);
|
|
183
151
|
drag = {
|
|
184
152
|
add: instance.add.bind(instance),
|
|
185
153
|
remove: instance.remove.bind(instance),
|
|
@@ -188,6 +156,8 @@ export default function useDrag(target, options) {
|
|
|
188
156
|
};
|
|
189
157
|
instances.set(target, drag);
|
|
190
158
|
}
|
|
191
|
-
|
|
192
159
|
return drag;
|
|
193
|
-
}
|
|
160
|
+
}
|
|
161
|
+
export {
|
|
162
|
+
useDrag as default
|
|
163
|
+
};
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __reExport = (target, module2, copyDefault, desc) => {
|
|
13
|
+
if (module2 && typeof module2 === "object" || typeof module2 === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(module2))
|
|
15
|
+
if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
|
|
16
|
+
__defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return target;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (module2, isNodeMode) => {
|
|
21
|
+
return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
|
|
22
|
+
};
|
|
23
|
+
var __toCommonJS = /* @__PURE__ */ ((cache) => {
|
|
24
|
+
return (module2, temp) => {
|
|
25
|
+
return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
|
|
26
|
+
};
|
|
27
|
+
})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
|
|
28
|
+
|
|
29
|
+
// packages/js-toolkit/services/index.js
|
|
30
|
+
var services_exports = {};
|
|
31
|
+
__export(services_exports, {
|
|
32
|
+
useDrag: () => import_drag.default,
|
|
33
|
+
useKey: () => import_key.default,
|
|
34
|
+
useLoad: () => import_load.default,
|
|
35
|
+
usePointer: () => import_pointer.default,
|
|
36
|
+
useRaf: () => import_raf.default,
|
|
37
|
+
useResize: () => import_resize.default,
|
|
38
|
+
useScroll: () => import_scroll.default
|
|
39
|
+
});
|
|
40
|
+
var import_drag = __toESM(require("./drag.cjs"), 1);
|
|
41
|
+
var import_key = __toESM(require("./key.cjs"), 1);
|
|
42
|
+
var import_load = __toESM(require("./load.cjs"), 1);
|
|
43
|
+
var import_pointer = __toESM(require("./pointer.cjs"), 1);
|
|
44
|
+
var import_raf = __toESM(require("./raf.cjs"), 1);
|
|
45
|
+
var import_resize = __toESM(require("./resize.cjs"), 1);
|
|
46
|
+
var import_scroll = __toESM(require("./scroll.cjs"), 1);
|
|
47
|
+
module.exports = __toCommonJS(services_exports);
|
|
48
|
+
if (module.exports.default) module.exports = module.exports.default;
|
package/services/index.js
CHANGED
|
@@ -1,7 +1,16 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
1
|
+
import { default as default2 } from "./drag.js";
|
|
2
|
+
import { default as default3 } from "./key.js";
|
|
3
|
+
import { default as default4 } from "./load.js";
|
|
4
|
+
import { default as default5 } from "./pointer.js";
|
|
5
|
+
import { default as default6 } from "./raf.js";
|
|
6
|
+
import { default as default7 } from "./resize.js";
|
|
7
|
+
import { default as default8 } from "./scroll.js";
|
|
8
|
+
export {
|
|
9
|
+
default2 as useDrag,
|
|
10
|
+
default3 as useKey,
|
|
11
|
+
default4 as useLoad,
|
|
12
|
+
default5 as usePointer,
|
|
13
|
+
default6 as useRaf,
|
|
14
|
+
default7 as useResize,
|
|
15
|
+
default8 as useScroll
|
|
16
|
+
};
|
package/services/key.cjs
ADDED
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __reExport = (target, module2, copyDefault, desc) => {
|
|
13
|
+
if (module2 && typeof module2 === "object" || typeof module2 === "function") {
|
|
14
|
+
for (let key2 of __getOwnPropNames(module2))
|
|
15
|
+
if (!__hasOwnProp.call(target, key2) && (copyDefault || key2 !== "default"))
|
|
16
|
+
__defProp(target, key2, { get: () => module2[key2], enumerable: !(desc = __getOwnPropDesc(module2, key2)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return target;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (module2, isNodeMode) => {
|
|
21
|
+
return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
|
|
22
|
+
};
|
|
23
|
+
var __toCommonJS = /* @__PURE__ */ ((cache) => {
|
|
24
|
+
return (module2, temp) => {
|
|
25
|
+
return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
|
|
26
|
+
};
|
|
27
|
+
})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
|
|
28
|
+
|
|
29
|
+
// packages/js-toolkit/services/key.js
|
|
30
|
+
var key_exports = {};
|
|
31
|
+
__export(key_exports, {
|
|
32
|
+
default: () => useKey
|
|
33
|
+
});
|
|
34
|
+
var import_Service = __toESM(require("./Service.cjs"), 1);
|
|
35
|
+
var import_keyCodes = __toESM(require("../utils/keyCodes.cjs"), 1);
|
|
36
|
+
var Key = class extends import_Service.default {
|
|
37
|
+
previousEvent;
|
|
38
|
+
props = {
|
|
39
|
+
event: null,
|
|
40
|
+
triggered: 0,
|
|
41
|
+
isUp: false,
|
|
42
|
+
isDown: false,
|
|
43
|
+
ENTER: false,
|
|
44
|
+
SPACE: false,
|
|
45
|
+
TAB: false,
|
|
46
|
+
ESC: false,
|
|
47
|
+
LEFT: false,
|
|
48
|
+
UP: false,
|
|
49
|
+
RIGHT: false,
|
|
50
|
+
DOWN: false,
|
|
51
|
+
direction: "none"
|
|
52
|
+
};
|
|
53
|
+
init() {
|
|
54
|
+
document.addEventListener("keydown", this);
|
|
55
|
+
document.addEventListener("keyup", this);
|
|
56
|
+
}
|
|
57
|
+
handleEvent(event) {
|
|
58
|
+
this.updateProps(event);
|
|
59
|
+
this.trigger(this.props);
|
|
60
|
+
}
|
|
61
|
+
kill() {
|
|
62
|
+
document.removeEventListener("keydown", this);
|
|
63
|
+
document.removeEventListener("keyup", this);
|
|
64
|
+
}
|
|
65
|
+
updateProps(event) {
|
|
66
|
+
this.props.event = event;
|
|
67
|
+
Object.entries(import_keyCodes.default).forEach(([name, code]) => {
|
|
68
|
+
this.props[name] = code === event.keyCode;
|
|
69
|
+
});
|
|
70
|
+
if (!this.previousEvent) {
|
|
71
|
+
this.props.triggered = 0;
|
|
72
|
+
}
|
|
73
|
+
if (this.props.event.type === "keydown" && this.previousEvent?.type === "keydown") {
|
|
74
|
+
this.props.triggered += 1;
|
|
75
|
+
} else {
|
|
76
|
+
this.props.triggered = 1;
|
|
77
|
+
}
|
|
78
|
+
this.previousEvent = this.props.event;
|
|
79
|
+
this.props.direction = this.props.event.type === "keydown" ? "down" : "up";
|
|
80
|
+
this.props.isUp = this.props.event.type === "keyup";
|
|
81
|
+
this.props.isDown = this.props.event.type === "keydown";
|
|
82
|
+
return this.props;
|
|
83
|
+
}
|
|
84
|
+
};
|
|
85
|
+
var instance;
|
|
86
|
+
var key;
|
|
87
|
+
function useKey() {
|
|
88
|
+
if (!key) {
|
|
89
|
+
if (!instance) {
|
|
90
|
+
instance = new Key();
|
|
91
|
+
}
|
|
92
|
+
key = {
|
|
93
|
+
add: instance.add.bind(instance),
|
|
94
|
+
remove: instance.remove.bind(instance),
|
|
95
|
+
has: instance.has.bind(instance),
|
|
96
|
+
props: instance.updateProps.bind(instance)
|
|
97
|
+
};
|
|
98
|
+
}
|
|
99
|
+
return key;
|
|
100
|
+
}
|
|
101
|
+
module.exports = __toCommonJS(key_exports);
|
|
102
|
+
if (module.exports.default) module.exports = module.exports.default;
|