@tsparticles/interaction-light 3.0.0-beta.2 → 3.0.0-beta.4
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/ExternalLighter.js +2 -2
- package/browser/ParticlesLighter.js +2 -2
- package/browser/Utils.js +1 -0
- package/cjs/ExternalLighter.js +2 -2
- package/cjs/ParticlesLighter.js +1 -1
- package/cjs/Utils.js +2 -1
- package/esm/ExternalLighter.js +2 -2
- package/esm/ParticlesLighter.js +2 -2
- package/esm/Utils.js +1 -0
- package/package.json +3 -3
- package/report.html +4 -22
- package/tsparticles.interaction.light.js +70 -69
- package/tsparticles.interaction.light.min.js +1 -1
- package/tsparticles.interaction.light.min.js.LICENSE.txt +1 -1
- package/types/ParticlesLighter.d.ts +1 -1
- package/types/Utils.d.ts +1 -0
- package/umd/ExternalLighter.js +3 -3
- package/umd/ParticlesLighter.js +1 -1
- package/umd/Utils.js +2 -1
|
@@ -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-beta.
|
|
7
|
+
* v3.0.0-beta.4
|
|
8
8
|
*/
|
|
9
9
|
(function webpackUniversalModuleDefinition(root, factory) {
|
|
10
10
|
if(typeof exports === 'object' && typeof module === 'object')
|
|
@@ -100,6 +100,73 @@ __webpack_require__.d(__webpack_exports__, {
|
|
|
100
100
|
|
|
101
101
|
// EXTERNAL MODULE: external {"commonjs":"@tsparticles/engine","commonjs2":"@tsparticles/engine","amd":"@tsparticles/engine","root":"window"}
|
|
102
102
|
var engine_root_window_ = __webpack_require__(533);
|
|
103
|
+
;// CONCATENATED MODULE: ./dist/browser/Utils.js
|
|
104
|
+
|
|
105
|
+
const lightMode = "light";
|
|
106
|
+
function drawLight(container, context, mousePos) {
|
|
107
|
+
const lightOptions = container.actualOptions.interactivity.modes.light?.area;
|
|
108
|
+
if (!lightOptions) {
|
|
109
|
+
return;
|
|
110
|
+
}
|
|
111
|
+
context.beginPath();
|
|
112
|
+
context.arc(mousePos.x, mousePos.y, lightOptions.radius, 0, 2 * Math.PI);
|
|
113
|
+
const gradientAmbientLight = context.createRadialGradient(mousePos.x, mousePos.y, 0, mousePos.x, mousePos.y, lightOptions.radius);
|
|
114
|
+
const gradientRgb = container.canvas.mouseLight;
|
|
115
|
+
if (!gradientRgb || !gradientRgb.start || !gradientRgb.stop) {
|
|
116
|
+
return;
|
|
117
|
+
}
|
|
118
|
+
gradientAmbientLight.addColorStop(0, (0,engine_root_window_.getStyleFromRgb)(gradientRgb.start));
|
|
119
|
+
gradientAmbientLight.addColorStop(1, (0,engine_root_window_.getStyleFromRgb)(gradientRgb.stop));
|
|
120
|
+
context.fillStyle = gradientAmbientLight;
|
|
121
|
+
context.fill();
|
|
122
|
+
}
|
|
123
|
+
function drawParticleShadow(container, context, particle, mousePos) {
|
|
124
|
+
const pos = particle.getPosition(),
|
|
125
|
+
shadowOptions = container.actualOptions.interactivity.modes.light?.shadow;
|
|
126
|
+
if (!shadowOptions) {
|
|
127
|
+
return;
|
|
128
|
+
}
|
|
129
|
+
const shadowRgb = particle.lightShadow;
|
|
130
|
+
if (!shadowRgb) {
|
|
131
|
+
return;
|
|
132
|
+
}
|
|
133
|
+
const radius = particle.getRadius(),
|
|
134
|
+
sides = particle.sides,
|
|
135
|
+
full = Math.PI * 2 / sides,
|
|
136
|
+
angle = -particle.rotation + Math.PI / 4,
|
|
137
|
+
factor = 1,
|
|
138
|
+
dots = [];
|
|
139
|
+
for (let i = 0; i < sides; i++) {
|
|
140
|
+
dots.push({
|
|
141
|
+
x: pos.x + radius * Math.sin(angle + full * i) * factor,
|
|
142
|
+
y: pos.y + radius * Math.cos(angle + full * i) * factor
|
|
143
|
+
});
|
|
144
|
+
}
|
|
145
|
+
const points = [],
|
|
146
|
+
shadowLength = shadowOptions.length;
|
|
147
|
+
for (const dot of dots) {
|
|
148
|
+
const dotAngle = Math.atan2(mousePos.y - dot.y, mousePos.x - dot.x),
|
|
149
|
+
end = {
|
|
150
|
+
x: dot.x + shadowLength * Math.sin(-dotAngle - Math.PI / 2),
|
|
151
|
+
y: dot.y + shadowLength * Math.cos(-dotAngle - Math.PI / 2)
|
|
152
|
+
};
|
|
153
|
+
points.push({
|
|
154
|
+
end: end,
|
|
155
|
+
start: dot
|
|
156
|
+
});
|
|
157
|
+
}
|
|
158
|
+
const shadowColor = (0,engine_root_window_.getStyleFromRgb)(shadowRgb),
|
|
159
|
+
last = points.length - 1;
|
|
160
|
+
for (let i = last, n = 0; i >= 0; n = i--) {
|
|
161
|
+
context.beginPath();
|
|
162
|
+
context.moveTo(points[i].start.x, points[i].start.y);
|
|
163
|
+
context.lineTo(points[n].start.x, points[n].start.y);
|
|
164
|
+
context.lineTo(points[n].end.x, points[n].end.y);
|
|
165
|
+
context.lineTo(points[i].end.x, points[i].end.y);
|
|
166
|
+
context.fillStyle = shadowColor;
|
|
167
|
+
context.fill();
|
|
168
|
+
}
|
|
169
|
+
}
|
|
103
170
|
;// CONCATENATED MODULE: ./dist/browser/Options/Classes/LightGradient.js
|
|
104
171
|
|
|
105
172
|
class LightGradient {
|
|
@@ -168,72 +235,6 @@ class Light {
|
|
|
168
235
|
this.shadow.load(data.shadow);
|
|
169
236
|
}
|
|
170
237
|
}
|
|
171
|
-
;// CONCATENATED MODULE: ./dist/browser/Utils.js
|
|
172
|
-
|
|
173
|
-
function drawLight(container, context, mousePos) {
|
|
174
|
-
const lightOptions = container.actualOptions.interactivity.modes.light?.area;
|
|
175
|
-
if (!lightOptions) {
|
|
176
|
-
return;
|
|
177
|
-
}
|
|
178
|
-
context.beginPath();
|
|
179
|
-
context.arc(mousePos.x, mousePos.y, lightOptions.radius, 0, 2 * Math.PI);
|
|
180
|
-
const gradientAmbientLight = context.createRadialGradient(mousePos.x, mousePos.y, 0, mousePos.x, mousePos.y, lightOptions.radius);
|
|
181
|
-
const gradientRgb = container.canvas.mouseLight;
|
|
182
|
-
if (!gradientRgb || !gradientRgb.start || !gradientRgb.stop) {
|
|
183
|
-
return;
|
|
184
|
-
}
|
|
185
|
-
gradientAmbientLight.addColorStop(0, (0,engine_root_window_.getStyleFromRgb)(gradientRgb.start));
|
|
186
|
-
gradientAmbientLight.addColorStop(1, (0,engine_root_window_.getStyleFromRgb)(gradientRgb.stop));
|
|
187
|
-
context.fillStyle = gradientAmbientLight;
|
|
188
|
-
context.fill();
|
|
189
|
-
}
|
|
190
|
-
function drawParticleShadow(container, context, particle, mousePos) {
|
|
191
|
-
const pos = particle.getPosition(),
|
|
192
|
-
shadowOptions = container.actualOptions.interactivity.modes.light?.shadow;
|
|
193
|
-
if (!shadowOptions) {
|
|
194
|
-
return;
|
|
195
|
-
}
|
|
196
|
-
const shadowRgb = particle.lightShadow;
|
|
197
|
-
if (!shadowRgb) {
|
|
198
|
-
return;
|
|
199
|
-
}
|
|
200
|
-
const radius = particle.getRadius(),
|
|
201
|
-
sides = particle.sides,
|
|
202
|
-
full = Math.PI * 2 / sides,
|
|
203
|
-
angle = -particle.rotation + Math.PI / 4,
|
|
204
|
-
factor = 1,
|
|
205
|
-
dots = [];
|
|
206
|
-
for (let i = 0; i < sides; i++) {
|
|
207
|
-
dots.push({
|
|
208
|
-
x: pos.x + radius * Math.sin(angle + full * i) * factor,
|
|
209
|
-
y: pos.y + radius * Math.cos(angle + full * i) * factor
|
|
210
|
-
});
|
|
211
|
-
}
|
|
212
|
-
const points = [],
|
|
213
|
-
shadowLength = shadowOptions.length;
|
|
214
|
-
for (const dot of dots) {
|
|
215
|
-
const dotAngle = Math.atan2(mousePos.y - dot.y, mousePos.x - dot.x),
|
|
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
|
-
points.push({
|
|
221
|
-
end: end,
|
|
222
|
-
start: dot
|
|
223
|
-
});
|
|
224
|
-
}
|
|
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--) {
|
|
228
|
-
context.beginPath();
|
|
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);
|
|
233
|
-
context.fillStyle = shadowColor;
|
|
234
|
-
context.fill();
|
|
235
|
-
}
|
|
236
|
-
}
|
|
237
238
|
;// CONCATENATED MODULE: ./dist/browser/ExternalLighter.js
|
|
238
239
|
|
|
239
240
|
|
|
@@ -267,7 +268,7 @@ class ExternalLighter extends engine_root_window_.ExternalInteractorBase {
|
|
|
267
268
|
if (!(events.onHover.enable && mouse.position)) {
|
|
268
269
|
return false;
|
|
269
270
|
}
|
|
270
|
-
const res = (0,engine_root_window_.isInArray)(
|
|
271
|
+
const res = (0,engine_root_window_.isInArray)(lightMode, events.onHover.mode);
|
|
271
272
|
if (res && interactivity.modes.light) {
|
|
272
273
|
const lightGradient = interactivity.modes.light.area.gradient;
|
|
273
274
|
container.canvas.mouseLight = {
|
|
@@ -319,7 +320,7 @@ class ParticlesLighter extends engine_root_window_.ParticlesInteractorBase {
|
|
|
319
320
|
if (!(events.onHover.enable && mouse.position)) {
|
|
320
321
|
return false;
|
|
321
322
|
}
|
|
322
|
-
const res = (0,engine_root_window_.isInArray)(
|
|
323
|
+
const res = (0,engine_root_window_.isInArray)(lightMode, events.onHover.mode);
|
|
323
324
|
if (res && interactivity.modes.light) {
|
|
324
325
|
const shadowOptions = interactivity.modes.light.shadow;
|
|
325
326
|
particle.lightShadow = (0,engine_root_window_.rangeColorToRgb)(shadowOptions.color);
|
|
@@ -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 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:()=>
|
|
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:()=>a,LightArea:()=>s,LightGradient:()=>o,LightShadow:()=>n,loadLightInteraction:()=>d});var t=i(533);const e="light";class o{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 s{constructor(){this.gradient=new o,this.radius=1e3}load(t){t&&(this.gradient.load(t.gradient),void 0!==t.radius&&(this.radius=t.radius))}}class n{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 a{constructor(){this.area=new s,this.shadow=new n}load(t){t&&(this.area.load(t.area),this.shadow.load(t.shadow))}}class c 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(o){const i=this.container,r=i.interactivity.mouse,s=o?.interactivity??i.actualOptions.interactivity,n=s.events;if(!n.onHover.enable||!r.position)return!1;const a=(0,t.isInArray)(e,n.onHover.mode);if(a&&s.modes.light){const e=s.modes.light.area.gradient;i.canvas.mouseLight={start:(0,t.rangeColorToRgb)(e.start),stop:(0,t.rangeColorToRgb)(e.stop)}}return a}loadModeOptions(t,...e){t.light||(t.light=new a);for(const o of e)t.light.load(o?.light)}reset(){}}class l 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(o){const i=this.container,r=o.interactivity??i.actualOptions.interactivity,s=i.interactivity.mouse,n=r.events;if(!n.onHover.enable||!s.position)return!1;const a=(0,t.isInArray)(e,n.onHover.mode);if(a&&r.modes.light){const e=r.modes.light.shadow;o.lightShadow=(0,t.rangeColorToRgb)(e.color)}return a}reset(){}}async function d(t,e=!0){await t.addInteractor("externalLight",(t=>new c(t)),e),await t.addInteractor("particlesLight",(t=>new l(t)),e)}})(),r})()));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
/*! tsParticles Light Interaction v3.0.0-beta.
|
|
1
|
+
/*! tsParticles Light Interaction v3.0.0-beta.4 by Matteo Bruni */
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { ParticlesInteractorBase } from "@tsparticles/engine";
|
|
2
1
|
import type { LightContainer, LightParticle } from "./Types.js";
|
|
2
|
+
import { ParticlesInteractorBase } from "@tsparticles/engine";
|
|
3
3
|
export declare class ParticlesLighter extends ParticlesInteractorBase<LightContainer> {
|
|
4
4
|
constructor(container: LightContainer);
|
|
5
5
|
clear(): void;
|
package/types/Utils.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { type ICoordinates } from "@tsparticles/engine";
|
|
2
2
|
import type { LightContainer, LightParticle } from "./Types.js";
|
|
3
|
+
export declare const lightMode = "light";
|
|
3
4
|
export declare function drawLight(container: LightContainer, context: CanvasRenderingContext2D, mousePos: ICoordinates): void;
|
|
4
5
|
export declare function drawParticleShadow(container: LightContainer, context: CanvasRenderingContext2D, particle: LightParticle, mousePos: ICoordinates): void;
|
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", "./
|
|
7
|
+
define(["require", "exports", "@tsparticles/engine", "./Utils.js", "./Options/Classes/Light.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 Light_js_1 = require("./Options/Classes/Light.js");
|
|
15
14
|
const Utils_js_1 = require("./Utils.js");
|
|
15
|
+
const Light_js_1 = require("./Options/Classes/Light.js");
|
|
16
16
|
class ExternalLighter extends engine_1.ExternalInteractorBase {
|
|
17
17
|
constructor(container) {
|
|
18
18
|
super(container);
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
if (!(events.onHover.enable && mouse.position)) {
|
|
40
40
|
return false;
|
|
41
41
|
}
|
|
42
|
-
const res = (0, engine_1.isInArray)(
|
|
42
|
+
const res = (0, engine_1.isInArray)(Utils_js_1.lightMode, events.onHover.mode);
|
|
43
43
|
if (res && interactivity.modes.light) {
|
|
44
44
|
const lightGradient = interactivity.modes.light.area.gradient;
|
|
45
45
|
container.canvas.mouseLight = {
|
package/umd/ParticlesLighter.js
CHANGED
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
if (!(events.onHover.enable && mouse.position)) {
|
|
39
39
|
return false;
|
|
40
40
|
}
|
|
41
|
-
const res = (0, engine_1.isInArray)(
|
|
41
|
+
const res = (0, engine_1.isInArray)(Utils_js_1.lightMode, events.onHover.mode);
|
|
42
42
|
if (res && interactivity.modes.light) {
|
|
43
43
|
const shadowOptions = interactivity.modes.light.shadow;
|
|
44
44
|
particle.lightShadow = (0, engine_1.rangeColorToRgb)(shadowOptions.color);
|
package/umd/Utils.js
CHANGED
|
@@ -9,8 +9,9 @@
|
|
|
9
9
|
})(function (require, exports) {
|
|
10
10
|
"use strict";
|
|
11
11
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
12
|
-
exports.drawParticleShadow = exports.drawLight = void 0;
|
|
12
|
+
exports.drawParticleShadow = exports.drawLight = exports.lightMode = void 0;
|
|
13
13
|
const engine_1 = require("@tsparticles/engine");
|
|
14
|
+
exports.lightMode = "light";
|
|
14
15
|
function drawLight(container, context, mousePos) {
|
|
15
16
|
const lightOptions = container.actualOptions.interactivity.modes.light?.area;
|
|
16
17
|
if (!lightOptions) {
|