@tsparticles/editor
Version:
tsParticles Configuration Editor
335 lines (334 loc) • 12.3 kB
JavaScript
import { EasingType, } from "@tsparticles/engine";
import { EditorType } from "object-gui";
import { EditorBase } from "../../../../EditorBase";
import { ParticlesOptionsEditor } from "../../Particles/ParticlesOptionsEditor";
export class ModesOptionsEditor extends 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", EditorType.number).change(() => {
void this.particles().refresh();
});
group.addProperty("duration", "Duration", EditorType.number).change(() => {
void this.particles().refresh();
});
group
.addProperty("easing", "Easing", EditorType.select)
.change(() => {
void this.particles().refresh();
})
.addItems([
{
value: EasingType.easeOutBack,
},
{
value: EasingType.easeOutCirc,
},
{
value: EasingType.easeOutCubic,
},
{
value: EasingType.easeOutExpo,
},
{
value: EasingType.easeOutQuad,
},
{
value: EasingType.easeOutQuint,
},
{
value: EasingType.easeOutSine,
},
]);
group.addProperty("factor", "Factor", EditorType.number).change(() => {
void this.particles().refresh();
});
group.addProperty("maxSpeed", "Max Speed", EditorType.number).change(() => {
void this.particles().refresh();
});
group.addProperty("speed", "Speed", 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", 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", EditorType.number).change(() => {
void this.particles().refresh();
});
group.addProperty("duration", "Duration", EditorType.number).change(() => {
void this.particles().refresh();
});
group
.addProperty("opacity", "Opacity", EditorType.number)
.change(() => {
void this.particles().refresh();
})
.step(0.01)
.min(0)
.max(1);
group.addProperty("size", "Size", 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", EditorType.number)
.change(() => {
void this.particles().refresh();
})
.step(0.01)
.min(0)
.max(1);
group.addProperty("distance", "Distance", EditorType.number).change(() => {
void this.particles().refresh();
});
group.addProperty("radius", "Radius", 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", EditorType.boolean).change(() => {
void this.particles().refresh();
});
grabLinksGroup.addProperty("color", "Color", 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", EditorType.boolean).change(() => {
void this.particles().refresh();
});
grabLinksGroup
.addProperty("opacity", "Opacity", EditorType.number)
.change(() => {
void this.particles().refresh();
})
.step(0.01)
.min(0)
.max(1);
group.addProperty("distance", "Distance", 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", 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", 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", 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", 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", EditorType.number).change(() => {
void this.particles().refresh();
});
}
addPush() {
const group = this.group.addGroup("push", "Push");
group.addProperty("quantity", "Quantity", EditorType.number).change(() => {
void this.particles().refresh();
});
}
addRemove() {
const group = this.group.addGroup("remove", "Remove");
group.addProperty("quantity", "Quantity", EditorType.number).change(() => {
void this.particles().refresh();
});
}
addRepulse() {
const group = this.group.addGroup("repulse", "Repulse");
group.addProperty("distance", "Distance", EditorType.number).change(() => {
void this.particles().refresh();
});
group.addProperty("duration", "Duration", EditorType.number).change(() => {
void this.particles().refresh();
});
group
.addProperty("easing", "Easing", EditorType.select)
.change(() => {
void this.particles().refresh();
})
.addItems([
{
value: EasingType.easeOutBack,
},
{
value: EasingType.easeOutCirc,
},
{
value: EasingType.easeOutCubic,
},
{
value: EasingType.easeOutExpo,
},
{
value: EasingType.easeOutQuad,
},
{
value: EasingType.easeOutQuint,
},
{
value: EasingType.easeOutSine,
},
]);
group.addProperty("factor", "Factor", EditorType.number).change(() => {
void this.particles().refresh();
});
group.addProperty("maxSpeed", "Max Speed", EditorType.number).change(() => {
void this.particles().refresh();
});
group.addProperty("speed", "Speed", EditorType.number).change(() => {
void this.particles().refresh();
});
}
addSlow() {
const group = this.group.addGroup("slow", "Slow");
group.addProperty("factor", "Factor", EditorType.number).change(() => {
void this.particles().refresh();
});
group.addProperty("radius", "Radius", EditorType.number).change(() => {
void this.particles().refresh();
});
}
addTrail() {
const group = this.group.addGroup("trail", "Trail");
const options = () => this.options().trail;
const particlesEditor = new ParticlesOptionsEditor(this.particles);
particlesEditor.addParticlesToGroup(group, "particles", options);
group.addProperty("delay", "Delay", EditorType.number).change(() => {
void this.particles().refresh();
});
group.addProperty("pauseOnStop", "Pause on Stop", EditorType.boolean).change(() => {
void this.particles().refresh();
});
group.addProperty("quantity", "Quantity", EditorType.number).change(() => {
void this.particles().refresh();
});
}
}