@drincs/pixi-vn 0.4.7 → 0.4.8

package/dist/managers/WindowManager.js

@@ -0,0 +1,1142 @@
+'use strict';
+
+var pixi_js = require('pixi.js');
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+
+// src/classes/ticker/TickerBase.ts
+var TickerBase = class {
+  /**
+   * @param args The arguments that you want to pass to the ticker.
+   * @param duration The duration of the ticker. If is undefined, the ticker will be called every frame.
+   * @param priority The priority of the ticker. If is undefined, the priority will be UPDATE_PRIORITY.NORMAL.
+   */
+  constructor(args, duration, priority) {
+    this.args = args;
+    this.duration = duration;
+    this.priority = priority;
+  }
+  /**
+   * The method that will be called every frame.
+   * This method should be overridden and you can use GameWindowManager.addCanvasElement() to get the canvas element of the canvas, and edit them.
+   * @param t The ticker that is calling this method
+   * @param args The arguments that you passed when you added the ticker
+   * @param tags The tags of the canvas elements that are connected to this ticker
+   */
+  fn(_t, _args, _tags) {
+    throw new Error("[Pixi'VN] The method TickerBase.fn() must be overridden");
+  }
+};
+
+// src/decorators/TickerDecorator.ts
+var registeredTickers = {};
+function geTickerInstanceByClassName(tickerName, args, duration, priority) {
+  try {
+    let ticker = registeredTickers[tickerName];
+    if (!ticker) {
+      console.error(`[Pixi'VN] Ticker ${tickerName} not found`);
+      return;
+    }
+    return new ticker(args, duration, priority);
+  } catch (e) {
+    console.error(`[Pixi'VN] Error while getting Ticker ${tickerName}`, e);
+    return;
+  }
+}
+var CanvasContainer = class extends pixi_js.Container {
+  get memory() {
+    let memory = getMemoryContainer(this);
+    this.children.forEach((child) => {
+      memory.elements.push(exportCanvasElement(child));
+    });
+    return memory;
+  }
+  set memory(value) {
+    setMemoryContainer(this, value);
+    value.elements.forEach((child) => {
+      this.addChild(importCanvasElement(child));
+    });
+  }
+};
+function getMemoryContainer(element) {
+  return {
+    className: "CanvasContainer",
+    elements: [],
+    width: element.width,
+    height: element.height,
+    isRenderGroup: element.isRenderGroup,
+    blendMode: element.blendMode,
+    tint: element.tint,
+    alpha: element.alpha,
+    angle: element.angle,
+    renderable: element.renderable,
+    rotation: element.rotation,
+    scale: { x: element.scale.x, y: element.scale.y },
+    pivot: { x: element.pivot.x, y: element.pivot.y },
+    position: { x: element.position.x, y: element.position.y },
+    skew: { x: element.skew.x, y: element.skew.y },
+    visible: element.visible,
+    culled: element.culled,
+    x: element.x,
+    y: element.y,
+    boundsArea: element.boundsArea,
+    cursor: element.cursor,
+    eventMode: element.eventMode,
+    interactive: element.interactive,
+    interactiveChildren: element.interactiveChildren,
+    hitArea: element.hitArea
+  };
+}
+function setMemoryContainer(element, memory) {
+  memory.width && (element.width = memory.width);
+  memory.height && (element.height = memory.height);
+  memory.isRenderGroup && (element.isRenderGroup = memory.isRenderGroup);
+  memory.blendMode && (element.blendMode = memory.blendMode);
+  memory.tint && (element.tint = memory.tint);
+  memory.alpha && (element.alpha = memory.alpha);
+  memory.angle && (element.angle = memory.angle);
+  memory.renderable && (element.renderable = memory.renderable);
+  memory.rotation && (element.rotation = memory.rotation);
+  if (memory.scale) {
+    if (typeof memory.scale === "number") {
+      element.scale.set(memory.scale, memory.scale);
+    } else {
+      element.scale.set(memory.scale.x, memory.scale.y);
+    }
+  }
+  if (memory.pivot) {
+    if (typeof memory.pivot === "number") {
+      element.pivot.set(memory.pivot, memory.pivot);
+    } else {
+      element.pivot.set(memory.pivot.x, memory.pivot.y);
+    }
+  }
+  memory.position && element.position.set(memory.position.x, memory.position.y);
+  memory.skew && element.skew.set(memory.skew.x, memory.skew.y);
+  memory.visible && (element.visible = memory.visible);
+  memory.culled && (element.culled = memory.culled);
+  memory.x && (element.x = memory.x);
+  memory.y && (element.y = memory.y);
+  memory.boundsArea && (element.boundsArea = memory.boundsArea);
+  memory.cursor && (element.cursor = memory.cursor);
+  memory.eventMode && (element.eventMode = memory.eventMode);
+  memory.interactive && (element.interactive = memory.interactive);
+  memory.interactiveChildren && (element.interactiveChildren = memory.interactiveChildren);
+  memory.hitArea && (element.hitArea = memory.hitArea);
+}
+function getTexture(imageUrl) {
+  return __async(this, null, function* () {
+    if (pixi_js.Assets.cache.has(imageUrl)) {
+      return pixi_js.Assets.get(imageUrl);
+    }
+    return pixi_js.Assets.load(imageUrl).then((texture) => {
+      if (!texture) {
+        console.error("[Pixi'VN] Texture not found", imageUrl);
+        return;
+      }
+      if (!(texture instanceof pixi_js.Texture)) {
+        console.error("[Pixi'VN] File not is a image", imageUrl);
+        return;
+      }
+      return texture;
+    }).catch((e) => {
+      console.error("[Pixi'VN] Error loading image", e);
+      return;
+    });
+  });
+}
+function getTextStyle(style) {
+  let fill = style.fill;
+  if (fill instanceof Object) {
+    console.warn("[Pixi'VN] CanvasText.style.fill is a FillGradient or FillPattern, this is not supported yet.", fill);
+    fill = "#00FF00";
+  }
+  return {
+    align: style.align,
+    breakWords: style.breakWords,
+    dropShadow: style.dropShadow,
+    fill,
+    fontFamily: style.fontFamily,
+    fontSize: style.fontSize,
+    fontStyle: style.fontStyle,
+    fontVariant: style.fontVariant,
+    fontWeight: style.fontWeight,
+    leading: style.leading,
+    letterSpacing: style.letterSpacing,
+    lineHeight: style.lineHeight,
+    padding: style.padding,
+    stroke: style.stroke,
+    textBaseline: style.textBaseline,
+    trim: style.trim,
+    whiteSpace: style.whiteSpace,
+    wordWrap: style.wordWrap,
+    wordWrapWidth: style.wordWrapWidth
+  };
+}
+
+// src/decorators/EventDecorator.ts
+var registeredEvents = {};
+function getEventTypeByClassName(eventName) {
+  try {
+    let eventType = registeredEvents[eventName];
+    if (!eventType) {
+      console.error(`[Pixi'VN] Event ${eventName} not found`);
+      return;
+    }
+    new eventType();
+    return eventType;
+  } catch (e) {
+    console.error(`[Pixi'VN] Error while getting Event ${eventName}`, e);
+    return;
+  }
+}
+function getEventInstanceByClassName(eventName) {
+  try {
+    let eventType = registeredEvents[eventName];
+    if (!eventType) {
+      console.error(`[Pixi'VN] Event ${eventName} not found`);
+      return;
+    }
+    let event = new eventType();
+    return event;
+  } catch (e) {
+    console.error(`[Pixi'VN] Error while getting Event ${eventName}`, e);
+    return;
+  }
+}
+
+// src/classes/canvas/CanvasSprite.ts
+var CanvasSprite = class _CanvasSprite extends pixi_js.Sprite {
+  constructor() {
+    super(...arguments);
+    this._onEvents = {};
+  }
+  get memory() {
+    return getMemorySprite(this);
+  }
+  set memory(value) {
+    setMemorySprite(this, value);
+  }
+  get onEvents() {
+    return this._onEvents;
+  }
+  /**
+   * is same function as on(), but it keeps in memory the children.
+   * @param event The event type, e.g., 'click', 'mousedown', 'mouseup', 'pointerdown', etc.
+   * @param eventClass The class that extends CanvasEvent.
+   * @returns 
+   * @example
+   * ```typescript
+   * \@eventDecorator()
+   * export class EventTest extends CanvasEvent<CanvasSprite> {
+   *     override fn(event: CanvasEventNamesType, sprite: CanvasSprite): void {
+   *         if (event === 'pointerdown') {
+   *             sprite.scale.x *= 1.25;
+   *             sprite.scale.y *= 1.25;
+   *         }
+   *     }
+   * }
+   * ```
+   * 
+   * ```typescript
+   * let sprite = addImage("alien", 'https://pixijs.com/assets/eggHead.png')
+   * await sprite.load()
+   *
+   * sprite.eventMode = 'static';
+   * sprite.cursor = 'pointer';
+   * sprite.onEvent('pointerdown', EventTest);
+   *
+   * GameWindowManager.addCanvasElement("bunny", sprite);
+   * ```
+   */
+  onEvent(event, eventClass) {
+    let className = eventClass.name;
+    let instance = getEventInstanceByClassName(className);
+    this._onEvents[event] = className;
+    if (instance) {
+      super.on(event, () => {
+        instance.fn(event, this);
+      });
+    }
+    return this;
+  }
+  /**
+   * on() does not keep in memory the event class, use onEvent() instead
+   * @deprecated
+   * @private
+   * @param event 
+   * @param fn 
+   * @param context 
+   */
+  on(event, fn, context) {
+    return super.on(event, fn, context);
+  }
+  static from(source, skipCache) {
+    let sprite = pixi_js.Sprite.from(source, skipCache);
+    let mySprite = new _CanvasSprite();
+    mySprite.texture = sprite.texture;
+    return mySprite;
+  }
+};
+function getMemorySprite(element) {
+  let temp = getMemoryContainer(element);
+  return __spreadProps(__spreadValues({}, temp), {
+    className: "CanvasSprite",
+    textureImage: getTextureMemory(element.texture),
+    anchor: { x: element.anchor.x, y: element.anchor.y },
+    roundPixels: element.roundPixels,
+    onEvents: element.onEvents
+  });
+}
+function setMemorySprite(element, memory) {
+  setMemoryContainer(element, memory);
+  getTexture(memory.textureImage.image).then((texture) => {
+    if (texture) {
+      element.texture = texture;
+    }
+  });
+  if (memory.anchor) {
+    if (typeof memory.anchor === "number") {
+      element.anchor.set(memory.anchor, memory.anchor);
+    } else {
+      element.anchor.set(memory.anchor.x, memory.anchor.y);
+    }
+  }
+  memory.roundPixels && (element.roundPixels = memory.roundPixels);
+  for (let event in memory.onEvents) {
+    let className = memory.onEvents[event];
+    let instance = getEventTypeByClassName(className);
+    if (instance) {
+      element.onEvent(event, instance);
+    }
+  }
+}
+
+// src/classes/canvas/CanvasImage.ts
+var CanvasImage = class _CanvasImage extends CanvasSprite {
+  constructor(options, imageLink) {
+    super(options);
+    this.imageLink = "";
+    if (imageLink) {
+      this.imageLink = imageLink;
+    }
+  }
+  get memory() {
+    return __spreadProps(__spreadValues({}, getMemorySprite(this)), {
+      className: "CanvasImage",
+      textureImage: { image: this.imageLink }
+    });
+  }
+  set memory(memory) {
+    setMemorySprite(this, memory);
+  }
+  static from(source, skipCache) {
+    let sprite = pixi_js.Sprite.from(source, skipCache);
+    let mySprite = new _CanvasImage();
+    mySprite.texture = sprite.texture;
+    return mySprite;
+  }
+  /** 
+   * Load the image from the link and set the texture of the sprite.
+   * @param image The link of the image. If it is not set, it will use the imageLink property.
+   * @returns A promise that resolves when the image is loaded.
+   */
+  load(image) {
+    return __async(this, null, function* () {
+      if (!image) {
+        image = this.imageLink;
+      }
+      return getTexture(this.imageLink).then((texture) => {
+        if (texture) {
+          this.texture = texture;
+        }
+      }).catch((e) => {
+        console.error("[Pixi'VN] Error into CanvasImage.load()", e);
+      });
+    });
+  }
+};
+var CanvasText = class extends pixi_js.Text {
+  constructor() {
+    super(...arguments);
+    this._onEvents = {};
+  }
+  get memory() {
+    return getMemoryText(this);
+  }
+  set memory(value) {
+    setMemoryText(this, value);
+  }
+  get onEvents() {
+    return this._onEvents;
+  }
+  /**
+   * is same function as on(), but it keeps in memory the children.
+   * @param event The event type, e.g., 'click', 'mousedown', 'mouseup', 'pointerdown', etc.
+   * @param eventClass The class that extends CanvasEvent.
+   * @returns 
+   * @example
+   * ```typescript
+   * \@eventDecorator()
+   * export class EventTest extends CanvasEvent<CanvasText> {
+   *     override fn(event: CanvasEventNamesType, text: CanvasText): void {
+   *         if (event === 'pointerdown') {
+   *             text.scale.x *= 1.25;
+   *             text.scale.y *= 1.25;
+   *         }
+   *     }
+   * }
+   * ```
+   * 
+   * ```typescript
+   * const text = new CanvasText();
+   * text.text = "Hello World"
+   *
+   * text.eventMode = 'static';
+   * text.cursor = 'pointer';
+   * text.onEvent('pointerdown', EventTest);
+   *
+   * GameWindowManager.addCanvasElement("text", text);
+   * ```
+   */
+  onEvent(event, eventClass) {
+    let className = eventClass.name;
+    let instance = getEventInstanceByClassName(className);
+    this._onEvents[event] = className;
+    if (instance) {
+      super.on(event, () => {
+        instance.fn(event, this);
+      });
+    }
+    return this;
+  }
+  /**
+   * on() does not keep in memory the event class, use onEvent() instead
+   * @deprecated
+   * @private
+   * @param event 
+   * @param fn 
+   * @param context 
+   */
+  on(event, fn, context) {
+    return super.on(event, fn, context);
+  }
+};
+function getMemoryText(element) {
+  let temp = getMemoryContainer(element);
+  return __spreadProps(__spreadValues({}, temp), {
+    className: "CanvasText",
+    anchor: { x: element.anchor.x, y: element.anchor.y },
+    text: element.text,
+    resolution: element.resolution,
+    style: getTextStyle(element.style),
+    roundPixels: element.roundPixels,
+    onEvents: element.onEvents
+  });
+}
+function setMemoryText(element, memory) {
+  setMemoryContainer(element, memory);
+  if (memory.anchor) {
+    if (typeof memory.anchor === "number") {
+      element.anchor.set(memory.anchor, memory.anchor);
+    } else {
+      element.anchor.set(memory.anchor.x, memory.anchor.y);
+    }
+  }
+  memory.text && (element.text = memory.text);
+  memory.resolution && (element.resolution = memory.resolution);
+  memory.style && (element.style = memory.style);
+  memory.roundPixels && (element.roundPixels = memory.roundPixels);
+  for (let event in memory.onEvents) {
+    let className = memory.onEvents[event];
+    let instance = getEventTypeByClassName(className);
+    if (instance) {
+      element.onEvent(event, instance);
+    }
+  }
+}
+
+// src/decorators/CanvasElementDecorator.ts
+var registeredCanvasElement = {};
+function getCanvasElementInstanceByClassName(canvasName) {
+  try {
+    let eventType = registeredCanvasElement[canvasName];
+    if (!eventType) {
+      if (canvasName === "CanvasContainer") {
+        eventType = CanvasContainer;
+      } else if (canvasName === "CanvasImage") {
+        eventType = CanvasImage;
+      } else if (canvasName === "CanvasSprite") {
+        eventType = CanvasSprite;
+      } else if (canvasName === "CanvasText") {
+        eventType = CanvasText;
+      }
+    }
+    if (!eventType) {
+      console.error(`[Pixi'VN] CanvasElement ${canvasName} not found`);
+      return;
+    }
+    let canvasElement = new eventType();
+    return canvasElement;
+  } catch (e) {
+    console.error(`[Pixi'VN] Error while getting CanvasElement ${canvasName}`, e);
+    return;
+  }
+}
+
+// src/functions/CanvasUtility.ts
+function getTextureMemory(texture) {
+  let sourceTexture = texture.source;
+  let textureMemory = {
+    image: sourceTexture.label
+  };
+  return textureMemory;
+}
+function exportCanvasElement(element) {
+  return element.memory;
+}
+function importCanvasElement(memory) {
+  let element = getCanvasElementInstanceByClassName(memory.className);
+  if (element) {
+    element.memory = memory;
+  } else {
+    throw new Error("[Pixi'VN] The element " + memory.className + " could not be created");
+  }
+  return element;
+}
+
+// src/functions/EasterEgg.ts
+function asciiArtLog() {
+  console.info(`
+    ____  _      _ ___     ___   _ 
+    |  _ \\(_)_  _(_| ) \\   / / \\ | |
+    | |_) | \\ \\/ / |/ \\ \\ / /|  \\| |
+    |  __/| |>  <| |   \\ V / | |\\  |
+    |_|   |_/_/\\_\\_|    \\_/  |_| \\_|
+    `);
+}
+
+// src/functions/ExportUtility.ts
+function createExportableElement(element) {
+  try {
+    let elementString = JSON.stringify(element);
+    return JSON.parse(elementString);
+  } catch (e) {
+    console.error("[Pixi'VN] Error creating exportable element", e);
+    throw new Error("[Pixi'VN] Error creating exportable element");
+  }
+}
+
+// src/types/PauseType.ts
+var PauseValueType = "Pause";
+
+// src/types/RepeatType.ts
+var Repeat = "Repeat";
+
+// src/managers/WindowManager.ts
+var _GameWindowManager = class _GameWindowManager {
+  constructor() {
+  }
+  /**
+   * The PIXI Application instance.
+   * It not recommended to use this property directly.
+   */
+  static get app() {
+    if (!_GameWindowManager._app) {
+      throw new Error("[Pixi'VN] GameWindowManager.app is undefined");
+    }
+    return _GameWindowManager._app;
+  }
+  /**
+   * If the manager is initialized.
+   */
+  static get isInitialized() {
+    return _GameWindowManager._isInitialized;
+  }
+  static get screen() {
+    return _GameWindowManager.app.screen;
+  }
+  /**
+   * Initialize the PIXI Application and the interface div.
+   * This method should be called before any other method.
+   * @param element The html element where I will put the canvas. Example: document.body
+   * @param width The width of the canvas
+   * @param height The height of the canvas
+   * @param options The options of PIXI Application
+   * @example
+   * ```typescript
+   * const body = document.body
+   * if (!body) {
+   *     throw new Error('body element not found')
+   * }
+   * await GameWindowManager.initialize(body, 1920, 1080, {
+   *     backgroundColor: "#303030"
+   * })
+   * ```
+   */
+  static initialize(element, width, height, options) {
+    return __async(this, null, function* () {
+      _GameWindowManager.canvasWidth = width;
+      _GameWindowManager.canvasHeight = height;
+      _GameWindowManager._app = new pixi_js.Application();
+      return _GameWindowManager.app.init(__spreadValues({
+        resolution: window.devicePixelRatio || 1,
+        autoDensity: true,
+        width,
+        height
+      }, options)).then(() => {
+        _GameWindowManager._isInitialized = true;
+        this.addCanvasIntoElement(element);
+        window.addEventListener("resize", _GameWindowManager.resize);
+        _GameWindowManager.resize();
+        asciiArtLog();
+      });
+    });
+  }
+  /**
+   * Add the canvas into a html element.
+   * @param element it is the html element where I will put the canvas. Example: document.body
+   */
+  static addCanvasIntoElement(element) {
+    if (_GameWindowManager.isInitialized) {
+      element.appendChild(_GameWindowManager.app.canvas);
+    } else {
+      console.error("[Pixi'VN] GameWindowManager is not initialized");
+    }
+  }
+  /**
+   * Initialize the interface div and add it into a html element.
+   * @param element it is the html element where I will put the interface div. Example: document.getElementById('root')
+   * @example
+   * ```typescript
+   * const root = document.getElementById('root')
+   * if (!root) {
+   *     throw new Error('root element not found')
+   * }
+   * GameWindowManager.initializeHTMLLayout(root)
+   * const reactRoot = createRoot(GameWindowManager.htmlLayout)
+   * reactRoot.render(
+   *     <App />
+   * )
+   * ```
+   */
+  static initializeHTMLLayout(element) {
+    let div = document.createElement("div");
+    div.style.position = "absolute";
+    div.style.pointerEvents = "none";
+    element.appendChild(div);
+    _GameWindowManager.htmlLayout = div;
+    _GameWindowManager.resize();
+  }
+  /* Resize Metods */
+  /**
+   * This method returns the scale of the screen.
+   */
+  static get screenScale() {
+    let screenWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
+    let screenHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
+    return Math.min(screenWidth / _GameWindowManager.canvasWidth, screenHeight / _GameWindowManager.canvasHeight);
+  }
+  /**
+   * This method returns the width of the screen enlarged by the scale.
+   */
+  static get screenWidth() {
+    return Math.floor(_GameWindowManager.screenScale * _GameWindowManager.canvasWidth);
+  }
+  /**
+   * This method returns the height of the screen enlarged by the scale.
+   */
+  static get screenHeight() {
+    return Math.floor(_GameWindowManager.screenScale * _GameWindowManager.canvasHeight);
+  }
+  /**
+   * This method returns the horizontal margin of the screen.
+   */
+  static get horizontalMargin() {
+    let screenWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
+    return (screenWidth - _GameWindowManager.screenWidth) / 2;
+  }
+  /**
+   * This method returns the vertical margin of the screen.
+   */
+  static get verticalMargin() {
+    let screenHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
+    return (screenHeight - _GameWindowManager.screenHeight) / 2;
+  }
+  /**
+   * This method is called when the screen is resized.
+   */
+  static resize() {
+    if (_GameWindowManager.isInitialized) {
+      let style = _GameWindowManager.app.canvas.style;
+      style.width = `${_GameWindowManager.screenWidth}px`;
+      style.height = `${_GameWindowManager.screenHeight}px`;
+      style.marginLeft = `${_GameWindowManager.horizontalMargin}px`;
+      style.marginRight = `${_GameWindowManager.horizontalMargin}px`;
+      style.marginTop = `${_GameWindowManager.verticalMargin}px`;
+      style.marginBottom = `${_GameWindowManager.verticalMargin}px`;
+    }
+    if (_GameWindowManager.htmlLayout) {
+      _GameWindowManager.htmlLayout.style.width = `${_GameWindowManager.screenWidth}px`;
+      _GameWindowManager.htmlLayout.style.height = `${_GameWindowManager.screenHeight}px`;
+      _GameWindowManager.htmlLayout.style.marginLeft = `${_GameWindowManager.horizontalMargin}px`;
+      _GameWindowManager.htmlLayout.style.marginRight = `${_GameWindowManager.horizontalMargin}px`;
+      _GameWindowManager.htmlLayout.style.marginTop = `${_GameWindowManager.verticalMargin}px`;
+      _GameWindowManager.htmlLayout.style.marginBottom = `${_GameWindowManager.verticalMargin}px`;
+    }
+  }
+  /* Edit Canvas Elements Methods */
+  /**
+   * This is a dictionary that contains all Canvas Elements of Canvas, currently.
+   */
+  static get currentCanvasElements() {
+    return _GameWindowManager._children;
+  }
+  /**
+   * Add a canvas element to the canvas.
+   * If there is a canvas element with the same tag, it will be removed.
+   * @param tag The tag of the canvas element.
+   * @param canvasElement The canvas elements to be added.
+   * @example
+   * ```typescript
+   * const texture = await Assets.load('https://pixijs.com/assets/bunny.png');
+   * const sprite = CanvasSprite.from(texture);
+   * GameWindowManager.addCanvasElement("bunny", sprite);
+   * ```
+   */
+  static addCanvasElement(tag, canvasElement) {
+    if (_GameWindowManager._children[tag]) {
+      _GameWindowManager.removeCanvasElement(tag);
+    }
+    _GameWindowManager.app.stage.addChild(canvasElement);
+    _GameWindowManager._children[tag] = canvasElement;
+    _GameWindowManager.childrenTagsOrder.push(tag);
+  }
+  /**
+   * Remove a canvas element from the canvas.
+   * And remove all tickers that are not connected to any canvas element.
+   * @param tag The tag of the canvas element to be removed.
+   * @returns 
+   * @example
+   * ```typescript
+   * GameWindowManager.removeCanvasElement("bunny");
+   * ```
+   */
+  static removeCanvasElement(tag) {
+    if (typeof tag === "string") {
+      tag = [tag];
+    }
+    tag.forEach((t) => {
+      if (_GameWindowManager._children[t]) {
+        _GameWindowManager.app.stage.removeChild(_GameWindowManager._children[t]);
+        delete _GameWindowManager._children[t];
+      }
+    });
+    _GameWindowManager.removeTickersWithoutAssociatedCanvasElement();
+    _GameWindowManager.childrenTagsOrder = _GameWindowManager.childrenTagsOrder.filter((t) => !tag.includes(t));
+  }
+  /**
+   * Get a canvas element by the tag.
+   * @param tag The tag of the canvas element.
+   * @returns The canvas element.
+   * @example
+   * ```typescript
+   * const sprite = GameWindowManager.getCanvasElement<CanvasSprite>("bunny");
+   * ```
+   */
+  static getCanvasElement(tag) {
+    return _GameWindowManager._children[tag];
+  }
+  /**
+   * Check if a DisplayObject is on the canvas.
+   * @param pixiElement The DisplayObject to be checked.
+   * @returns If the DisplayObject is on the canvas.
+   */
+  static canvasElementIsOnCanvas(pixiElement) {
+    return _GameWindowManager.app.stage.children.includes(pixiElement);
+  }
+  /**
+   * Remove all canvas elements from the canvas.
+   * And remove all tickers that are not connected to any canvas element.
+   */
+  static removeCanvasElements() {
+    _GameWindowManager.app.stage.removeChildren();
+    _GameWindowManager._children = {};
+    _GameWindowManager.childrenTagsOrder = [];
+    _GameWindowManager.removeTickers();
+  }
+  /**
+   * Edit the tag of a canvas element.
+   * @param oldTag The old tag of the canvas element.
+   * @param newTag The new tag of the canvas element.
+   */
+  static editTagCanvasElement(oldTag, newTag) {
+    if (_GameWindowManager._children[oldTag]) {
+      _GameWindowManager._children[newTag] = _GameWindowManager._children[oldTag];
+      delete _GameWindowManager._children[oldTag];
+    }
+  }
+  /** Edit Tickers Methods */
+  /**
+   * Currently tickers that are running.
+   */
+  static get currentTickers() {
+    return _GameWindowManager._currentTickers;
+  }
+  /**
+   * The steps of the tickers
+   */
+  static get currentTickersSteps() {
+    return _GameWindowManager._currentTickersSteps;
+  }
+  /**
+   * Run a ticker.
+   * @param canvasEslementTag The tag of the canvas element that will use the ticker.
+   * @param ticker The ticker class to be run.
+   * @param args The arguments to be used in the ticker.
+   * @param duration The time to be used in the ticker. This number is in milliseconds. If it is undefined, the ticker will run forever.
+   * @param priority The priority to be used in the ticker.
+   * @returns 
+   * @example
+   * ```typescript
+   * GameWindowManager.addTicker("alien", new TickerRotate({ speed: 0.2 }))
+   * ```
+   */
+  static addTicker(canvasElementTag, ticker) {
+    let tickerName = ticker.constructor.name;
+    if (typeof canvasElementTag === "string") {
+      canvasElementTag = [canvasElementTag];
+    }
+    let t = geTickerInstanceByClassName(tickerName, ticker.args, ticker.duration, ticker.priority);
+    if (!t) {
+      console.error(`[Pixi'VN] Ticker ${tickerName} not found`);
+      return;
+    }
+    _GameWindowManager.removeAssociationBetweenTickerCanvasElement(canvasElementTag, ticker);
+    let tickerHistory = {
+      fn: () => {
+      },
+      className: tickerName,
+      args: ticker.args,
+      canvasElementTags: canvasElementTag,
+      priority: ticker.priority,
+      duration: ticker.duration
+    };
+    _GameWindowManager.pushTicker(tickerHistory, t);
+    _GameWindowManager.removeTickersWithoutAssociatedCanvasElement();
+    if (ticker.duration) {
+      let timeout = setTimeout(() => {
+        _GameWindowManager.removeTickerTimeoutInfo(timeout);
+        _GameWindowManager.nextTickerStep(canvasElementTag);
+      }, ticker.duration);
+      _GameWindowManager.addTickerTimeoutInfo(canvasElementTag, tickerName, timeout.toString());
+    }
+  }
+  static pushTicker(tickerData, ticker) {
+    _GameWindowManager.removeAssociationBetweenTickerCanvasElement(tickerData.canvasElementTags, tickerData);
+    _GameWindowManager._currentTickers.push(tickerData);
+    tickerData.fn = (t) => {
+      ticker == null ? void 0 : ticker.fn(t, tickerData.args, tickerData.canvasElementTags);
+    };
+    _GameWindowManager.app.ticker.add(tickerData.fn, void 0, tickerData.priority);
+  }
+  /**
+   * Run a sequence of tickers.
+   * @param tag The tag of canvas element that will use the tickers.
+   * @param steps The steps of the tickers.
+   * @returns
+   * @example
+   * ```typescript
+   * GameWindowManager.addTickersSteps("alien", [
+   *     new TickerRotate({ speed: 0.1, clockwise: true }, 2000),
+   *     Pause(500),
+   *     new TickerRotate({ speed: 0.2, clockwise: false }, 2000),
+   *     Repeat,
+   * ])
+   * ```
+   */
+  static addTickersSteps(tag, steps) {
+    if (steps.length == 0) {
+      console.warn("[Pixi'VN] The steps of the tickers is empty");
+      return;
+    }
+    let alredyExists = _GameWindowManager._currentTickersSteps[tag] !== void 0;
+    _GameWindowManager._currentTickersSteps[tag] = {
+      currentStepNumber: 0,
+      steps: steps.map((s) => {
+        if (s === Repeat) {
+          return s;
+        }
+        if (!s.duration) {
+          console.warn("[Pixi'VN] Duration is not defined, so it will be set to 1000");
+          s.duration = 1e3;
+        }
+        if (s.hasOwnProperty("type") && s.type === PauseValueType) {
+          return s;
+        }
+        let tickerName = s.constructor.name;
+        return {
+          ticker: tickerName,
+          args: s.args,
+          duration: s.duration
+        };
+      })
+    };
+    if (!alredyExists) {
+      _GameWindowManager.runTickersSteps(tag);
+    }
+  }
+  static runTickersSteps(tag) {
+    let step = _GameWindowManager._currentTickersSteps[tag].steps[_GameWindowManager._currentTickersSteps[tag].currentStepNumber];
+    if (step === Repeat) {
+      step = _GameWindowManager._currentTickersSteps[tag].steps[0];
+      _GameWindowManager._currentTickersSteps[tag].currentStepNumber = 0;
+      if (step === Repeat) {
+        console.error("[Pixi'VN] TikersSteps has a RepeatType in the first step");
+        return;
+      }
+    }
+    if (step.hasOwnProperty("type") && step.type === PauseValueType) {
+      let timeout = setTimeout(() => {
+        _GameWindowManager.removeTickerTimeoutInfo(timeout);
+        _GameWindowManager.nextTickerStep(tag);
+      }, step.duration);
+      _GameWindowManager.addTickerTimeoutInfo(tag, "steps", timeout.toString());
+      return;
+    }
+    let ticker = geTickerInstanceByClassName(step.ticker, step.args, step.duration, step.priority);
+    if (!ticker) {
+      console.error(`[Pixi'VN] Ticker ${step.ticker} not found`);
+      return;
+    }
+    _GameWindowManager.addTicker(tag, ticker);
+  }
+  static nextTickerStep(tag) {
+    if (typeof tag === "string") {
+      tag = [tag];
+    }
+    tag.forEach((tag2) => {
+      if (_GameWindowManager._currentTickersSteps[tag2]) {
+        let steps = _GameWindowManager._currentTickersSteps[tag2];
+        if (steps.currentStepNumber + 1 < steps.steps.length) {
+          steps.currentStepNumber++;
+          _GameWindowManager._currentTickersSteps[tag2] = steps;
+          _GameWindowManager.runTickersSteps(tag2);
+        } else {
+          delete _GameWindowManager._currentTickersSteps[tag2];
+        }
+      }
+    });
+  }
+  /**
+   * Remove a connection between a canvas element and a ticker.
+   * And remove the ticker if there is no canvas element connected to it.
+   * @param tag The tag of the canvas element that will use the ticker.
+   * @param ticker The ticker class to be removed.
+   * @example
+   * ```typescript
+   * GameWindowManager.removeAssociationBetweenTickerCanvasElement("alien", TickerRotate)
+   * ```
+   */
+  static removeAssociationBetweenTickerCanvasElement(tag, ticker) {
+    let tickerName;
+    if (ticker instanceof TickerBase) {
+      tickerName = ticker.constructor.name;
+    } else {
+      tickerName = ticker.name;
+    }
+    if (typeof tag === "string") {
+      tag = [tag];
+    }
+    _GameWindowManager._currentTickers = _GameWindowManager._currentTickers.map((t) => {
+      if (t.className === tickerName) {
+        t.canvasElementTags = t.canvasElementTags.filter((e) => !tag.includes(e));
+      }
+      return t;
+    });
+    for (let timeout in _GameWindowManager.currentTickersTimeouts) {
+      let t = _GameWindowManager.currentTickersTimeouts[timeout].tags.filter((e) => !tag.includes(e));
+      if (t.length == 0) {
+        _GameWindowManager.removeTickerTimeoutInfo(timeout);
+      } else {
+        _GameWindowManager.currentTickersTimeouts[timeout].tags = t;
+      }
+    }
+    _GameWindowManager.removeTickersWithoutAssociatedCanvasElement();
+  }
+  /**
+   * Remove all tickers that are not connected to any existing canvas element.
+   */
+  static removeTickersWithoutAssociatedCanvasElement() {
+    let currentTickers = _GameWindowManager._currentTickers.map((t) => {
+      t.canvasElementTags = t.canvasElementTags.filter((e) => _GameWindowManager._children[e]);
+      return t;
+    });
+    currentTickers.filter((t) => t.canvasElementTags.length === 0).forEach((t) => {
+      _GameWindowManager.app.ticker.remove(t.fn);
+    });
+    currentTickers = currentTickers.filter((t) => t.canvasElementTags.length > 0);
+    _GameWindowManager._currentTickers = currentTickers;
+    for (let tag in _GameWindowManager._currentTickersSteps) {
+      if (_GameWindowManager._children[tag] === void 0) {
+        delete _GameWindowManager._currentTickersSteps[tag];
+      }
+    }
+  }
+  static addTickerTimeoutInfo(tags, ticker, timeout) {
+    if (typeof tags === "string") {
+      tags = [tags];
+    }
+    _GameWindowManager.currentTickersTimeouts[timeout] = {
+      tags,
+      ticker
+    };
+  }
+  static removeTickerTimeoutInfo(timeout) {
+    if (typeof timeout !== "string") {
+      timeout = timeout.toString();
+    }
+    if (_GameWindowManager.currentTickersTimeouts[timeout]) {
+      delete _GameWindowManager.currentTickersTimeouts[timeout];
+    }
+  }
+  /**
+   * Remove all tickers from the canvas.
+   */
+  static removeTickers() {
+    _GameWindowManager._currentTickersSteps = {};
+    _GameWindowManager._currentTickers.forEach((t) => {
+      _GameWindowManager.app.ticker.remove(t.fn);
+    });
+    _GameWindowManager._currentTickers = [];
+    for (let timeout in _GameWindowManager.currentTickersTimeouts) {
+      _GameWindowManager.removeTickerTimeoutInfo(timeout);
+    }
+  }
+  /**
+   * Clear the canvas and the tickers.
+   */
+  static clear() {
+    _GameWindowManager.removeCanvasElements();
+  }
+  /* Export and Import Methods */
+  /**
+   * Export the canvas and the tickers to a JSON string.
+   * @returns The JSON string.
+   */
+  static exportJson() {
+    return JSON.stringify(this.export());
+  }
+  /**
+   * Export the canvas and the tickers to an object.
+   * @returns The object.
+   */
+  static export() {
+    let currentElements = {};
+    for (let tag in _GameWindowManager._children) {
+      currentElements[tag] = exportCanvasElement(_GameWindowManager._children[tag]);
+    }
+    return {
+      currentTickers: createExportableElement(_GameWindowManager._currentTickers),
+      currentElements: createExportableElement(currentElements),
+      childrenTagsOrder: createExportableElement(_GameWindowManager.childrenTagsOrder)
+    };
+  }
+  /**
+   * Import the canvas and the tickers from a JSON string.
+   * @param dataString The JSON string.
+   */
+  static importJson(dataString) {
+    _GameWindowManager.import(JSON.parse(dataString));
+  }
+  /**
+   * Import the canvas and the tickers from an object.
+   * @param data The object.
+   */
+  static import(data) {
+    _GameWindowManager.clear();
+    try {
+      if (data.hasOwnProperty("childrenTagsOrder") && data.hasOwnProperty("currentElements")) {
+        let currentElements = data["currentElements"];
+        let childrenTagsOrder = data["childrenTagsOrder"];
+        childrenTagsOrder.forEach((tag) => {
+          if (currentElements[tag]) {
+            let element = importCanvasElement(currentElements[tag]);
+            _GameWindowManager.addCanvasElement(tag, element);
+            _GameWindowManager.childrenTagsOrder.push(tag);
+          }
+        });
+      } else {
+        console.error("[Pixi'VN] The data does not have the properties childrenTagsOrder and currentElements");
+        return;
+      }
+      if (data.hasOwnProperty("currentTickers")) {
+        let currentTickers = data["currentTickers"];
+        currentTickers.forEach((t) => {
+          let tags = t.canvasElementTags;
+          let ticker = geTickerInstanceByClassName(t.className, t.args, t.duration, t.priority);
+          if (ticker) {
+            _GameWindowManager.addTicker(tags, ticker);
+          } else {
+            console.error(`[Pixi'VN] Ticker ${t.className} not found`);
+          }
+        });
+      }
+    } catch (e) {
+      console.error("[Pixi'VN] Error importing data", e);
+    }
+  }
+};
+_GameWindowManager._app = void 0;
+_GameWindowManager._isInitialized = false;
+_GameWindowManager._children = {};
+/**
+ * The order of the children tags.
+ */
+_GameWindowManager.childrenTagsOrder = [];
+_GameWindowManager._currentTickers = [];
+_GameWindowManager._currentTickersSteps = {};
+_GameWindowManager.currentTickersTimeouts = {};
+var GameWindowManager = _GameWindowManager;
+
+module.exports = GameWindowManager;
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=WindowManager.js.map