dune-react 0.0.1

package/dist/node_modules/.pnpm/@tsparticles_engine@3.9.1/node_modules/@tsparticles/engine/browser/Core/Container.js

@@ -0,0 +1,463 @@
+import { animate, getRangeValue, cancelAnimation } from "../Utils/NumberUtils.js";
+import { millisecondsToSeconds, defaultFps, errorPrefix, removeMinIndex, removeDeleteCount, defaultFpsLimit, minFpsLimit, touchEndLengthOffset, minCoordinate, clickRadius } from "./Utils/Constants.js";
+import { getLogger, safeIntersectionObserver } from "../Utils/Utils.js";
+import { Canvas } from "./Canvas.js";
+import { EventListeners } from "./Utils/EventListeners.js";
+import { EventType } from "../Enums/Types/EventType.js";
+import { Options } from "../Options/Classes/Options.js";
+import { Particles } from "./Particles.js";
+import { Retina } from "./Retina.js";
+import { loadOptions } from "../Utils/OptionsUtils.js";
+function guardCheck(container) {
+  return container && !container.destroyed;
+}
+function initDelta(value, fpsLimit = defaultFps, smooth = false) {
+  return {
+    value,
+    factor: smooth ? defaultFps / fpsLimit : defaultFps * value / millisecondsToSeconds
+  };
+}
+function loadContainerOptions(engine, container, ...sourceOptionsArr) {
+  const options = new Options(engine, container);
+  loadOptions(options, ...sourceOptionsArr);
+  return options;
+}
+class Container {
+  constructor(engine, id, sourceOptions) {
+    this._intersectionManager = (entries) => {
+      if (!guardCheck(this) || !this.actualOptions.pauseOnOutsideViewport) {
+        return;
+      }
+      for (const entry of entries) {
+        if (entry.target !== this.interactivity.element) {
+          continue;
+        }
+        if (entry.isIntersecting) {
+          void this.play();
+        } else {
+          this.pause();
+        }
+      }
+    };
+    this._nextFrame = (timestamp) => {
+      try {
+        if (!this._smooth && this._lastFrameTime !== void 0 && timestamp < this._lastFrameTime + millisecondsToSeconds / this.fpsLimit) {
+          this.draw(false);
+          return;
+        }
+        this._lastFrameTime ?? (this._lastFrameTime = timestamp);
+        const delta = initDelta(timestamp - this._lastFrameTime, this.fpsLimit, this._smooth);
+        this.addLifeTime(delta.value);
+        this._lastFrameTime = timestamp;
+        if (delta.value > millisecondsToSeconds) {
+          this.draw(false);
+          return;
+        }
+        this.particles.draw(delta);
+        if (!this.alive()) {
+          this.destroy();
+          return;
+        }
+        if (this.animationStatus) {
+          this.draw(false);
+        }
+      } catch (e) {
+        getLogger().error(`${errorPrefix} in animation loop`, e);
+      }
+    };
+    this._engine = engine;
+    this.id = Symbol(id);
+    this.fpsLimit = 120;
+    this._smooth = false;
+    this._delay = 0;
+    this._duration = 0;
+    this._lifeTime = 0;
+    this._firstStart = true;
+    this.started = false;
+    this.destroyed = false;
+    this._paused = true;
+    this._lastFrameTime = 0;
+    this.zLayers = 100;
+    this.pageHidden = false;
+    this._clickHandlers = /* @__PURE__ */ new Map();
+    this._sourceOptions = sourceOptions;
+    this._initialSourceOptions = sourceOptions;
+    this.retina = new Retina(this);
+    this.canvas = new Canvas(this, this._engine);
+    this.particles = new Particles(this._engine, this);
+    this.pathGenerators = /* @__PURE__ */ new Map();
+    this.interactivity = {
+      mouse: {
+        clicking: false,
+        inside: false
+      }
+    };
+    this.plugins = /* @__PURE__ */ new Map();
+    this.effectDrawers = /* @__PURE__ */ new Map();
+    this.shapeDrawers = /* @__PURE__ */ new Map();
+    this._options = loadContainerOptions(this._engine, this);
+    this.actualOptions = loadContainerOptions(this._engine, this);
+    this._eventListeners = new EventListeners(this);
+    this._intersectionObserver = safeIntersectionObserver((entries) => this._intersectionManager(entries));
+    this._engine.dispatchEvent(EventType.containerBuilt, { container: this });
+  }
+  get animationStatus() {
+    return !this._paused && !this.pageHidden && guardCheck(this);
+  }
+  get options() {
+    return this._options;
+  }
+  get sourceOptions() {
+    return this._sourceOptions;
+  }
+  addClickHandler(callback) {
+    if (!guardCheck(this)) {
+      return;
+    }
+    const el = this.interactivity.element;
+    if (!el) {
+      return;
+    }
+    const clickOrTouchHandler = (e, pos, radius) => {
+      if (!guardCheck(this)) {
+        return;
+      }
+      const pxRatio = this.retina.pixelRatio, posRetina = {
+        x: pos.x * pxRatio,
+        y: pos.y * pxRatio
+      }, particles = this.particles.quadTree.queryCircle(posRetina, radius * pxRatio);
+      callback(e, particles);
+    }, clickHandler = (e) => {
+      if (!guardCheck(this)) {
+        return;
+      }
+      const mouseEvent = e, pos = {
+        x: mouseEvent.offsetX || mouseEvent.clientX,
+        y: mouseEvent.offsetY || mouseEvent.clientY
+      };
+      clickOrTouchHandler(e, pos, clickRadius);
+    }, touchStartHandler = () => {
+      if (!guardCheck(this)) {
+        return;
+      }
+      touched = true;
+      touchMoved = false;
+    }, touchMoveHandler = () => {
+      if (!guardCheck(this)) {
+        return;
+      }
+      touchMoved = true;
+    }, touchEndHandler = (e) => {
+      if (!guardCheck(this)) {
+        return;
+      }
+      if (touched && !touchMoved) {
+        const touchEvent = e;
+        let lastTouch = touchEvent.touches[touchEvent.touches.length - touchEndLengthOffset];
+        if (!lastTouch) {
+          lastTouch = touchEvent.changedTouches[touchEvent.changedTouches.length - touchEndLengthOffset];
+          if (!lastTouch) {
+            return;
+          }
+        }
+        const element = this.canvas.element, canvasRect = element ? element.getBoundingClientRect() : void 0, pos = {
+          x: lastTouch.clientX - (canvasRect ? canvasRect.left : minCoordinate),
+          y: lastTouch.clientY - (canvasRect ? canvasRect.top : minCoordinate)
+        };
+        clickOrTouchHandler(e, pos, Math.max(lastTouch.radiusX, lastTouch.radiusY));
+      }
+      touched = false;
+      touchMoved = false;
+    }, touchCancelHandler = () => {
+      if (!guardCheck(this)) {
+        return;
+      }
+      touched = false;
+      touchMoved = false;
+    };
+    let touched = false, touchMoved = false;
+    this._clickHandlers.set("click", clickHandler);
+    this._clickHandlers.set("touchstart", touchStartHandler);
+    this._clickHandlers.set("touchmove", touchMoveHandler);
+    this._clickHandlers.set("touchend", touchEndHandler);
+    this._clickHandlers.set("touchcancel", touchCancelHandler);
+    for (const [key, handler] of this._clickHandlers) {
+      el.addEventListener(key, handler);
+    }
+  }
+  addLifeTime(value) {
+    this._lifeTime += value;
+  }
+  addPath(key, generator, override = false) {
+    if (!guardCheck(this) || !override && this.pathGenerators.has(key)) {
+      return false;
+    }
+    this.pathGenerators.set(key, generator);
+    return true;
+  }
+  alive() {
+    return !this._duration || this._lifeTime <= this._duration;
+  }
+  clearClickHandlers() {
+    var _a;
+    if (!guardCheck(this)) {
+      return;
+    }
+    for (const [key, handler] of this._clickHandlers) {
+      (_a = this.interactivity.element) == null ? void 0 : _a.removeEventListener(key, handler);
+    }
+    this._clickHandlers.clear();
+  }
+  destroy(remove = true) {
+    var _a, _b;
+    if (!guardCheck(this)) {
+      return;
+    }
+    this.stop();
+    this.clearClickHandlers();
+    this.particles.destroy();
+    this.canvas.destroy();
+    for (const effectDrawer of this.effectDrawers.values()) {
+      (_a = effectDrawer.destroy) == null ? void 0 : _a.call(effectDrawer, this);
+    }
+    for (const shapeDrawer of this.shapeDrawers.values()) {
+      (_b = shapeDrawer.destroy) == null ? void 0 : _b.call(shapeDrawer, this);
+    }
+    for (const key of this.effectDrawers.keys()) {
+      this.effectDrawers.delete(key);
+    }
+    for (const key of this.shapeDrawers.keys()) {
+      this.shapeDrawers.delete(key);
+    }
+    this._engine.clearPlugins(this);
+    this.destroyed = true;
+    if (remove) {
+      const mainArr = this._engine.items, idx = mainArr.findIndex((t) => t === this);
+      if (idx >= removeMinIndex) {
+        mainArr.splice(idx, removeDeleteCount);
+      }
+    }
+    this._engine.dispatchEvent(EventType.containerDestroyed, { container: this });
+  }
+  draw(force) {
+    if (!guardCheck(this)) {
+      return;
+    }
+    let refreshTime = force;
+    const frame = (timestamp) => {
+      if (refreshTime) {
+        this._lastFrameTime = void 0;
+        refreshTime = false;
+      }
+      this._nextFrame(timestamp);
+    };
+    this._drawAnimationFrame = animate((timestamp) => frame(timestamp));
+  }
+  async export(type, options = {}) {
+    for (const plugin of this.plugins.values()) {
+      if (!plugin.export) {
+        continue;
+      }
+      const res = await plugin.export(type, options);
+      if (!res.supported) {
+        continue;
+      }
+      return res.blob;
+    }
+    getLogger().error(`${errorPrefix} - Export plugin with type ${type} not found`);
+  }
+  handleClickMode(mode) {
+    var _a;
+    if (!guardCheck(this)) {
+      return;
+    }
+    this.particles.handleClickMode(mode);
+    for (const plugin of this.plugins.values()) {
+      (_a = plugin.handleClickMode) == null ? void 0 : _a.call(plugin, mode);
+    }
+  }
+  async init() {
+    var _a, _b, _c, _d;
+    if (!guardCheck(this)) {
+      return;
+    }
+    const effects = this._engine.getSupportedEffects();
+    for (const type of effects) {
+      const drawer = this._engine.getEffectDrawer(type);
+      if (drawer) {
+        this.effectDrawers.set(type, drawer);
+      }
+    }
+    const shapes = this._engine.getSupportedShapes();
+    for (const type of shapes) {
+      const drawer = this._engine.getShapeDrawer(type);
+      if (drawer) {
+        this.shapeDrawers.set(type, drawer);
+      }
+    }
+    await this.particles.initPlugins();
+    this._options = loadContainerOptions(this._engine, this, this._initialSourceOptions, this.sourceOptions);
+    this.actualOptions = loadContainerOptions(this._engine, this, this._options);
+    const availablePlugins = await this._engine.getAvailablePlugins(this);
+    for (const [id, plugin] of availablePlugins) {
+      this.plugins.set(id, plugin);
+    }
+    this.retina.init();
+    await this.canvas.init();
+    this.updateActualOptions();
+    this.canvas.initBackground();
+    this.canvas.resize();
+    const { zLayers, duration, delay, fpsLimit, smooth } = this.actualOptions;
+    this.zLayers = zLayers;
+    this._duration = getRangeValue(duration) * millisecondsToSeconds;
+    this._delay = getRangeValue(delay) * millisecondsToSeconds;
+    this._lifeTime = 0;
+    this.fpsLimit = fpsLimit > minFpsLimit ? fpsLimit : defaultFpsLimit;
+    this._smooth = smooth;
+    for (const drawer of this.effectDrawers.values()) {
+      await ((_a = drawer.init) == null ? void 0 : _a.call(drawer, this));
+    }
+    for (const drawer of this.shapeDrawers.values()) {
+      await ((_b = drawer.init) == null ? void 0 : _b.call(drawer, this));
+    }
+    for (const plugin of this.plugins.values()) {
+      await ((_c = plugin.init) == null ? void 0 : _c.call(plugin));
+    }
+    this._engine.dispatchEvent(EventType.containerInit, { container: this });
+    await this.particles.init();
+    this.particles.setDensity();
+    for (const plugin of this.plugins.values()) {
+      (_d = plugin.particlesSetup) == null ? void 0 : _d.call(plugin);
+    }
+    this._engine.dispatchEvent(EventType.particlesSetup, { container: this });
+  }
+  async loadTheme(name) {
+    if (!guardCheck(this)) {
+      return;
+    }
+    this._currentTheme = name;
+    await this.refresh();
+  }
+  pause() {
+    var _a;
+    if (!guardCheck(this)) {
+      return;
+    }
+    if (this._drawAnimationFrame !== void 0) {
+      cancelAnimation(this._drawAnimationFrame);
+      delete this._drawAnimationFrame;
+    }
+    if (this._paused) {
+      return;
+    }
+    for (const plugin of this.plugins.values()) {
+      (_a = plugin.pause) == null ? void 0 : _a.call(plugin);
+    }
+    if (!this.pageHidden) {
+      this._paused = true;
+    }
+    this._engine.dispatchEvent(EventType.containerPaused, { container: this });
+  }
+  play(force) {
+    if (!guardCheck(this)) {
+      return;
+    }
+    const needsUpdate = this._paused || force;
+    if (this._firstStart && !this.actualOptions.autoPlay) {
+      this._firstStart = false;
+      return;
+    }
+    if (this._paused) {
+      this._paused = false;
+    }
+    if (needsUpdate) {
+      for (const plugin of this.plugins.values()) {
+        if (plugin.play) {
+          plugin.play();
+        }
+      }
+    }
+    this._engine.dispatchEvent(EventType.containerPlay, { container: this });
+    this.draw(needsUpdate ?? false);
+  }
+  async refresh() {
+    if (!guardCheck(this)) {
+      return;
+    }
+    this.stop();
+    return this.start();
+  }
+  async reset(sourceOptions) {
+    if (!guardCheck(this)) {
+      return;
+    }
+    this._initialSourceOptions = sourceOptions;
+    this._sourceOptions = sourceOptions;
+    this._options = loadContainerOptions(this._engine, this, this._initialSourceOptions, this.sourceOptions);
+    this.actualOptions = loadContainerOptions(this._engine, this, this._options);
+    return this.refresh();
+  }
+  async start() {
+    if (!guardCheck(this) || this.started) {
+      return;
+    }
+    await this.init();
+    this.started = true;
+    await new Promise((resolve) => {
+      const start = async () => {
+        var _a;
+        this._eventListeners.addListeners();
+        if (this.interactivity.element instanceof HTMLElement && this._intersectionObserver) {
+          this._intersectionObserver.observe(this.interactivity.element);
+        }
+        for (const plugin of this.plugins.values()) {
+          await ((_a = plugin.start) == null ? void 0 : _a.call(plugin));
+        }
+        this._engine.dispatchEvent(EventType.containerStarted, { container: this });
+        this.play();
+        resolve();
+      };
+      this._delayTimeout = setTimeout(() => void start(), this._delay);
+    });
+  }
+  stop() {
+    var _a;
+    if (!guardCheck(this) || !this.started) {
+      return;
+    }
+    if (this._delayTimeout) {
+      clearTimeout(this._delayTimeout);
+      delete this._delayTimeout;
+    }
+    this._firstStart = true;
+    this.started = false;
+    this._eventListeners.removeListeners();
+    this.pause();
+    this.particles.clear();
+    this.canvas.stop();
+    if (this.interactivity.element instanceof HTMLElement && this._intersectionObserver) {
+      this._intersectionObserver.unobserve(this.interactivity.element);
+    }
+    for (const plugin of this.plugins.values()) {
+      (_a = plugin.stop) == null ? void 0 : _a.call(plugin);
+    }
+    for (const key of this.plugins.keys()) {
+      this.plugins.delete(key);
+    }
+    this._sourceOptions = this._options;
+    this._engine.dispatchEvent(EventType.containerStopped, { container: this });
+  }
+  updateActualOptions() {
+    this.actualOptions.responsive = [];
+    const newMaxWidth = this.actualOptions.setResponsive(this.canvas.size.width, this.retina.pixelRatio, this._options);
+    this.actualOptions.setTheme(this._currentTheme);
+    if (this._responsiveMaxWidth === newMaxWidth) {
+      return false;
+    }
+    this._responsiveMaxWidth = newMaxWidth;
+    return true;
+  }
+}
+export {
+  Container
+};