@studiometa/js-toolkit 2.0.0-beta.11 → 2.0.0-beta.15
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 +114 -194
- package/Base/managers/ChildrenManager.cjs +131 -0
- package/Base/managers/ChildrenManager.js +38 -57
- package/Base/managers/EventsManager.cjs +190 -0
- package/Base/managers/EventsManager.js +72 -112
- package/Base/managers/OptionsManager.cjs +177 -0
- package/Base/managers/OptionsManager.js +54 -88
- package/Base/managers/RefsManager.cjs +104 -0
- package/Base/managers/RefsManager.js +28 -38
- package/Base/managers/ServicesManager.cjs +138 -0
- package/Base/managers/ServicesManager.js +39 -67
- 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 +122 -0
- package/decorators/withBreakpointObserver.js +44 -86
- package/decorators/withDrag.cjs +60 -0
- package/decorators/withDrag.js +24 -26
- package/decorators/withExtraConfig.cjs +50 -0
- package/decorators/withExtraConfig.js +17 -12
- package/decorators/withIntersectionObserver.cjs +67 -0
- package/decorators/withIntersectionObserver.js +29 -32
- package/decorators/withMountWhenInView.cjs +74 -0
- package/decorators/withMountWhenInView.js +31 -52
- package/decorators/withScrolledInView.cjs +121 -0
- package/decorators/withScrolledInView.js +35 -39
- package/decorators/withVue2.cjs +65 -0
- package/decorators/withVue2.js +26 -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 +54 -0
- package/helpers/importWhenIdle.js +14 -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 -4
- package/services/Service.cjs +81 -0
- package/services/Service.js +19 -32
- package/services/drag.cjs +200 -0
- package/services/drag.js +42 -66
- package/services/index.cjs +48 -0
- package/services/index.js +16 -7
- package/services/key.cjs +111 -0
- package/services/key.js +28 -36
- package/services/load.cjs +79 -0
- package/services/load.js +17 -19
- package/services/pointer.cjs +169 -0
- package/services/pointer.js +43 -60
- package/services/raf.cjs +90 -0
- package/services/raf.js +20 -28
- package/services/resize.cjs +115 -0
- package/services/resize.js +33 -42
- package/services/scroll.cjs +138 -0
- package/services/scroll.js +26 -35
- 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 +35 -0
- package/utils/css/matrix.js +7 -5
- package/utils/css/styles.cjs +52 -0
- package/utils/css/styles.js +13 -12
- package/utils/css/transition.cjs +127 -0
- package/utils/css/transition.js +68 -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
package/services/Service.js
CHANGED
|
@@ -1,68 +1,55 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
3
|
+
var __publicField = (obj, key, value) => {
|
|
4
|
+
__defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
5
|
+
return value;
|
|
6
|
+
};
|
|
7
|
+
class Service {
|
|
3
8
|
constructor() {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
this.callbacks = new Map();
|
|
9
|
+
__publicField(this, "props");
|
|
10
|
+
this.callbacks = /* @__PURE__ */ new Map();
|
|
7
11
|
this.isInit = false;
|
|
8
12
|
}
|
|
9
|
-
|
|
10
|
-
updateProps() {
|
|
11
|
-
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
12
|
-
args[_key] = arguments[_key];
|
|
13
|
-
}
|
|
14
|
-
|
|
13
|
+
updateProps(...args) {
|
|
15
14
|
this.props = args;
|
|
16
|
-
throw new Error(
|
|
15
|
+
throw new Error("The `updateProps` method must be implemented.");
|
|
17
16
|
}
|
|
18
|
-
|
|
19
17
|
init() {
|
|
20
|
-
throw new Error(
|
|
18
|
+
throw new Error("The `init` method must be implemented.");
|
|
21
19
|
}
|
|
22
|
-
|
|
23
20
|
kill() {
|
|
24
|
-
throw new Error(
|
|
21
|
+
throw new Error("The `kill` method must be implemented.");
|
|
25
22
|
}
|
|
26
|
-
|
|
27
23
|
add(key, callback) {
|
|
28
24
|
if (this.has(key)) {
|
|
29
|
-
throw new Error(
|
|
25
|
+
throw new Error(`A callback with the key \`${key}\` has already been registered.`);
|
|
30
26
|
}
|
|
31
|
-
|
|
32
27
|
if (this.callbacks.size === 0 && !this.isInit) {
|
|
33
28
|
this.init();
|
|
34
29
|
this.isInit = true;
|
|
35
30
|
}
|
|
36
|
-
|
|
37
31
|
this.callbacks.set(key, callback);
|
|
38
32
|
}
|
|
39
|
-
|
|
40
33
|
has(key) {
|
|
41
34
|
return this.callbacks.has(key);
|
|
42
35
|
}
|
|
43
|
-
|
|
44
36
|
get(key) {
|
|
45
37
|
return this.callbacks.get(key);
|
|
46
38
|
}
|
|
47
|
-
|
|
48
39
|
remove(key) {
|
|
49
40
|
this.callbacks.delete(key);
|
|
50
|
-
|
|
51
41
|
if (this.callbacks.size === 0 && this.isInit) {
|
|
52
42
|
this.kill();
|
|
53
43
|
this.isInit = false;
|
|
54
44
|
}
|
|
55
45
|
}
|
|
56
|
-
|
|
57
|
-
trigger() {
|
|
58
|
-
for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
|
|
59
|
-
args[_key2] = arguments[_key2];
|
|
60
|
-
}
|
|
61
|
-
|
|
46
|
+
trigger(...args) {
|
|
62
47
|
this.callbacks.forEach(function forEachCallback(callback) {
|
|
63
48
|
callback(...args);
|
|
64
49
|
});
|
|
65
50
|
return this;
|
|
66
51
|
}
|
|
67
|
-
|
|
68
|
-
|
|
52
|
+
}
|
|
53
|
+
export {
|
|
54
|
+
Service as default
|
|
55
|
+
};
|
|
@@ -0,0 +1,200 @@
|
|
|
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 __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
8
|
+
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
9
|
+
var __export = (target, all) => {
|
|
10
|
+
for (var name in all)
|
|
11
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
12
|
+
};
|
|
13
|
+
var __reExport = (target, module2, copyDefault, desc) => {
|
|
14
|
+
if (module2 && typeof module2 === "object" || typeof module2 === "function") {
|
|
15
|
+
for (let key of __getOwnPropNames(module2))
|
|
16
|
+
if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
|
|
17
|
+
__defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
|
|
18
|
+
}
|
|
19
|
+
return target;
|
|
20
|
+
};
|
|
21
|
+
var __toESM = (module2, isNodeMode) => {
|
|
22
|
+
return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
|
|
23
|
+
};
|
|
24
|
+
var __toCommonJS = /* @__PURE__ */ ((cache) => {
|
|
25
|
+
return (module2, temp) => {
|
|
26
|
+
return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
|
|
27
|
+
};
|
|
28
|
+
})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
|
|
29
|
+
var __publicField = (obj, key, value) => {
|
|
30
|
+
__defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
31
|
+
return value;
|
|
32
|
+
};
|
|
33
|
+
|
|
34
|
+
// packages/js-toolkit/services/drag.js
|
|
35
|
+
var drag_exports = {};
|
|
36
|
+
__export(drag_exports, {
|
|
37
|
+
default: () => useDrag
|
|
38
|
+
});
|
|
39
|
+
var import_Service = __toESM(require("./Service.cjs"), 1);
|
|
40
|
+
var import_pointer = __toESM(require("./pointer.cjs"), 1);
|
|
41
|
+
var import_raf = __toESM(require("./raf.cjs"), 1);
|
|
42
|
+
var import_inertiaFinalValue = __toESM(require("../utils/math/inertiaFinalValue.cjs"), 1);
|
|
43
|
+
var MODES = {
|
|
44
|
+
START: "start",
|
|
45
|
+
DRAG: "drag",
|
|
46
|
+
DROP: "drop",
|
|
47
|
+
INERTIA: "inertia",
|
|
48
|
+
STOP: "stop"
|
|
49
|
+
};
|
|
50
|
+
var instanceIds = 0;
|
|
51
|
+
var Drag = class extends import_Service.default {
|
|
52
|
+
constructor(target, options = {}) {
|
|
53
|
+
super();
|
|
54
|
+
__publicField(this, "id");
|
|
55
|
+
__publicField(this, "props", {
|
|
56
|
+
target: null,
|
|
57
|
+
mode: void 0,
|
|
58
|
+
isGrabbing: false,
|
|
59
|
+
hasInertia: false,
|
|
60
|
+
x: 0,
|
|
61
|
+
y: 0,
|
|
62
|
+
delta: {
|
|
63
|
+
x: 0,
|
|
64
|
+
y: 0
|
|
65
|
+
},
|
|
66
|
+
origin: {
|
|
67
|
+
x: 0,
|
|
68
|
+
y: 0
|
|
69
|
+
},
|
|
70
|
+
distance: {
|
|
71
|
+
x: 0,
|
|
72
|
+
y: 0
|
|
73
|
+
},
|
|
74
|
+
final: {
|
|
75
|
+
x: 0,
|
|
76
|
+
y: 0
|
|
77
|
+
}
|
|
78
|
+
});
|
|
79
|
+
__publicField(this, "options", {
|
|
80
|
+
dampFactor: 0.85
|
|
81
|
+
});
|
|
82
|
+
instanceIds += 1;
|
|
83
|
+
this.id = `drag-${instanceIds}`;
|
|
84
|
+
this.props.target = target;
|
|
85
|
+
this.options = { ...this.options, ...options };
|
|
86
|
+
this.pointerHandler = this.pointerHandler.bind(this);
|
|
87
|
+
this.rafHandler = this.rafHandler.bind(this);
|
|
88
|
+
return this;
|
|
89
|
+
}
|
|
90
|
+
init() {
|
|
91
|
+
const options = { passive: true };
|
|
92
|
+
this.props.target.addEventListener("mousedown", this, options);
|
|
93
|
+
this.props.target.addEventListener("touchstart", this, options);
|
|
94
|
+
const pointer = (0, import_pointer.default)();
|
|
95
|
+
pointer.add(this.id, this.pointerHandler);
|
|
96
|
+
return this;
|
|
97
|
+
}
|
|
98
|
+
kill() {
|
|
99
|
+
this.props.target.removeEventListener("mousemove", this);
|
|
100
|
+
this.props.target.removeEventListener("touchmove", this);
|
|
101
|
+
const pointer = (0, import_pointer.default)();
|
|
102
|
+
pointer.remove(this.id);
|
|
103
|
+
return this;
|
|
104
|
+
}
|
|
105
|
+
handleEvent(event) {
|
|
106
|
+
const x = event instanceof MouseEvent ? event.clientX : event.touches[0].clientX;
|
|
107
|
+
const y = event instanceof MouseEvent ? event.clientY : event.touches[0].clientY;
|
|
108
|
+
this.start(x, y);
|
|
109
|
+
}
|
|
110
|
+
start(x, y) {
|
|
111
|
+
this.props.x = x;
|
|
112
|
+
this.props.y = y;
|
|
113
|
+
this.props.origin.x = x;
|
|
114
|
+
this.props.origin.y = y;
|
|
115
|
+
this.props.delta.x = 0;
|
|
116
|
+
this.props.delta.y = 0;
|
|
117
|
+
this.props.distance.x = 0;
|
|
118
|
+
this.props.distance.y = 0;
|
|
119
|
+
this.props.final.x = x;
|
|
120
|
+
this.props.final.y = y;
|
|
121
|
+
this.props.mode = MODES.START;
|
|
122
|
+
this.props.isGrabbing = true;
|
|
123
|
+
this.trigger(this.props);
|
|
124
|
+
}
|
|
125
|
+
drop() {
|
|
126
|
+
this.props.isGrabbing = false;
|
|
127
|
+
this.props.mode = MODES.DROP;
|
|
128
|
+
this.props.hasInertia = true;
|
|
129
|
+
this.props.final.x = (0, import_inertiaFinalValue.default)(this.props.x, this.props.delta.x, this.options.dampFactor);
|
|
130
|
+
this.props.final.y = (0, import_inertiaFinalValue.default)(this.props.y, this.props.delta.y, this.options.dampFactor);
|
|
131
|
+
this.trigger(this.props);
|
|
132
|
+
setTimeout(() => {
|
|
133
|
+
const raf = (0, import_raf.default)();
|
|
134
|
+
raf.remove(this.id);
|
|
135
|
+
raf.add(this.id, this.rafHandler);
|
|
136
|
+
}, 0);
|
|
137
|
+
}
|
|
138
|
+
stop() {
|
|
139
|
+
(0, import_raf.default)().remove(this.id);
|
|
140
|
+
this.props.hasInertia = false;
|
|
141
|
+
this.props.mode = MODES.STOP;
|
|
142
|
+
this.trigger(this.props);
|
|
143
|
+
}
|
|
144
|
+
rafHandler() {
|
|
145
|
+
if (!this.props.isGrabbing) {
|
|
146
|
+
this.props.x += this.props.delta.x;
|
|
147
|
+
this.props.y += this.props.delta.y;
|
|
148
|
+
this.props.distance.x = this.props.x - this.props.origin.x;
|
|
149
|
+
this.props.distance.y = this.props.y - this.props.origin.y;
|
|
150
|
+
this.props.delta.x *= this.options.dampFactor;
|
|
151
|
+
this.props.delta.y *= this.options.dampFactor;
|
|
152
|
+
if (this.props.mode !== MODES.INERTIA) {
|
|
153
|
+
this.props.mode = MODES.INERTIA;
|
|
154
|
+
}
|
|
155
|
+
this.trigger(this.props);
|
|
156
|
+
if (Math.abs(this.props.delta.x) < 0.1 && Math.abs(this.props.delta.y) < 0.1) {
|
|
157
|
+
this.stop();
|
|
158
|
+
}
|
|
159
|
+
}
|
|
160
|
+
}
|
|
161
|
+
pointerHandler(props) {
|
|
162
|
+
if (this.props.isGrabbing) {
|
|
163
|
+
this.props.x = props.x;
|
|
164
|
+
this.props.y = props.y;
|
|
165
|
+
this.props.delta.x = props.delta.x;
|
|
166
|
+
this.props.delta.y = props.delta.y;
|
|
167
|
+
this.props.final.x = props.x;
|
|
168
|
+
this.props.final.y = props.y;
|
|
169
|
+
this.props.distance.x = this.props.x - this.props.origin.x;
|
|
170
|
+
this.props.distance.y = this.props.y - this.props.origin.y;
|
|
171
|
+
if (this.props.mode !== MODES.DRAG) {
|
|
172
|
+
this.props.mode = MODES.DRAG;
|
|
173
|
+
}
|
|
174
|
+
this.trigger(this.props);
|
|
175
|
+
if (!props.isDown) {
|
|
176
|
+
this.drop();
|
|
177
|
+
}
|
|
178
|
+
}
|
|
179
|
+
}
|
|
180
|
+
updateProps() {
|
|
181
|
+
return this.props;
|
|
182
|
+
}
|
|
183
|
+
};
|
|
184
|
+
var instances = /* @__PURE__ */ new WeakMap();
|
|
185
|
+
function useDrag(target, options) {
|
|
186
|
+
let drag = instances.get(target);
|
|
187
|
+
if (!drag) {
|
|
188
|
+
const instance = new Drag(target, options);
|
|
189
|
+
drag = {
|
|
190
|
+
add: instance.add.bind(instance),
|
|
191
|
+
remove: instance.remove.bind(instance),
|
|
192
|
+
has: instance.has.bind(instance),
|
|
193
|
+
props: instance.updateProps.bind(instance)
|
|
194
|
+
};
|
|
195
|
+
instances.set(target, drag);
|
|
196
|
+
}
|
|
197
|
+
return drag;
|
|
198
|
+
}
|
|
199
|
+
module.exports = __toCommonJS(drag_exports);
|
|
200
|
+
if (module.exports.default) module.exports = module.exports.default;
|
package/services/drag.js
CHANGED
|
@@ -1,32 +1,28 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
import Service from './Service.js';
|
|
8
|
-
import usePointer from './pointer.js';
|
|
9
|
-
import useRaf from './raf.js';
|
|
10
|
-
import inertiaFinalValue from '../utils/math/inertiaFinalValue.js';
|
|
11
|
-
var MODES = {
|
|
12
|
-
START: 'start',
|
|
13
|
-
DRAG: 'drag',
|
|
14
|
-
DROP: 'drop',
|
|
15
|
-
INERTIA: 'inertia',
|
|
16
|
-
STOP: 'stop'
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
3
|
+
var __publicField = (obj, key, value) => {
|
|
4
|
+
__defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
5
|
+
return value;
|
|
17
6
|
};
|
|
18
|
-
|
|
19
|
-
|
|
7
|
+
import Service from "./Service.js";
|
|
8
|
+
import usePointer from "./pointer.js";
|
|
9
|
+
import useRaf from "./raf.js";
|
|
10
|
+
import inertiaFinalValue from "../utils/math/inertiaFinalValue.js";
|
|
11
|
+
const MODES = {
|
|
12
|
+
START: "start",
|
|
13
|
+
DRAG: "drag",
|
|
14
|
+
DROP: "drop",
|
|
15
|
+
INERTIA: "inertia",
|
|
16
|
+
STOP: "stop"
|
|
17
|
+
};
|
|
18
|
+
let instanceIds = 0;
|
|
20
19
|
class Drag extends Service {
|
|
21
|
-
constructor(target) {
|
|
22
|
-
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
20
|
+
constructor(target, options = {}) {
|
|
23
21
|
super();
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
_defineProperty(this, "props", {
|
|
22
|
+
__publicField(this, "id");
|
|
23
|
+
__publicField(this, "props", {
|
|
28
24
|
target: null,
|
|
29
|
-
mode:
|
|
25
|
+
mode: void 0,
|
|
30
26
|
isGrabbing: false,
|
|
31
27
|
hasInertia: false,
|
|
32
28
|
x: 0,
|
|
@@ -48,45 +44,37 @@ class Drag extends Service {
|
|
|
48
44
|
y: 0
|
|
49
45
|
}
|
|
50
46
|
});
|
|
51
|
-
|
|
52
|
-
_defineProperty(this, "options", {
|
|
47
|
+
__publicField(this, "options", {
|
|
53
48
|
dampFactor: 0.85
|
|
54
49
|
});
|
|
55
|
-
|
|
56
50
|
instanceIds += 1;
|
|
57
|
-
this.id =
|
|
51
|
+
this.id = `drag-${instanceIds}`;
|
|
58
52
|
this.props.target = target;
|
|
59
|
-
this.options =
|
|
53
|
+
this.options = { ...this.options, ...options };
|
|
60
54
|
this.pointerHandler = this.pointerHandler.bind(this);
|
|
61
55
|
this.rafHandler = this.rafHandler.bind(this);
|
|
62
56
|
return this;
|
|
63
57
|
}
|
|
64
|
-
|
|
65
58
|
init() {
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
this.props.target.addEventListener('touchstart', this, options);
|
|
71
|
-
var pointer = usePointer();
|
|
59
|
+
const options = { passive: true };
|
|
60
|
+
this.props.target.addEventListener("mousedown", this, options);
|
|
61
|
+
this.props.target.addEventListener("touchstart", this, options);
|
|
62
|
+
const pointer = usePointer();
|
|
72
63
|
pointer.add(this.id, this.pointerHandler);
|
|
73
64
|
return this;
|
|
74
65
|
}
|
|
75
|
-
|
|
76
66
|
kill() {
|
|
77
|
-
this.props.target.removeEventListener(
|
|
78
|
-
this.props.target.removeEventListener(
|
|
79
|
-
|
|
67
|
+
this.props.target.removeEventListener("mousemove", this);
|
|
68
|
+
this.props.target.removeEventListener("touchmove", this);
|
|
69
|
+
const pointer = usePointer();
|
|
80
70
|
pointer.remove(this.id);
|
|
81
71
|
return this;
|
|
82
72
|
}
|
|
83
|
-
|
|
84
73
|
handleEvent(event) {
|
|
85
|
-
|
|
86
|
-
|
|
74
|
+
const x = event instanceof MouseEvent ? event.clientX : event.touches[0].clientX;
|
|
75
|
+
const y = event instanceof MouseEvent ? event.clientY : event.touches[0].clientY;
|
|
87
76
|
this.start(x, y);
|
|
88
77
|
}
|
|
89
|
-
|
|
90
78
|
start(x, y) {
|
|
91
79
|
this.props.x = x;
|
|
92
80
|
this.props.y = y;
|
|
@@ -102,7 +90,6 @@ class Drag extends Service {
|
|
|
102
90
|
this.props.isGrabbing = true;
|
|
103
91
|
this.trigger(this.props);
|
|
104
92
|
}
|
|
105
|
-
|
|
106
93
|
drop() {
|
|
107
94
|
this.props.isGrabbing = false;
|
|
108
95
|
this.props.mode = MODES.DROP;
|
|
@@ -111,19 +98,17 @@ class Drag extends Service {
|
|
|
111
98
|
this.props.final.y = inertiaFinalValue(this.props.y, this.props.delta.y, this.options.dampFactor);
|
|
112
99
|
this.trigger(this.props);
|
|
113
100
|
setTimeout(() => {
|
|
114
|
-
|
|
101
|
+
const raf = useRaf();
|
|
115
102
|
raf.remove(this.id);
|
|
116
103
|
raf.add(this.id, this.rafHandler);
|
|
117
104
|
}, 0);
|
|
118
105
|
}
|
|
119
|
-
|
|
120
106
|
stop() {
|
|
121
107
|
useRaf().remove(this.id);
|
|
122
108
|
this.props.hasInertia = false;
|
|
123
109
|
this.props.mode = MODES.STOP;
|
|
124
110
|
this.trigger(this.props);
|
|
125
111
|
}
|
|
126
|
-
|
|
127
112
|
rafHandler() {
|
|
128
113
|
if (!this.props.isGrabbing) {
|
|
129
114
|
this.props.x += this.props.delta.x;
|
|
@@ -132,19 +117,15 @@ class Drag extends Service {
|
|
|
132
117
|
this.props.distance.y = this.props.y - this.props.origin.y;
|
|
133
118
|
this.props.delta.x *= this.options.dampFactor;
|
|
134
119
|
this.props.delta.y *= this.options.dampFactor;
|
|
135
|
-
|
|
136
120
|
if (this.props.mode !== MODES.INERTIA) {
|
|
137
121
|
this.props.mode = MODES.INERTIA;
|
|
138
122
|
}
|
|
139
|
-
|
|
140
123
|
this.trigger(this.props);
|
|
141
|
-
|
|
142
124
|
if (Math.abs(this.props.delta.x) < 0.1 && Math.abs(this.props.delta.y) < 0.1) {
|
|
143
125
|
this.stop();
|
|
144
126
|
}
|
|
145
127
|
}
|
|
146
128
|
}
|
|
147
|
-
|
|
148
129
|
pointerHandler(props) {
|
|
149
130
|
if (this.props.isGrabbing) {
|
|
150
131
|
this.props.x = props.x;
|
|
@@ -155,31 +136,24 @@ class Drag extends Service {
|
|
|
155
136
|
this.props.final.y = props.y;
|
|
156
137
|
this.props.distance.x = this.props.x - this.props.origin.x;
|
|
157
138
|
this.props.distance.y = this.props.y - this.props.origin.y;
|
|
158
|
-
|
|
159
139
|
if (this.props.mode !== MODES.DRAG) {
|
|
160
140
|
this.props.mode = MODES.DRAG;
|
|
161
141
|
}
|
|
162
|
-
|
|
163
142
|
this.trigger(this.props);
|
|
164
|
-
|
|
165
143
|
if (!props.isDown) {
|
|
166
144
|
this.drop();
|
|
167
145
|
}
|
|
168
146
|
}
|
|
169
147
|
}
|
|
170
|
-
|
|
171
148
|
updateProps() {
|
|
172
149
|
return this.props;
|
|
173
150
|
}
|
|
174
|
-
|
|
175
151
|
}
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
var drag = instances.get(target);
|
|
180
|
-
|
|
152
|
+
const instances = /* @__PURE__ */ new WeakMap();
|
|
153
|
+
function useDrag(target, options) {
|
|
154
|
+
let drag = instances.get(target);
|
|
181
155
|
if (!drag) {
|
|
182
|
-
|
|
156
|
+
const instance = new Drag(target, options);
|
|
183
157
|
drag = {
|
|
184
158
|
add: instance.add.bind(instance),
|
|
185
159
|
remove: instance.remove.bind(instance),
|
|
@@ -188,6 +162,8 @@ export default function useDrag(target, options) {
|
|
|
188
162
|
};
|
|
189
163
|
instances.set(target, drag);
|
|
190
164
|
}
|
|
191
|
-
|
|
192
165
|
return drag;
|
|
193
|
-
}
|
|
166
|
+
}
|
|
167
|
+
export {
|
|
168
|
+
useDrag as default
|
|
169
|
+
};
|
|
@@ -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,111 @@
|
|
|
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 __defNormalProp = (obj, key2, value) => key2 in obj ? __defProp(obj, key2, { enumerable: true, configurable: true, writable: true, value }) : obj[key2] = value;
|
|
8
|
+
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
9
|
+
var __export = (target, all) => {
|
|
10
|
+
for (var name in all)
|
|
11
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
12
|
+
};
|
|
13
|
+
var __reExport = (target, module2, copyDefault, desc) => {
|
|
14
|
+
if (module2 && typeof module2 === "object" || typeof module2 === "function") {
|
|
15
|
+
for (let key2 of __getOwnPropNames(module2))
|
|
16
|
+
if (!__hasOwnProp.call(target, key2) && (copyDefault || key2 !== "default"))
|
|
17
|
+
__defProp(target, key2, { get: () => module2[key2], enumerable: !(desc = __getOwnPropDesc(module2, key2)) || desc.enumerable });
|
|
18
|
+
}
|
|
19
|
+
return target;
|
|
20
|
+
};
|
|
21
|
+
var __toESM = (module2, isNodeMode) => {
|
|
22
|
+
return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
|
|
23
|
+
};
|
|
24
|
+
var __toCommonJS = /* @__PURE__ */ ((cache) => {
|
|
25
|
+
return (module2, temp) => {
|
|
26
|
+
return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
|
|
27
|
+
};
|
|
28
|
+
})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
|
|
29
|
+
var __publicField = (obj, key2, value) => {
|
|
30
|
+
__defNormalProp(obj, typeof key2 !== "symbol" ? key2 + "" : key2, value);
|
|
31
|
+
return value;
|
|
32
|
+
};
|
|
33
|
+
|
|
34
|
+
// packages/js-toolkit/services/key.js
|
|
35
|
+
var key_exports = {};
|
|
36
|
+
__export(key_exports, {
|
|
37
|
+
default: () => useKey
|
|
38
|
+
});
|
|
39
|
+
var import_Service = __toESM(require("./Service.cjs"), 1);
|
|
40
|
+
var import_keyCodes = __toESM(require("../utils/keyCodes.cjs"), 1);
|
|
41
|
+
var Key = class extends import_Service.default {
|
|
42
|
+
constructor() {
|
|
43
|
+
super(...arguments);
|
|
44
|
+
__publicField(this, "previousEvent");
|
|
45
|
+
__publicField(this, "props", {
|
|
46
|
+
event: null,
|
|
47
|
+
triggered: 0,
|
|
48
|
+
isUp: false,
|
|
49
|
+
isDown: false,
|
|
50
|
+
ENTER: false,
|
|
51
|
+
SPACE: false,
|
|
52
|
+
TAB: false,
|
|
53
|
+
ESC: false,
|
|
54
|
+
LEFT: false,
|
|
55
|
+
UP: false,
|
|
56
|
+
RIGHT: false,
|
|
57
|
+
DOWN: false,
|
|
58
|
+
direction: "none"
|
|
59
|
+
});
|
|
60
|
+
}
|
|
61
|
+
init() {
|
|
62
|
+
document.addEventListener("keydown", this);
|
|
63
|
+
document.addEventListener("keyup", this);
|
|
64
|
+
}
|
|
65
|
+
handleEvent(event) {
|
|
66
|
+
this.updateProps(event);
|
|
67
|
+
this.trigger(this.props);
|
|
68
|
+
}
|
|
69
|
+
kill() {
|
|
70
|
+
document.removeEventListener("keydown", this);
|
|
71
|
+
document.removeEventListener("keyup", this);
|
|
72
|
+
}
|
|
73
|
+
updateProps(event) {
|
|
74
|
+
var _a;
|
|
75
|
+
this.props.event = event;
|
|
76
|
+
Object.entries(import_keyCodes.default).forEach(([name, code]) => {
|
|
77
|
+
this.props[name] = code === event.keyCode;
|
|
78
|
+
});
|
|
79
|
+
if (!this.previousEvent) {
|
|
80
|
+
this.props.triggered = 0;
|
|
81
|
+
}
|
|
82
|
+
if (this.props.event.type === "keydown" && ((_a = this.previousEvent) == null ? void 0 : _a.type) === "keydown") {
|
|
83
|
+
this.props.triggered += 1;
|
|
84
|
+
} else {
|
|
85
|
+
this.props.triggered = 1;
|
|
86
|
+
}
|
|
87
|
+
this.previousEvent = this.props.event;
|
|
88
|
+
this.props.direction = this.props.event.type === "keydown" ? "down" : "up";
|
|
89
|
+
this.props.isUp = this.props.event.type === "keyup";
|
|
90
|
+
this.props.isDown = this.props.event.type === "keydown";
|
|
91
|
+
return this.props;
|
|
92
|
+
}
|
|
93
|
+
};
|
|
94
|
+
var instance;
|
|
95
|
+
var key;
|
|
96
|
+
function useKey() {
|
|
97
|
+
if (!key) {
|
|
98
|
+
if (!instance) {
|
|
99
|
+
instance = new Key();
|
|
100
|
+
}
|
|
101
|
+
key = {
|
|
102
|
+
add: instance.add.bind(instance),
|
|
103
|
+
remove: instance.remove.bind(instance),
|
|
104
|
+
has: instance.has.bind(instance),
|
|
105
|
+
props: instance.updateProps.bind(instance)
|
|
106
|
+
};
|
|
107
|
+
}
|
|
108
|
+
return key;
|
|
109
|
+
}
|
|
110
|
+
module.exports = __toCommonJS(key_exports);
|
|
111
|
+
if (module.exports.default) module.exports = module.exports.default;
|