@studiometa/js-toolkit 2.2.2 → 2.2.3
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 +3 -4
- package/Base/index.js +1 -2
- package/Base/managers/ServicesManager.cjs +4 -5
- package/Base/managers/ServicesManager.js +4 -5
- package/Base/utils.cjs +1 -5
- package/Base/utils.d.ts +0 -8
- package/Base/utils.js +1 -5
- package/package.json +1 -1
- package/services/drag.cjs +126 -148
- package/services/drag.d.ts +10 -10
- package/services/drag.js +125 -148
- package/services/index.cjs +3 -1
- package/services/index.d.ts +1 -0
- package/services/index.js +3 -1
- package/services/key.cjs +48 -63
- package/services/key.d.ts +0 -8
- package/services/key.js +47 -63
- package/services/load.cjs +24 -40
- package/services/load.d.ts +0 -8
- package/services/load.js +23 -37
- package/services/pointer.cjs +73 -103
- package/services/pointer.d.ts +1 -9
- package/services/pointer.js +72 -100
- package/services/raf.cjs +36 -53
- package/services/raf.d.ts +0 -8
- package/services/raf.js +36 -54
- package/services/resize.cjs +59 -68
- package/services/resize.d.ts +0 -7
- package/services/resize.js +58 -68
- package/services/scroll.cjs +49 -71
- package/services/scroll.js +48 -71
- package/services/service.cjs +68 -0
- package/services/service.d.ts +18 -0
- package/services/service.js +46 -0
- package/utils/css/animate.cjs +3 -7
- package/utils/css/animate.js +2 -6
- package/utils/index.cjs +1 -0
- package/utils/index.d.ts +1 -0
- package/utils/index.js +1 -0
- package/utils/noop.cjs +31 -0
- package/utils/noop.d.ts +12 -0
- package/utils/noop.js +9 -0
- package/services/Service.cjs +0 -76
- package/services/Service.d.ts +0 -76
- package/services/Service.js +0 -55
package/services/load.cjs
CHANGED
|
@@ -1,10 +1,7 @@
|
|
|
1
|
-
var __create = Object.create;
|
|
2
1
|
var __defProp = Object.defineProperty;
|
|
3
2
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
3
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
-
var __getProtoOf = Object.getPrototypeOf;
|
|
6
4
|
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
5
|
var __export = (target, all) => {
|
|
9
6
|
for (var name in all)
|
|
10
7
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
@@ -17,12 +14,7 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
17
14
|
}
|
|
18
15
|
return to;
|
|
19
16
|
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
|
|
21
17
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
22
|
-
var __publicField = (obj, key, value) => {
|
|
23
|
-
__defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
24
|
-
return value;
|
|
25
|
-
};
|
|
26
18
|
|
|
27
19
|
// packages/js-toolkit/services/load.js
|
|
28
20
|
var load_exports = {};
|
|
@@ -30,42 +22,34 @@ __export(load_exports, {
|
|
|
30
22
|
default: () => useLoad
|
|
31
23
|
});
|
|
32
24
|
module.exports = __toCommonJS(load_exports);
|
|
33
|
-
var
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
time: window.performance.now()
|
|
39
|
-
});
|
|
40
|
-
}
|
|
41
|
-
init() {
|
|
42
|
-
window.addEventListener("load", this);
|
|
43
|
-
}
|
|
44
|
-
handleEvent() {
|
|
45
|
-
this.updateProps();
|
|
46
|
-
this.trigger(this.props);
|
|
47
|
-
}
|
|
48
|
-
kill() {
|
|
49
|
-
window.removeEventListener("load", this);
|
|
50
|
-
}
|
|
51
|
-
updateProps() {
|
|
52
|
-
this.props.time = window.performance.now();
|
|
53
|
-
return this.props;
|
|
25
|
+
var import_service = require("./service.cjs");
|
|
26
|
+
function createLoadService() {
|
|
27
|
+
function onLoad() {
|
|
28
|
+
props.time = window.performance.now();
|
|
29
|
+
trigger(props);
|
|
54
30
|
}
|
|
55
|
-
}
|
|
56
|
-
|
|
31
|
+
const { add, remove, has, props, trigger } = (0, import_service.useService)({
|
|
32
|
+
props: {
|
|
33
|
+
time: performance.now()
|
|
34
|
+
},
|
|
35
|
+
init() {
|
|
36
|
+
window.addEventListener("load", onLoad);
|
|
37
|
+
},
|
|
38
|
+
kill() {
|
|
39
|
+
window.removeEventListener("load", onLoad);
|
|
40
|
+
}
|
|
41
|
+
});
|
|
42
|
+
return {
|
|
43
|
+
add,
|
|
44
|
+
remove,
|
|
45
|
+
has,
|
|
46
|
+
props: () => props
|
|
47
|
+
};
|
|
48
|
+
}
|
|
57
49
|
var load;
|
|
58
50
|
function useLoad() {
|
|
59
51
|
if (!load) {
|
|
60
|
-
|
|
61
|
-
instance = new Load();
|
|
62
|
-
}
|
|
63
|
-
load = {
|
|
64
|
-
add: instance.add.bind(instance),
|
|
65
|
-
remove: instance.remove.bind(instance),
|
|
66
|
-
has: instance.has.bind(instance),
|
|
67
|
-
props: instance.updateProps.bind(instance)
|
|
68
|
-
};
|
|
52
|
+
load = createLoadService();
|
|
69
53
|
}
|
|
70
54
|
return load;
|
|
71
55
|
}
|
package/services/load.d.ts
CHANGED
|
@@ -1,14 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Use the load service.
|
|
3
3
|
*
|
|
4
|
-
* ```js
|
|
5
|
-
* import { useLoad } from '@studiometa/js/services';
|
|
6
|
-
* const { add, remove, props } = useRag();
|
|
7
|
-
* add(id, (props) => {});
|
|
8
|
-
* remove(id);
|
|
9
|
-
* props();
|
|
10
|
-
* ```
|
|
11
|
-
*
|
|
12
4
|
* @returns {LoadService}
|
|
13
5
|
*/
|
|
14
6
|
export default function useLoad(): LoadService;
|
package/services/load.js
CHANGED
|
@@ -1,45 +1,31 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
};
|
|
7
|
-
import Service from "./Service.js";
|
|
8
|
-
class Load extends Service {
|
|
9
|
-
constructor() {
|
|
10
|
-
super(...arguments);
|
|
11
|
-
__publicField(this, "props", {
|
|
12
|
-
time: window.performance.now()
|
|
13
|
-
});
|
|
14
|
-
}
|
|
15
|
-
init() {
|
|
16
|
-
window.addEventListener("load", this);
|
|
17
|
-
}
|
|
18
|
-
handleEvent() {
|
|
19
|
-
this.updateProps();
|
|
20
|
-
this.trigger(this.props);
|
|
21
|
-
}
|
|
22
|
-
kill() {
|
|
23
|
-
window.removeEventListener("load", this);
|
|
24
|
-
}
|
|
25
|
-
updateProps() {
|
|
26
|
-
this.props.time = window.performance.now();
|
|
27
|
-
return this.props;
|
|
1
|
+
import { useService } from "./service.js";
|
|
2
|
+
function createLoadService() {
|
|
3
|
+
function onLoad() {
|
|
4
|
+
props.time = window.performance.now();
|
|
5
|
+
trigger(props);
|
|
28
6
|
}
|
|
7
|
+
const { add, remove, has, props, trigger } = useService({
|
|
8
|
+
props: {
|
|
9
|
+
time: performance.now()
|
|
10
|
+
},
|
|
11
|
+
init() {
|
|
12
|
+
window.addEventListener("load", onLoad);
|
|
13
|
+
},
|
|
14
|
+
kill() {
|
|
15
|
+
window.removeEventListener("load", onLoad);
|
|
16
|
+
}
|
|
17
|
+
});
|
|
18
|
+
return {
|
|
19
|
+
add,
|
|
20
|
+
remove,
|
|
21
|
+
has,
|
|
22
|
+
props: () => props
|
|
23
|
+
};
|
|
29
24
|
}
|
|
30
|
-
let instance;
|
|
31
25
|
let load;
|
|
32
26
|
function useLoad() {
|
|
33
27
|
if (!load) {
|
|
34
|
-
|
|
35
|
-
instance = new Load();
|
|
36
|
-
}
|
|
37
|
-
load = {
|
|
38
|
-
add: instance.add.bind(instance),
|
|
39
|
-
remove: instance.remove.bind(instance),
|
|
40
|
-
has: instance.has.bind(instance),
|
|
41
|
-
props: instance.updateProps.bind(instance)
|
|
42
|
-
};
|
|
28
|
+
load = createLoadService();
|
|
43
29
|
}
|
|
44
30
|
return load;
|
|
45
31
|
}
|
package/services/pointer.cjs
CHANGED
|
@@ -1,10 +1,7 @@
|
|
|
1
|
-
var __create = Object.create;
|
|
2
1
|
var __defProp = Object.defineProperty;
|
|
3
2
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
3
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
-
var __getProtoOf = Object.getPrototypeOf;
|
|
6
4
|
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
5
|
var __export = (target, all) => {
|
|
9
6
|
for (var name in all)
|
|
10
7
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
@@ -17,12 +14,7 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
17
14
|
}
|
|
18
15
|
return to;
|
|
19
16
|
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
|
|
21
17
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
22
|
-
var __publicField = (obj, key, value) => {
|
|
23
|
-
__defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
24
|
-
return value;
|
|
25
|
-
};
|
|
26
18
|
|
|
27
19
|
// packages/js-toolkit/services/pointer.js
|
|
28
20
|
var pointer_exports = {};
|
|
@@ -30,14 +22,58 @@ __export(pointer_exports, {
|
|
|
30
22
|
default: () => usePointer
|
|
31
23
|
});
|
|
32
24
|
module.exports = __toCommonJS(pointer_exports);
|
|
33
|
-
var
|
|
25
|
+
var import_service = require("./service.cjs");
|
|
34
26
|
function isTouchEvent(event) {
|
|
35
27
|
return typeof TouchEvent !== "undefined" && event instanceof TouchEvent;
|
|
36
28
|
}
|
|
37
|
-
var
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
29
|
+
var events = ["mousemove", "touchmove", "mousedown", "touchstart", "mouseup", "touchend"];
|
|
30
|
+
function createPointerService() {
|
|
31
|
+
function updateProps(event) {
|
|
32
|
+
var _a, _b;
|
|
33
|
+
props.event = event;
|
|
34
|
+
const yLast = props.y;
|
|
35
|
+
const xLast = props.x;
|
|
36
|
+
const y = isTouchEvent(event) ? (_a = event.touches[0]) == null ? void 0 : _a.clientY : event.clientY;
|
|
37
|
+
if (y !== props.y) {
|
|
38
|
+
props.y = y;
|
|
39
|
+
}
|
|
40
|
+
const x = isTouchEvent(event) ? (_b = event.touches[0]) == null ? void 0 : _b.clientX : event.clientX;
|
|
41
|
+
if (x !== props.x) {
|
|
42
|
+
props.x = x;
|
|
43
|
+
}
|
|
44
|
+
props.changed.x = props.x !== xLast;
|
|
45
|
+
props.changed.y = props.y !== yLast;
|
|
46
|
+
props.last.x = xLast;
|
|
47
|
+
props.last.y = yLast;
|
|
48
|
+
props.delta.x = props.x - xLast;
|
|
49
|
+
props.delta.y = props.y - yLast;
|
|
50
|
+
props.max.x = window.innerWidth;
|
|
51
|
+
props.max.y = window.innerHeight;
|
|
52
|
+
props.progress.x = props.x / props.max.x;
|
|
53
|
+
props.progress.y = props.y / props.max.y;
|
|
54
|
+
return props;
|
|
55
|
+
}
|
|
56
|
+
function handleEvent(event) {
|
|
57
|
+
switch (event.type) {
|
|
58
|
+
case "mouseenter":
|
|
59
|
+
case "mousemove":
|
|
60
|
+
case "touchmove":
|
|
61
|
+
trigger(updateProps(event));
|
|
62
|
+
break;
|
|
63
|
+
case "mousedown":
|
|
64
|
+
case "touchstart":
|
|
65
|
+
props.isDown = true;
|
|
66
|
+
trigger(props);
|
|
67
|
+
break;
|
|
68
|
+
case "mouseup":
|
|
69
|
+
case "touchend":
|
|
70
|
+
props.isDown = false;
|
|
71
|
+
trigger(props);
|
|
72
|
+
break;
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
const { add, remove, has, trigger, props } = (0, import_service.useService)({
|
|
76
|
+
props: {
|
|
41
77
|
event: null,
|
|
42
78
|
isDown: false,
|
|
43
79
|
x: window.innerWidth / 2,
|
|
@@ -62,100 +98,34 @@ var Pointer = class extends import_Service.default {
|
|
|
62
98
|
x: window.innerWidth,
|
|
63
99
|
y: window.innerHeight
|
|
64
100
|
}
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
capture: true
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
return this;
|
|
81
|
-
}
|
|
82
|
-
handleEvent(event) {
|
|
83
|
-
switch (event.type) {
|
|
84
|
-
case "mouseenter":
|
|
85
|
-
case "mousemove":
|
|
86
|
-
case "touchmove":
|
|
87
|
-
this.handler(event);
|
|
88
|
-
break;
|
|
89
|
-
case "mousedown":
|
|
90
|
-
case "touchstart":
|
|
91
|
-
this.downHandler();
|
|
92
|
-
break;
|
|
93
|
-
case "mouseup":
|
|
94
|
-
case "touchend":
|
|
95
|
-
this.upHandler();
|
|
96
|
-
break;
|
|
101
|
+
},
|
|
102
|
+
init() {
|
|
103
|
+
document.documentElement.addEventListener("mouseenter", handleEvent, {
|
|
104
|
+
once: true,
|
|
105
|
+
capture: true
|
|
106
|
+
});
|
|
107
|
+
const options = { passive: true, capture: true };
|
|
108
|
+
events.forEach((event) => {
|
|
109
|
+
document.addEventListener(event, handleEvent, options);
|
|
110
|
+
});
|
|
111
|
+
},
|
|
112
|
+
kill() {
|
|
113
|
+
events.forEach((event) => {
|
|
114
|
+
document.removeEventListener(event, handleEvent);
|
|
115
|
+
});
|
|
97
116
|
}
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
return this;
|
|
107
|
-
}
|
|
108
|
-
handler(event) {
|
|
109
|
-
this.updateProps(event);
|
|
110
|
-
this.trigger(this.props);
|
|
111
|
-
}
|
|
112
|
-
downHandler() {
|
|
113
|
-
this.props.isDown = true;
|
|
114
|
-
this.trigger(this.props);
|
|
115
|
-
}
|
|
116
|
-
upHandler() {
|
|
117
|
-
this.props.isDown = false;
|
|
118
|
-
this.trigger(this.props);
|
|
119
|
-
}
|
|
120
|
-
updateProps(event) {
|
|
121
|
-
var _a, _b;
|
|
122
|
-
this.props.event = event;
|
|
123
|
-
const yLast = this.props.y;
|
|
124
|
-
const xLast = this.props.x;
|
|
125
|
-
const y = isTouchEvent(event) ? (_a = event.touches[0]) == null ? void 0 : _a.clientY : event.clientY;
|
|
126
|
-
if (y !== this.props.y) {
|
|
127
|
-
this.props.y = y;
|
|
128
|
-
}
|
|
129
|
-
const x = isTouchEvent(event) ? (_b = event.touches[0]) == null ? void 0 : _b.clientX : event.clientX;
|
|
130
|
-
if (x !== this.props.x) {
|
|
131
|
-
this.props.x = x;
|
|
132
|
-
}
|
|
133
|
-
this.props.changed.x = this.props.x !== xLast;
|
|
134
|
-
this.props.changed.y = this.props.y !== yLast;
|
|
135
|
-
this.props.last.x = xLast;
|
|
136
|
-
this.props.last.y = yLast;
|
|
137
|
-
this.props.delta.x = this.props.x - xLast;
|
|
138
|
-
this.props.delta.y = this.props.y - yLast;
|
|
139
|
-
this.props.max.x = window.innerWidth;
|
|
140
|
-
this.props.max.y = window.innerHeight;
|
|
141
|
-
this.props.progress.x = this.props.x / this.props.max.x;
|
|
142
|
-
this.props.progress.y = this.props.y / this.props.max.y;
|
|
143
|
-
return this.props;
|
|
144
|
-
}
|
|
145
|
-
};
|
|
146
|
-
var instance;
|
|
117
|
+
});
|
|
118
|
+
return {
|
|
119
|
+
add,
|
|
120
|
+
remove,
|
|
121
|
+
has,
|
|
122
|
+
props: () => props
|
|
123
|
+
};
|
|
124
|
+
}
|
|
147
125
|
var pointer;
|
|
148
126
|
function usePointer() {
|
|
149
127
|
if (!pointer) {
|
|
150
|
-
|
|
151
|
-
instance = new Pointer();
|
|
152
|
-
}
|
|
153
|
-
pointer = {
|
|
154
|
-
add: instance.add.bind(instance),
|
|
155
|
-
remove: instance.remove.bind(instance),
|
|
156
|
-
has: instance.has.bind(instance),
|
|
157
|
-
props: instance.updateProps.bind(instance)
|
|
158
|
-
};
|
|
128
|
+
pointer = createPointerService();
|
|
159
129
|
}
|
|
160
130
|
return pointer;
|
|
161
131
|
}
|
package/services/pointer.d.ts
CHANGED
|
@@ -1,13 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Use the pointer.
|
|
3
|
-
*
|
|
4
|
-
* ```js
|
|
5
|
-
* import usePointer from '@studiometa/js-toolkit/services';
|
|
6
|
-
* const { add, remove, props } = usePointer();
|
|
7
|
-
* add('id', () => {});
|
|
8
|
-
* remove('id');
|
|
9
|
-
* props();
|
|
10
|
-
* ```
|
|
2
|
+
* Use the pointer service.
|
|
11
3
|
*
|
|
12
4
|
* @todo Add element as parameter to get the pointer position relatively from.
|
|
13
5
|
* @returns {PointerService}
|
package/services/pointer.js
CHANGED
|
@@ -1,17 +1,55 @@
|
|
|
1
|
-
|
|
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
|
-
import Service from "./Service.js";
|
|
1
|
+
import { useService } from "./service.js";
|
|
8
2
|
function isTouchEvent(event) {
|
|
9
3
|
return typeof TouchEvent !== "undefined" && event instanceof TouchEvent;
|
|
10
4
|
}
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
5
|
+
const events = ["mousemove", "touchmove", "mousedown", "touchstart", "mouseup", "touchend"];
|
|
6
|
+
function createPointerService() {
|
|
7
|
+
function updateProps(event) {
|
|
8
|
+
var _a, _b;
|
|
9
|
+
props.event = event;
|
|
10
|
+
const yLast = props.y;
|
|
11
|
+
const xLast = props.x;
|
|
12
|
+
const y = isTouchEvent(event) ? (_a = event.touches[0]) == null ? void 0 : _a.clientY : event.clientY;
|
|
13
|
+
if (y !== props.y) {
|
|
14
|
+
props.y = y;
|
|
15
|
+
}
|
|
16
|
+
const x = isTouchEvent(event) ? (_b = event.touches[0]) == null ? void 0 : _b.clientX : event.clientX;
|
|
17
|
+
if (x !== props.x) {
|
|
18
|
+
props.x = x;
|
|
19
|
+
}
|
|
20
|
+
props.changed.x = props.x !== xLast;
|
|
21
|
+
props.changed.y = props.y !== yLast;
|
|
22
|
+
props.last.x = xLast;
|
|
23
|
+
props.last.y = yLast;
|
|
24
|
+
props.delta.x = props.x - xLast;
|
|
25
|
+
props.delta.y = props.y - yLast;
|
|
26
|
+
props.max.x = window.innerWidth;
|
|
27
|
+
props.max.y = window.innerHeight;
|
|
28
|
+
props.progress.x = props.x / props.max.x;
|
|
29
|
+
props.progress.y = props.y / props.max.y;
|
|
30
|
+
return props;
|
|
31
|
+
}
|
|
32
|
+
function handleEvent(event) {
|
|
33
|
+
switch (event.type) {
|
|
34
|
+
case "mouseenter":
|
|
35
|
+
case "mousemove":
|
|
36
|
+
case "touchmove":
|
|
37
|
+
trigger(updateProps(event));
|
|
38
|
+
break;
|
|
39
|
+
case "mousedown":
|
|
40
|
+
case "touchstart":
|
|
41
|
+
props.isDown = true;
|
|
42
|
+
trigger(props);
|
|
43
|
+
break;
|
|
44
|
+
case "mouseup":
|
|
45
|
+
case "touchend":
|
|
46
|
+
props.isDown = false;
|
|
47
|
+
trigger(props);
|
|
48
|
+
break;
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
const { add, remove, has, trigger, props } = useService({
|
|
52
|
+
props: {
|
|
15
53
|
event: null,
|
|
16
54
|
isDown: false,
|
|
17
55
|
x: window.innerWidth / 2,
|
|
@@ -36,100 +74,34 @@ class Pointer extends Service {
|
|
|
36
74
|
x: window.innerWidth,
|
|
37
75
|
y: window.innerHeight
|
|
38
76
|
}
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
capture: true
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
return this;
|
|
55
|
-
}
|
|
56
|
-
handleEvent(event) {
|
|
57
|
-
switch (event.type) {
|
|
58
|
-
case "mouseenter":
|
|
59
|
-
case "mousemove":
|
|
60
|
-
case "touchmove":
|
|
61
|
-
this.handler(event);
|
|
62
|
-
break;
|
|
63
|
-
case "mousedown":
|
|
64
|
-
case "touchstart":
|
|
65
|
-
this.downHandler();
|
|
66
|
-
break;
|
|
67
|
-
case "mouseup":
|
|
68
|
-
case "touchend":
|
|
69
|
-
this.upHandler();
|
|
70
|
-
break;
|
|
71
|
-
}
|
|
72
|
-
}
|
|
73
|
-
kill() {
|
|
74
|
-
document.removeEventListener("mousemove", this);
|
|
75
|
-
document.removeEventListener("touchmove", this);
|
|
76
|
-
document.removeEventListener("mousedown", this);
|
|
77
|
-
document.removeEventListener("touchstart", this);
|
|
78
|
-
document.removeEventListener("mouseup", this);
|
|
79
|
-
document.removeEventListener("touchend", this);
|
|
80
|
-
return this;
|
|
81
|
-
}
|
|
82
|
-
handler(event) {
|
|
83
|
-
this.updateProps(event);
|
|
84
|
-
this.trigger(this.props);
|
|
85
|
-
}
|
|
86
|
-
downHandler() {
|
|
87
|
-
this.props.isDown = true;
|
|
88
|
-
this.trigger(this.props);
|
|
89
|
-
}
|
|
90
|
-
upHandler() {
|
|
91
|
-
this.props.isDown = false;
|
|
92
|
-
this.trigger(this.props);
|
|
93
|
-
}
|
|
94
|
-
updateProps(event) {
|
|
95
|
-
var _a, _b;
|
|
96
|
-
this.props.event = event;
|
|
97
|
-
const yLast = this.props.y;
|
|
98
|
-
const xLast = this.props.x;
|
|
99
|
-
const y = isTouchEvent(event) ? (_a = event.touches[0]) == null ? void 0 : _a.clientY : event.clientY;
|
|
100
|
-
if (y !== this.props.y) {
|
|
101
|
-
this.props.y = y;
|
|
102
|
-
}
|
|
103
|
-
const x = isTouchEvent(event) ? (_b = event.touches[0]) == null ? void 0 : _b.clientX : event.clientX;
|
|
104
|
-
if (x !== this.props.x) {
|
|
105
|
-
this.props.x = x;
|
|
77
|
+
},
|
|
78
|
+
init() {
|
|
79
|
+
document.documentElement.addEventListener("mouseenter", handleEvent, {
|
|
80
|
+
once: true,
|
|
81
|
+
capture: true
|
|
82
|
+
});
|
|
83
|
+
const options = { passive: true, capture: true };
|
|
84
|
+
events.forEach((event) => {
|
|
85
|
+
document.addEventListener(event, handleEvent, options);
|
|
86
|
+
});
|
|
87
|
+
},
|
|
88
|
+
kill() {
|
|
89
|
+
events.forEach((event) => {
|
|
90
|
+
document.removeEventListener(event, handleEvent);
|
|
91
|
+
});
|
|
106
92
|
}
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
this.props.max.y = window.innerHeight;
|
|
115
|
-
this.props.progress.x = this.props.x / this.props.max.x;
|
|
116
|
-
this.props.progress.y = this.props.y / this.props.max.y;
|
|
117
|
-
return this.props;
|
|
118
|
-
}
|
|
93
|
+
});
|
|
94
|
+
return {
|
|
95
|
+
add,
|
|
96
|
+
remove,
|
|
97
|
+
has,
|
|
98
|
+
props: () => props
|
|
99
|
+
};
|
|
119
100
|
}
|
|
120
|
-
let instance;
|
|
121
101
|
let pointer;
|
|
122
102
|
function usePointer() {
|
|
123
103
|
if (!pointer) {
|
|
124
|
-
|
|
125
|
-
instance = new Pointer();
|
|
126
|
-
}
|
|
127
|
-
pointer = {
|
|
128
|
-
add: instance.add.bind(instance),
|
|
129
|
-
remove: instance.remove.bind(instance),
|
|
130
|
-
has: instance.has.bind(instance),
|
|
131
|
-
props: instance.updateProps.bind(instance)
|
|
132
|
-
};
|
|
104
|
+
pointer = createPointerService();
|
|
133
105
|
}
|
|
134
106
|
return pointer;
|
|
135
107
|
}
|