@canvasengine/presets 2.0.0-beta.23 → 2.0.0-beta.25

package/src/Tilemap/TileGroup.ts

@@ -1,207 +0,0 @@
-interface TileOptions {
-    tilesetIndex?: number
-    tileId: number
-    x: number
-    y: number
-}
-
-interface TilesGroupOptions {
-    ignore?: boolean
-    probability?: number
-    baseHeight?: number
-    baseWidth?: number
-    rectMargin?: number
-    baseOffsetX?: number
-    baseOffsetY?: number
-}
-
-export class TileInfo {
-    tilesetIndex?: number
-    tileId: number
-    flags: Map<string, any> = new Map()
-    id: number = Math.random()
-
-    constructor(obj: TileOptions) {
-        this.tilesetIndex = obj.tilesetIndex ?? 0
-        this.tileId = obj.tileId
-    }
-
-    addFlag(key: string, value: any) {
-        this.flags.set(key, value)
-    }
-}
-
-export class TilesGroup {
-    tiles: (TileInfo | null)[][] = []
-    width: number
-    height: number
-    ignore: boolean = false
-    probability: number = 1
-    baseHeight: number = 1
-    baseWidth?: number
-    baseOffsetX: number = 0
-    baseOffsetY: number = 0
-    rectMargin: number = 0
-
-    constructor(tiles: TileOptions[], public tilesetIndex: number = 0, options: TilesGroupOptions = {}) {
-        const pointsX = tiles.map(tile => tile.x)
-        const pointsY = tiles.map(tile => tile.y)
-        const offsetX = Math.min(...pointsX)
-        const offsetY = Math.min(...pointsY)
-        this.width = Math.max(...pointsX) - offsetX + 1
-        this.height = Math.max(...pointsY) - offsetY + 1
-        this.ignore = !!options.ignore
-        this.probability = options.probability ?? 1
-        this.baseHeight = options.baseHeight ?? 1
-        this.baseWidth = options.baseWidth
-        this.rectMargin = options.rectMargin ?? 0
-        this.baseOffsetX = options.baseOffsetX ?? 0
-        this.baseOffsetY = options.baseOffsetY ?? 0
-        this.fillTiles()
-        for (let tile of tiles) {
-            this.addTile(tile.x - offsetX, tile.y - offsetY, tile)
-        }
-    }
-
-    getRect(x: number, y: number): { minX: number, minY: number, maxX: number, maxY: number } {
-        const margin = this.rectMargin
-        return {
-            minX: x - margin + this.baseOffsetX,
-            minY: y - this.tilesBaseHeight - margin - this.baseOffsetY,
-            maxX: x + this.tilesBaseWidth + margin,
-            maxY: y + margin
-        }
-    }
-
-    get tilesBase() {
-        return this.tiles[this.tiles.length - 1]
-    }
-
-    get tilesBaseWidth(): number {
-        return this.baseWidth ?? this.tilesBase.length
-    }
-
-    get tilesBaseHeight(): number {
-        return this.baseHeight
-    }
-
-    forEach(cb: (tileInfo: TileInfo | null, x: number, y: number) => void) {
-        for (let i = 0; i < this.tiles.length; i++) {
-            for (let j = 0; j < this.tiles[i].length; j++) {
-                cb(this.tiles[i][j], j, i)
-            }
-        }
-    }
-
-    find(cb: (tileInfo: TileInfo | null, x: number, y: number) => boolean): TileInfo | null {
-        let found: TileInfo | null = null
-        this.forEach((tileInfo, x, y) => {
-            const bool = cb(tileInfo, x, y)
-            if (bool) found = tileInfo
-        })
-        return found
-    }
-
-    getOffsetY(): number {
-        const tilesBase = this.tilesBase
-        let offset = 0
-        this.forEach((tile, x, y) => {
-            if (tile?.tileId == (tilesBase?.[0]?.tileId)) {
-                offset = y
-            }
-        })
-        return offset
-    }
-
-    fillTiles() {
-        for (let i = 0; i < this.height; i++) {
-            this.tiles[i] = []
-            for (let j = 0; j < this.width; j++) {
-                this.tiles[i][j] = null
-            }
-        }
-    }
-
-    shiftToTopLeft(): void {
-        const matrix = this.tiles
-
-        // Find the first non-undefined element and its position
-        const foundFirst = () => {
-            let firstElementRow = -1;
-            let firstElementColumn = -1;
-
-            for (let col = 0; col < matrix.length; col++) {
-                if (!matrix[col]) matrix[col] = []
-                for (let row = 0; row < matrix[col].length; row++) {
-                    if (matrix[col][row] !== undefined) {
-                        firstElementRow = row;
-                        firstElementColumn = col;
-                        return {
-                            firstElementRow,
-                            firstElementColumn
-                        };
-                    }
-                }
-            }
-
-            return {
-                firstElementRow,
-                firstElementColumn
-            }
-        }
-
-        const { firstElementRow, firstElementColumn } = foundFirst()
-
-        // If no non-undefined element is found, return the original matrix
-        if (firstElementRow === -1) {
-            return;
-        }
-
-        // Shift the matrix elements
-        const newMatrix: (TileInfo | null)[][] = [];
-        for (let col = firstElementColumn; col < matrix.length; col++) {
-            const newRow: (TileInfo | null)[] = [];
-            for (let row = firstElementRow; row < matrix[col].length; row++) {
-                newRow.push(matrix[col][row]);
-            }
-            newMatrix.push(newRow);
-        }
-
-        this.tiles = newMatrix;
-
-        this.width = this.tiles[0].length
-        this.height = this.tiles.length
-    }
-
-    addTile(x: number, y: number, tileOptions: TileOptions) {
-        if (!this.tiles[y]) this.tiles[y] = []
-        this.tiles[y][x] = new TileInfo(tileOptions)
-    }
-
-    addTileFlag(x: number, y: number, key: string, value: any) {
-        this.getTile(x, y)?.addFlag(key, value)
-    }
-
-    getTile(x: number, y: number): TileInfo | null {
-        return this.tiles[y]?.[x]
-    }
-
-    getTilesByFlag(key: string, value: any): { tileInfo: TileInfo, x: number, y: number }[] {
-        const array: any = []
-        this.forEach((tileInfo, x, y) => {
-            const flag = tileInfo?.flags.get(key)
-            if (flag && flag == value) {
-                array.push({
-                    tileInfo,
-                    x,
-                    y
-                })
-            }
-        })
-        return array
-    }
-
-    isTileBase(tileInfo: TileInfo): boolean {
-        return !!this.tilesBase.find(tile => tile?.id == tileInfo.id)
-    }
-}

package/src/Tilemap/TileLayer.ts

@@ -1,146 +0,0 @@
-import {
-  CompositeTilemap,
-  POINT_STRUCT_SIZE,
-  Tilemap,
-  settings,
-} from "@canvasengine/tilemap";
-import { Layer, Tile as TileClass } from "@rpgjs/tiled";
-import {
-  createComponent,
-  registerComponent,
-  DisplayObject,
-  Signal,
-} from "canvasengine";
-import { Tile } from "./Tile";
-import { TileSet } from "./TileSet";
-import { Subscription } from "rxjs";
-
-settings.use32bitIndex = true;
-
-export class CanvasTileLayer extends DisplayObject(CompositeTilemap) {
-  private _tiles: any = {};
-  tiles: (TileClass | null)[];
-  private _layer: any; // TODO: fix this, remove any. replace with Layer
-  private frameTile: number = 0;
-  private frameRateAnimation: number = 10;
-  private subscriptionTick: Subscription;
-
-  static findTileSet(gid: number, tileSets: TileSet[]) {
-    let tileset: TileSet | undefined;
-    for (let i = tileSets.length - 1; i >= 0; i--) {
-      tileset = tileSets[i];
-      if (tileset.firstgid && tileset.firstgid <= gid) {
-        break;
-      }
-    }
-    return tileset;
-  }
-
-  /** @internal */
-  createTile(x: number, y: number, options: any = {}): Tile | undefined {
-    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;
-  }
-
-  private _addFrame(tile: Tile, x: number, y: number) {
-    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;
-  }
-
-  async onMount(args) {
-    const { props } = args;
-
-    this.tileSets = props.tilesets;
-    this._layer = new Layer(
-      {
-        ...props,
-      },
-      this.tileSets
-    );
-
-    const tick: Signal = props.context.tick;
-
-    this.subscriptionTick = tick.observable.subscribe(({ value }) => {
-        if (value.frame % this.frameRateAnimation == 0) {
-            this.tileAnim = [this.frameTile, this.frameTile];
-            this.frameTile++
-         }
-    });
-
-    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);
-        }
-      }
-    }
-  }
-
-  async onDestroy(parent: any) {
-    this.subscriptionTick.unsubscribe();
-    await super.onDestroy(parent);
-  }
-}
-
-// @ts-ignore
-export interface CanvasTileLayer extends CompositeTilemap {}
-
-registerComponent("CompositeTileLayer", CanvasTileLayer);
-
-export function CompositeTileLayer(props) {
-  return createComponent("CompositeTileLayer", props);
-}

package/src/Tilemap/TileSet.ts

@@ -1,41 +0,0 @@
-import { TiledTileset, Tileset as TiledTilesetClass } from "@rpgjs/tiled";
-import { Assets, Rectangle, Texture } from "pixi.js";
-
-export class TileSet extends TiledTilesetClass {
-  public textures: Texture[] = [];
-  private tileGroups = {};
-
-  constructor(tileSet: TiledTileset) {
-    super(tileSet);
-  }
-
-  loadGroup() {
-    // for (let tile of this.tileset.tiles) {
-    // }
-  }
-
-  /** @internal */
-  async load(image: string) {
-    const texture = await Assets.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 Texture({
-            source: texture.source,
-            frame: new Rectangle(+x, +y, +this.tilewidth, +this.tileheight),
-          })
-        );
-      }
-    }
-    this.loadGroup();
-    return this;
-  }
-}

package/src/Tilemap/index.ts

@@ -1,222 +0,0 @@
-import { TiledLayer, TiledLayerType, TiledMap, TiledParserFile, TiledTileset } from "@rpgjs/tiled"
-import { loop, h, Container, TilingSprite, useProps, effect, signal } from "canvasengine"
-import { CompositeTileLayer } from "./TileLayer"
-import { TileSet } from "./TileSet"
-
-/**
- * Reorganizes tile layers based on the z property of tiles
- * 
- * This function analyzes each tile in the layer data and groups them by their z property.
- * If a tile has a z property different from 0, it creates new layers for each z value.
- * 
- * @param {TiledLayer[]} originalLayers - The original layers from the tilemap
- * @param {TileSet[]} tilesets - Array of loaded tilesets
- * @param {TiledMap} mapData - The complete map data
- * @returns {TiledLayer[]} - Reorganized layers with tiles grouped by z property
- * 
- * @example
- * ```typescript
- * const reorganizedLayers = reorganizeLayersByTileZ(mapData.layers, tilesets, mapData);
- * ```
- */
-function reorganizeLayersByTileZ(originalLayers: TiledLayer[], tilesets: TileSet[], mapData: TiledMap): TiledLayer[] {
-    const reorganizedLayers: TiledLayer[] = [];
-    
-    for (const layer of originalLayers) {
-        if (layer.type !== TiledLayerType.Tile) {
-            // Keep non-tile layers as they are
-            reorganizedLayers.push(layer);
-            continue;
-        }
-
-        // Group tiles by their z property
-        const layersByZ = new Map<number, number[]>();
-        
-        // Initialize empty arrays for all z values we'll find
-        // Don't pre-populate with original data anymore
-        
-        // Ensure layer data is number array
-        let layerData: number[];
-        if (Array.isArray(layer.data)) {
-            layerData = layer.data.map(gid => {
-                if (typeof gid === 'number') {
-                    return gid;
-                } else {
-                    return parseInt(String(gid), 10);
-                }
-            });
-        } else {
-            // If data is a string, it might be compressed - for now, skip this layer
-            reorganizedLayers.push(layer);
-            continue;
-        }
-        
-        let tilesProcessed = 0;
-        let tilesWithZ = 0;
-        
-        // Analyze each tile in the layer
-        for (let i = 0; i < layerData.length; i++) {
-            const gid = layerData[i];
-            
-            if (gid === 0) continue; // Empty tile
-            
-            tilesProcessed++;
-            
-            // Find the corresponding tileset
-            let tileset: TileSet | undefined;
-            for (let j = tilesets.length - 1; j >= 0; j--) {
-                if (tilesets[j].firstgid && tilesets[j].firstgid <= gid) {
-                    tileset = tilesets[j];
-                    break;
-                }
-            }
-            
-            if (!tileset) {
-                // If no tileset found, put tile in z=0 layer
-                if (!layersByZ.has(0)) {
-                    layersByZ.set(0, new Array(layerData.length).fill(0));
-                }
-                layersByZ.get(0)![i] = gid;
-                continue;
-            }
-            
-            // Get tile properties from tileset
-            const localTileId = gid - tileset.firstgid;
-            // @ts-ignore
-            const tileProperties = tileset.tileset.tiles?.[localTileId]?.properties;
-            const zValue = tileProperties?.z ?? 0;
-            
-            // Count tiles with explicit z property
-            if (tileProperties?.z !== undefined) {
-                tilesWithZ++;
-            }
-            
-            // Create or get the layer for this z value
-            if (!layersByZ.has(zValue)) {
-                layersByZ.set(zValue, new Array(layerData.length).fill(0));
-            }
-            
-            // Place tile in the appropriate z layer
-            layersByZ.get(zValue)![i] = gid;
-        }
-        
-        // Create layers for each z value, ensuring z=0 comes first
-        const sortedZValues = Array.from(layersByZ.keys()).sort((a, b) => a - b);
-        
-        for (const zValue of sortedZValues) {
-            const layerDataForZ = layersByZ.get(zValue)!;
-            
-            // Only create layer if it has tiles
-            if (layerDataForZ.some(gid => gid !== 0)) {
-                const newLayer = {
-                    ...layer,
-                    name: `${layer.name}_z${zValue}`, // Always add _z suffix
-                    data: layerDataForZ,
-                    properties: {
-                        ...layer.properties,
-                        z: zValue
-                    }
-                };
-                
-                reorganizedLayers.push(newLayer);
-            }
-        }
-    }
-    
-    // Sort final layers to ensure z=0 layers come first, then by z value
-    reorganizedLayers.sort((a, b) => {
-        const zA = a.properties?.z ?? 0.5;
-        const zB = b.properties?.z ?? 0.5;
-        return zA - zB;
-    });
-    
-    return reorganizedLayers;
-}
-
-export function TiledMap(props) {
-    const { map, basePath, createLayersPerTilesZ } = useProps(props, {
-        createLayersPerTilesZ: false,
-        basePath: ''
-    })
-    const layers = signal<TiledLayer[]>([])
-    const objectLayer = props.objectLayer
-    let tilesets: TileSet[] = []
-    let mapData: TiledMap = {} as TiledMap
-
-    const parseTmx = async (file: string, relativePath: string = '') => {
-        if (typeof file !== 'string') {
-            return file
-        }
-        // @ts-ignore
-        const parser = new TiledParserFile(
-            file,
-            {
-                basePath: '',
-                staticDir: '',
-                relativePath
-            }
-        )
-        const data = await parser.parseFilePromise({
-            getOnlyBasename: false
-        })
-
-        return data
-    }
-
-    effect(async () => {
-        const _map = map()
-        if (_map) {
-            mapData = await parseTmx(_map, basePath())
-            tilesets = [] // Reset tilesets array
-            for (let tileSet of mapData.tilesets) {
-                // @ts-ignore
-                if (tileSet.tile) tileSet.tiles = tileSet.tile
-                if (!tileSet.tiles) tileSet.tiles = []
-                tilesets.push(await new TileSet(tileSet).load(tileSet.image.source))
-            }
-            
-            // Reorganize layers by tile z property if enabled
-            let finalLayers = mapData.layers;
-            if (createLayersPerTilesZ()) {
-                finalLayers = reorganizeLayersByTileZ(mapData.layers, tilesets, mapData);
-            }
-            
-            layers.set(finalLayers)
-        }
-    })
-
-    const createLayer = (layers, props = {}) => {
-        return h(Container, props, loop<any>(layers, (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(signal(layer.layers), layer)
-                case TiledLayerType.ObjectGroup:
-                    const child = objectLayer?.(layer)
-                    return h(Container, layer, child)
-                default:
-                    return h(Container)
-            }
-        }))
-    }
-
-    return h(Container, props, createLayer(layers))
-}