@drincs/pixi-vn 0.6.2 → 0.6.3

package/dist/labels/StartLabel.mjs

@@ -1,6 +1,6 @@
 import { diff } from 'deep-diff';
 import sha1 from 'crypto-js/sha1';
-import { Sprite, Container, Texture, Rectangle, Application, Assets, Text } from 'pixi.js';
+import { Sprite, Container, Texture, Rectangle, Application, Assets, FillGradient, Color, TextStyle, Text } from 'pixi.js';
 
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -191,7 +191,7 @@ var CanvasContainer = class extends Container {
   constructor(options) {
     super(options);
     this.pixivnId = CANVAS_CONTAINER_ID;
-    this.pixivnId = this.constructor.prototype.pixivnId;
+    this.pixivnId = this.constructor.prototype.pixivnId || CANVAS_CONTAINER_ID;
   }
   get memory() {
     let memory = getMemoryContainer(this);
@@ -229,7 +229,6 @@ function getMemoryContainer(element) {
     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,
@@ -267,7 +266,6 @@ function setMemoryContainer(element, memory) {
   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);
@@ -298,17 +296,19 @@ function getTexture(imageUrl) {
     });
   });
 }
-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";
+function getFillGradientFillPattern(prop, propName) {
+  if (!(prop instanceof Object)) {
+    return prop;
   }
+  console.warn(`[Pixi'VN] CanvasText.style.${propName} is a FillGradient or FillPattern, this is not supported yet.`, prop);
+  return void 0;
+}
+function getTextStyle(style) {
   return {
     align: style.align,
     breakWords: style.breakWords,
     dropShadow: style.dropShadow,
-    fill,
+    fill: getFillGradientFillPattern(style.stroke, "fill"),
     fontFamily: style.fontFamily,
     fontSize: style.fontSize,
     fontStyle: style.fontStyle,
@@ -318,7 +318,7 @@ function getTextStyle(style) {
     letterSpacing: style.letterSpacing,
     lineHeight: style.lineHeight,
     padding: style.padding,
-    stroke: style.stroke,
+    stroke: getFillGradientFillPattern(style.stroke, "stroke"),
     textBaseline: style.textBaseline,
     trim: style.trim,
     whiteSpace: style.whiteSpace,
@@ -377,7 +377,7 @@ var CanvasSprite = class _CanvasSprite extends Sprite {
     super(options);
     this.pixivnId = CANVAS_SPRITE_ID;
     this._onEvents = {};
-    this.pixivnId = this.constructor.prototype.pixivnId;
+    this.pixivnId = this.constructor.prototype.pixivnId || CANVAS_SPRITE_ID;
   }
   get memory() {
     return getMemorySprite(this);
@@ -533,7 +533,7 @@ var CanvasText = class extends Text {
     super(options);
     this.pixivnId = CANVAS_TEXT_ID;
     this._onEvents = {};
-    this.pixivnId = this.constructor.prototype.pixivnId;
+    this.pixivnId = this.constructor.prototype.pixivnId || CANVAS_TEXT_ID;
   }
   get memory() {
     return getMemoryText(this);
@@ -634,9 +634,6 @@ function setMemoryText(element, memory) {
 var registeredCanvasElement = {};
 function canvasElementDecorator(name) {
   return function(target) {
-    if (!name) {
-      name = target.name;
-    }
     if (registeredCanvasElement[name]) {
       console.warn(`[Pixi'VN] CanvasElement ${name} already registered`);
     }
@@ -1196,6 +1193,9 @@ function loadImage(canvasImages) {
     });
   });
 }
+function removeCanvasElement(tag) {
+  GameWindowManager.removeCanvasElement(tag);
+}
 function showWithDissolveTransition(_0, _1) {
   return __async(this, arguments, function* (tag, image, props = {}, priority) {
     var _a;
@@ -1618,7 +1618,7 @@ var _GameWindowManager = class _GameWindowManager {
         height
       }, options)).then(() => {
         _GameWindowManager._isInitialized = true;
-        this.addCanvasIntoElement(element);
+        this.addCanvasIntoHTMLElement(element);
         window.addEventListener("resize", _GameWindowManager.resize);
         _GameWindowManager.resize();
         asciiArtLog();
@@ -1629,7 +1629,7 @@ var _GameWindowManager = class _GameWindowManager {
    * 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) {
+  static addCanvasIntoHTMLElement(element) {
     if (_GameWindowManager.isInitialized) {
       element.appendChild(_GameWindowManager.app.canvas);
     } else {
@@ -3052,7 +3052,98 @@ var skullyName = `<span style="color:red">Skully</span>`;
 var bunnyImage = "https://pixijs.com/assets/bunny.png";
 var bunnyName = `Bunny`;
 
-// src/labels/CanvasEventsTestLabel.ts
+// src/labels/BaseCanvasElementTestLabel.ts
+var BASE_CANVAS_ELEMENT_LABEL = "___pixi_vn_base_canvas_element_label___";
+var baseCanvasElementTestLabel = newLabel(
+  BASE_CANVAS_ELEMENT_LABEL,
+  [
+    () => __async(void 0, null, function* () {
+      let number = 25;
+      setDialogue({
+        character: juliette,
+        text: `Here's what's going to happen: I'm going to create ${number} bunnies (CanvasSprites) and put them in a CanvasContainer.`
+      });
+      const container = new CanvasContainer();
+      GameWindowManager.addCanvasElement("container", container);
+      const texture = yield Assets.load(bunnyImage);
+      for (let i = 0; i < number; i++) {
+        const bunny = new CanvasSprite(texture);
+        bunny.x = i % 5 * 40;
+        bunny.y = Math.floor(i / 5) * 40;
+        container.addChild(bunny);
+      }
+      container.x = GameWindowManager.screen.width / 2;
+      container.y = GameWindowManager.screen.height / 2;
+      container.pivot.x = container.width / 2;
+      container.pivot.y = container.height / 2;
+      GameWindowManager.addTicker("container", new RotateTicker({ speed: 1 }));
+    }),
+    () => __async(void 0, null, function* () {
+      removeCanvasElement("container");
+      setDialogue({
+        character: juliette,
+        text: `Here's what's going to happen: I'm going to create some text elements with different styles and put them on the stage.
+But it will generate a warn message, because the FillGradient or FillPattern has not yet been supported by the Pixi\u2019VN ( you can see the status of the issue here: [#76](https://github.com/DRincs-Productions/pixi-vn/issues/76)).`
+      });
+      const basicText = new CanvasText({ text: "Basic text in pixi" });
+      basicText.x = 50;
+      basicText.y = 100;
+      GameWindowManager.addCanvasElement("basicText", basicText);
+      const fill = new FillGradient(0, 0, 0, 36 * 1.7 * 7);
+      const colors = [16777215, 65433].map((color) => Color.shared.setValue(color).toNumber());
+      colors.forEach((number, index) => {
+        const ratio = index / colors.length;
+        fill.addColorStop(ratio, number);
+      });
+      const style = new TextStyle({
+        fontFamily: "Arial",
+        fontSize: 36,
+        fontStyle: "italic",
+        fontWeight: "bold",
+        fill: { fill },
+        stroke: { color: "#4a1850", width: 5, join: "round" },
+        dropShadow: {
+          color: "#000000",
+          blur: 4,
+          angle: Math.PI / 6,
+          distance: 6
+        },
+        wordWrap: true,
+        wordWrapWidth: 440
+      });
+      const richText = new CanvasText({
+        text: "Rich text with a lot of options and across multiple lines",
+        style
+      });
+      richText.x = 50;
+      richText.y = 220;
+      GameWindowManager.addCanvasElement("richText", richText);
+      const skewStyle = new TextStyle({
+        fontFamily: "Arial",
+        dropShadow: {
+          alpha: 0.8,
+          angle: 2.1,
+          blur: 4,
+          color: "0x111111",
+          distance: 10
+        },
+        fill: "#ffffff",
+        stroke: { color: "#004620", width: 12, join: "round" },
+        fontSize: 60,
+        fontWeight: "lighter"
+      });
+      const skewText = new CanvasText({
+        text: "SKEW IS COOL",
+        style: skewStyle
+      });
+      skewText.skew.set(0.65, -0.3);
+      skewText.anchor.set(0.5, 0.5);
+      skewText.x = 300;
+      skewText.y = 480;
+      GameWindowManager.addCanvasElement("skewText", skewText);
+    })
+  ]
+);
 var EventTest1 = class extends CanvasEvent {
   fn(event, sprite) {
     if (event === "pointerdown") {
@@ -3706,6 +3797,15 @@ var pixivnTestStartLabel = newLabel(
     (props) => GameStepManager.jumpLabel(pixivnTestStartLabel2, props)
   ]
 );
+var openWiki = newLabel(
+  "___pixi_vn_open_wiki___",
+  [
+    (props) => {
+      window.open("https://pixi-vn.web.app/");
+      GameStepManager.goNext(props);
+    }
+  ]
+);
 var RESTART_TEST_LABEL = "___pixi_vn_restart_test_label___";
 var pixivnTestStartLabel2 = newLabel(
   RESTART_TEST_LABEL,
@@ -3714,8 +3814,10 @@ var pixivnTestStartLabel2 = newLabel(
       GameWindowManager.clear();
       setDialogue({ character: juliette, text: "Which test would you like to start with?" });
       setChoiceMenuOptions([
+        new ChoiceMenuOption("Open Pixi\u2019VN Wiki", openWiki),
         new ChoiceMenuOption("Images, Transitions and Animations Test", imagesAnimationsTest),
         new ChoiceMenuOption("Canvas Events Test Label", canvasEventsTestLabel),
+        new ChoiceMenuOption("Base Canvas Element Test", baseCanvasElementTestLabel),
         new ChoiceMenuOption("Custom Ticker Canvas Element Test", customTickerCanvasElementTestLabel),
         new ChoiceMenuOption("Markdown Test", markdownTest)
       ]);
@@ -3725,5 +3827,5 @@ var pixivnTestStartLabel2 = newLabel(
 );
 
 export { pixivnTestStartLabel, pixivnTestStartLabel2 };
-//# sourceMappingURL=out.js.map
+//# sourceMappingURL=StartLabel.mjs.map
 //# sourceMappingURL=StartLabel.mjs.map