@studiometa/js-toolkit 2.0.0-beta.7 → 2.0.0-rc.1
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 +285 -0
- package/Base/index.d.ts +13 -4
- package/Base/index.js +114 -197
- package/Base/managers/ChildrenManager.cjs +146 -0
- package/Base/managers/ChildrenManager.d.ts +9 -1
- package/Base/managers/ChildrenManager.js +60 -59
- package/Base/managers/EventsManager.cjs +183 -0
- package/Base/managers/EventsManager.js +72 -112
- package/Base/managers/OptionsManager.cjs +174 -0
- package/Base/managers/OptionsManager.d.ts +9 -5
- package/Base/managers/OptionsManager.js +60 -90
- package/Base/managers/RefsManager.cjs +99 -0
- package/Base/managers/RefsManager.js +30 -35
- package/Base/managers/ServicesManager.cjs +131 -0
- package/Base/managers/ServicesManager.js +39 -67
- package/Base/utils.cjs +41 -0
- package/Base/utils.js +12 -11
- package/README.md +13 -70
- package/decorators/index.cjs +45 -0
- package/decorators/index.d.ts +9 -9
- package/decorators/index.js +20 -9
- package/decorators/withBreakpointManager.cjs +85 -0
- package/decorators/withBreakpointManager.js +18 -39
- package/decorators/withBreakpointObserver.cjs +115 -0
- package/decorators/withBreakpointObserver.js +44 -86
- package/decorators/withDrag.cjs +53 -0
- package/decorators/withDrag.js +24 -26
- package/decorators/withExtraConfig.cjs +43 -0
- package/decorators/withExtraConfig.js +17 -12
- package/decorators/withFreezedOptions.cjs +36 -0
- package/decorators/withFreezedOptions.d.ts +14 -0
- package/decorators/withFreezedOptions.js +14 -0
- package/decorators/withIntersectionObserver.cjs +62 -0
- package/decorators/withIntersectionObserver.js +29 -32
- package/decorators/withMountWhenInView.cjs +69 -0
- package/decorators/withMountWhenInView.js +31 -52
- package/decorators/withScrolledInView.cjs +114 -0
- package/decorators/withScrolledInView.d.ts +2 -1
- package/decorators/withScrolledInView.js +35 -39
- package/decorators/withVue2.cjs +60 -0
- package/decorators/withVue2.js +26 -32
- package/helpers/createApp.cjs +52 -0
- package/helpers/createApp.d.ts +2 -2
- package/helpers/createApp.js +12 -12
- package/helpers/importOnInteraction.cjs +52 -0
- package/helpers/importOnInteraction.js +17 -18
- package/helpers/importWhenIdle.cjs +49 -0
- package/helpers/importWhenIdle.js +14 -17
- package/helpers/importWhenVisible.cjs +50 -0
- package/helpers/importWhenVisible.js +16 -18
- package/helpers/index.cjs +35 -0
- package/helpers/index.d.ts +4 -5
- package/helpers/index.js +10 -5
- package/helpers/utils.cjs +35 -0
- package/helpers/utils.js +7 -6
- package/index.cjs +33 -0
- package/index.d.ts +4 -21
- package/index.js +7 -5
- package/package.json +14 -4
- package/services/Service.cjs +76 -0
- package/services/Service.js +19 -32
- package/services/drag.cjs +213 -0
- package/services/drag.d.ts +1 -0
- package/services/drag.js +64 -68
- package/services/index.cjs +41 -0
- package/services/index.d.ts +7 -8
- package/services/index.js +16 -8
- package/services/key.cjs +104 -0
- package/services/key.js +28 -36
- package/services/load.cjs +72 -0
- package/services/load.js +17 -19
- package/services/pointer.cjs +162 -0
- package/services/pointer.js +43 -60
- package/services/raf.cjs +83 -0
- package/services/raf.js +20 -28
- package/services/resize.cjs +108 -0
- package/services/resize.js +33 -42
- package/services/scroll.cjs +131 -0
- package/services/scroll.js +26 -35
- package/utils/collide/boundingRectToCircle.cjs +34 -0
- package/utils/collide/boundingRectToCircle.d.ts +1 -1
- package/utils/collide/boundingRectToCircle.js +7 -10
- package/utils/collide/collideCircleCircle.cjs +34 -0
- package/utils/collide/collideCircleCircle.js +8 -7
- package/utils/collide/collideCircleRect.cjs +46 -0
- package/utils/collide/collideCircleRect.js +10 -12
- package/utils/collide/collidePointCircle.cjs +31 -0
- package/utils/collide/collidePointCircle.js +8 -5
- package/utils/collide/collidePointRect.cjs +28 -0
- package/utils/collide/collidePointRect.js +5 -2
- package/utils/collide/collideRectRect.cjs +28 -0
- package/utils/collide/collideRectRect.js +5 -2
- package/utils/collide/index.cjs +39 -0
- package/utils/collide/index.d.ts +6 -7
- package/utils/collide/index.js +14 -7
- package/utils/css/classes.cjs +47 -0
- package/utils/css/classes.d.ts +10 -9
- package/utils/css/classes.js +18 -14
- package/utils/css/index.cjs +38 -0
- package/utils/css/index.d.ts +4 -5
- package/utils/css/index.js +13 -5
- package/utils/css/matrix.cjs +30 -0
- package/utils/css/matrix.js +7 -5
- package/utils/css/styles.cjs +44 -0
- package/utils/css/styles.d.ts +6 -18
- package/utils/css/styles.js +12 -12
- package/utils/css/transition.cjs +120 -0
- package/utils/css/transition.d.ts +15 -9
- package/utils/css/transition.js +70 -119
- package/utils/debounce.cjs +34 -0
- package/utils/debounce.js +7 -9
- package/utils/focusTrap.cjs +82 -0
- package/utils/focusTrap.js +30 -21
- package/utils/history.cjs +89 -0
- package/utils/history.js +28 -57
- package/utils/index.cjs +54 -0
- package/utils/index.d.ts +14 -35
- package/utils/index.js +32 -17
- package/utils/keyCodes.cjs +35 -0
- package/utils/keyCodes.js +5 -2
- package/utils/math/clamp.cjs +28 -0
- package/utils/math/clamp.js +5 -2
- package/utils/math/clamp01.cjs +32 -0
- package/utils/math/clamp01.js +6 -3
- package/utils/math/damp.cjs +28 -0
- package/utils/math/damp.js +5 -4
- package/utils/math/ease.cjs +88 -0
- package/utils/math/ease.d.ts +78 -0
- package/utils/math/ease.js +66 -0
- package/utils/math/index.cjs +43 -0
- package/utils/math/index.d.ts +8 -8
- package/utils/math/index.js +17 -8
- package/utils/math/inertiaFinalValue.cjs +37 -0
- package/utils/math/inertiaFinalValue.js +8 -10
- package/utils/math/lerp.cjs +28 -0
- package/utils/math/lerp.js +5 -2
- package/utils/math/map.cjs +28 -0
- package/utils/math/map.js +5 -2
- package/utils/math/round.cjs +28 -0
- package/utils/math/round.js +5 -3
- package/utils/memoize.cjs +43 -0
- package/utils/memoize.js +10 -19
- package/utils/nextFrame.cjs +38 -0
- package/utils/nextFrame.d.ts +4 -3
- package/utils/nextFrame.js +13 -10
- package/utils/nextMicrotask.cjs +28 -0
- package/utils/nextMicrotask.d.ts +8 -0
- package/utils/nextMicrotask.js +6 -0
- package/utils/nextTick.cjs +30 -0
- package/utils/nextTick.d.ts +8 -0
- package/utils/nextTick.js +8 -0
- package/utils/object/autoBind.cjs +49 -0
- package/utils/object/autoBind.js +12 -22
- package/utils/object/getAllProperties.cjs +37 -0
- package/utils/object/getAllProperties.js +10 -13
- package/utils/object/index.cjs +33 -0
- package/utils/object/index.d.ts +3 -4
- package/utils/object/index.js +8 -4
- package/utils/object/isObject.cjs +28 -0
- package/utils/object/isObject.js +6 -3
- package/utils/scrollTo.cjs +80 -0
- package/utils/scrollTo.js +20 -40
- package/utils/string/index.cjs +47 -0
- package/utils/string/index.d.ts +10 -11
- package/utils/string/index.js +22 -11
- package/utils/string/withLeadingCharacters.cjs +32 -0
- package/utils/string/withLeadingCharacters.js +7 -4
- package/utils/string/withLeadingSlash.cjs +32 -0
- package/utils/string/withLeadingSlash.js +7 -4
- package/utils/string/withTrailingCharacters.cjs +32 -0
- package/utils/string/withTrailingCharacters.js +7 -4
- package/utils/string/withTrailingSlash.cjs +32 -0
- package/utils/string/withTrailingSlash.js +7 -4
- package/utils/string/withoutLeadingCharacters.cjs +28 -0
- package/utils/string/withoutLeadingCharacters.js +6 -3
- package/utils/string/withoutLeadingCharactersRecursive.cjs +37 -0
- package/utils/string/withoutLeadingCharactersRecursive.js +8 -7
- package/utils/string/withoutLeadingSlash.cjs +32 -0
- package/utils/string/withoutLeadingSlash.js +7 -4
- package/utils/string/withoutTrailingCharacters.cjs +28 -0
- package/utils/string/withoutTrailingCharacters.js +6 -3
- package/utils/string/withoutTrailingCharactersRecursive.cjs +37 -0
- package/utils/string/withoutTrailingCharactersRecursive.js +8 -7
- package/utils/string/withoutTrailingSlash.cjs +32 -0
- package/utils/string/withoutTrailingSlash.js +7 -4
- package/utils/throttle.cjs +36 -0
- package/utils/throttle.js +9 -9
- package/index.modern.js +0 -1
- package/index.umd.js +0 -1
package/services/resize.js
CHANGED
|
@@ -1,86 +1,75 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
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
|
+
import Service from "./Service.js";
|
|
8
|
+
import debounce from "../utils/debounce.js";
|
|
5
9
|
class Resize extends Service {
|
|
6
10
|
constructor() {
|
|
7
11
|
super(...arguments);
|
|
8
|
-
|
|
9
|
-
_defineProperty(this, "props", {
|
|
12
|
+
__publicField(this, "props", {
|
|
10
13
|
width: window.innerWidth,
|
|
11
14
|
height: window.innerHeight,
|
|
12
15
|
ratio: window.innerWidth / window.innerHeight,
|
|
13
|
-
orientation:
|
|
16
|
+
orientation: "square"
|
|
14
17
|
});
|
|
15
|
-
|
|
16
|
-
_defineProperty(this, "handler", void 0);
|
|
18
|
+
__publicField(this, "handler");
|
|
17
19
|
}
|
|
18
|
-
|
|
19
20
|
init() {
|
|
20
21
|
this.handler = debounce(() => {
|
|
21
22
|
this.updateProps();
|
|
22
23
|
this.trigger(this.props);
|
|
23
24
|
}).bind(this);
|
|
24
|
-
window.addEventListener(
|
|
25
|
+
window.addEventListener("resize", this.handler);
|
|
25
26
|
return this;
|
|
26
27
|
}
|
|
27
|
-
|
|
28
28
|
kill() {
|
|
29
|
-
window.removeEventListener(
|
|
29
|
+
window.removeEventListener("resize", this.handler);
|
|
30
30
|
}
|
|
31
|
-
|
|
32
31
|
updateProps() {
|
|
33
32
|
this.props.width = window.innerWidth;
|
|
34
33
|
this.props.height = window.innerHeight;
|
|
35
34
|
this.props.ratio = window.innerWidth / window.innerHeight;
|
|
36
|
-
this.props.orientation =
|
|
37
|
-
|
|
35
|
+
this.props.orientation = "square";
|
|
38
36
|
if (this.props.ratio > 1) {
|
|
39
|
-
this.props.orientation =
|
|
37
|
+
this.props.orientation = "landscape";
|
|
40
38
|
}
|
|
41
|
-
|
|
42
39
|
if (this.props.ratio < 1) {
|
|
43
|
-
this.props.orientation =
|
|
40
|
+
this.props.orientation = "portrait";
|
|
44
41
|
}
|
|
45
|
-
|
|
46
42
|
if (this.breakpointElement) {
|
|
47
43
|
this.props.breakpoint = this.breakpoint;
|
|
48
44
|
this.props.breakpoints = this.breakpoints;
|
|
49
45
|
} else {
|
|
50
|
-
this.props.breakpoint =
|
|
51
|
-
this.props.breakpoints =
|
|
46
|
+
this.props.breakpoint = void 0;
|
|
47
|
+
this.props.breakpoints = void 0;
|
|
52
48
|
}
|
|
53
|
-
|
|
54
49
|
return this.props;
|
|
55
50
|
}
|
|
56
|
-
|
|
57
51
|
get breakpointElement() {
|
|
58
|
-
return document.querySelector(
|
|
52
|
+
return document.querySelector("[data-breakpoint]");
|
|
59
53
|
}
|
|
60
|
-
|
|
61
54
|
get breakpoint() {
|
|
62
|
-
return window.getComputedStyle(this.breakpointElement,
|
|
55
|
+
return window.getComputedStyle(this.breakpointElement, "::before").getPropertyValue("content").replace(/"/g, "");
|
|
63
56
|
}
|
|
64
|
-
|
|
65
57
|
get breakpoints() {
|
|
66
|
-
|
|
67
|
-
return breakpoints.split(
|
|
58
|
+
const breakpoints = window.getComputedStyle(this.breakpointElement, "::after").getPropertyValue("content").replace(/"/g, "");
|
|
59
|
+
return breakpoints.split(",");
|
|
68
60
|
}
|
|
69
|
-
|
|
70
61
|
}
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
export default function useResize() {
|
|
62
|
+
let instance;
|
|
63
|
+
let resize;
|
|
64
|
+
function useResize() {
|
|
75
65
|
if (!resize) {
|
|
76
66
|
if (!instance) {
|
|
77
67
|
instance = new Resize();
|
|
78
68
|
}
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
var props = instance.updateProps.bind(instance);
|
|
69
|
+
const add = instance.add.bind(instance);
|
|
70
|
+
const remove = instance.remove.bind(instance);
|
|
71
|
+
const has = instance.has.bind(instance);
|
|
72
|
+
const props = instance.updateProps.bind(instance);
|
|
84
73
|
resize = {
|
|
85
74
|
add,
|
|
86
75
|
remove,
|
|
@@ -88,6 +77,8 @@ export default function useResize() {
|
|
|
88
77
|
props
|
|
89
78
|
};
|
|
90
79
|
}
|
|
91
|
-
|
|
92
80
|
return resize;
|
|
93
|
-
}
|
|
81
|
+
}
|
|
82
|
+
export {
|
|
83
|
+
useResize as default
|
|
84
|
+
};
|
|
@@ -0,0 +1,131 @@
|
|
|
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 __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
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
|
+
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
|
+
|
|
27
|
+
// packages/js-toolkit/services/scroll.js
|
|
28
|
+
var scroll_exports = {};
|
|
29
|
+
__export(scroll_exports, {
|
|
30
|
+
default: () => useScroll
|
|
31
|
+
});
|
|
32
|
+
module.exports = __toCommonJS(scroll_exports);
|
|
33
|
+
var import_Service = __toESM(require("./Service.cjs"), 1);
|
|
34
|
+
var import_debounce = __toESM(require("../utils/debounce.cjs"), 1);
|
|
35
|
+
var Scroll = class extends import_Service.default {
|
|
36
|
+
constructor() {
|
|
37
|
+
super(...arguments);
|
|
38
|
+
__publicField(this, "props", {
|
|
39
|
+
x: window.pageXOffset,
|
|
40
|
+
y: window.pageYOffset,
|
|
41
|
+
changed: {
|
|
42
|
+
x: false,
|
|
43
|
+
y: false
|
|
44
|
+
},
|
|
45
|
+
last: {
|
|
46
|
+
x: window.pageXOffset,
|
|
47
|
+
y: window.pageYOffset
|
|
48
|
+
},
|
|
49
|
+
delta: {
|
|
50
|
+
x: 0,
|
|
51
|
+
y: 0
|
|
52
|
+
},
|
|
53
|
+
max: {
|
|
54
|
+
x: (document.scrollingElement || document.body).scrollWidth - window.innerWidth,
|
|
55
|
+
y: (document.scrollingElement || document.body).scrollHeight - window.innerHeight
|
|
56
|
+
},
|
|
57
|
+
progress: {
|
|
58
|
+
x: 0,
|
|
59
|
+
y: 0
|
|
60
|
+
},
|
|
61
|
+
direction: {
|
|
62
|
+
x: "NONE",
|
|
63
|
+
y: "NONE"
|
|
64
|
+
}
|
|
65
|
+
});
|
|
66
|
+
}
|
|
67
|
+
init() {
|
|
68
|
+
this.updateProps();
|
|
69
|
+
document.addEventListener("scroll", this, { passive: true, capture: true });
|
|
70
|
+
return this;
|
|
71
|
+
}
|
|
72
|
+
get debouncedHandler() {
|
|
73
|
+
const debounced = (0, import_debounce.default)(() => {
|
|
74
|
+
this.updateProps();
|
|
75
|
+
this.trigger(this.props);
|
|
76
|
+
}, 100);
|
|
77
|
+
Object.defineProperty(this, "debouncedHandler", {
|
|
78
|
+
value: debounced
|
|
79
|
+
});
|
|
80
|
+
return debounced;
|
|
81
|
+
}
|
|
82
|
+
handleEvent() {
|
|
83
|
+
this.updateProps();
|
|
84
|
+
this.trigger(this.props);
|
|
85
|
+
this.debouncedHandler();
|
|
86
|
+
}
|
|
87
|
+
kill() {
|
|
88
|
+
document.removeEventListener("scroll", this);
|
|
89
|
+
return this;
|
|
90
|
+
}
|
|
91
|
+
updateProps() {
|
|
92
|
+
const yLast = this.props.y;
|
|
93
|
+
const xLast = this.props.x;
|
|
94
|
+
if (window.pageYOffset !== this.props.y) {
|
|
95
|
+
this.props.y = window.pageYOffset;
|
|
96
|
+
}
|
|
97
|
+
if (window.pageXOffset !== this.props.x) {
|
|
98
|
+
this.props.x = window.pageXOffset;
|
|
99
|
+
}
|
|
100
|
+
this.props.changed.x = this.props.x !== xLast;
|
|
101
|
+
this.props.changed.y = this.props.y !== yLast;
|
|
102
|
+
this.props.last.x = xLast;
|
|
103
|
+
this.props.last.y = yLast;
|
|
104
|
+
this.props.delta.x = this.props.x - xLast;
|
|
105
|
+
this.props.delta.y = this.props.y - yLast;
|
|
106
|
+
this.props.max.x = (document.scrollingElement || document.body).scrollWidth - window.innerWidth;
|
|
107
|
+
this.props.max.y = (document.scrollingElement || document.body).scrollHeight - window.innerHeight;
|
|
108
|
+
this.props.progress.x = this.props.max.x === 0 ? 1 : this.props.x / this.props.max.x;
|
|
109
|
+
this.props.progress.y = this.props.max.y === 0 ? 1 : this.props.y / this.props.max.y;
|
|
110
|
+
this.props.direction.x = this.props.x > xLast ? "RIGHT" : this.props.x < xLast ? "LEFT" : "NONE";
|
|
111
|
+
this.props.direction.y = this.props.y > yLast ? "DOWN" : this.props.y < yLast ? "UP" : "NONE";
|
|
112
|
+
return this.props;
|
|
113
|
+
}
|
|
114
|
+
};
|
|
115
|
+
var instance;
|
|
116
|
+
var scroll;
|
|
117
|
+
function useScroll() {
|
|
118
|
+
if (!scroll) {
|
|
119
|
+
if (!instance) {
|
|
120
|
+
instance = new Scroll();
|
|
121
|
+
}
|
|
122
|
+
scroll = {
|
|
123
|
+
add: instance.add.bind(instance),
|
|
124
|
+
remove: instance.remove.bind(instance),
|
|
125
|
+
has: instance.has.bind(instance),
|
|
126
|
+
props: instance.updateProps.bind(instance)
|
|
127
|
+
};
|
|
128
|
+
}
|
|
129
|
+
return scroll;
|
|
130
|
+
}
|
|
131
|
+
if (module.exports.default) module.exports = module.exports.default;
|
package/services/scroll.js
CHANGED
|
@@ -1,12 +1,15 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
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
|
+
import Service from "./Service.js";
|
|
8
|
+
import debounce from "../utils/debounce.js";
|
|
5
9
|
class Scroll extends Service {
|
|
6
10
|
constructor() {
|
|
7
11
|
super(...arguments);
|
|
8
|
-
|
|
9
|
-
_defineProperty(this, "props", {
|
|
12
|
+
__publicField(this, "props", {
|
|
10
13
|
x: window.pageXOffset,
|
|
11
14
|
y: window.pageYOffset,
|
|
12
15
|
changed: {
|
|
@@ -30,55 +33,44 @@ class Scroll extends Service {
|
|
|
30
33
|
y: 0
|
|
31
34
|
},
|
|
32
35
|
direction: {
|
|
33
|
-
x:
|
|
34
|
-
y:
|
|
36
|
+
x: "NONE",
|
|
37
|
+
y: "NONE"
|
|
35
38
|
}
|
|
36
39
|
});
|
|
37
40
|
}
|
|
38
|
-
|
|
39
41
|
init() {
|
|
40
42
|
this.updateProps();
|
|
41
|
-
document.addEventListener(
|
|
42
|
-
passive: true,
|
|
43
|
-
capture: true
|
|
44
|
-
});
|
|
43
|
+
document.addEventListener("scroll", this, { passive: true, capture: true });
|
|
45
44
|
return this;
|
|
46
45
|
}
|
|
47
|
-
|
|
48
46
|
get debouncedHandler() {
|
|
49
|
-
|
|
47
|
+
const debounced = debounce(() => {
|
|
50
48
|
this.updateProps();
|
|
51
49
|
this.trigger(this.props);
|
|
52
50
|
}, 100);
|
|
53
|
-
Object.defineProperty(this,
|
|
51
|
+
Object.defineProperty(this, "debouncedHandler", {
|
|
54
52
|
value: debounced
|
|
55
53
|
});
|
|
56
54
|
return debounced;
|
|
57
55
|
}
|
|
58
|
-
|
|
59
56
|
handleEvent() {
|
|
60
57
|
this.updateProps();
|
|
61
58
|
this.trigger(this.props);
|
|
62
59
|
this.debouncedHandler();
|
|
63
60
|
}
|
|
64
|
-
|
|
65
61
|
kill() {
|
|
66
|
-
document.removeEventListener(
|
|
62
|
+
document.removeEventListener("scroll", this);
|
|
67
63
|
return this;
|
|
68
64
|
}
|
|
69
|
-
|
|
70
65
|
updateProps() {
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
66
|
+
const yLast = this.props.y;
|
|
67
|
+
const xLast = this.props.x;
|
|
74
68
|
if (window.pageYOffset !== this.props.y) {
|
|
75
69
|
this.props.y = window.pageYOffset;
|
|
76
70
|
}
|
|
77
|
-
|
|
78
71
|
if (window.pageXOffset !== this.props.x) {
|
|
79
72
|
this.props.x = window.pageXOffset;
|
|
80
73
|
}
|
|
81
|
-
|
|
82
74
|
this.props.changed.x = this.props.x !== xLast;
|
|
83
75
|
this.props.changed.y = this.props.y !== yLast;
|
|
84
76
|
this.props.last.x = xLast;
|
|
@@ -89,21 +81,18 @@ class Scroll extends Service {
|
|
|
89
81
|
this.props.max.y = (document.scrollingElement || document.body).scrollHeight - window.innerHeight;
|
|
90
82
|
this.props.progress.x = this.props.max.x === 0 ? 1 : this.props.x / this.props.max.x;
|
|
91
83
|
this.props.progress.y = this.props.max.y === 0 ? 1 : this.props.y / this.props.max.y;
|
|
92
|
-
this.props.direction.x = this.props.x > xLast ?
|
|
93
|
-
this.props.direction.y = this.props.y > yLast ?
|
|
84
|
+
this.props.direction.x = this.props.x > xLast ? "RIGHT" : this.props.x < xLast ? "LEFT" : "NONE";
|
|
85
|
+
this.props.direction.y = this.props.y > yLast ? "DOWN" : this.props.y < yLast ? "UP" : "NONE";
|
|
94
86
|
return this.props;
|
|
95
87
|
}
|
|
96
|
-
|
|
97
88
|
}
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
export default function useScroll() {
|
|
89
|
+
let instance;
|
|
90
|
+
let scroll;
|
|
91
|
+
function useScroll() {
|
|
102
92
|
if (!scroll) {
|
|
103
93
|
if (!instance) {
|
|
104
94
|
instance = new Scroll();
|
|
105
95
|
}
|
|
106
|
-
|
|
107
96
|
scroll = {
|
|
108
97
|
add: instance.add.bind(instance),
|
|
109
98
|
remove: instance.remove.bind(instance),
|
|
@@ -111,6 +100,8 @@ export default function useScroll() {
|
|
|
111
100
|
props: instance.updateProps.bind(instance)
|
|
112
101
|
};
|
|
113
102
|
}
|
|
114
|
-
|
|
115
103
|
return scroll;
|
|
116
|
-
}
|
|
104
|
+
}
|
|
105
|
+
export {
|
|
106
|
+
useScroll as default
|
|
107
|
+
};
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
+
var __export = (target, all) => {
|
|
6
|
+
for (var name in all)
|
|
7
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
8
|
+
};
|
|
9
|
+
var __copyProps = (to, from, except, desc) => {
|
|
10
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
11
|
+
for (let key of __getOwnPropNames(from))
|
|
12
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
13
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
14
|
+
}
|
|
15
|
+
return to;
|
|
16
|
+
};
|
|
17
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
18
|
+
|
|
19
|
+
// packages/js-toolkit/utils/collide/boundingRectToCircle.js
|
|
20
|
+
var boundingRectToCircle_exports = {};
|
|
21
|
+
__export(boundingRectToCircle_exports, {
|
|
22
|
+
default: () => boundingRectToCircle
|
|
23
|
+
});
|
|
24
|
+
module.exports = __toCommonJS(boundingRectToCircle_exports);
|
|
25
|
+
function boundingRectToCircle({ x, y, width, height }, force = false) {
|
|
26
|
+
if (width !== height && !force)
|
|
27
|
+
throw new Error("Initial DOMElement is not a square. Please use the force mode.");
|
|
28
|
+
return {
|
|
29
|
+
x: x + width / 2,
|
|
30
|
+
y: y + height / 2,
|
|
31
|
+
radius: (width + height) / 4
|
|
32
|
+
};
|
|
33
|
+
}
|
|
34
|
+
if (module.exports.default) module.exports = module.exports.default;
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
* @param {Boolean} force Force usage of non-square DOMElements
|
|
12
12
|
* @return {Circle} Circle object that can be used in collides functions
|
|
13
13
|
*/
|
|
14
|
-
export default function
|
|
14
|
+
export default function boundingRectToCircle({ x, y, width, height }: Partial<DOMRect>, force?: boolean): Circle;
|
|
15
15
|
export type Circle = {
|
|
16
16
|
/**
|
|
17
17
|
* Circle's x position
|
|
@@ -1,15 +1,12 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
y,
|
|
5
|
-
width,
|
|
6
|
-
height
|
|
7
|
-
} = _ref;
|
|
8
|
-
var force = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
|
9
|
-
if (width !== height && !force) throw new Error('Initial DOMElement is not a square. Please use the force mode.');
|
|
1
|
+
function boundingRectToCircle({ x, y, width, height }, force = false) {
|
|
2
|
+
if (width !== height && !force)
|
|
3
|
+
throw new Error("Initial DOMElement is not a square. Please use the force mode.");
|
|
10
4
|
return {
|
|
11
5
|
x: x + width / 2,
|
|
12
6
|
y: y + height / 2,
|
|
13
7
|
radius: (width + height) / 4
|
|
14
8
|
};
|
|
15
|
-
}
|
|
9
|
+
}
|
|
10
|
+
export {
|
|
11
|
+
boundingRectToCircle as default
|
|
12
|
+
};
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
+
var __export = (target, all) => {
|
|
6
|
+
for (var name in all)
|
|
7
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
8
|
+
};
|
|
9
|
+
var __copyProps = (to, from, except, desc) => {
|
|
10
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
11
|
+
for (let key of __getOwnPropNames(from))
|
|
12
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
13
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
14
|
+
}
|
|
15
|
+
return to;
|
|
16
|
+
};
|
|
17
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
18
|
+
|
|
19
|
+
// packages/js-toolkit/utils/collide/collideCircleCircle.js
|
|
20
|
+
var collideCircleCircle_exports = {};
|
|
21
|
+
__export(collideCircleCircle_exports, {
|
|
22
|
+
default: () => collideCircleCircle
|
|
23
|
+
});
|
|
24
|
+
module.exports = __toCommonJS(collideCircleCircle_exports);
|
|
25
|
+
function collideCircleCircle(circle1, circle2) {
|
|
26
|
+
const distX = circle1.x - circle2.x;
|
|
27
|
+
const distY = circle1.y - circle2.y;
|
|
28
|
+
const distance = Math.sqrt(distX * distX + distY * distY);
|
|
29
|
+
if (distance <= circle1.radius + circle2.radius) {
|
|
30
|
+
return true;
|
|
31
|
+
}
|
|
32
|
+
return false;
|
|
33
|
+
}
|
|
34
|
+
if (module.exports.default) module.exports = module.exports.default;
|
|
@@ -1,11 +1,12 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
function collideCircleCircle(circle1, circle2) {
|
|
2
|
+
const distX = circle1.x - circle2.x;
|
|
3
|
+
const distY = circle1.y - circle2.y;
|
|
4
|
+
const distance = Math.sqrt(distX * distX + distY * distY);
|
|
6
5
|
if (distance <= circle1.radius + circle2.radius) {
|
|
7
6
|
return true;
|
|
8
7
|
}
|
|
9
|
-
|
|
10
8
|
return false;
|
|
11
|
-
}
|
|
9
|
+
}
|
|
10
|
+
export {
|
|
11
|
+
collideCircleCircle as default
|
|
12
|
+
};
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
+
var __export = (target, all) => {
|
|
6
|
+
for (var name in all)
|
|
7
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
8
|
+
};
|
|
9
|
+
var __copyProps = (to, from, except, desc) => {
|
|
10
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
11
|
+
for (let key of __getOwnPropNames(from))
|
|
12
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
13
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
14
|
+
}
|
|
15
|
+
return to;
|
|
16
|
+
};
|
|
17
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
18
|
+
|
|
19
|
+
// packages/js-toolkit/utils/collide/collideCircleRect.js
|
|
20
|
+
var collideCircleRect_exports = {};
|
|
21
|
+
__export(collideCircleRect_exports, {
|
|
22
|
+
default: () => collideCircleRect
|
|
23
|
+
});
|
|
24
|
+
module.exports = __toCommonJS(collideCircleRect_exports);
|
|
25
|
+
function collideCircleRect(circle, rect) {
|
|
26
|
+
let testX = circle.x;
|
|
27
|
+
let testY = circle.y;
|
|
28
|
+
if (circle.x < rect.x) {
|
|
29
|
+
testX = rect.x;
|
|
30
|
+
} else if (circle.x > rect.x + rect.width) {
|
|
31
|
+
testX = rect.x + rect.width;
|
|
32
|
+
}
|
|
33
|
+
if (circle.y < rect.y) {
|
|
34
|
+
testY = rect.y;
|
|
35
|
+
} else if (circle.y > rect.y + rect.height) {
|
|
36
|
+
testY = rect.y + rect.height;
|
|
37
|
+
}
|
|
38
|
+
const distX = circle.x - testX;
|
|
39
|
+
const distY = circle.y - testY;
|
|
40
|
+
const distance = Math.sqrt(distX * distX + distY * distY);
|
|
41
|
+
if (distance <= circle.radius) {
|
|
42
|
+
return true;
|
|
43
|
+
}
|
|
44
|
+
return false;
|
|
45
|
+
}
|
|
46
|
+
if (module.exports.default) module.exports = module.exports.default;
|
|
@@ -1,26 +1,24 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
function collideCircleRect(circle, rect) {
|
|
2
|
+
let testX = circle.x;
|
|
3
|
+
let testY = circle.y;
|
|
5
4
|
if (circle.x < rect.x) {
|
|
6
5
|
testX = rect.x;
|
|
7
6
|
} else if (circle.x > rect.x + rect.width) {
|
|
8
7
|
testX = rect.x + rect.width;
|
|
9
8
|
}
|
|
10
|
-
|
|
11
9
|
if (circle.y < rect.y) {
|
|
12
10
|
testY = rect.y;
|
|
13
11
|
} else if (circle.y > rect.y + rect.height) {
|
|
14
12
|
testY = rect.y + rect.height;
|
|
15
13
|
}
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
var distance = Math.sqrt(distX * distX + distY * distY);
|
|
20
|
-
|
|
14
|
+
const distX = circle.x - testX;
|
|
15
|
+
const distY = circle.y - testY;
|
|
16
|
+
const distance = Math.sqrt(distX * distX + distY * distY);
|
|
21
17
|
if (distance <= circle.radius) {
|
|
22
18
|
return true;
|
|
23
19
|
}
|
|
24
|
-
|
|
25
20
|
return false;
|
|
26
|
-
}
|
|
21
|
+
}
|
|
22
|
+
export {
|
|
23
|
+
collideCircleRect as default
|
|
24
|
+
};
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
+
var __export = (target, all) => {
|
|
6
|
+
for (var name in all)
|
|
7
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
8
|
+
};
|
|
9
|
+
var __copyProps = (to, from, except, desc) => {
|
|
10
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
11
|
+
for (let key of __getOwnPropNames(from))
|
|
12
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
13
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
14
|
+
}
|
|
15
|
+
return to;
|
|
16
|
+
};
|
|
17
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
18
|
+
|
|
19
|
+
// packages/js-toolkit/utils/collide/collidePointCircle.js
|
|
20
|
+
var collidePointCircle_exports = {};
|
|
21
|
+
__export(collidePointCircle_exports, {
|
|
22
|
+
default: () => collidePointCircle
|
|
23
|
+
});
|
|
24
|
+
module.exports = __toCommonJS(collidePointCircle_exports);
|
|
25
|
+
function collidePointCircle(point, circle) {
|
|
26
|
+
const distX = point.x - circle.x;
|
|
27
|
+
const distY = point.y - circle.y;
|
|
28
|
+
const distance = Math.sqrt(distX * distX + distY * distY);
|
|
29
|
+
return distance <= circle.radius;
|
|
30
|
+
}
|
|
31
|
+
if (module.exports.default) module.exports = module.exports.default;
|
|
@@ -1,6 +1,9 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
function collidePointCircle(point, circle) {
|
|
2
|
+
const distX = point.x - circle.x;
|
|
3
|
+
const distY = point.y - circle.y;
|
|
4
|
+
const distance = Math.sqrt(distX * distX + distY * distY);
|
|
5
5
|
return distance <= circle.radius;
|
|
6
|
-
}
|
|
6
|
+
}
|
|
7
|
+
export {
|
|
8
|
+
collidePointCircle as default
|
|
9
|
+
};
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
+
var __export = (target, all) => {
|
|
6
|
+
for (var name in all)
|
|
7
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
8
|
+
};
|
|
9
|
+
var __copyProps = (to, from, except, desc) => {
|
|
10
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
11
|
+
for (let key of __getOwnPropNames(from))
|
|
12
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
13
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
14
|
+
}
|
|
15
|
+
return to;
|
|
16
|
+
};
|
|
17
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
18
|
+
|
|
19
|
+
// packages/js-toolkit/utils/collide/collidePointRect.js
|
|
20
|
+
var collidePointRect_exports = {};
|
|
21
|
+
__export(collidePointRect_exports, {
|
|
22
|
+
default: () => collidePointRect
|
|
23
|
+
});
|
|
24
|
+
module.exports = __toCommonJS(collidePointRect_exports);
|
|
25
|
+
function collidePointRect(point, rect) {
|
|
26
|
+
return point.x >= rect.x && point.x <= rect.x + rect.width && point.y >= rect.y && point.y <= rect.y + rect.height;
|
|
27
|
+
}
|
|
28
|
+
if (module.exports.default) module.exports = module.exports.default;
|
|
@@ -1,3 +1,6 @@
|
|
|
1
|
-
|
|
1
|
+
function collidePointRect(point, rect) {
|
|
2
2
|
return point.x >= rect.x && point.x <= rect.x + rect.width && point.y >= rect.y && point.y <= rect.y + rect.height;
|
|
3
|
-
}
|
|
3
|
+
}
|
|
4
|
+
export {
|
|
5
|
+
collidePointRect as default
|
|
6
|
+
};
|