@rpgjs/tiledmap 5.0.0-alpha.9 → 5.0.0-beta.2

package/dist/client/index3.js

@@ -1,3 +1,10 @@
+var TiledLayerType = /* @__PURE__ */ ((TiledLayerType2) => {
+  TiledLayerType2["Tile"] = "tilelayer";
+  TiledLayerType2["ObjectGroup"] = "objectgroup";
+  TiledLayerType2["Image"] = "imagelayer";
+  TiledLayerType2["Group"] = "group";
+  return TiledLayerType2;
+})(TiledLayerType || {});
 function joinPath(...segments) {
   return segments.filter((segment) => segment && segment.length > 0).join("/").replace(/\/+/g, "/");
 }
@@ -135,7 +142,6 @@ function requireBase64Js() {
   return base64Js;
 }
 var ieee754 = {};
-/*! ieee754. BSD-3-Clause License. Feross Aboukhadijeh <https://feross.org/opensource> */
 var hasRequiredIeee754;
 function requireIeee754() {
   if (hasRequiredIeee754) return ieee754;
@@ -219,12 +225,6 @@ function requireIeee754() {
   };
   return ieee754;
 }
-/*!
- * The buffer module from node.js, for the browser.
- *
- * @author   Feross Aboukhadijeh <https://feross.org>
- * @license  MIT
- */
 var hasRequiredBuffer;
 function requireBuffer() {
   if (hasRequiredBuffer) return buffer;
@@ -1796,7 +1796,7 @@ function requireBuffer() {
     function numberIsNaN(obj) {
       return obj !== obj;
     }
-    const hexSliceLookupTable = function() {
+    const hexSliceLookupTable = (function() {
       const alphabet = "0123456789abcdef";
       const table = new Array(256);
       for (let i = 0; i < 16; ++i) {
@@ -1806,7 +1806,7 @@ function requireBuffer() {
         }
       }
       return table;
-    }();
+    })();
     function defineBigIntMethod(fn) {
       return typeof BigInt === "undefined" ? BufferBigIntNotDefined : fn;
     }
@@ -1816,7 +1816,6 @@ function requireBuffer() {
   })(buffer);
   return buffer;
 }
-/*! safe-buffer. MIT License. Feross Aboukhadijeh <https://feross.org/opensource> */
 var hasRequiredSafeBuffer;
 function requireSafeBuffer() {
   if (hasRequiredSafeBuffer) return safeBuffer.exports;
@@ -3524,7 +3523,6 @@ function requireSax() {
         }
         return parser;
       }
-      /*! http://mths.be/fromcodepoint v0.1.0 by @mathias */
       if (!String.fromCodePoint) {
         (function() {
           var stringFromCharCode = String.fromCharCode;
@@ -4378,7 +4376,6 @@ const _TiledParser = class _TiledParser {
     this.basePath = basePath;
     this.layers = /* @__PURE__ */ new Map();
     this.transform = (obj) => {
-      var _a, _b;
       if (!obj) return;
       const attr = obj.attributes || obj._attributes;
       if (!attr) return obj;
@@ -4452,7 +4449,7 @@ const _TiledParser = class _TiledParser {
               break;
             case "class":
               val = {
-                ...((_a = this.transform(prop)) == null ? void 0 : _a.properties) ?? {},
+                ...this.transform(prop)?.properties ?? {},
                 _classname: attr2.propertytype
               };
               break;
@@ -4496,7 +4493,7 @@ const _TiledParser = class _TiledParser {
           newObj.source = this.getImagePath(newObj.source);
         }
       }
-      const objectgroup = newObj.object || ((_b = newObj.objectgroup) == null ? void 0 : _b.object);
+      const objectgroup = newObj.object || newObj.objectgroup?.object;
       if (objectgroup) {
         newObj.objects = _TiledParser.toArray(objectgroup).map((object) => {
           return this.transform(object);
@@ -4573,12 +4570,11 @@ const _TiledParser = class _TiledParser {
     };
     recursiveObjectGroup(json.map);
     const recursiveLayer = (elements, array = []) => {
-      var _a;
       if (!elements) return array;
       for (let element of elements) {
         const { name } = element;
         if (!["layer", "group", "imagelayer", "objectgroup"].includes(name)) continue;
-        const data = (_a = element.elements) == null ? void 0 : _a.find((el) => el.name == "data");
+        const data = element.elements?.find((el) => el.name == "data");
         element.layer = this.layers.get(+element.attributes.id);
         const obj = {
           ...this.transform(data) ?? {},
@@ -4647,6 +4643,579 @@ _TiledParser.propToBool = (obj, props) => {
   return obj;
 };
 let TiledParser = _TiledParser;
+class TiledProperties {
+  constructor(data) {
+    this.properties = {};
+    this.properties = data?.properties ?? {};
+  }
+  getProperty(name, defaultValue) {
+    const val = this.properties[name];
+    if (val === void 0) {
+      return defaultValue;
+    }
+    return val;
+  }
+  hasProperty(name) {
+    return !!this.properties[name];
+  }
+  setProperty(name, value) {
+    this.properties[name] = value;
+  }
+  getType() {
+    return this.class || this["type"];
+  }
+}
+const FLIPPED_HORIZONTALLY_FLAG = 2147483648;
+const FLIPPED_VERTICALLY_FLAG = 1073741824;
+const FLIPPED_DIAGONALLY_FLAG = 536870912;
+const ROTATED_HEXAGONAL_120_FLAG = 268435456;
+class TileGid extends TiledProperties {
+  constructor(obj) {
+    super(obj);
+    this.obj = obj;
+    this._gid = obj?.gid;
+  }
+  static getRealGid(gid) {
+    return gid & 268435455;
+  }
+  get horizontalFlip() {
+    return !!(this._gid & FLIPPED_HORIZONTALLY_FLAG);
+  }
+  get verticalFlip() {
+    return !!(this._gid & FLIPPED_VERTICALLY_FLAG);
+  }
+  get diagonalFlip() {
+    return !!(this._gid & FLIPPED_DIAGONALLY_FLAG);
+  }
+  get rotatedHex120() {
+    return !!(this._gid & ROTATED_HEXAGONAL_120_FLAG);
+  }
+  get gid() {
+    return TileGid.getRealGid(this._gid);
+  }
+  set gid(val) {
+    this._gid = val;
+  }
+}
+class Tile extends TileGid {
+  constructor(tile) {
+    super(tile);
+    this.tile = tile;
+    const preservedProperties = this.properties;
+    Reflect.deleteProperty(tile, "gid");
+    Object.assign(this, tile);
+    if (preservedProperties && Object.keys(preservedProperties).length > 0) {
+      this.properties = { ...preservedProperties, ...this.properties };
+    }
+  }
+}
+class TiledObjectClass extends TileGid {
+  constructor(object) {
+    super(object);
+    this.layerName = "";
+    Object.assign(this, object);
+    if (object?.gid) {
+      this.y -= this.height;
+    }
+  }
+}
+class Layer extends TiledProperties {
+  constructor(layer, tilesets, parent) {
+    super(layer);
+    this.tilesets = tilesets;
+    this.parent = parent;
+    this.cacheTiles = false;
+    this.tiles = [];
+    Object.assign(this, layer);
+    this.mapObjects();
+    this.mergePropertiesWithParent();
+    this.cacheTiles = this.getProperty("cache-tiles", false);
+    if (this.cacheTiles) this.propertiesTiles();
+  }
+  get size() {
+    return this.data.length;
+  }
+  createTile(gid, tileIndex, layerIndex) {
+    if (gid == 0) {
+      return;
+    }
+    const realGid = TileGid.getRealGid(gid);
+    const tileset = Layer.findTileSet(realGid, this.tilesets);
+    if (!tileset) {
+      return void 0;
+    }
+    const tile = tileset.getTile(realGid - tileset.firstgid);
+    if (tile) {
+      return new Tile({
+        ...tile.tile,
+        gid,
+        index: tileIndex,
+        layerIndex
+      });
+    }
+    return new Tile({
+      gid,
+      index: tileIndex,
+      layerIndex
+    });
+  }
+  mergePropertiesWithParent() {
+    const parent = this.getLayerParent();
+    if (!this.properties) this.properties = {};
+    if (!parent) return;
+    for (let key in parent.properties) {
+      const val = parent.properties[key];
+      const valChild = this.properties[key];
+      if (valChild === void 0) {
+        this.properties[key] = val;
+      } else {
+        if (key == "z") {
+          this.properties[key] += val;
+        } else {
+          continue;
+        }
+      }
+    }
+    this.opacity = Math.round((parent.opacity ?? 1) * (this.opacity ?? 1) * 100) / 100;
+    this.offsetx = (parent.offsetx ?? 0) + (this.offsetx ?? 0);
+    this.offsety = (parent.offsety ?? 0) + (this.offsety ?? 0);
+    this.locked = parent.locked ?? false;
+  }
+  propertiesTiles() {
+    if (!this.data) return;
+    const data = this.data;
+    for (let i = 0; i < data.length; i++) {
+      const id = data[i];
+      this.tiles.push(this.createTile(id, i));
+    }
+  }
+  mapObjects() {
+    if (this.objects) {
+      this.objects = this.objects.map((object) => {
+        const obj = new TiledObjectClass(object);
+        obj.layerName = this.name;
+        return obj;
+      });
+    }
+  }
+  getTileByIndex(tileIndex) {
+    if (this.cacheTiles) {
+      return this.tiles[tileIndex];
+    }
+    return this.createTile(this.data[tileIndex], tileIndex);
+  }
+  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;
+  }
+  getLayerParent() {
+    return this.parent;
+  }
+  tilesForEach(cb) {
+    for (let i = 0; i < this.data.length; i++) {
+      if (this.cacheTiles) {
+        cb(this.tiles[i], i);
+        continue;
+      }
+      cb(this.createTile(this.data[i], i), i);
+    }
+  }
+  setData(tileIndex, gid) {
+    this.data[tileIndex] = gid;
+  }
+}
+class Tileset extends TiledProperties {
+  constructor(tileset) {
+    super(tileset);
+    this.tileset = tileset;
+    this.cacheTileId = /* @__PURE__ */ new Map();
+    Object.assign(this, tileset);
+    this.margin = this.margin ?? 0;
+    this.spacing = this.spacing ?? 0;
+    const tilesArray = tileset.tiles || tileset.tile || [];
+    for (let tile of tilesArray) {
+      this.addTile(tile);
+    }
+    Reflect.deleteProperty(this, "tiles");
+    Reflect.deleteProperty(this, "tile");
+  }
+  addTile(tileObj) {
+    const tile = new Tile(tileObj);
+    this.cacheTileId.set(tile.id, tile);
+    return tile;
+  }
+  getTile(id) {
+    return this.cacheTileId.get(+id);
+  }
+}
+let bufferTilesets = {};
+class MapClass extends TiledProperties {
+  constructor(map) {
+    super(map ?? {});
+    this.tilesets = [];
+    this.layers = [];
+    this.tmpLayers = [];
+    this.tilesIndex = {};
+    this.allocateMemory = 0;
+    this.lowMemory = false;
+    if (map) this.load(map);
+  }
+  load(map) {
+    Object.assign(this, map);
+    if (this.hasProperty("low-memory")) {
+      this.lowMemory = this.getProperty("low-memory", false);
+    }
+    this.tmpLayers = [];
+    this.mapTilesets();
+    this.mapLayers(this.layers);
+    this.layers = [...this.tmpLayers];
+    Reflect.deleteProperty(this, "tmpLayers");
+    this.setTilesIndex();
+    this.data = map;
+  }
+  /** 
+   * @title Width of the map in pixels
+   * @prop {number} [widthPx]
+   * @readonly
+   * @memberof Map
+   * @memberof RpgSceneMap
+   * */
+  get widthPx() {
+    return this.width * this.tilewidth;
+  }
+  /** 
+  * @title Height of the map in pixels
+  * @prop {number} [heightPx]
+  * @readonly
+  * @memberof Map
+  * @memberof RpgSceneMap
+  * */
+  get heightPx() {
+    return this.height * this.tileheight;
+  }
+  /** 
+   * @title The depth of the map in pixels (this is the height of a tile ;))
+   * @prop {number} map.zTileHeight
+   * @readonly
+   * @memberof Map
+   * @memberof RpgSceneMap
+   * */
+  get zTileHeight() {
+    return this.tileheight;
+  }
+  /**
+       * Find a layer by name. Returns `undefined` is the layer is not found
+  
+       * @title Get Layer by name
+       * @method map.getLayerByName(name)
+       * @param {string} name layer name
+       * @returns {LayerInfo | undefined}
+       * @example
+       *  ```ts
+       *  const tiles = map.getLayerByName(0, 0)
+       *  ```
+       * @memberof Map
+       * @memberof RpgSceneMap
+       */
+  getLayerByName(name) {
+    return this.layers.find((layer) => layer.name == name);
+  }
+  /**
+  * Get the tile index on the tileset
+  * 
+  * @title Get index of tile
+  * @method map.getTileIndex(x,y)
+  * @param {number} x Position X
+  * @param {number} x Position Y
+  * @returns {number}
+  * @memberof Map
+  * @memberof RpgSceneMap
+  */
+  getTileIndex(x, y, [z] = [0]) {
+    return this.width * Math.floor((y - z) / this.tileheight) + Math.floor(x / this.tilewidth);
+  }
+  getTilePosition(index) {
+    return {
+      y: Math.floor(index / this.width) * this.tileheight,
+      x: index % this.width * this.tilewidth
+    };
+  }
+  /**
+       * Find the point of origin (top left) of a tile. Of course, its position depends on the size of the tile
+  
+       * @title Get origin position of tile
+       * @method map.getTileOriginPosition(x,y)
+       * @param {number} x Position X
+       * @param {number} x Position Y
+       * @returns { {x: number, y: number }}
+       * @example
+       *  ```ts
+       *  // If the size of a tile is 32x32px
+       *  const position = map.getTileOriginPosition(35, 12)
+       *  console.log(position) // { x: 32, y: 0 }
+       *  ```
+       * @memberof Map
+       * @memberof RpgSceneMap
+       */
+  getTileOriginPosition(x, y) {
+    return {
+      x: Math.floor(x / this.tilewidth) * this.tilewidth,
+      y: Math.floor(y / this.tileheight) * this.tileheight
+    };
+  }
+  /**
+      * Recover tiles according to a position
+  
+      * @title Get tile by position
+      * @method map.getTileByPosition(x,y)
+      * @param {number} x Position X
+      * @param {number} x Position Y
+      * @returns {TileInfo}
+      * @example
+      *  ```ts
+      *  const tiles = map.getTileByPosition(0, 0)
+      *  ```
+      * @memberof Map
+      * @memberof RpgSceneMap
+      */
+  getTileByPosition(x, y, z = [0, 0], options = {}) {
+    const tileIndex = this.getTileIndex(x, y, [z[0]]);
+    return this.getTileByIndex(tileIndex, z, options);
+  }
+  /**
+       * Retrieves tiles according to its index
+  
+       * @title Get tile by index
+       * @method map.getTileByIndex(tileIndex)
+       * @param {number} tileIndex tile index
+       * @returns {TileInfo}
+       * @example
+       *  ```ts
+       *  const index = map.getTileIndex(0, 0)
+       *  const tiles = map.getTileByIndex(index)
+       *  ```
+       * @memberof Map
+       * @memberof RpgSceneMap
+       */
+  getTileByIndex(tileIndex, zPlayer = [0, 0], options = {
+    populateTiles: true
+  }) {
+    const zA = Math.floor(zPlayer[0] / this.zTileHeight);
+    Math.floor(zPlayer[1] / this.zTileHeight);
+    const level = this.tilesIndex[zA];
+    const obj = {
+      tiles: [],
+      hasCollision: false,
+      isOverlay: false,
+      objectGroups: [],
+      tileIndex
+    };
+    if (!level) {
+      return obj;
+    }
+    const [layer] = this.layers;
+    const getTileByPointer = (pointer = 0) => {
+      const pos = tileIndex * this.realAllocateMemory + pointer;
+      const gid = level[pos];
+      if (gid === 0) {
+        return obj;
+      }
+      const tile2 = layer.createTile(gid, tileIndex, level[pos + 1]);
+      if (tile2) obj.tiles.push(tile2);
+    };
+    if (options.populateTiles) {
+      for (let i = 0; i < this.realAllocateMemory; i += 2) {
+        getTileByPointer(i);
+      }
+    } else {
+      getTileByPointer();
+    }
+    const [tile] = obj.tiles;
+    if (tile) {
+      obj.hasCollision = tile.getProperty("collision", false);
+      obj.objectGroups = tile.objects ?? [];
+    }
+    return obj;
+  }
+  getAllObjects() {
+    return this.layers.reduce((prev, current) => {
+      if (!current.objects) return prev;
+      return prev.concat(...current.objects);
+    }, []);
+  }
+  getData() {
+    return {
+      ...this.data,
+      layers: this.layers
+    };
+  }
+  setTile(x, y, layerFilter, tileInfo) {
+    if (this.lowMemory) {
+      throw "Impossible to change a tile with the lowMemory option";
+    }
+    const tileIndex = this.getTileIndex(x, y);
+    let fnFilter;
+    let tilesEdited = {};
+    if (typeof layerFilter == "string") {
+      fnFilter = (layer) => layer.name == layerFilter;
+    } else {
+      fnFilter = layerFilter;
+    }
+    for (let i = 0; i < this.layers.length; i++) {
+      const layer = this.layers[i];
+      if (!fnFilter(layer)) continue;
+      let tile;
+      const oldTile = this.getTileByIndex(tileIndex);
+      if (tileInfo.gid) {
+        tile = layer.createTile(tileInfo.gid, tileIndex);
+      }
+      if (!tile) continue;
+      for (let key in tileInfo) {
+        if (key == "gid") continue;
+        tile[key] = tileInfo[key];
+      }
+      tilesEdited[layer.name] = {
+        gid: tile.gid,
+        properties: tile.properties
+      };
+      this.setTileIndex(layer, oldTile.tiles[0], tile, tileIndex, i);
+      layer.setData(tileIndex, tile.gid);
+    }
+    return {
+      x,
+      y,
+      tiles: tilesEdited
+    };
+  }
+  removeCacheTileset(name) {
+    delete bufferTilesets[name];
+  }
+  clearCacheTilesets() {
+    bufferTilesets = {};
+  }
+  mapTilesets() {
+    this.tilesets = this.tilesets.map((tileset) => {
+      if (bufferTilesets[tileset.name]) {
+        const instance = bufferTilesets[tileset.name];
+        instance.firstgid = tileset.firstgid;
+        return instance;
+      }
+      const _tileset = new Tileset(tileset);
+      bufferTilesets[_tileset.name] = _tileset;
+      return _tileset;
+    });
+  }
+  mapLayers(layers = [], parent) {
+    for (let layer of layers) {
+      const layerInstance = new Layer(layer, this.tilesets, parent);
+      this.tmpLayers.push(layerInstance);
+      if (layer.layers) {
+        this.mapLayers(layer.layers, layerInstance);
+      }
+    }
+    if (this.lowMemory) this.allocateMemory = 1;
+    if (!this.allocateMemory) this.allocateMemory = this.layers.length;
+  }
+  setTileIndex(layer, oldTile, newTile, tileIndex, layerIndex) {
+    const startPos = tileIndex * this.realAllocateMemory;
+    let pointer = startPos + this.realAllocateMemory - 2;
+    const zLayer = layer.getProperty("z", 0);
+    const zTile = oldTile.getProperty("z", 0);
+    let z = zLayer + zTile;
+    while (pointer >= startPos) {
+      const zlayer = this.tilesIndex[z];
+      if (zlayer[pointer] === oldTile.gid && zlayer[pointer + 1] === layerIndex) {
+        this.tilesIndex[z][pointer] = newTile.gid;
+      }
+      pointer -= 2;
+    }
+  }
+  /**
+   * We multiply by 2 because 2 entries are stored for a tile: its GID and the Layer Index
+   * 
+   * Example If I have 3 layers, The array will have the following form 
+   * 
+   * [
+   *  GID of Layer 3, 
+   *  Layer Index of Layer 3, 
+   *  GID of Layer 2, 
+   *  Layer Index of Layer 2, 
+   *  GID of Layer 1, 
+   *  Layer Index of Layer 1,
+   * ... others tiles
+   * ]
+   * 
+   * The size in memory of the map is therefore:
+   * 
+   * `(map width * map height * number of layers * 4) bytes`
+   * 
+   * > We multiply by 4, because an element takes 2 bytes and has 2 elements for a tile is 4 bytes in all
+   * 
+   * Example (a 100x100 map with 5 layers)
+   * 
+   * `100 * 100 * 5 * 4 = 200000 bytes = ~195 Kb`
+   * 
+   * If we define on lowMemory then the calculation is the following
+   * 
+   * `(map width * map height * 4) bytes`
+   * 
+   * Example
+   * 
+   * `100 * 100 * 4 = 40000 bytes = ~39 Kb`
+   */
+  get realAllocateMemory() {
+    return this.allocateMemory * 2;
+  }
+  /**
+   * We keep each tile in memory classified by z value. The values are ordered from the end to the beginning so that the first element of the array (when retrieved with getTileByIndex() is the tile on the highest layer. This way, the tile search is very fast for collisions 
+   * 
+   */
+  addTileIndex(layer, tile, tileIndex, layerIndex) {
+    if (!tile || tile && tile.gid == 0) {
+      return;
+    }
+    const zLayer = layer.getProperty("z", 0);
+    const zTile = tile.getProperty("z", 0);
+    let z = zLayer + zTile;
+    if (!this.tilesIndex[z]) {
+      const buffer2 = new ArrayBuffer(layer.size * this.realAllocateMemory * 2);
+      this.tilesIndex[z] = new Uint16Array(buffer2);
+    }
+    const startPos = tileIndex * this.realAllocateMemory;
+    let pointer = startPos + this.realAllocateMemory - 2;
+    while (this.tilesIndex[z][pointer] !== 0 && pointer > startPos) {
+      pointer -= 2;
+    }
+    this.tilesIndex[z][pointer] = tile.gid;
+    this.tilesIndex[z][pointer + 1] = layerIndex;
+    this.tilesIndex[z][startPos] = tile.gid;
+    this.tilesIndex[z][startPos + 1] = layerIndex;
+  }
+  setTilesIndex() {
+    for (let i = 0; i < this.layers.length; i++) {
+      const layer = this.layers[i];
+      if (layer.type != TiledLayerType.Tile) {
+        continue;
+      }
+      layer.tilesForEach((tile, index) => {
+        this.addTileIndex(layer, tile, index, i);
+      });
+    }
+  }
+}
 export {
-  TiledParser
+  Layer,
+  MapClass,
+  Tile,
+  TiledLayerType,
+  TiledObjectClass,
+  TiledParser,
+  TiledProperties,
+  Tileset
 };

package/dist/client/index4.js

@@ -1,4 +1,4 @@
-import { useProps, useDefineProps, signal, h, Container } from "canvasengine";
+import { useProps, useDefineProps, signal, effect, h, Container } from "canvasengine";
 import { EventLayerComponent } from "@rpgjs/client";
 import { TiledMap } from "@canvasengine/presets";
 function component($$props) {
@@ -7,6 +7,9 @@ function component($$props) {
   var _a = defineProps(), data = _a.data, params = _a.params;
   var map = signal(data());
   var basePath = signal(params().basePath);
+  effect(function() {
+    map.set(data());
+  });
   let $this = h(Container, null, h(TiledMap, { map, basePath, createLayersPerTilesZ: true, objectLayer: () => h(EventLayerComponent) }));
   return $this;
 }