@tsparticles/plugin-sounds 3.0.0-alpha.0

package/cjs/Options/Classes/SoundsVolume.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SoundsVolume = void 0;
+class SoundsVolume {
+    constructor() {
+        this.value = 100;
+        this.max = 100;
+        this.min = 0;
+        this.step = 10;
+    }
+    load(data) {
+        if (data === undefined) {
+            return;
+        }
+        if (typeof data === "object") {
+            if (data.max !== undefined) {
+                this.max = data.max;
+            }
+            if (data.min !== undefined) {
+                this.min = data.min;
+            }
+            if (data.step !== undefined) {
+                this.step = data.step;
+            }
+            if (data.value !== undefined) {
+                this.value = data.value;
+            }
+        }
+        else {
+            this.value = data;
+        }
+    }
+}
+exports.SoundsVolume = SoundsVolume;

package/cjs/Options/Interfaces/ISounds.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/cjs/Options/Interfaces/ISoundsAudio.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/cjs/Options/Interfaces/ISoundsEvent.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/cjs/Options/Interfaces/ISoundsIcon.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/cjs/Options/Interfaces/ISoundsIcons.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/cjs/Options/Interfaces/ISoundsMelody.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/cjs/Options/Interfaces/ISoundsNote.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/cjs/Options/Interfaces/ISoundsVolume.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/cjs/SoundsInstance.js

@@ -0,0 +1,359 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SoundsInstance = void 0;
+const engine_1 = require("@tsparticles/engine");
+const engine_2 = require("@tsparticles/engine");
+const utils_1 = require("./utils");
+function setIconStyle(icon, top, left, display, zIndex, width, margin) {
+    icon.style.userSelect = "none";
+    icon.style.webkitUserSelect = "none";
+    icon.style.position = "absolute";
+    icon.style.top = `${top + margin}px`;
+    icon.style.left = `${left - margin - width}px`;
+    icon.style.display = display;
+    icon.style.zIndex = `${zIndex + 1}`;
+}
+class SoundsInstance {
+    constructor(container, engine) {
+        this._container = container;
+        this._engine = engine;
+        this._volume = 0;
+        this._audioSources = [];
+        this._audioMap = new Map();
+    }
+    init() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const container = this._container, options = container.actualOptions, soundsOptions = options.sounds;
+            if (!(soundsOptions === null || soundsOptions === void 0 ? void 0 : soundsOptions.enable)) {
+                return;
+            }
+            this._volume = soundsOptions.volume.value;
+            const events = soundsOptions.events;
+            this._audioMap = new Map();
+            for (const event of events) {
+                if (!event.audio) {
+                    continue;
+                }
+                (0, engine_2.executeOnSingleOrMultiple)(event.audio, (audio) => __awaiter(this, void 0, void 0, function* () {
+                    const response = yield fetch(audio.source);
+                    if (!response.ok) {
+                        return;
+                    }
+                    const arrayBuffer = yield response.arrayBuffer();
+                    container.audioContext = new AudioContext();
+                    const audioBuffer = yield container.audioContext.decodeAudioData(arrayBuffer);
+                    this._audioMap.set(audio.source, audioBuffer);
+                }));
+            }
+        });
+    }
+    start() {
+        var _a, _b, _c, _d;
+        return __awaiter(this, void 0, void 0, function* () {
+            const container = this._container, options = container.actualOptions, soundsOptions = options.sounds;
+            if (!(soundsOptions === null || soundsOptions === void 0 ? void 0 : soundsOptions.enable) || !container.canvas.element) {
+                return;
+            }
+            container.muted = true;
+            this._muteImg = document.createElement("img");
+            this._unmuteImg = document.createElement("img");
+            this._volumeDownImg = document.createElement("img");
+            this._volumeUpImg = document.createElement("img");
+            const muteImg = this._muteImg, unmuteImg = this._unmuteImg, volumeDownImg = this._volumeDownImg, volumeUpImg = this._volumeUpImg, containerTop = container.canvas.element.offsetTop, containerRight = container.canvas.element.offsetLeft + container.canvas.element.offsetWidth, iconsOptions = soundsOptions.icons, muteOptions = iconsOptions.mute, unmuteOptions = iconsOptions.unmute, volumeDownOptions = iconsOptions.volumeDown, volumeUpOptions = iconsOptions.volumeUp, margin = 10;
+            setIconStyle(muteImg, containerTop + margin, containerRight - margin * 3 - muteOptions.width - volumeDownOptions.width - volumeUpOptions.width, "block", options.fullScreen.zIndex + 1, muteOptions.width, margin);
+            setIconStyle(unmuteImg, containerTop + margin, containerRight - margin * 3 - unmuteOptions.width - volumeDownOptions.width - volumeUpOptions.width, "none", options.fullScreen.zIndex + 1, unmuteOptions.width, margin);
+            setIconStyle(volumeDownImg, containerTop + margin, containerRight - margin * 2 - volumeDownOptions.width - volumeUpOptions.width, "block", options.fullScreen.zIndex + 1, volumeDownOptions.width, margin);
+            setIconStyle(volumeUpImg, containerTop + margin, containerRight - margin - volumeUpOptions.width, "block", options.fullScreen.zIndex + 1, volumeUpOptions.width, margin);
+            muteImg.src = (_a = muteOptions.path) !== null && _a !== void 0 ? _a : (muteOptions.svg ? `data:image/svg+xml;base64,${btoa(muteOptions.svg)}` : "");
+            unmuteImg.src =
+                (_b = unmuteOptions.path) !== null && _b !== void 0 ? _b : (unmuteOptions.svg ? `data:image/svg+xml;base64,${btoa(unmuteOptions.svg)}` : "");
+            volumeDownImg.src =
+                (_c = volumeDownOptions.path) !== null && _c !== void 0 ? _c : (volumeDownOptions.svg ? `data:image/svg+xml;base64,${btoa(volumeDownOptions.svg)}` : "");
+            volumeUpImg.src =
+                (_d = volumeUpOptions.path) !== null && _d !== void 0 ? _d : (volumeUpOptions.svg ? `data:image/svg+xml;base64,${btoa(volumeUpOptions.svg)}` : "");
+            const parent = container.canvas.element.parentNode || document.body;
+            parent.append(muteImg);
+            parent.append(unmuteImg);
+            parent.append(volumeDownImg);
+            parent.append(volumeUpImg);
+            const toggleMute = () => {
+                container.muted = !container.muted;
+                this._updateMuteIcons();
+                this._updateMuteStatus();
+            };
+            const volumeDown = () => {
+                if (container.muted) {
+                    this._volume = 0;
+                }
+                this._volume -= soundsOptions.volume.step;
+                this._updateVolume();
+            };
+            const volumeUp = () => {
+                if (container.muted) {
+                    this._volume = 0;
+                }
+                this._volume += soundsOptions.volume.step;
+                this._updateVolume();
+            };
+            muteImg.addEventListener("click", toggleMute);
+            unmuteImg.addEventListener("click", toggleMute);
+            volumeDownImg.addEventListener("click", volumeDown);
+            volumeUpImg.addEventListener("click", volumeUp);
+        });
+    }
+    stop() {
+        this._container.muted = true;
+        this._mute();
+        if (this._muteImg) {
+            this._muteImg.remove();
+        }
+        if (this._unmuteImg) {
+            this._unmuteImg.remove();
+        }
+        if (this._volumeDownImg) {
+            this._volumeDownImg.remove();
+        }
+        if (this._volumeUpImg) {
+            this._volumeUpImg.remove();
+        }
+    }
+    _addBuffer(audioCtx) {
+        const buffer = audioCtx.createBufferSource();
+        this._audioSources.push(buffer);
+        return buffer;
+    }
+    _addOscillator(audioCtx) {
+        const oscillator = audioCtx.createOscillator();
+        this._audioSources.push(oscillator);
+        return oscillator;
+    }
+    _initEvents() {
+        const container = this._container, soundsOptions = container.actualOptions.sounds;
+        if (!(soundsOptions === null || soundsOptions === void 0 ? void 0 : soundsOptions.enable) || !container.canvas.element) {
+            return;
+        }
+        for (const event of soundsOptions.events) {
+            const cb = (args) => __awaiter(this, void 0, void 0, function* () {
+                if (this._container !== args.container) {
+                    return;
+                }
+                if (!this._container || this._container.muted || this._container.destroyed) {
+                    (0, engine_2.executeOnSingleOrMultiple)(event.event, (item) => {
+                        this._engine.removeEventListener(item, cb);
+                    });
+                    return;
+                }
+                if (event.filter && !event.filter(args)) {
+                    return;
+                }
+                if (event.audio) {
+                    this._playBuffer((0, engine_1.itemFromSingleOrMultiple)(event.audio));
+                }
+                else if (event.melodies) {
+                    const melody = (0, engine_1.itemFromArray)(event.melodies);
+                    if (melody.melodies.length) {
+                        yield Promise.allSettled(melody.melodies.map((m) => this._playNote(m.notes, 0, melody.loop)));
+                    }
+                    else {
+                        yield this._playNote(melody.notes, 0, melody.loop);
+                    }
+                }
+                else if (event.notes) {
+                    const note = (0, engine_1.itemFromArray)(event.notes);
+                    yield this._playNote([note], 0, false);
+                }
+            });
+            (0, engine_2.executeOnSingleOrMultiple)(event.event, (item) => {
+                this._engine.addEventListener(item, cb);
+            });
+        }
+    }
+    _mute() {
+        const container = this._container;
+        if (!container.audioContext) {
+            return;
+        }
+        for (const source of this._audioSources) {
+            this._removeAudioSource(source);
+        }
+        if (this._gain) {
+            this._gain.disconnect();
+        }
+        container.audioContext.close();
+        container.audioContext = undefined;
+        this._engine.dispatchEvent("soundsMuted", { container: this._container });
+    }
+    _playBuffer(audio) {
+        var _a;
+        const audioBuffer = this._audioMap.get(audio.source);
+        if (!audioBuffer) {
+            return;
+        }
+        const audioCtx = this._container.audioContext;
+        if (!audioCtx) {
+            return;
+        }
+        const source = this._addBuffer(audioCtx);
+        source.loop = audio.loop;
+        source.buffer = audioBuffer;
+        source.connect((_a = this._gain) !== null && _a !== void 0 ? _a : audioCtx.destination);
+        source.start();
+    }
+    _playFrequency(frequency, duration) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!this._container.audioContext || !this._gain) {
+                return;
+            }
+            const oscillator = this._addOscillator(this._container.audioContext);
+            oscillator.connect(this._gain);
+            oscillator.type = "sine";
+            oscillator.frequency.value = frequency;
+            oscillator.start();
+            return new Promise((resolve) => {
+                setTimeout(() => {
+                    this._removeAudioSource(oscillator);
+                    resolve();
+                }, duration);
+            });
+        });
+    }
+    _playMuteSound() {
+        const container = this._container;
+        if (!container.audioContext) {
+            return;
+        }
+        const gain = container.audioContext.createGain();
+        gain.connect(container.audioContext.destination);
+        gain.gain.value = 0;
+        const oscillator = container.audioContext.createOscillator();
+        oscillator.connect(gain);
+        oscillator.type = "sine";
+        oscillator.frequency.value = 1;
+        oscillator.start();
+        setTimeout(() => {
+            oscillator.stop();
+            oscillator.disconnect();
+            gain.disconnect();
+        });
+    }
+    _playNote(notes, noteIdx, loop) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this._container.muted) {
+                return;
+            }
+            const note = notes[noteIdx];
+            if (!note) {
+                return;
+            }
+            const value = note.value;
+            const promises = (0, engine_2.executeOnSingleOrMultiple)(value, (_, idx) => __awaiter(this, void 0, void 0, function* () {
+                return this._playNoteValue(notes, noteIdx, idx);
+            }));
+            yield (promises instanceof Array ? Promise.allSettled(promises) : promises);
+            let nextNoteIdx = noteIdx + 1;
+            if (loop && nextNoteIdx >= notes.length) {
+                nextNoteIdx = nextNoteIdx % notes.length;
+            }
+            if (this._container.muted) {
+                return;
+            }
+            yield this._playNote(notes, nextNoteIdx, loop);
+        });
+    }
+    _playNoteValue(notes, noteIdx, valueIdx) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const note = notes[noteIdx];
+            if (!note) {
+                return;
+            }
+            const value = (0, engine_1.itemFromSingleOrMultiple)(note.value, valueIdx, true);
+            try {
+                const freq = (0, utils_1.getNoteFrequency)(value);
+                if (typeof freq !== "number") {
+                    return;
+                }
+                yield this._playFrequency(freq, note.duration);
+            }
+            catch (e) {
+                console.error(e);
+            }
+        });
+    }
+    _removeAudioSource(source) {
+        source.stop();
+        source.disconnect();
+        this._audioSources.splice(this._audioSources.indexOf(source), 1);
+    }
+    _unmute() {
+        const container = this._container, options = container.actualOptions, soundsOptions = options.sounds;
+        if (!soundsOptions) {
+            return;
+        }
+        if (!container.audioContext) {
+            container.audioContext = new AudioContext();
+        }
+        if (!this._audioSources) {
+            this._audioSources = [];
+        }
+        const gain = container.audioContext.createGain();
+        gain.connect(container.audioContext.destination);
+        gain.gain.value = soundsOptions.volume.value / 100;
+        this._gain = gain;
+        this._initEvents();
+        this._engine.dispatchEvent("soundsUnmuted", { container: this._container });
+    }
+    _updateMuteIcons() {
+        const container = this._container, muteImg = this._muteImg, unmuteImg = this._unmuteImg;
+        if (muteImg) {
+            muteImg.style.display = container.muted ? "block" : "none";
+        }
+        if (unmuteImg) {
+            unmuteImg.style.display = container.muted ? "none" : "block";
+        }
+    }
+    _updateMuteStatus() {
+        const container = this._container;
+        if (container.muted) {
+            this._mute();
+        }
+        else {
+            this._unmute();
+            this._playMuteSound();
+        }
+    }
+    _updateVolume() {
+        var _a;
+        const container = this._container, soundsOptions = container.actualOptions.sounds;
+        if (!(soundsOptions === null || soundsOptions === void 0 ? void 0 : soundsOptions.enable)) {
+            return;
+        }
+        (0, engine_1.clamp)(this._volume, soundsOptions.volume.min, soundsOptions.volume.max);
+        let stateChanged = false;
+        if (this._volume <= 0 && !container.muted) {
+            this._volume = 0;
+            container.muted = true;
+            stateChanged = true;
+        }
+        else if (this._volume > 0 && container.muted) {
+            container.muted = false;
+            stateChanged = true;
+        }
+        if (stateChanged) {
+            this._updateMuteIcons();
+            this._updateMuteStatus();
+        }
+        if ((_a = this._gain) === null || _a === void 0 ? void 0 : _a.gain) {
+            this._gain.gain.value = this._volume / 100;
+        }
+    }
+}
+exports.SoundsInstance = SoundsInstance;

package/cjs/enums.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/cjs/index.js

@@ -0,0 +1,44 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.loadSoundsPlugin = void 0;
+const Sounds_1 = require("./Options/Classes/Sounds");
+const SoundsInstance_1 = require("./SoundsInstance");
+class SoundsPlugin {
+    constructor(engine) {
+        this.id = "sounds";
+        this._engine = engine;
+    }
+    getPlugin(container) {
+        return new SoundsInstance_1.SoundsInstance(container, this._engine);
+    }
+    loadOptions(options, source) {
+        if (!this.needsPlugin(source)) {
+            return;
+        }
+        let soundsOptions = options.sounds;
+        if ((soundsOptions === null || soundsOptions === void 0 ? void 0 : soundsOptions.load) === undefined) {
+            options.sounds = soundsOptions = new Sounds_1.Sounds();
+        }
+        soundsOptions.load(source === null || source === void 0 ? void 0 : source.sounds);
+    }
+    needsPlugin(options) {
+        var _a, _b;
+        return (_b = (_a = options === null || options === void 0 ? void 0 : options.sounds) === null || _a === void 0 ? void 0 : _a.enable) !== null && _b !== void 0 ? _b : false;
+    }
+}
+function loadSoundsPlugin(engine) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const plugin = new SoundsPlugin(engine);
+        yield engine.addPlugin(plugin);
+    });
+}
+exports.loadSoundsPlugin = loadSoundsPlugin;

package/cjs/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/cjs/utils.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getNoteFrequency = void 0;
+const notes = new Map();
+notes.set("C", [16.35, 32.7, 65.41, 130.81, 261.63, 523.25, 1046.5, 2093.0, 4186.01]);
+notes.set("Db", [17.32, 34.65, 69.3, 138.59, 277.18, 554.37, 1108.73, 2217.46, 4434.92]);
+notes.set("D", [18.35, 36.71, 73.42, 146.83, 293.66, 587.33, 1174.66, 2349.32, 4698.63]);
+notes.set("Eb", [19.45, 38.89, 77.78, 155.56, 311.13, 622.25, 1244.51, 2489.02, 4978.03]);
+notes.set("E", [20.6, 41.2, 82.41, 164.81, 329.63, 659.25, 1318.51, 2637.02, 5274.04]);
+notes.set("F", [21.83, 43.65, 87.31, 174.61, 349.23, 698.46, 1396.91, 2793.83, 5587.65]);
+notes.set("Gb", [23.12, 46.25, 92.5, 185.0, 369.99, 739.99, 1479.98, 2959.96, 5919.91]);
+notes.set("G", [24.5, 49.0, 98.0, 196.0, 392.0, 783.99, 1567.98, 3135.96, 6271.93]);
+notes.set("Ab", [25.96, 51.91, 103.83, 207.65, 415.3, 830.61, 1661.22, 3322.44, 6644.88]);
+notes.set("A", [27.5, 55.0, 110.0, 220.0, 440.0, 880.0, 1760.0, 3520.0, 7040.0]);
+notes.set("Bb", [29.14, 58.27, 116.54, 233.08, 466.16, 932.33, 1864.66, 3729.31, 7458.62]);
+notes.set("B", [30.87, 61.74, 123.47, 246.94, 493.88, 987.77, 1975.53, 3951.07, 7902.13]);
+notes.set("pause", [0]);
+function getNoteFrequency(note) {
+    const regex = /(([A-G]b?)(\d))|pause/i, result = regex.exec(note);
+    if (!result || !result.length) {
+        return;
+    }
+    console.log(result);
+    const noteKey = result[2] || result[0], noteItem = notes.get(noteKey);
+    if (!noteItem) {
+        return;
+    }
+    return noteItem[parseInt(result[3] || "0")];
+}
+exports.getNoteFrequency = getNoteFrequency;

package/esm/Options/Classes/Sounds.js

@@ -0,0 +1,30 @@
+import { SoundsEvent } from "./SoundsEvent";
+import { SoundsIcons } from "./SoundsIcons";
+import { SoundsVolume } from "./SoundsVolume";
+export class Sounds {
+    constructor() {
+        this.enable = false;
+        this.events = [];
+        this.icons = new SoundsIcons();
+        this.volume = new SoundsVolume();
+    }
+    load(data) {
+        if (!data) {
+            return;
+        }
+        if (data.enable !== undefined) {
+            this.enable = data.enable;
+        }
+        if (data.events !== undefined) {
+            this.events = data.events.map((t) => {
+                const event = new SoundsEvent();
+                event.load(t);
+                return event;
+            });
+        }
+        this.icons.load(data.icons);
+        if (data.volume !== undefined) {
+            this.volume.load(data.volume);
+        }
+    }
+}

package/esm/Options/Classes/SoundsAudio.js

@@ -0,0 +1,22 @@
+export class SoundsAudio {
+    constructor() {
+        this.loop = false;
+        this.source = "";
+    }
+    load(data) {
+        if (data === undefined) {
+            return;
+        }
+        if (typeof data === "object") {
+            if (data.loop !== undefined) {
+                this.loop = data.loop;
+            }
+            if (data.source !== undefined) {
+                this.source = data.source;
+            }
+        }
+        else {
+            this.source = data;
+        }
+    }
+}

package/esm/Options/Classes/SoundsEvent.js

@@ -0,0 +1,54 @@
+import { SoundsAudio } from "./SoundsAudio";
+import { SoundsMelody } from "./SoundsMelody";
+import { SoundsNote } from "./SoundsNote";
+export class SoundsEvent {
+    constructor() {
+        this.event = [];
+        this.notes = [];
+    }
+    load(data) {
+        if (!data) {
+            return;
+        }
+        if (data.event !== undefined) {
+            this.event = data.event;
+        }
+        if (data.audio !== undefined) {
+            if (data.audio instanceof Array) {
+                this.audio = data.audio.map((s) => {
+                    const tmp = new SoundsAudio();
+                    tmp.load(s);
+                    return tmp;
+                });
+            }
+            else {
+                this.audio = new SoundsAudio();
+                this.audio.load(data.audio);
+            }
+        }
+        if (data.notes !== undefined) {
+            this.notes = data.notes.map((t) => {
+                const tmp = new SoundsNote();
+                tmp.load(t);
+                return tmp;
+            });
+        }
+        if (data.melodies !== undefined) {
+            this.melodies = data.melodies.map((t) => {
+                const tmp = new SoundsMelody();
+                tmp.load(t);
+                return tmp;
+            });
+        }
+        if (data.filter !== undefined) {
+            if (typeof data.filter === "string") {
+                if (typeof window[data.filter] === "function") {
+                    this.filter = window[data.filter];
+                }
+            }
+            else {
+                this.filter = data.filter;
+            }
+        }
+    }
+}

package/esm/Options/Classes/SoundsIcon.js

@@ -0,0 +1,23 @@
+export class SoundsIcon {
+    constructor() {
+        this.width = 24;
+        this.height = 24;
+    }
+    load(data) {
+        if (!data) {
+            return;
+        }
+        if (data.path !== undefined) {
+            this.path = data.path;
+        }
+        if (data.svg !== undefined) {
+            this.svg = data.svg;
+        }
+        if (data.width !== undefined) {
+            this.width = data.width;
+        }
+        if (data.height !== undefined) {
+            this.height = data.height;
+        }
+    }
+}