@tsparticles/interaction-light 3.0.0-alpha.1 → 3.0.0-beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +25 -19
- package/browser/ExternalLighter.js +15 -15
- package/browser/Options/Classes/Light.js +2 -2
- package/browser/Options/Classes/LightArea.js +1 -1
- package/browser/ParticlesLighter.js +12 -11
- package/browser/Utils.js +14 -16
- package/browser/index.js +13 -13
- package/browser/package.json +1 -0
- package/cjs/ExternalLighter.js +16 -27
- package/cjs/Options/Classes/Light.js +4 -4
- package/cjs/Options/Classes/LightArea.js +2 -2
- package/cjs/ParticlesLighter.js +13 -23
- package/cjs/Utils.js +14 -16
- package/cjs/index.js +13 -13
- package/cjs/package.json +1 -0
- package/esm/ExternalLighter.js +15 -15
- package/esm/Options/Classes/Light.js +2 -2
- package/esm/Options/Classes/LightArea.js +1 -1
- package/esm/ParticlesLighter.js +12 -11
- package/esm/Utils.js +14 -16
- package/esm/index.js +13 -13
- package/esm/package.json +1 -0
- package/package.json +23 -6
- package/report.html +4 -4
- package/tsparticles.interaction.light.js +49 -48
- package/tsparticles.interaction.light.min.js +1 -1
- package/tsparticles.interaction.light.min.js.LICENSE.txt +1 -8
- package/types/ExternalLighter.d.ts +3 -4
- package/types/Options/Classes/Light.d.ts +3 -3
- package/types/Options/Classes/LightArea.d.ts +2 -2
- package/types/Options/Classes/LightGradient.d.ts +1 -1
- package/types/Options/Classes/LightOptions.d.ts +1 -1
- package/types/Options/Classes/LightShadow.d.ts +2 -3
- package/types/Options/Interfaces/ILight.d.ts +2 -2
- package/types/Options/Interfaces/ILightArea.d.ts +1 -1
- package/types/ParticlesLighter.d.ts +1 -1
- package/types/Types.d.ts +3 -3
- package/types/Utils.d.ts +2 -2
- package/types/index.d.ts +9 -9
- package/umd/ExternalLighter.js +16 -16
- package/umd/Options/Classes/Light.js +5 -5
- package/umd/Options/Classes/LightArea.js +3 -3
- package/umd/ParticlesLighter.js +13 -12
- package/umd/Utils.js +14 -16
- package/umd/index.js +14 -14
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* Demo / Generator : https://particles.js.org/
|
|
5
5
|
* GitHub : https://www.github.com/matteobruni/tsparticles
|
|
6
6
|
* How to use? : Check the GitHub README
|
|
7
|
-
* v3.0.0-
|
|
7
|
+
* v3.0.0-beta.1
|
|
8
8
|
*/
|
|
9
9
|
(function webpackUniversalModuleDefinition(root, factory) {
|
|
10
10
|
if(typeof exports === 'object' && typeof module === 'object')
|
|
@@ -91,11 +91,11 @@ __webpack_require__.r(__webpack_exports__);
|
|
|
91
91
|
|
|
92
92
|
// EXPORTS
|
|
93
93
|
__webpack_require__.d(__webpack_exports__, {
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
94
|
+
Light: () => (/* reexport */ Light),
|
|
95
|
+
LightArea: () => (/* reexport */ LightArea),
|
|
96
|
+
LightGradient: () => (/* reexport */ LightGradient),
|
|
97
|
+
LightShadow: () => (/* reexport */ LightShadow),
|
|
98
|
+
loadLightInteraction: () => (/* binding */ loadLightInteraction)
|
|
99
99
|
});
|
|
100
100
|
|
|
101
101
|
// EXTERNAL MODULE: external {"commonjs":"@tsparticles/engine","commonjs2":"@tsparticles/engine","amd":"@tsparticles/engine","root":"window"}
|
|
@@ -171,8 +171,7 @@ class Light {
|
|
|
171
171
|
;// CONCATENATED MODULE: ./dist/browser/Utils.js
|
|
172
172
|
|
|
173
173
|
function drawLight(container, context, mousePos) {
|
|
174
|
-
|
|
175
|
-
const lightOptions = (_a = container.actualOptions.interactivity.modes.light) === null || _a === void 0 ? void 0 : _a.area;
|
|
174
|
+
const lightOptions = container.actualOptions.interactivity.modes.light?.area;
|
|
176
175
|
if (!lightOptions) {
|
|
177
176
|
return;
|
|
178
177
|
}
|
|
@@ -189,9 +188,8 @@ function drawLight(container, context, mousePos) {
|
|
|
189
188
|
context.fill();
|
|
190
189
|
}
|
|
191
190
|
function drawParticleShadow(container, context, particle, mousePos) {
|
|
192
|
-
var _a;
|
|
193
191
|
const pos = particle.getPosition(),
|
|
194
|
-
shadowOptions =
|
|
192
|
+
shadowOptions = container.actualOptions.interactivity.modes.light?.shadow;
|
|
195
193
|
if (!shadowOptions) {
|
|
196
194
|
return;
|
|
197
195
|
}
|
|
@@ -215,23 +213,23 @@ function drawParticleShadow(container, context, particle, mousePos) {
|
|
|
215
213
|
shadowLength = shadowOptions.length;
|
|
216
214
|
for (const dot of dots) {
|
|
217
215
|
const dotAngle = Math.atan2(mousePos.y - dot.y, mousePos.x - dot.x),
|
|
218
|
-
|
|
219
|
-
|
|
216
|
+
end = {
|
|
217
|
+
x: dot.x + shadowLength * Math.sin(-dotAngle - Math.PI / 2),
|
|
218
|
+
y: dot.y + shadowLength * Math.cos(-dotAngle - Math.PI / 2)
|
|
219
|
+
};
|
|
220
220
|
points.push({
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
startX: dot.x,
|
|
224
|
-
startY: dot.y
|
|
221
|
+
end: end,
|
|
222
|
+
start: dot
|
|
225
223
|
});
|
|
226
224
|
}
|
|
227
|
-
const shadowColor = (0,engine_root_window_.getStyleFromRgb)(shadowRgb)
|
|
228
|
-
|
|
229
|
-
|
|
225
|
+
const shadowColor = (0,engine_root_window_.getStyleFromRgb)(shadowRgb),
|
|
226
|
+
last = points.length - 1;
|
|
227
|
+
for (let i = last, n = 0; i >= 0; n = i--) {
|
|
230
228
|
context.beginPath();
|
|
231
|
-
context.moveTo(points[i].
|
|
232
|
-
context.lineTo(points[n].
|
|
233
|
-
context.lineTo(points[n].
|
|
234
|
-
context.lineTo(points[i].
|
|
229
|
+
context.moveTo(points[i].start.x, points[i].start.y);
|
|
230
|
+
context.lineTo(points[n].start.x, points[n].start.y);
|
|
231
|
+
context.lineTo(points[n].end.x, points[n].end.y);
|
|
232
|
+
context.lineTo(points[i].end.x, points[i].end.y);
|
|
235
233
|
context.fillStyle = shadowColor;
|
|
236
234
|
context.fill();
|
|
237
235
|
}
|
|
@@ -248,22 +246,23 @@ class ExternalLighter extends engine_root_window_.ExternalInteractorBase {
|
|
|
248
246
|
init() {}
|
|
249
247
|
async interact() {
|
|
250
248
|
const container = this.container,
|
|
251
|
-
options = container.actualOptions
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
return;
|
|
256
|
-
}
|
|
257
|
-
container.canvas.draw(ctx => {
|
|
258
|
-
drawLight(container, ctx, mousePos);
|
|
259
|
-
});
|
|
249
|
+
options = container.actualOptions,
|
|
250
|
+
interactivity = container.interactivity;
|
|
251
|
+
if (!options.interactivity.events.onHover.enable || interactivity.status !== "pointermove") {
|
|
252
|
+
return;
|
|
260
253
|
}
|
|
254
|
+
const mousePos = interactivity.mouse.position;
|
|
255
|
+
if (!mousePos) {
|
|
256
|
+
return;
|
|
257
|
+
}
|
|
258
|
+
container.canvas.draw(ctx => {
|
|
259
|
+
drawLight(container, ctx, mousePos);
|
|
260
|
+
});
|
|
261
261
|
}
|
|
262
262
|
isEnabled(particle) {
|
|
263
|
-
var _a;
|
|
264
263
|
const container = this.container,
|
|
265
264
|
mouse = container.interactivity.mouse,
|
|
266
|
-
interactivity =
|
|
265
|
+
interactivity = particle?.interactivity ?? container.actualOptions.interactivity,
|
|
267
266
|
events = interactivity.events;
|
|
268
267
|
if (!(events.onHover.enable && mouse.position)) {
|
|
269
268
|
return false;
|
|
@@ -283,7 +282,7 @@ class ExternalLighter extends engine_root_window_.ExternalInteractorBase {
|
|
|
283
282
|
options.light = new Light();
|
|
284
283
|
}
|
|
285
284
|
for (const source of sources) {
|
|
286
|
-
options.light.load(source
|
|
285
|
+
options.light.load(source?.light);
|
|
287
286
|
}
|
|
288
287
|
}
|
|
289
288
|
reset() {}
|
|
@@ -299,20 +298,22 @@ class ParticlesLighter extends engine_root_window_.ParticlesInteractorBase {
|
|
|
299
298
|
init() {}
|
|
300
299
|
async interact(particle) {
|
|
301
300
|
const container = this.container,
|
|
302
|
-
options = container.actualOptions
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
301
|
+
options = container.actualOptions,
|
|
302
|
+
interactivity = container.interactivity;
|
|
303
|
+
if (!options.interactivity.events.onHover.enable || interactivity.status !== "pointermove") {
|
|
304
|
+
return;
|
|
305
|
+
}
|
|
306
|
+
const mousePos = interactivity.mouse.position;
|
|
307
|
+
if (!mousePos) {
|
|
308
|
+
return;
|
|
310
309
|
}
|
|
310
|
+
container.canvas.draw(ctx => {
|
|
311
|
+
drawParticleShadow(container, ctx, particle, mousePos);
|
|
312
|
+
});
|
|
311
313
|
}
|
|
312
314
|
isEnabled(particle) {
|
|
313
|
-
var _a;
|
|
314
315
|
const container = this.container,
|
|
315
|
-
interactivity =
|
|
316
|
+
interactivity = particle.interactivity ?? container.actualOptions.interactivity,
|
|
316
317
|
mouse = container.interactivity.mouse,
|
|
317
318
|
events = interactivity.events;
|
|
318
319
|
if (!(events.onHover.enable && mouse.position)) {
|
|
@@ -330,9 +331,9 @@ class ParticlesLighter extends engine_root_window_.ParticlesInteractorBase {
|
|
|
330
331
|
;// CONCATENATED MODULE: ./dist/browser/index.js
|
|
331
332
|
|
|
332
333
|
|
|
333
|
-
function loadLightInteraction(engine) {
|
|
334
|
-
engine.addInteractor("externalLight", container => new ExternalLighter(container));
|
|
335
|
-
engine.addInteractor("particlesLight", container => new ParticlesLighter(container));
|
|
334
|
+
async function loadLightInteraction(engine, refresh = true) {
|
|
335
|
+
await engine.addInteractor("externalLight", container => new ExternalLighter(container), refresh);
|
|
336
|
+
await engine.addInteractor("particlesLight", container => new ParticlesLighter(container), refresh);
|
|
336
337
|
}
|
|
337
338
|
|
|
338
339
|
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/*! For license information please see tsparticles.interaction.light.min.js.LICENSE.txt */
|
|
2
|
-
!function(t,e){if("object"==typeof exports&&"object"==typeof module)module.exports=e(require("@tsparticles/engine"));else if("function"==typeof define&&define.amd)define(["@tsparticles/engine"],e);else{var o="object"==typeof exports?e(require("@tsparticles/engine")):e(t.window);for(var i in o)("object"==typeof exports?exports:t)[i]=o[i]}}(this,(t=>(()=>{"use strict";var e={533:e=>{e.exports=t}},o={};function i(t){var r=o[t];if(void 0!==r)return r.exports;var
|
|
2
|
+
!function(t,e){if("object"==typeof exports&&"object"==typeof module)module.exports=e(require("@tsparticles/engine"));else if("function"==typeof define&&define.amd)define(["@tsparticles/engine"],e);else{var o="object"==typeof exports?e(require("@tsparticles/engine")):e(t.window);for(var i in o)("object"==typeof exports?exports:t)[i]=o[i]}}(this,(t=>(()=>{"use strict";var e={533:e=>{e.exports=t}},o={};function i(t){var r=o[t];if(void 0!==r)return r.exports;var s=o[t]={exports:{}};return e[t](s,s.exports,i),s.exports}i.d=(t,e)=>{for(var o in e)i.o(e,o)&&!i.o(t,o)&&Object.defineProperty(t,o,{enumerable:!0,get:e[o]})},i.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),i.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var r={};return(()=>{i.r(r),i.d(r,{Light:()=>n,LightArea:()=>o,LightGradient:()=>e,LightShadow:()=>s,loadLightInteraction:()=>l});var t=i(533);class e{constructor(){this.start=new t.OptionsColor,this.stop=new t.OptionsColor,this.start.value="#ffffff",this.stop.value="#000000"}load(e){e&&(this.start=t.OptionsColor.create(this.start,e.start),this.stop=t.OptionsColor.create(this.stop,e.stop))}}class o{constructor(){this.gradient=new e,this.radius=1e3}load(t){t&&(this.gradient.load(t.gradient),void 0!==t.radius&&(this.radius=t.radius))}}class s{constructor(){this.color=new t.OptionsColor,this.color.value="#000000",this.length=2e3}load(e){e&&(this.color=t.OptionsColor.create(this.color,e.color),void 0!==e.length&&(this.length=e.length))}}class n{constructor(){this.area=new o,this.shadow=new s}load(t){t&&(this.area.load(t.area),this.shadow.load(t.shadow))}}class a extends t.ExternalInteractorBase{constructor(t){super(t)}clear(){}init(){}async interact(){const e=this.container,o=e.actualOptions,i=e.interactivity;if(!o.interactivity.events.onHover.enable||"pointermove"!==i.status)return;const r=i.mouse.position;r&&e.canvas.draw((o=>{!function(e,o,i){const r=e.actualOptions.interactivity.modes.light?.area;if(!r)return;o.beginPath(),o.arc(i.x,i.y,r.radius,0,2*Math.PI);const s=o.createRadialGradient(i.x,i.y,0,i.x,i.y,r.radius),n=e.canvas.mouseLight;n&&n.start&&n.stop&&(s.addColorStop(0,(0,t.getStyleFromRgb)(n.start)),s.addColorStop(1,(0,t.getStyleFromRgb)(n.stop)),o.fillStyle=s,o.fill())}(e,o,r)}))}isEnabled(e){const o=this.container,i=o.interactivity.mouse,r=e?.interactivity??o.actualOptions.interactivity,s=r.events;if(!s.onHover.enable||!i.position)return!1;const n=(0,t.isInArray)("light",s.onHover.mode);if(n&&r.modes.light){const e=r.modes.light.area.gradient;o.canvas.mouseLight={start:(0,t.rangeColorToRgb)(e.start),stop:(0,t.rangeColorToRgb)(e.stop)}}return n}loadModeOptions(t,...e){t.light||(t.light=new n);for(const o of e)t.light.load(o?.light)}reset(){}}class c extends t.ParticlesInteractorBase{constructor(t){super(t)}clear(){}init(){}async interact(e){const o=this.container,i=o.actualOptions,r=o.interactivity;if(!i.interactivity.events.onHover.enable||"pointermove"!==r.status)return;const s=r.mouse.position;s&&o.canvas.draw((i=>{!function(e,o,i,r){const s=i.getPosition(),n=e.actualOptions.interactivity.modes.light?.shadow;if(!n)return;const a=i.lightShadow;if(!a)return;const c=i.getRadius(),l=i.sides,d=2*Math.PI/l,h=-i.rotation+Math.PI/4,u=[];for(let t=0;t<l;t++)u.push({x:s.x+c*Math.sin(h+d*t)*1,y:s.y+c*Math.cos(h+d*t)*1});const p=[],g=n.length;for(const t of u){const e=Math.atan2(r.y-t.y,r.x-t.x),o={x:t.x+g*Math.sin(-e-Math.PI/2),y:t.y+g*Math.cos(-e-Math.PI/2)};p.push({end:o,start:t})}const f=(0,t.getStyleFromRgb)(a);for(let t=p.length-1,e=0;t>=0;e=t--)o.beginPath(),o.moveTo(p[t].start.x,p[t].start.y),o.lineTo(p[e].start.x,p[e].start.y),o.lineTo(p[e].end.x,p[e].end.y),o.lineTo(p[t].end.x,p[t].end.y),o.fillStyle=f,o.fill()}(o,i,e,s)}))}isEnabled(e){const o=this.container,i=e.interactivity??o.actualOptions.interactivity,r=o.interactivity.mouse,s=i.events;if(!s.onHover.enable||!r.position)return!1;const n=(0,t.isInArray)("light",s.onHover.mode);if(n&&i.modes.light){const o=i.modes.light.shadow;e.lightShadow=(0,t.rangeColorToRgb)(o.color)}return n}reset(){}}async function l(t,e=!0){await t.addInteractor("externalLight",(t=>new a(t)),e),await t.addInteractor("particlesLight",(t=>new c(t)),e)}})(),r})()));
|
|
@@ -1,8 +1 @@
|
|
|
1
|
-
/*!
|
|
2
|
-
* Author : Matteo Bruni
|
|
3
|
-
* MIT license: https://opensource.org/licenses/MIT
|
|
4
|
-
* Demo / Generator : https://particles.js.org/
|
|
5
|
-
* GitHub : https://www.github.com/matteobruni/tsparticles
|
|
6
|
-
* How to use? : Check the GitHub README
|
|
7
|
-
* v3.0.0-alpha.1
|
|
8
|
-
*/
|
|
1
|
+
/*! tsParticles Light Interaction v3.0.0-beta.1 by Matteo Bruni */
|
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
import { ExternalInteractorBase } from "@tsparticles/engine";
|
|
2
|
-
import type { ILightMode, LightMode } from "./Types";
|
|
3
|
-
import type {
|
|
4
|
-
import type { LightContainer, LightParticle } from "./Types";
|
|
1
|
+
import { ExternalInteractorBase, type IModes, type Modes, type RecursivePartial } from "@tsparticles/engine";
|
|
2
|
+
import type { ILightMode, LightMode } from "./Types.js";
|
|
3
|
+
import type { LightContainer, LightParticle } from "./Types.js";
|
|
5
4
|
export declare class ExternalLighter extends ExternalInteractorBase<LightContainer> {
|
|
6
5
|
constructor(container: LightContainer);
|
|
7
6
|
clear(): void;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { IOptionLoader, RecursivePartial } from "@tsparticles/engine";
|
|
2
|
-
import type { ILight } from "../Interfaces/ILight";
|
|
3
|
-
import { LightArea } from "./LightArea";
|
|
4
|
-
import { LightShadow } from "./LightShadow";
|
|
2
|
+
import type { ILight } from "../Interfaces/ILight.js";
|
|
3
|
+
import { LightArea } from "./LightArea.js";
|
|
4
|
+
import { LightShadow } from "./LightShadow.js";
|
|
5
5
|
export declare class Light implements ILight, IOptionLoader<ILight> {
|
|
6
6
|
area: LightArea;
|
|
7
7
|
shadow: LightShadow;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { IOptionLoader, RecursivePartial } from "@tsparticles/engine";
|
|
2
|
-
import type { ILightArea } from "../Interfaces/ILightArea";
|
|
3
|
-
import { LightGradient } from "./LightGradient";
|
|
2
|
+
import type { ILightArea } from "../Interfaces/ILightArea.js";
|
|
3
|
+
import { LightGradient } from "./LightGradient.js";
|
|
4
4
|
export declare class LightArea implements ILightArea, IOptionLoader<ILightArea> {
|
|
5
5
|
gradient: LightGradient;
|
|
6
6
|
radius: number;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { IOptionLoader, RecursivePartial } from "@tsparticles/engine";
|
|
2
|
-
import type { ILightGradient } from "../Interfaces/ILightGradient";
|
|
2
|
+
import type { ILightGradient } from "../Interfaces/ILightGradient.js";
|
|
3
3
|
import { OptionsColor } from "@tsparticles/engine";
|
|
4
4
|
export declare class LightGradient implements ILightGradient, IOptionLoader<ILightGradient> {
|
|
5
5
|
start: OptionsColor;
|
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
import type
|
|
2
|
-
import type { ILightShadow } from "../Interfaces/ILightShadow";
|
|
3
|
-
import { OptionsColor } from "@tsparticles/engine";
|
|
1
|
+
import { type IOptionLoader, OptionsColor, type RecursivePartial } from "@tsparticles/engine";
|
|
2
|
+
import type { ILightShadow } from "../Interfaces/ILightShadow.js";
|
|
4
3
|
export declare class LightShadow implements ILightShadow, IOptionLoader<ILightShadow> {
|
|
5
4
|
color: OptionsColor;
|
|
6
5
|
length: number;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import type { ILightArea } from "./ILightArea";
|
|
2
|
-
import type { ILightShadow } from "./ILightShadow";
|
|
1
|
+
import type { ILightArea } from "./ILightArea.js";
|
|
2
|
+
import type { ILightShadow } from "./ILightShadow.js";
|
|
3
3
|
export interface ILight {
|
|
4
4
|
area: ILightArea;
|
|
5
5
|
shadow: ILightShadow;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { ParticlesInteractorBase } from "@tsparticles/engine";
|
|
2
|
-
import type { LightContainer, LightParticle } from "./Types";
|
|
2
|
+
import type { LightContainer, LightParticle } from "./Types.js";
|
|
3
3
|
export declare class ParticlesLighter extends ParticlesInteractorBase<LightContainer> {
|
|
4
4
|
constructor(container: LightContainer);
|
|
5
5
|
clear(): void;
|
package/types/Types.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { Container, IRgb, Particle } from "@tsparticles/engine";
|
|
2
|
-
import type { LightOptions, LightParticlesOptions } from "./Options/Classes/LightOptions";
|
|
3
|
-
import type { ILight } from "./Options/Interfaces/ILight";
|
|
4
|
-
import type { Light } from "./Options/Classes/Light";
|
|
2
|
+
import type { LightOptions, LightParticlesOptions } from "./Options/Classes/LightOptions.js";
|
|
3
|
+
import type { ILight } from "./Options/Interfaces/ILight.js";
|
|
4
|
+
import type { Light } from "./Options/Classes/Light.js";
|
|
5
5
|
export type ILightMode = {
|
|
6
6
|
light?: ILight;
|
|
7
7
|
};
|
package/types/Utils.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
2
|
-
import type {
|
|
1
|
+
import { type ICoordinates } from "@tsparticles/engine";
|
|
2
|
+
import type { LightContainer, LightParticle } from "./Types.js";
|
|
3
3
|
export declare function drawLight(container: LightContainer, context: CanvasRenderingContext2D, mousePos: ICoordinates): void;
|
|
4
4
|
export declare function drawParticleShadow(container: LightContainer, context: CanvasRenderingContext2D, particle: LightParticle, mousePos: ICoordinates): void;
|
package/types/index.d.ts
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import type { Engine } from "@tsparticles/engine";
|
|
2
|
-
export declare function loadLightInteraction(engine: Engine): void
|
|
3
|
-
export * from "./Options/Classes/Light";
|
|
4
|
-
export * from "./Options/Classes/LightArea";
|
|
5
|
-
export * from "./Options/Classes/LightGradient";
|
|
6
|
-
export * from "./Options/Classes/LightShadow";
|
|
7
|
-
export * from "./Options/Interfaces/ILight";
|
|
8
|
-
export * from "./Options/Interfaces/ILightArea";
|
|
9
|
-
export * from "./Options/Interfaces/ILightGradient";
|
|
10
|
-
export * from "./Options/Interfaces/ILightShadow";
|
|
2
|
+
export declare function loadLightInteraction(engine: Engine, refresh?: boolean): Promise<void>;
|
|
3
|
+
export * from "./Options/Classes/Light.js";
|
|
4
|
+
export * from "./Options/Classes/LightArea.js";
|
|
5
|
+
export * from "./Options/Classes/LightGradient.js";
|
|
6
|
+
export * from "./Options/Classes/LightShadow.js";
|
|
7
|
+
export * from "./Options/Interfaces/ILight.js";
|
|
8
|
+
export * from "./Options/Interfaces/ILightArea.js";
|
|
9
|
+
export * from "./Options/Interfaces/ILightGradient.js";
|
|
10
|
+
export * from "./Options/Interfaces/ILightShadow.js";
|
package/umd/ExternalLighter.js
CHANGED
|
@@ -4,15 +4,15 @@
|
|
|
4
4
|
if (v !== undefined) module.exports = v;
|
|
5
5
|
}
|
|
6
6
|
else if (typeof define === "function" && define.amd) {
|
|
7
|
-
define(["require", "exports", "@tsparticles/engine", "./Options/Classes/Light", "./Utils"], factory);
|
|
7
|
+
define(["require", "exports", "@tsparticles/engine", "./Options/Classes/Light.js", "./Utils.js"], factory);
|
|
8
8
|
}
|
|
9
9
|
})(function (require, exports) {
|
|
10
10
|
"use strict";
|
|
11
11
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
12
12
|
exports.ExternalLighter = void 0;
|
|
13
13
|
const engine_1 = require("@tsparticles/engine");
|
|
14
|
-
const
|
|
15
|
-
const
|
|
14
|
+
const Light_js_1 = require("./Options/Classes/Light.js");
|
|
15
|
+
const Utils_js_1 = require("./Utils.js");
|
|
16
16
|
class ExternalLighter extends engine_1.ExternalInteractorBase {
|
|
17
17
|
constructor(container) {
|
|
18
18
|
super(container);
|
|
@@ -22,20 +22,20 @@
|
|
|
22
22
|
init() {
|
|
23
23
|
}
|
|
24
24
|
async interact() {
|
|
25
|
-
const container = this.container, options = container.actualOptions;
|
|
26
|
-
if (options.interactivity.events.onHover.enable
|
|
27
|
-
|
|
28
|
-
if (!mousePos) {
|
|
29
|
-
return;
|
|
30
|
-
}
|
|
31
|
-
container.canvas.draw((ctx) => {
|
|
32
|
-
(0, Utils_1.drawLight)(container, ctx, mousePos);
|
|
33
|
-
});
|
|
25
|
+
const container = this.container, options = container.actualOptions, interactivity = container.interactivity;
|
|
26
|
+
if (!options.interactivity.events.onHover.enable || interactivity.status !== "pointermove") {
|
|
27
|
+
return;
|
|
34
28
|
}
|
|
29
|
+
const mousePos = interactivity.mouse.position;
|
|
30
|
+
if (!mousePos) {
|
|
31
|
+
return;
|
|
32
|
+
}
|
|
33
|
+
container.canvas.draw((ctx) => {
|
|
34
|
+
(0, Utils_js_1.drawLight)(container, ctx, mousePos);
|
|
35
|
+
});
|
|
35
36
|
}
|
|
36
37
|
isEnabled(particle) {
|
|
37
|
-
|
|
38
|
-
const container = this.container, mouse = container.interactivity.mouse, interactivity = (_a = particle === null || particle === void 0 ? void 0 : particle.interactivity) !== null && _a !== void 0 ? _a : container.actualOptions.interactivity, events = interactivity.events;
|
|
38
|
+
const container = this.container, mouse = container.interactivity.mouse, interactivity = particle?.interactivity ?? container.actualOptions.interactivity, events = interactivity.events;
|
|
39
39
|
if (!(events.onHover.enable && mouse.position)) {
|
|
40
40
|
return false;
|
|
41
41
|
}
|
|
@@ -51,10 +51,10 @@
|
|
|
51
51
|
}
|
|
52
52
|
loadModeOptions(options, ...sources) {
|
|
53
53
|
if (!options.light) {
|
|
54
|
-
options.light = new
|
|
54
|
+
options.light = new Light_js_1.Light();
|
|
55
55
|
}
|
|
56
56
|
for (const source of sources) {
|
|
57
|
-
options.light.load(source
|
|
57
|
+
options.light.load(source?.light);
|
|
58
58
|
}
|
|
59
59
|
}
|
|
60
60
|
reset() {
|
|
@@ -4,18 +4,18 @@
|
|
|
4
4
|
if (v !== undefined) module.exports = v;
|
|
5
5
|
}
|
|
6
6
|
else if (typeof define === "function" && define.amd) {
|
|
7
|
-
define(["require", "exports", "./LightArea", "./LightShadow"], factory);
|
|
7
|
+
define(["require", "exports", "./LightArea.js", "./LightShadow.js"], factory);
|
|
8
8
|
}
|
|
9
9
|
})(function (require, exports) {
|
|
10
10
|
"use strict";
|
|
11
11
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
12
12
|
exports.Light = void 0;
|
|
13
|
-
const
|
|
14
|
-
const
|
|
13
|
+
const LightArea_js_1 = require("./LightArea.js");
|
|
14
|
+
const LightShadow_js_1 = require("./LightShadow.js");
|
|
15
15
|
class Light {
|
|
16
16
|
constructor() {
|
|
17
|
-
this.area = new
|
|
18
|
-
this.shadow = new
|
|
17
|
+
this.area = new LightArea_js_1.LightArea();
|
|
18
|
+
this.shadow = new LightShadow_js_1.LightShadow();
|
|
19
19
|
}
|
|
20
20
|
load(data) {
|
|
21
21
|
if (!data) {
|
|
@@ -4,16 +4,16 @@
|
|
|
4
4
|
if (v !== undefined) module.exports = v;
|
|
5
5
|
}
|
|
6
6
|
else if (typeof define === "function" && define.amd) {
|
|
7
|
-
define(["require", "exports", "./LightGradient"], factory);
|
|
7
|
+
define(["require", "exports", "./LightGradient.js"], factory);
|
|
8
8
|
}
|
|
9
9
|
})(function (require, exports) {
|
|
10
10
|
"use strict";
|
|
11
11
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
12
12
|
exports.LightArea = void 0;
|
|
13
|
-
const
|
|
13
|
+
const LightGradient_js_1 = require("./LightGradient.js");
|
|
14
14
|
class LightArea {
|
|
15
15
|
constructor() {
|
|
16
|
-
this.gradient = new
|
|
16
|
+
this.gradient = new LightGradient_js_1.LightGradient();
|
|
17
17
|
this.radius = 1000;
|
|
18
18
|
}
|
|
19
19
|
load(data) {
|
package/umd/ParticlesLighter.js
CHANGED
|
@@ -4,14 +4,14 @@
|
|
|
4
4
|
if (v !== undefined) module.exports = v;
|
|
5
5
|
}
|
|
6
6
|
else if (typeof define === "function" && define.amd) {
|
|
7
|
-
define(["require", "exports", "@tsparticles/engine", "./Utils"], factory);
|
|
7
|
+
define(["require", "exports", "@tsparticles/engine", "./Utils.js"], factory);
|
|
8
8
|
}
|
|
9
9
|
})(function (require, exports) {
|
|
10
10
|
"use strict";
|
|
11
11
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
12
12
|
exports.ParticlesLighter = void 0;
|
|
13
13
|
const engine_1 = require("@tsparticles/engine");
|
|
14
|
-
const
|
|
14
|
+
const Utils_js_1 = require("./Utils.js");
|
|
15
15
|
class ParticlesLighter extends engine_1.ParticlesInteractorBase {
|
|
16
16
|
constructor(container) {
|
|
17
17
|
super(container);
|
|
@@ -21,19 +21,20 @@
|
|
|
21
21
|
init() {
|
|
22
22
|
}
|
|
23
23
|
async interact(particle) {
|
|
24
|
-
const container = this.container, options = container.actualOptions;
|
|
25
|
-
if (options.interactivity.events.onHover.enable
|
|
26
|
-
|
|
27
|
-
if (mousePos) {
|
|
28
|
-
container.canvas.draw((ctx) => {
|
|
29
|
-
(0, Utils_1.drawParticleShadow)(container, ctx, particle, mousePos);
|
|
30
|
-
});
|
|
31
|
-
}
|
|
24
|
+
const container = this.container, options = container.actualOptions, interactivity = container.interactivity;
|
|
25
|
+
if (!options.interactivity.events.onHover.enable || interactivity.status !== "pointermove") {
|
|
26
|
+
return;
|
|
32
27
|
}
|
|
28
|
+
const mousePos = interactivity.mouse.position;
|
|
29
|
+
if (!mousePos) {
|
|
30
|
+
return;
|
|
31
|
+
}
|
|
32
|
+
container.canvas.draw((ctx) => {
|
|
33
|
+
(0, Utils_js_1.drawParticleShadow)(container, ctx, particle, mousePos);
|
|
34
|
+
});
|
|
33
35
|
}
|
|
34
36
|
isEnabled(particle) {
|
|
35
|
-
|
|
36
|
-
const container = this.container, interactivity = (_a = particle.interactivity) !== null && _a !== void 0 ? _a : container.actualOptions.interactivity, mouse = container.interactivity.mouse, events = interactivity.events;
|
|
37
|
+
const container = this.container, interactivity = particle.interactivity ?? container.actualOptions.interactivity, mouse = container.interactivity.mouse, events = interactivity.events;
|
|
37
38
|
if (!(events.onHover.enable && mouse.position)) {
|
|
38
39
|
return false;
|
|
39
40
|
}
|
package/umd/Utils.js
CHANGED
|
@@ -12,8 +12,7 @@
|
|
|
12
12
|
exports.drawParticleShadow = exports.drawLight = void 0;
|
|
13
13
|
const engine_1 = require("@tsparticles/engine");
|
|
14
14
|
function drawLight(container, context, mousePos) {
|
|
15
|
-
|
|
16
|
-
const lightOptions = (_a = container.actualOptions.interactivity.modes.light) === null || _a === void 0 ? void 0 : _a.area;
|
|
15
|
+
const lightOptions = container.actualOptions.interactivity.modes.light?.area;
|
|
17
16
|
if (!lightOptions) {
|
|
18
17
|
return;
|
|
19
18
|
}
|
|
@@ -31,8 +30,7 @@
|
|
|
31
30
|
}
|
|
32
31
|
exports.drawLight = drawLight;
|
|
33
32
|
function drawParticleShadow(container, context, particle, mousePos) {
|
|
34
|
-
|
|
35
|
-
const pos = particle.getPosition(), shadowOptions = (_a = container.actualOptions.interactivity.modes.light) === null || _a === void 0 ? void 0 : _a.shadow;
|
|
33
|
+
const pos = particle.getPosition(), shadowOptions = container.actualOptions.interactivity.modes.light?.shadow;
|
|
36
34
|
if (!shadowOptions) {
|
|
37
35
|
return;
|
|
38
36
|
}
|
|
@@ -49,22 +47,22 @@
|
|
|
49
47
|
}
|
|
50
48
|
const points = [], shadowLength = shadowOptions.length;
|
|
51
49
|
for (const dot of dots) {
|
|
52
|
-
const dotAngle = Math.atan2(mousePos.y - dot.y, mousePos.x - dot.x),
|
|
50
|
+
const dotAngle = Math.atan2(mousePos.y - dot.y, mousePos.x - dot.x), end = {
|
|
51
|
+
x: dot.x + shadowLength * Math.sin(-dotAngle - Math.PI / 2),
|
|
52
|
+
y: dot.y + shadowLength * Math.cos(-dotAngle - Math.PI / 2),
|
|
53
|
+
};
|
|
53
54
|
points.push({
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
startX: dot.x,
|
|
57
|
-
startY: dot.y,
|
|
55
|
+
end: end,
|
|
56
|
+
start: dot,
|
|
58
57
|
});
|
|
59
58
|
}
|
|
60
|
-
const shadowColor = (0, engine_1.getStyleFromRgb)(shadowRgb);
|
|
61
|
-
for (let i =
|
|
62
|
-
const n = i === points.length - 1 ? 0 : i + 1;
|
|
59
|
+
const shadowColor = (0, engine_1.getStyleFromRgb)(shadowRgb), last = points.length - 1;
|
|
60
|
+
for (let i = last, n = 0; i >= 0; n = i--) {
|
|
63
61
|
context.beginPath();
|
|
64
|
-
context.moveTo(points[i].
|
|
65
|
-
context.lineTo(points[n].
|
|
66
|
-
context.lineTo(points[n].
|
|
67
|
-
context.lineTo(points[i].
|
|
62
|
+
context.moveTo(points[i].start.x, points[i].start.y);
|
|
63
|
+
context.lineTo(points[n].start.x, points[n].start.y);
|
|
64
|
+
context.lineTo(points[n].end.x, points[n].end.y);
|
|
65
|
+
context.lineTo(points[i].end.x, points[i].end.y);
|
|
68
66
|
context.fillStyle = shadowColor;
|
|
69
67
|
context.fill();
|
|
70
68
|
}
|
package/umd/index.js
CHANGED
|
@@ -18,25 +18,25 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
|
18
18
|
if (v !== undefined) module.exports = v;
|
|
19
19
|
}
|
|
20
20
|
else if (typeof define === "function" && define.amd) {
|
|
21
|
-
define(["require", "exports", "./ExternalLighter", "./ParticlesLighter", "./Options/Classes/Light", "./Options/Classes/LightArea", "./Options/Classes/LightGradient", "./Options/Classes/LightShadow", "./Options/Interfaces/ILight", "./Options/Interfaces/ILightArea", "./Options/Interfaces/ILightGradient", "./Options/Interfaces/ILightShadow"], factory);
|
|
21
|
+
define(["require", "exports", "./ExternalLighter.js", "./ParticlesLighter.js", "./Options/Classes/Light.js", "./Options/Classes/LightArea.js", "./Options/Classes/LightGradient.js", "./Options/Classes/LightShadow.js", "./Options/Interfaces/ILight.js", "./Options/Interfaces/ILightArea.js", "./Options/Interfaces/ILightGradient.js", "./Options/Interfaces/ILightShadow.js"], factory);
|
|
22
22
|
}
|
|
23
23
|
})(function (require, exports) {
|
|
24
24
|
"use strict";
|
|
25
25
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
26
|
exports.loadLightInteraction = void 0;
|
|
27
|
-
const
|
|
28
|
-
const
|
|
29
|
-
function loadLightInteraction(engine) {
|
|
30
|
-
engine.addInteractor("externalLight", (container) => new
|
|
31
|
-
engine.addInteractor("particlesLight", (container) => new
|
|
27
|
+
const ExternalLighter_js_1 = require("./ExternalLighter.js");
|
|
28
|
+
const ParticlesLighter_js_1 = require("./ParticlesLighter.js");
|
|
29
|
+
async function loadLightInteraction(engine, refresh = true) {
|
|
30
|
+
await engine.addInteractor("externalLight", (container) => new ExternalLighter_js_1.ExternalLighter(container), refresh);
|
|
31
|
+
await engine.addInteractor("particlesLight", (container) => new ParticlesLighter_js_1.ParticlesLighter(container), refresh);
|
|
32
32
|
}
|
|
33
33
|
exports.loadLightInteraction = loadLightInteraction;
|
|
34
|
-
__exportStar(require("./Options/Classes/Light"), exports);
|
|
35
|
-
__exportStar(require("./Options/Classes/LightArea"), exports);
|
|
36
|
-
__exportStar(require("./Options/Classes/LightGradient"), exports);
|
|
37
|
-
__exportStar(require("./Options/Classes/LightShadow"), exports);
|
|
38
|
-
__exportStar(require("./Options/Interfaces/ILight"), exports);
|
|
39
|
-
__exportStar(require("./Options/Interfaces/ILightArea"), exports);
|
|
40
|
-
__exportStar(require("./Options/Interfaces/ILightGradient"), exports);
|
|
41
|
-
__exportStar(require("./Options/Interfaces/ILightShadow"), exports);
|
|
34
|
+
__exportStar(require("./Options/Classes/Light.js"), exports);
|
|
35
|
+
__exportStar(require("./Options/Classes/LightArea.js"), exports);
|
|
36
|
+
__exportStar(require("./Options/Classes/LightGradient.js"), exports);
|
|
37
|
+
__exportStar(require("./Options/Classes/LightShadow.js"), exports);
|
|
38
|
+
__exportStar(require("./Options/Interfaces/ILight.js"), exports);
|
|
39
|
+
__exportStar(require("./Options/Interfaces/ILightArea.js"), exports);
|
|
40
|
+
__exportStar(require("./Options/Interfaces/ILightGradient.js"), exports);
|
|
41
|
+
__exportStar(require("./Options/Interfaces/ILightShadow.js"), exports);
|
|
42
42
|
});
|