@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
package/services/key.js
CHANGED
|
@@ -1,81 +1,61 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import keyCodes from '../utils/keyCodes.js';
|
|
4
|
-
|
|
1
|
+
import Service from "./Service.js";
|
|
2
|
+
import keyCodes from "../utils/keyCodes.js";
|
|
5
3
|
class Key extends Service {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
RIGHT: false,
|
|
23
|
-
DOWN: false,
|
|
24
|
-
direction: 'none'
|
|
25
|
-
});
|
|
26
|
-
}
|
|
27
|
-
|
|
4
|
+
previousEvent;
|
|
5
|
+
props = {
|
|
6
|
+
event: null,
|
|
7
|
+
triggered: 0,
|
|
8
|
+
isUp: false,
|
|
9
|
+
isDown: false,
|
|
10
|
+
ENTER: false,
|
|
11
|
+
SPACE: false,
|
|
12
|
+
TAB: false,
|
|
13
|
+
ESC: false,
|
|
14
|
+
LEFT: false,
|
|
15
|
+
UP: false,
|
|
16
|
+
RIGHT: false,
|
|
17
|
+
DOWN: false,
|
|
18
|
+
direction: "none"
|
|
19
|
+
};
|
|
28
20
|
init() {
|
|
29
|
-
document.addEventListener(
|
|
30
|
-
document.addEventListener(
|
|
21
|
+
document.addEventListener("keydown", this);
|
|
22
|
+
document.addEventListener("keyup", this);
|
|
31
23
|
}
|
|
32
|
-
|
|
33
24
|
handleEvent(event) {
|
|
34
25
|
this.updateProps(event);
|
|
35
26
|
this.trigger(this.props);
|
|
36
27
|
}
|
|
37
|
-
|
|
38
28
|
kill() {
|
|
39
|
-
document.removeEventListener(
|
|
40
|
-
document.removeEventListener(
|
|
29
|
+
document.removeEventListener("keydown", this);
|
|
30
|
+
document.removeEventListener("keyup", this);
|
|
41
31
|
}
|
|
42
|
-
|
|
43
32
|
updateProps(event) {
|
|
44
|
-
var _this$previousEvent;
|
|
45
|
-
|
|
46
33
|
this.props.event = event;
|
|
47
|
-
Object.entries(keyCodes).forEach(
|
|
48
|
-
var [name, code] = _ref;
|
|
34
|
+
Object.entries(keyCodes).forEach(([name, code]) => {
|
|
49
35
|
this.props[name] = code === event.keyCode;
|
|
50
36
|
});
|
|
51
|
-
|
|
52
37
|
if (!this.previousEvent) {
|
|
53
38
|
this.props.triggered = 0;
|
|
54
39
|
}
|
|
55
|
-
|
|
56
|
-
if (this.props.event.type === 'keydown' && ((_this$previousEvent = this.previousEvent) === null || _this$previousEvent === void 0 ? void 0 : _this$previousEvent.type) === 'keydown') {
|
|
40
|
+
if (this.props.event.type === "keydown" && this.previousEvent?.type === "keydown") {
|
|
57
41
|
this.props.triggered += 1;
|
|
58
42
|
} else {
|
|
59
43
|
this.props.triggered = 1;
|
|
60
44
|
}
|
|
61
|
-
|
|
62
45
|
this.previousEvent = this.props.event;
|
|
63
|
-
this.props.direction = this.props.event.type ===
|
|
64
|
-
this.props.isUp = this.props.event.type ===
|
|
65
|
-
this.props.isDown = this.props.event.type ===
|
|
46
|
+
this.props.direction = this.props.event.type === "keydown" ? "down" : "up";
|
|
47
|
+
this.props.isUp = this.props.event.type === "keyup";
|
|
48
|
+
this.props.isDown = this.props.event.type === "keydown";
|
|
66
49
|
return this.props;
|
|
67
50
|
}
|
|
68
|
-
|
|
69
51
|
}
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
export default function useKey() {
|
|
52
|
+
let instance;
|
|
53
|
+
let key;
|
|
54
|
+
function useKey() {
|
|
74
55
|
if (!key) {
|
|
75
56
|
if (!instance) {
|
|
76
57
|
instance = new Key();
|
|
77
58
|
}
|
|
78
|
-
|
|
79
59
|
key = {
|
|
80
60
|
add: instance.add.bind(instance),
|
|
81
61
|
remove: instance.remove.bind(instance),
|
|
@@ -83,6 +63,8 @@ export default function useKey() {
|
|
|
83
63
|
props: instance.updateProps.bind(instance)
|
|
84
64
|
};
|
|
85
65
|
}
|
|
86
|
-
|
|
87
66
|
return key;
|
|
88
|
-
}
|
|
67
|
+
}
|
|
68
|
+
export {
|
|
69
|
+
useKey as default
|
|
70
|
+
};
|
|
@@ -0,0 +1,71 @@
|
|
|
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/load.js
|
|
30
|
+
var load_exports = {};
|
|
31
|
+
__export(load_exports, {
|
|
32
|
+
default: () => useLoad
|
|
33
|
+
});
|
|
34
|
+
var import_Service = __toESM(require("./Service.cjs"), 1);
|
|
35
|
+
var Load = class extends import_Service.default {
|
|
36
|
+
props = {
|
|
37
|
+
time: window.performance.now()
|
|
38
|
+
};
|
|
39
|
+
init() {
|
|
40
|
+
window.addEventListener("load", this);
|
|
41
|
+
}
|
|
42
|
+
handleEvent() {
|
|
43
|
+
this.updateProps();
|
|
44
|
+
this.trigger(this.props);
|
|
45
|
+
}
|
|
46
|
+
kill() {
|
|
47
|
+
window.removeEventListener("load", this);
|
|
48
|
+
}
|
|
49
|
+
updateProps() {
|
|
50
|
+
this.props.time = window.performance.now();
|
|
51
|
+
return this.props;
|
|
52
|
+
}
|
|
53
|
+
};
|
|
54
|
+
var instance;
|
|
55
|
+
var load;
|
|
56
|
+
function useLoad() {
|
|
57
|
+
if (!load) {
|
|
58
|
+
if (!instance) {
|
|
59
|
+
instance = new Load();
|
|
60
|
+
}
|
|
61
|
+
load = {
|
|
62
|
+
add: instance.add.bind(instance),
|
|
63
|
+
remove: instance.remove.bind(instance),
|
|
64
|
+
has: instance.has.bind(instance),
|
|
65
|
+
props: instance.updateProps.bind(instance)
|
|
66
|
+
};
|
|
67
|
+
}
|
|
68
|
+
return load;
|
|
69
|
+
}
|
|
70
|
+
module.exports = __toCommonJS(load_exports);
|
|
71
|
+
if (module.exports.default) module.exports = module.exports.default;
|
package/services/load.js
CHANGED
|
@@ -1,43 +1,30 @@
|
|
|
1
|
-
import
|
|
2
|
-
import Service from './Service.js';
|
|
3
|
-
|
|
1
|
+
import Service from "./Service.js";
|
|
4
2
|
class Load extends Service {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
_defineProperty(this, "props", {
|
|
9
|
-
time: window.performance.now()
|
|
10
|
-
});
|
|
11
|
-
}
|
|
12
|
-
|
|
3
|
+
props = {
|
|
4
|
+
time: window.performance.now()
|
|
5
|
+
};
|
|
13
6
|
init() {
|
|
14
|
-
window.addEventListener(
|
|
7
|
+
window.addEventListener("load", this);
|
|
15
8
|
}
|
|
16
|
-
|
|
17
9
|
handleEvent() {
|
|
18
10
|
this.updateProps();
|
|
19
11
|
this.trigger(this.props);
|
|
20
12
|
}
|
|
21
|
-
|
|
22
13
|
kill() {
|
|
23
|
-
window.removeEventListener(
|
|
14
|
+
window.removeEventListener("load", this);
|
|
24
15
|
}
|
|
25
|
-
|
|
26
16
|
updateProps() {
|
|
27
17
|
this.props.time = window.performance.now();
|
|
28
18
|
return this.props;
|
|
29
19
|
}
|
|
30
|
-
|
|
31
20
|
}
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
export default function useLoad() {
|
|
21
|
+
let instance;
|
|
22
|
+
let load;
|
|
23
|
+
function useLoad() {
|
|
36
24
|
if (!load) {
|
|
37
25
|
if (!instance) {
|
|
38
26
|
instance = new Load();
|
|
39
27
|
}
|
|
40
|
-
|
|
41
28
|
load = {
|
|
42
29
|
add: instance.add.bind(instance),
|
|
43
30
|
remove: instance.remove.bind(instance),
|
|
@@ -45,6 +32,8 @@ export default function useLoad() {
|
|
|
45
32
|
props: instance.updateProps.bind(instance)
|
|
46
33
|
};
|
|
47
34
|
}
|
|
48
|
-
|
|
49
35
|
return load;
|
|
50
|
-
}
|
|
36
|
+
}
|
|
37
|
+
export {
|
|
38
|
+
useLoad as default
|
|
39
|
+
};
|
|
@@ -0,0 +1,160 @@
|
|
|
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/pointer.js
|
|
30
|
+
var pointer_exports = {};
|
|
31
|
+
__export(pointer_exports, {
|
|
32
|
+
default: () => usePointer
|
|
33
|
+
});
|
|
34
|
+
var import_Service = __toESM(require("./Service.cjs"), 1);
|
|
35
|
+
function isTouchEvent(event) {
|
|
36
|
+
return typeof TouchEvent !== "undefined" && event instanceof TouchEvent;
|
|
37
|
+
}
|
|
38
|
+
var Pointer = class extends import_Service.default {
|
|
39
|
+
props = {
|
|
40
|
+
event: null,
|
|
41
|
+
isDown: false,
|
|
42
|
+
x: window.innerWidth / 2,
|
|
43
|
+
y: window.innerHeight / 2,
|
|
44
|
+
changed: {
|
|
45
|
+
x: false,
|
|
46
|
+
y: false
|
|
47
|
+
},
|
|
48
|
+
last: {
|
|
49
|
+
x: window.innerWidth / 2,
|
|
50
|
+
y: window.innerHeight / 2
|
|
51
|
+
},
|
|
52
|
+
delta: {
|
|
53
|
+
x: 0,
|
|
54
|
+
y: 0
|
|
55
|
+
},
|
|
56
|
+
progress: {
|
|
57
|
+
x: 0.5,
|
|
58
|
+
y: 0.5
|
|
59
|
+
},
|
|
60
|
+
max: {
|
|
61
|
+
x: window.innerWidth,
|
|
62
|
+
y: window.innerHeight
|
|
63
|
+
}
|
|
64
|
+
};
|
|
65
|
+
hasRaf = false;
|
|
66
|
+
init() {
|
|
67
|
+
document.documentElement.addEventListener("mouseenter", this, {
|
|
68
|
+
once: true,
|
|
69
|
+
capture: true
|
|
70
|
+
});
|
|
71
|
+
const options = { passive: true, capture: true };
|
|
72
|
+
document.addEventListener("mousemove", this, options);
|
|
73
|
+
document.addEventListener("touchmove", this, options);
|
|
74
|
+
document.addEventListener("mousedown", this, options);
|
|
75
|
+
document.addEventListener("touchstart", this, options);
|
|
76
|
+
document.addEventListener("mouseup", this, options);
|
|
77
|
+
document.addEventListener("touchend", this, options);
|
|
78
|
+
return this;
|
|
79
|
+
}
|
|
80
|
+
handleEvent(event) {
|
|
81
|
+
switch (event.type) {
|
|
82
|
+
case "mouseenter":
|
|
83
|
+
case "mousemove":
|
|
84
|
+
case "touchmove":
|
|
85
|
+
this.handler(event);
|
|
86
|
+
break;
|
|
87
|
+
case "mousedown":
|
|
88
|
+
case "touchstart":
|
|
89
|
+
this.downHandler();
|
|
90
|
+
break;
|
|
91
|
+
case "mouseup":
|
|
92
|
+
case "touchend":
|
|
93
|
+
this.upHandler();
|
|
94
|
+
break;
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
kill() {
|
|
98
|
+
document.removeEventListener("mousemove", this);
|
|
99
|
+
document.removeEventListener("touchmove", this);
|
|
100
|
+
document.removeEventListener("mousedown", this);
|
|
101
|
+
document.removeEventListener("touchstart", this);
|
|
102
|
+
document.removeEventListener("mouseup", this);
|
|
103
|
+
document.removeEventListener("touchend", this);
|
|
104
|
+
return this;
|
|
105
|
+
}
|
|
106
|
+
handler(event) {
|
|
107
|
+
this.updateProps(event);
|
|
108
|
+
this.trigger(this.props);
|
|
109
|
+
}
|
|
110
|
+
downHandler() {
|
|
111
|
+
this.props.isDown = true;
|
|
112
|
+
this.trigger(this.props);
|
|
113
|
+
}
|
|
114
|
+
upHandler() {
|
|
115
|
+
this.props.isDown = false;
|
|
116
|
+
this.trigger(this.props);
|
|
117
|
+
}
|
|
118
|
+
updateProps(event) {
|
|
119
|
+
this.props.event = event;
|
|
120
|
+
const yLast = this.props.y;
|
|
121
|
+
const xLast = this.props.x;
|
|
122
|
+
const y = isTouchEvent(event) ? event.touches[0]?.clientY : event.clientY;
|
|
123
|
+
if (y !== this.props.y) {
|
|
124
|
+
this.props.y = y;
|
|
125
|
+
}
|
|
126
|
+
const x = isTouchEvent(event) ? event.touches[0]?.clientX : event.clientX;
|
|
127
|
+
if (x !== this.props.x) {
|
|
128
|
+
this.props.x = x;
|
|
129
|
+
}
|
|
130
|
+
this.props.changed.x = this.props.x !== xLast;
|
|
131
|
+
this.props.changed.y = this.props.y !== yLast;
|
|
132
|
+
this.props.last.x = xLast;
|
|
133
|
+
this.props.last.y = yLast;
|
|
134
|
+
this.props.delta.x = this.props.x - xLast;
|
|
135
|
+
this.props.delta.y = this.props.y - yLast;
|
|
136
|
+
this.props.max.x = window.innerWidth;
|
|
137
|
+
this.props.max.y = window.innerHeight;
|
|
138
|
+
this.props.progress.x = this.props.x / this.props.max.x;
|
|
139
|
+
this.props.progress.y = this.props.y / this.props.max.y;
|
|
140
|
+
return this.props;
|
|
141
|
+
}
|
|
142
|
+
};
|
|
143
|
+
var instance;
|
|
144
|
+
var pointer;
|
|
145
|
+
function usePointer() {
|
|
146
|
+
if (!pointer) {
|
|
147
|
+
if (!instance) {
|
|
148
|
+
instance = new Pointer();
|
|
149
|
+
}
|
|
150
|
+
pointer = {
|
|
151
|
+
add: instance.add.bind(instance),
|
|
152
|
+
remove: instance.remove.bind(instance),
|
|
153
|
+
has: instance.has.bind(instance),
|
|
154
|
+
props: instance.updateProps.bind(instance)
|
|
155
|
+
};
|
|
156
|
+
}
|
|
157
|
+
return pointer;
|
|
158
|
+
}
|
|
159
|
+
module.exports = __toCommonJS(pointer_exports);
|
|
160
|
+
if (module.exports.default) module.exports = module.exports.default;
|
package/services/pointer.js
CHANGED
|
@@ -1,125 +1,99 @@
|
|
|
1
|
-
import
|
|
2
|
-
import Service from './Service.js';
|
|
3
|
-
|
|
1
|
+
import Service from "./Service.js";
|
|
4
2
|
function isTouchEvent(event) {
|
|
5
|
-
return typeof TouchEvent !==
|
|
3
|
+
return typeof TouchEvent !== "undefined" && event instanceof TouchEvent;
|
|
6
4
|
}
|
|
7
|
-
|
|
8
5
|
class Pointer extends Service {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
6
|
+
props = {
|
|
7
|
+
event: null,
|
|
8
|
+
isDown: false,
|
|
9
|
+
x: window.innerWidth / 2,
|
|
10
|
+
y: window.innerHeight / 2,
|
|
11
|
+
changed: {
|
|
12
|
+
x: false,
|
|
13
|
+
y: false
|
|
14
|
+
},
|
|
15
|
+
last: {
|
|
15
16
|
x: window.innerWidth / 2,
|
|
16
|
-
y: window.innerHeight / 2
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
},
|
|
33
|
-
max: {
|
|
34
|
-
x: window.innerWidth,
|
|
35
|
-
y: window.innerHeight
|
|
36
|
-
}
|
|
37
|
-
});
|
|
38
|
-
|
|
39
|
-
_defineProperty(this, "hasRaf", false);
|
|
40
|
-
}
|
|
41
|
-
|
|
17
|
+
y: window.innerHeight / 2
|
|
18
|
+
},
|
|
19
|
+
delta: {
|
|
20
|
+
x: 0,
|
|
21
|
+
y: 0
|
|
22
|
+
},
|
|
23
|
+
progress: {
|
|
24
|
+
x: 0.5,
|
|
25
|
+
y: 0.5
|
|
26
|
+
},
|
|
27
|
+
max: {
|
|
28
|
+
x: window.innerWidth,
|
|
29
|
+
y: window.innerHeight
|
|
30
|
+
}
|
|
31
|
+
};
|
|
32
|
+
hasRaf = false;
|
|
42
33
|
init() {
|
|
43
|
-
document.documentElement.addEventListener(
|
|
34
|
+
document.documentElement.addEventListener("mouseenter", this, {
|
|
44
35
|
once: true,
|
|
45
36
|
capture: true
|
|
46
37
|
});
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
document.addEventListener(
|
|
52
|
-
document.addEventListener(
|
|
53
|
-
document.addEventListener(
|
|
54
|
-
document.addEventListener('touchstart', this, options);
|
|
55
|
-
document.addEventListener('mouseup', this, options);
|
|
56
|
-
document.addEventListener('touchend', this, options);
|
|
38
|
+
const options = { passive: true, capture: true };
|
|
39
|
+
document.addEventListener("mousemove", this, options);
|
|
40
|
+
document.addEventListener("touchmove", this, options);
|
|
41
|
+
document.addEventListener("mousedown", this, options);
|
|
42
|
+
document.addEventListener("touchstart", this, options);
|
|
43
|
+
document.addEventListener("mouseup", this, options);
|
|
44
|
+
document.addEventListener("touchend", this, options);
|
|
57
45
|
return this;
|
|
58
46
|
}
|
|
59
|
-
|
|
60
47
|
handleEvent(event) {
|
|
61
48
|
switch (event.type) {
|
|
62
|
-
case
|
|
63
|
-
case
|
|
64
|
-
case
|
|
49
|
+
case "mouseenter":
|
|
50
|
+
case "mousemove":
|
|
51
|
+
case "touchmove":
|
|
65
52
|
this.handler(event);
|
|
66
53
|
break;
|
|
67
|
-
|
|
68
|
-
case
|
|
69
|
-
case 'touchstart':
|
|
54
|
+
case "mousedown":
|
|
55
|
+
case "touchstart":
|
|
70
56
|
this.downHandler();
|
|
71
57
|
break;
|
|
72
|
-
|
|
73
|
-
case
|
|
74
|
-
case 'touchend':
|
|
58
|
+
case "mouseup":
|
|
59
|
+
case "touchend":
|
|
75
60
|
this.upHandler();
|
|
76
61
|
break;
|
|
77
62
|
}
|
|
78
63
|
}
|
|
79
|
-
|
|
80
64
|
kill() {
|
|
81
|
-
document.removeEventListener(
|
|
82
|
-
document.removeEventListener(
|
|
83
|
-
document.removeEventListener(
|
|
84
|
-
document.removeEventListener(
|
|
85
|
-
document.removeEventListener(
|
|
86
|
-
document.removeEventListener(
|
|
65
|
+
document.removeEventListener("mousemove", this);
|
|
66
|
+
document.removeEventListener("touchmove", this);
|
|
67
|
+
document.removeEventListener("mousedown", this);
|
|
68
|
+
document.removeEventListener("touchstart", this);
|
|
69
|
+
document.removeEventListener("mouseup", this);
|
|
70
|
+
document.removeEventListener("touchend", this);
|
|
87
71
|
return this;
|
|
88
72
|
}
|
|
89
|
-
|
|
90
73
|
handler(event) {
|
|
91
74
|
this.updateProps(event);
|
|
92
75
|
this.trigger(this.props);
|
|
93
76
|
}
|
|
94
|
-
|
|
95
77
|
downHandler() {
|
|
96
78
|
this.props.isDown = true;
|
|
97
79
|
this.trigger(this.props);
|
|
98
80
|
}
|
|
99
|
-
|
|
100
81
|
upHandler() {
|
|
101
82
|
this.props.isDown = false;
|
|
102
83
|
this.trigger(this.props);
|
|
103
84
|
}
|
|
104
|
-
|
|
105
85
|
updateProps(event) {
|
|
106
|
-
var _event$touches$, _event$touches$2;
|
|
107
|
-
|
|
108
86
|
this.props.event = event;
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
87
|
+
const yLast = this.props.y;
|
|
88
|
+
const xLast = this.props.x;
|
|
89
|
+
const y = isTouchEvent(event) ? event.touches[0]?.clientY : event.clientY;
|
|
113
90
|
if (y !== this.props.y) {
|
|
114
91
|
this.props.y = y;
|
|
115
92
|
}
|
|
116
|
-
|
|
117
|
-
var x = isTouchEvent(event) ? (_event$touches$2 = event.touches[0]) === null || _event$touches$2 === void 0 ? void 0 : _event$touches$2.clientX : event.clientX;
|
|
118
|
-
|
|
93
|
+
const x = isTouchEvent(event) ? event.touches[0]?.clientX : event.clientX;
|
|
119
94
|
if (x !== this.props.x) {
|
|
120
95
|
this.props.x = x;
|
|
121
96
|
}
|
|
122
|
-
|
|
123
97
|
this.props.changed.x = this.props.x !== xLast;
|
|
124
98
|
this.props.changed.y = this.props.y !== yLast;
|
|
125
99
|
this.props.last.x = xLast;
|
|
@@ -132,17 +106,14 @@ class Pointer extends Service {
|
|
|
132
106
|
this.props.progress.y = this.props.y / this.props.max.y;
|
|
133
107
|
return this.props;
|
|
134
108
|
}
|
|
135
|
-
|
|
136
109
|
}
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
export default function usePointer() {
|
|
110
|
+
let instance;
|
|
111
|
+
let pointer;
|
|
112
|
+
function usePointer() {
|
|
141
113
|
if (!pointer) {
|
|
142
114
|
if (!instance) {
|
|
143
115
|
instance = new Pointer();
|
|
144
116
|
}
|
|
145
|
-
|
|
146
117
|
pointer = {
|
|
147
118
|
add: instance.add.bind(instance),
|
|
148
119
|
remove: instance.remove.bind(instance),
|
|
@@ -150,6 +121,8 @@ export default function usePointer() {
|
|
|
150
121
|
props: instance.updateProps.bind(instance)
|
|
151
122
|
};
|
|
152
123
|
}
|
|
153
|
-
|
|
154
124
|
return pointer;
|
|
155
|
-
}
|
|
125
|
+
}
|
|
126
|
+
export {
|
|
127
|
+
usePointer as default
|
|
128
|
+
};
|