@tsparticles/editor
Version:
tsParticles Configuration Editor
158 lines (157 loc) • 6.77 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", "object-gui", "../../../../EditorBase"], factory);
}
})(function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.LinksOptionsEditor = void 0;
const object_gui_1 = require("object-gui");
const EditorBase_1 = require("../../../../EditorBase");
class LinksOptionsEditor extends EditorBase_1.EditorBase {
constructor(particles) {
super(particles);
}
addToGroup(parent) {
this.group = parent.addGroup("links", "Links");
this.options = this.group.data;
this.addShadow();
this.addTriangles();
this.addProperties();
}
addProperties() {
const optionsFunc = () => this.options();
const options = optionsFunc();
const color = typeof options.color === "string" ? options.color : options.color?.value;
this.group.addProperty("blink", "Blink", object_gui_1.EditorType.boolean).change(() => {
void this.particles().refresh();
});
this.group.addProperty("color", "Color", object_gui_1.EditorType.color, color, false).change((value) => {
const options = optionsFunc();
if (typeof value === "string") {
if (typeof options.color === "string") {
options.color = value;
}
else {
options.color.value = value;
}
void this.particles().refresh();
}
});
this.group.addProperty("consent", "Consent", object_gui_1.EditorType.boolean).change(() => {
void this.particles().refresh();
});
this.group.addProperty("distance", "Distance", object_gui_1.EditorType.number).change(() => {
void this.particles().refresh();
});
this.group.addProperty("enable", "Enable", object_gui_1.EditorType.boolean).change(() => {
void this.particles().refresh();
});
this.group
.addProperty("frequency", "Frequency", object_gui_1.EditorType.number)
.min(0)
.max(1)
.step(0.01)
.change(() => {
void this.particles().refresh();
});
this.group.addProperty("id", "Id", object_gui_1.EditorType.string).change(() => {
void this.particles().refresh();
});
this.group
.addProperty("opacity", "Opacity", object_gui_1.EditorType.number)
.change(() => {
void this.particles().refresh();
})
.step(0.01)
.min(0)
.max(1);
this.group.addProperty("warp", "Warp", object_gui_1.EditorType.boolean).change(() => {
void this.particles().refresh();
});
this.group.addProperty("width", "Width", object_gui_1.EditorType.number).change(() => {
void this.particles().refresh();
});
}
addShadow() {
const group = this.group.addGroup("shadow", "Shadow");
const optionsFunc = group.data;
const options = optionsFunc();
const color = typeof options.color === "string" ? options.color : options.color?.value;
group.addProperty("blur", "Blur", object_gui_1.EditorType.boolean).change(() => {
void this.particles().refresh();
});
group.addProperty("color", "Color", object_gui_1.EditorType.color, color, false).change((value) => {
const options = optionsFunc();
if (typeof value === "string") {
if (typeof options.color === "string") {
options.color = value;
}
else {
if (options.color === undefined) {
options.color = {
value: value,
};
}
else {
options.color.value = value;
}
}
}
void this.particles().refresh();
});
group.addProperty("enable", "Enable", object_gui_1.EditorType.boolean).change(() => {
void this.particles().refresh();
});
}
addTriangles() {
const group = this.group.addGroup("triangles", "Triangles");
const optionsFunc = () => this.options().triangles;
const options = optionsFunc();
const color = typeof options?.color === "string" ? options.color : options?.color?.value;
group.addProperty("color", "Color", object_gui_1.EditorType.color, color, false).change((value) => {
const options = optionsFunc();
if (typeof value === "string") {
if (typeof options.color === "string") {
options.color = value;
}
else {
if (options.color === undefined) {
options.color = {
value: value,
};
}
else {
options.color.value = value;
}
}
}
void this.particles().refresh();
});
group.addProperty("enable", "Enable", object_gui_1.EditorType.boolean).change(() => {
void this.particles().refresh();
});
group
.addProperty("frequency", "Frequency", object_gui_1.EditorType.number)
.min(0)
.max(1)
.step(0.01)
.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);
}
}
exports.LinksOptionsEditor = LinksOptionsEditor;
});