@tsparticles/editor
Version:
tsParticles Configuration Editor
244 lines (243 loc) • 10.4 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"], factory);
}
})(function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.MoveOptionsEditor = void 0;
const engine_1 = require("@tsparticles/engine");
const object_gui_1 = require("object-gui");
const EditorBase_1 = require("../../../../EditorBase");
class MoveOptionsEditor extends EditorBase_1.EditorBase {
constructor(particles) {
super(particles);
}
addToGroup(parent) {
this.group = parent.addGroup("move", "Move");
this.options = this.group.data;
this.addAngle();
this.addAttract();
this.addDistance();
this.addGravity();
this.addOutModes();
this.addPath();
this.addTrail();
this.addProperties();
}
addAngle() {
const group = this.group.addGroup("angle", "Angle");
group.addProperty("offset", "Offset", object_gui_1.EditorType.number).change(() => {
void this.particles().refresh();
});
group.addProperty("value", "Value", object_gui_1.EditorType.number).change(() => {
void this.particles().refresh();
});
}
addAttract() {
const group = this.group.addGroup("attract", "Attract");
const rotateGroup = group.addGroup("rotate", "Rotate", false);
rotateGroup.addProperty("x", "X", object_gui_1.EditorType.number).change(() => {
void this.particles().refresh();
});
rotateGroup.addProperty("y", "Y", object_gui_1.EditorType.number).change(() => {
void this.particles().refresh();
});
group.addProperty("enable", "Enable", object_gui_1.EditorType.boolean).change(() => {
void this.particles().refresh();
});
}
addDistance() {
const group = this.group.addGroup("distance", "Distance");
group.addProperty("horizontal", "Horizontal", object_gui_1.EditorType.number).change(() => {
void this.particles().refresh();
});
group.addProperty("vertical", "Vertical", object_gui_1.EditorType.number).change(() => {
void this.particles().refresh();
});
}
addGravity() {
const group = this.group.addGroup("gravity", "Gravity");
group.addProperty("acceleration", "Acceleration", object_gui_1.EditorType.number).change(() => {
void this.particles().refresh();
});
group.addProperty("enable", "Enable", object_gui_1.EditorType.boolean).change(() => {
void this.particles().refresh();
});
group.addProperty("maxSpeed", "Max Speed", object_gui_1.EditorType.number).change(() => {
void this.particles().refresh();
});
}
addOutModes() {
const group = this.group.addGroup("outModes", "Out Modes");
const outModesValues = [
{
value: engine_1.OutMode.bounce,
},
{
value: engine_1.OutMode.destroy,
},
{
value: engine_1.OutMode.none,
},
{
value: engine_1.OutMode.split,
},
{
value: engine_1.OutMode.out,
},
];
group
.addProperty("bottom", "Bottom", object_gui_1.EditorType.select)
.change(() => {
void this.particles().refresh();
})
.addItems(outModesValues);
group
.addProperty("default", "Default", object_gui_1.EditorType.select)
.change(() => {
void this.particles().refresh();
})
.addItems(outModesValues);
group
.addProperty("left", "Left", object_gui_1.EditorType.select)
.change(() => {
void this.particles().refresh();
})
.addItems(outModesValues);
group
.addProperty("right", "Right", object_gui_1.EditorType.select)
.change(() => {
void this.particles().refresh();
})
.addItems(outModesValues);
group
.addProperty("top", "Top", object_gui_1.EditorType.select)
.change(() => {
void this.particles().refresh();
})
.addItems(outModesValues);
}
addPath() {
const group = this.group.addGroup("path", "Path");
const delayGroup = group.addGroup("delay", "Delay");
delayGroup.addProperty("value", "value", object_gui_1.EditorType.number).change(() => {
void this.particles().refresh();
});
const randomGroup = delayGroup.addGroup("random", "Random");
randomGroup.addProperty("enable", "Enable", object_gui_1.EditorType.boolean).change(() => {
void this.particles().refresh();
});
randomGroup.addProperty("minimumValue", "Minimum Value", object_gui_1.EditorType.number).change(() => {
void this.particles().refresh();
});
group.addProperty("clamp", "Clamp", object_gui_1.EditorType.boolean).change(() => {
void this.particles().refresh();
});
group.addProperty("enable", "Enable", object_gui_1.EditorType.boolean).change(() => {
void this.particles().refresh();
});
group.addProperty("generator", "Generator", object_gui_1.EditorType.string).change(() => {
void this.particles().refresh();
});
}
addProperties() {
const group = this.group;
group
.addProperty("direction", "Direction", object_gui_1.EditorType.select)
.change(() => {
void this.particles().refresh();
})
.addItems([
{
value: engine_1.MoveDirection.bottom,
},
{
value: engine_1.MoveDirection.bottomLeft,
},
{
value: engine_1.MoveDirection.bottomRight,
},
{
value: engine_1.MoveDirection.left,
},
{
value: engine_1.MoveDirection.none,
},
{
value: engine_1.MoveDirection.right,
},
{
value: engine_1.MoveDirection.top,
},
{
value: engine_1.MoveDirection.topLeft,
},
{
value: engine_1.MoveDirection.topRight,
},
]);
group.addProperty("drift", "Drift", object_gui_1.EditorType.number).change(() => {
void this.particles().refresh();
});
group.addProperty("enable", "Enable", object_gui_1.EditorType.boolean).change(() => {
void this.particles().refresh();
});
group.addProperty("random", "Random", object_gui_1.EditorType.boolean).change(() => {
void this.particles().refresh();
});
group.addProperty("size", "Size", object_gui_1.EditorType.boolean).change(() => {
void this.particles().refresh();
});
group.addProperty("speed", "Speed", object_gui_1.EditorType.number).change(() => {
void this.particles().refresh();
});
group.addProperty("straight", "Straight", object_gui_1.EditorType.boolean).change(() => {
void this.particles().refresh();
});
group.addProperty("vibrate", "Vibrate", object_gui_1.EditorType.boolean).change(() => {
void this.particles().refresh();
});
group.addProperty("warp", "Warp", object_gui_1.EditorType.boolean).change(() => {
void this.particles().refresh();
});
}
addTrail() {
const group = this.group.addGroup("trail", "Trail");
const optionsFunc = group.data;
const options = optionsFunc();
const color = typeof options.fill?.color === "string" ? options.fill.color : options.fill?.color?.value;
const fillGroup = group.addGroup("fill", "Fill");
fillGroup.addProperty("color", "Color", object_gui_1.EditorType.color, color, false).change((value) => {
const options = optionsFunc();
if (typeof value === "string") {
if (typeof options.fill.color === "string") {
options.fill.color = value;
}
else {
if (options.fill.color === undefined) {
options.fill.color = {
value: value,
};
}
else {
options.fill.color.value = value;
}
}
}
void this.particles().refresh();
});
group.addProperty("enable", "Enable", object_gui_1.EditorType.boolean).change(() => {
void this.particles().refresh();
});
group.addProperty("length", "Length", object_gui_1.EditorType.number).change(() => {
void this.particles().refresh();
});
}
}
exports.MoveOptionsEditor = MoveOptionsEditor;
});