@tsparticles/fireworks 4.0.5 → 4.1.0
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/browser/FireworksInstance.js +5 -5
- package/browser/fireworks.js +2 -2
- package/browser/fireworks.lazy.js +2 -2
- package/cjs/FireworksInstance.js +5 -5
- package/cjs/fireworks.js +2 -2
- package/cjs/fireworks.lazy.js +2 -2
- package/esm/FireworksInstance.js +5 -5
- package/esm/fireworks.js +2 -2
- package/esm/fireworks.lazy.js +2 -2
- package/package.json +12 -12
- package/report.html +1 -1
- package/tsparticles.fireworks.bundle.js +1196 -1104
- package/tsparticles.fireworks.bundle.min.js +1 -1
- package/tsparticles.fireworks.js +8 -8
- package/tsparticles.fireworks.min.js +1 -1
- package/types/FireworksInstance.d.ts +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
(function(g){g.__tsParticlesInternals=g.__tsParticlesInternals||{};g.__tsParticlesInternals.bundles=g.__tsParticlesInternals.bundles||{};g.__tsParticlesInternals.effects=g.__tsParticlesInternals.effects||{};g.__tsParticlesInternals.engine=g.__tsParticlesInternals.engine||{};g.__tsParticlesInternals.interactions=g.__tsParticlesInternals.interactions||{};g.__tsParticlesInternals.palettes=g.__tsParticlesInternals.palettes||{};g.__tsParticlesInternals.paths=g.__tsParticlesInternals.paths||{};g.__tsParticlesInternals.plugins=g.__tsParticlesInternals.plugins||{};g.__tsParticlesInternals.plugins=g.__tsParticlesInternals.plugins||{};g.__tsParticlesInternals.plugins.emittersShapes=g.__tsParticlesInternals.plugins.emittersShapes||{};g.__tsParticlesInternals.presets=g.__tsParticlesInternals.presets||{};g.__tsParticlesInternals.shapes=g.__tsParticlesInternals.shapes||{};g.__tsParticlesInternals.updaters=g.__tsParticlesInternals.updaters||{};g.__tsParticlesInternals.utils=g.__tsParticlesInternals.utils||{};g.__tsParticlesInternals.canvas=g.__tsParticlesInternals.canvas||{};g.__tsParticlesInternals.canvas=g.__tsParticlesInternals.canvas||{};g.__tsParticlesInternals.canvas.utils=g.__tsParticlesInternals.canvas.utils||{};g.__tsParticlesInternals.path=g.__tsParticlesInternals.path||{};g.__tsParticlesInternals.path=g.__tsParticlesInternals.path||{};g.__tsParticlesInternals.path.utils=g.__tsParticlesInternals.path.utils||{};var __tsProxyFactory=typeof Proxy!=="undefined"?function(obj){return new Proxy(obj,{get:function(target,key){if(!(key in target)){target[key]={};}return target[key];}});}:function(obj){return obj;};g.__tsParticlesInternals.bundles=__tsProxyFactory(g.__tsParticlesInternals.bundles);g.__tsParticlesInternals.effects=__tsProxyFactory(g.__tsParticlesInternals.effects);g.__tsParticlesInternals.interactions=__tsProxyFactory(g.__tsParticlesInternals.interactions);g.__tsParticlesInternals.palettes=__tsProxyFactory(g.__tsParticlesInternals.palettes);g.__tsParticlesInternals.paths=__tsProxyFactory(g.__tsParticlesInternals.paths);g.__tsParticlesInternals.plugins=__tsProxyFactory(g.__tsParticlesInternals.plugins);g.__tsParticlesInternals.plugins.emittersShapes=__tsProxyFactory(g.__tsParticlesInternals.plugins.emittersShapes);g.__tsParticlesInternals.presets=__tsProxyFactory(g.__tsParticlesInternals.presets);g.__tsParticlesInternals.shapes=__tsProxyFactory(g.__tsParticlesInternals.shapes);g.__tsParticlesInternals.updaters=__tsProxyFactory(g.__tsParticlesInternals.updaters);g.__tsParticlesInternals.utils=__tsProxyFactory(g.__tsParticlesInternals.utils);g.__tsParticlesInternals.canvas=__tsProxyFactory(g.__tsParticlesInternals.canvas);g.__tsParticlesInternals.path=__tsProxyFactory(g.__tsParticlesInternals.path);g.tsparticlesInternalExports=g.tsparticlesInternalExports||{};})(typeof globalThis!=="undefined"?globalThis:typeof window!=="undefined"?window:this);
|
|
2
|
-
/* tsParticles v4.0
|
|
2
|
+
/* tsParticles v4.1.0 */
|
|
3
3
|
(function (global, factory) {
|
|
4
4
|
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
|
|
5
5
|
typeof define === 'function' && define.amd ? define(['exports'], factory) :
|
|
@@ -51,13 +51,13 @@
|
|
|
51
51
|
return Math.atan2(this.y, this.x);
|
|
52
52
|
}
|
|
53
53
|
set angle(angle) {
|
|
54
|
-
this
|
|
54
|
+
this.#updateFromAngle(angle, this.length);
|
|
55
55
|
}
|
|
56
56
|
get length() {
|
|
57
57
|
return Math.sqrt(this.getLengthSq());
|
|
58
58
|
}
|
|
59
59
|
set length(length) {
|
|
60
|
-
this
|
|
60
|
+
this.#updateFromAngle(this.angle, length);
|
|
61
61
|
}
|
|
62
62
|
static clone(source) {
|
|
63
63
|
return Vector3d.create(source.x, source.y, getZ(source));
|
|
@@ -120,7 +120,7 @@
|
|
|
120
120
|
this.y -= v.y;
|
|
121
121
|
this.z -= getZ(v);
|
|
122
122
|
}
|
|
123
|
-
|
|
123
|
+
#updateFromAngle(angle, length) {
|
|
124
124
|
this.x = Math.cos(angle) * length;
|
|
125
125
|
this.y = Math.sin(angle) * length;
|
|
126
126
|
}
|
|
@@ -804,38 +804,38 @@
|
|
|
804
804
|
}
|
|
805
805
|
|
|
806
806
|
class EventDispatcher {
|
|
807
|
-
|
|
807
|
+
#listeners;
|
|
808
808
|
constructor() {
|
|
809
|
-
this
|
|
809
|
+
this.#listeners = new Map();
|
|
810
810
|
}
|
|
811
811
|
addEventListener(type, listener) {
|
|
812
812
|
this.removeEventListener(type, listener);
|
|
813
|
-
let arr = this.
|
|
813
|
+
let arr = this.#listeners.get(type);
|
|
814
814
|
if (!arr) {
|
|
815
815
|
arr = [];
|
|
816
|
-
this.
|
|
816
|
+
this.#listeners.set(type, arr);
|
|
817
817
|
}
|
|
818
818
|
arr.push(listener);
|
|
819
819
|
}
|
|
820
820
|
dispatchEvent(type, args) {
|
|
821
|
-
const listeners = this.
|
|
821
|
+
const listeners = this.#listeners.get(type);
|
|
822
822
|
listeners?.forEach(handler => {
|
|
823
823
|
handler(args);
|
|
824
824
|
});
|
|
825
825
|
}
|
|
826
826
|
hasEventListener(type) {
|
|
827
|
-
return !!this.
|
|
827
|
+
return !!this.#listeners.get(type);
|
|
828
828
|
}
|
|
829
829
|
removeAllEventListeners(type) {
|
|
830
830
|
if (!type) {
|
|
831
|
-
this
|
|
831
|
+
this.#listeners = new Map();
|
|
832
832
|
}
|
|
833
833
|
else {
|
|
834
|
-
this.
|
|
834
|
+
this.#listeners.delete(type);
|
|
835
835
|
}
|
|
836
836
|
}
|
|
837
837
|
removeEventListener(type, listener) {
|
|
838
|
-
const arr = this.
|
|
838
|
+
const arr = this.#listeners.get(type);
|
|
839
839
|
if (!arr) {
|
|
840
840
|
return;
|
|
841
841
|
}
|
|
@@ -844,7 +844,7 @@
|
|
|
844
844
|
return;
|
|
845
845
|
}
|
|
846
846
|
if (length === deleteCount) {
|
|
847
|
-
this.
|
|
847
|
+
this.#listeners.delete(type);
|
|
848
848
|
}
|
|
849
849
|
else {
|
|
850
850
|
arr.splice(idx, deleteCount);
|
|
@@ -882,19 +882,19 @@
|
|
|
882
882
|
presets = new Map();
|
|
883
883
|
shapeDrawers = new Map();
|
|
884
884
|
updaters = new Map();
|
|
885
|
-
|
|
886
|
-
|
|
887
|
-
|
|
888
|
-
|
|
889
|
-
|
|
890
|
-
|
|
891
|
-
|
|
885
|
+
#allLoadersSet = new Set();
|
|
886
|
+
#configs = new Map();
|
|
887
|
+
#engine;
|
|
888
|
+
#executedSet = new Set();
|
|
889
|
+
#initialized = false;
|
|
890
|
+
#isRunningLoaders = false;
|
|
891
|
+
#loadPromises = new Set();
|
|
892
892
|
constructor(engine) {
|
|
893
|
-
this
|
|
893
|
+
this.#engine = engine;
|
|
894
894
|
}
|
|
895
895
|
get configs() {
|
|
896
896
|
const res = {};
|
|
897
|
-
for (const [name, config] of this
|
|
897
|
+
for (const [name, config] of this.#configs) {
|
|
898
898
|
res[name] = config;
|
|
899
899
|
}
|
|
900
900
|
return res;
|
|
@@ -904,8 +904,8 @@
|
|
|
904
904
|
}
|
|
905
905
|
addConfig(config) {
|
|
906
906
|
const key = config.key ?? config.name ?? "default";
|
|
907
|
-
this.
|
|
908
|
-
this.
|
|
907
|
+
this.#configs.set(key, config);
|
|
908
|
+
this.#engine.dispatchEvent(exports.EventType.configAdded, { data: { name: key, config } });
|
|
909
909
|
}
|
|
910
910
|
addEasing(name, easing) {
|
|
911
911
|
if (this.easingFunctions.get(name)) {
|
|
@@ -966,21 +966,21 @@
|
|
|
966
966
|
return getItemsFromInitializer(container, this.updaters, this.initializers.updaters, force);
|
|
967
967
|
}
|
|
968
968
|
async init() {
|
|
969
|
-
if (this
|
|
969
|
+
if (this.#initialized || this.#isRunningLoaders) {
|
|
970
970
|
return;
|
|
971
971
|
}
|
|
972
|
-
this
|
|
973
|
-
this
|
|
974
|
-
this
|
|
972
|
+
this.#isRunningLoaders = true;
|
|
973
|
+
this.#executedSet = new Set();
|
|
974
|
+
this.#allLoadersSet = new Set(this.#loadPromises);
|
|
975
975
|
try {
|
|
976
|
-
for (const loader of this
|
|
977
|
-
await this
|
|
976
|
+
for (const loader of this.#allLoadersSet) {
|
|
977
|
+
await this.#runLoader(loader, this.#executedSet, this.#allLoadersSet);
|
|
978
978
|
}
|
|
979
979
|
}
|
|
980
980
|
finally {
|
|
981
|
-
this.
|
|
982
|
-
this
|
|
983
|
-
this
|
|
981
|
+
this.#loadPromises.clear();
|
|
982
|
+
this.#isRunningLoaders = false;
|
|
983
|
+
this.#initialized = true;
|
|
984
984
|
}
|
|
985
985
|
}
|
|
986
986
|
loadParticlesOptions(container, options, ...sourceOptions) {
|
|
@@ -991,24 +991,24 @@
|
|
|
991
991
|
updaters.forEach(updater => updater.loadOptions?.(options, ...sourceOptions));
|
|
992
992
|
}
|
|
993
993
|
async register(...loaders) {
|
|
994
|
-
if (this
|
|
994
|
+
if (this.#initialized) {
|
|
995
995
|
throw new Error("Register plugins can only be done before calling tsParticles.load()");
|
|
996
996
|
}
|
|
997
997
|
for (const loader of loaders) {
|
|
998
|
-
if (this
|
|
999
|
-
await this
|
|
998
|
+
if (this.#isRunningLoaders) {
|
|
999
|
+
await this.#runLoader(loader, this.#executedSet, this.#allLoadersSet);
|
|
1000
1000
|
}
|
|
1001
1001
|
else {
|
|
1002
|
-
this.
|
|
1002
|
+
this.#loadPromises.add(loader);
|
|
1003
1003
|
}
|
|
1004
1004
|
}
|
|
1005
1005
|
}
|
|
1006
|
-
async
|
|
1006
|
+
async #runLoader(loader, executed, allLoaders) {
|
|
1007
1007
|
if (executed.has(loader))
|
|
1008
1008
|
return;
|
|
1009
1009
|
executed.add(loader);
|
|
1010
1010
|
allLoaders.add(loader);
|
|
1011
|
-
await loader(this
|
|
1011
|
+
await loader(this.#engine);
|
|
1012
1012
|
}
|
|
1013
1013
|
}
|
|
1014
1014
|
|
|
@@ -1111,17 +1111,17 @@
|
|
|
1111
1111
|
};
|
|
1112
1112
|
class Engine {
|
|
1113
1113
|
pluginManager = new PluginManager(this);
|
|
1114
|
-
|
|
1115
|
-
|
|
1116
|
-
|
|
1114
|
+
#domArray = [];
|
|
1115
|
+
#eventDispatcher = new EventDispatcher();
|
|
1116
|
+
#initialized = false;
|
|
1117
1117
|
get items() {
|
|
1118
|
-
return this
|
|
1118
|
+
return this.#domArray;
|
|
1119
1119
|
}
|
|
1120
1120
|
get version() {
|
|
1121
|
-
return "4.0
|
|
1121
|
+
return "4.1.0";
|
|
1122
1122
|
}
|
|
1123
1123
|
addEventListener(type, listener) {
|
|
1124
|
-
this.
|
|
1124
|
+
this.#eventDispatcher.addEventListener(type, listener);
|
|
1125
1125
|
}
|
|
1126
1126
|
checkVersion(pluginVersion) {
|
|
1127
1127
|
if (this.version === pluginVersion) {
|
|
@@ -1130,17 +1130,17 @@
|
|
|
1130
1130
|
throw new Error(`The tsParticles version is different from the loaded plugins version. Engine version: ${this.version}. Plugin version: ${pluginVersion}`);
|
|
1131
1131
|
}
|
|
1132
1132
|
dispatchEvent(type, args) {
|
|
1133
|
-
this.
|
|
1133
|
+
this.#eventDispatcher.dispatchEvent(type, args);
|
|
1134
1134
|
}
|
|
1135
1135
|
async init() {
|
|
1136
|
-
if (this
|
|
1136
|
+
if (this.#initialized) {
|
|
1137
1137
|
return;
|
|
1138
1138
|
}
|
|
1139
1139
|
await this.pluginManager.init();
|
|
1140
|
-
this
|
|
1140
|
+
this.#initialized = true;
|
|
1141
1141
|
}
|
|
1142
1142
|
item(index) {
|
|
1143
|
-
const
|
|
1143
|
+
const items = this.items, item = items[index];
|
|
1144
1144
|
if (item?.destroyed) {
|
|
1145
1145
|
items.splice(index, removeDeleteCount);
|
|
1146
1146
|
return;
|
|
@@ -1194,7 +1194,7 @@
|
|
|
1194
1194
|
await Promise.all(this.items.map(t => t.refresh()));
|
|
1195
1195
|
}
|
|
1196
1196
|
removeEventListener(type, listener) {
|
|
1197
|
-
this.
|
|
1197
|
+
this.#eventDispatcher.removeEventListener(type, listener);
|
|
1198
1198
|
}
|
|
1199
1199
|
}
|
|
1200
1200
|
|
|
@@ -1965,43 +1965,6 @@
|
|
|
1965
1965
|
}
|
|
1966
1966
|
}
|
|
1967
1967
|
|
|
1968
|
-
class OpacityAnimation extends RangedAnimationOptions {
|
|
1969
|
-
destroy;
|
|
1970
|
-
constructor() {
|
|
1971
|
-
super();
|
|
1972
|
-
this.destroy = exports.DestroyType.none;
|
|
1973
|
-
this.speed = 2;
|
|
1974
|
-
}
|
|
1975
|
-
load(data) {
|
|
1976
|
-
super.load(data);
|
|
1977
|
-
if (isNull(data)) {
|
|
1978
|
-
return;
|
|
1979
|
-
}
|
|
1980
|
-
if (data.destroy !== undefined) {
|
|
1981
|
-
this.destroy = data.destroy;
|
|
1982
|
-
}
|
|
1983
|
-
}
|
|
1984
|
-
}
|
|
1985
|
-
|
|
1986
|
-
class Opacity extends RangedAnimationValueWithRandom {
|
|
1987
|
-
animation;
|
|
1988
|
-
constructor() {
|
|
1989
|
-
super();
|
|
1990
|
-
this.animation = new OpacityAnimation();
|
|
1991
|
-
this.value = 1;
|
|
1992
|
-
}
|
|
1993
|
-
load(data) {
|
|
1994
|
-
if (isNull(data)) {
|
|
1995
|
-
return;
|
|
1996
|
-
}
|
|
1997
|
-
super.load(data);
|
|
1998
|
-
const animation = data.animation;
|
|
1999
|
-
if (animation !== undefined) {
|
|
2000
|
-
this.animation.load(animation);
|
|
2001
|
-
}
|
|
2002
|
-
}
|
|
2003
|
-
}
|
|
2004
|
-
|
|
2005
1968
|
class Stroke {
|
|
2006
1969
|
color;
|
|
2007
1970
|
opacity;
|
|
@@ -2169,43 +2132,6 @@
|
|
|
2169
2132
|
}
|
|
2170
2133
|
}
|
|
2171
2134
|
|
|
2172
|
-
class SizeAnimation extends RangedAnimationOptions {
|
|
2173
|
-
destroy;
|
|
2174
|
-
constructor() {
|
|
2175
|
-
super();
|
|
2176
|
-
this.destroy = exports.DestroyType.none;
|
|
2177
|
-
this.speed = 5;
|
|
2178
|
-
}
|
|
2179
|
-
load(data) {
|
|
2180
|
-
super.load(data);
|
|
2181
|
-
if (isNull(data)) {
|
|
2182
|
-
return;
|
|
2183
|
-
}
|
|
2184
|
-
if (data.destroy !== undefined) {
|
|
2185
|
-
this.destroy = data.destroy;
|
|
2186
|
-
}
|
|
2187
|
-
}
|
|
2188
|
-
}
|
|
2189
|
-
|
|
2190
|
-
class Size extends RangedAnimationValueWithRandom {
|
|
2191
|
-
animation;
|
|
2192
|
-
constructor() {
|
|
2193
|
-
super();
|
|
2194
|
-
this.animation = new SizeAnimation();
|
|
2195
|
-
this.value = 3;
|
|
2196
|
-
}
|
|
2197
|
-
load(data) {
|
|
2198
|
-
super.load(data);
|
|
2199
|
-
if (isNull(data)) {
|
|
2200
|
-
return;
|
|
2201
|
-
}
|
|
2202
|
-
const animation = data.animation;
|
|
2203
|
-
if (animation !== undefined) {
|
|
2204
|
-
this.animation.load(animation);
|
|
2205
|
-
}
|
|
2206
|
-
}
|
|
2207
|
-
}
|
|
2208
|
-
|
|
2209
2135
|
class ZIndex extends ValueWithRandom {
|
|
2210
2136
|
opacityRate;
|
|
2211
2137
|
sizeRate;
|
|
@@ -2239,24 +2165,21 @@
|
|
|
2239
2165
|
groups;
|
|
2240
2166
|
move;
|
|
2241
2167
|
number;
|
|
2242
|
-
opacity;
|
|
2243
2168
|
paint;
|
|
2244
2169
|
palette;
|
|
2245
2170
|
reduceDuplicates;
|
|
2246
2171
|
shape;
|
|
2247
|
-
size;
|
|
2248
2172
|
zIndex;
|
|
2249
|
-
|
|
2250
|
-
|
|
2173
|
+
#container;
|
|
2174
|
+
#pluginManager;
|
|
2251
2175
|
constructor(pluginManager, container) {
|
|
2252
|
-
this
|
|
2253
|
-
this
|
|
2176
|
+
this.#pluginManager = pluginManager;
|
|
2177
|
+
this.#container = container;
|
|
2254
2178
|
this.bounce = new ParticlesBounce();
|
|
2255
2179
|
this.effect = new Effect();
|
|
2256
2180
|
this.groups = {};
|
|
2257
2181
|
this.move = new Move();
|
|
2258
2182
|
this.number = new ParticlesNumber();
|
|
2259
|
-
this.opacity = new Opacity();
|
|
2260
2183
|
this.paint = new Paint();
|
|
2261
2184
|
this.paint.color = new AnimatableColor();
|
|
2262
2185
|
this.paint.color.value = "#fff";
|
|
@@ -2264,7 +2187,6 @@
|
|
|
2264
2187
|
this.paint.fill.enable = true;
|
|
2265
2188
|
this.reduceDuplicates = false;
|
|
2266
2189
|
this.shape = new Shape();
|
|
2267
|
-
this.size = new Size();
|
|
2268
2190
|
this.zIndex = new ZIndex();
|
|
2269
2191
|
}
|
|
2270
2192
|
load(data) {
|
|
@@ -2273,7 +2195,7 @@
|
|
|
2273
2195
|
}
|
|
2274
2196
|
if (data.palette) {
|
|
2275
2197
|
this.palette = data.palette;
|
|
2276
|
-
this
|
|
2198
|
+
this.#importPalette(this.palette);
|
|
2277
2199
|
}
|
|
2278
2200
|
if (data.groups !== undefined) {
|
|
2279
2201
|
for (const group of Object.keys(data.groups)) {
|
|
@@ -2293,7 +2215,6 @@
|
|
|
2293
2215
|
this.effect.load(data.effect);
|
|
2294
2216
|
this.move.load(data.move);
|
|
2295
2217
|
this.number.load(data.number);
|
|
2296
|
-
this.opacity.load(data.opacity);
|
|
2297
2218
|
const paintToLoad = data.paint;
|
|
2298
2219
|
if (paintToLoad) {
|
|
2299
2220
|
if (isArray(paintToLoad)) {
|
|
@@ -2312,15 +2233,14 @@
|
|
|
2312
2233
|
}
|
|
2313
2234
|
}
|
|
2314
2235
|
this.shape.load(data.shape);
|
|
2315
|
-
this.size.load(data.size);
|
|
2316
2236
|
this.zIndex.load(data.zIndex);
|
|
2317
|
-
if (this
|
|
2318
|
-
for (const plugin of this.
|
|
2237
|
+
if (this.#container) {
|
|
2238
|
+
for (const plugin of this.#pluginManager.plugins) {
|
|
2319
2239
|
if (plugin.loadParticlesOptions) {
|
|
2320
|
-
plugin.loadParticlesOptions(this
|
|
2240
|
+
plugin.loadParticlesOptions(this.#container, this, data);
|
|
2321
2241
|
}
|
|
2322
2242
|
}
|
|
2323
|
-
const updaters = this.
|
|
2243
|
+
const updaters = this.#pluginManager.updaters.get(this.#container);
|
|
2324
2244
|
if (updaters) {
|
|
2325
2245
|
for (const updater of updaters) {
|
|
2326
2246
|
if (updater.loadOptions) {
|
|
@@ -2330,8 +2250,8 @@
|
|
|
2330
2250
|
}
|
|
2331
2251
|
}
|
|
2332
2252
|
}
|
|
2333
|
-
|
|
2334
|
-
const paletteData = this.
|
|
2253
|
+
#importPalette = (palette) => {
|
|
2254
|
+
const paletteData = this.#pluginManager.getPalette(palette);
|
|
2335
2255
|
if (!paletteData) {
|
|
2336
2256
|
return;
|
|
2337
2257
|
}
|
|
@@ -2410,11 +2330,11 @@
|
|
|
2410
2330
|
smooth;
|
|
2411
2331
|
style;
|
|
2412
2332
|
zLayers;
|
|
2413
|
-
|
|
2414
|
-
|
|
2333
|
+
#container;
|
|
2334
|
+
#pluginManager;
|
|
2415
2335
|
constructor(pluginManager, container) {
|
|
2416
|
-
this
|
|
2417
|
-
this
|
|
2336
|
+
this.#pluginManager = pluginManager;
|
|
2337
|
+
this.#container = container;
|
|
2418
2338
|
this.autoPlay = true;
|
|
2419
2339
|
this.background = new Background();
|
|
2420
2340
|
this.clear = true;
|
|
@@ -2425,7 +2345,7 @@
|
|
|
2425
2345
|
this.duration = 0;
|
|
2426
2346
|
this.fpsLimit = 120;
|
|
2427
2347
|
this.hdr = true;
|
|
2428
|
-
this.particles = loadParticlesOptions(this
|
|
2348
|
+
this.particles = loadParticlesOptions(this.#pluginManager, this.#container);
|
|
2429
2349
|
this.pauseOnBlur = true;
|
|
2430
2350
|
this.pauseOnOutsideViewport = true;
|
|
2431
2351
|
this.resize = new ResizeEvent();
|
|
@@ -2440,12 +2360,12 @@
|
|
|
2440
2360
|
if (data.preset !== undefined) {
|
|
2441
2361
|
this.preset = data.preset;
|
|
2442
2362
|
executeOnSingleOrMultiple(this.preset, preset => {
|
|
2443
|
-
this
|
|
2363
|
+
this.#importPreset(preset);
|
|
2444
2364
|
});
|
|
2445
2365
|
}
|
|
2446
2366
|
if (data.palette !== undefined) {
|
|
2447
2367
|
this.palette = data.palette;
|
|
2448
|
-
this
|
|
2368
|
+
this.#importPalette(this.palette);
|
|
2449
2369
|
}
|
|
2450
2370
|
if (data.autoPlay !== undefined) {
|
|
2451
2371
|
this.autoPlay = data.autoPlay;
|
|
@@ -2499,12 +2419,12 @@
|
|
|
2499
2419
|
if (data.smooth !== undefined) {
|
|
2500
2420
|
this.smooth = data.smooth;
|
|
2501
2421
|
}
|
|
2502
|
-
this.
|
|
2503
|
-
plugin.loadOptions(this
|
|
2422
|
+
this.#pluginManager.plugins.forEach(plugin => {
|
|
2423
|
+
plugin.loadOptions(this.#container, this, data);
|
|
2504
2424
|
});
|
|
2505
2425
|
}
|
|
2506
|
-
|
|
2507
|
-
const paletteData = this.
|
|
2426
|
+
#importPalette = palette => {
|
|
2427
|
+
const paletteData = this.#pluginManager.getPalette(palette);
|
|
2508
2428
|
if (!paletteData) {
|
|
2509
2429
|
return;
|
|
2510
2430
|
}
|
|
@@ -2521,8 +2441,8 @@
|
|
|
2521
2441
|
},
|
|
2522
2442
|
});
|
|
2523
2443
|
};
|
|
2524
|
-
|
|
2525
|
-
this.load(this.
|
|
2444
|
+
#importPreset = preset => {
|
|
2445
|
+
this.load(this.#pluginManager.getPreset(preset));
|
|
2526
2446
|
};
|
|
2527
2447
|
}
|
|
2528
2448
|
|
|
@@ -3360,7 +3280,7 @@
|
|
|
3360
3280
|
}
|
|
3361
3281
|
|
|
3362
3282
|
async function loadBlendPlugin(engine) {
|
|
3363
|
-
engine.checkVersion("4.0
|
|
3283
|
+
engine.checkVersion("4.1.0");
|
|
3364
3284
|
await engine.pluginManager.register(e => {
|
|
3365
3285
|
e.pluginManager.addPlugin(new BlendPlugin());
|
|
3366
3286
|
});
|
|
@@ -3397,7 +3317,7 @@
|
|
|
3397
3317
|
}
|
|
3398
3318
|
|
|
3399
3319
|
async function loadCircleShape(engine) {
|
|
3400
|
-
engine.checkVersion("4.0
|
|
3320
|
+
engine.checkVersion("4.1.0");
|
|
3401
3321
|
await engine.pluginManager.register(e => {
|
|
3402
3322
|
e.pluginManager.addShape(["circle"], () => {
|
|
3403
3323
|
return Promise.resolve(new CircleDrawer());
|
|
@@ -3418,15 +3338,15 @@
|
|
|
3418
3338
|
return input.startsWith("#");
|
|
3419
3339
|
}
|
|
3420
3340
|
handleColor(color) {
|
|
3421
|
-
return this
|
|
3341
|
+
return this.#parseString(color.value);
|
|
3422
3342
|
}
|
|
3423
3343
|
handleRangeColor(color) {
|
|
3424
|
-
return this
|
|
3344
|
+
return this.#parseString(color.value);
|
|
3425
3345
|
}
|
|
3426
3346
|
parseString(input) {
|
|
3427
|
-
return this
|
|
3347
|
+
return this.#parseString(input);
|
|
3428
3348
|
}
|
|
3429
|
-
|
|
3349
|
+
#parseString(hexColor) {
|
|
3430
3350
|
if (typeof hexColor !== "string" || !this.accepts(hexColor)) {
|
|
3431
3351
|
return;
|
|
3432
3352
|
}
|
|
@@ -3445,7 +3365,7 @@
|
|
|
3445
3365
|
}
|
|
3446
3366
|
|
|
3447
3367
|
async function loadHexColorPlugin(engine) {
|
|
3448
|
-
engine.checkVersion("4.0
|
|
3368
|
+
engine.checkVersion("4.1.0");
|
|
3449
3369
|
await engine.pluginManager.register(e => {
|
|
3450
3370
|
e.pluginManager.addColorManager("hex", new HexColorManager());
|
|
3451
3371
|
});
|
|
@@ -3498,7 +3418,7 @@
|
|
|
3498
3418
|
}
|
|
3499
3419
|
|
|
3500
3420
|
async function loadHslColorPlugin(engine) {
|
|
3501
|
-
engine.checkVersion("4.0
|
|
3421
|
+
engine.checkVersion("4.1.0");
|
|
3502
3422
|
await engine.pluginManager.register(e => {
|
|
3503
3423
|
e.pluginManager.addColorManager("hsl", new HslColorManager());
|
|
3504
3424
|
});
|
|
@@ -3506,13 +3426,13 @@
|
|
|
3506
3426
|
|
|
3507
3427
|
class MovePlugin {
|
|
3508
3428
|
id = "move";
|
|
3509
|
-
|
|
3429
|
+
#pluginManager;
|
|
3510
3430
|
constructor(pluginManager) {
|
|
3511
|
-
this
|
|
3431
|
+
this.#pluginManager = pluginManager;
|
|
3512
3432
|
}
|
|
3513
3433
|
async getPlugin(container) {
|
|
3514
3434
|
const { MovePluginInstance } = await Promise.resolve().then(function () { return MovePluginInstance$1; });
|
|
3515
|
-
return new MovePluginInstance(this
|
|
3435
|
+
return new MovePluginInstance(this.#pluginManager, container);
|
|
3516
3436
|
}
|
|
3517
3437
|
loadOptions() {
|
|
3518
3438
|
}
|
|
@@ -3522,7 +3442,7 @@
|
|
|
3522
3442
|
}
|
|
3523
3443
|
|
|
3524
3444
|
async function loadMovePlugin(engine) {
|
|
3525
|
-
engine.checkVersion("4.0
|
|
3445
|
+
engine.checkVersion("4.1.0");
|
|
3526
3446
|
await engine.pluginManager.register(e => {
|
|
3527
3447
|
const moveEngine = e, movePluginManager = moveEngine.pluginManager;
|
|
3528
3448
|
movePluginManager.initializers.pathGenerators ??= new Map();
|
|
@@ -3540,18 +3460,58 @@
|
|
|
3540
3460
|
});
|
|
3541
3461
|
}
|
|
3542
3462
|
|
|
3463
|
+
class OpacityAnimation extends RangedAnimationOptions {
|
|
3464
|
+
destroy;
|
|
3465
|
+
constructor() {
|
|
3466
|
+
super();
|
|
3467
|
+
this.destroy = exports.DestroyType.none;
|
|
3468
|
+
this.speed = 2;
|
|
3469
|
+
}
|
|
3470
|
+
load(data) {
|
|
3471
|
+
super.load(data);
|
|
3472
|
+
if (isNull(data)) {
|
|
3473
|
+
return;
|
|
3474
|
+
}
|
|
3475
|
+
if (data.destroy !== undefined) {
|
|
3476
|
+
this.destroy = data.destroy;
|
|
3477
|
+
}
|
|
3478
|
+
}
|
|
3479
|
+
}
|
|
3480
|
+
|
|
3481
|
+
class Opacity extends RangedAnimationValueWithRandom {
|
|
3482
|
+
animation;
|
|
3483
|
+
constructor() {
|
|
3484
|
+
super();
|
|
3485
|
+
this.animation = new OpacityAnimation();
|
|
3486
|
+
this.value = 1;
|
|
3487
|
+
}
|
|
3488
|
+
load(data) {
|
|
3489
|
+
if (isNull(data)) {
|
|
3490
|
+
return;
|
|
3491
|
+
}
|
|
3492
|
+
super.load(data);
|
|
3493
|
+
const animation = data.animation;
|
|
3494
|
+
if (animation !== undefined) {
|
|
3495
|
+
this.animation.load(animation);
|
|
3496
|
+
}
|
|
3497
|
+
}
|
|
3498
|
+
}
|
|
3499
|
+
|
|
3543
3500
|
class OpacityUpdater {
|
|
3544
|
-
container;
|
|
3501
|
+
#container;
|
|
3545
3502
|
constructor(container) {
|
|
3546
|
-
this
|
|
3503
|
+
this.#container = container;
|
|
3547
3504
|
}
|
|
3548
3505
|
init(particle) {
|
|
3549
3506
|
const opacityOptions = particle.options.opacity, pxRatio = 1;
|
|
3507
|
+
if (!opacityOptions) {
|
|
3508
|
+
return;
|
|
3509
|
+
}
|
|
3550
3510
|
particle.opacity = initParticleNumericAnimationValue(opacityOptions, pxRatio);
|
|
3551
3511
|
const opacityAnimation = opacityOptions.animation;
|
|
3552
3512
|
if (opacityAnimation.enable) {
|
|
3553
3513
|
particle.opacity.velocity =
|
|
3554
|
-
(getRangeValue(opacityAnimation.speed) / percentDenominator) * this
|
|
3514
|
+
(getRangeValue(opacityAnimation.speed) / percentDenominator) * this.#container.retina.reduceFactor;
|
|
3555
3515
|
if (!opacityAnimation.sync) {
|
|
3556
3516
|
particle.opacity.velocity *= getRandom();
|
|
3557
3517
|
}
|
|
@@ -3567,6 +3527,12 @@
|
|
|
3567
3527
|
((particle.opacity.maxLoops ?? none) > none &&
|
|
3568
3528
|
(particle.opacity.loops ?? none) < (particle.opacity.maxLoops ?? none))));
|
|
3569
3529
|
}
|
|
3530
|
+
loadOptions(options, ...sources) {
|
|
3531
|
+
options.opacity ??= new Opacity();
|
|
3532
|
+
for (const source of sources) {
|
|
3533
|
+
options.opacity.load(source?.opacity);
|
|
3534
|
+
}
|
|
3535
|
+
}
|
|
3570
3536
|
reset(particle) {
|
|
3571
3537
|
if (!particle.opacity) {
|
|
3572
3538
|
return;
|
|
@@ -3575,7 +3541,7 @@
|
|
|
3575
3541
|
particle.opacity.loops = 0;
|
|
3576
3542
|
}
|
|
3577
3543
|
update(particle, delta) {
|
|
3578
|
-
if (!this.isEnabled(particle) || !particle.opacity) {
|
|
3544
|
+
if (!this.isEnabled(particle) || !particle.opacity || !particle.options.opacity) {
|
|
3579
3545
|
return;
|
|
3580
3546
|
}
|
|
3581
3547
|
updateAnimation(particle, particle.opacity, true, particle.options.opacity.animation.destroy, delta);
|
|
@@ -3583,7 +3549,7 @@
|
|
|
3583
3549
|
}
|
|
3584
3550
|
|
|
3585
3551
|
async function loadOpacityUpdater(engine) {
|
|
3586
|
-
engine.checkVersion("4.0
|
|
3552
|
+
engine.checkVersion("4.1.0");
|
|
3587
3553
|
await engine.pluginManager.register(e => {
|
|
3588
3554
|
e.pluginManager.addParticleUpdater("opacity", container => {
|
|
3589
3555
|
return Promise.resolve(new OpacityUpdater(container));
|
|
@@ -3605,10 +3571,9 @@
|
|
|
3605
3571
|
}
|
|
3606
3572
|
const velocity = data.particle.velocity.x;
|
|
3607
3573
|
let bounced = false;
|
|
3608
|
-
if (
|
|
3609
|
-
data.
|
|
3610
|
-
|
|
3611
|
-
(data.direction === exports.OutModeDirection.left && data.bounds.left <= boundsMin && velocity < minVelocity$4)) {
|
|
3574
|
+
if (data.outOfCanvas &&
|
|
3575
|
+
((data.direction === exports.OutModeDirection.right && velocity > minVelocity$4) ||
|
|
3576
|
+
(data.direction === exports.OutModeDirection.left && velocity < minVelocity$4))) {
|
|
3612
3577
|
const newVelocity = getRangeValue(data.particle.options.bounce.horizontal.value);
|
|
3613
3578
|
data.particle.velocity.x *= -newVelocity;
|
|
3614
3579
|
bounced = true;
|
|
@@ -3617,10 +3582,10 @@
|
|
|
3617
3582
|
return;
|
|
3618
3583
|
}
|
|
3619
3584
|
const minPos = data.offset.x + data.size;
|
|
3620
|
-
if (data.
|
|
3585
|
+
if (data.outOfCanvas && data.direction === exports.OutModeDirection.right) {
|
|
3621
3586
|
data.particle.position.x = data.canvasSize.width - minPos;
|
|
3622
3587
|
}
|
|
3623
|
-
else if (data.
|
|
3588
|
+
else if (data.outOfCanvas && data.direction === exports.OutModeDirection.left) {
|
|
3624
3589
|
data.particle.position.x = minPos;
|
|
3625
3590
|
}
|
|
3626
3591
|
if (data.outMode === exports.OutMode.split) {
|
|
@@ -3640,10 +3605,9 @@
|
|
|
3640
3605
|
}
|
|
3641
3606
|
const velocity = data.particle.velocity.y;
|
|
3642
3607
|
let bounced = false;
|
|
3643
|
-
if (
|
|
3644
|
-
data.
|
|
3645
|
-
|
|
3646
|
-
(data.direction === exports.OutModeDirection.top && data.bounds.top <= boundsMin && velocity < minVelocity$4)) {
|
|
3608
|
+
if (data.outOfCanvas &&
|
|
3609
|
+
((data.direction === exports.OutModeDirection.bottom && velocity > minVelocity$4) ||
|
|
3610
|
+
(data.direction === exports.OutModeDirection.top && velocity < minVelocity$4))) {
|
|
3647
3611
|
const newVelocity = getRangeValue(data.particle.options.bounce.vertical.value);
|
|
3648
3612
|
data.particle.velocity.y *= -newVelocity;
|
|
3649
3613
|
bounced = true;
|
|
@@ -3652,10 +3616,10 @@
|
|
|
3652
3616
|
return;
|
|
3653
3617
|
}
|
|
3654
3618
|
const minPos = data.offset.y + data.size;
|
|
3655
|
-
if (data.
|
|
3619
|
+
if (data.outOfCanvas && data.direction === exports.OutModeDirection.bottom) {
|
|
3656
3620
|
data.particle.position.y = data.canvasSize.height - minPos;
|
|
3657
3621
|
}
|
|
3658
|
-
else if (data.
|
|
3622
|
+
else if (data.outOfCanvas && data.direction === exports.OutModeDirection.top) {
|
|
3659
3623
|
data.particle.position.y = minPos;
|
|
3660
3624
|
}
|
|
3661
3625
|
if (data.outMode === exports.OutMode.split) {
|
|
@@ -3664,24 +3628,24 @@
|
|
|
3664
3628
|
}
|
|
3665
3629
|
|
|
3666
3630
|
class BounceOutMode {
|
|
3667
|
-
container;
|
|
3668
3631
|
modes;
|
|
3669
|
-
|
|
3632
|
+
#container;
|
|
3633
|
+
#particleBouncePlugins;
|
|
3670
3634
|
constructor(container) {
|
|
3671
|
-
this
|
|
3635
|
+
this.#container = container;
|
|
3672
3636
|
this.modes = [
|
|
3673
3637
|
exports.OutMode.bounce,
|
|
3674
3638
|
exports.OutMode.split,
|
|
3675
3639
|
];
|
|
3676
|
-
this
|
|
3640
|
+
this.#particleBouncePlugins = container.plugins.filter(p => p.particleBounce !== undefined);
|
|
3677
3641
|
}
|
|
3678
3642
|
update(particle, direction, delta, outMode) {
|
|
3679
3643
|
if (!this.modes.includes(outMode)) {
|
|
3680
3644
|
return;
|
|
3681
3645
|
}
|
|
3682
|
-
const container = this
|
|
3646
|
+
const container = this.#container;
|
|
3683
3647
|
let handled = false;
|
|
3684
|
-
for (const plugin of this
|
|
3648
|
+
for (const plugin of this.#particleBouncePlugins) {
|
|
3685
3649
|
handled = plugin.particleBounce?.(particle, delta, direction) ?? false;
|
|
3686
3650
|
if (handled) {
|
|
3687
3651
|
break;
|
|
@@ -3690,29 +3654,26 @@
|
|
|
3690
3654
|
if (handled) {
|
|
3691
3655
|
return;
|
|
3692
3656
|
}
|
|
3693
|
-
const pos = particle.getPosition(), offset = particle.offset, size = particle.getRadius(), bounds = calculateBounds(pos, size), canvasSize = container.canvas.size;
|
|
3694
|
-
bounceHorizontal({ particle, outMode, direction, bounds, canvasSize, offset, size });
|
|
3695
|
-
bounceVertical({ particle, outMode, direction, bounds, canvasSize, offset, size });
|
|
3657
|
+
const pos = particle.getPosition(), offset = particle.offset, size = particle.getRadius(), bounds = calculateBounds(pos, size), canvasSize = container.canvas.size, outOfCanvas = !particle.isInsideCanvasForOutMode(outMode, direction);
|
|
3658
|
+
bounceHorizontal({ particle, outMode, direction, bounds, canvasSize, offset, outOfCanvas, size });
|
|
3659
|
+
bounceVertical({ particle, outMode, direction, bounds, canvasSize, offset, outOfCanvas, size });
|
|
3696
3660
|
}
|
|
3697
3661
|
}
|
|
3698
3662
|
|
|
3699
3663
|
const minVelocity$3 = 0;
|
|
3700
3664
|
class DestroyOutMode {
|
|
3701
|
-
container;
|
|
3702
3665
|
modes;
|
|
3703
|
-
constructor(
|
|
3704
|
-
this.container = container;
|
|
3666
|
+
constructor(_container) {
|
|
3705
3667
|
this.modes = [exports.OutMode.destroy];
|
|
3706
3668
|
}
|
|
3707
3669
|
update(particle, direction, _delta, outMode) {
|
|
3708
3670
|
if (!this.modes.includes(outMode)) {
|
|
3709
3671
|
return;
|
|
3710
3672
|
}
|
|
3711
|
-
const container = this.container;
|
|
3712
3673
|
switch (particle.outType) {
|
|
3713
3674
|
case exports.ParticleOutType.normal:
|
|
3714
3675
|
case exports.ParticleOutType.outside:
|
|
3715
|
-
if (
|
|
3676
|
+
if (particle.isInsideCanvasForOutMode(outMode, direction)) {
|
|
3716
3677
|
return;
|
|
3717
3678
|
}
|
|
3718
3679
|
break;
|
|
@@ -3733,10 +3694,10 @@
|
|
|
3733
3694
|
|
|
3734
3695
|
const minVelocity$2 = 0;
|
|
3735
3696
|
class NoneOutMode {
|
|
3736
|
-
container;
|
|
3737
3697
|
modes;
|
|
3698
|
+
#container;
|
|
3738
3699
|
constructor(container) {
|
|
3739
|
-
this
|
|
3700
|
+
this.#container = container;
|
|
3740
3701
|
this.modes = [exports.OutMode.none];
|
|
3741
3702
|
}
|
|
3742
3703
|
update(particle, direction, _delta, outMode) {
|
|
@@ -3749,7 +3710,7 @@
|
|
|
3749
3710
|
(direction === exports.OutModeDirection.top || direction === exports.OutModeDirection.bottom))) {
|
|
3750
3711
|
return;
|
|
3751
3712
|
}
|
|
3752
|
-
const gravityOptions = particle.options.move.gravity, container = this
|
|
3713
|
+
const gravityOptions = particle.options.move.gravity, container = this.#container, canvasSize = container.canvas.size, pRadius = particle.getRadius();
|
|
3753
3714
|
if (!gravityOptions.enable) {
|
|
3754
3715
|
if ((particle.velocity.y > minVelocity$2 && particle.position.y <= canvasSize.height + pRadius) ||
|
|
3755
3716
|
(particle.velocity.y < minVelocity$2 && particle.position.y >= -pRadius) ||
|
|
@@ -3775,17 +3736,17 @@
|
|
|
3775
3736
|
|
|
3776
3737
|
const minVelocity$1 = 0, minDistance = 0, updateVector = Vector.origin;
|
|
3777
3738
|
class OutOutMode {
|
|
3778
|
-
container;
|
|
3779
3739
|
modes;
|
|
3740
|
+
#container;
|
|
3780
3741
|
constructor(container) {
|
|
3781
|
-
this
|
|
3742
|
+
this.#container = container;
|
|
3782
3743
|
this.modes = [exports.OutMode.out];
|
|
3783
3744
|
}
|
|
3784
3745
|
update(particle, direction, _delta, outMode) {
|
|
3785
3746
|
if (!this.modes.includes(outMode)) {
|
|
3786
3747
|
return;
|
|
3787
3748
|
}
|
|
3788
|
-
const container = this
|
|
3749
|
+
const container = this.#container;
|
|
3789
3750
|
switch (particle.outType) {
|
|
3790
3751
|
case exports.ParticleOutType.inside: {
|
|
3791
3752
|
const { x: vx, y: vy } = particle.velocity;
|
|
@@ -3815,7 +3776,7 @@
|
|
|
3815
3776
|
break;
|
|
3816
3777
|
}
|
|
3817
3778
|
default: {
|
|
3818
|
-
if (
|
|
3779
|
+
if (particle.isInsideCanvasForOutMode(outMode, direction)) {
|
|
3819
3780
|
return;
|
|
3820
3781
|
}
|
|
3821
3782
|
switch (particle.outType) {
|
|
@@ -3899,16 +3860,16 @@
|
|
|
3899
3860
|
};
|
|
3900
3861
|
class OutOfCanvasUpdater {
|
|
3901
3862
|
updaters;
|
|
3902
|
-
container;
|
|
3863
|
+
#container;
|
|
3903
3864
|
constructor(container) {
|
|
3904
|
-
this
|
|
3865
|
+
this.#container = container;
|
|
3905
3866
|
this.updaters = new Map();
|
|
3906
3867
|
}
|
|
3907
3868
|
init(particle) {
|
|
3908
|
-
this
|
|
3909
|
-
this
|
|
3910
|
-
this
|
|
3911
|
-
this
|
|
3869
|
+
this.#addUpdaterIfMissing(particle, exports.OutMode.bounce, container => new BounceOutMode(container));
|
|
3870
|
+
this.#addUpdaterIfMissing(particle, exports.OutMode.out, container => new OutOutMode(container));
|
|
3871
|
+
this.#addUpdaterIfMissing(particle, exports.OutMode.destroy, container => new DestroyOutMode(container));
|
|
3872
|
+
this.#addUpdaterIfMissing(particle, exports.OutMode.none, container => new NoneOutMode(container));
|
|
3912
3873
|
}
|
|
3913
3874
|
isEnabled(particle) {
|
|
3914
3875
|
return !particle.destroyed && !particle.spawning;
|
|
@@ -3916,18 +3877,18 @@
|
|
|
3916
3877
|
update(particle, delta) {
|
|
3917
3878
|
const outModes = particle.options.move.outModes;
|
|
3918
3879
|
particle.justWarped = false;
|
|
3919
|
-
this
|
|
3920
|
-
this
|
|
3921
|
-
this
|
|
3922
|
-
this
|
|
3880
|
+
this.#updateOutMode(particle, delta, outModes.bottom ?? outModes.default, exports.OutModeDirection.bottom);
|
|
3881
|
+
this.#updateOutMode(particle, delta, outModes.left ?? outModes.default, exports.OutModeDirection.left);
|
|
3882
|
+
this.#updateOutMode(particle, delta, outModes.right ?? outModes.default, exports.OutModeDirection.right);
|
|
3883
|
+
this.#updateOutMode(particle, delta, outModes.top ?? outModes.default, exports.OutModeDirection.top);
|
|
3923
3884
|
}
|
|
3924
|
-
|
|
3885
|
+
#addUpdaterIfMissing = (particle, outMode, getUpdater) => {
|
|
3925
3886
|
const outModes = particle.options.move.outModes;
|
|
3926
3887
|
if (!this.updaters.has(outMode) && checkOutMode(outModes, outMode)) {
|
|
3927
|
-
this.updaters.set(outMode, getUpdater(this
|
|
3888
|
+
this.updaters.set(outMode, getUpdater(this.#container));
|
|
3928
3889
|
}
|
|
3929
3890
|
};
|
|
3930
|
-
|
|
3891
|
+
#updateOutMode = (particle, delta, outMode, direction) => {
|
|
3931
3892
|
for (const updater of this.updaters.values()) {
|
|
3932
3893
|
updater.update(particle, direction, delta, outMode);
|
|
3933
3894
|
}
|
|
@@ -3935,7 +3896,7 @@
|
|
|
3935
3896
|
}
|
|
3936
3897
|
|
|
3937
3898
|
async function loadOutModesUpdater(engine) {
|
|
3938
|
-
engine.checkVersion("4.0
|
|
3899
|
+
engine.checkVersion("4.1.0");
|
|
3939
3900
|
await engine.pluginManager.register(e => {
|
|
3940
3901
|
e.pluginManager.addParticleUpdater("outModes", container => {
|
|
3941
3902
|
return Promise.resolve(new OutOfCanvasUpdater(container));
|
|
@@ -3945,20 +3906,20 @@
|
|
|
3945
3906
|
|
|
3946
3907
|
const defaultOpacity = 1;
|
|
3947
3908
|
class PaintUpdater {
|
|
3948
|
-
|
|
3949
|
-
|
|
3909
|
+
#container;
|
|
3910
|
+
#pluginManager;
|
|
3950
3911
|
constructor(pluginManager, container) {
|
|
3951
|
-
this
|
|
3952
|
-
this
|
|
3912
|
+
this.#container = container;
|
|
3913
|
+
this.#pluginManager = pluginManager;
|
|
3953
3914
|
}
|
|
3954
3915
|
init(particle) {
|
|
3955
|
-
const container = this
|
|
3916
|
+
const container = this.#container, options = particle.options, paint = itemFromSingleOrMultiple(options.paint, particle.id, options.reduceDuplicates), color = paint?.color, paintColor = color ?? undefined, fill = paint?.fill, stroke = paint?.stroke;
|
|
3956
3917
|
if (fill) {
|
|
3957
3918
|
const fillColor = AnimatableColor.create(paintColor === undefined ? undefined : AnimatableColor.create(undefined, paintColor), fill.color);
|
|
3958
3919
|
particle.fillEnabled = fill.enable;
|
|
3959
3920
|
particle.fillOpacity = getRangeValue(fill.opacity);
|
|
3960
3921
|
particle.fillAnimation = fillColor.animation;
|
|
3961
|
-
const fillHslColor = rangeColorToHsl(this
|
|
3922
|
+
const fillHslColor = rangeColorToHsl(this.#pluginManager, fillColor);
|
|
3962
3923
|
if (fillHslColor) {
|
|
3963
3924
|
particle.fillColor = getHslAnimationFromHsl(fillHslColor, particle.fillAnimation, container.retina.reduceFactor);
|
|
3964
3925
|
}
|
|
@@ -3974,7 +3935,7 @@
|
|
|
3974
3935
|
particle.strokeWidth = getRangeValue(stroke.width) * container.retina.pixelRatio;
|
|
3975
3936
|
particle.strokeOpacity = getRangeValue(stroke.opacity ?? defaultOpacity);
|
|
3976
3937
|
particle.strokeAnimation = strokeColor.animation;
|
|
3977
|
-
const strokeHslColor = rangeColorToHsl(this
|
|
3938
|
+
const strokeHslColor = rangeColorToHsl(this.#pluginManager, strokeColor) ?? particle.getFillColor();
|
|
3978
3939
|
if (strokeHslColor) {
|
|
3979
3940
|
particle.strokeColor = getHslAnimationFromHsl(strokeHslColor, particle.strokeAnimation, container.retina.reduceFactor);
|
|
3980
3941
|
}
|
|
@@ -4006,7 +3967,7 @@
|
|
|
4006
3967
|
}
|
|
4007
3968
|
|
|
4008
3969
|
async function loadPaintUpdater(engine) {
|
|
4009
|
-
engine.checkVersion("4.0
|
|
3970
|
+
engine.checkVersion("4.1.0");
|
|
4010
3971
|
await engine.pluginManager.register(e => {
|
|
4011
3972
|
e.pluginManager.addParticleUpdater("paint", container => {
|
|
4012
3973
|
return Promise.resolve(new PaintUpdater(e.pluginManager, container));
|
|
@@ -4061,27 +4022,69 @@
|
|
|
4061
4022
|
}
|
|
4062
4023
|
|
|
4063
4024
|
async function loadRgbColorPlugin(engine) {
|
|
4064
|
-
engine.checkVersion("4.0
|
|
4025
|
+
engine.checkVersion("4.1.0");
|
|
4065
4026
|
await engine.pluginManager.register(e => {
|
|
4066
4027
|
e.pluginManager.addColorManager("rgb", new RgbColorManager());
|
|
4067
4028
|
});
|
|
4068
4029
|
}
|
|
4069
4030
|
|
|
4031
|
+
class SizeAnimation extends RangedAnimationOptions {
|
|
4032
|
+
destroy;
|
|
4033
|
+
constructor() {
|
|
4034
|
+
super();
|
|
4035
|
+
this.destroy = exports.DestroyType.none;
|
|
4036
|
+
this.speed = 5;
|
|
4037
|
+
}
|
|
4038
|
+
load(data) {
|
|
4039
|
+
super.load(data);
|
|
4040
|
+
if (isNull(data)) {
|
|
4041
|
+
return;
|
|
4042
|
+
}
|
|
4043
|
+
if (data.destroy !== undefined) {
|
|
4044
|
+
this.destroy = data.destroy;
|
|
4045
|
+
}
|
|
4046
|
+
}
|
|
4047
|
+
}
|
|
4048
|
+
|
|
4049
|
+
class Size extends RangedAnimationValueWithRandom {
|
|
4050
|
+
animation;
|
|
4051
|
+
constructor() {
|
|
4052
|
+
super();
|
|
4053
|
+
this.animation = new SizeAnimation();
|
|
4054
|
+
this.value = 3;
|
|
4055
|
+
}
|
|
4056
|
+
load(data) {
|
|
4057
|
+
super.load(data);
|
|
4058
|
+
if (isNull(data)) {
|
|
4059
|
+
return;
|
|
4060
|
+
}
|
|
4061
|
+
const animation = data.animation;
|
|
4062
|
+
if (animation !== undefined) {
|
|
4063
|
+
this.animation.load(animation);
|
|
4064
|
+
}
|
|
4065
|
+
}
|
|
4066
|
+
}
|
|
4067
|
+
|
|
4070
4068
|
const minLoops = 0;
|
|
4071
4069
|
class SizeUpdater {
|
|
4072
|
-
|
|
4070
|
+
#container;
|
|
4073
4071
|
constructor(container) {
|
|
4074
|
-
this
|
|
4072
|
+
this.#container = container;
|
|
4075
4073
|
}
|
|
4076
4074
|
init(particle) {
|
|
4077
|
-
const container = this
|
|
4078
|
-
if (
|
|
4079
|
-
|
|
4080
|
-
(particle.retina.sizeAnimationSpeed / percentDenominator) * container.retina.reduceFactor;
|
|
4081
|
-
if (!sizeAnimation.sync) {
|
|
4082
|
-
particle.size.velocity *= getRandom();
|
|
4083
|
-
}
|
|
4075
|
+
const container = this.#container, sizeOptions = particle.options.size;
|
|
4076
|
+
if (!sizeOptions) {
|
|
4077
|
+
return;
|
|
4084
4078
|
}
|
|
4079
|
+
const sizeAnimation = sizeOptions.animation;
|
|
4080
|
+
if (!sizeAnimation.enable) {
|
|
4081
|
+
return;
|
|
4082
|
+
}
|
|
4083
|
+
particle.size.velocity = (particle.retina.sizeAnimationSpeed / percentDenominator) * container.retina.reduceFactor;
|
|
4084
|
+
if (sizeAnimation.sync) {
|
|
4085
|
+
return;
|
|
4086
|
+
}
|
|
4087
|
+
particle.size.velocity *= getRandom();
|
|
4085
4088
|
}
|
|
4086
4089
|
isEnabled(particle) {
|
|
4087
4090
|
return (!particle.destroyed &&
|
|
@@ -4091,12 +4094,26 @@
|
|
|
4091
4094
|
((particle.size.maxLoops ?? minLoops) > minLoops &&
|
|
4092
4095
|
(particle.size.loops ?? minLoops) < (particle.size.maxLoops ?? minLoops))));
|
|
4093
4096
|
}
|
|
4097
|
+
loadOptions(options, ...sources) {
|
|
4098
|
+
options.size ??= new Size();
|
|
4099
|
+
for (const source of sources) {
|
|
4100
|
+
options.size.load(source?.size);
|
|
4101
|
+
}
|
|
4102
|
+
}
|
|
4103
|
+
preInit(particle) {
|
|
4104
|
+
const pxRatio = this.#container.retina.pixelRatio, options = particle.options, sizeOptions = options.size;
|
|
4105
|
+
if (!sizeOptions) {
|
|
4106
|
+
return;
|
|
4107
|
+
}
|
|
4108
|
+
particle.size = initParticleNumericAnimationValue(sizeOptions, pxRatio);
|
|
4109
|
+
particle.retina.sizeAnimationSpeed = getRangeValue(sizeOptions.animation.speed) * pxRatio;
|
|
4110
|
+
}
|
|
4094
4111
|
reset(particle) {
|
|
4095
4112
|
particle.size.time = 0;
|
|
4096
4113
|
particle.size.loops = 0;
|
|
4097
4114
|
}
|
|
4098
4115
|
update(particle, delta) {
|
|
4099
|
-
if (!this.isEnabled(particle)) {
|
|
4116
|
+
if (!this.isEnabled(particle) || !particle.options.size) {
|
|
4100
4117
|
return;
|
|
4101
4118
|
}
|
|
4102
4119
|
updateAnimation(particle, particle.size, true, particle.options.size.animation.destroy, delta);
|
|
@@ -4104,7 +4121,7 @@
|
|
|
4104
4121
|
}
|
|
4105
4122
|
|
|
4106
4123
|
async function loadSizeUpdater(engine) {
|
|
4107
|
-
engine.checkVersion("4.0
|
|
4124
|
+
engine.checkVersion("4.1.0");
|
|
4108
4125
|
await engine.pluginManager.register(e => {
|
|
4109
4126
|
e.pluginManager.addParticleUpdater("size", container => {
|
|
4110
4127
|
return Promise.resolve(new SizeUpdater(container));
|
|
@@ -4113,7 +4130,7 @@
|
|
|
4113
4130
|
}
|
|
4114
4131
|
|
|
4115
4132
|
async function loadBasic(engine) {
|
|
4116
|
-
engine.checkVersion("4.0
|
|
4133
|
+
engine.checkVersion("4.1.0");
|
|
4117
4134
|
await engine.pluginManager.register(async (e) => {
|
|
4118
4135
|
await Promise.all([
|
|
4119
4136
|
loadBlendPlugin(e),
|
|
@@ -4330,13 +4347,15 @@
|
|
|
4330
4347
|
mode: exports.PixelMode.precise,
|
|
4331
4348
|
},
|
|
4332
4349
|
});
|
|
4333
|
-
const factor = identity$2 / getRangeValue(splitOptions.factor.value);
|
|
4334
|
-
if (
|
|
4335
|
-
|
|
4336
|
-
|
|
4337
|
-
|
|
4338
|
-
|
|
4339
|
-
|
|
4350
|
+
const factor = identity$2 / getRangeValue(splitOptions.factor.value), sizeOptions = splitParticleOptions["size"];
|
|
4351
|
+
if (sizeOptions) {
|
|
4352
|
+
if (isNumber(sizeOptions.value)) {
|
|
4353
|
+
sizeOptions.value *= factor;
|
|
4354
|
+
}
|
|
4355
|
+
else {
|
|
4356
|
+
sizeOptions.value.min *= factor;
|
|
4357
|
+
sizeOptions.value.max *= factor;
|
|
4358
|
+
}
|
|
4340
4359
|
}
|
|
4341
4360
|
splitParticleOptions.load(splitParticlesOptions);
|
|
4342
4361
|
const splitParticlePaintOptions = itemFromSingleOrMultiple(splitParticleOptions.paint), splitParticleFillOptions = splitParticlePaintOptions?.fill, splitParticleStrokeOptions = splitParticlePaintOptions?.stroke, fillColor = resolveSplitColor(splitOptions.fillColorOffset, splitFillColor, splitParticleFillOptions?.color, parentFillColor), strokeColor = resolveSplitColor(splitOptions.strokeColorOffset, splitStrokeColor, splitParticleStrokeOptions?.color, parentStrokeColor);
|
|
@@ -4381,14 +4400,14 @@
|
|
|
4381
4400
|
|
|
4382
4401
|
const defaultDeltaFactor$1 = 1, fpsFactor = 60, minExplodeSpeed = 0.01, maxExplodeProgress = 1;
|
|
4383
4402
|
class DestroyUpdater {
|
|
4384
|
-
|
|
4385
|
-
|
|
4403
|
+
#container;
|
|
4404
|
+
#pluginManager;
|
|
4386
4405
|
constructor(pluginManager, container) {
|
|
4387
|
-
this
|
|
4388
|
-
this
|
|
4406
|
+
this.#container = container;
|
|
4407
|
+
this.#pluginManager = pluginManager;
|
|
4389
4408
|
}
|
|
4390
4409
|
init(particle) {
|
|
4391
|
-
const container = this
|
|
4410
|
+
const container = this.#container, particlesOptions = particle.options, destroyOptions = particlesOptions.destroy;
|
|
4392
4411
|
if (!destroyOptions) {
|
|
4393
4412
|
return;
|
|
4394
4413
|
}
|
|
@@ -4427,7 +4446,7 @@
|
|
|
4427
4446
|
const destroyOptions = particle.options.destroy;
|
|
4428
4447
|
switch (destroyOptions?.mode) {
|
|
4429
4448
|
case DestroyMode.split:
|
|
4430
|
-
split(this
|
|
4449
|
+
split(this.#pluginManager, this.#container, particle);
|
|
4431
4450
|
break;
|
|
4432
4451
|
case DestroyMode.explode: {
|
|
4433
4452
|
if (particle.exploding) {
|
|
@@ -4483,7 +4502,7 @@
|
|
|
4483
4502
|
}
|
|
4484
4503
|
|
|
4485
4504
|
async function loadDestroyUpdater(engine) {
|
|
4486
|
-
engine.checkVersion("4.0
|
|
4505
|
+
engine.checkVersion("4.1.0");
|
|
4487
4506
|
await engine.pluginManager.register(e => {
|
|
4488
4507
|
e.pluginManager.addParticleUpdater("destroy", container => {
|
|
4489
4508
|
return Promise.resolve(new DestroyUpdater(e.pluginManager, container));
|
|
@@ -4700,13 +4719,13 @@
|
|
|
4700
4719
|
|
|
4701
4720
|
class EmittersPlugin {
|
|
4702
4721
|
id = "emitters";
|
|
4703
|
-
|
|
4722
|
+
#instancesManager;
|
|
4704
4723
|
constructor(instancesManager) {
|
|
4705
|
-
this
|
|
4724
|
+
this.#instancesManager = instancesManager;
|
|
4706
4725
|
}
|
|
4707
4726
|
async getPlugin(container) {
|
|
4708
4727
|
const { EmittersPluginInstance } = await Promise.resolve().then(function () { return EmittersPluginInstance$1; });
|
|
4709
|
-
return new EmittersPluginInstance(this
|
|
4728
|
+
return new EmittersPluginInstance(this.#instancesManager, container);
|
|
4710
4729
|
}
|
|
4711
4730
|
loadOptions(_container, options, source) {
|
|
4712
4731
|
if (!this.needsPlugin(options) && !this.needsPlugin(source)) {
|
|
@@ -4776,7 +4795,7 @@
|
|
|
4776
4795
|
})(EmitterClickMode || (EmitterClickMode = {}));
|
|
4777
4796
|
|
|
4778
4797
|
async function loadEmittersPluginSimple(engine) {
|
|
4779
|
-
engine.checkVersion("4.0
|
|
4798
|
+
engine.checkVersion("4.1.0");
|
|
4780
4799
|
await engine.pluginManager.register(async (e) => {
|
|
4781
4800
|
const instancesManager = await getEmittersInstancesManager(e);
|
|
4782
4801
|
await addEmittersShapesManager(e);
|
|
@@ -4864,7 +4883,7 @@
|
|
|
4864
4883
|
}
|
|
4865
4884
|
|
|
4866
4885
|
async function loadEmittersShapeSquare(engine) {
|
|
4867
|
-
engine.checkVersion("4.0
|
|
4886
|
+
engine.checkVersion("4.1.0");
|
|
4868
4887
|
await engine.pluginManager.register((e) => {
|
|
4869
4888
|
ensureEmittersPluginLoaded(e);
|
|
4870
4889
|
e.pluginManager.addEmitterShapeGenerator?.("square", new EmittersSquareShapeGenerator());
|
|
@@ -4981,12 +5000,12 @@
|
|
|
4981
5000
|
|
|
4982
5001
|
const noTime = 0, identity$1 = 1, infiniteValue = -1;
|
|
4983
5002
|
class LifeUpdater {
|
|
4984
|
-
container;
|
|
5003
|
+
#container;
|
|
4985
5004
|
constructor(container) {
|
|
4986
|
-
this
|
|
5005
|
+
this.#container = container;
|
|
4987
5006
|
}
|
|
4988
5007
|
init(particle) {
|
|
4989
|
-
const container = this
|
|
5008
|
+
const container = this.#container, particlesOptions = particle.options, lifeOptions = particlesOptions.life;
|
|
4990
5009
|
if (!lifeOptions) {
|
|
4991
5010
|
return;
|
|
4992
5011
|
}
|
|
@@ -5025,12 +5044,12 @@
|
|
|
5025
5044
|
if (!this.isEnabled(particle) || !particle.life) {
|
|
5026
5045
|
return;
|
|
5027
5046
|
}
|
|
5028
|
-
updateLife(particle, delta, this
|
|
5047
|
+
updateLife(particle, delta, this.#container.canvas.size);
|
|
5029
5048
|
}
|
|
5030
5049
|
}
|
|
5031
5050
|
|
|
5032
5051
|
async function loadLifeUpdater(engine) {
|
|
5033
|
-
engine.checkVersion("4.0
|
|
5052
|
+
engine.checkVersion("4.1.0");
|
|
5034
5053
|
await engine.pluginManager.register(e => {
|
|
5035
5054
|
e.pluginManager.addParticleUpdater("life", container => {
|
|
5036
5055
|
return Promise.resolve(new LifeUpdater(container));
|
|
@@ -5056,7 +5075,7 @@
|
|
|
5056
5075
|
}
|
|
5057
5076
|
|
|
5058
5077
|
async function loadLineShape(engine) {
|
|
5059
|
-
engine.checkVersion("4.0
|
|
5078
|
+
engine.checkVersion("4.1.0");
|
|
5060
5079
|
await engine.pluginManager.register(e => {
|
|
5061
5080
|
e.pluginManager.addShape(["line"], () => Promise.resolve(new LineDrawer()));
|
|
5062
5081
|
});
|
|
@@ -5120,9 +5139,9 @@
|
|
|
5120
5139
|
|
|
5121
5140
|
const doublePIDeg = 360;
|
|
5122
5141
|
class RotateUpdater {
|
|
5123
|
-
container;
|
|
5142
|
+
#container;
|
|
5124
5143
|
constructor(container) {
|
|
5125
|
-
this
|
|
5144
|
+
this.#container = container;
|
|
5126
5145
|
}
|
|
5127
5146
|
init(particle) {
|
|
5128
5147
|
const rotateOptions = particle.options.rotate;
|
|
@@ -5154,7 +5173,7 @@
|
|
|
5154
5173
|
if (rotateAnimation.enable) {
|
|
5155
5174
|
particle.rotate.decay = identity$2 - getRangeValue(rotateAnimation.decay);
|
|
5156
5175
|
particle.rotate.velocity =
|
|
5157
|
-
(getRangeValue(rotateAnimation.speed) / doublePIDeg) * this
|
|
5176
|
+
(getRangeValue(rotateAnimation.speed) / doublePIDeg) * this.#container.retina.reduceFactor;
|
|
5158
5177
|
if (!rotateAnimation.sync) {
|
|
5159
5178
|
particle.rotate.velocity *= getRandom();
|
|
5160
5179
|
}
|
|
@@ -5188,7 +5207,7 @@
|
|
|
5188
5207
|
}
|
|
5189
5208
|
|
|
5190
5209
|
async function loadRotateUpdater(engine) {
|
|
5191
|
-
engine.checkVersion("4.0
|
|
5210
|
+
engine.checkVersion("4.1.0");
|
|
5192
5211
|
await engine.pluginManager.register(e => {
|
|
5193
5212
|
e.pluginManager.addParticleUpdater("rotate", container => {
|
|
5194
5213
|
return Promise.resolve(new RotateUpdater(container));
|
|
@@ -5539,9 +5558,9 @@
|
|
|
5539
5558
|
};
|
|
5540
5559
|
class SoundsPlugin {
|
|
5541
5560
|
id = "sounds";
|
|
5542
|
-
|
|
5561
|
+
#engine;
|
|
5543
5562
|
constructor(engine) {
|
|
5544
|
-
this
|
|
5563
|
+
this.#engine = engine;
|
|
5545
5564
|
const listenerOptions = {
|
|
5546
5565
|
capture: true,
|
|
5547
5566
|
once: true,
|
|
@@ -5551,7 +5570,7 @@
|
|
|
5551
5570
|
}
|
|
5552
5571
|
async getPlugin(container) {
|
|
5553
5572
|
const { SoundsPluginInstance } = await Promise.resolve().then(function () { return SoundsPluginInstance$1; });
|
|
5554
|
-
return new SoundsPluginInstance(container, this
|
|
5573
|
+
return new SoundsPluginInstance(container, this.#engine);
|
|
5555
5574
|
}
|
|
5556
5575
|
loadOptions(_container, options, source) {
|
|
5557
5576
|
if (!this.needsPlugin(options) && !this.needsPlugin(source)) {
|
|
@@ -5569,7 +5588,7 @@
|
|
|
5569
5588
|
}
|
|
5570
5589
|
|
|
5571
5590
|
async function loadSoundsPlugin(engine) {
|
|
5572
|
-
engine.checkVersion("4.0
|
|
5591
|
+
engine.checkVersion("4.1.0");
|
|
5573
5592
|
await engine.pluginManager.register(e => {
|
|
5574
5593
|
e.pluginManager.addPlugin(new SoundsPlugin(e));
|
|
5575
5594
|
});
|
|
@@ -5577,7 +5596,7 @@
|
|
|
5577
5596
|
|
|
5578
5597
|
let initPromise = null;
|
|
5579
5598
|
async function doInitPlugins(engine) {
|
|
5580
|
-
engine.checkVersion("4.0
|
|
5599
|
+
engine.checkVersion("4.1.0");
|
|
5581
5600
|
await engine.pluginManager.register(async (e) => {
|
|
5582
5601
|
const loadEmittersForFireworks = async (e) => {
|
|
5583
5602
|
await loadEmittersPluginSimple(e);
|
|
@@ -5624,7 +5643,7 @@
|
|
|
5624
5643
|
fireworks.init = async () => {
|
|
5625
5644
|
await initPlugins(tsParticles);
|
|
5626
5645
|
};
|
|
5627
|
-
fireworks.version = "4.0
|
|
5646
|
+
fireworks.version = "4.1.0";
|
|
5628
5647
|
globalThis.fireworks = fireworks;
|
|
5629
5648
|
|
|
5630
5649
|
const globalObject = globalThis;
|
|
@@ -5639,58 +5658,58 @@
|
|
|
5639
5658
|
}
|
|
5640
5659
|
}
|
|
5641
5660
|
class RenderManager {
|
|
5642
|
-
|
|
5643
|
-
|
|
5644
|
-
|
|
5645
|
-
|
|
5646
|
-
|
|
5647
|
-
|
|
5648
|
-
|
|
5649
|
-
|
|
5650
|
-
|
|
5651
|
-
|
|
5652
|
-
|
|
5653
|
-
|
|
5654
|
-
|
|
5655
|
-
|
|
5656
|
-
|
|
5657
|
-
|
|
5658
|
-
|
|
5659
|
-
|
|
5660
|
-
|
|
5661
|
-
|
|
5661
|
+
#canvasClearPlugins;
|
|
5662
|
+
#canvasManager;
|
|
5663
|
+
#canvasPaintPlugins;
|
|
5664
|
+
#clearDrawPlugins;
|
|
5665
|
+
#colorPlugins;
|
|
5666
|
+
#container;
|
|
5667
|
+
#context;
|
|
5668
|
+
#contextSettings;
|
|
5669
|
+
#drawParticlePlugins;
|
|
5670
|
+
#drawParticlesCleanupPlugins;
|
|
5671
|
+
#drawParticlesSetupPlugins;
|
|
5672
|
+
#drawPlugins;
|
|
5673
|
+
#drawSettingsCleanupPlugins;
|
|
5674
|
+
#drawSettingsSetupPlugins;
|
|
5675
|
+
#pluginManager;
|
|
5676
|
+
#postDrawUpdaters;
|
|
5677
|
+
#preDrawUpdaters;
|
|
5678
|
+
#reusableColorStyles = {};
|
|
5679
|
+
#reusablePluginColors = [undefined, undefined];
|
|
5680
|
+
#reusableTransform = {};
|
|
5662
5681
|
constructor(pluginManager, container, canvasManager) {
|
|
5663
|
-
this
|
|
5664
|
-
this
|
|
5665
|
-
this
|
|
5666
|
-
this
|
|
5667
|
-
this
|
|
5668
|
-
this
|
|
5669
|
-
this
|
|
5670
|
-
this
|
|
5671
|
-
this
|
|
5672
|
-
this
|
|
5673
|
-
this
|
|
5674
|
-
this
|
|
5675
|
-
this
|
|
5676
|
-
this
|
|
5677
|
-
this
|
|
5678
|
-
this
|
|
5682
|
+
this.#pluginManager = pluginManager;
|
|
5683
|
+
this.#container = container;
|
|
5684
|
+
this.#canvasManager = canvasManager;
|
|
5685
|
+
this.#context = null;
|
|
5686
|
+
this.#preDrawUpdaters = [];
|
|
5687
|
+
this.#postDrawUpdaters = [];
|
|
5688
|
+
this.#colorPlugins = [];
|
|
5689
|
+
this.#canvasClearPlugins = [];
|
|
5690
|
+
this.#canvasPaintPlugins = [];
|
|
5691
|
+
this.#clearDrawPlugins = [];
|
|
5692
|
+
this.#drawParticlePlugins = [];
|
|
5693
|
+
this.#drawParticlesCleanupPlugins = [];
|
|
5694
|
+
this.#drawParticlesSetupPlugins = [];
|
|
5695
|
+
this.#drawPlugins = [];
|
|
5696
|
+
this.#drawSettingsSetupPlugins = [];
|
|
5697
|
+
this.#drawSettingsCleanupPlugins = [];
|
|
5679
5698
|
}
|
|
5680
5699
|
get settings() {
|
|
5681
|
-
return this
|
|
5700
|
+
return this.#contextSettings;
|
|
5682
5701
|
}
|
|
5683
5702
|
canvasClear() {
|
|
5684
|
-
if (!this.
|
|
5703
|
+
if (!this.#container.actualOptions.clear) {
|
|
5685
5704
|
return;
|
|
5686
5705
|
}
|
|
5687
5706
|
this.draw(ctx => {
|
|
5688
|
-
clear(ctx, this.
|
|
5707
|
+
clear(ctx, this.#canvasManager.size);
|
|
5689
5708
|
});
|
|
5690
5709
|
}
|
|
5691
5710
|
clear() {
|
|
5692
5711
|
let pluginHandled = false;
|
|
5693
|
-
for (const plugin of this
|
|
5712
|
+
for (const plugin of this.#canvasClearPlugins) {
|
|
5694
5713
|
pluginHandled = plugin.canvasClear?.() ?? false;
|
|
5695
5714
|
if (pluginHandled) {
|
|
5696
5715
|
break;
|
|
@@ -5703,21 +5722,21 @@
|
|
|
5703
5722
|
}
|
|
5704
5723
|
destroy() {
|
|
5705
5724
|
this.stop();
|
|
5706
|
-
this
|
|
5707
|
-
this
|
|
5708
|
-
this
|
|
5709
|
-
this
|
|
5710
|
-
this
|
|
5711
|
-
this
|
|
5712
|
-
this
|
|
5713
|
-
this
|
|
5714
|
-
this
|
|
5715
|
-
this
|
|
5716
|
-
this
|
|
5717
|
-
this
|
|
5725
|
+
this.#preDrawUpdaters = [];
|
|
5726
|
+
this.#postDrawUpdaters = [];
|
|
5727
|
+
this.#colorPlugins = [];
|
|
5728
|
+
this.#canvasClearPlugins = [];
|
|
5729
|
+
this.#canvasPaintPlugins = [];
|
|
5730
|
+
this.#clearDrawPlugins = [];
|
|
5731
|
+
this.#drawParticlePlugins = [];
|
|
5732
|
+
this.#drawParticlesCleanupPlugins = [];
|
|
5733
|
+
this.#drawParticlesSetupPlugins = [];
|
|
5734
|
+
this.#drawPlugins = [];
|
|
5735
|
+
this.#drawSettingsSetupPlugins = [];
|
|
5736
|
+
this.#drawSettingsCleanupPlugins = [];
|
|
5718
5737
|
}
|
|
5719
5738
|
draw(cb) {
|
|
5720
|
-
const ctx = this
|
|
5739
|
+
const ctx = this.#context;
|
|
5721
5740
|
if (!ctx) {
|
|
5722
5741
|
return;
|
|
5723
5742
|
}
|
|
@@ -5732,21 +5751,21 @@
|
|
|
5732
5751
|
return;
|
|
5733
5752
|
}
|
|
5734
5753
|
const pfColor = particle.getFillColor(), psColor = particle.getStrokeColor();
|
|
5735
|
-
let [fColor, sColor] = this
|
|
5754
|
+
let [fColor, sColor] = this.#getPluginParticleColors(particle);
|
|
5736
5755
|
fColor ??= pfColor;
|
|
5737
5756
|
sColor ??= psColor;
|
|
5738
5757
|
if (!fColor && !sColor) {
|
|
5739
5758
|
return;
|
|
5740
5759
|
}
|
|
5741
|
-
const container = this
|
|
5760
|
+
const container = this.#container, zIndexOptions = particle.options.zIndex, zIndexFactor = zIndexFactorOffset - particle.zIndexFactor, { fillOpacity, opacity, strokeOpacity } = particle.getOpacity(), transform = this.#reusableTransform, colorStyles = this.#reusableColorStyles, fill = fColor ? getStyleFromHsl(fColor, container.hdr, fillOpacity * opacity) : undefined, stroke = sColor ? getStyleFromHsl(sColor, container.hdr, strokeOpacity * opacity) : fill;
|
|
5742
5761
|
transform.a = transform.b = transform.c = transform.d = undefined;
|
|
5743
5762
|
colorStyles.fill = fill;
|
|
5744
5763
|
colorStyles.stroke = stroke;
|
|
5745
5764
|
this.draw((context) => {
|
|
5746
|
-
for (const plugin of this
|
|
5765
|
+
for (const plugin of this.#drawParticlesSetupPlugins) {
|
|
5747
5766
|
plugin.drawParticleSetup?.(context, particle, delta);
|
|
5748
5767
|
}
|
|
5749
|
-
this
|
|
5768
|
+
this.#applyPreDrawUpdaters(context, particle, radius, opacity, colorStyles, transform);
|
|
5750
5769
|
drawParticle({
|
|
5751
5770
|
container,
|
|
5752
5771
|
context,
|
|
@@ -5757,35 +5776,35 @@
|
|
|
5757
5776
|
opacity: opacity,
|
|
5758
5777
|
transform,
|
|
5759
5778
|
});
|
|
5760
|
-
this
|
|
5761
|
-
for (const plugin of this
|
|
5779
|
+
this.#applyPostDrawUpdaters(particle);
|
|
5780
|
+
for (const plugin of this.#drawParticlesCleanupPlugins) {
|
|
5762
5781
|
plugin.drawParticleCleanup?.(context, particle, delta);
|
|
5763
5782
|
}
|
|
5764
5783
|
});
|
|
5765
5784
|
}
|
|
5766
5785
|
drawParticlePlugins(particle, delta) {
|
|
5767
5786
|
this.draw(ctx => {
|
|
5768
|
-
for (const plugin of this
|
|
5787
|
+
for (const plugin of this.#drawParticlePlugins) {
|
|
5769
5788
|
drawParticlePlugin(ctx, plugin, particle, delta);
|
|
5770
5789
|
}
|
|
5771
5790
|
});
|
|
5772
5791
|
}
|
|
5773
5792
|
drawParticles(delta) {
|
|
5774
|
-
const { particles } = this
|
|
5793
|
+
const { particles } = this.#container;
|
|
5775
5794
|
this.clear();
|
|
5776
5795
|
particles.update(delta);
|
|
5777
5796
|
this.draw(ctx => {
|
|
5778
|
-
for (const plugin of this
|
|
5797
|
+
for (const plugin of this.#drawSettingsSetupPlugins) {
|
|
5779
5798
|
plugin.drawSettingsSetup?.(ctx, delta);
|
|
5780
5799
|
}
|
|
5781
|
-
for (const plugin of this
|
|
5800
|
+
for (const plugin of this.#drawPlugins) {
|
|
5782
5801
|
plugin.draw?.(ctx, delta);
|
|
5783
5802
|
}
|
|
5784
5803
|
particles.drawParticles(delta);
|
|
5785
|
-
for (const plugin of this
|
|
5804
|
+
for (const plugin of this.#clearDrawPlugins) {
|
|
5786
5805
|
plugin.clearDraw?.(ctx, delta);
|
|
5787
5806
|
}
|
|
5788
|
-
for (const plugin of this
|
|
5807
|
+
for (const plugin of this.#drawSettingsCleanupPlugins) {
|
|
5789
5808
|
plugin.drawSettingsCleanup?.(ctx, delta);
|
|
5790
5809
|
}
|
|
5791
5810
|
});
|
|
@@ -5796,64 +5815,64 @@
|
|
|
5796
5815
|
this.paint();
|
|
5797
5816
|
}
|
|
5798
5817
|
initPlugins() {
|
|
5799
|
-
this
|
|
5800
|
-
this
|
|
5801
|
-
this
|
|
5802
|
-
this
|
|
5803
|
-
this
|
|
5804
|
-
this
|
|
5805
|
-
this
|
|
5806
|
-
this
|
|
5807
|
-
this
|
|
5808
|
-
this
|
|
5809
|
-
for (const plugin of this.
|
|
5818
|
+
this.#colorPlugins = [];
|
|
5819
|
+
this.#canvasClearPlugins = [];
|
|
5820
|
+
this.#canvasPaintPlugins = [];
|
|
5821
|
+
this.#clearDrawPlugins = [];
|
|
5822
|
+
this.#drawParticlePlugins = [];
|
|
5823
|
+
this.#drawParticlesSetupPlugins = [];
|
|
5824
|
+
this.#drawParticlesCleanupPlugins = [];
|
|
5825
|
+
this.#drawPlugins = [];
|
|
5826
|
+
this.#drawSettingsSetupPlugins = [];
|
|
5827
|
+
this.#drawSettingsCleanupPlugins = [];
|
|
5828
|
+
for (const plugin of this.#container.plugins) {
|
|
5810
5829
|
if (plugin.particleFillColor ?? plugin.particleStrokeColor) {
|
|
5811
|
-
this.
|
|
5830
|
+
this.#colorPlugins.push(plugin);
|
|
5812
5831
|
}
|
|
5813
5832
|
if (plugin.canvasClear) {
|
|
5814
|
-
this.
|
|
5833
|
+
this.#canvasClearPlugins.push(plugin);
|
|
5815
5834
|
}
|
|
5816
5835
|
if (plugin.canvasPaint) {
|
|
5817
|
-
this.
|
|
5836
|
+
this.#canvasPaintPlugins.push(plugin);
|
|
5818
5837
|
}
|
|
5819
5838
|
if (plugin.drawParticle) {
|
|
5820
|
-
this.
|
|
5839
|
+
this.#drawParticlePlugins.push(plugin);
|
|
5821
5840
|
}
|
|
5822
5841
|
if (plugin.drawParticleSetup) {
|
|
5823
|
-
this.
|
|
5842
|
+
this.#drawParticlesSetupPlugins.push(plugin);
|
|
5824
5843
|
}
|
|
5825
5844
|
if (plugin.drawParticleCleanup) {
|
|
5826
|
-
this.
|
|
5845
|
+
this.#drawParticlesCleanupPlugins.push(plugin);
|
|
5827
5846
|
}
|
|
5828
5847
|
if (plugin.draw) {
|
|
5829
|
-
this.
|
|
5848
|
+
this.#drawPlugins.push(plugin);
|
|
5830
5849
|
}
|
|
5831
5850
|
if (plugin.drawSettingsSetup) {
|
|
5832
|
-
this.
|
|
5851
|
+
this.#drawSettingsSetupPlugins.push(plugin);
|
|
5833
5852
|
}
|
|
5834
5853
|
if (plugin.drawSettingsCleanup) {
|
|
5835
|
-
this.
|
|
5854
|
+
this.#drawSettingsCleanupPlugins.push(plugin);
|
|
5836
5855
|
}
|
|
5837
5856
|
if (plugin.clearDraw) {
|
|
5838
|
-
this.
|
|
5857
|
+
this.#clearDrawPlugins.push(plugin);
|
|
5839
5858
|
}
|
|
5840
5859
|
}
|
|
5841
5860
|
}
|
|
5842
5861
|
initUpdaters() {
|
|
5843
|
-
this
|
|
5844
|
-
this
|
|
5845
|
-
for (const updater of this.
|
|
5862
|
+
this.#preDrawUpdaters = [];
|
|
5863
|
+
this.#postDrawUpdaters = [];
|
|
5864
|
+
for (const updater of this.#container.particleUpdaters) {
|
|
5846
5865
|
if (updater.afterDraw) {
|
|
5847
|
-
this.
|
|
5866
|
+
this.#postDrawUpdaters.push(updater);
|
|
5848
5867
|
}
|
|
5849
5868
|
if (updater.getColorStyles ?? updater.getTransformValues ?? updater.beforeDraw) {
|
|
5850
|
-
this.
|
|
5869
|
+
this.#preDrawUpdaters.push(updater);
|
|
5851
5870
|
}
|
|
5852
5871
|
}
|
|
5853
5872
|
}
|
|
5854
5873
|
paint() {
|
|
5855
5874
|
let handled = false;
|
|
5856
|
-
for (const plugin of this
|
|
5875
|
+
for (const plugin of this.#canvasPaintPlugins) {
|
|
5857
5876
|
handled = plugin.canvasPaint?.() ?? false;
|
|
5858
5877
|
if (handled) {
|
|
5859
5878
|
break;
|
|
@@ -5866,35 +5885,35 @@
|
|
|
5866
5885
|
}
|
|
5867
5886
|
paintBase(baseColor) {
|
|
5868
5887
|
this.draw(ctx => {
|
|
5869
|
-
paintBase(ctx, this.
|
|
5888
|
+
paintBase(ctx, this.#canvasManager.size, baseColor);
|
|
5870
5889
|
});
|
|
5871
5890
|
}
|
|
5872
5891
|
paintImage(image, opacity) {
|
|
5873
5892
|
this.draw(ctx => {
|
|
5874
|
-
paintImage(ctx, this.
|
|
5893
|
+
paintImage(ctx, this.#canvasManager.size, image, opacity);
|
|
5875
5894
|
});
|
|
5876
5895
|
}
|
|
5877
5896
|
setContext(context) {
|
|
5878
|
-
this
|
|
5879
|
-
if (this
|
|
5880
|
-
this.
|
|
5897
|
+
this.#context = context;
|
|
5898
|
+
if (this.#context) {
|
|
5899
|
+
this.#context.globalCompositeOperation = defaultCompositeValue;
|
|
5881
5900
|
}
|
|
5882
5901
|
}
|
|
5883
5902
|
setContextSettings(settings) {
|
|
5884
|
-
this
|
|
5903
|
+
this.#contextSettings = settings;
|
|
5885
5904
|
}
|
|
5886
5905
|
stop() {
|
|
5887
5906
|
this.draw(ctx => {
|
|
5888
|
-
clear(ctx, this.
|
|
5907
|
+
clear(ctx, this.#canvasManager.size);
|
|
5889
5908
|
});
|
|
5890
5909
|
}
|
|
5891
|
-
|
|
5892
|
-
for (const updater of this
|
|
5910
|
+
#applyPostDrawUpdaters = particle => {
|
|
5911
|
+
for (const updater of this.#postDrawUpdaters) {
|
|
5893
5912
|
updater.afterDraw?.(particle);
|
|
5894
5913
|
}
|
|
5895
5914
|
};
|
|
5896
|
-
|
|
5897
|
-
for (const updater of this
|
|
5915
|
+
#applyPreDrawUpdaters = (ctx, particle, radius, zOpacity, colorStyles, transform) => {
|
|
5916
|
+
for (const updater of this.#preDrawUpdaters) {
|
|
5898
5917
|
if (updater.getColorStyles) {
|
|
5899
5918
|
const { fill, stroke } = updater.getColorStyles(particle, ctx, radius, zOpacity);
|
|
5900
5919
|
if (fill) {
|
|
@@ -5913,22 +5932,22 @@
|
|
|
5913
5932
|
updater.beforeDraw?.(particle);
|
|
5914
5933
|
}
|
|
5915
5934
|
};
|
|
5916
|
-
|
|
5935
|
+
#getPluginParticleColors = particle => {
|
|
5917
5936
|
let fColor, sColor;
|
|
5918
|
-
for (const plugin of this
|
|
5937
|
+
for (const plugin of this.#colorPlugins) {
|
|
5919
5938
|
if (!fColor && plugin.particleFillColor) {
|
|
5920
|
-
fColor = rangeColorToHsl(this
|
|
5939
|
+
fColor = rangeColorToHsl(this.#pluginManager, plugin.particleFillColor(particle));
|
|
5921
5940
|
}
|
|
5922
5941
|
if (!sColor && plugin.particleStrokeColor) {
|
|
5923
|
-
sColor = rangeColorToHsl(this
|
|
5942
|
+
sColor = rangeColorToHsl(this.#pluginManager, plugin.particleStrokeColor(particle));
|
|
5924
5943
|
}
|
|
5925
5944
|
if (fColor && sColor) {
|
|
5926
5945
|
break;
|
|
5927
5946
|
}
|
|
5928
5947
|
}
|
|
5929
|
-
this
|
|
5930
|
-
this
|
|
5931
|
-
return this
|
|
5948
|
+
this.#reusablePluginColors[fColorIndex] = fColor;
|
|
5949
|
+
this.#reusablePluginColors[sColorIndex] = sColor;
|
|
5950
|
+
return this.#reusablePluginColors;
|
|
5932
5951
|
};
|
|
5933
5952
|
}
|
|
5934
5953
|
|
|
@@ -5986,53 +6005,53 @@
|
|
|
5986
6005
|
renderCanvas;
|
|
5987
6006
|
size;
|
|
5988
6007
|
zoom = defaultZoom;
|
|
5989
|
-
|
|
5990
|
-
|
|
5991
|
-
|
|
5992
|
-
|
|
5993
|
-
|
|
5994
|
-
|
|
5995
|
-
|
|
5996
|
-
|
|
5997
|
-
|
|
6008
|
+
#container;
|
|
6009
|
+
#generated;
|
|
6010
|
+
#mutationObserver;
|
|
6011
|
+
#originalStyle;
|
|
6012
|
+
#pluginManager;
|
|
6013
|
+
#pointerEvents;
|
|
6014
|
+
#resizePlugins;
|
|
6015
|
+
#standardSize;
|
|
6016
|
+
#zoomCenter;
|
|
5998
6017
|
constructor(pluginManager, container) {
|
|
5999
|
-
this
|
|
6000
|
-
this
|
|
6018
|
+
this.#pluginManager = pluginManager;
|
|
6019
|
+
this.#container = container;
|
|
6001
6020
|
this.render = new RenderManager(pluginManager, container, this);
|
|
6002
|
-
this
|
|
6021
|
+
this.#standardSize = {
|
|
6003
6022
|
height: 0,
|
|
6004
6023
|
width: 0,
|
|
6005
6024
|
};
|
|
6006
|
-
const pxRatio = container.retina.pixelRatio, stdSize = this
|
|
6025
|
+
const pxRatio = container.retina.pixelRatio, stdSize = this.#standardSize;
|
|
6007
6026
|
this.size = {
|
|
6008
6027
|
height: stdSize.height * pxRatio,
|
|
6009
6028
|
width: stdSize.width * pxRatio,
|
|
6010
6029
|
};
|
|
6011
|
-
this
|
|
6012
|
-
this
|
|
6013
|
-
this
|
|
6030
|
+
this.#generated = false;
|
|
6031
|
+
this.#resizePlugins = [];
|
|
6032
|
+
this.#pointerEvents = "none";
|
|
6014
6033
|
}
|
|
6015
|
-
get
|
|
6016
|
-
return this.
|
|
6034
|
+
get #fullScreen() {
|
|
6035
|
+
return this.#container.actualOptions.fullScreen.enable;
|
|
6017
6036
|
}
|
|
6018
6037
|
destroy() {
|
|
6019
6038
|
this.stop();
|
|
6020
|
-
if (this
|
|
6039
|
+
if (this.#generated) {
|
|
6021
6040
|
const element = this.domElement;
|
|
6022
6041
|
element?.remove();
|
|
6023
6042
|
this.domElement = undefined;
|
|
6024
6043
|
this.renderCanvas = undefined;
|
|
6025
6044
|
}
|
|
6026
6045
|
else {
|
|
6027
|
-
this
|
|
6046
|
+
this.#resetOriginalStyle();
|
|
6028
6047
|
}
|
|
6029
6048
|
this.render.destroy();
|
|
6030
|
-
this
|
|
6049
|
+
this.#resizePlugins = [];
|
|
6031
6050
|
}
|
|
6032
6051
|
getZoomCenter() {
|
|
6033
|
-
const pxRatio = this.
|
|
6034
|
-
if (this
|
|
6035
|
-
return this
|
|
6052
|
+
const pxRatio = this.#container.retina.pixelRatio, { width, height } = this.size;
|
|
6053
|
+
if (this.#zoomCenter) {
|
|
6054
|
+
return this.#zoomCenter;
|
|
6036
6055
|
}
|
|
6037
6056
|
return {
|
|
6038
6057
|
x: (width * half) / pxRatio,
|
|
@@ -6040,20 +6059,20 @@
|
|
|
6040
6059
|
};
|
|
6041
6060
|
}
|
|
6042
6061
|
init() {
|
|
6043
|
-
this
|
|
6062
|
+
this.#safeMutationObserver(obs => {
|
|
6044
6063
|
obs.disconnect();
|
|
6045
6064
|
});
|
|
6046
|
-
this
|
|
6065
|
+
this.#mutationObserver = safeMutationObserver(records => {
|
|
6047
6066
|
for (const record of records) {
|
|
6048
6067
|
if (record.type === "attributes" && record.attributeName === "style") {
|
|
6049
|
-
this
|
|
6068
|
+
this.#repairStyle();
|
|
6050
6069
|
}
|
|
6051
6070
|
}
|
|
6052
6071
|
});
|
|
6053
6072
|
this.resize();
|
|
6054
|
-
this
|
|
6073
|
+
this.#initStyle();
|
|
6055
6074
|
this.initBackground();
|
|
6056
|
-
this
|
|
6075
|
+
this.#safeMutationObserver(obs => {
|
|
6057
6076
|
const element = this.domElement;
|
|
6058
6077
|
if (!element || !(element instanceof Node)) {
|
|
6059
6078
|
return;
|
|
@@ -6064,13 +6083,13 @@
|
|
|
6064
6083
|
this.render.init();
|
|
6065
6084
|
}
|
|
6066
6085
|
initBackground() {
|
|
6067
|
-
const
|
|
6086
|
+
const container = this.#container, options = container.actualOptions, background = options.background, element = this.domElement;
|
|
6068
6087
|
if (!element) {
|
|
6069
6088
|
return;
|
|
6070
6089
|
}
|
|
6071
|
-
const elementStyle = element.style, color = rangeColorToRgb(this
|
|
6090
|
+
const elementStyle = element.style, color = rangeColorToRgb(this.#pluginManager, background.color);
|
|
6072
6091
|
if (color) {
|
|
6073
|
-
elementStyle.backgroundColor = getStyleFromRgb(color,
|
|
6092
|
+
elementStyle.backgroundColor = getStyleFromRgb(color, container.hdr, background.opacity);
|
|
6074
6093
|
}
|
|
6075
6094
|
else {
|
|
6076
6095
|
elementStyle.backgroundColor = "";
|
|
@@ -6081,27 +6100,27 @@
|
|
|
6081
6100
|
elementStyle.backgroundSize = background.size || "";
|
|
6082
6101
|
}
|
|
6083
6102
|
initPlugins() {
|
|
6084
|
-
this
|
|
6085
|
-
for (const plugin of this.
|
|
6103
|
+
this.#resizePlugins = [];
|
|
6104
|
+
for (const plugin of this.#container.plugins) {
|
|
6086
6105
|
if (plugin.resize) {
|
|
6087
|
-
this.
|
|
6106
|
+
this.#resizePlugins.push(plugin);
|
|
6088
6107
|
}
|
|
6089
6108
|
}
|
|
6090
6109
|
}
|
|
6091
6110
|
loadCanvas(canvas) {
|
|
6092
|
-
if (this
|
|
6111
|
+
if (this.#generated && this.domElement) {
|
|
6093
6112
|
this.domElement.remove();
|
|
6094
6113
|
}
|
|
6095
|
-
const container = this
|
|
6114
|
+
const container = this.#container, domCanvas = isHtmlCanvasElement(canvas) ? canvas : undefined;
|
|
6096
6115
|
this.domElement = domCanvas;
|
|
6097
|
-
this
|
|
6116
|
+
this.#generated = domCanvas ? domCanvas.dataset[generatedAttribute] === "true" : false;
|
|
6098
6117
|
this.renderCanvas = domCanvas ? getTransferredCanvas(domCanvas) : canvas;
|
|
6099
6118
|
const domElement = this.domElement;
|
|
6100
6119
|
if (domElement) {
|
|
6101
6120
|
domElement.ariaHidden = "true";
|
|
6102
|
-
this
|
|
6121
|
+
this.#originalStyle = cloneStyle(domElement.style);
|
|
6103
6122
|
}
|
|
6104
|
-
const standardSize = this
|
|
6123
|
+
const standardSize = this.#standardSize, renderCanvas = this.renderCanvas;
|
|
6105
6124
|
if (domElement) {
|
|
6106
6125
|
standardSize.height = domElement.offsetHeight;
|
|
6107
6126
|
standardSize.width = domElement.offsetWidth;
|
|
@@ -6110,7 +6129,7 @@
|
|
|
6110
6129
|
standardSize.height = renderCanvas.height;
|
|
6111
6130
|
standardSize.width = renderCanvas.width;
|
|
6112
6131
|
}
|
|
6113
|
-
const pxRatio = this.
|
|
6132
|
+
const pxRatio = this.#container.retina.pixelRatio, retinaSize = this.size;
|
|
6114
6133
|
renderCanvas.height = retinaSize.height = standardSize.height * pxRatio;
|
|
6115
6134
|
renderCanvas.width = retinaSize.width = standardSize.width * pxRatio;
|
|
6116
6135
|
const canSupportHdrQuery = safeMatchMedia("(color-gamut: p3)");
|
|
@@ -6121,12 +6140,12 @@
|
|
|
6121
6140
|
willReadFrequently: false,
|
|
6122
6141
|
});
|
|
6123
6142
|
this.render.setContext(renderCanvas.getContext("2d", this.render.settings));
|
|
6124
|
-
this
|
|
6143
|
+
this.#safeMutationObserver(obs => {
|
|
6125
6144
|
obs.disconnect();
|
|
6126
6145
|
});
|
|
6127
6146
|
container.retina.init();
|
|
6128
6147
|
this.initBackground();
|
|
6129
|
-
this
|
|
6148
|
+
this.#safeMutationObserver(obs => {
|
|
6130
6149
|
const element = this.domElement;
|
|
6131
6150
|
if (!element || !(element instanceof Node)) {
|
|
6132
6151
|
return;
|
|
@@ -6139,11 +6158,11 @@
|
|
|
6139
6158
|
if (!element) {
|
|
6140
6159
|
return false;
|
|
6141
6160
|
}
|
|
6142
|
-
const container = this
|
|
6161
|
+
const container = this.#container, renderCanvas = this.renderCanvas;
|
|
6143
6162
|
if (renderCanvas === undefined) {
|
|
6144
6163
|
return false;
|
|
6145
6164
|
}
|
|
6146
|
-
const currentSize = container.canvas
|
|
6165
|
+
const currentSize = container.canvas.#standardSize, newSize = {
|
|
6147
6166
|
width: element.offsetWidth,
|
|
6148
6167
|
height: element.offsetHeight,
|
|
6149
6168
|
}, pxRatio = container.retina.pixelRatio, retinaSize = {
|
|
@@ -6162,7 +6181,7 @@
|
|
|
6162
6181
|
const canvasSize = this.size;
|
|
6163
6182
|
renderCanvas.width = canvasSize.width = retinaSize.width;
|
|
6164
6183
|
renderCanvas.height = canvasSize.height = retinaSize.height;
|
|
6165
|
-
if (this.
|
|
6184
|
+
if (this.#container.started) {
|
|
6166
6185
|
container.particles.setResizeFactor({
|
|
6167
6186
|
width: currentSize.width / oldSize.width,
|
|
6168
6187
|
height: currentSize.height / oldSize.height,
|
|
@@ -6175,46 +6194,46 @@
|
|
|
6175
6194
|
if (!element) {
|
|
6176
6195
|
return;
|
|
6177
6196
|
}
|
|
6178
|
-
this
|
|
6179
|
-
this
|
|
6197
|
+
this.#pointerEvents = type;
|
|
6198
|
+
this.#repairStyle();
|
|
6180
6199
|
}
|
|
6181
6200
|
setZoom(zoomLevel, center) {
|
|
6182
6201
|
this.zoom = zoomLevel;
|
|
6183
|
-
this
|
|
6202
|
+
this.#zoomCenter = center;
|
|
6184
6203
|
}
|
|
6185
6204
|
stop() {
|
|
6186
|
-
this
|
|
6205
|
+
this.#safeMutationObserver(obs => {
|
|
6187
6206
|
obs.disconnect();
|
|
6188
6207
|
});
|
|
6189
|
-
this
|
|
6208
|
+
this.#mutationObserver = undefined;
|
|
6190
6209
|
this.render.stop();
|
|
6191
6210
|
}
|
|
6192
6211
|
async windowResize() {
|
|
6193
6212
|
if (!this.domElement || !this.resize()) {
|
|
6194
6213
|
return;
|
|
6195
6214
|
}
|
|
6196
|
-
const container = this
|
|
6215
|
+
const container = this.#container, needsRefresh = container.updateActualOptions();
|
|
6197
6216
|
container.particles.setDensity();
|
|
6198
|
-
this
|
|
6217
|
+
this.#applyResizePlugins();
|
|
6199
6218
|
if (needsRefresh) {
|
|
6200
6219
|
await container.refresh();
|
|
6201
6220
|
}
|
|
6202
6221
|
}
|
|
6203
|
-
|
|
6204
|
-
for (const plugin of this
|
|
6222
|
+
#applyResizePlugins = () => {
|
|
6223
|
+
for (const plugin of this.#resizePlugins) {
|
|
6205
6224
|
plugin.resize?.();
|
|
6206
6225
|
}
|
|
6207
6226
|
};
|
|
6208
|
-
|
|
6209
|
-
const element = this.domElement, options = this.
|
|
6227
|
+
#initStyle = () => {
|
|
6228
|
+
const element = this.domElement, options = this.#container.actualOptions;
|
|
6210
6229
|
if (!element) {
|
|
6211
6230
|
return;
|
|
6212
6231
|
}
|
|
6213
|
-
if (this
|
|
6214
|
-
this
|
|
6232
|
+
if (this.#fullScreen) {
|
|
6233
|
+
this.#setFullScreenStyle();
|
|
6215
6234
|
}
|
|
6216
6235
|
else {
|
|
6217
|
-
this
|
|
6236
|
+
this.#resetOriginalStyle();
|
|
6218
6237
|
}
|
|
6219
6238
|
for (const key in options.style) {
|
|
6220
6239
|
if (!key || !(key in options.style)) {
|
|
@@ -6227,72 +6246,72 @@
|
|
|
6227
6246
|
element.style.setProperty(key, value, "important");
|
|
6228
6247
|
}
|
|
6229
6248
|
};
|
|
6230
|
-
|
|
6249
|
+
#repairStyle = () => {
|
|
6231
6250
|
const element = this.domElement;
|
|
6232
6251
|
if (!element) {
|
|
6233
6252
|
return;
|
|
6234
6253
|
}
|
|
6235
|
-
this
|
|
6254
|
+
this.#safeMutationObserver(observer => {
|
|
6236
6255
|
observer.disconnect();
|
|
6237
6256
|
});
|
|
6238
|
-
this
|
|
6257
|
+
this.#initStyle();
|
|
6239
6258
|
this.initBackground();
|
|
6240
|
-
const pointerEvents = this
|
|
6259
|
+
const pointerEvents = this.#pointerEvents;
|
|
6241
6260
|
element.style.pointerEvents = pointerEvents;
|
|
6242
6261
|
element.style.setProperty("pointer-events", pointerEvents);
|
|
6243
|
-
this
|
|
6262
|
+
this.#safeMutationObserver(observer => {
|
|
6244
6263
|
if (!(element instanceof Node)) {
|
|
6245
6264
|
return;
|
|
6246
6265
|
}
|
|
6247
6266
|
observer.observe(element, { attributes: true });
|
|
6248
6267
|
});
|
|
6249
6268
|
};
|
|
6250
|
-
|
|
6251
|
-
const element = this.domElement, originalStyle = this
|
|
6269
|
+
#resetOriginalStyle = () => {
|
|
6270
|
+
const element = this.domElement, originalStyle = this.#originalStyle;
|
|
6252
6271
|
if (!element || !originalStyle) {
|
|
6253
6272
|
return;
|
|
6254
6273
|
}
|
|
6255
6274
|
setStyle(element, originalStyle, true);
|
|
6256
6275
|
};
|
|
6257
|
-
|
|
6258
|
-
if (!this
|
|
6276
|
+
#safeMutationObserver = callback => {
|
|
6277
|
+
if (!this.#mutationObserver) {
|
|
6259
6278
|
return;
|
|
6260
6279
|
}
|
|
6261
|
-
callback(this
|
|
6280
|
+
callback(this.#mutationObserver);
|
|
6262
6281
|
};
|
|
6263
|
-
|
|
6282
|
+
#setFullScreenStyle = () => {
|
|
6264
6283
|
const element = this.domElement;
|
|
6265
6284
|
if (!element) {
|
|
6266
6285
|
return;
|
|
6267
6286
|
}
|
|
6268
|
-
setStyle(element, getFullScreenStyle(this.
|
|
6287
|
+
setStyle(element, getFullScreenStyle(this.#container.actualOptions.fullScreen.zIndex), true);
|
|
6269
6288
|
};
|
|
6270
6289
|
}
|
|
6271
6290
|
|
|
6272
6291
|
class EventListeners {
|
|
6273
|
-
container;
|
|
6274
|
-
|
|
6275
|
-
|
|
6276
|
-
|
|
6292
|
+
#container;
|
|
6293
|
+
#handlers;
|
|
6294
|
+
#resizeObserver;
|
|
6295
|
+
#resizeTimeout;
|
|
6277
6296
|
constructor(container) {
|
|
6278
|
-
this
|
|
6279
|
-
this
|
|
6297
|
+
this.#container = container;
|
|
6298
|
+
this.#handlers = {
|
|
6280
6299
|
visibilityChange: () => {
|
|
6281
|
-
this
|
|
6300
|
+
this.#handleVisibilityChange();
|
|
6282
6301
|
},
|
|
6283
6302
|
resize: () => {
|
|
6284
|
-
this
|
|
6303
|
+
this.#handleWindowResize();
|
|
6285
6304
|
},
|
|
6286
6305
|
};
|
|
6287
6306
|
}
|
|
6288
6307
|
addListeners() {
|
|
6289
|
-
this
|
|
6308
|
+
this.#manageListeners(true);
|
|
6290
6309
|
}
|
|
6291
6310
|
removeListeners() {
|
|
6292
|
-
this
|
|
6311
|
+
this.#manageListeners(false);
|
|
6293
6312
|
}
|
|
6294
|
-
|
|
6295
|
-
const container = this
|
|
6313
|
+
#handleVisibilityChange = () => {
|
|
6314
|
+
const container = this.#container, options = container.actualOptions;
|
|
6296
6315
|
if (!options.pauseOnBlur) {
|
|
6297
6316
|
return;
|
|
6298
6317
|
}
|
|
@@ -6310,24 +6329,24 @@
|
|
|
6310
6329
|
}
|
|
6311
6330
|
}
|
|
6312
6331
|
};
|
|
6313
|
-
|
|
6314
|
-
if (this
|
|
6315
|
-
clearTimeout(this
|
|
6316
|
-
|
|
6332
|
+
#handleWindowResize = () => {
|
|
6333
|
+
if (this.#resizeTimeout) {
|
|
6334
|
+
clearTimeout(this.#resizeTimeout);
|
|
6335
|
+
this.#resizeTimeout = undefined;
|
|
6317
6336
|
}
|
|
6318
6337
|
const handleResize = async () => {
|
|
6319
|
-
const canvas = this
|
|
6338
|
+
const canvas = this.#container.canvas;
|
|
6320
6339
|
await canvas.windowResize();
|
|
6321
6340
|
};
|
|
6322
|
-
this
|
|
6341
|
+
this.#resizeTimeout = setTimeout(() => void handleResize(), this.#container.actualOptions.resize.delay * millisecondsToSeconds);
|
|
6323
6342
|
};
|
|
6324
|
-
|
|
6325
|
-
const handlers = this
|
|
6326
|
-
this
|
|
6343
|
+
#manageListeners = add => {
|
|
6344
|
+
const handlers = this.#handlers;
|
|
6345
|
+
this.#manageResize(add);
|
|
6327
6346
|
manageListener(document, visibilityChangeEvent, handlers.visibilityChange, add, false);
|
|
6328
6347
|
};
|
|
6329
|
-
|
|
6330
|
-
const handlers = this
|
|
6348
|
+
#manageResize = add => {
|
|
6349
|
+
const handlers = this.#handlers, container = this.#container, options = container.actualOptions;
|
|
6331
6350
|
if (!options.resize.enable) {
|
|
6332
6351
|
return;
|
|
6333
6352
|
}
|
|
@@ -6336,22 +6355,22 @@
|
|
|
6336
6355
|
return;
|
|
6337
6356
|
}
|
|
6338
6357
|
const canvasEl = container.canvas.domElement;
|
|
6339
|
-
if (this
|
|
6358
|
+
if (this.#resizeObserver && !add) {
|
|
6340
6359
|
if (canvasEl) {
|
|
6341
|
-
this.
|
|
6360
|
+
this.#resizeObserver.unobserve(canvasEl);
|
|
6342
6361
|
}
|
|
6343
|
-
this.
|
|
6344
|
-
|
|
6362
|
+
this.#resizeObserver.disconnect();
|
|
6363
|
+
this.#resizeObserver = undefined;
|
|
6345
6364
|
}
|
|
6346
|
-
else if (!this
|
|
6347
|
-
this
|
|
6365
|
+
else if (!this.#resizeObserver && add && canvasEl) {
|
|
6366
|
+
this.#resizeObserver = new ResizeObserver((entries) => {
|
|
6348
6367
|
const entry = entries.find(e => e.target === canvasEl);
|
|
6349
6368
|
if (!entry) {
|
|
6350
6369
|
return;
|
|
6351
6370
|
}
|
|
6352
|
-
this
|
|
6371
|
+
this.#handleWindowResize();
|
|
6353
6372
|
});
|
|
6354
|
-
this.
|
|
6373
|
+
this.#resizeObserver.observe(canvasEl);
|
|
6355
6374
|
}
|
|
6356
6375
|
};
|
|
6357
6376
|
}
|
|
@@ -6424,24 +6443,24 @@
|
|
|
6424
6443
|
unbreakable;
|
|
6425
6444
|
velocity;
|
|
6426
6445
|
zIndexFactor;
|
|
6427
|
-
|
|
6446
|
+
#cachedOpacityData = {
|
|
6428
6447
|
fillOpacity: defaultOpacity$1,
|
|
6429
6448
|
opacity: defaultOpacity$1,
|
|
6430
6449
|
strokeOpacity: defaultOpacity$1,
|
|
6431
6450
|
};
|
|
6432
|
-
|
|
6433
|
-
|
|
6434
|
-
|
|
6451
|
+
#cachedPosition = Vector3d.origin;
|
|
6452
|
+
#cachedRotateData = { sin: 0, cos: 0 };
|
|
6453
|
+
#cachedTransform = {
|
|
6435
6454
|
a: 1,
|
|
6436
6455
|
b: 0,
|
|
6437
6456
|
c: 0,
|
|
6438
6457
|
d: 1,
|
|
6439
6458
|
};
|
|
6440
|
-
|
|
6441
|
-
|
|
6459
|
+
#container;
|
|
6460
|
+
#pluginManager;
|
|
6442
6461
|
constructor(pluginManager, container) {
|
|
6443
|
-
this
|
|
6444
|
-
this
|
|
6462
|
+
this.#pluginManager = pluginManager;
|
|
6463
|
+
this.#container = container;
|
|
6445
6464
|
}
|
|
6446
6465
|
destroy(override) {
|
|
6447
6466
|
if (this.unbreakable || this.destroyed) {
|
|
@@ -6450,7 +6469,7 @@
|
|
|
6450
6469
|
this.destroyed = true;
|
|
6451
6470
|
this.bubble.inRange = false;
|
|
6452
6471
|
this.slow.inRange = false;
|
|
6453
|
-
const container = this
|
|
6472
|
+
const container = this.#container, shapeDrawer = this.shape ? container.shapeDrawers.get(this.shape) : undefined;
|
|
6454
6473
|
shapeDrawer?.particleDestroy?.(this);
|
|
6455
6474
|
for (const plugin of container.particleDestroyedPlugins) {
|
|
6456
6475
|
plugin.particleDestroyed?.(this, override);
|
|
@@ -6458,12 +6477,12 @@
|
|
|
6458
6477
|
for (const updater of container.particleUpdaters) {
|
|
6459
6478
|
updater.particleDestroyed?.(this, override);
|
|
6460
6479
|
}
|
|
6461
|
-
this.
|
|
6480
|
+
this.#container.dispatchEvent(exports.EventType.particleDestroyed, {
|
|
6462
6481
|
particle: this,
|
|
6463
6482
|
});
|
|
6464
6483
|
}
|
|
6465
6484
|
draw(delta) {
|
|
6466
|
-
const container = this
|
|
6485
|
+
const container = this.#container, render = container.canvas.render;
|
|
6467
6486
|
render.drawParticlePlugins(this, delta);
|
|
6468
6487
|
render.drawParticle(this, delta);
|
|
6469
6488
|
}
|
|
@@ -6471,50 +6490,50 @@
|
|
|
6471
6490
|
return this.rotation + (this.pathRotation ? this.velocity.angle : defaultAngle);
|
|
6472
6491
|
}
|
|
6473
6492
|
getFillColor() {
|
|
6474
|
-
return this
|
|
6493
|
+
return this.#getRollColor(this.bubble.color ?? getHslFromAnimation(this.fillColor));
|
|
6475
6494
|
}
|
|
6476
6495
|
getMass() {
|
|
6477
6496
|
return this.getRadius() ** squareExp * Math.PI * half;
|
|
6478
6497
|
}
|
|
6479
6498
|
getOpacity() {
|
|
6480
6499
|
const zIndexOptions = this.options.zIndex, zIndexFactor = zIndexFactorOffset - this.zIndexFactor, zOpacityFactor = zIndexFactor ** zIndexOptions.opacityRate, opacity = this.bubble.opacity ?? getRangeValue(this.opacity?.value ?? defaultOpacity$1), fillOpacity = this.fillOpacity ?? defaultOpacity$1, strokeOpacity = this.strokeOpacity ?? defaultOpacity$1;
|
|
6481
|
-
this.
|
|
6482
|
-
this.
|
|
6483
|
-
this.
|
|
6484
|
-
return this
|
|
6500
|
+
this.#cachedOpacityData.fillOpacity = opacity * fillOpacity * zOpacityFactor;
|
|
6501
|
+
this.#cachedOpacityData.opacity = opacity * zOpacityFactor;
|
|
6502
|
+
this.#cachedOpacityData.strokeOpacity = opacity * strokeOpacity * zOpacityFactor;
|
|
6503
|
+
return this.#cachedOpacityData;
|
|
6485
6504
|
}
|
|
6486
6505
|
getPosition() {
|
|
6487
|
-
this.
|
|
6488
|
-
this.
|
|
6489
|
-
this.
|
|
6490
|
-
return this
|
|
6506
|
+
this.#cachedPosition.x = this.position.x + this.offset.x;
|
|
6507
|
+
this.#cachedPosition.y = this.position.y + this.offset.y;
|
|
6508
|
+
this.#cachedPosition.z = this.position.z;
|
|
6509
|
+
return this.#cachedPosition;
|
|
6491
6510
|
}
|
|
6492
6511
|
getRadius() {
|
|
6493
6512
|
return this.bubble.radius ?? this.size.value;
|
|
6494
6513
|
}
|
|
6495
6514
|
getRotateData() {
|
|
6496
6515
|
const angle = this.getAngle();
|
|
6497
|
-
this.
|
|
6498
|
-
this.
|
|
6499
|
-
return this
|
|
6516
|
+
this.#cachedRotateData.sin = Math.sin(angle);
|
|
6517
|
+
this.#cachedRotateData.cos = Math.cos(angle);
|
|
6518
|
+
return this.#cachedRotateData;
|
|
6500
6519
|
}
|
|
6501
6520
|
getStrokeColor() {
|
|
6502
|
-
return this
|
|
6521
|
+
return this.#getRollColor(this.bubble.color ?? getHslFromAnimation(this.strokeColor));
|
|
6503
6522
|
}
|
|
6504
6523
|
getTransformData(externalTransform) {
|
|
6505
6524
|
const rotateData = this.getRotateData(), rotating = this.isRotating;
|
|
6506
|
-
this.
|
|
6507
|
-
this.
|
|
6525
|
+
this.#cachedTransform.a = rotateData.cos * (externalTransform.a ?? defaultTransform.a);
|
|
6526
|
+
this.#cachedTransform.b = rotating
|
|
6508
6527
|
? rotateData.sin * (externalTransform.b ?? identity$2)
|
|
6509
6528
|
: (externalTransform.b ?? defaultTransform.b);
|
|
6510
|
-
this.
|
|
6529
|
+
this.#cachedTransform.c = rotating
|
|
6511
6530
|
? -rotateData.sin * (externalTransform.c ?? identity$2)
|
|
6512
6531
|
: (externalTransform.c ?? defaultTransform.c);
|
|
6513
|
-
this.
|
|
6514
|
-
return this
|
|
6532
|
+
this.#cachedTransform.d = rotateData.cos * (externalTransform.d ?? defaultTransform.d);
|
|
6533
|
+
return this.#cachedTransform;
|
|
6515
6534
|
}
|
|
6516
6535
|
init(id, position, overrideOptions, group) {
|
|
6517
|
-
const container = this
|
|
6536
|
+
const container = this.#container;
|
|
6518
6537
|
this.id = id;
|
|
6519
6538
|
this.group = group;
|
|
6520
6539
|
this.justWarped = false;
|
|
@@ -6534,21 +6553,27 @@
|
|
|
6534
6553
|
moveSpeed: 0,
|
|
6535
6554
|
sizeAnimationSpeed: 0,
|
|
6536
6555
|
};
|
|
6556
|
+
this.size = {
|
|
6557
|
+
value: 1,
|
|
6558
|
+
max: 1,
|
|
6559
|
+
min: 1,
|
|
6560
|
+
enable: false,
|
|
6561
|
+
};
|
|
6537
6562
|
this.outType = exports.ParticleOutType.normal;
|
|
6538
6563
|
this.ignoresResizeRatio = true;
|
|
6539
|
-
const
|
|
6564
|
+
const mainOptions = container.actualOptions, particlesOptions = loadParticlesOptions(this.#pluginManager, container, mainOptions.particles), reduceDuplicates = particlesOptions.reduceDuplicates, effectType = particlesOptions.effect.type, shapeType = particlesOptions.shape.type;
|
|
6540
6565
|
this.effect = itemFromSingleOrMultiple(effectType, this.id, reduceDuplicates);
|
|
6541
6566
|
this.shape = itemFromSingleOrMultiple(shapeType, this.id, reduceDuplicates);
|
|
6542
6567
|
const effectOptions = particlesOptions.effect, shapeOptions = particlesOptions.shape;
|
|
6543
6568
|
if (overrideOptions) {
|
|
6544
|
-
if (overrideOptions.effect?.type) {
|
|
6569
|
+
if (overrideOptions.effect?.type && overrideOptions.effect.type !== this.effect) {
|
|
6545
6570
|
const overrideEffectType = overrideOptions.effect.type, effect = itemFromSingleOrMultiple(overrideEffectType, this.id, reduceDuplicates);
|
|
6546
6571
|
if (effect) {
|
|
6547
6572
|
this.effect = effect;
|
|
6548
6573
|
effectOptions.load(overrideOptions.effect);
|
|
6549
6574
|
}
|
|
6550
6575
|
}
|
|
6551
|
-
if (overrideOptions.shape?.type) {
|
|
6576
|
+
if (overrideOptions.shape?.type && overrideOptions.shape.type !== this.shape) {
|
|
6552
6577
|
const overrideShapeType = overrideOptions.shape.type, shape = itemFromSingleOrMultiple(overrideShapeType, this.id, reduceDuplicates);
|
|
6553
6578
|
if (shape) {
|
|
6554
6579
|
this.shape = shape;
|
|
@@ -6557,21 +6582,20 @@
|
|
|
6557
6582
|
}
|
|
6558
6583
|
}
|
|
6559
6584
|
if (this.effect === randomColorValue) {
|
|
6560
|
-
const availableEffects = [...this.
|
|
6585
|
+
const availableEffects = [...this.#container.effectDrawers.keys()];
|
|
6561
6586
|
this.effect = availableEffects[Math.floor(getRandom() * availableEffects.length)];
|
|
6562
6587
|
}
|
|
6563
6588
|
if (this.shape === randomColorValue) {
|
|
6564
|
-
const availableShapes = [...this.
|
|
6589
|
+
const availableShapes = [...this.#container.shapeDrawers.keys()];
|
|
6565
6590
|
this.shape = availableShapes[Math.floor(getRandom() * availableShapes.length)];
|
|
6566
6591
|
}
|
|
6567
6592
|
this.effectData = this.effect ? loadEffectData(this.effect, effectOptions, this.id, reduceDuplicates) : undefined;
|
|
6568
6593
|
this.shapeData = this.shape ? loadShapeData(this.shape, shapeOptions, this.id, reduceDuplicates) : undefined;
|
|
6569
6594
|
particlesOptions.load(overrideOptions);
|
|
6570
|
-
const effectData = this.effectData;
|
|
6595
|
+
const effectData = this.effectData, shapeData = this.shapeData;
|
|
6571
6596
|
if (effectData) {
|
|
6572
6597
|
particlesOptions.load(effectData.particles);
|
|
6573
6598
|
}
|
|
6574
|
-
const shapeData = this.shapeData;
|
|
6575
6599
|
if (shapeData) {
|
|
6576
6600
|
particlesOptions.load(shapeData.particles);
|
|
6577
6601
|
}
|
|
@@ -6579,7 +6603,9 @@
|
|
|
6579
6603
|
this.shapeClose = shapeData?.close ?? particlesOptions.shape.close;
|
|
6580
6604
|
this.options = particlesOptions;
|
|
6581
6605
|
container.retina.initParticle(this);
|
|
6582
|
-
|
|
6606
|
+
for (const updater of container.particleUpdaters) {
|
|
6607
|
+
updater.preInit?.(this);
|
|
6608
|
+
}
|
|
6583
6609
|
this.bubble = {
|
|
6584
6610
|
inRange: false,
|
|
6585
6611
|
};
|
|
@@ -6587,8 +6613,8 @@
|
|
|
6587
6613
|
inRange: false,
|
|
6588
6614
|
factor: 1,
|
|
6589
6615
|
};
|
|
6590
|
-
this
|
|
6591
|
-
this.initialVelocity = this
|
|
6616
|
+
this.#initPosition(position);
|
|
6617
|
+
this.initialVelocity = this.#calculateVelocity();
|
|
6592
6618
|
this.velocity = this.initialVelocity.copy();
|
|
6593
6619
|
this.zIndexFactor = this.position.z / container.zLayers;
|
|
6594
6620
|
this.sides = 24;
|
|
@@ -6619,12 +6645,11 @@
|
|
|
6619
6645
|
plugin.particleCreated?.(this);
|
|
6620
6646
|
}
|
|
6621
6647
|
}
|
|
6622
|
-
isInsideCanvas() {
|
|
6623
|
-
|
|
6624
|
-
|
|
6625
|
-
|
|
6626
|
-
|
|
6627
|
-
position.x <= canvasSize.width + radius);
|
|
6648
|
+
isInsideCanvas(direction) {
|
|
6649
|
+
return this.#getInsideCanvasResult({ direction }).inside;
|
|
6650
|
+
}
|
|
6651
|
+
isInsideCanvasForOutMode(outMode, direction) {
|
|
6652
|
+
return this.#getInsideCanvasResult({ direction, outMode }).inside;
|
|
6628
6653
|
}
|
|
6629
6654
|
isShowingBack() {
|
|
6630
6655
|
if (!this.roll) {
|
|
@@ -6649,13 +6674,13 @@
|
|
|
6649
6674
|
return !this.destroyed && !this.spawning && this.isInsideCanvas();
|
|
6650
6675
|
}
|
|
6651
6676
|
reset() {
|
|
6652
|
-
for (const updater of this.
|
|
6677
|
+
for (const updater of this.#container.particleUpdaters) {
|
|
6653
6678
|
updater.reset?.(this);
|
|
6654
6679
|
}
|
|
6655
6680
|
}
|
|
6656
|
-
|
|
6681
|
+
#calcPosition = (position, zIndex) => {
|
|
6657
6682
|
let tryCount = defaultRetryCount, posVec = position ? Vector3d.create(position.x, position.y, zIndex) : undefined;
|
|
6658
|
-
const container = this
|
|
6683
|
+
const container = this.#container, plugins = container.particlePositionPlugins, outModes = this.options.move.outModes, radius = this.getRadius(), canvasSize = container.canvas.size, abortController = new AbortController(), { signal } = abortController;
|
|
6659
6684
|
while (!signal.aborted) {
|
|
6660
6685
|
for (const plugin of plugins) {
|
|
6661
6686
|
const pluginPos = plugin.particlePosition?.(posVec, this);
|
|
@@ -6667,10 +6692,10 @@
|
|
|
6667
6692
|
size: canvasSize,
|
|
6668
6693
|
position: posVec,
|
|
6669
6694
|
}), pos = Vector3d.create(exactPosition.x, exactPosition.y, zIndex);
|
|
6670
|
-
this
|
|
6671
|
-
this
|
|
6672
|
-
this
|
|
6673
|
-
this
|
|
6695
|
+
this.#fixHorizontal(pos, radius, outModes.left ?? outModes.default);
|
|
6696
|
+
this.#fixHorizontal(pos, radius, outModes.right ?? outModes.default);
|
|
6697
|
+
this.#fixVertical(pos, radius, outModes.top ?? outModes.default);
|
|
6698
|
+
this.#fixVertical(pos, radius, outModes.bottom ?? outModes.default);
|
|
6674
6699
|
let isValidPosition = true;
|
|
6675
6700
|
for (const plugin of container.particles.checkParticlePositionPlugins) {
|
|
6676
6701
|
isValidPosition = plugin.checkParticlePosition?.(this, pos, tryCount) ?? true;
|
|
@@ -6686,8 +6711,8 @@
|
|
|
6686
6711
|
}
|
|
6687
6712
|
return posVec;
|
|
6688
6713
|
};
|
|
6689
|
-
|
|
6690
|
-
const baseVelocity = getParticleBaseVelocity(this.direction), res = baseVelocity.copy()
|
|
6714
|
+
#calculateVelocity = () => {
|
|
6715
|
+
const moveOptions = this.options.move, baseVelocity = getParticleBaseVelocity(this.direction), res = baseVelocity.copy();
|
|
6691
6716
|
if (moveOptions.direction === exports.MoveDirection.inside || moveOptions.direction === exports.MoveDirection.outside) {
|
|
6692
6717
|
return res;
|
|
6693
6718
|
}
|
|
@@ -6703,27 +6728,86 @@
|
|
|
6703
6728
|
}
|
|
6704
6729
|
return res;
|
|
6705
6730
|
};
|
|
6706
|
-
|
|
6731
|
+
#fixHorizontal = (pos, radius, outMode) => {
|
|
6707
6732
|
fixOutMode({
|
|
6708
6733
|
outMode,
|
|
6709
6734
|
checkModes: [exports.OutMode.bounce],
|
|
6710
6735
|
coord: pos.x,
|
|
6711
|
-
maxCoord: this.
|
|
6736
|
+
maxCoord: this.#container.canvas.size.width,
|
|
6712
6737
|
setCb: (value) => (pos.x += value),
|
|
6713
6738
|
radius,
|
|
6714
6739
|
});
|
|
6715
6740
|
};
|
|
6716
|
-
|
|
6741
|
+
#fixVertical = (pos, radius, outMode) => {
|
|
6717
6742
|
fixOutMode({
|
|
6718
6743
|
outMode,
|
|
6719
6744
|
checkModes: [exports.OutMode.bounce],
|
|
6720
6745
|
coord: pos.y,
|
|
6721
|
-
maxCoord: this.
|
|
6746
|
+
maxCoord: this.#container.canvas.size.height,
|
|
6722
6747
|
setCb: (value) => (pos.y += value),
|
|
6723
6748
|
radius,
|
|
6724
6749
|
});
|
|
6725
6750
|
};
|
|
6726
|
-
|
|
6751
|
+
#getDefaultInsideCanvasResult = (direction, outMode) => {
|
|
6752
|
+
const radius = this.getRadius(), canvasSize = this.#container.canvas.size, position = this.position, isBounce = outMode === exports.OutMode.bounce;
|
|
6753
|
+
if (direction === exports.OutModeDirection.bottom) {
|
|
6754
|
+
return {
|
|
6755
|
+
inside: isBounce ? position.y + radius < canvasSize.height : position.y - radius < canvasSize.height,
|
|
6756
|
+
reason: "default",
|
|
6757
|
+
};
|
|
6758
|
+
}
|
|
6759
|
+
if (direction === exports.OutModeDirection.left) {
|
|
6760
|
+
return {
|
|
6761
|
+
inside: isBounce ? position.x - radius > defaultAngle : position.x + radius > defaultAngle,
|
|
6762
|
+
reason: "default",
|
|
6763
|
+
};
|
|
6764
|
+
}
|
|
6765
|
+
if (direction === exports.OutModeDirection.right) {
|
|
6766
|
+
return {
|
|
6767
|
+
inside: isBounce ? position.x + radius < canvasSize.width : position.x - radius < canvasSize.width,
|
|
6768
|
+
reason: "default",
|
|
6769
|
+
};
|
|
6770
|
+
}
|
|
6771
|
+
if (direction === exports.OutModeDirection.top) {
|
|
6772
|
+
return {
|
|
6773
|
+
inside: isBounce ? position.y - radius > defaultAngle : position.y + radius > defaultAngle,
|
|
6774
|
+
reason: "default",
|
|
6775
|
+
};
|
|
6776
|
+
}
|
|
6777
|
+
return {
|
|
6778
|
+
inside: position.x >= -radius &&
|
|
6779
|
+
position.y >= -radius &&
|
|
6780
|
+
position.y <= canvasSize.height + radius &&
|
|
6781
|
+
position.x <= canvasSize.width + radius,
|
|
6782
|
+
reason: "default",
|
|
6783
|
+
};
|
|
6784
|
+
};
|
|
6785
|
+
#getInsideCanvasCallbackData = (direction, outMode) => {
|
|
6786
|
+
return {
|
|
6787
|
+
canvasSize: this.#container.canvas.size,
|
|
6788
|
+
direction,
|
|
6789
|
+
outMode,
|
|
6790
|
+
particle: this,
|
|
6791
|
+
radius: this.getRadius(),
|
|
6792
|
+
};
|
|
6793
|
+
};
|
|
6794
|
+
#getInsideCanvasResult = (data) => {
|
|
6795
|
+
const defaultResult = this.#getDefaultInsideCanvasResult(data.direction, data.outMode), container = this.#container, shapeDrawer = this.shape ? container.shapeDrawers.get(this.shape) : undefined, effectDrawer = this.effect ? container.effectDrawers.get(this.effect) : undefined, shapeCheck = shapeDrawer?.isInsideCanvas, effectCheck = effectDrawer?.isInsideCanvas;
|
|
6796
|
+
if (!shapeCheck && !effectCheck) {
|
|
6797
|
+
return defaultResult;
|
|
6798
|
+
}
|
|
6799
|
+
const callbackData = this.#getInsideCanvasCallbackData(data.direction, data.outMode), shapeResult = shapeCheck ? this.#normalizeInsideCanvasResult(shapeCheck(callbackData), "shape") : undefined, effectResult = effectCheck ? this.#normalizeInsideCanvasResult(effectCheck(callbackData), "effect") : undefined;
|
|
6800
|
+
if (shapeResult && effectResult) {
|
|
6801
|
+
const margin = Math.max(shapeResult.margin ?? defaultAngle, effectResult.margin ?? defaultAngle);
|
|
6802
|
+
return {
|
|
6803
|
+
inside: shapeResult.inside && effectResult.inside,
|
|
6804
|
+
margin: margin > defaultAngle ? margin : undefined,
|
|
6805
|
+
reason: "combined",
|
|
6806
|
+
};
|
|
6807
|
+
}
|
|
6808
|
+
return shapeResult ?? effectResult ?? defaultResult;
|
|
6809
|
+
};
|
|
6810
|
+
#getRollColor = color => {
|
|
6727
6811
|
if (!color || !this.roll || (!this.backColor && !this.roll.alter)) {
|
|
6728
6812
|
return color;
|
|
6729
6813
|
}
|
|
@@ -6738,8 +6822,8 @@
|
|
|
6738
6822
|
}
|
|
6739
6823
|
return color;
|
|
6740
6824
|
};
|
|
6741
|
-
|
|
6742
|
-
const container = this
|
|
6825
|
+
#initPosition = position => {
|
|
6826
|
+
const container = this.#container, zIndexValue = Math.floor(getRangeValue(this.options.zIndex.value)), initialPosition = this.#calcPosition(position, clamp(zIndexValue, minZ, container.zLayers));
|
|
6743
6827
|
if (!initialPosition) {
|
|
6744
6828
|
throw new Error("a valid position cannot be found for particle");
|
|
6745
6829
|
}
|
|
@@ -6762,45 +6846,58 @@
|
|
|
6762
6846
|
}
|
|
6763
6847
|
this.offset = Vector.origin;
|
|
6764
6848
|
};
|
|
6849
|
+
#normalizeInsideCanvasResult = (result, reason) => {
|
|
6850
|
+
if (typeof result === "boolean") {
|
|
6851
|
+
return {
|
|
6852
|
+
inside: result,
|
|
6853
|
+
reason,
|
|
6854
|
+
};
|
|
6855
|
+
}
|
|
6856
|
+
return {
|
|
6857
|
+
inside: result.inside,
|
|
6858
|
+
margin: result.margin,
|
|
6859
|
+
reason: result.reason ?? reason,
|
|
6860
|
+
};
|
|
6861
|
+
};
|
|
6765
6862
|
}
|
|
6766
6863
|
|
|
6767
6864
|
class SpatialHashGrid {
|
|
6768
|
-
|
|
6769
|
-
|
|
6770
|
-
|
|
6771
|
-
|
|
6772
|
-
|
|
6773
|
-
|
|
6774
|
-
|
|
6865
|
+
#cellSize;
|
|
6866
|
+
#cells = new Map();
|
|
6867
|
+
#circlePool = [];
|
|
6868
|
+
#circlePoolIdx;
|
|
6869
|
+
#pendingCellSize;
|
|
6870
|
+
#rectanglePool = [];
|
|
6871
|
+
#rectanglePoolIdx;
|
|
6775
6872
|
constructor(cellSize) {
|
|
6776
|
-
this
|
|
6777
|
-
this
|
|
6778
|
-
this
|
|
6873
|
+
this.#cellSize = cellSize;
|
|
6874
|
+
this.#circlePoolIdx = 0;
|
|
6875
|
+
this.#rectanglePoolIdx = 0;
|
|
6779
6876
|
}
|
|
6780
6877
|
clear() {
|
|
6781
|
-
this.
|
|
6782
|
-
const pendingCellSize = this
|
|
6878
|
+
this.#cells.clear();
|
|
6879
|
+
const pendingCellSize = this.#pendingCellSize;
|
|
6783
6880
|
if (pendingCellSize) {
|
|
6784
|
-
this
|
|
6881
|
+
this.#cellSize = pendingCellSize;
|
|
6785
6882
|
}
|
|
6786
|
-
this
|
|
6883
|
+
this.#pendingCellSize = undefined;
|
|
6787
6884
|
}
|
|
6788
6885
|
insert(particle) {
|
|
6789
|
-
const { x, y } = particle.getPosition(), key = this
|
|
6790
|
-
if (!this.
|
|
6791
|
-
this.
|
|
6886
|
+
const { x, y } = particle.getPosition(), key = this.#cellKeyFromCoords(x, y);
|
|
6887
|
+
if (!this.#cells.has(key)) {
|
|
6888
|
+
this.#cells.set(key, []);
|
|
6792
6889
|
}
|
|
6793
|
-
this.
|
|
6890
|
+
this.#cells.get(key)?.push(particle);
|
|
6794
6891
|
}
|
|
6795
6892
|
query(range, check, out = []) {
|
|
6796
|
-
const bounds = this
|
|
6893
|
+
const bounds = this.#getRangeBounds(range);
|
|
6797
6894
|
if (!bounds) {
|
|
6798
6895
|
return out;
|
|
6799
6896
|
}
|
|
6800
|
-
const minCellX = Math.floor(bounds.minX / this
|
|
6897
|
+
const minCellX = Math.floor(bounds.minX / this.#cellSize), maxCellX = Math.floor(bounds.maxX / this.#cellSize), minCellY = Math.floor(bounds.minY / this.#cellSize), maxCellY = Math.floor(bounds.maxY / this.#cellSize);
|
|
6801
6898
|
for (let cx = minCellX; cx <= maxCellX; cx++) {
|
|
6802
6899
|
for (let cy = minCellY; cy <= maxCellY; cy++) {
|
|
6803
|
-
const key = `${cx}_${cy}`, cellParticles = this.
|
|
6900
|
+
const key = `${cx}_${cy}`, cellParticles = this.#cells.get(key);
|
|
6804
6901
|
if (!cellParticles) {
|
|
6805
6902
|
continue;
|
|
6806
6903
|
}
|
|
@@ -6817,29 +6914,29 @@
|
|
|
6817
6914
|
return out;
|
|
6818
6915
|
}
|
|
6819
6916
|
queryCircle(position, radius, check, out = []) {
|
|
6820
|
-
const circle = this
|
|
6821
|
-
this
|
|
6917
|
+
const circle = this.#acquireCircle(position.x, position.y, radius), result = this.query(circle, check, out);
|
|
6918
|
+
this.#releaseShapes();
|
|
6822
6919
|
return result;
|
|
6823
6920
|
}
|
|
6824
6921
|
queryRectangle(position, size, check, out = []) {
|
|
6825
|
-
const rect = this
|
|
6826
|
-
this
|
|
6922
|
+
const rect = this.#acquireRectangle(position.x, position.y, size.width, size.height), result = this.query(rect, check, out);
|
|
6923
|
+
this.#releaseShapes();
|
|
6827
6924
|
return result;
|
|
6828
6925
|
}
|
|
6829
6926
|
setCellSize(cellSize) {
|
|
6830
|
-
this
|
|
6927
|
+
this.#pendingCellSize = cellSize;
|
|
6831
6928
|
}
|
|
6832
|
-
|
|
6833
|
-
return (this
|
|
6929
|
+
#acquireCircle(x, y, r) {
|
|
6930
|
+
return (this.#circlePool[this.#circlePoolIdx++] ??= new Circle(x, y, r)).reset(x, y, r);
|
|
6834
6931
|
}
|
|
6835
|
-
|
|
6836
|
-
return (this
|
|
6932
|
+
#acquireRectangle(x, y, w, h) {
|
|
6933
|
+
return (this.#rectanglePool[this.#rectanglePoolIdx++] ??= new Rectangle(x, y, w, h)).reset(x, y, w, h);
|
|
6837
6934
|
}
|
|
6838
|
-
|
|
6839
|
-
const cellX = Math.floor(x / this
|
|
6935
|
+
#cellKeyFromCoords(x, y) {
|
|
6936
|
+
const cellX = Math.floor(x / this.#cellSize), cellY = Math.floor(y / this.#cellSize);
|
|
6840
6937
|
return `${cellX}_${cellY}`;
|
|
6841
6938
|
}
|
|
6842
|
-
|
|
6939
|
+
#getRangeBounds(range) {
|
|
6843
6940
|
if (range instanceof Circle) {
|
|
6844
6941
|
const r = range.radius, { x, y } = range.position;
|
|
6845
6942
|
return {
|
|
@@ -6860,53 +6957,53 @@
|
|
|
6860
6957
|
}
|
|
6861
6958
|
return null;
|
|
6862
6959
|
}
|
|
6863
|
-
|
|
6864
|
-
this
|
|
6865
|
-
this
|
|
6960
|
+
#releaseShapes() {
|
|
6961
|
+
this.#circlePoolIdx = 0;
|
|
6962
|
+
this.#rectanglePoolIdx = 0;
|
|
6866
6963
|
}
|
|
6867
6964
|
}
|
|
6868
6965
|
|
|
6869
6966
|
class ParticlesManager {
|
|
6870
6967
|
checkParticlePositionPlugins;
|
|
6871
6968
|
grid;
|
|
6872
|
-
|
|
6873
|
-
|
|
6874
|
-
|
|
6875
|
-
|
|
6876
|
-
|
|
6877
|
-
|
|
6878
|
-
|
|
6879
|
-
|
|
6880
|
-
|
|
6881
|
-
|
|
6882
|
-
|
|
6883
|
-
|
|
6884
|
-
|
|
6885
|
-
|
|
6886
|
-
|
|
6969
|
+
#array;
|
|
6970
|
+
#container;
|
|
6971
|
+
#groupLimits;
|
|
6972
|
+
#limit;
|
|
6973
|
+
#nextId;
|
|
6974
|
+
#particleBuckets;
|
|
6975
|
+
#particleResetPlugins;
|
|
6976
|
+
#particleUpdatePlugins;
|
|
6977
|
+
#pluginManager;
|
|
6978
|
+
#pool;
|
|
6979
|
+
#postParticleUpdatePlugins;
|
|
6980
|
+
#postUpdatePlugins;
|
|
6981
|
+
#resizeFactor;
|
|
6982
|
+
#updatePlugins;
|
|
6983
|
+
#zBuckets;
|
|
6887
6984
|
constructor(pluginManager, container) {
|
|
6888
|
-
this
|
|
6889
|
-
this
|
|
6890
|
-
this
|
|
6891
|
-
this
|
|
6892
|
-
this
|
|
6893
|
-
this
|
|
6894
|
-
this
|
|
6895
|
-
this
|
|
6896
|
-
this
|
|
6985
|
+
this.#pluginManager = pluginManager;
|
|
6986
|
+
this.#container = container;
|
|
6987
|
+
this.#nextId = 0;
|
|
6988
|
+
this.#array = [];
|
|
6989
|
+
this.#pool = [];
|
|
6990
|
+
this.#limit = 0;
|
|
6991
|
+
this.#groupLimits = new Map();
|
|
6992
|
+
this.#particleBuckets = new Map();
|
|
6993
|
+
this.#zBuckets = this.#createBuckets(this.#container.zLayers);
|
|
6897
6994
|
this.grid = new SpatialHashGrid(spatialHashGridCellSize);
|
|
6898
6995
|
this.checkParticlePositionPlugins = [];
|
|
6899
|
-
this
|
|
6900
|
-
this
|
|
6901
|
-
this
|
|
6902
|
-
this
|
|
6903
|
-
this
|
|
6996
|
+
this.#particleResetPlugins = [];
|
|
6997
|
+
this.#particleUpdatePlugins = [];
|
|
6998
|
+
this.#postUpdatePlugins = [];
|
|
6999
|
+
this.#postParticleUpdatePlugins = [];
|
|
7000
|
+
this.#updatePlugins = [];
|
|
6904
7001
|
}
|
|
6905
7002
|
get count() {
|
|
6906
|
-
return this.
|
|
7003
|
+
return this.#array.length;
|
|
6907
7004
|
}
|
|
6908
7005
|
addParticle(position, overrideOptions, group, initializer) {
|
|
6909
|
-
const limitMode = this.
|
|
7006
|
+
const limitMode = this.#container.actualOptions.particles.number.limit.mode, limit = group === undefined ? this.#limit : (this.#groupLimits.get(group) ?? this.#limit), currentCount = this.count;
|
|
6910
7007
|
if (limit > minLimit) {
|
|
6911
7008
|
switch (limitMode) {
|
|
6912
7009
|
case exports.LimitMode.delete: {
|
|
@@ -6924,20 +7021,20 @@
|
|
|
6924
7021
|
}
|
|
6925
7022
|
}
|
|
6926
7023
|
try {
|
|
6927
|
-
const particle = this.
|
|
6928
|
-
particle.init(this
|
|
7024
|
+
const particle = this.#pool.pop() ?? new Particle(this.#pluginManager, this.#container);
|
|
7025
|
+
particle.init(this.#nextId, position, overrideOptions, group);
|
|
6929
7026
|
let canAdd = true;
|
|
6930
7027
|
if (initializer) {
|
|
6931
7028
|
canAdd = initializer(particle);
|
|
6932
7029
|
}
|
|
6933
7030
|
if (!canAdd) {
|
|
6934
|
-
this.
|
|
7031
|
+
this.#pool.push(particle);
|
|
6935
7032
|
return;
|
|
6936
7033
|
}
|
|
6937
|
-
this.
|
|
6938
|
-
this
|
|
6939
|
-
this
|
|
6940
|
-
this.
|
|
7034
|
+
this.#array.push(particle);
|
|
7035
|
+
this.#insertParticleIntoBucket(particle);
|
|
7036
|
+
this.#nextId++;
|
|
7037
|
+
this.#container.dispatchEvent(exports.EventType.particleAdded, {
|
|
6941
7038
|
particle,
|
|
6942
7039
|
});
|
|
6943
7040
|
return particle;
|
|
@@ -6948,25 +7045,25 @@
|
|
|
6948
7045
|
return undefined;
|
|
6949
7046
|
}
|
|
6950
7047
|
clear() {
|
|
6951
|
-
this
|
|
6952
|
-
this.
|
|
6953
|
-
this
|
|
7048
|
+
this.#array = [];
|
|
7049
|
+
this.#particleBuckets.clear();
|
|
7050
|
+
this.#resetBuckets(this.#container.zLayers);
|
|
6954
7051
|
}
|
|
6955
7052
|
destroy() {
|
|
6956
|
-
this
|
|
6957
|
-
this.
|
|
6958
|
-
this.
|
|
6959
|
-
this
|
|
7053
|
+
this.#array = [];
|
|
7054
|
+
this.#pool.length = 0;
|
|
7055
|
+
this.#particleBuckets.clear();
|
|
7056
|
+
this.#zBuckets = [];
|
|
6960
7057
|
this.checkParticlePositionPlugins = [];
|
|
6961
|
-
this
|
|
6962
|
-
this
|
|
6963
|
-
this
|
|
6964
|
-
this
|
|
6965
|
-
this
|
|
7058
|
+
this.#particleResetPlugins = [];
|
|
7059
|
+
this.#particleUpdatePlugins = [];
|
|
7060
|
+
this.#postUpdatePlugins = [];
|
|
7061
|
+
this.#postParticleUpdatePlugins = [];
|
|
7062
|
+
this.#updatePlugins = [];
|
|
6966
7063
|
}
|
|
6967
7064
|
drawParticles(delta) {
|
|
6968
|
-
for (let i = this.
|
|
6969
|
-
const bucket = this
|
|
7065
|
+
for (let i = this.#zBuckets.length - one; i >= minIndex; i--) {
|
|
7066
|
+
const bucket = this.#zBuckets[i];
|
|
6970
7067
|
if (!bucket) {
|
|
6971
7068
|
continue;
|
|
6972
7069
|
}
|
|
@@ -6976,24 +7073,24 @@
|
|
|
6976
7073
|
}
|
|
6977
7074
|
}
|
|
6978
7075
|
filter(condition) {
|
|
6979
|
-
return this.
|
|
7076
|
+
return this.#array.filter(condition);
|
|
6980
7077
|
}
|
|
6981
7078
|
find(condition) {
|
|
6982
|
-
return this.
|
|
7079
|
+
return this.#array.find(condition);
|
|
6983
7080
|
}
|
|
6984
7081
|
get(index) {
|
|
6985
|
-
return this
|
|
7082
|
+
return this.#array[index];
|
|
6986
7083
|
}
|
|
6987
7084
|
async init() {
|
|
6988
|
-
const container = this
|
|
7085
|
+
const container = this.#container, options = container.actualOptions;
|
|
6989
7086
|
this.checkParticlePositionPlugins = [];
|
|
6990
|
-
this
|
|
6991
|
-
this
|
|
6992
|
-
this
|
|
6993
|
-
this
|
|
6994
|
-
this
|
|
6995
|
-
this.
|
|
6996
|
-
this
|
|
7087
|
+
this.#updatePlugins = [];
|
|
7088
|
+
this.#particleUpdatePlugins = [];
|
|
7089
|
+
this.#postUpdatePlugins = [];
|
|
7090
|
+
this.#particleResetPlugins = [];
|
|
7091
|
+
this.#postParticleUpdatePlugins = [];
|
|
7092
|
+
this.#particleBuckets.clear();
|
|
7093
|
+
this.#resetBuckets(container.zLayers);
|
|
6997
7094
|
this.grid = new SpatialHashGrid(spatialHashGridCellSize * container.retina.pixelRatio);
|
|
6998
7095
|
for (const plugin of container.plugins) {
|
|
6999
7096
|
if (plugin.redrawInit) {
|
|
@@ -7003,26 +7100,26 @@
|
|
|
7003
7100
|
this.checkParticlePositionPlugins.push(plugin);
|
|
7004
7101
|
}
|
|
7005
7102
|
if (plugin.update) {
|
|
7006
|
-
this.
|
|
7103
|
+
this.#updatePlugins.push(plugin);
|
|
7007
7104
|
}
|
|
7008
7105
|
if (plugin.particleUpdate) {
|
|
7009
|
-
this.
|
|
7106
|
+
this.#particleUpdatePlugins.push(plugin);
|
|
7010
7107
|
}
|
|
7011
7108
|
if (plugin.postUpdate) {
|
|
7012
|
-
this.
|
|
7109
|
+
this.#postUpdatePlugins.push(plugin);
|
|
7013
7110
|
}
|
|
7014
7111
|
if (plugin.particleReset) {
|
|
7015
|
-
this.
|
|
7112
|
+
this.#particleResetPlugins.push(plugin);
|
|
7016
7113
|
}
|
|
7017
7114
|
if (plugin.postParticleUpdate) {
|
|
7018
|
-
this.
|
|
7115
|
+
this.#postParticleUpdatePlugins.push(plugin);
|
|
7019
7116
|
}
|
|
7020
7117
|
}
|
|
7021
|
-
await this.
|
|
7022
|
-
for (const drawer of this.
|
|
7118
|
+
await this.#container.initDrawersAndUpdaters();
|
|
7119
|
+
for (const drawer of this.#container.effectDrawers.values()) {
|
|
7023
7120
|
await drawer.init?.(container);
|
|
7024
7121
|
}
|
|
7025
|
-
for (const drawer of this.
|
|
7122
|
+
for (const drawer of this.#container.shapeDrawers.values()) {
|
|
7026
7123
|
await drawer.init?.(container);
|
|
7027
7124
|
}
|
|
7028
7125
|
let handled = false;
|
|
@@ -7056,10 +7153,10 @@
|
|
|
7056
7153
|
async redraw() {
|
|
7057
7154
|
this.clear();
|
|
7058
7155
|
await this.init();
|
|
7059
|
-
this.
|
|
7156
|
+
this.#container.canvas.render.drawParticles({ value: 0, factor: 0 });
|
|
7060
7157
|
}
|
|
7061
7158
|
remove(particle, group, override) {
|
|
7062
|
-
this.removeAt(this.
|
|
7159
|
+
this.removeAt(this.#array.indexOf(particle), undefined, group, override);
|
|
7063
7160
|
}
|
|
7064
7161
|
removeAt(index, quantity = defaultRemoveQuantity, group, override) {
|
|
7065
7162
|
if (index < minIndex || index > this.count) {
|
|
@@ -7067,7 +7164,7 @@
|
|
|
7067
7164
|
}
|
|
7068
7165
|
let deleted = 0;
|
|
7069
7166
|
for (let i = index; deleted < quantity && i < this.count; i++) {
|
|
7070
|
-
if (this
|
|
7167
|
+
if (this.#removeParticle(i, group, override)) {
|
|
7071
7168
|
i--;
|
|
7072
7169
|
deleted++;
|
|
7073
7170
|
}
|
|
@@ -7077,9 +7174,9 @@
|
|
|
7077
7174
|
this.removeAt(minIndex, quantity, group);
|
|
7078
7175
|
}
|
|
7079
7176
|
setDensity() {
|
|
7080
|
-
const options = this.
|
|
7177
|
+
const options = this.#container.actualOptions, groups = options.particles.groups;
|
|
7081
7178
|
let pluginsCount = 0;
|
|
7082
|
-
for (const plugin of this.
|
|
7179
|
+
for (const plugin of this.#container.plugins) {
|
|
7083
7180
|
if (plugin.particlesDensityCount) {
|
|
7084
7181
|
pluginsCount += plugin.particlesDensityCount();
|
|
7085
7182
|
}
|
|
@@ -7089,51 +7186,51 @@
|
|
|
7089
7186
|
if (!groupData) {
|
|
7090
7187
|
continue;
|
|
7091
7188
|
}
|
|
7092
|
-
const groupDataOptions = loadParticlesOptions(this
|
|
7093
|
-
this
|
|
7189
|
+
const groupDataOptions = loadParticlesOptions(this.#pluginManager, this.#container, groupData);
|
|
7190
|
+
this.#applyDensity(groupDataOptions, pluginsCount, group);
|
|
7094
7191
|
}
|
|
7095
|
-
this
|
|
7192
|
+
this.#applyDensity(options.particles, pluginsCount);
|
|
7096
7193
|
}
|
|
7097
7194
|
setResizeFactor(factor) {
|
|
7098
|
-
this
|
|
7195
|
+
this.#resizeFactor = factor;
|
|
7099
7196
|
}
|
|
7100
7197
|
update(delta) {
|
|
7101
7198
|
this.grid.clear();
|
|
7102
|
-
for (const plugin of this
|
|
7199
|
+
for (const plugin of this.#updatePlugins) {
|
|
7103
7200
|
plugin.update?.(delta);
|
|
7104
7201
|
}
|
|
7105
|
-
const particlesToDelete = this
|
|
7106
|
-
for (const plugin of this
|
|
7202
|
+
const particlesToDelete = this.#updateParticlesPhase1(delta);
|
|
7203
|
+
for (const plugin of this.#postUpdatePlugins) {
|
|
7107
7204
|
plugin.postUpdate?.(delta);
|
|
7108
7205
|
}
|
|
7109
|
-
this
|
|
7206
|
+
this.#updateParticlesPhase2(delta, particlesToDelete);
|
|
7110
7207
|
if (particlesToDelete.size) {
|
|
7111
7208
|
for (const particle of particlesToDelete) {
|
|
7112
7209
|
this.remove(particle);
|
|
7113
7210
|
}
|
|
7114
7211
|
}
|
|
7115
|
-
|
|
7212
|
+
this.#resizeFactor = undefined;
|
|
7116
7213
|
}
|
|
7117
|
-
|
|
7118
|
-
this.
|
|
7214
|
+
#addToPool = (...particles) => {
|
|
7215
|
+
this.#pool.push(...particles);
|
|
7119
7216
|
};
|
|
7120
|
-
|
|
7217
|
+
#applyDensity = (options, pluginsCount, group, groupOptions) => {
|
|
7121
7218
|
const numberOptions = options.number;
|
|
7122
7219
|
if (!numberOptions.density.enable) {
|
|
7123
7220
|
if (group === undefined) {
|
|
7124
|
-
this
|
|
7221
|
+
this.#limit = numberOptions.limit.value;
|
|
7125
7222
|
}
|
|
7126
7223
|
else if (groupOptions?.number.limit.value ?? numberOptions.limit.value) {
|
|
7127
|
-
this.
|
|
7224
|
+
this.#groupLimits.set(group, groupOptions?.number.limit.value ?? numberOptions.limit.value);
|
|
7128
7225
|
}
|
|
7129
7226
|
return;
|
|
7130
7227
|
}
|
|
7131
|
-
const densityFactor = this
|
|
7228
|
+
const densityFactor = this.#initDensityFactor(numberOptions.density), optParticlesNumber = numberOptions.value, optParticlesLimit = numberOptions.limit.value > minLimit ? numberOptions.limit.value : optParticlesNumber, particlesNumber = Math.min(optParticlesNumber, optParticlesLimit) * densityFactor + pluginsCount, particlesCount = Math.min(this.count, this.filter(t => t.group === group).length);
|
|
7132
7229
|
if (group === undefined) {
|
|
7133
|
-
this
|
|
7230
|
+
this.#limit = numberOptions.limit.value * densityFactor;
|
|
7134
7231
|
}
|
|
7135
7232
|
else {
|
|
7136
|
-
this.
|
|
7233
|
+
this.#groupLimits.set(group, numberOptions.limit.value * densityFactor);
|
|
7137
7234
|
}
|
|
7138
7235
|
if (particlesCount < particlesNumber) {
|
|
7139
7236
|
this.push(Math.abs(particlesNumber - particlesCount), undefined, options, group);
|
|
@@ -7142,18 +7239,18 @@
|
|
|
7142
7239
|
this.removeQuantity(particlesCount - particlesNumber, group);
|
|
7143
7240
|
}
|
|
7144
7241
|
};
|
|
7145
|
-
|
|
7242
|
+
#createBuckets = (zLayers) => {
|
|
7146
7243
|
const bucketCount = Math.max(Math.floor(zLayers), one);
|
|
7147
7244
|
return Array.from({ length: bucketCount }, () => []);
|
|
7148
7245
|
};
|
|
7149
|
-
|
|
7150
|
-
const maxBucketIndex = this.
|
|
7246
|
+
#getBucketIndex = (zIndex) => {
|
|
7247
|
+
const maxBucketIndex = this.#zBuckets.length - one;
|
|
7151
7248
|
if (maxBucketIndex <= minIndex) {
|
|
7152
7249
|
return minIndex;
|
|
7153
7250
|
}
|
|
7154
7251
|
return Math.min(Math.max(Math.floor(zIndex), minIndex), maxBucketIndex);
|
|
7155
7252
|
};
|
|
7156
|
-
|
|
7253
|
+
#getParticleInsertIndex = (bucket, particleId) => {
|
|
7157
7254
|
let start = minIndex, end = bucket.length;
|
|
7158
7255
|
while (start < end) {
|
|
7159
7256
|
const middle = Math.floor((start + end) / double), middleParticle = bucket[middle];
|
|
@@ -7170,8 +7267,8 @@
|
|
|
7170
7267
|
}
|
|
7171
7268
|
return start;
|
|
7172
7269
|
};
|
|
7173
|
-
|
|
7174
|
-
const container = this
|
|
7270
|
+
#initDensityFactor = densityOptions => {
|
|
7271
|
+
const container = this.#container;
|
|
7175
7272
|
if (!densityOptions.enable) {
|
|
7176
7273
|
return defaultDensityFactor;
|
|
7177
7274
|
}
|
|
@@ -7181,82 +7278,82 @@
|
|
|
7181
7278
|
}
|
|
7182
7279
|
return ((canvasSize.width * canvasSize.height) / (densityOptions.height * densityOptions.width * pxRatio ** squareExp));
|
|
7183
7280
|
};
|
|
7184
|
-
|
|
7185
|
-
const bucketIndex = this
|
|
7281
|
+
#insertParticleIntoBucket = (particle) => {
|
|
7282
|
+
const bucketIndex = this.#getBucketIndex(particle.position.z), bucket = this.#zBuckets[bucketIndex];
|
|
7186
7283
|
if (!bucket) {
|
|
7187
7284
|
return;
|
|
7188
7285
|
}
|
|
7189
|
-
bucket.splice(this
|
|
7190
|
-
this.
|
|
7286
|
+
bucket.splice(this.#getParticleInsertIndex(bucket, particle.id), empty, particle);
|
|
7287
|
+
this.#particleBuckets.set(particle.id, bucketIndex);
|
|
7191
7288
|
};
|
|
7192
|
-
|
|
7193
|
-
const particle = this
|
|
7289
|
+
#removeParticle = (index, group, override) => {
|
|
7290
|
+
const particle = this.#array[index];
|
|
7194
7291
|
if (!particle) {
|
|
7195
7292
|
return false;
|
|
7196
7293
|
}
|
|
7197
7294
|
if (particle.group !== group) {
|
|
7198
7295
|
return false;
|
|
7199
7296
|
}
|
|
7200
|
-
this.
|
|
7201
|
-
this
|
|
7297
|
+
this.#array.splice(index, deleteCount);
|
|
7298
|
+
this.#removeParticleFromBucket(particle);
|
|
7202
7299
|
particle.destroy(override);
|
|
7203
|
-
this.
|
|
7300
|
+
this.#container.dispatchEvent(exports.EventType.particleRemoved, {
|
|
7204
7301
|
particle,
|
|
7205
7302
|
});
|
|
7206
|
-
this
|
|
7303
|
+
this.#addToPool(particle);
|
|
7207
7304
|
return true;
|
|
7208
7305
|
};
|
|
7209
|
-
|
|
7210
|
-
const bucketIndex = this.
|
|
7306
|
+
#removeParticleFromBucket = (particle) => {
|
|
7307
|
+
const bucketIndex = this.#particleBuckets.get(particle.id) ?? this.#getBucketIndex(particle.position.z), bucket = this.#zBuckets[bucketIndex];
|
|
7211
7308
|
if (!bucket) {
|
|
7212
|
-
this.
|
|
7309
|
+
this.#particleBuckets.delete(particle.id);
|
|
7213
7310
|
return;
|
|
7214
7311
|
}
|
|
7215
|
-
const particleIndex = this
|
|
7312
|
+
const particleIndex = this.#getParticleInsertIndex(bucket, particle.id);
|
|
7216
7313
|
if (bucket[particleIndex]?.id !== particle.id) {
|
|
7217
|
-
this.
|
|
7314
|
+
this.#particleBuckets.delete(particle.id);
|
|
7218
7315
|
return;
|
|
7219
7316
|
}
|
|
7220
7317
|
bucket.splice(particleIndex, deleteCount);
|
|
7221
|
-
this.
|
|
7318
|
+
this.#particleBuckets.delete(particle.id);
|
|
7222
7319
|
};
|
|
7223
|
-
|
|
7320
|
+
#resetBuckets = (zLayers) => {
|
|
7224
7321
|
const bucketCount = Math.max(Math.floor(zLayers), one);
|
|
7225
|
-
if (this.
|
|
7226
|
-
this
|
|
7322
|
+
if (this.#zBuckets.length !== bucketCount) {
|
|
7323
|
+
this.#zBuckets = this.#createBuckets(bucketCount);
|
|
7227
7324
|
return;
|
|
7228
7325
|
}
|
|
7229
|
-
for (const bucket of this
|
|
7326
|
+
for (const bucket of this.#zBuckets) {
|
|
7230
7327
|
bucket.length = minIndex;
|
|
7231
7328
|
}
|
|
7232
7329
|
};
|
|
7233
|
-
|
|
7234
|
-
const newBucketIndex = this
|
|
7330
|
+
#updateParticleBucket = (particle) => {
|
|
7331
|
+
const newBucketIndex = this.#getBucketIndex(particle.position.z), currentBucketIndex = this.#particleBuckets.get(particle.id);
|
|
7235
7332
|
if (currentBucketIndex === undefined) {
|
|
7236
|
-
this
|
|
7333
|
+
this.#insertParticleIntoBucket(particle);
|
|
7237
7334
|
return;
|
|
7238
7335
|
}
|
|
7239
7336
|
if (currentBucketIndex === newBucketIndex) {
|
|
7240
7337
|
return;
|
|
7241
7338
|
}
|
|
7242
|
-
const currentBucket = this
|
|
7339
|
+
const currentBucket = this.#zBuckets[currentBucketIndex];
|
|
7243
7340
|
if (currentBucket) {
|
|
7244
|
-
const particleIndex = this
|
|
7341
|
+
const particleIndex = this.#getParticleInsertIndex(currentBucket, particle.id);
|
|
7245
7342
|
if (currentBucket[particleIndex]?.id === particle.id) {
|
|
7246
7343
|
currentBucket.splice(particleIndex, deleteCount);
|
|
7247
7344
|
}
|
|
7248
7345
|
}
|
|
7249
|
-
const newBucket = this
|
|
7346
|
+
const newBucket = this.#zBuckets[newBucketIndex];
|
|
7250
7347
|
if (!newBucket) {
|
|
7251
|
-
this.
|
|
7348
|
+
this.#particleBuckets.set(particle.id, newBucketIndex);
|
|
7252
7349
|
return;
|
|
7253
7350
|
}
|
|
7254
|
-
newBucket.splice(this
|
|
7255
|
-
this.
|
|
7351
|
+
newBucket.splice(this.#getParticleInsertIndex(newBucket, particle.id), empty, particle);
|
|
7352
|
+
this.#particleBuckets.set(particle.id, newBucketIndex);
|
|
7256
7353
|
};
|
|
7257
|
-
|
|
7258
|
-
const particlesToDelete = new Set(), resizeFactor = this
|
|
7259
|
-
for (const particle of this
|
|
7354
|
+
#updateParticlesPhase1 = (delta) => {
|
|
7355
|
+
const particlesToDelete = new Set(), resizeFactor = this.#resizeFactor;
|
|
7356
|
+
for (const particle of this.#array) {
|
|
7260
7357
|
if (resizeFactor && !particle.ignoresResizeRatio) {
|
|
7261
7358
|
particle.position.x *= resizeFactor.width;
|
|
7262
7359
|
particle.position.y *= resizeFactor.height;
|
|
@@ -7264,10 +7361,10 @@
|
|
|
7264
7361
|
particle.initialPosition.y *= resizeFactor.height;
|
|
7265
7362
|
}
|
|
7266
7363
|
particle.ignoresResizeRatio = false;
|
|
7267
|
-
for (const plugin of this
|
|
7364
|
+
for (const plugin of this.#particleResetPlugins) {
|
|
7268
7365
|
plugin.particleReset?.(particle);
|
|
7269
7366
|
}
|
|
7270
|
-
for (const plugin of this
|
|
7367
|
+
for (const plugin of this.#particleUpdatePlugins) {
|
|
7271
7368
|
if (particle.destroyed) {
|
|
7272
7369
|
break;
|
|
7273
7370
|
}
|
|
@@ -7281,36 +7378,36 @@
|
|
|
7281
7378
|
}
|
|
7282
7379
|
return particlesToDelete;
|
|
7283
7380
|
};
|
|
7284
|
-
|
|
7285
|
-
for (const particle of this
|
|
7381
|
+
#updateParticlesPhase2 = (delta, particlesToDelete) => {
|
|
7382
|
+
for (const particle of this.#array) {
|
|
7286
7383
|
if (particle.destroyed) {
|
|
7287
7384
|
particlesToDelete.add(particle);
|
|
7288
7385
|
continue;
|
|
7289
7386
|
}
|
|
7290
|
-
for (const updater of this.
|
|
7387
|
+
for (const updater of this.#container.particleUpdaters) {
|
|
7291
7388
|
updater.update(particle, delta);
|
|
7292
7389
|
}
|
|
7293
7390
|
if (!particle.spawning) {
|
|
7294
|
-
for (const plugin of this
|
|
7391
|
+
for (const plugin of this.#postParticleUpdatePlugins) {
|
|
7295
7392
|
plugin.postParticleUpdate?.(particle, delta);
|
|
7296
7393
|
}
|
|
7297
7394
|
}
|
|
7298
|
-
this
|
|
7395
|
+
this.#updateParticleBucket(particle);
|
|
7299
7396
|
}
|
|
7300
7397
|
};
|
|
7301
7398
|
}
|
|
7302
7399
|
|
|
7303
7400
|
class Retina {
|
|
7304
|
-
container;
|
|
7305
7401
|
pixelRatio;
|
|
7306
7402
|
reduceFactor;
|
|
7403
|
+
#container;
|
|
7307
7404
|
constructor(container) {
|
|
7308
|
-
this
|
|
7405
|
+
this.#container = container;
|
|
7309
7406
|
this.pixelRatio = defaultRatio;
|
|
7310
7407
|
this.reduceFactor = defaultReduceFactor;
|
|
7311
7408
|
}
|
|
7312
7409
|
init() {
|
|
7313
|
-
const container = this
|
|
7410
|
+
const container = this.#container, options = container.actualOptions;
|
|
7314
7411
|
this.pixelRatio = options.detectRetina ? devicePixelRatio : defaultRatio;
|
|
7315
7412
|
this.reduceFactor = defaultReduceFactor;
|
|
7316
7413
|
const ratio = this.pixelRatio, canvas = container.canvas, element = canvas.domElement;
|
|
@@ -7324,7 +7421,6 @@
|
|
|
7324
7421
|
props.maxSpeed = getRangeValue(moveOptions.gravity.maxSpeed) * ratio;
|
|
7325
7422
|
props.moveDrift = getRangeValue(moveOptions.drift) * ratio;
|
|
7326
7423
|
props.moveSpeed = getRangeValue(moveOptions.speed) * ratio;
|
|
7327
|
-
props.sizeAnimationSpeed = getRangeValue(options.size.animation.speed) * ratio;
|
|
7328
7424
|
const maxDistance = props.maxDistance;
|
|
7329
7425
|
maxDistance.horizontal = moveDistance.horizontal === undefined ? undefined : moveDistance.horizontal * ratio;
|
|
7330
7426
|
maxDistance.vertical = moveDistance.vertical === undefined ? undefined : moveDistance.vertical * ratio;
|
|
@@ -7362,73 +7458,73 @@
|
|
|
7362
7458
|
shapeDrawers;
|
|
7363
7459
|
started;
|
|
7364
7460
|
zLayers;
|
|
7365
|
-
|
|
7366
|
-
|
|
7367
|
-
|
|
7368
|
-
|
|
7369
|
-
|
|
7370
|
-
|
|
7371
|
-
|
|
7372
|
-
|
|
7373
|
-
|
|
7374
|
-
|
|
7375
|
-
|
|
7376
|
-
|
|
7377
|
-
|
|
7378
|
-
|
|
7379
|
-
|
|
7380
|
-
|
|
7381
|
-
|
|
7461
|
+
#delay;
|
|
7462
|
+
#delayTimeout;
|
|
7463
|
+
#delta = { value: 0, factor: 0 };
|
|
7464
|
+
#dispatchCallback;
|
|
7465
|
+
#drawAnimationFrame;
|
|
7466
|
+
#duration;
|
|
7467
|
+
#eventListeners;
|
|
7468
|
+
#firstStart;
|
|
7469
|
+
#initialSourceOptions;
|
|
7470
|
+
#lastFrameTime;
|
|
7471
|
+
#lifeTime;
|
|
7472
|
+
#onDestroy;
|
|
7473
|
+
#options;
|
|
7474
|
+
#paused;
|
|
7475
|
+
#pluginManager;
|
|
7476
|
+
#smooth;
|
|
7477
|
+
#sourceOptions;
|
|
7382
7478
|
constructor(params) {
|
|
7383
7479
|
const { dispatchCallback, pluginManager, id, onDestroy, sourceOptions } = params;
|
|
7384
|
-
this
|
|
7385
|
-
this
|
|
7386
|
-
this
|
|
7480
|
+
this.#pluginManager = pluginManager;
|
|
7481
|
+
this.#dispatchCallback = dispatchCallback;
|
|
7482
|
+
this.#onDestroy = onDestroy;
|
|
7387
7483
|
this.id = Symbol(id);
|
|
7388
7484
|
this.fpsLimit = 120;
|
|
7389
7485
|
this.hdr = false;
|
|
7390
|
-
this
|
|
7391
|
-
this
|
|
7392
|
-
this
|
|
7393
|
-
this
|
|
7394
|
-
this
|
|
7486
|
+
this.#smooth = false;
|
|
7487
|
+
this.#delay = 0;
|
|
7488
|
+
this.#duration = 0;
|
|
7489
|
+
this.#lifeTime = 0;
|
|
7490
|
+
this.#firstStart = true;
|
|
7395
7491
|
this.started = false;
|
|
7396
7492
|
this.destroyed = false;
|
|
7397
|
-
this
|
|
7398
|
-
this
|
|
7493
|
+
this.#paused = true;
|
|
7494
|
+
this.#lastFrameTime = 0;
|
|
7399
7495
|
this.zLayers = 100;
|
|
7400
7496
|
this.pageHidden = false;
|
|
7401
|
-
this
|
|
7402
|
-
this
|
|
7497
|
+
this.#sourceOptions = sourceOptions;
|
|
7498
|
+
this.#initialSourceOptions = sourceOptions;
|
|
7403
7499
|
this.effectDrawers = new Map();
|
|
7404
7500
|
this.shapeDrawers = new Map();
|
|
7405
7501
|
this.particleUpdaters = [];
|
|
7406
7502
|
this.retina = new Retina(this);
|
|
7407
|
-
this.canvas = new CanvasManager(this
|
|
7408
|
-
this.particles = new ParticlesManager(this
|
|
7503
|
+
this.canvas = new CanvasManager(this.#pluginManager, this);
|
|
7504
|
+
this.particles = new ParticlesManager(this.#pluginManager, this);
|
|
7409
7505
|
this.plugins = [];
|
|
7410
7506
|
this.particleDestroyedPlugins = [];
|
|
7411
7507
|
this.particleCreatedPlugins = [];
|
|
7412
7508
|
this.particlePositionPlugins = [];
|
|
7413
|
-
this
|
|
7414
|
-
this.actualOptions = loadContainerOptions(this
|
|
7415
|
-
this
|
|
7509
|
+
this.#options = loadContainerOptions(this.#pluginManager, this);
|
|
7510
|
+
this.actualOptions = loadContainerOptions(this.#pluginManager, this);
|
|
7511
|
+
this.#eventListeners = new EventListeners(this);
|
|
7416
7512
|
this.dispatchEvent(exports.EventType.containerBuilt);
|
|
7417
7513
|
}
|
|
7418
7514
|
get animationStatus() {
|
|
7419
|
-
return !this
|
|
7515
|
+
return !this.#paused && !this.pageHidden && guardCheck(this);
|
|
7420
7516
|
}
|
|
7421
7517
|
get options() {
|
|
7422
|
-
return this
|
|
7518
|
+
return this.#options;
|
|
7423
7519
|
}
|
|
7424
7520
|
get sourceOptions() {
|
|
7425
|
-
return this
|
|
7521
|
+
return this.#sourceOptions;
|
|
7426
7522
|
}
|
|
7427
7523
|
addLifeTime(value) {
|
|
7428
|
-
this
|
|
7524
|
+
this.#lifeTime += value;
|
|
7429
7525
|
}
|
|
7430
7526
|
alive() {
|
|
7431
|
-
return !this
|
|
7527
|
+
return !this.#duration || this.#lifeTime <= this.#duration;
|
|
7432
7528
|
}
|
|
7433
7529
|
destroy(remove = true) {
|
|
7434
7530
|
if (!guardCheck(this)) {
|
|
@@ -7450,13 +7546,13 @@
|
|
|
7450
7546
|
this.shapeDrawers = new Map();
|
|
7451
7547
|
this.particleUpdaters = [];
|
|
7452
7548
|
this.plugins.length = 0;
|
|
7453
|
-
this.
|
|
7549
|
+
this.#pluginManager.clearPlugins(this);
|
|
7454
7550
|
this.destroyed = true;
|
|
7455
|
-
this
|
|
7551
|
+
this.#onDestroy(remove);
|
|
7456
7552
|
this.dispatchEvent(exports.EventType.containerDestroyed);
|
|
7457
7553
|
}
|
|
7458
7554
|
dispatchEvent(type, data) {
|
|
7459
|
-
this
|
|
7555
|
+
this.#dispatchCallback(type, {
|
|
7460
7556
|
container: this,
|
|
7461
7557
|
data,
|
|
7462
7558
|
});
|
|
@@ -7466,12 +7562,12 @@
|
|
|
7466
7562
|
return;
|
|
7467
7563
|
}
|
|
7468
7564
|
let refreshTime = force;
|
|
7469
|
-
this
|
|
7565
|
+
this.#drawAnimationFrame = animate((timestamp) => {
|
|
7470
7566
|
if (refreshTime) {
|
|
7471
|
-
this
|
|
7567
|
+
this.#lastFrameTime = undefined;
|
|
7472
7568
|
refreshTime = false;
|
|
7473
7569
|
}
|
|
7474
|
-
this
|
|
7570
|
+
this.#nextFrame(timestamp);
|
|
7475
7571
|
});
|
|
7476
7572
|
}
|
|
7477
7573
|
async export(type, options = {}) {
|
|
@@ -7493,7 +7589,7 @@
|
|
|
7493
7589
|
return;
|
|
7494
7590
|
}
|
|
7495
7591
|
const allContainerPlugins = new Map();
|
|
7496
|
-
for (const plugin of this.
|
|
7592
|
+
for (const plugin of this.#pluginManager.plugins) {
|
|
7497
7593
|
const containerPlugin = await plugin.getPlugin(this);
|
|
7498
7594
|
if (containerPlugin.preInit) {
|
|
7499
7595
|
await containerPlugin.preInit();
|
|
@@ -7501,8 +7597,8 @@
|
|
|
7501
7597
|
allContainerPlugins.set(plugin, containerPlugin);
|
|
7502
7598
|
}
|
|
7503
7599
|
await this.initDrawersAndUpdaters();
|
|
7504
|
-
this
|
|
7505
|
-
this.actualOptions = loadContainerOptions(this
|
|
7600
|
+
this.#options = loadContainerOptions(this.#pluginManager, this, this.#initialSourceOptions, this.sourceOptions);
|
|
7601
|
+
this.actualOptions = loadContainerOptions(this.#pluginManager, this, this.#options);
|
|
7506
7602
|
this.plugins.length = 0;
|
|
7507
7603
|
this.particleDestroyedPlugins.length = 0;
|
|
7508
7604
|
this.particleCreatedPlugins.length = 0;
|
|
@@ -7529,11 +7625,11 @@
|
|
|
7529
7625
|
const { delay, duration, fpsLimit, hdr, smooth, zLayers } = this.actualOptions;
|
|
7530
7626
|
this.hdr = hdr;
|
|
7531
7627
|
this.zLayers = zLayers;
|
|
7532
|
-
this
|
|
7533
|
-
this
|
|
7534
|
-
this
|
|
7628
|
+
this.#duration = getRangeValue(duration) * millisecondsToSeconds;
|
|
7629
|
+
this.#delay = getRangeValue(delay) * millisecondsToSeconds;
|
|
7630
|
+
this.#lifeTime = 0;
|
|
7535
7631
|
this.fpsLimit = fpsLimit > minFpsLimit ? fpsLimit : defaultFpsLimit;
|
|
7536
|
-
this
|
|
7632
|
+
this.#smooth = smooth;
|
|
7537
7633
|
for (const plugin of this.plugins) {
|
|
7538
7634
|
await plugin.init?.();
|
|
7539
7635
|
}
|
|
@@ -7546,7 +7642,7 @@
|
|
|
7546
7642
|
this.dispatchEvent(exports.EventType.particlesSetup);
|
|
7547
7643
|
}
|
|
7548
7644
|
async initDrawersAndUpdaters() {
|
|
7549
|
-
const pluginManager = this
|
|
7645
|
+
const pluginManager = this.#pluginManager;
|
|
7550
7646
|
this.effectDrawers = await pluginManager.getEffectDrawers(this, true);
|
|
7551
7647
|
this.shapeDrawers = await pluginManager.getShapeDrawers(this, true);
|
|
7552
7648
|
this.particleUpdaters = await pluginManager.getUpdaters(this, true);
|
|
@@ -7555,18 +7651,18 @@
|
|
|
7555
7651
|
if (!guardCheck(this)) {
|
|
7556
7652
|
return;
|
|
7557
7653
|
}
|
|
7558
|
-
if (this
|
|
7559
|
-
cancelAnimation(this
|
|
7560
|
-
|
|
7654
|
+
if (this.#drawAnimationFrame !== undefined) {
|
|
7655
|
+
cancelAnimation(this.#drawAnimationFrame);
|
|
7656
|
+
this.#drawAnimationFrame = undefined;
|
|
7561
7657
|
}
|
|
7562
|
-
if (this
|
|
7658
|
+
if (this.#paused) {
|
|
7563
7659
|
return;
|
|
7564
7660
|
}
|
|
7565
7661
|
for (const plugin of this.plugins) {
|
|
7566
7662
|
plugin.pause?.();
|
|
7567
7663
|
}
|
|
7568
7664
|
if (!this.pageHidden) {
|
|
7569
|
-
this
|
|
7665
|
+
this.#paused = true;
|
|
7570
7666
|
}
|
|
7571
7667
|
this.dispatchEvent(exports.EventType.containerPaused);
|
|
7572
7668
|
}
|
|
@@ -7574,13 +7670,13 @@
|
|
|
7574
7670
|
if (!guardCheck(this)) {
|
|
7575
7671
|
return;
|
|
7576
7672
|
}
|
|
7577
|
-
const needsUpdate = this
|
|
7578
|
-
if (this
|
|
7579
|
-
this
|
|
7673
|
+
const needsUpdate = this.#paused || force;
|
|
7674
|
+
if (this.#firstStart && !this.actualOptions.autoPlay) {
|
|
7675
|
+
this.#firstStart = false;
|
|
7580
7676
|
return;
|
|
7581
7677
|
}
|
|
7582
|
-
if (this
|
|
7583
|
-
this
|
|
7678
|
+
if (this.#paused) {
|
|
7679
|
+
this.#paused = false;
|
|
7584
7680
|
}
|
|
7585
7681
|
if (needsUpdate) {
|
|
7586
7682
|
for (const plugin of this.plugins) {
|
|
@@ -7603,10 +7699,10 @@
|
|
|
7603
7699
|
if (!guardCheck(this)) {
|
|
7604
7700
|
return;
|
|
7605
7701
|
}
|
|
7606
|
-
this
|
|
7607
|
-
this
|
|
7608
|
-
this
|
|
7609
|
-
this.actualOptions = loadContainerOptions(this
|
|
7702
|
+
this.#initialSourceOptions = sourceOptions;
|
|
7703
|
+
this.#sourceOptions = sourceOptions;
|
|
7704
|
+
this.#options = loadContainerOptions(this.#pluginManager, this, this.#initialSourceOptions, this.sourceOptions);
|
|
7705
|
+
this.actualOptions = loadContainerOptions(this.#pluginManager, this, this.#options);
|
|
7610
7706
|
return this.refresh();
|
|
7611
7707
|
}
|
|
7612
7708
|
async start() {
|
|
@@ -7617,7 +7713,7 @@
|
|
|
7617
7713
|
this.started = true;
|
|
7618
7714
|
await new Promise(resolve => {
|
|
7619
7715
|
const start = async () => {
|
|
7620
|
-
this.
|
|
7716
|
+
this.#eventListeners.addListeners();
|
|
7621
7717
|
for (const plugin of this.plugins) {
|
|
7622
7718
|
await plugin.start?.();
|
|
7623
7719
|
}
|
|
@@ -7625,20 +7721,20 @@
|
|
|
7625
7721
|
this.play();
|
|
7626
7722
|
resolve();
|
|
7627
7723
|
};
|
|
7628
|
-
this
|
|
7724
|
+
this.#delayTimeout = setTimeout(() => void start(), this.#delay);
|
|
7629
7725
|
});
|
|
7630
7726
|
}
|
|
7631
7727
|
stop() {
|
|
7632
7728
|
if (!guardCheck(this) || !this.started) {
|
|
7633
7729
|
return;
|
|
7634
7730
|
}
|
|
7635
|
-
if (this
|
|
7636
|
-
clearTimeout(this
|
|
7637
|
-
|
|
7731
|
+
if (this.#delayTimeout) {
|
|
7732
|
+
clearTimeout(this.#delayTimeout);
|
|
7733
|
+
this.#delayTimeout = undefined;
|
|
7638
7734
|
}
|
|
7639
|
-
this
|
|
7735
|
+
this.#firstStart = true;
|
|
7640
7736
|
this.started = false;
|
|
7641
|
-
this.
|
|
7737
|
+
this.#eventListeners.removeListeners();
|
|
7642
7738
|
this.pause();
|
|
7643
7739
|
this.particles.clear();
|
|
7644
7740
|
this.canvas.stop();
|
|
@@ -7648,7 +7744,7 @@
|
|
|
7648
7744
|
this.particleCreatedPlugins.length = 0;
|
|
7649
7745
|
this.particleDestroyedPlugins.length = 0;
|
|
7650
7746
|
this.particlePositionPlugins.length = 0;
|
|
7651
|
-
this
|
|
7747
|
+
this.#sourceOptions = this.#options;
|
|
7652
7748
|
this.dispatchEvent(exports.EventType.containerStopped);
|
|
7653
7749
|
}
|
|
7654
7750
|
updateActualOptions() {
|
|
@@ -7660,23 +7756,23 @@
|
|
|
7660
7756
|
}
|
|
7661
7757
|
return refresh;
|
|
7662
7758
|
}
|
|
7663
|
-
|
|
7759
|
+
#nextFrame = (timestamp) => {
|
|
7664
7760
|
try {
|
|
7665
|
-
if (!this
|
|
7666
|
-
this
|
|
7667
|
-
timestamp < this
|
|
7761
|
+
if (!this.#smooth &&
|
|
7762
|
+
this.#lastFrameTime !== undefined &&
|
|
7763
|
+
timestamp < this.#lastFrameTime + millisecondsToSeconds / this.fpsLimit) {
|
|
7668
7764
|
this.draw(false);
|
|
7669
7765
|
return;
|
|
7670
7766
|
}
|
|
7671
|
-
this
|
|
7672
|
-
updateDelta(this
|
|
7673
|
-
this.addLifeTime(this.
|
|
7674
|
-
this
|
|
7675
|
-
if (this.
|
|
7767
|
+
this.#lastFrameTime ??= timestamp;
|
|
7768
|
+
updateDelta(this.#delta, timestamp - this.#lastFrameTime, this.fpsLimit, this.#smooth);
|
|
7769
|
+
this.addLifeTime(this.#delta.value);
|
|
7770
|
+
this.#lastFrameTime = timestamp;
|
|
7771
|
+
if (this.#delta.value > millisecondsToSeconds) {
|
|
7676
7772
|
this.draw(false);
|
|
7677
7773
|
return;
|
|
7678
7774
|
}
|
|
7679
|
-
this.canvas.render.drawParticles(this
|
|
7775
|
+
this.canvas.render.drawParticles(this.#delta);
|
|
7680
7776
|
if (!this.alive()) {
|
|
7681
7777
|
this.destroy();
|
|
7682
7778
|
return;
|
|
@@ -7697,18 +7793,18 @@
|
|
|
7697
7793
|
});
|
|
7698
7794
|
|
|
7699
7795
|
class FireworksInstance {
|
|
7700
|
-
|
|
7796
|
+
#container;
|
|
7701
7797
|
constructor(container) {
|
|
7702
|
-
this
|
|
7798
|
+
this.#container = container;
|
|
7703
7799
|
}
|
|
7704
7800
|
pause() {
|
|
7705
|
-
this.
|
|
7801
|
+
this.#container.pause();
|
|
7706
7802
|
}
|
|
7707
7803
|
play() {
|
|
7708
|
-
this.
|
|
7804
|
+
this.#container.play();
|
|
7709
7805
|
}
|
|
7710
7806
|
stop() {
|
|
7711
|
-
this.
|
|
7807
|
+
this.#container.stop();
|
|
7712
7808
|
}
|
|
7713
7809
|
}
|
|
7714
7810
|
|
|
@@ -7718,10 +7814,10 @@
|
|
|
7718
7814
|
});
|
|
7719
7815
|
|
|
7720
7816
|
class BlendPluginInstance {
|
|
7721
|
-
|
|
7722
|
-
|
|
7817
|
+
#container;
|
|
7818
|
+
#defaultCompositeValue;
|
|
7723
7819
|
constructor(container) {
|
|
7724
|
-
this
|
|
7820
|
+
this.#container = container;
|
|
7725
7821
|
}
|
|
7726
7822
|
drawParticleCleanup(context, particle) {
|
|
7727
7823
|
if (!particle.options.blend?.enable) {
|
|
@@ -7738,14 +7834,14 @@
|
|
|
7738
7834
|
context.globalCompositeOperation = particle.options.blend.mode;
|
|
7739
7835
|
}
|
|
7740
7836
|
drawSettingsCleanup(context) {
|
|
7741
|
-
if (!this
|
|
7837
|
+
if (!this.#defaultCompositeValue) {
|
|
7742
7838
|
return;
|
|
7743
7839
|
}
|
|
7744
|
-
context.globalCompositeOperation = this
|
|
7840
|
+
context.globalCompositeOperation = this.#defaultCompositeValue;
|
|
7745
7841
|
}
|
|
7746
7842
|
drawSettingsSetup(context) {
|
|
7747
|
-
const previousComposite = context.globalCompositeOperation, blend = this.
|
|
7748
|
-
this
|
|
7843
|
+
const previousComposite = context.globalCompositeOperation, blend = this.#container.actualOptions.blend;
|
|
7844
|
+
this.#defaultCompositeValue = previousComposite;
|
|
7749
7845
|
context.globalCompositeOperation = blend?.enable ? blend.mode : previousComposite;
|
|
7750
7846
|
}
|
|
7751
7847
|
}
|
|
@@ -7888,11 +7984,11 @@
|
|
|
7888
7984
|
class MovePluginInstance {
|
|
7889
7985
|
availablePathGenerators;
|
|
7890
7986
|
pathGenerators;
|
|
7891
|
-
|
|
7892
|
-
|
|
7987
|
+
#container;
|
|
7988
|
+
#pluginManager;
|
|
7893
7989
|
constructor(pluginManager, container) {
|
|
7894
|
-
this
|
|
7895
|
-
this
|
|
7990
|
+
this.#pluginManager = pluginManager;
|
|
7991
|
+
this.#container = container;
|
|
7896
7992
|
this.availablePathGenerators = new Map();
|
|
7897
7993
|
this.pathGenerators = new Map();
|
|
7898
7994
|
}
|
|
@@ -7923,7 +8019,7 @@
|
|
|
7923
8019
|
acceleration: getRangeValue(gravityOptions.acceleration),
|
|
7924
8020
|
inverse: gravityOptions.inverse,
|
|
7925
8021
|
};
|
|
7926
|
-
initSpin(this
|
|
8022
|
+
initSpin(this.#container, particle);
|
|
7927
8023
|
}
|
|
7928
8024
|
particleDestroyed(particle) {
|
|
7929
8025
|
const pathGenerator = particle.pathGenerator;
|
|
@@ -7934,7 +8030,7 @@
|
|
|
7934
8030
|
if (!moveOptions.enable) {
|
|
7935
8031
|
return;
|
|
7936
8032
|
}
|
|
7937
|
-
const container = this
|
|
8033
|
+
const container = this.#container, slowFactor = getProximitySpeedFactor(particle), reduceFactor = container.retina.reduceFactor, baseSpeed = particle.retina.moveSpeed, moveDrift = particle.retina.moveDrift, maxSize = particle.size.max, sizeFactor = moveOptions.size ? particle.getRadius() / maxSize : defaultSizeFactor, deltaFactor = delta.factor || defaultDeltaFactor, moveSpeed = baseSpeed * sizeFactor * slowFactor * deltaFactor * half, maxSpeed = particle.retina.maxSpeed;
|
|
7938
8034
|
if (moveOptions.spin.enable) {
|
|
7939
8035
|
spin(container, particle, moveSpeed, reduceFactor);
|
|
7940
8036
|
}
|
|
@@ -7944,18 +8040,18 @@
|
|
|
7944
8040
|
applyDistance(particle);
|
|
7945
8041
|
}
|
|
7946
8042
|
preInit() {
|
|
7947
|
-
return this
|
|
8043
|
+
return this.#init();
|
|
7948
8044
|
}
|
|
7949
8045
|
redrawInit() {
|
|
7950
|
-
return this
|
|
8046
|
+
return this.#init();
|
|
7951
8047
|
}
|
|
7952
8048
|
update() {
|
|
7953
8049
|
for (const pathGenerator of this.pathGenerators.values()) {
|
|
7954
8050
|
pathGenerator.update();
|
|
7955
8051
|
}
|
|
7956
8052
|
}
|
|
7957
|
-
async
|
|
7958
|
-
const availablePathGenerators = await this.
|
|
8053
|
+
async #init() {
|
|
8054
|
+
const availablePathGenerators = await this.#pluginManager.getPathGenerators?.(this.#container, true);
|
|
7959
8055
|
if (!availablePathGenerators) {
|
|
7960
8056
|
return;
|
|
7961
8057
|
}
|
|
@@ -7973,44 +8069,44 @@
|
|
|
7973
8069
|
});
|
|
7974
8070
|
|
|
7975
8071
|
class EmittersPluginInstance {
|
|
7976
|
-
container;
|
|
7977
|
-
|
|
8072
|
+
#container;
|
|
8073
|
+
#instancesManager;
|
|
7978
8074
|
constructor(instancesManager, container) {
|
|
7979
|
-
this
|
|
7980
|
-
this
|
|
7981
|
-
this.
|
|
8075
|
+
this.#instancesManager = instancesManager;
|
|
8076
|
+
this.#container = container;
|
|
8077
|
+
this.#instancesManager.initContainer(container);
|
|
7982
8078
|
}
|
|
7983
8079
|
async init() {
|
|
7984
|
-
const emittersOptions = this
|
|
8080
|
+
const emittersOptions = this.#container.actualOptions.emitters;
|
|
7985
8081
|
if (isArray(emittersOptions)) {
|
|
7986
8082
|
for (const emitterOptions of emittersOptions) {
|
|
7987
|
-
await this.
|
|
8083
|
+
await this.#instancesManager.addEmitter(this.#container, emitterOptions);
|
|
7988
8084
|
}
|
|
7989
8085
|
}
|
|
7990
8086
|
else {
|
|
7991
|
-
await this.
|
|
8087
|
+
await this.#instancesManager.addEmitter(this.#container, emittersOptions);
|
|
7992
8088
|
}
|
|
7993
8089
|
}
|
|
7994
8090
|
pause() {
|
|
7995
|
-
for (const emitter of this.
|
|
8091
|
+
for (const emitter of this.#instancesManager.getArray(this.#container)) {
|
|
7996
8092
|
emitter.pause();
|
|
7997
8093
|
}
|
|
7998
8094
|
}
|
|
7999
8095
|
play() {
|
|
8000
|
-
for (const emitter of this.
|
|
8096
|
+
for (const emitter of this.#instancesManager.getArray(this.#container)) {
|
|
8001
8097
|
emitter.play();
|
|
8002
8098
|
}
|
|
8003
8099
|
}
|
|
8004
8100
|
resize() {
|
|
8005
|
-
for (const emitter of this.
|
|
8101
|
+
for (const emitter of this.#instancesManager.getArray(this.#container)) {
|
|
8006
8102
|
emitter.resize();
|
|
8007
8103
|
}
|
|
8008
8104
|
}
|
|
8009
8105
|
stop() {
|
|
8010
|
-
this.
|
|
8106
|
+
this.#instancesManager.clear(this.#container);
|
|
8011
8107
|
}
|
|
8012
8108
|
update(delta) {
|
|
8013
|
-
this.
|
|
8109
|
+
this.#instancesManager.getArray(this.#container).forEach(emitter => {
|
|
8014
8110
|
emitter.update(delta);
|
|
8015
8111
|
});
|
|
8016
8112
|
}
|
|
@@ -8043,16 +8139,16 @@
|
|
|
8043
8139
|
|
|
8044
8140
|
const defaultIndex = 0;
|
|
8045
8141
|
class EmittersInstancesManager {
|
|
8046
|
-
|
|
8047
|
-
|
|
8142
|
+
#containerArrays;
|
|
8143
|
+
#pluginManager;
|
|
8048
8144
|
constructor(pluginManager) {
|
|
8049
|
-
this
|
|
8050
|
-
this
|
|
8145
|
+
this.#containerArrays = new Map();
|
|
8146
|
+
this.#pluginManager = pluginManager;
|
|
8051
8147
|
}
|
|
8052
8148
|
async addEmitter(container, options, position) {
|
|
8053
8149
|
const emitterOptions = new Emitter();
|
|
8054
8150
|
emitterOptions.load(options);
|
|
8055
|
-
const { EmitterInstance } = await Promise.resolve().then(function () { return EmitterInstance$1; }), emitter = new EmitterInstance(this
|
|
8151
|
+
const { EmitterInstance } = await Promise.resolve().then(function () { return EmitterInstance$1; }), emitter = new EmitterInstance(this.#pluginManager, container, (emitter) => {
|
|
8056
8152
|
this.removeEmitter(container, emitter);
|
|
8057
8153
|
}, emitterOptions, position);
|
|
8058
8154
|
await emitter.init();
|
|
@@ -8061,22 +8157,22 @@
|
|
|
8061
8157
|
}
|
|
8062
8158
|
clear(container) {
|
|
8063
8159
|
this.initContainer(container);
|
|
8064
|
-
this.
|
|
8160
|
+
this.#containerArrays.set(container, []);
|
|
8065
8161
|
}
|
|
8066
8162
|
getArray(container) {
|
|
8067
8163
|
this.initContainer(container);
|
|
8068
|
-
let array = this.
|
|
8164
|
+
let array = this.#containerArrays.get(container);
|
|
8069
8165
|
if (!array) {
|
|
8070
8166
|
array = [];
|
|
8071
|
-
this.
|
|
8167
|
+
this.#containerArrays.set(container, array);
|
|
8072
8168
|
}
|
|
8073
8169
|
return array;
|
|
8074
8170
|
}
|
|
8075
8171
|
initContainer(container) {
|
|
8076
|
-
if (this.
|
|
8172
|
+
if (this.#containerArrays.has(container)) {
|
|
8077
8173
|
return;
|
|
8078
8174
|
}
|
|
8079
|
-
this.
|
|
8175
|
+
this.#containerArrays.set(container, []);
|
|
8080
8176
|
container.getEmitter = (idxOrName) => {
|
|
8081
8177
|
const array = this.getArray(container);
|
|
8082
8178
|
return idxOrName === undefined || isNumber(idxOrName)
|
|
@@ -8156,25 +8252,25 @@
|
|
|
8156
8252
|
icon.style.cssText += style;
|
|
8157
8253
|
}
|
|
8158
8254
|
class SoundsPluginInstance {
|
|
8159
|
-
|
|
8160
|
-
|
|
8161
|
-
|
|
8162
|
-
|
|
8163
|
-
|
|
8164
|
-
|
|
8165
|
-
|
|
8166
|
-
|
|
8167
|
-
|
|
8168
|
-
|
|
8255
|
+
#audioMap;
|
|
8256
|
+
#audioSources;
|
|
8257
|
+
#container;
|
|
8258
|
+
#engine;
|
|
8259
|
+
#gain;
|
|
8260
|
+
#muteImg;
|
|
8261
|
+
#unmuteImg;
|
|
8262
|
+
#volume;
|
|
8263
|
+
#volumeDownImg;
|
|
8264
|
+
#volumeUpImg;
|
|
8169
8265
|
constructor(container, engine) {
|
|
8170
|
-
this
|
|
8171
|
-
this
|
|
8172
|
-
this
|
|
8173
|
-
this
|
|
8174
|
-
this
|
|
8266
|
+
this.#container = container;
|
|
8267
|
+
this.#engine = engine;
|
|
8268
|
+
this.#volume = 0;
|
|
8269
|
+
this.#audioSources = [];
|
|
8270
|
+
this.#audioMap = new Map();
|
|
8175
8271
|
}
|
|
8176
8272
|
async init() {
|
|
8177
|
-
const container = this
|
|
8273
|
+
const container = this.#container, options = container.actualOptions, soundsOptions = options.sounds;
|
|
8178
8274
|
if (!soundsOptions?.enable) {
|
|
8179
8275
|
return;
|
|
8180
8276
|
}
|
|
@@ -8191,9 +8287,9 @@
|
|
|
8191
8287
|
addEventListener(mouseDownEvent, firstClickHandler, listenerOptions);
|
|
8192
8288
|
addEventListener(touchStartEvent, firstClickHandler, listenerOptions);
|
|
8193
8289
|
}
|
|
8194
|
-
this
|
|
8290
|
+
this.#volume = soundsOptions.volume.value;
|
|
8195
8291
|
const events = soundsOptions.events;
|
|
8196
|
-
this
|
|
8292
|
+
this.#audioMap = new Map();
|
|
8197
8293
|
for (const event of events) {
|
|
8198
8294
|
if (!event.audio) {
|
|
8199
8295
|
continue;
|
|
@@ -8203,8 +8299,8 @@
|
|
|
8203
8299
|
if (!response.ok) {
|
|
8204
8300
|
return;
|
|
8205
8301
|
}
|
|
8206
|
-
const arrayBuffer = await response.arrayBuffer(), audioContext = this
|
|
8207
|
-
this.
|
|
8302
|
+
const arrayBuffer = await response.arrayBuffer(), audioContext = this.#getAudioContext(), audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
|
|
8303
|
+
this.#audioMap.set(audio.source, audioBuffer);
|
|
8208
8304
|
});
|
|
8209
8305
|
if (promises instanceof Promise) {
|
|
8210
8306
|
await promises;
|
|
@@ -8215,12 +8311,12 @@
|
|
|
8215
8311
|
}
|
|
8216
8312
|
}
|
|
8217
8313
|
async mute() {
|
|
8218
|
-
if (!this.
|
|
8314
|
+
if (!this.#container.muted) {
|
|
8219
8315
|
await this.toggleMute();
|
|
8220
8316
|
}
|
|
8221
8317
|
}
|
|
8222
8318
|
async start() {
|
|
8223
|
-
const container = this
|
|
8319
|
+
const container = this.#container, options = container.actualOptions, soundsOptions = options.sounds;
|
|
8224
8320
|
if (!soundsOptions?.enable || !container.canvas.domElement) {
|
|
8225
8321
|
return;
|
|
8226
8322
|
}
|
|
@@ -8231,7 +8327,7 @@
|
|
|
8231
8327
|
}, { mute, unmute, volumeDown, volumeUp } = soundsOptions.icons, margin = 10, toggleMute = async () => {
|
|
8232
8328
|
await this.toggleMute();
|
|
8233
8329
|
}, enableIcons = soundsOptions.icons.enable, display = enableIcons ? ImageDisplay.Block : ImageDisplay.None;
|
|
8234
|
-
this
|
|
8330
|
+
this.#muteImg = initImage({
|
|
8235
8331
|
container,
|
|
8236
8332
|
options,
|
|
8237
8333
|
pos,
|
|
@@ -8241,7 +8337,7 @@
|
|
|
8241
8337
|
rightOffsets: [volumeDown.width, volumeUp.width],
|
|
8242
8338
|
clickCb: toggleMute,
|
|
8243
8339
|
});
|
|
8244
|
-
this
|
|
8340
|
+
this.#unmuteImg = initImage({
|
|
8245
8341
|
container,
|
|
8246
8342
|
options,
|
|
8247
8343
|
pos,
|
|
@@ -8251,7 +8347,7 @@
|
|
|
8251
8347
|
rightOffsets: [volumeDown.width, volumeUp.width],
|
|
8252
8348
|
clickCb: toggleMute,
|
|
8253
8349
|
});
|
|
8254
|
-
this
|
|
8350
|
+
this.#volumeDownImg = initImage({
|
|
8255
8351
|
container,
|
|
8256
8352
|
options,
|
|
8257
8353
|
pos,
|
|
@@ -8263,7 +8359,7 @@
|
|
|
8263
8359
|
await this.volumeDown();
|
|
8264
8360
|
},
|
|
8265
8361
|
});
|
|
8266
|
-
this
|
|
8362
|
+
this.#volumeUpImg = initImage({
|
|
8267
8363
|
container,
|
|
8268
8364
|
options,
|
|
8269
8365
|
pos,
|
|
@@ -8280,62 +8376,62 @@
|
|
|
8280
8376
|
}
|
|
8281
8377
|
}
|
|
8282
8378
|
stop() {
|
|
8283
|
-
this.
|
|
8379
|
+
this.#container.muted = true;
|
|
8284
8380
|
void (async () => {
|
|
8285
|
-
await this
|
|
8286
|
-
removeImage(this
|
|
8287
|
-
removeImage(this
|
|
8288
|
-
removeImage(this
|
|
8289
|
-
removeImage(this
|
|
8381
|
+
await this.#mute();
|
|
8382
|
+
removeImage(this.#muteImg);
|
|
8383
|
+
removeImage(this.#unmuteImg);
|
|
8384
|
+
removeImage(this.#volumeDownImg);
|
|
8385
|
+
removeImage(this.#volumeUpImg);
|
|
8290
8386
|
})();
|
|
8291
8387
|
}
|
|
8292
8388
|
async toggleMute() {
|
|
8293
|
-
const container = this
|
|
8389
|
+
const container = this.#container;
|
|
8294
8390
|
container.muted = !container.muted;
|
|
8295
|
-
this
|
|
8296
|
-
await this
|
|
8391
|
+
this.#updateMuteIcons();
|
|
8392
|
+
await this.#updateMuteStatus();
|
|
8297
8393
|
}
|
|
8298
8394
|
async unmute() {
|
|
8299
|
-
if (this.
|
|
8395
|
+
if (this.#container.muted) {
|
|
8300
8396
|
await this.toggleMute();
|
|
8301
8397
|
}
|
|
8302
8398
|
}
|
|
8303
8399
|
async volumeDown() {
|
|
8304
|
-
const container = this
|
|
8400
|
+
const container = this.#container, soundsOptions = container.actualOptions.sounds;
|
|
8305
8401
|
if (!soundsOptions?.enable) {
|
|
8306
8402
|
return;
|
|
8307
8403
|
}
|
|
8308
8404
|
if (container.muted) {
|
|
8309
|
-
this
|
|
8405
|
+
this.#volume = 0;
|
|
8310
8406
|
}
|
|
8311
|
-
this
|
|
8312
|
-
await this
|
|
8407
|
+
this.#volume -= soundsOptions.volume.step;
|
|
8408
|
+
await this.#updateVolume();
|
|
8313
8409
|
}
|
|
8314
8410
|
async volumeUp() {
|
|
8315
|
-
const container = this
|
|
8411
|
+
const container = this.#container, soundsOptions = container.actualOptions.sounds;
|
|
8316
8412
|
if (!soundsOptions?.enable) {
|
|
8317
8413
|
return;
|
|
8318
8414
|
}
|
|
8319
|
-
this
|
|
8320
|
-
await this
|
|
8415
|
+
this.#volume += soundsOptions.volume.step;
|
|
8416
|
+
await this.#updateVolume();
|
|
8321
8417
|
}
|
|
8322
|
-
|
|
8418
|
+
#addBuffer = audioCtx => {
|
|
8323
8419
|
const buffer = audioCtx.createBufferSource();
|
|
8324
|
-
this.
|
|
8420
|
+
this.#audioSources.push(buffer);
|
|
8325
8421
|
return buffer;
|
|
8326
8422
|
};
|
|
8327
|
-
|
|
8423
|
+
#addOscillator = audioCtx => {
|
|
8328
8424
|
const oscillator = audioCtx.createOscillator();
|
|
8329
|
-
this.
|
|
8425
|
+
this.#audioSources.push(oscillator);
|
|
8330
8426
|
return oscillator;
|
|
8331
8427
|
};
|
|
8332
|
-
|
|
8333
|
-
const container = this
|
|
8428
|
+
#getAudioContext() {
|
|
8429
|
+
const container = this.#container;
|
|
8334
8430
|
container.audioContext ??= new AudioContext();
|
|
8335
8431
|
return container.audioContext;
|
|
8336
8432
|
}
|
|
8337
|
-
|
|
8338
|
-
const container = this
|
|
8433
|
+
#initEvents = () => {
|
|
8434
|
+
const container = this.#container, soundsOptions = container.actualOptions.sounds;
|
|
8339
8435
|
if (!soundsOptions?.enable || !container.canvas.domElement) {
|
|
8340
8436
|
return;
|
|
8341
8437
|
}
|
|
@@ -8346,12 +8442,12 @@
|
|
|
8346
8442
|
}
|
|
8347
8443
|
void (async () => {
|
|
8348
8444
|
const filterNotValid = event.filter && !event.filter(args);
|
|
8349
|
-
if (this
|
|
8445
|
+
if (this.#container !== args.container) {
|
|
8350
8446
|
return;
|
|
8351
8447
|
}
|
|
8352
|
-
if (!!this.
|
|
8448
|
+
if (!!this.#container.muted || this.#container.destroyed) {
|
|
8353
8449
|
executeOnSingleOrMultiple(event.event, item => {
|
|
8354
|
-
this.
|
|
8450
|
+
this.#engine.removeEventListener(item, cb);
|
|
8355
8451
|
});
|
|
8356
8452
|
return;
|
|
8357
8453
|
}
|
|
@@ -8364,7 +8460,7 @@
|
|
|
8364
8460
|
if (!audio) {
|
|
8365
8461
|
return;
|
|
8366
8462
|
}
|
|
8367
|
-
this
|
|
8463
|
+
this.#playBuffer(audio);
|
|
8368
8464
|
}
|
|
8369
8465
|
else if (event.melodies) {
|
|
8370
8466
|
const melody = itemFromArray(event.melodies);
|
|
@@ -8372,10 +8468,10 @@
|
|
|
8372
8468
|
return;
|
|
8373
8469
|
}
|
|
8374
8470
|
if (melody.melodies.length) {
|
|
8375
|
-
await Promise.allSettled(melody.melodies.map(m => this
|
|
8471
|
+
await Promise.allSettled(melody.melodies.map(m => this.#playNote(m.notes, defaultNoteIndex, melody.loop)));
|
|
8376
8472
|
}
|
|
8377
8473
|
else {
|
|
8378
|
-
await this
|
|
8474
|
+
await this.#playNote(melody.notes, defaultNoteIndex, melody.loop);
|
|
8379
8475
|
}
|
|
8380
8476
|
}
|
|
8381
8477
|
else if (event.notes) {
|
|
@@ -8383,63 +8479,63 @@
|
|
|
8383
8479
|
if (!note) {
|
|
8384
8480
|
return;
|
|
8385
8481
|
}
|
|
8386
|
-
await this
|
|
8482
|
+
await this.#playNote([note], defaultNoteIndex, false);
|
|
8387
8483
|
}
|
|
8388
8484
|
})();
|
|
8389
8485
|
};
|
|
8390
8486
|
executeOnSingleOrMultiple(event.event, item => {
|
|
8391
|
-
this.
|
|
8487
|
+
this.#engine.addEventListener(item, cb);
|
|
8392
8488
|
});
|
|
8393
8489
|
}
|
|
8394
8490
|
};
|
|
8395
|
-
|
|
8396
|
-
const container = this
|
|
8397
|
-
for (const source of this
|
|
8398
|
-
this
|
|
8491
|
+
#mute = async () => {
|
|
8492
|
+
const container = this.#container, audioContext = this.#getAudioContext();
|
|
8493
|
+
for (const source of this.#audioSources) {
|
|
8494
|
+
this.#removeAudioSource(source);
|
|
8399
8495
|
}
|
|
8400
|
-
if (this
|
|
8401
|
-
this.
|
|
8496
|
+
if (this.#gain) {
|
|
8497
|
+
this.#gain.disconnect();
|
|
8402
8498
|
}
|
|
8403
8499
|
await audioContext.close();
|
|
8404
8500
|
container.audioContext = undefined;
|
|
8405
|
-
this.
|
|
8501
|
+
this.#container.dispatchEvent(SoundsEventType.mute);
|
|
8406
8502
|
};
|
|
8407
|
-
|
|
8408
|
-
const audioBuffer = this.
|
|
8503
|
+
#playBuffer = audio => {
|
|
8504
|
+
const audioBuffer = this.#audioMap.get(audio.source);
|
|
8409
8505
|
if (!audioBuffer) {
|
|
8410
8506
|
return;
|
|
8411
8507
|
}
|
|
8412
|
-
const audioCtx = this.
|
|
8508
|
+
const audioCtx = this.#container.audioContext;
|
|
8413
8509
|
if (!audioCtx) {
|
|
8414
8510
|
return;
|
|
8415
8511
|
}
|
|
8416
|
-
const source = this
|
|
8512
|
+
const source = this.#addBuffer(audioCtx);
|
|
8417
8513
|
source.loop = audio.loop;
|
|
8418
8514
|
source.buffer = audioBuffer;
|
|
8419
|
-
source.connect(this
|
|
8515
|
+
source.connect(this.#gain ?? audioCtx.destination);
|
|
8420
8516
|
source.start();
|
|
8421
8517
|
};
|
|
8422
|
-
|
|
8423
|
-
if (!this
|
|
8518
|
+
#playFrequency = async (frequency, duration) => {
|
|
8519
|
+
if (!this.#gain || this.#container.muted) {
|
|
8424
8520
|
return;
|
|
8425
8521
|
}
|
|
8426
|
-
const audioContext = this
|
|
8427
|
-
oscillator.connect(this
|
|
8522
|
+
const audioContext = this.#getAudioContext(), oscillator = this.#addOscillator(audioContext);
|
|
8523
|
+
oscillator.connect(this.#gain);
|
|
8428
8524
|
oscillator.type = "sine";
|
|
8429
8525
|
oscillator.frequency.value = frequency;
|
|
8430
8526
|
oscillator.start();
|
|
8431
8527
|
return new Promise(resolve => {
|
|
8432
8528
|
setTimeout(() => {
|
|
8433
|
-
this
|
|
8529
|
+
this.#removeAudioSource(oscillator);
|
|
8434
8530
|
resolve();
|
|
8435
8531
|
}, duration);
|
|
8436
8532
|
});
|
|
8437
8533
|
};
|
|
8438
|
-
|
|
8439
|
-
if (this.
|
|
8534
|
+
#playMuteSound = () => {
|
|
8535
|
+
if (this.#container.muted) {
|
|
8440
8536
|
return;
|
|
8441
8537
|
}
|
|
8442
|
-
const audioContext = this
|
|
8538
|
+
const audioContext = this.#getAudioContext(), gain = audioContext.createGain();
|
|
8443
8539
|
gain.connect(audioContext.destination);
|
|
8444
8540
|
gain.gain.value = 0;
|
|
8445
8541
|
const oscillator = audioContext.createOscillator();
|
|
@@ -8453,8 +8549,8 @@
|
|
|
8453
8549
|
gain.disconnect();
|
|
8454
8550
|
});
|
|
8455
8551
|
};
|
|
8456
|
-
|
|
8457
|
-
if (this.
|
|
8552
|
+
#playNote = async (notes, noteIdx, loop) => {
|
|
8553
|
+
if (this.#container.muted) {
|
|
8458
8554
|
return;
|
|
8459
8555
|
}
|
|
8460
8556
|
const note = notes[noteIdx];
|
|
@@ -8462,7 +8558,7 @@
|
|
|
8462
8558
|
return;
|
|
8463
8559
|
}
|
|
8464
8560
|
const value = note.value, promises = executeOnSingleOrMultiple(value, async (_, idx) => {
|
|
8465
|
-
return this
|
|
8561
|
+
return this.#playNoteValue(notes, noteIdx, idx);
|
|
8466
8562
|
});
|
|
8467
8563
|
await (isArray(promises) ? Promise.allSettled(promises) : promises);
|
|
8468
8564
|
const indexOffset = 1;
|
|
@@ -8470,9 +8566,9 @@
|
|
|
8470
8566
|
if (loop && nextNoteIdx >= notes.length) {
|
|
8471
8567
|
nextNoteIdx = nextNoteIdx % notes.length;
|
|
8472
8568
|
}
|
|
8473
|
-
await this
|
|
8569
|
+
await this.#playNote(notes, nextNoteIdx, loop);
|
|
8474
8570
|
};
|
|
8475
|
-
|
|
8571
|
+
#playNoteValue = async (notes, noteIdx, valueIdx) => {
|
|
8476
8572
|
const note = notes[noteIdx];
|
|
8477
8573
|
if (!note) {
|
|
8478
8574
|
return;
|
|
@@ -8486,36 +8582,36 @@
|
|
|
8486
8582
|
if (!isNumber(freq)) {
|
|
8487
8583
|
return;
|
|
8488
8584
|
}
|
|
8489
|
-
await this
|
|
8585
|
+
await this.#playFrequency(freq, note.duration);
|
|
8490
8586
|
}
|
|
8491
8587
|
catch (e) {
|
|
8492
8588
|
getLogger().error(e);
|
|
8493
8589
|
}
|
|
8494
8590
|
};
|
|
8495
|
-
|
|
8591
|
+
#removeAudioSource = source => {
|
|
8496
8592
|
source.stop();
|
|
8497
8593
|
source.disconnect();
|
|
8498
8594
|
const deleteCount = 1;
|
|
8499
|
-
this.
|
|
8595
|
+
this.#audioSources.splice(this.#audioSources.indexOf(source), deleteCount);
|
|
8500
8596
|
};
|
|
8501
|
-
|
|
8502
|
-
const container = this
|
|
8597
|
+
#unmute = () => {
|
|
8598
|
+
const container = this.#container, options = container.actualOptions, soundsOptions = options.sounds;
|
|
8503
8599
|
if (!soundsOptions) {
|
|
8504
8600
|
return;
|
|
8505
8601
|
}
|
|
8506
|
-
const audioContext = this
|
|
8602
|
+
const audioContext = this.#getAudioContext(), gain = audioContext.createGain();
|
|
8507
8603
|
gain.connect(audioContext.destination);
|
|
8508
8604
|
gain.gain.value = soundsOptions.volume.value / percentDenominator;
|
|
8509
|
-
this
|
|
8510
|
-
this
|
|
8511
|
-
this.
|
|
8605
|
+
this.#gain = gain;
|
|
8606
|
+
this.#initEvents();
|
|
8607
|
+
this.#container.dispatchEvent(SoundsEventType.unmute);
|
|
8512
8608
|
};
|
|
8513
|
-
|
|
8514
|
-
const container = this
|
|
8609
|
+
#updateMuteIcons = () => {
|
|
8610
|
+
const container = this.#container, soundsOptions = container.actualOptions.sounds;
|
|
8515
8611
|
if (!soundsOptions?.enable || !soundsOptions.icons.enable) {
|
|
8516
8612
|
return;
|
|
8517
8613
|
}
|
|
8518
|
-
const muteImg = this
|
|
8614
|
+
const muteImg = this.#muteImg, unmuteImg = this.#unmuteImg;
|
|
8519
8615
|
if (muteImg) {
|
|
8520
8616
|
muteImg.style.display = container.muted ? "block" : "none";
|
|
8521
8617
|
}
|
|
@@ -8523,40 +8619,40 @@
|
|
|
8523
8619
|
unmuteImg.style.display = container.muted ? "none" : "block";
|
|
8524
8620
|
}
|
|
8525
8621
|
};
|
|
8526
|
-
|
|
8527
|
-
const container = this
|
|
8622
|
+
#updateMuteStatus = async () => {
|
|
8623
|
+
const container = this.#container, audioContext = this.#getAudioContext();
|
|
8528
8624
|
if (container.muted) {
|
|
8529
8625
|
await audioContext.suspend();
|
|
8530
|
-
await this
|
|
8626
|
+
await this.#mute();
|
|
8531
8627
|
}
|
|
8532
8628
|
else {
|
|
8533
8629
|
await audioContext.resume();
|
|
8534
|
-
this
|
|
8535
|
-
this
|
|
8630
|
+
this.#unmute();
|
|
8631
|
+
this.#playMuteSound();
|
|
8536
8632
|
}
|
|
8537
8633
|
};
|
|
8538
|
-
|
|
8539
|
-
const container = this
|
|
8634
|
+
#updateVolume = async () => {
|
|
8635
|
+
const container = this.#container, soundsOptions = container.actualOptions.sounds;
|
|
8540
8636
|
if (!soundsOptions?.enable) {
|
|
8541
8637
|
return;
|
|
8542
8638
|
}
|
|
8543
|
-
clamp(this
|
|
8639
|
+
clamp(this.#volume, soundsOptions.volume.min, soundsOptions.volume.max);
|
|
8544
8640
|
let stateChanged = false;
|
|
8545
|
-
if (this
|
|
8546
|
-
this
|
|
8641
|
+
if (this.#volume <= minVolume && !container.muted) {
|
|
8642
|
+
this.#volume = 0;
|
|
8547
8643
|
container.muted = true;
|
|
8548
8644
|
stateChanged = true;
|
|
8549
8645
|
}
|
|
8550
|
-
else if (this
|
|
8646
|
+
else if (this.#volume > minVolume && container.muted) {
|
|
8551
8647
|
container.muted = false;
|
|
8552
8648
|
stateChanged = true;
|
|
8553
8649
|
}
|
|
8554
8650
|
if (stateChanged) {
|
|
8555
|
-
this
|
|
8556
|
-
await this
|
|
8651
|
+
this.#updateMuteIcons();
|
|
8652
|
+
await this.#updateMuteStatus();
|
|
8557
8653
|
}
|
|
8558
|
-
if (this
|
|
8559
|
-
this.
|
|
8654
|
+
if (this.#gain?.gain) {
|
|
8655
|
+
this.#gain.gain.value = this.#volume / percentDenominator;
|
|
8560
8656
|
}
|
|
8561
8657
|
};
|
|
8562
8658
|
}
|
|
@@ -8595,34 +8691,34 @@
|
|
|
8595
8691
|
spawnStrokeColor;
|
|
8596
8692
|
spawnStrokeOpacity;
|
|
8597
8693
|
spawnStrokeWidth;
|
|
8598
|
-
|
|
8599
|
-
|
|
8600
|
-
|
|
8601
|
-
|
|
8602
|
-
|
|
8603
|
-
|
|
8604
|
-
|
|
8605
|
-
|
|
8606
|
-
|
|
8607
|
-
|
|
8608
|
-
|
|
8609
|
-
|
|
8610
|
-
|
|
8611
|
-
|
|
8612
|
-
|
|
8613
|
-
|
|
8614
|
-
|
|
8615
|
-
|
|
8616
|
-
|
|
8617
|
-
|
|
8694
|
+
#container;
|
|
8695
|
+
#currentDuration;
|
|
8696
|
+
#currentEmitDelay;
|
|
8697
|
+
#currentSpawnDelay;
|
|
8698
|
+
#duration;
|
|
8699
|
+
#emitDelay;
|
|
8700
|
+
#firstSpawn;
|
|
8701
|
+
#immortal;
|
|
8702
|
+
#initialPosition;
|
|
8703
|
+
#lifeCount;
|
|
8704
|
+
#mutationObserver;
|
|
8705
|
+
#particlesOptions;
|
|
8706
|
+
#paused;
|
|
8707
|
+
#pluginManager;
|
|
8708
|
+
#removeCallback;
|
|
8709
|
+
#resizeObserver;
|
|
8710
|
+
#shape;
|
|
8711
|
+
#size;
|
|
8712
|
+
#spawnDelay;
|
|
8713
|
+
#startParticlesAdded;
|
|
8618
8714
|
constructor(pluginManager, container, removeCallback, options, position) {
|
|
8619
|
-
this
|
|
8620
|
-
this
|
|
8621
|
-
this
|
|
8622
|
-
this
|
|
8623
|
-
this
|
|
8624
|
-
this
|
|
8625
|
-
this
|
|
8715
|
+
this.#pluginManager = pluginManager;
|
|
8716
|
+
this.#container = container;
|
|
8717
|
+
this.#removeCallback = removeCallback;
|
|
8718
|
+
this.#currentDuration = 0;
|
|
8719
|
+
this.#currentEmitDelay = 0;
|
|
8720
|
+
this.#currentSpawnDelay = 0;
|
|
8721
|
+
this.#initialPosition = position;
|
|
8626
8722
|
if (options instanceof Emitter) {
|
|
8627
8723
|
this.options = options;
|
|
8628
8724
|
}
|
|
@@ -8630,159 +8726,159 @@
|
|
|
8630
8726
|
this.options = new Emitter();
|
|
8631
8727
|
this.options.load(options);
|
|
8632
8728
|
}
|
|
8633
|
-
this
|
|
8729
|
+
this.#spawnDelay = container.retina.reduceFactor
|
|
8634
8730
|
? (getRangeValue(this.options.life.delay ?? defaultLifeDelay) * millisecondsToSeconds) /
|
|
8635
8731
|
container.retina.reduceFactor
|
|
8636
8732
|
: Infinity;
|
|
8637
|
-
this.position = this
|
|
8733
|
+
this.position = this.#initialPosition ?? this.#calcPosition();
|
|
8638
8734
|
this.name = this.options.name;
|
|
8639
8735
|
this.fill = this.options.fill;
|
|
8640
|
-
this
|
|
8641
|
-
this
|
|
8736
|
+
this.#firstSpawn = !this.options.life.wait;
|
|
8737
|
+
this.#startParticlesAdded = false;
|
|
8642
8738
|
const particlesOptions = deepExtend({}, this.options.particles);
|
|
8643
8739
|
particlesOptions.move ??= {};
|
|
8644
8740
|
particlesOptions.move.direction ??= this.options.direction;
|
|
8645
8741
|
if (this.options.spawn.fill?.color) {
|
|
8646
|
-
this.spawnFillColor = rangeColorToHsl(this
|
|
8742
|
+
this.spawnFillColor = rangeColorToHsl(this.#pluginManager, this.options.spawn.fill.color);
|
|
8647
8743
|
}
|
|
8648
8744
|
if (this.options.spawn.stroke?.color) {
|
|
8649
|
-
this.spawnStrokeColor = rangeColorToHsl(this
|
|
8650
|
-
}
|
|
8651
|
-
this
|
|
8652
|
-
this
|
|
8653
|
-
this
|
|
8654
|
-
this.size = getSize(this
|
|
8655
|
-
this
|
|
8656
|
-
this
|
|
8745
|
+
this.spawnStrokeColor = rangeColorToHsl(this.#pluginManager, this.options.spawn.stroke.color);
|
|
8746
|
+
}
|
|
8747
|
+
this.#paused = !this.options.autoPlay;
|
|
8748
|
+
this.#particlesOptions = particlesOptions;
|
|
8749
|
+
this.#size = this.#calcSize();
|
|
8750
|
+
this.size = getSize(this.#size, this.#container.canvas.size);
|
|
8751
|
+
this.#lifeCount = this.options.life.count ?? defaultLifeCount;
|
|
8752
|
+
this.#immortal = this.#lifeCount <= minLifeCount;
|
|
8657
8753
|
if (this.options.domId) {
|
|
8658
8754
|
const element = safeDocument().getElementById(this.options.domId);
|
|
8659
8755
|
if (element) {
|
|
8660
|
-
this
|
|
8756
|
+
this.#mutationObserver = new MutationObserver(() => {
|
|
8661
8757
|
this.resize();
|
|
8662
8758
|
});
|
|
8663
|
-
this
|
|
8759
|
+
this.#resizeObserver = new ResizeObserver(() => {
|
|
8664
8760
|
this.resize();
|
|
8665
8761
|
});
|
|
8666
|
-
this.
|
|
8762
|
+
this.#mutationObserver.observe(element, {
|
|
8667
8763
|
attributes: true,
|
|
8668
8764
|
attributeFilter: ["style", "width", "height"],
|
|
8669
8765
|
});
|
|
8670
|
-
this.
|
|
8766
|
+
this.#resizeObserver.observe(element);
|
|
8671
8767
|
}
|
|
8672
8768
|
}
|
|
8673
|
-
const shapeOptions = this.options.shape, shapeGenerator = this.
|
|
8769
|
+
const shapeOptions = this.options.shape, shapeGenerator = this.#pluginManager.emitterShapeManager?.getShapeGenerator(shapeOptions.type);
|
|
8674
8770
|
if (shapeGenerator) {
|
|
8675
|
-
this
|
|
8771
|
+
this.#shape = shapeGenerator.generate(this.#container, this.position, this.size, this.fill, shapeOptions.options);
|
|
8676
8772
|
}
|
|
8677
|
-
this.
|
|
8773
|
+
this.#container.dispatchEvent("emitterCreated", {
|
|
8678
8774
|
emitter: this,
|
|
8679
8775
|
});
|
|
8680
8776
|
this.play();
|
|
8681
8777
|
}
|
|
8682
8778
|
externalPause() {
|
|
8683
|
-
this
|
|
8779
|
+
this.#paused = true;
|
|
8684
8780
|
this.pause();
|
|
8685
8781
|
}
|
|
8686
8782
|
externalPlay() {
|
|
8687
|
-
this
|
|
8783
|
+
this.#paused = false;
|
|
8688
8784
|
this.play();
|
|
8689
8785
|
}
|
|
8690
8786
|
async init() {
|
|
8691
|
-
await this
|
|
8787
|
+
await this.#shape?.init();
|
|
8692
8788
|
}
|
|
8693
8789
|
pause() {
|
|
8694
|
-
if (this
|
|
8790
|
+
if (this.#paused) {
|
|
8695
8791
|
return;
|
|
8696
8792
|
}
|
|
8697
|
-
|
|
8793
|
+
this.#emitDelay = undefined;
|
|
8698
8794
|
}
|
|
8699
8795
|
play() {
|
|
8700
|
-
if (this
|
|
8796
|
+
if (this.#paused) {
|
|
8701
8797
|
return;
|
|
8702
8798
|
}
|
|
8703
|
-
if (!((this
|
|
8704
|
-
(this
|
|
8799
|
+
if (!((this.#lifeCount > minLifeCount || this.#immortal || !this.options.life.count) &&
|
|
8800
|
+
(this.#firstSpawn || this.#currentSpawnDelay >= (this.#spawnDelay ?? defaultSpawnDelay)))) {
|
|
8705
8801
|
return;
|
|
8706
8802
|
}
|
|
8707
|
-
const container = this
|
|
8708
|
-
if (this
|
|
8803
|
+
const container = this.#container;
|
|
8804
|
+
if (this.#emitDelay === undefined) {
|
|
8709
8805
|
const delay = getRangeValue(this.options.rate.delay);
|
|
8710
|
-
this
|
|
8806
|
+
this.#emitDelay = container.retina.reduceFactor
|
|
8711
8807
|
? (delay * millisecondsToSeconds) / container.retina.reduceFactor
|
|
8712
8808
|
: Infinity;
|
|
8713
8809
|
}
|
|
8714
|
-
if (this
|
|
8715
|
-
this
|
|
8810
|
+
if (this.#lifeCount > minLifeCount || this.#immortal) {
|
|
8811
|
+
this.#prepareToDie();
|
|
8716
8812
|
}
|
|
8717
8813
|
}
|
|
8718
8814
|
resize() {
|
|
8719
|
-
const initialPosition = this
|
|
8815
|
+
const initialPosition = this.#initialPosition, container = this.#container;
|
|
8720
8816
|
this.position =
|
|
8721
8817
|
initialPosition && isPointInside(initialPosition, container.canvas.size, Vector.origin)
|
|
8722
8818
|
? initialPosition
|
|
8723
|
-
: this
|
|
8724
|
-
this
|
|
8725
|
-
this.size = getSize(this
|
|
8726
|
-
this
|
|
8819
|
+
: this.#calcPosition();
|
|
8820
|
+
this.#size = this.#calcSize();
|
|
8821
|
+
this.size = getSize(this.#size, container.canvas.size);
|
|
8822
|
+
this.#shape?.resize(this.position, this.size);
|
|
8727
8823
|
}
|
|
8728
8824
|
update(delta) {
|
|
8729
|
-
if (this
|
|
8825
|
+
if (this.#paused) {
|
|
8730
8826
|
return;
|
|
8731
8827
|
}
|
|
8732
|
-
const container = this
|
|
8733
|
-
if (this
|
|
8734
|
-
this
|
|
8735
|
-
this
|
|
8736
|
-
this
|
|
8828
|
+
const container = this.#container;
|
|
8829
|
+
if (this.#firstSpawn) {
|
|
8830
|
+
this.#firstSpawn = false;
|
|
8831
|
+
this.#currentSpawnDelay = this.#spawnDelay ?? defaultSpawnDelay;
|
|
8832
|
+
this.#currentEmitDelay = this.#emitDelay ?? defaultEmitDelay;
|
|
8737
8833
|
}
|
|
8738
|
-
if (!this
|
|
8739
|
-
this
|
|
8740
|
-
this
|
|
8834
|
+
if (!this.#startParticlesAdded) {
|
|
8835
|
+
this.#startParticlesAdded = true;
|
|
8836
|
+
this.#emitParticles(this.options.startCount);
|
|
8741
8837
|
}
|
|
8742
|
-
if (this
|
|
8743
|
-
this
|
|
8744
|
-
if (this
|
|
8838
|
+
if (this.#duration !== undefined) {
|
|
8839
|
+
this.#currentDuration += delta.value;
|
|
8840
|
+
if (this.#currentDuration >= this.#duration) {
|
|
8745
8841
|
this.pause();
|
|
8746
|
-
if (this
|
|
8747
|
-
|
|
8842
|
+
if (this.#spawnDelay !== undefined) {
|
|
8843
|
+
this.#spawnDelay = undefined;
|
|
8748
8844
|
}
|
|
8749
|
-
if (!this
|
|
8750
|
-
this
|
|
8845
|
+
if (!this.#immortal) {
|
|
8846
|
+
this.#lifeCount--;
|
|
8751
8847
|
}
|
|
8752
|
-
if (this
|
|
8753
|
-
this.position = this
|
|
8754
|
-
this
|
|
8755
|
-
this
|
|
8848
|
+
if (this.#lifeCount > minLifeCount || this.#immortal) {
|
|
8849
|
+
this.position = this.#calcPosition();
|
|
8850
|
+
this.#shape?.resize(this.position, this.size);
|
|
8851
|
+
this.#spawnDelay = container.retina.reduceFactor
|
|
8756
8852
|
? (getRangeValue(this.options.life.delay ?? defaultLifeDelay) * millisecondsToSeconds) /
|
|
8757
8853
|
container.retina.reduceFactor
|
|
8758
8854
|
: Infinity;
|
|
8759
8855
|
}
|
|
8760
8856
|
else {
|
|
8761
|
-
this
|
|
8857
|
+
this.#destroy();
|
|
8762
8858
|
}
|
|
8763
|
-
this
|
|
8764
|
-
|
|
8859
|
+
this.#currentDuration -= this.#duration;
|
|
8860
|
+
this.#duration = undefined;
|
|
8765
8861
|
}
|
|
8766
8862
|
}
|
|
8767
|
-
if (this
|
|
8768
|
-
this
|
|
8769
|
-
if (this
|
|
8770
|
-
this.
|
|
8863
|
+
if (this.#spawnDelay !== undefined) {
|
|
8864
|
+
this.#currentSpawnDelay += delta.value;
|
|
8865
|
+
if (this.#currentSpawnDelay >= this.#spawnDelay) {
|
|
8866
|
+
this.#container.dispatchEvent("emitterPlay");
|
|
8771
8867
|
this.play();
|
|
8772
|
-
this
|
|
8773
|
-
|
|
8868
|
+
this.#currentSpawnDelay -= this.#spawnDelay;
|
|
8869
|
+
this.#spawnDelay = undefined;
|
|
8774
8870
|
}
|
|
8775
8871
|
}
|
|
8776
|
-
if (this
|
|
8777
|
-
this
|
|
8778
|
-
if (this
|
|
8779
|
-
this
|
|
8780
|
-
this
|
|
8872
|
+
if (this.#emitDelay !== undefined) {
|
|
8873
|
+
this.#currentEmitDelay += delta.value;
|
|
8874
|
+
if (this.#currentEmitDelay >= this.#emitDelay) {
|
|
8875
|
+
this.#emit();
|
|
8876
|
+
this.#currentEmitDelay -= this.#emitDelay;
|
|
8781
8877
|
}
|
|
8782
8878
|
}
|
|
8783
8879
|
}
|
|
8784
|
-
|
|
8785
|
-
const container = this
|
|
8880
|
+
#calcPosition() {
|
|
8881
|
+
const container = this.#container;
|
|
8786
8882
|
if (this.options.domId) {
|
|
8787
8883
|
const element = safeDocument().getElementById(this.options.domId);
|
|
8788
8884
|
if (element) {
|
|
@@ -8798,8 +8894,8 @@
|
|
|
8798
8894
|
position: this.options.position,
|
|
8799
8895
|
});
|
|
8800
8896
|
}
|
|
8801
|
-
|
|
8802
|
-
const container = this
|
|
8897
|
+
#calcSize() {
|
|
8898
|
+
const container = this.#container;
|
|
8803
8899
|
if (this.options.domId) {
|
|
8804
8900
|
const element = safeDocument().getElementById(this.options.domId);
|
|
8805
8901
|
if (element) {
|
|
@@ -8822,32 +8918,32 @@
|
|
|
8822
8918
|
return size;
|
|
8823
8919
|
})());
|
|
8824
8920
|
}
|
|
8825
|
-
|
|
8826
|
-
this
|
|
8827
|
-
this
|
|
8828
|
-
this
|
|
8829
|
-
this
|
|
8830
|
-
this
|
|
8831
|
-
this.
|
|
8921
|
+
#destroy = () => {
|
|
8922
|
+
this.#mutationObserver?.disconnect();
|
|
8923
|
+
this.#mutationObserver = undefined;
|
|
8924
|
+
this.#resizeObserver?.disconnect();
|
|
8925
|
+
this.#resizeObserver = undefined;
|
|
8926
|
+
this.#removeCallback(this);
|
|
8927
|
+
this.#container.dispatchEvent("emitterDestroyed", {
|
|
8832
8928
|
emitter: this,
|
|
8833
8929
|
});
|
|
8834
8930
|
};
|
|
8835
|
-
|
|
8836
|
-
if (this
|
|
8931
|
+
#emit() {
|
|
8932
|
+
if (this.#paused) {
|
|
8837
8933
|
return;
|
|
8838
8934
|
}
|
|
8839
8935
|
const quantity = getRangeValue(this.options.rate.quantity);
|
|
8840
|
-
this
|
|
8936
|
+
this.#emitParticles(quantity);
|
|
8841
8937
|
}
|
|
8842
|
-
|
|
8843
|
-
const singleParticlesOptions = (itemFromSingleOrMultiple(this
|
|
8938
|
+
#emitParticles(quantity) {
|
|
8939
|
+
const singleParticlesOptions = (itemFromSingleOrMultiple(this.#particlesOptions) ??
|
|
8844
8940
|
{}), fillHslAnimation = this.options.spawn.fill?.color?.animation, fillEnabled = this.options.spawn.fill?.enable ?? !!this.options.spawn.fill?.color, fillOpacity = this.options.spawn.fill?.opacity === undefined
|
|
8845
8941
|
? defaultOpacity$1
|
|
8846
8942
|
: getRangeValue(this.options.spawn.fill.opacity), strokeHslAnimation = this.options.spawn.stroke?.color?.animation, strokeOpacity = this.options.spawn.stroke?.opacity === undefined
|
|
8847
8943
|
? defaultOpacity$1
|
|
8848
8944
|
: getRangeValue(this.options.spawn.stroke.opacity), strokeWidth = this.options.spawn.stroke?.width === undefined
|
|
8849
8945
|
? defaultStrokeWidth
|
|
8850
|
-
: getRangeValue(this.options.spawn.stroke.width), reduceFactor = this.
|
|
8946
|
+
: getRangeValue(this.options.spawn.stroke.width), reduceFactor = this.#container.retina.reduceFactor, needsFillColorAnimation = !!fillHslAnimation, needsStrokeColorAnimation = !!strokeHslAnimation, needsShapeData = !!this.#shape, needsColorAnimation = needsFillColorAnimation || needsStrokeColorAnimation, needsCopy = needsColorAnimation || needsShapeData, maxValues = needsColorAnimation ? { h: hMax, s: sMax, l: lMax } : null, shapeOptions = this.options.shape;
|
|
8851
8947
|
for (let i = 0; i < quantity * reduceFactor; i++) {
|
|
8852
8948
|
const particlesOptions = needsCopy
|
|
8853
8949
|
? deepExtend({}, singleParticlesOptions)
|
|
@@ -8858,23 +8954,23 @@
|
|
|
8858
8954
|
this.spawnStrokeWidth = strokeWidth;
|
|
8859
8955
|
if (this.spawnFillColor) {
|
|
8860
8956
|
if (fillHslAnimation && maxValues) {
|
|
8861
|
-
this.spawnFillColor.h = this
|
|
8862
|
-
this.spawnFillColor.s = this
|
|
8863
|
-
this.spawnFillColor.l = this
|
|
8957
|
+
this.spawnFillColor.h = this.#setColorAnimation(fillHslAnimation.h, this.spawnFillColor.h, maxValues.h, colorFactor);
|
|
8958
|
+
this.spawnFillColor.s = this.#setColorAnimation(fillHslAnimation.s, this.spawnFillColor.s, maxValues.s);
|
|
8959
|
+
this.spawnFillColor.l = this.#setColorAnimation(fillHslAnimation.l, this.spawnFillColor.l, maxValues.l);
|
|
8864
8960
|
}
|
|
8865
8961
|
setParticlesOptionsFillColor(particlesOptions, this.spawnFillColor, this.spawnFillOpacity, this.spawnFillEnabled);
|
|
8866
8962
|
}
|
|
8867
8963
|
if (this.spawnStrokeColor) {
|
|
8868
8964
|
if (strokeHslAnimation && maxValues) {
|
|
8869
|
-
this.spawnStrokeColor.h = this
|
|
8870
|
-
this.spawnStrokeColor.s = this
|
|
8871
|
-
this.spawnStrokeColor.l = this
|
|
8965
|
+
this.spawnStrokeColor.h = this.#setColorAnimation(strokeHslAnimation.h, this.spawnStrokeColor.h, maxValues.h, colorFactor);
|
|
8966
|
+
this.spawnStrokeColor.s = this.#setColorAnimation(strokeHslAnimation.s, this.spawnStrokeColor.s, maxValues.s);
|
|
8967
|
+
this.spawnStrokeColor.l = this.#setColorAnimation(strokeHslAnimation.l, this.spawnStrokeColor.l, maxValues.l);
|
|
8872
8968
|
}
|
|
8873
8969
|
setParticlesOptionsStrokeColor(particlesOptions, this.spawnStrokeColor, this.spawnStrokeOpacity, this.spawnStrokeWidth);
|
|
8874
8970
|
}
|
|
8875
8971
|
let position = this.position;
|
|
8876
|
-
if (this
|
|
8877
|
-
const shapePosData = this.
|
|
8972
|
+
if (this.#shape) {
|
|
8973
|
+
const shapePosData = this.#shape.randomPosition();
|
|
8878
8974
|
if (shapePosData) {
|
|
8879
8975
|
position = shapePosData.position;
|
|
8880
8976
|
const replaceData = shapeOptions.replace;
|
|
@@ -8887,21 +8983,21 @@
|
|
|
8887
8983
|
}
|
|
8888
8984
|
}
|
|
8889
8985
|
if (position) {
|
|
8890
|
-
this.
|
|
8986
|
+
this.#container.particles.addParticle(position, particlesOptions);
|
|
8891
8987
|
}
|
|
8892
8988
|
}
|
|
8893
8989
|
}
|
|
8894
|
-
|
|
8895
|
-
if (this
|
|
8990
|
+
#prepareToDie = () => {
|
|
8991
|
+
if (this.#paused) {
|
|
8896
8992
|
return;
|
|
8897
8993
|
}
|
|
8898
8994
|
const duration = this.options.life.duration !== undefined ? getRangeValue(this.options.life.duration) : undefined, minDuration = 0, minLifeCount = 0;
|
|
8899
|
-
if ((this
|
|
8900
|
-
this
|
|
8995
|
+
if ((this.#lifeCount > minLifeCount || this.#immortal) && duration !== undefined && duration > minDuration) {
|
|
8996
|
+
this.#duration = duration * millisecondsToSeconds;
|
|
8901
8997
|
}
|
|
8902
8998
|
};
|
|
8903
|
-
|
|
8904
|
-
const container = this
|
|
8999
|
+
#setColorAnimation = (animation, initValue, maxValue, factor = defaultColorAnimationFactor) => {
|
|
9000
|
+
const container = this.#container;
|
|
8905
9001
|
if (!animation.enable) {
|
|
8906
9002
|
return initValue;
|
|
8907
9003
|
}
|
|
@@ -8932,8 +9028,6 @@
|
|
|
8932
9028
|
exports.MoveCenter = MoveCenter;
|
|
8933
9029
|
exports.MoveGravity = MoveGravity;
|
|
8934
9030
|
exports.MovePath = MovePath;
|
|
8935
|
-
exports.Opacity = Opacity;
|
|
8936
|
-
exports.OpacityAnimation = OpacityAnimation;
|
|
8937
9031
|
exports.Options = Options;
|
|
8938
9032
|
exports.OptionsColor = OptionsColor;
|
|
8939
9033
|
exports.OutModes = OutModes;
|
|
@@ -8949,8 +9043,6 @@
|
|
|
8949
9043
|
exports.Rectangle = Rectangle;
|
|
8950
9044
|
exports.ResizeEvent = ResizeEvent;
|
|
8951
9045
|
exports.Shape = Shape;
|
|
8952
|
-
exports.Size = Size;
|
|
8953
|
-
exports.SizeAnimation = SizeAnimation;
|
|
8954
9046
|
exports.Spin = Spin;
|
|
8955
9047
|
exports.Stroke = Stroke;
|
|
8956
9048
|
exports.ValueWithRandom = ValueWithRandom;
|