@tsparticles/editor
Version:
tsParticles Configuration Editor
349 lines (348 loc) • 15 kB
JavaScript
(function (factory) {
if (typeof module === "object" && typeof module.exports === "object") {
var v = factory(require, exports);
if (v !== undefined) module.exports = v;
}
else if (typeof define === "function" && define.amd) {
define(["require", "exports", "@tsparticles/engine", "object-gui", "../../../../EditorBase", "../../Particles/ParticlesOptionsEditor"], factory);
}
})(function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ModesOptionsEditor = void 0;
const engine_1 = require("@tsparticles/engine");
const object_gui_1 = require("object-gui");
const EditorBase_1 = require("../../../../EditorBase");
const ParticlesOptionsEditor_1 = require("../../Particles/ParticlesOptionsEditor");
class ModesOptionsEditor extends EditorBase_1.EditorBase {
constructor(particles) {
super(particles);
}
addToGroup(parent) {
this.group = parent.addGroup("modes", "Modes");
this.options = this.group.data;
this.addAttract();
this.addBubble();
this.addConnect();
this.addGrab();
this.addLight();
this.addPush();
this.addRemove();
this.addRepulse();
this.addSlow();
this.addTrail();
}
addAttract() {
const group = this.group.addGroup("attract", "Attract");
group.addProperty("distance", "Distance", object_gui_1.EditorType.number).change(() => {
void this.particles().refresh();
});
group.addProperty("duration", "Duration", object_gui_1.EditorType.number).change(() => {
void this.particles().refresh();
});
group
.addProperty("easing", "Easing", object_gui_1.EditorType.select)
.change(() => {
void this.particles().refresh();
})
.addItems([
{
value: engine_1.EasingType.easeOutBack,
},
{
value: engine_1.EasingType.easeOutCirc,
},
{
value: engine_1.EasingType.easeOutCubic,
},
{
value: engine_1.EasingType.easeOutExpo,
},
{
value: engine_1.EasingType.easeOutQuad,
},
{
value: engine_1.EasingType.easeOutQuint,
},
{
value: engine_1.EasingType.easeOutSine,
},
]);
group.addProperty("factor", "Factor", object_gui_1.EditorType.number).change(() => {
void this.particles().refresh();
});
group.addProperty("maxSpeed", "Max Speed", object_gui_1.EditorType.number).change(() => {
void this.particles().refresh();
});
group.addProperty("speed", "Speed", object_gui_1.EditorType.number).change(() => {
void this.particles().refresh();
});
}
addBubble() {
const optionsFunc = (() => this.options().bubble);
const options = optionsFunc();
const group = this.group.addGroup("bubble", "Bubble");
const getColor = () => {
if (typeof options?.color === "string") {
return options?.color;
}
else if (options?.color instanceof Array) {
return undefined;
}
else {
return options?.color?.value;
}
};
const color = getColor();
group.addProperty("color", "Color", object_gui_1.EditorType.color, color, false).change((value) => {
const options = optionsFunc();
if (!options) {
return;
}
if (typeof value === "string") {
if (typeof options.color === "string") {
options.color = value;
}
else {
options.color = {
value,
};
}
}
void this.particles().refresh();
});
group.addProperty("distance", "Distance", object_gui_1.EditorType.number).change(() => {
void this.particles().refresh();
});
group.addProperty("duration", "Duration", object_gui_1.EditorType.number).change(() => {
void this.particles().refresh();
});
group
.addProperty("opacity", "Opacity", object_gui_1.EditorType.number)
.change(() => {
void this.particles().refresh();
})
.step(0.01)
.min(0)
.max(1);
group.addProperty("size", "Size", object_gui_1.EditorType.number).change(() => {
void this.particles().refresh();
});
}
addConnect() {
const group = this.group.addGroup("connect", "Connect");
const connectLinksGroup = group.addGroup("links", "Links");
connectLinksGroup
.addProperty("opacity", "Opacity", object_gui_1.EditorType.number)
.change(() => {
void this.particles().refresh();
})
.step(0.01)
.min(0)
.max(1);
group.addProperty("distance", "Distance", object_gui_1.EditorType.number).change(() => {
void this.particles().refresh();
});
group.addProperty("radius", "Radius", object_gui_1.EditorType.number).change(() => {
void this.particles().refresh();
});
}
addGrab() {
const optionsFunc = (() => this.options().grab);
const options = optionsFunc();
const group = this.group.addGroup("grab", "Grab");
const grabLinksGroup = group.addGroup("links", "Links");
const links = options?.links;
const color = typeof links?.color === "string" ? links?.color : links?.color?.value;
grabLinksGroup.addProperty("blink", "Blink", object_gui_1.EditorType.boolean).change(() => {
void this.particles().refresh();
});
grabLinksGroup.addProperty("color", "Color", object_gui_1.EditorType.color, color, false).change((value) => {
const options = optionsFunc();
if (!options) {
return;
}
if (typeof value === "string") {
if (typeof options.links.color === "string") {
options.links.color = value;
}
else {
options.links.color = {
value,
};
}
void this.particles().refresh();
}
});
grabLinksGroup.addProperty("consent", "Consent", object_gui_1.EditorType.boolean).change(() => {
void this.particles().refresh();
});
grabLinksGroup
.addProperty("opacity", "Opacity", object_gui_1.EditorType.number)
.change(() => {
void this.particles().refresh();
})
.step(0.01)
.min(0)
.max(1);
group.addProperty("distance", "Distance", object_gui_1.EditorType.number).change(() => {
void this.particles().refresh();
});
}
addLight() {
const optionsFunc = (() => this.options().light);
const options = optionsFunc();
const group = this.group.addGroup("light", "Light");
const areaGroup = group.addGroup("area", "Light");
const gradientGroup = areaGroup.addGroup("gradient", "Gradient");
const startColor = typeof options?.area.gradient.start === "string"
? options?.area.gradient.start
: options?.area.gradient.start?.value;
gradientGroup.addProperty("start", "Start", object_gui_1.EditorType.color, startColor, false).change((value) => {
const options = optionsFunc();
if (!options) {
return;
}
if (typeof value === "string") {
if (typeof options.area.gradient.start === "string") {
options.area.gradient.start = value;
}
else {
options.area.gradient.start = {
value,
};
}
}
void this.particles().refresh();
});
const stopColor = typeof options?.area.gradient.stop === "string"
? options?.area.gradient.stop
: options?.area.gradient.stop?.value;
gradientGroup.addProperty("stop", "Stop", object_gui_1.EditorType.color, stopColor, false).change((value) => {
const options = optionsFunc();
if (!options) {
return;
}
if (typeof value === "string") {
if (typeof options.area.gradient.stop === "string") {
options.area.gradient.stop = value;
}
else {
options.area.gradient.stop = {
value,
};
}
}
void this.particles().refresh();
});
areaGroup.addProperty("radius", "Radius", object_gui_1.EditorType.number).change(() => {
void this.particles().refresh();
});
const shadowGroup = group.addGroup("shadow", "Shadow");
const shadowColor = typeof options?.shadow.color === "string" ? options?.shadow.color : options?.shadow.color?.value;
shadowGroup.addProperty("color", "Color", object_gui_1.EditorType.color, shadowColor, false).change((value) => {
const options = optionsFunc();
if (!options) {
return;
}
if (typeof value === "string") {
if (typeof options.shadow.color === "string") {
options.shadow.color = value;
}
else {
options.shadow.color = {
value,
};
}
}
void this.particles().refresh();
});
shadowGroup.addProperty("length", "Length", object_gui_1.EditorType.number).change(() => {
void this.particles().refresh();
});
}
addPush() {
const group = this.group.addGroup("push", "Push");
group.addProperty("quantity", "Quantity", object_gui_1.EditorType.number).change(() => {
void this.particles().refresh();
});
}
addRemove() {
const group = this.group.addGroup("remove", "Remove");
group.addProperty("quantity", "Quantity", object_gui_1.EditorType.number).change(() => {
void this.particles().refresh();
});
}
addRepulse() {
const group = this.group.addGroup("repulse", "Repulse");
group.addProperty("distance", "Distance", object_gui_1.EditorType.number).change(() => {
void this.particles().refresh();
});
group.addProperty("duration", "Duration", object_gui_1.EditorType.number).change(() => {
void this.particles().refresh();
});
group
.addProperty("easing", "Easing", object_gui_1.EditorType.select)
.change(() => {
void this.particles().refresh();
})
.addItems([
{
value: engine_1.EasingType.easeOutBack,
},
{
value: engine_1.EasingType.easeOutCirc,
},
{
value: engine_1.EasingType.easeOutCubic,
},
{
value: engine_1.EasingType.easeOutExpo,
},
{
value: engine_1.EasingType.easeOutQuad,
},
{
value: engine_1.EasingType.easeOutQuint,
},
{
value: engine_1.EasingType.easeOutSine,
},
]);
group.addProperty("factor", "Factor", object_gui_1.EditorType.number).change(() => {
void this.particles().refresh();
});
group.addProperty("maxSpeed", "Max Speed", object_gui_1.EditorType.number).change(() => {
void this.particles().refresh();
});
group.addProperty("speed", "Speed", object_gui_1.EditorType.number).change(() => {
void this.particles().refresh();
});
}
addSlow() {
const group = this.group.addGroup("slow", "Slow");
group.addProperty("factor", "Factor", object_gui_1.EditorType.number).change(() => {
void this.particles().refresh();
});
group.addProperty("radius", "Radius", object_gui_1.EditorType.number).change(() => {
void this.particles().refresh();
});
}
addTrail() {
const group = this.group.addGroup("trail", "Trail");
const options = () => this.options().trail;
const particlesEditor = new ParticlesOptionsEditor_1.ParticlesOptionsEditor(this.particles);
particlesEditor.addParticlesToGroup(group, "particles", options);
group.addProperty("delay", "Delay", object_gui_1.EditorType.number).change(() => {
void this.particles().refresh();
});
group.addProperty("pauseOnStop", "Pause on Stop", object_gui_1.EditorType.boolean).change(() => {
void this.particles().refresh();
});
group.addProperty("quantity", "Quantity", object_gui_1.EditorType.number).change(() => {
void this.particles().refresh();
});
}
}
exports.ModesOptionsEditor = ModesOptionsEditor;
});