@tsparticles/editor
Version:
tsParticles Configuration Editor
94 lines (93 loc) • 4.72 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", "./BackgroundMask/BackgroundMaskOptionsEditor", "./Background/BackgroundOptionsEditor", "../../EditorBase", "./FullScreen/FullScreenOptionsEditor", "./Infection/InfectionOptionsEditor", "./Interactivity/InteractivityOptionsEditor", "./Motion/MotionOptionsEditor", "./Particles/ParticlesOptionsEditor", "../../Utils"], factory);
}
})(function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.OptionsEditor = void 0;
const engine_1 = require("@tsparticles/engine");
const object_gui_1 = require("object-gui");
const BackgroundMaskOptionsEditor_1 = require("./BackgroundMask/BackgroundMaskOptionsEditor");
const BackgroundOptionsEditor_1 = require("./Background/BackgroundOptionsEditor");
const EditorBase_1 = require("../../EditorBase");
const FullScreenOptionsEditor_1 = require("./FullScreen/FullScreenOptionsEditor");
const InfectionOptionsEditor_1 = require("./Infection/InfectionOptionsEditor");
const InteractivityOptionsEditor_1 = require("./Interactivity/InteractivityOptionsEditor");
const MotionOptionsEditor_1 = require("./Motion/MotionOptionsEditor");
const ParticlesOptionsEditor_1 = require("./Particles/ParticlesOptionsEditor");
const Utils_1 = require("../../Utils");
class OptionsEditor extends EditorBase_1.EditorBase {
constructor(particles) {
super(particles);
engine_1.tsParticles.addEventListener(Utils_1.editorChangedEvent, () => {
void (async () => {
await particles().refresh();
this.options = () => particles().options;
})();
});
}
addToGroup(parent) {
this.group = parent.addGroup("options", "Options", true);
this.options = (() => this.group.data());
this.addBackground();
this.addBackgroundMask();
this.addFullScreen();
this.addInfection();
this.addInteractivity();
this.addMotion();
this.addParticles();
this.addProperties();
}
addBackground() {
const options = new BackgroundOptionsEditor_1.BackgroundOptionsEditor(this.particles);
options.addToGroup(this.group);
}
addBackgroundMask() {
const options = new BackgroundMaskOptionsEditor_1.BackgroundMaskOptionsEditor(this.particles);
options.addToGroup(this.group);
}
addFullScreen() {
const options = new FullScreenOptionsEditor_1.FullScreenOptionsEditor(this.particles);
options.addToGroup(this.group);
}
addInfection() {
const options = new InfectionOptionsEditor_1.InfectionOptionsEditor(this.particles);
options.addToGroup(this.group);
}
addInteractivity() {
const options = new InteractivityOptionsEditor_1.InteractivityOptionsEditor(this.particles);
options.addToGroup(this.group);
}
addMotion() {
const options = new MotionOptionsEditor_1.MotionOptionsEditor(this.particles);
options.addToGroup(this.group);
}
addParticles() {
const options = new ParticlesOptionsEditor_1.ParticlesOptionsEditor(this.particles);
options.addToGroup(this.group);
}
addProperties() {
this.group.addProperty("autoPlay", "Auto Play", object_gui_1.EditorType.boolean).change(() => {
void this.particles().refresh();
});
this.group.addProperty("detectRetina", "Detect Retina", object_gui_1.EditorType.boolean).change(() => {
void this.particles().refresh();
});
this.group.addProperty("fpsLimit", "FPS Limit", object_gui_1.EditorType.number).change(() => {
void this.particles().refresh();
});
this.group.addProperty("pauseOnBlur", "Pause on Blur", object_gui_1.EditorType.boolean).change(() => {
void this.particles().refresh();
});
this.group.addProperty("pauseOnOutsideViewport", "Pause on Outside Viewport", object_gui_1.EditorType.boolean).change(() => {
void this.particles().refresh();
});
}
}
exports.OptionsEditor = OptionsEditor;
});