canvasengine 2.0.0-beta.1 → 2.0.0-beta.3

package/dist/index.js

@@ -841,7 +841,6 @@ var KeyboardControls = class extends Directive {
 registerDirective("controls", KeyboardControls);
 
 // src/directives/Scheduler.ts
-import Stats from "stats.js";
 var Scheduler = class extends Directive {
   constructor() {
     super(...arguments);
@@ -852,7 +851,6 @@ var Scheduler = class extends Directive {
     this.requestedDelay = 0;
     this.lastTimestamp = 0;
     this._stop = false;
-    this.stats = new Stats();
   }
   onInit(element) {
     this.tick = element.propObservables?.tick;
@@ -867,20 +865,15 @@ var Scheduler = class extends Directive {
     this.lastTimestamp = this.lastTimestamp || this.timestamp;
     this.deltaTime = preciseNow() - this.timestamp;
     this.timestamp = timestamp;
-    this.stats.begin();
     this.tick.set({
       timestamp: this.timestamp,
       deltaTime: this.deltaTime,
       frame: this.frame,
       deltaRatio: ~~this.deltaTime / ~~fps2ms(this.fps)
     });
-    this.stats.end();
     this.lastTimestamp = this.timestamp;
     this.frame++;
   }
-  showPanel() {
-    this.stats.showPanel(0);
-  }
   /**
    * start the schedule
    * @return {Scheduler} returns this scheduler instance
@@ -889,7 +882,6 @@ var Scheduler = class extends Directive {
     if (options.maxFps) this.maxFps = options.maxFps;
     if (options.fps) this.fps = options.fps;
     if (options.delay) this.requestedDelay = options.delay;
-    this.showPanel();
     const requestAnimationFrame = (fn) => {
       if (isBrowser()) {
         window.requestAnimationFrame(fn.bind(this));
@@ -2125,8 +2117,8 @@ import {
 // src/engine/animation.ts
 import { effect as effect6, signal as signal4 } from "@signe/reactive";
 import { animate as animatePopmotion } from "popmotion";
-function isAnimatedSignal(signal8) {
-  return signal8.animatedState !== void 0;
+function isAnimatedSignal(signal6) {
+  return signal6.animatedState !== void 0;
 }
 function animatedSignal(initialValue, options = {}) {
   const state = {
@@ -2417,14 +2409,13 @@ var CanvasSprite = class extends DisplayObject(PixiSprite) {
     let frame = sprites[this.frameIndex];
     const nextFrame = sprites[this.frameIndex + 1];
     for (let _sprite of this.currentAnimationContainer.children) {
-      let applyTransformValue2 = function(prop, alias) {
+      let applyTransformValue = function(prop, alias) {
         const optionProp = alias || prop;
         const val = getVal(optionProp);
         if (val !== void 0) {
           self[prop] = val;
         }
       };
-      var applyTransformValue = applyTransformValue2;
       const sprite = _sprite;
       if (!frame || frame.frameY == void 0 || frame.frameX == void 0) {
         continue;
@@ -2464,12 +2455,12 @@ var CanvasSprite = class extends DisplayObject(PixiSprite) {
       applyTransform("scale");
       applyTransform("skew");
       applyTransform("pivot");
-      applyTransformValue2("alpha", "opacity");
-      applyTransformValue2("x");
-      applyTransformValue2("y");
-      applyTransformValue2("angle");
-      applyTransformValue2("rotation");
-      applyTransformValue2("visible");
+      applyTransformValue("alpha", "opacity");
+      applyTransformValue("x");
+      applyTransformValue("y");
+      applyTransformValue("angle");
+      applyTransformValue("rotation");
+      applyTransformValue("visible");
     }
     if (!nextFrame) {
       this.time = 0;
@@ -2627,10 +2618,6 @@ function Text(props) {
   return createComponent("Text", props);
 }
 
-// src/components/Tilemap/index.ts
-import { TiledLayerType, TiledParserFile } from "@rpgjs/tiled";
-import { effect as effect9, signal as signal6 } from "@signe/reactive";
-
 // src/components/TilingSprite.ts
 import { TilingSprite as PixiTilingSprite, Texture as Texture3 } from "pixi.js";
 var CanvasTilingSprite = class extends DisplayObject(PixiTilingSprite) {
@@ -2658,298 +2645,9 @@ function TilingSprite(props) {
   return createComponent("TilingSprite", props);
 }
 
-// src/components/Tilemap/TileLayer.ts
-import { CompositeTilemap, POINT_STRUCT_SIZE, settings } from "@pixi/tilemap";
-import { Layer } from "@rpgjs/tiled";
-
-// src/components/Tilemap/Tile.ts
-import { AnimatedSprite, groupD8 } from "pixi.js";
-var Tile = class _Tile extends AnimatedSprite {
-  constructor(tile, tileSet) {
-    super(_Tile.getTextures(tile, tileSet));
-    this.tile = tile;
-    this.tileSet = tileSet;
-    this.animations = [];
-    this._x = 0;
-    this._y = 0;
-    this.properties = {};
-    this.animations = tile.animations || [];
-    this.properties = tile.properties;
-    this.textures = _Tile.getTextures(tile, tileSet);
-    this.texture = this.textures[0];
-    this.flip();
-  }
-  static getTextures(tile, tileSet) {
-    const textures = [];
-    if (tile.animations && tile.animations.length) {
-      tile.animations.forEach((frame) => {
-        textures.push(tileSet.textures[frame.tileid]);
-      });
-    } else {
-      textures.push(tileSet.textures[tile.gid - tileSet.firstgid]);
-    }
-    return textures;
-  }
-  get gid() {
-    return this.tile.gid;
-  }
-  setAnimation(frame) {
-    const size = this.animations.length;
-    if (size > 1) {
-      const offset = (this.animations[1].tileid - this.animations[0].tileid) * this.width;
-      frame.tileAnimX(offset, size);
-    }
-  }
-  flip() {
-    let symmetry;
-    let i = 0;
-    const add = (symmetrySecond) => {
-      i++;
-      if (symmetry) symmetry = groupD8.add(symmetry, symmetrySecond);
-      else symmetry = symmetrySecond;
-    };
-    if (this.tile.horizontalFlip) {
-      add(groupD8.MIRROR_HORIZONTAL);
-    }
-    if (this.tile.verticalFlip) {
-      add(groupD8.MIRROR_VERTICAL);
-    }
-    if (this.tile.diagonalFlip) {
-      if (i % 2 == 0) {
-        add(groupD8.MAIN_DIAGONAL);
-      } else {
-        add(groupD8.REVERSE_DIAGONAL);
-      }
-    }
-  }
-};
-
-// src/components/Tilemap/TileLayer.ts
-settings.use32bitIndex = true;
-var CanvasTileLayer = class _CanvasTileLayer extends DisplayObject(CompositeTilemap) {
-  constructor() {
-    super(...arguments);
-    this._tiles = {};
-  }
-  static findTileSet(gid, tileSets) {
-    let tileset;
-    for (let i = tileSets.length - 1; i >= 0; i--) {
-      tileset = tileSets[i];
-      if (tileset.firstgid && tileset.firstgid <= gid) {
-        break;
-      }
-    }
-    return tileset;
-  }
-  /** @internal */
-  createTile(x, y, options = {}) {
-    const { real, filter } = options;
-    const { tilewidth, tileheight, width } = this._layer;
-    if (real) {
-      x = Math.floor(x / tilewidth);
-      y = Math.floor(y / tileheight);
-    }
-    const i = x + y * width;
-    const tiledTile = this._layer.getTileByIndex(i);
-    if (!tiledTile || tiledTile && tiledTile.gid == 0) return;
-    const tileset = _CanvasTileLayer.findTileSet(
-      tiledTile.gid,
-      this.tileSets
-    );
-    if (!tileset) return;
-    const tile = new Tile(
-      tiledTile,
-      tileset
-    );
-    tile.x = x * tilewidth;
-    tile.y = y * tileheight + (tileheight - tile.texture.height);
-    tile._x = x;
-    tile._y = y;
-    if (tileset.tileoffset) {
-      tile.x += tileset.tileoffset.x ?? 0;
-      tile.y += tileset.tileoffset.y ?? 0;
-    }
-    if (filter) {
-      const ret = filter(tile);
-      if (!ret) return;
-    }
-    return tile;
-  }
-  /** @internal */
-  changeTile(x, y) {
-    const { tilewidth, tileheight } = this._layer;
-    x = Math.floor(x / tilewidth);
-    y = Math.floor(y / tileheight);
-    const oldTile = this._tiles[x + ";" + y];
-    const newTile = this.createTile(x, y);
-    if (!oldTile && newTile) {
-      this._addFrame(newTile, x, y);
-    } else {
-      if (newTile) {
-        const bufComposite = new CompositeTilemap();
-        const frame = bufComposite.tile(newTile.texture, newTile.x, newTile.y);
-        newTile.setAnimation(frame);
-        this._tiles[x + ";" + y] = newTile;
-        const pointsBufComposite = bufComposite.children[0].pointsBuf;
-        [0, 1, 4, 6, 7, 8].forEach((i) => {
-          if (this.pointsBuf) this.pointsBuf[oldTile.pointsBufIndex + i] = pointsBufComposite[i];
-        });
-        this.children[0].modificationMarker = 0;
-        this._addFrame(newTile, x, y);
-        this["modificationMarker"] = 0;
-      } else {
-        delete this._tiles[x + ";" + y];
-        if (this.pointsBuf) this.pointsBuf.splice(oldTile.pointsBufIndex, POINT_STRUCT_SIZE);
-      }
-    }
-  }
-  /** @internal */
-  get pointsBuf() {
-    const child = this.children[0];
-    if (!child) return null;
-    return child["pointsBuf"];
-  }
-  _addFrame(tile, x, y) {
-    const frame = this.tile(tile.texture, tile.x, tile.y, {
-      rotate: tile.texture.rotate
-    });
-    const pb = this.pointsBuf;
-    if (!pb) return null;
-    tile.pointsBufIndex = pb.length - POINT_STRUCT_SIZE;
-    tile.setAnimation(frame);
-    this._tiles[x + ";" + y] = tile;
-  }
-  onMount(args) {
-    const { props } = args;
-    this.tileSets = props.tilesets;
-    this._layer = new Layer({
-      ...props
-    }, this.tileSets);
-    super.onMount(args);
-  }
-  onUpdate(props) {
-    super.onUpdate(props);
-    if (!this.isMounted) return;
-    if (props.tileheight) this._layer.tileheight = props.tileheight;
-    if (props.tilewidth) this._layer.tilewidth = props.tilewidth;
-    if (props.width) this._layer.width = props.width;
-    if (props.height) this._layer.height = props.height;
-    if (props.parallaxX) this._layer.parallaxX = props.parallaxx;
-    if (props.parallaxY) this._layer.parallaxY = props.parallaxy;
-    this.removeChildren();
-    for (let y = 0; y < this._layer.height; y++) {
-      for (let x = 0; x < this._layer.width; x++) {
-        const tile = this.createTile(x, y);
-        if (tile) {
-          this._addFrame(tile, x, y);
-        }
-      }
-    }
-  }
-};
-registerComponent("CompositeTileLayer", CanvasTileLayer);
-function CompositeTileLayer(props) {
-  return createComponent("CompositeTileLayer", props);
-}
-
-// src/components/Tilemap/TileSet.ts
-import { Tileset as TiledTilesetClass } from "@rpgjs/tiled";
-import { Assets as Assets2, Rectangle as Rectangle3, Texture as Texture5 } from "pixi.js";
-var TileSet = class extends TiledTilesetClass {
-  constructor(tileSet) {
-    super(tileSet);
-    this.textures = [];
-    this.tileGroups = {};
-  }
-  loadGroup() {
-  }
-  /** @internal */
-  async load(image) {
-    const texture = await Assets2.load(image);
-    for (let y = this.margin; y < this.image.height; y += this.tileheight + this.spacing) {
-      for (let x = this.margin; x < this.image.width; x += this.tilewidth + this.spacing) {
-        this.textures.push(
-          new Texture5({
-            source: texture.source,
-            frame: new Rectangle3(+x, +y, +this.tilewidth, +this.tileheight)
-          })
-        );
-      }
-    }
-    this.loadGroup();
-    return this;
-  }
-};
-
-// src/components/Tilemap/index.ts
-function TiledMap(props) {
-  const { map: map2 } = useProps(props);
-  const layers = signal6([]);
-  const objectLayer = props.objectLayer;
-  let tilesets = [];
-  let mapData = {};
-  const parseTmx = async (file, relativePath = "") => {
-    if (typeof file !== "string") {
-      return file;
-    }
-    const parser = new TiledParserFile(
-      file,
-      {
-        basePath: "",
-        staticDir: "",
-        relativePath
-      }
-    );
-    const data = await parser.parseFilePromise({
-      getOnlyBasename: false
-    });
-    return data;
-  };
-  effect9(async () => {
-    mapData = await parseTmx(map2());
-    for (let tileSet of mapData.tilesets) {
-      tilesets.push(await new TileSet(tileSet).load(tileSet.image.source));
-    }
-    layers.set(mapData.layers);
-  });
-  const createLayer = (layers2, props2 = {}) => {
-    return h(Container4, props2, loop(layers2, (layer) => {
-      switch (layer.type) {
-        case TiledLayerType.Tile:
-          return h(CompositeTileLayer, {
-            tilewidth: mapData.tilewidth,
-            tileheight: mapData.tileheight,
-            // @ts-ignore
-            width: mapData.width,
-            // @ts-ignore
-            height: mapData.height,
-            ...layer,
-            tilesets
-          });
-        case TiledLayerType.Image:
-          const { width, height, source } = layer.image;
-          return h(TilingSprite, {
-            image: source,
-            ...layer,
-            width: layer.repeatx ? layer.width * layer.tilewidth : width,
-            height: layer.repeaty ? layer.height * layer.tileheight : height
-          });
-        case TiledLayerType.Group:
-          return createLayer(signal6(layer.layers), layer);
-        case TiledLayerType.ObjectGroup:
-          const child = objectLayer?.(layer);
-          return h(Container4, layer, child);
-        default:
-          return h(Container4);
-      }
-    }));
-  };
-  return createLayer(layers);
-}
-
 // src/components/Viewport.ts
 import { Viewport as PixiViewport } from "pixi-viewport";
-import { effect as effect10 } from "@signe/reactive";
+import { effect as effect9 } from "@signe/reactive";
 var EVENTS3 = [
   "bounce-x-end",
   "bounce-x-start",
@@ -3000,7 +2698,7 @@ var CanvasViewport = class extends DisplayObject(PixiViewport) {
     super.onMount(element);
     const { tick: tick2, renderer, canvasSize } = element.props.context;
     let isDragging = false;
-    effect10(() => {
+    effect9(() => {
       this.screenWidth = canvasSize().width;
       this.screenHeight = canvasSize().height;
     });
@@ -3067,53 +2765,8 @@ function Viewport(props) {
   return createComponent("Viewport", props);
 }
 
-// src/components/DrawMap/index.ts
-import { effect as effect11, signal as signal7 } from "@signe/reactive";
-function ImageMap(props) {
-  const { imageSource, tileData } = useProps(props);
-  const tiles = signal7([]);
-  effect11(async () => {
-    const data = await fetch(tileData()).then((response) => response.json());
-    const objects = data;
-    if (props.objects) {
-      objects.push(...props.objects(data));
-    }
-    tiles.set(objects);
-  });
-  const createLayeredTiles = () => {
-    const layers = [createTileLayer(0), createTileLayer(1, true), createTileLayer(2)];
-    return h(Container4, props, ...layers);
-  };
-  const createTileLayer = (layerIndex, sortableChildren = false) => {
-    return h(
-      Container4,
-      {
-        sortableChildren
-      },
-      loop(tiles, (object) => {
-        if (object.tag && layerIndex == 1) {
-          return object;
-        }
-        object.layerIndex || (object.layerIndex = 1);
-        if (object.layerIndex !== layerIndex) return null;
-        const [x, y, width, height] = object.rect;
-        const [drawX, drawY] = object.drawIn;
-        return h(Sprite2, {
-          image: imageSource(),
-          x: drawX,
-          y: drawY,
-          rectangle: { x, y, width, height },
-          zIndex: drawY + height - 70
-          // zIndex: 0
-        });
-      })
-    );
-  };
-  return createLayeredTiles();
-}
-
 // src/components/NineSliceSprite.ts
-import { Assets as Assets3, NineSliceSprite as PixiNineSliceSprite } from "pixi.js";
+import { Assets as Assets2, NineSliceSprite as PixiNineSliceSprite } from "pixi.js";
 var CanvasNineSliceSprite = class extends DisplayObject(PixiNineSliceSprite) {
   constructor() {
     super({
@@ -3125,7 +2778,7 @@ var CanvasNineSliceSprite = class extends DisplayObject(PixiNineSliceSprite) {
     for (const [key, value] of Object.entries(props)) {
       if (value !== void 0) {
         if (key === "image") {
-          this.texture = await Assets3.load(value);
+          this.texture = await Assets2.load(value);
         } else if (key in this) {
           this[key] = value;
         }
@@ -3148,120 +2801,6 @@ var bootstrapCanvas = async (rootElement, canvas) => {
   return canvasElement;
 };
 
-// src/presets/Bar.ts
-function componentToHex(c) {
-  var hex = c.toString(16);
-  return hex.length == 1 ? "0" + hex : hex;
-}
-function rgbToHex(r, g, b) {
-  return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
-}
-function Bar(opts) {
-  const {
-    width,
-    height,
-    value,
-    maxValue,
-    backgroundColor,
-    foregroundColor,
-    border,
-    innerMargin,
-    borderRadius
-  } = useProps(opts, {
-    backgroundColor: "#000000",
-    foregroundColor: "#FFFFFF",
-    innerMargin: 0,
-    borderRadius: 0
-  });
-  return h(
-    Graphics,
-    {
-      ...opts,
-      width,
-      height,
-      draw(g) {
-        if (borderRadius()) {
-          g.roundRect(0, 0, width(), height(), borderRadius());
-        } else {
-          g.rect(0, 0, width(), height());
-        }
-        if (border) {
-          g.stroke(border);
-        }
-        g.fill(backgroundColor());
-      }
-    },
-    h(Graphics, {
-      width,
-      height,
-      draw(g) {
-        const margin = innerMargin();
-        const _borderRadius = borderRadius();
-        const w = Math.max(
-          0,
-          Math.min(
-            width() - 2 * margin,
-            value() / maxValue() * (width() - 2 * margin)
-          )
-        );
-        const h2 = height() - 2 * margin;
-        if (borderRadius) {
-          g.roundRect(margin, margin, w, h2, _borderRadius);
-        } else {
-          g.rect(margin, margin, w, h2);
-        }
-        const color = foregroundColor();
-        if (color.startsWith("rgba")) {
-          const [r, g2, b, a] = color.match(/\d+(\.\d+)?/g).map(Number);
-          g2.fill({ color: rgbToHex(r, g2, b), alpha: a });
-        } else {
-          g.fill(color);
-        }
-      }
-    })
-  );
-}
-
-// src/presets/Particle.ts
-import * as PIXI from "pixi.js";
-import { FX } from "revolt-fx";
-function Particle(options) {
-  const { emit, settings: settings2 = {} } = options;
-  const { name } = useProps(options);
-  const fx = new FX();
-  let element;
-  PIXI.Assets.add({ alias: "fx_settings", src: "/default-bundle.json" });
-  PIXI.Assets.add({
-    alias: "fx_spritesheet",
-    src: "/revoltfx-spritesheet.json"
-  });
-  tick(({ deltaRatio }) => {
-    fx.update(deltaRatio);
-  });
-  mount(async (_element) => {
-    element = _element;
-    const data = await PIXI.Assets.load(["fx_settings", "fx_spritesheet"]);
-    let fxSettings = { ...data.fx_settings };
-    if (settings2.emitters) {
-      const lastId = 1e4;
-      const emittersWithIds = settings2.emitters.map((emitter, index) => ({
-        ...emitter,
-        id: lastId + index
-      }));
-      fxSettings.emitters = [
-        ...fxSettings.emitters,
-        ...emittersWithIds
-      ];
-    }
-    fx.initBundle(fxSettings, true);
-  });
-  on(emit, () => {
-    const emitter = fx.getParticleEmitter(name());
-    emitter.init(element.componentInstance);
-  });
-  return h(Container4);
-}
-
 // src/utils/Ease.ts
 import {
   linear,
@@ -3295,24 +2834,95 @@ var Easing = {
   bounceInOut,
   bounceOut
 };
+
+// src/utils/RadialGradient.ts
+import { Texture as Texture5, ImageSource, DOMAdapter, Matrix } from "pixi.js";
+var RadialGradient = class {
+  constructor(x0, y0, x1, y1, x2, y2, focalPoint = 0) {
+    this.x0 = x0;
+    this.y0 = y0;
+    this.x1 = x1;
+    this.y1 = y1;
+    this.x2 = x2;
+    this.y2 = y2;
+    this.focalPoint = focalPoint;
+    this.gradient = null;
+    this.texture = null;
+    this.size = 600;
+    this.size = x0;
+    const halfSize = this.size * 0.5;
+    this.canvas = DOMAdapter.get().createCanvas();
+    this.canvas.width = this.size;
+    this.canvas.height = this.size;
+    this.ctx = this.canvas.getContext("2d");
+    if (this.ctx) {
+      this.gradient = this.ctx.createRadialGradient(
+        halfSize * (1 - focalPoint),
+        halfSize,
+        0,
+        halfSize,
+        halfSize,
+        halfSize - 0.5
+      );
+    }
+  }
+  addColorStop(offset, color) {
+    if (this.gradient) {
+      this.gradient.addColorStop(offset, color);
+    }
+  }
+  render({ translate } = {}) {
+    const { x0, y0, x1, y1, x2, y2, focalPoint } = this;
+    const defaultSize = this.size;
+    if (this.ctx && this.gradient) {
+      this.ctx.fillStyle = this.gradient;
+      this.ctx.fillRect(0, 0, defaultSize, defaultSize);
+      this.texture = new Texture5({
+        source: new ImageSource({
+          resource: this.canvas,
+          addressModeU: "clamp-to-edge",
+          addressModeV: "clamp-to-edge"
+        })
+      });
+      const m = new Matrix();
+      const dx = Math.sqrt((x1 - x0) * (x1 - x0) + (y1 - y0) * (y1 - y0));
+      const dy = Math.sqrt((x2 - x0) * (x2 - x0) + (y2 - y0) * (y2 - y0));
+      const angle = Math.atan2(y1 - y0, x1 - x0);
+      const scaleX = dx / defaultSize;
+      const scaleY = dy / defaultSize;
+      m.rotate(-angle);
+      m.scale(scaleX, scaleY);
+      if (translate) {
+        m.translate(translate.x, translate.y);
+      }
+      this.transform = m;
+    }
+    return {
+      texture: this.texture,
+      matrix: this.transform
+    };
+  }
+};
+
+// src/index.ts
+import { isObservable } from "rxjs";
 export {
-  Bar,
   Canvas2 as Canvas,
   Circle,
   Container4 as Container,
+  DisplayObject,
+  EVENTS2 as EVENTS,
   Easing,
   Ellipse,
   Graphics,
   Howler,
-  ImageMap,
   NineSliceSprite,
-  Particle,
   ParticlesEmitter,
+  RadialGradient,
   Rect,
   Scene,
   Sprite2 as Sprite,
   Text,
-  TiledMap,
   TilingSprite,
   Triangle,
   Viewport,
@@ -3324,6 +2934,7 @@ export {
   h,
   isAnimatedSignal,
   isElement,
+  isObservable,
   isPrimitive,
   isTrigger,
   loop,