@canvasengine/presets 2.0.0-beta.10

package/dist/index.js

@@ -0,0 +1,776 @@
+// src/Bar.ts
+import { Graphics, h, useProps } from "canvasengine";
+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 h7 = height() - 2 * margin;
+        if (borderRadius) {
+          g.roundRect(margin, margin, w, h7, _borderRadius);
+        } else {
+          g.rect(margin, margin, w, h7);
+        }
+        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/Particle.ts
+import * as PIXI from "pixi.js";
+import { FX } from "revolt-fx";
+import { h as h2, mount, tick, Container, on, useProps as useProps2 } from "canvasengine";
+function Particle(options) {
+  const { emit, settings: settings2 = {} } = options;
+  const { name } = useProps2(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 h2(Container);
+}
+
+// src/NightAmbiant.ts
+import { Container as Container2, Graphics as Graphics2, h as h3, mount as mount2, useProps as useProps3, animatedSignal, RadialGradient, effect, isSignal, signal, isObservable } from "canvasengine";
+function LightSpot(opts) {
+  const { radius } = useProps3(opts);
+  const scale = animatedSignal(1);
+  const minScale = 1;
+  const maxScale = 2;
+  const scintillationSpeed = 1e-3;
+  const animate = () => {
+    const time = Date.now() * scintillationSpeed;
+    const scintillationFactor = (Math.sin(time) + Math.sin(time * 1.3) + Math.sin(time * 0.7)) / 3;
+    const newScale = minScale + (maxScale - minScale) * (scintillationFactor * 0.5 + 0.5);
+    scale.update(() => newScale);
+    requestAnimationFrame(animate);
+  };
+  animate();
+  const draw = (g) => {
+    const size = radius() * 2;
+    const gradient = new RadialGradient(size, size, 0, size, size, 0);
+    gradient.addColorStop(0, "rgba(255, 255, 0, 1)");
+    gradient.addColorStop(0.5, "rgba(255, 255, 0, 0.3)");
+    gradient.addColorStop(0.8, "rgba(255, 255, 0, 0)");
+    const translate = size / 2;
+    g.rect(-translate, -translate, size, size).fill(
+      gradient.render({ translate: { x: translate, y: translate } })
+    );
+  };
+  return h3(Graphics2, {
+    draw,
+    ...opts,
+    scale
+  });
+}
+function NightAmbiant(props) {
+  const { children } = props;
+  let el;
+  const width = signal(0);
+  const height = signal(0);
+  let subscription;
+  const draw = (rectAndHole) => {
+    const margin = 80;
+    rectAndHole.rect(-margin, -margin, width() + margin * 2, height() + margin * 2);
+    rectAndHole.fill(0);
+    const applyChildren = (child) => {
+      const x = isSignal(child.propObservables.x) ? child.propObservables.x() : child.props.x;
+      const y = isSignal(child.propObservables.y) ? child.propObservables.y() : child.props.y;
+      const radius = isSignal(child.propObservables.radius) ? child.propObservables.radius() : child.props.radius;
+      rectAndHole.circle(x, y, radius);
+      rectAndHole.cut();
+    };
+    for (let child of children) {
+      if (isObservable(child)) {
+        if (subscription) {
+          subscription.unsubscribe();
+        }
+        subscription = child.subscribe((event) => {
+          for (let child2 of event.fullElements) {
+            applyChildren(child2);
+          }
+        });
+        return;
+      }
+      applyChildren(child);
+    }
+  };
+  mount2((el2) => {
+    effect(() => {
+      const { displayWidth, displayHeight } = el2.componentInstance;
+      const w = +displayWidth();
+      const h7 = +displayHeight();
+      setTimeout(() => {
+        width.update(() => w);
+        height.update(() => h7);
+      }, 0);
+    });
+  });
+  return h3(
+    Container2,
+    {
+      width: "100%",
+      height: "100%",
+      ...props
+    },
+    h3(Graphics2, {
+      draw,
+      alpha: 0.8,
+      blur: 80
+    }),
+    ...children
+  );
+}
+
+// src/Joystick.ts
+import * as PIXI2 from "pixi.js";
+import { Container as Container3, Graphics as Graphics3, Sprite, h as h4, signal as signal2 } from "canvasengine";
+var Direction = /* @__PURE__ */ ((Direction2) => {
+  Direction2["LEFT"] = "left";
+  Direction2["TOP"] = "top";
+  Direction2["BOTTOM"] = "bottom";
+  Direction2["RIGHT"] = "right";
+  Direction2["TOP_LEFT"] = "top_left";
+  Direction2["TOP_RIGHT"] = "top_right";
+  Direction2["BOTTOM_LEFT"] = "bottom_left";
+  Direction2["BOTTOM_RIGHT"] = "bottom_right";
+  return Direction2;
+})(Direction || {});
+function Joystick(opts = {}) {
+  const settings2 = Object.assign(
+    {
+      outerScale: { x: 1, y: 1 },
+      innerScale: { x: 1, y: 1 }
+    },
+    opts
+  );
+  let outerRadius = 70;
+  let innerRadius = 10;
+  const innerAlphaStandby = 0.5;
+  let dragging = false;
+  let startPosition = null;
+  let power = 0;
+  const innerPositionX = signal2(0);
+  const innerPositionY = signal2(0);
+  const innerAlpha = signal2(innerAlphaStandby);
+  function getPower(centerPoint) {
+    const a = centerPoint.x - 0;
+    const b = centerPoint.y - 0;
+    return Math.min(1, Math.sqrt(a * a + b * b) / outerRadius);
+  }
+  function getDirection(center) {
+    let rad = Math.atan2(center.y, center.x);
+    if (rad >= -Math.PI / 8 && rad < 0 || rad >= 0 && rad < Math.PI / 8) {
+      return "right" /* RIGHT */;
+    } else if (rad >= Math.PI / 8 && rad < 3 * Math.PI / 8) {
+      return "bottom_right" /* BOTTOM_RIGHT */;
+    } else if (rad >= 3 * Math.PI / 8 && rad < 5 * Math.PI / 8) {
+      return "bottom" /* BOTTOM */;
+    } else if (rad >= 5 * Math.PI / 8 && rad < 7 * Math.PI / 8) {
+      return "bottom_left" /* BOTTOM_LEFT */;
+    } else if (rad >= 7 * Math.PI / 8 && rad < Math.PI || rad >= -Math.PI && rad < -7 * Math.PI / 8) {
+      return "left" /* LEFT */;
+    } else if (rad >= -7 * Math.PI / 8 && rad < -5 * Math.PI / 8) {
+      return "top_left" /* TOP_LEFT */;
+    } else if (rad >= -5 * Math.PI / 8 && rad < -3 * Math.PI / 8) {
+      return "top" /* TOP */;
+    } else {
+      return "top_right" /* TOP_RIGHT */;
+    }
+  }
+  function handleDragStart(event) {
+    startPosition = event.getLocalPosition(this);
+    dragging = true;
+    innerAlpha.set(1);
+    settings2.onStart?.();
+  }
+  function handleDragEnd() {
+    if (!dragging) return;
+    innerPositionX.set(0);
+    innerPositionY.set(0);
+    dragging = false;
+    innerAlpha.set(innerAlphaStandby);
+    settings2.onEnd?.();
+  }
+  function handleDragMove(event) {
+    if (dragging == false) {
+      return;
+    }
+    let newPosition = event.getLocalPosition(this);
+    let sideX = newPosition.x - (startPosition?.x ?? 0);
+    let sideY = newPosition.y - (startPosition?.y ?? 0);
+    let centerPoint = new PIXI2.Point(0, 0);
+    let angle = 0;
+    if (sideX == 0 && sideY == 0) {
+      return;
+    }
+    let calRadius = 0;
+    if (sideX * sideX + sideY * sideY >= outerRadius * outerRadius) {
+      calRadius = outerRadius;
+    } else {
+      calRadius = outerRadius - innerRadius;
+    }
+    let direction = "left" /* LEFT */;
+    if (sideX == 0) {
+      if (sideY > 0) {
+        centerPoint.set(0, sideY > outerRadius ? outerRadius : sideY);
+        angle = 270;
+        direction = "bottom" /* BOTTOM */;
+      } else {
+        centerPoint.set(
+          0,
+          -(Math.abs(sideY) > outerRadius ? outerRadius : Math.abs(sideY))
+        );
+        angle = 90;
+        direction = "top" /* TOP */;
+      }
+      innerPositionX.set(centerPoint.x);
+      innerPositionY.set(centerPoint.y);
+      power = getPower(centerPoint);
+      settings2.onChange?.({ angle, direction, power });
+      return;
+    }
+    if (sideY == 0) {
+      if (sideX > 0) {
+        centerPoint.set(
+          Math.abs(sideX) > outerRadius ? outerRadius : Math.abs(sideX),
+          0
+        );
+        angle = 0;
+        direction = "left" /* LEFT */;
+      } else {
+        centerPoint.set(
+          -(Math.abs(sideX) > outerRadius ? outerRadius : Math.abs(sideX)),
+          0
+        );
+        angle = 180;
+        direction = "right" /* RIGHT */;
+      }
+      innerPositionX.set(centerPoint.x);
+      innerPositionY.set(centerPoint.y);
+      power = getPower(centerPoint);
+      settings2.onChange?.({ angle, direction, power });
+      return;
+    }
+    let tanVal = Math.abs(sideY / sideX);
+    let radian = Math.atan(tanVal);
+    angle = radian * 180 / Math.PI;
+    let centerX = 0;
+    let centerY = 0;
+    if (sideX * sideX + sideY * sideY >= outerRadius * outerRadius) {
+      centerX = outerRadius * Math.cos(radian);
+      centerY = outerRadius * Math.sin(radian);
+    } else {
+      centerX = Math.abs(sideX) > outerRadius ? outerRadius : Math.abs(sideX);
+      centerY = Math.abs(sideY) > outerRadius ? outerRadius : Math.abs(sideY);
+    }
+    if (sideY < 0) {
+      centerY = -Math.abs(centerY);
+    }
+    if (sideX < 0) {
+      centerX = -Math.abs(centerX);
+    }
+    if (sideX > 0 && sideY < 0) {
+    } else if (sideX < 0 && sideY < 0) {
+      angle = 180 - angle;
+    } else if (sideX < 0 && sideY > 0) {
+      angle = angle + 180;
+    } else if (sideX > 0 && sideY > 0) {
+      angle = 360 - angle;
+    }
+    centerPoint.set(centerX, centerY);
+    power = getPower(centerPoint);
+    direction = getDirection(centerPoint);
+    innerPositionX.set(centerPoint.x);
+    innerPositionY.set(centerPoint.y);
+    settings2.onChange?.({ angle, direction, power });
+  }
+  let innerElement;
+  let outerElement;
+  if (!settings2.outer) {
+    outerElement = h4(Graphics3, {
+      draw: (g) => {
+        g.circle(0, 0, outerRadius).fill(0);
+      },
+      alpha: 0.5
+    });
+  } else {
+    outerElement = h4(Sprite, {
+      image: settings2.outer,
+      anchor: { x: 0.5, y: 0.5 },
+      scale: settings2.outerScale
+    });
+  }
+  const innerOptions = {
+    scale: settings2.innerScale,
+    x: innerPositionX,
+    y: innerPositionY,
+    alpha: innerAlpha
+  };
+  if (!settings2.inner) {
+    innerElement = h4(Graphics3, {
+      draw: (g) => {
+        g.circle(0, 0, innerRadius * 2.5).fill(0);
+      },
+      ...innerOptions
+    });
+  } else {
+    innerElement = h4(Sprite, {
+      image: settings2.inner,
+      anchor: { x: 0.5, y: 0.5 },
+      ...innerOptions
+    });
+  }
+  return h4(
+    Container3,
+    {
+      ...opts,
+      pointerdown: handleDragStart,
+      pointerup: handleDragEnd,
+      pointerupoutside: handleDragEnd,
+      pointermove: handleDragMove
+    },
+    outerElement,
+    innerElement
+  );
+}
+
+// src/Tilemap/index.ts
+import { TiledLayerType, TiledParserFile } from "@rpgjs/tiled";
+import { loop, h as h5, Container as Container4, TilingSprite, useProps as useProps4, effect as effect2, signal as signal3 } from "canvasengine";
+
+// src/Tilemap/TileLayer.ts
+import { CompositeTilemap, POINT_STRUCT_SIZE, settings } from "@pixi/tilemap";
+import { Layer } from "@rpgjs/tiled";
+import { createComponent, registerComponent, DisplayObject } from "canvasengine";
+
+// src/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/Tilemap/TileLayer.ts
+settings.use32bitIndex = true;
+var CanvasTileLayer = class _CanvasTileLayer extends DisplayObject(CompositeTilemap) {
+  constructor() {
+    super(...arguments);
+    this._tiles = {};
+  }
+  // TODO: fix this, remove any. replace with Layer
+  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/Tilemap/TileSet.ts
+import { Tileset as TiledTilesetClass } from "@rpgjs/tiled";
+import { Assets as Assets2, Rectangle, Texture as Texture2 } 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 Texture2({
+            source: texture.source,
+            frame: new Rectangle(+x, +y, +this.tilewidth, +this.tileheight)
+          })
+        );
+      }
+    }
+    this.loadGroup();
+    return this;
+  }
+};
+
+// src/Tilemap/index.ts
+function TiledMap(props) {
+  const { map, basePath } = useProps4(props);
+  const layers = signal3([]);
+  const objectLayer = props.objectLayer;
+  const child = props.children[0];
+  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;
+  };
+  effect2(async () => {
+    const _map = map();
+    if (_map) {
+      mapData = await parseTmx(_map, basePath());
+      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 h5(Container4, props2, loop(layers2, (layer) => {
+      switch (layer.type) {
+        case TiledLayerType.Tile:
+          return h5(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 h5(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(signal3(layer.layers), layer);
+        case TiledLayerType.ObjectGroup:
+          const child2 = objectLayer?.(layer);
+          return h5(Container4, layer, child2);
+        default:
+          return h5(Container4);
+      }
+    }));
+  };
+  return h5(Container4, props, createLayer(layers));
+}
+
+// src/DrawMap/index.ts
+import { effect as effect3, signal as signal4, loop as loop2, h as h6, Container as Container5, Sprite as Sprite2, useProps as useProps5 } from "canvasengine";
+function ImageMap(props) {
+  const { imageSource, tileData } = useProps5(props);
+  const tiles = signal4([]);
+  effect3(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 h6(Container5, props, ...layers);
+  };
+  const createTileLayer = (layerIndex, sortableChildren = false) => {
+    return h6(
+      Container5,
+      {
+        sortableChildren
+      },
+      // TODO: fix this (remove any)
+      loop2(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 h6(Sprite2, {
+          image: imageSource(),
+          x: drawX,
+          y: drawY,
+          rectangle: { x, y, width, height },
+          zIndex: drawY + height - 70
+          // zIndex: 0
+        });
+      })
+    );
+  };
+  return createLayeredTiles();
+}
+export {
+  Bar,
+  Direction,
+  ImageMap,
+  Joystick,
+  LightSpot,
+  NightAmbiant,
+  Particle,
+  TiledMap
+};
+//# sourceMappingURL=index.js.map