@drincs/pixi-vn 0.6.1 → 0.6.2

package/dist/labels/{EventsTestLabel.mjs → CanvasEventsTestLabel.mjs}

@@ -53,6 +53,13 @@ var __async = (__this, __arguments, generator) => {
 
 // src/classes/CanvasEvent.ts
 var CanvasEvent = class {
+  constructor() {
+    /**
+     * Get the id of the event. This variable is used in the system to get the event by id, {@link getEventInstanceById}
+     */
+    this.id = "event_id_not_set";
+    this.id = this.constructor.prototype.id;
+  }
   fn(_event, _element) {
     throw new Error("[Pixi'VN] The method CanvasEvent.fn() must be overridden");
   }
@@ -80,7 +87,7 @@ var Label = class {
     this._choiseIndex = choiseIndex;
   }
   /**
-   * Get the id of the label
+   * Get the id of the label. This variable is used in the system to get the label by id, {@link getLabelById}
    */
   get id() {
     return this._id;
@@ -169,17 +176,23 @@ function exportCanvasElement(element) {
   return element.memory;
 }
 function importCanvasElement(memory) {
-  let element = getCanvasElementInstanceByClassName(memory.className);
+  let element = getCanvasElementInstanceById(memory.pixivnId);
   if (element) {
     element.memory = memory;
   } else {
-    throw new Error("[Pixi'VN] The element " + memory.className + " could not be created");
+    throw new Error("[Pixi'VN] The element " + memory.pixivnId + " could not be created");
   }
   return element;
 }
 
 // src/classes/canvas/CanvasContainer.ts
+var CANVAS_CONTAINER_ID = "CanvasContainer";
 var CanvasContainer = class extends Container {
+  constructor(options) {
+    super(options);
+    this.pixivnId = CANVAS_CONTAINER_ID;
+    this.pixivnId = this.constructor.prototype.pixivnId;
+  }
   get memory() {
     let memory = getMemoryContainer(this);
     this.children.forEach((child) => {
@@ -195,8 +208,12 @@ var CanvasContainer = class extends Container {
   }
 };
 function getMemoryContainer(element) {
+  let className = "CanvasContainer";
+  if (element.hasOwnProperty("pixivnId")) {
+    className = element.pixivnId;
+  }
   return {
-    className: "CanvasContainer",
+    pixivnId: className,
     elements: [],
     width: element.width,
     height: element.height,
@@ -320,43 +337,47 @@ function eventDecorator(name) {
     if (registeredEvents[name]) {
       console.info(`[Pixi'VN] Event ${name} already exists, it will be overwritten`);
     }
+    target.prototype.id = name;
     registeredEvents[name] = target;
   };
 }
-function getEventTypeByClassName(eventName) {
+function getEventTypeById(eventId) {
   try {
-    let eventType = registeredEvents[eventName];
+    let eventType = registeredEvents[eventId];
     if (!eventType) {
-      console.error(`[Pixi'VN] Event ${eventName} not found`);
+      console.error(`[Pixi'VN] Event ${eventId} not found`);
       return;
     }
     new eventType();
     return eventType;
   } catch (e) {
-    console.error(`[Pixi'VN] Error while getting Event ${eventName}`, e);
+    console.error(`[Pixi'VN] Error while getting Event ${eventId}`, e);
     return;
   }
 }
-function getEventInstanceByClassName(eventName) {
+function getEventInstanceById(eventId) {
   try {
-    let eventType = registeredEvents[eventName];
+    let eventType = registeredEvents[eventId];
     if (!eventType) {
-      console.error(`[Pixi'VN] Event ${eventName} not found`);
+      console.error(`[Pixi'VN] Event ${eventId} not found`);
       return;
     }
     let event = new eventType();
     return event;
   } catch (e) {
-    console.error(`[Pixi'VN] Error while getting Event ${eventName}`, e);
+    console.error(`[Pixi'VN] Error while getting Event ${eventId}`, e);
     return;
   }
 }
 
 // src/classes/canvas/CanvasSprite.ts
+var CANVAS_SPRITE_ID = "CanvasSprite";
 var CanvasSprite = class _CanvasSprite extends Sprite {
-  constructor() {
-    super(...arguments);
+  constructor(options) {
+    super(options);
+    this.pixivnId = CANVAS_SPRITE_ID;
     this._onEvents = {};
+    this.pixivnId = this.constructor.prototype.pixivnId;
   }
   get memory() {
     return getMemorySprite(this);
@@ -397,9 +418,9 @@ var CanvasSprite = class _CanvasSprite extends Sprite {
    * ```
    */
   onEvent(event, eventClass) {
-    let className = eventClass.name;
-    let instance = getEventInstanceByClassName(className);
-    this._onEvents[event] = className;
+    let id = eventClass.prototype.id;
+    let instance = getEventInstanceById(id);
+    this._onEvents[event] = id;
     if (instance) {
       super.on(event, () => {
         instance.fn(event, this);
@@ -428,7 +449,7 @@ var CanvasSprite = class _CanvasSprite extends Sprite {
 function getMemorySprite(element) {
   let temp = getMemoryContainer(element);
   return __spreadProps(__spreadValues({}, temp), {
-    className: "CanvasSprite",
+    pixivnId: element.pixivnId,
     textureImage: getTextureMemory(element.texture),
     anchor: { x: element.anchor.x, y: element.anchor.y },
     roundPixels: element.roundPixels,
@@ -451,8 +472,8 @@ function setMemorySprite(element, memory) {
   }
   memory.roundPixels && (element.roundPixels = memory.roundPixels);
   for (let event in memory.onEvents) {
-    let className = memory.onEvents[event];
-    let instance = getEventTypeByClassName(className);
+    let id = memory.onEvents[event];
+    let instance = getEventTypeById(id);
     if (instance) {
       element.onEvent(event, instance);
     }
@@ -460,9 +481,11 @@ function setMemorySprite(element, memory) {
 }
 
 // src/classes/canvas/CanvasImage.ts
+var CANVAS_IMAGE_ID = "CanvasImage";
 var CanvasImage = class _CanvasImage extends CanvasSprite {
   constructor(options, imageLink) {
     super(options);
+    this.pixivnId = CANVAS_IMAGE_ID;
     this.imageLink = "";
     if (imageLink) {
       this.imageLink = imageLink;
@@ -470,12 +493,13 @@ var CanvasImage = class _CanvasImage extends CanvasSprite {
   }
   get memory() {
     return __spreadProps(__spreadValues({}, getMemorySprite(this)), {
-      className: "CanvasImage",
-      textureImage: { image: this.imageLink }
+      pixivnId: this.pixivnId,
+      imageLink: this.imageLink
     });
   }
   set memory(memory) {
     setMemorySprite(this, memory);
+    this.imageLink = memory.imageLink;
   }
   static from(source, skipCache) {
     let sprite = Sprite.from(source, skipCache);
@@ -503,10 +527,13 @@ var CanvasImage = class _CanvasImage extends CanvasSprite {
     });
   }
 };
+var CANVAS_TEXT_ID = "CanvasText";
 var CanvasText = class extends Text {
-  constructor() {
-    super(...arguments);
+  constructor(options) {
+    super(options);
+    this.pixivnId = CANVAS_TEXT_ID;
     this._onEvents = {};
+    this.pixivnId = this.constructor.prototype.pixivnId;
   }
   get memory() {
     return getMemoryText(this);
@@ -547,9 +574,9 @@ var CanvasText = class extends Text {
    * ```
    */
   onEvent(event, eventClass) {
-    let className = eventClass.name;
-    let instance = getEventInstanceByClassName(className);
-    this._onEvents[event] = className;
+    let id = eventClass.prototype.id;
+    let instance = getEventInstanceById(id);
+    this._onEvents[event] = id;
     if (instance) {
       super.on(event, () => {
         instance.fn(event, this);
@@ -572,7 +599,7 @@ var CanvasText = class extends Text {
 function getMemoryText(element) {
   let temp = getMemoryContainer(element);
   return __spreadProps(__spreadValues({}, temp), {
-    className: "CanvasText",
+    pixivnId: element.pixivnId,
     anchor: { x: element.anchor.x, y: element.anchor.y },
     text: element.text,
     resolution: element.resolution,
@@ -595,8 +622,8 @@ function setMemoryText(element, memory) {
   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);
+    let id = memory.onEvents[event];
+    let instance = getEventTypeById(id);
     if (instance) {
       element.onEvent(event, instance);
     }
@@ -605,32 +632,45 @@ function setMemoryText(element, memory) {
 
 // src/decorators/CanvasElementDecorator.ts
 var registeredCanvasElement = {};
-function getCanvasElementInstanceByClassName(canvasName) {
+function getCanvasElementInstanceById(canvasId) {
   try {
-    let eventType = registeredCanvasElement[canvasName];
+    let eventType = registeredCanvasElement[canvasId];
     if (!eventType) {
-      if (canvasName === "CanvasContainer") {
+      if (canvasId === CANVAS_CONTAINER_ID) {
         eventType = CanvasContainer;
-      } else if (canvasName === "CanvasImage") {
+      } else if (canvasId === CANVAS_IMAGE_ID) {
         eventType = CanvasImage;
-      } else if (canvasName === "CanvasSprite") {
+      } else if (canvasId === CANVAS_SPRITE_ID) {
         eventType = CanvasSprite;
-      } else if (canvasName === "CanvasText") {
+      } else if (canvasId === CANVAS_TEXT_ID) {
         eventType = CanvasText;
       }
     }
     if (!eventType) {
-      console.error(`[Pixi'VN] CanvasElement ${canvasName} not found`);
+      console.error(`[Pixi'VN] CanvasElement ${canvasId} not found`);
       return;
     }
     let canvasElement = new eventType();
     return canvasElement;
   } catch (e) {
-    console.error(`[Pixi'VN] Error while getting CanvasElement ${canvasName}`, e);
+    console.error(`[Pixi'VN] Error while getting CanvasElement ${canvasId}`, e);
     return;
   }
 }
 
+// src/decorators/CharacterDecorator.ts
+var registeredCharacters = {};
+function saveCharacter(character) {
+  if (Array.isArray(character)) {
+    character.forEach((c) => saveCharacter(c));
+    return;
+  }
+  if (registeredCharacters[character.id]) {
+    console.info(`[Pixi'VN] Character id ${character.id} already exists, it will be overwritten`);
+  }
+  registeredCharacters[character.id] = character;
+}
+
 // src/decorators/TickerDecorator.ts
 var registeredTickers = {};
 function tickerDecorator(name) {
@@ -641,41 +681,45 @@ function tickerDecorator(name) {
     if (registeredTickers[name]) {
       console.info(`[Pixi'VN] Ticker ${name} already exists, it will be overwritten`);
     }
+    target.prototype.id = name;
     registeredTickers[name] = target;
   };
 }
-function geTickerInstanceByClassName(tickerName, args, duration, priority) {
+function geTickerInstanceById(tickerId, args, duration, priority) {
   try {
-    let ticker = registeredTickers[tickerName];
+    let ticker = registeredTickers[tickerId];
     if (!ticker) {
-      console.error(`[Pixi'VN] Ticker ${tickerName} not found`);
+      console.error(`[Pixi'VN] Ticker ${tickerId} not found`);
       return;
     }
     return new ticker(args, duration, priority);
   } catch (e) {
-    console.error(`[Pixi'VN] Error while getting Ticker ${tickerName}`, e);
+    console.error(`[Pixi'VN] Error while getting Ticker ${tickerId}`, e);
     return;
   }
 }
 
+// src/types/CloseType.ts
+var Close = "close";
+
 // src/functions/DialogueUtility.ts
 function setDialogue(props) {
   let text = "";
-  let characterId = void 0;
+  let character = void 0;
   let dialogue;
   if (typeof props === "string") {
     text = props;
-    dialogue = new DialogueBaseModel(text, characterId);
+    dialogue = new DialogueBaseModel(text, character);
   } else if (!(props instanceof DialogueBaseModel)) {
     text = props.text;
     if (props.character) {
       if (typeof props.character === "string") {
-        characterId = props.character;
+        character = props.character;
       } else {
-        characterId = props.character.id;
+        character = props.character.id;
       }
     }
-    dialogue = new DialogueBaseModel(text, characterId);
+    dialogue = new DialogueBaseModel(text, character);
   } else {
     dialogue = props;
   }
@@ -685,8 +729,33 @@ function setDialogue(props) {
 function getDialogue() {
   return GameStorageManager.getVariable(GameStorageManager.keysSystem.CURRENT_DIALOGUE_MEMORY_KEY);
 }
-function clearDialogue() {
-  GameStorageManager.setVariable(GameStorageManager.keysSystem.CURRENT_DIALOGUE_MEMORY_KEY, void 0);
+function getChoiceMenuOptions() {
+  let d = GameStorageManager.getVariable(GameStorageManager.keysSystem.CURRENT_MENU_OPTIONS_MEMORY_KEY);
+  if (d) {
+    let options = [];
+    d.forEach((option, index) => {
+      if (option.type === Close) {
+        let itemLabel = newCloseLabel(index);
+        options.push({
+          text: option.text,
+          label: itemLabel,
+          type: Close,
+          closeCurrentLabel: option.closeCurrentLabel,
+          props: {}
+        });
+        return;
+      }
+      let label = getLabelById(option.label);
+      if (label) {
+        let itemLabel = new Label(label.id, label.steps, label.onStepRun, index);
+        options.push(__spreadProps(__spreadValues({}, option), {
+          label: itemLabel
+        }));
+      }
+    });
+    return options;
+  }
+  return void 0;
 }
 
 // src/classes/ticker/TickerBase.ts
@@ -697,9 +766,14 @@ var TickerBase = class {
    * @param priority The priority of the ticker. @default UPDATE_PRIORITY.NORMAL
    */
   constructor(args, duration, priority) {
+    /**
+     * Get the id of the ticker. This variable is used in the system to get the ticker by id, {@link geTickerInstanceById}
+     */
+    this.id = "ticker_id_not_set";
     this.args = args;
     this.duration = duration;
     this.priority = priority;
+    this.id = this.constructor.prototype.id;
   }
   /**
    * The method that will be called every frame.
@@ -922,8 +996,8 @@ var ZoomTicker = class extends TickerBase {
       tagToRemoveAfter2 = [tagToRemoveAfter2];
     }
     let type = args.type || "zoom";
-    let xLimit = Infinity;
-    let yLimit = Infinity;
+    let xLimit = type === "zoom" ? Infinity : 0;
+    let yLimit = type === "zoom" ? Infinity : 0;
     if (args.limit) {
       if (typeof args.limit === "number") {
         xLimit = args.limit;
@@ -962,7 +1036,7 @@ var ZoomTicker = class extends TickerBase {
           if (element.scale.x >= xLimit && element.scale.y >= yLimit) {
             element.scale.x = xLimit;
             element.scale.y = yLimit;
-            GameWindowManager.onEndOfTicker(tag, this, tagToRemoveAfter2, tickerId);
+            this.onEndOfTicker(tag, tickerId, element, tagToRemoveAfter2);
           }
         } else if (type === "unzoom") {
           if (element.scale.x < xLimit) {
@@ -974,17 +1048,20 @@ var ZoomTicker = class extends TickerBase {
           if (element.scale.x <= xLimit && element.scale.y <= yLimit) {
             element.scale.x = xLimit;
             element.scale.y = yLimit;
-            GameWindowManager.onEndOfTicker(tag, this, tagToRemoveAfter2, tickerId);
+            this.onEndOfTicker(tag, tickerId, element, tagToRemoveAfter2);
           }
         }
         if (xSpeed < 1e-5 && ySpeed < 1e-5 && !(args.speedProgression && args.speedProgression.type == "linear" && args.speedProgression.amt != 0)) {
-          GameWindowManager.onEndOfTicker(tag, this, tagToRemoveAfter2, tickerId);
+          this.onEndOfTicker(tag, tickerId, element, tagToRemoveAfter2);
         }
       }
     });
     if (args.speedProgression)
       updateTickerProgression(args, "speed", args.speedProgression);
   }
+  onEndOfTicker(tag, tickerId, _element, tagToRemoveAfter2) {
+    GameWindowManager.onEndOfTicker(tag, this, tagToRemoveAfter2, tickerId);
+  }
 };
 ZoomTicker = __decorateClass([
   tickerDecorator()
@@ -1454,18 +1531,18 @@ var _GameWindowManager = class _GameWindowManager {
    * ```
    */
   static addTicker(canvasElementTag, ticker) {
-    let tickerName = ticker.constructor.name;
+    let tickerId = ticker.id;
     if (typeof canvasElementTag === "string") {
       canvasElementTag = [canvasElementTag];
     }
-    if (!geTickerInstanceByClassName(tickerName, ticker.args, ticker.duration, ticker.priority)) {
-      console.error(`[Pixi'VN] Ticker ${tickerName} not found`);
+    if (!geTickerInstanceById(tickerId, ticker.args, ticker.duration, ticker.priority)) {
+      console.error(`[Pixi'VN] Ticker ${tickerId} not found`);
       return;
     }
     let tickerHistory = {
       fn: () => {
       },
-      className: tickerName,
+      id: tickerId,
       args: createExportableElement(ticker.args),
       canvasElementTags: canvasElementTag,
       priority: ticker.priority,
@@ -1481,11 +1558,11 @@ var _GameWindowManager = class _GameWindowManager {
           _GameWindowManager.removeTicker(id);
         }
       }, ticker.duration * 1e3);
-      _GameWindowManager.addTickerTimeoutInfo(canvasElementTag, tickerName, timeout.toString(), true);
+      _GameWindowManager.addTickerTimeoutInfo(canvasElementTag, tickerId, timeout.toString(), true);
     }
   }
   static pushTicker(id, tickerData, ticker) {
-    _GameWindowManager.removeAssociationBetweenTickerCanvasElement(tickerData.canvasElementTags, tickerData);
+    _GameWindowManager.removeAssociationBetweenTickerCanvasElement(tickerData.canvasElementTags, ticker);
     _GameWindowManager._currentTickers[id] = tickerData;
     tickerData.fn = (t) => {
       let data = _GameWindowManager._currentTickers[id];
@@ -1526,9 +1603,9 @@ var _GameWindowManager = class _GameWindowManager {
         if (step.hasOwnProperty("type") && step.type === "pause") {
           return step;
         }
-        let tickerName = step.constructor.name;
+        let tickerId = step.id;
         return {
-          ticker: tickerName,
+          ticker: tickerId,
           args: createExportableElement(step.args),
           duration: step.duration
         };
@@ -1566,16 +1643,16 @@ var _GameWindowManager = class _GameWindowManager {
       _GameWindowManager.addTickerTimeoutInfo(tag, "steps", timeout.toString(), false);
       return;
     }
-    let ticker = geTickerInstanceByClassName(step.ticker, step.args, step.duration, step.priority);
+    let ticker = geTickerInstanceById(step.ticker, step.args, step.duration, step.priority);
     if (!ticker) {
       console.error(`[Pixi'VN] Ticker ${step.ticker} not found`);
       return;
     }
-    let tickerName = ticker.constructor.name;
+    let tickerName = ticker.id;
     let tickerHistory = {
       fn: () => {
       },
-      className: tickerName,
+      id: tickerName,
       args: createExportableElement(ticker.args),
       canvasElementTags: [tag],
       priority: ticker.priority,
@@ -1632,26 +1709,26 @@ var _GameWindowManager = class _GameWindowManager {
    * ```
    */
   static removeAssociationBetweenTickerCanvasElement(tags, ticker) {
-    let tickerName;
+    let tickerId;
     if (typeof ticker === "string") {
-      tickerName = ticker;
+      tickerId = ticker;
     } else if (ticker instanceof TickerBase) {
-      tickerName = ticker.constructor.name;
+      tickerId = ticker.id;
     } else {
-      tickerName = ticker.name;
+      tickerId = ticker.prototype.id;
     }
     if (typeof tags === "string") {
       tags = [tags];
     }
     for (let id in _GameWindowManager._currentTickers) {
       let ticker2 = _GameWindowManager._currentTickers[id];
-      if (ticker2.className === tickerName) {
+      if (ticker2.id === tickerId) {
         _GameWindowManager._currentTickers[id].canvasElementTags = ticker2.canvasElementTags.filter((e) => !tags.includes(e));
       }
     }
     for (let timeout in _GameWindowManager._currentTickersTimeouts) {
       let TickerTimeout = _GameWindowManager._currentTickersTimeouts[timeout];
-      if (TickerTimeout.ticker === tickerName && TickerTimeout.canBeDeletedBeforeEnd) {
+      if (TickerTimeout.ticker === tickerId && TickerTimeout.canBeDeletedBeforeEnd) {
         _GameWindowManager._currentTickersTimeouts[timeout].tags = TickerTimeout.tags.filter((t) => !tags.includes(t));
       }
     }
@@ -1837,11 +1914,11 @@ var _GameWindowManager = class _GameWindowManager {
         for (let id in currentTickers) {
           let t = currentTickers[id];
           let tags = t.canvasElementTags;
-          let ticker = geTickerInstanceByClassName(t.className, t.args, t.duration, t.priority);
+          let ticker = geTickerInstanceById(t.id, t.args, t.duration, t.priority);
           if (ticker) {
             _GameWindowManager.addTicker(tags, ticker);
           } else {
-            console.error(`[Pixi'VN] Ticker ${t.className} not found`);
+            console.error(`[Pixi'VN] Ticker ${t.id} not found`);
           }
         }
       }
@@ -2042,6 +2119,13 @@ var _GameStepManager = class _GameStepManager {
     _GameStepManager._openedLabels = _GameStepManager.originalStepData.openedLabels;
   }
   /* Run Methods */
+  static get canGoNext() {
+    let options = getChoiceMenuOptions();
+    if (options && options.length > 0) {
+      return false;
+    }
+    return true;
+  }
   /**
    * Execute the next step and add it to the history.
    * @param props The props to pass to the step.
@@ -2051,7 +2135,7 @@ var _GameStepManager = class _GameStepManager {
    * ```typescript
    *     function nextOnClick() {
    *     setLoading(true)
-   *     GameStepManager.runNextStep(yourParams)
+   *     GameStepManager.goNext(yourParams)
    *         .then((result) => {
    *             setUpdate((p) => p + 1)
    *             setLoading(false)
@@ -2066,8 +2150,12 @@ var _GameStepManager = class _GameStepManager {
    * }
    * ```
    */
-  static runNextStep(props, choiseMade) {
+  static goNext(props, choiseMade) {
     return __async(this, null, function* () {
+      if (!_GameStepManager.canGoNext) {
+        console.warn("[Pixi'VN] The player must make a choice");
+        return;
+      }
       _GameStepManager.increaseCurrentStepIndex();
       return yield _GameStepManager.runCurrentStep(props, choiseMade);
     });
@@ -2098,7 +2186,7 @@ var _GameStepManager = class _GameStepManager {
           return result;
         } else if (_GameStepManager.openedLabels.length > 1) {
           _GameStepManager.closeCurrentLabel();
-          return yield _GameStepManager.runNextStep(props, choiseMade);
+          return yield _GameStepManager.goNext(props, choiseMade);
         } else {
           _GameStepManager.restorLastLabelList();
           console.error("[Pixi'VN] The end of the game is not managed, so the game is blocked. Read this documentation to know how to manage the end of the game: https://pixi-vn.web.app/start/labels.html#how-manage-the-end-of-the-game");
@@ -2246,7 +2334,7 @@ var _GameStepManager = class _GameStepManager {
       if (choice.closeCurrentLabel) {
         _GameStepManager.closeCurrentLabel();
       }
-      return _GameStepManager.runNextStep(props, choiseMade);
+      return _GameStepManager.goNext(props, choiseMade);
     });
   }
   /* After Update Methods */
@@ -2441,6 +2529,120 @@ _GameStepManager._openedLabels = [];
 _GameStepManager._originalStepData = void 0;
 var GameStepManager = _GameStepManager;
 
+// src/classes/StoredClassModel.ts
+var StoredClassModel = class {
+  /**
+   * @param categoryId The id of the category. For example if you are storing a character class, you can use "characters" as categoryId. so all instances of the character class will be stored in the "characters" category.
+   * @param id The id of instance of the class. This id must be unique for the category.
+   */
+  constructor(categoryId, id) {
+    this.categoryId = categoryId;
+    this._id = id;
+  }
+  /**
+   * Is id of the stored class. is unique for this class.
+   */
+  get id() {
+    return this._id;
+  }
+  /**
+   * Update a property in the storage.
+   * @param propertyName The name of the property to set.
+   * @param value The value to set. If is undefined, the property will be removed from the storage.
+   */
+  setStorageProperty(propertyName, value) {
+    let storage = GameStorageManager.getVariable(this.categoryId);
+    if (!storage) {
+      storage = {};
+    }
+    if (!storage.hasOwnProperty(this.id)) {
+      storage[this.id] = {};
+    }
+    if (value === void 0 || value === null) {
+      if (storage[this.id].hasOwnProperty(propertyName)) {
+        delete storage[this.id][propertyName];
+      }
+    } else {
+      storage[this.id] = __spreadProps(__spreadValues({}, storage[this.id]), { [propertyName]: value });
+    }
+    if (Object.keys(storage[this.id]).length === 0) {
+      delete storage[this.id];
+    }
+    GameStorageManager.setVariable(this.categoryId, storage);
+  }
+  /**
+   * Get a property from the storage.
+   * @param propertyName The name of the property to get.
+   * @returns The value of the property. If the property is not found, returns undefined.
+   */
+  getStorageProperty(propertyName) {
+    let storage = GameStorageManager.getVariable(this.categoryId);
+    if (storage && storage.hasOwnProperty(this.id) && storage[this.id].hasOwnProperty(propertyName)) {
+      return storage[this.id][propertyName];
+    }
+    return void 0;
+  }
+};
+
+// src/classes/CharacterBaseModel.ts
+var CharacterBaseModel2 = class extends StoredClassModel {
+  /**
+   * @param id The id of the character.
+   * @param props The properties of the character.
+   */
+  constructor(id, props) {
+    super(GameStorageManager.keysSystem.CHARACTER_CATEGORY_KEY, id);
+    this.defaultName = "";
+    this.defaultName = props.name;
+    this.defaultSurname = props.surname;
+    this.defaultAge = props.age;
+    this._icon = props.icon;
+    this._color = props.color;
+  }
+  /***
+   * The name of the character.
+   * If you set undefined, it will return the default name.
+   */
+  get name() {
+    return this.getStorageProperty("name") || this.defaultName;
+  }
+  set name(value) {
+    this.setStorageProperty("name", value);
+  }
+  /**
+   * The surname of the character.
+   * If you set undefined, it will return the default surname.
+   */
+  get surname() {
+    return this.getStorageProperty("surname") || this.defaultSurname;
+  }
+  set surname(value) {
+    this.setStorageProperty("surname", value);
+  }
+  /**
+   * The age of the character.
+   * If you set undefined, it will return the default age.
+   */
+  get age() {
+    return this.getStorageProperty("age") || this.defaultAge;
+  }
+  set age(value) {
+    this.setStorageProperty("age", value);
+  }
+  /**
+   * The icon of the character.
+   */
+  get icon() {
+    return this._icon;
+  }
+  /**
+   * The color of the character.
+   */
+  get color() {
+    return this._color;
+  }
+};
+
 // src/classes/DialogueBaseModel.ts
 var DialogueBaseModel = class {
   /**
@@ -2460,15 +2662,15 @@ var DialogueBaseModel = class {
     if (typeof text === "string") {
       this.text = text;
       if (typeof character === "string") {
-        this.characterId = character;
+        this.character = character;
       } else {
-        this.characterId = character == null ? void 0 : character.id;
+        this.character = character == null ? void 0 : character.id;
       }
       this.oltherParams = oltherParams;
     } else {
       this.text = text.text;
-      if (text.characterId) {
-        this.characterId = text.characterId;
+      if (text.character) {
+        this.character = text.character;
       }
       this.oltherParams = text.oltherParams || {};
     }
@@ -2481,14 +2683,25 @@ var DialogueBaseModel = class {
   export() {
     return {
       text: this.text,
-      characterId: this.characterId,
+      character: this.character,
       oltherParams: this.oltherParams
     };
   }
 };
 
-// src/labels/EventsTestLabel.ts
-var EventTest = class extends CanvasEvent {
+// src/labels/TestConstant.ts
+var juliette = new CharacterBaseModel2("___pixivn_juliette___", {
+  name: "Juliette",
+  age: 25,
+  icon: "https://firebasestorage.googleapis.com/v0/b/pixi-vn.appspot.com/o/public%2Fcharacters%2Fjuliette-square.webp?alt=media&token=5856ae7b-d99e-4563-86ec-cbc48cc9c6b4",
+  color: "#ac0086"
+});
+saveCharacter(juliette);
+var bunnyImage = "https://pixijs.com/assets/bunny.png";
+var bunnyName = `Bunny`;
+
+// src/labels/CanvasEventsTestLabel.ts
+var EventTest1 = class extends CanvasEvent {
   fn(event, sprite) {
     if (event === "pointerdown") {
       sprite.scale.x *= 1.25;
@@ -2496,9 +2709,9 @@ var EventTest = class extends CanvasEvent {
     }
   }
 };
-EventTest = __decorateClass([
-  eventDecorator()
-], EventTest);
+EventTest1 = __decorateClass([
+  eventDecorator("___pixi_vn_canvas_events_test_event1___")
+], EventTest1);
 var EventTest2 = class extends CanvasEvent {
   constructor() {
     super(...arguments);
@@ -2534,28 +2747,37 @@ var EventTest2 = class extends CanvasEvent {
   }
 };
 EventTest2 = __decorateClass([
-  eventDecorator()
+  eventDecorator("___pixi_vn_canvas_events_test_event2___")
 ], EventTest2);
-var eventsTestLabel = newLabel(
-  "EventsTestLabel",
+var CANVAS_EVENTS_TEST_LABEL = "___pixi_vn_canvas_events_test___";
+var canvasEventsTestLabel = newLabel(
+  CANVAS_EVENTS_TEST_LABEL,
   [
+    () => setDialogue({
+      character: juliette,
+      text: "This is the test of clickable elements in a canvas."
+    }),
     () => __async(void 0, null, function* () {
-      const texture = yield Assets.load("https://pixijs.com/assets/bunny.png");
+      setDialogue({
+        character: juliette,
+        text: `This is my friend, ${bunnyName}. It's small now, but if you try to click on it it will get bigger and bigger. (This example is from the official [PixiJS website](https://pixijs.com/8.x/examples/events/click).)`
+      });
+      const texture = yield Assets.load(bunnyImage);
       const sprite = CanvasSprite.from(texture);
       sprite.anchor.set(0.5);
       sprite.x = GameWindowManager.screen.width / 2;
       sprite.y = GameWindowManager.screen.height / 2;
       sprite.eventMode = "static";
       sprite.cursor = "pointer";
-      sprite.onEvent("pointerdown", EventTest);
+      sprite.onEvent("pointerdown", EventTest1);
       GameWindowManager.addCanvasElement("bunny", sprite);
-      setDialogue("This is the test of clickable elements in a canvas. To make it possible to save the added events in a canvas element, use CanvasEvents.");
     }),
-    () => setDialogue("To make the events in the canvas work. by default all elements in the gliaphic html interface are: pointerEvents = 'none'. to enable clicking on html elements, you will need to add the css pointerEvents = 'auto'"),
-    () => setDialogue("For performance reasons it is better to add the buttons in the html interface and not in the canvas."),
     () => __async(void 0, null, function* () {
-      clearDialogue();
       GameWindowManager.clear();
+      setDialogue({
+        character: juliette,
+        text: `This is the test of buttons in a canvas. (This example is from the official [PixiJS website](https://pixijs.com/8.x/examples/events/interactivity).)`
+      });
       yield Assets.load([
         "https://pixijs.com/assets/bg_button.jpg",
         "https://pixijs.com/assets/button.png",
@@ -2589,6 +2811,6 @@ var eventsTestLabel = newLabel(
   ]
 );
 
-export { EventTest, EventTest2, eventsTestLabel };
+export { EventTest1, EventTest2, canvasEventsTestLabel };
 //# sourceMappingURL=out.js.map
-//# sourceMappingURL=EventsTestLabel.mjs.map
+//# sourceMappingURL=CanvasEventsTestLabel.mjs.map