canvasengine 2.0.1-beta.2 → 2.0.1

package/compiler/package.json

@@ -1,27 +0,0 @@
-{
-  "name": "@canvasengine/compiler",
-  "version": "2.0.0-beta.1",
-  "description": "",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "scripts": {
-    "build": "tsup",
-    "watch": "tsup --watch"
-  },
-  "type": "module",
-  "publishConfig": {
-    "access": "public"
-  },
-  "keywords": [],
-  "author": "Samuel Ronce",
-  "license": "MIT",
-  "dependencies": {
-    "acorn": "^8.14.0",
-    "peggy": "^4.2.0",
-    "vite": "^6.0.3"
-  },
-  "devDependencies": {
-    "tsup": "^8.3.5",
-    "typescript": "^5.7.2"
-  }
-}

package/compiler/tsconfig.json

@@ -1,29 +0,0 @@
-{
-    "compilerOptions": {
-      "target": "ES2020",
-      "module": "ES2020",
-      "outDir": "./dist",
-      "rootDir": ".",
-      "strict": true,
-      "sourceMap": true,
-      "strictNullChecks": true,
-      "strictPropertyInitialization": false,
-      "moduleResolution": "node",
-      "esModuleInterop": true,
-      "removeComments": false,
-      "noUnusedParameters": false,
-      "noUnusedLocals": false,
-      "noImplicitThis": false,
-      "noImplicitAny": false,
-      "noImplicitReturns": false,
-      "declaration": true,
-      "experimentalDecorators": true, 
-      "emitDecoratorMetadata": true,
-      "stripInternal": true,
-      "skipLibCheck": true,
-      "types": ["node"]
-    },
-    "include": [
-        "."
-    ]
-  }

package/compiler/tsup.config.ts

@@ -1,14 +0,0 @@
-import { defineConfig } from 'tsup'
-
-export default  defineConfig({
-    format: ['esm'],
-    target: 'node20',
-    splitting: true,
-    clean: true,
-    shims: false,
-    dts: true,
-    sourcemap: true,
-    entry: ['index.ts'],
-    outDir: 'dist',
-    external: ['vite', 'acorn', 'peggy', 'typescript'],
-})

package/src/components/DrawMap/index.ts

@@ -1,65 +0,0 @@
-import { effect, signal } from "@signe/reactive";
-import { loop } from "../../engine/reactive";
-import { h } from "../../engine/signal";
-import { useProps } from "../../hooks/useProps";
-import { Container } from "../Container";
-import { Sprite } from "../Sprite";
-
-interface TileData {
-  id: number;
-  rect: [number, number, number, number];
-  drawIn: [number, number];
-  layerIndex: number;
-}
-
-export function ImageMap(props) {
-  const { imageSource, tileData } = useProps(props);
-  const tiles = signal<TileData[]>([]);
-
-  effect(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(Container, props, ...layers);
-  };
-
-  const createTileLayer = (layerIndex: number, sortableChildren = false) => {
-    return h(
-      Container,
-      {
-        sortableChildren,
-      },
-      loop(tiles, (object) => {
-
-        if (object.tag && layerIndex == 1) {
-            return object
-        }
-
-        object.layerIndex ||= 1;
-        if (object.layerIndex !== layerIndex) return null;
-
-        const [x, y, width, height] = object.rect;
-        const [drawX, drawY] = object.drawIn;
-
-        return h(Sprite, {
-          image: imageSource(),
-          x: drawX,
-          y: drawY,
-          rectangle: { x, y, width, height },
-          zIndex: drawY + height - 70,
-        // zIndex: 0
-        });
-      })
-    );
-  };
-
-  return createLayeredTiles();
-}

package/src/components/Tilemap/Tile.ts

@@ -1,79 +0,0 @@
-import { CompositeTilemap } from "@pixi/tilemap";
-import { Tile as TiledTileClass } from '@rpgjs/tiled';
-import { AnimatedSprite, Texture, groupD8 } from "pixi.js";
-import { TileSet } from "./TileSet";
-
-export class Tile extends AnimatedSprite {
-    static getTextures(tile: TiledTileClass, tileSet: TileSet) {
-        const textures: Texture[] = [];
-
-        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;
-    }
-
-    animations: { tileid: number, duration: number }[] = []
-    _x: number = 0
-    _y: number = 0
-    pointsBufIndex: number
-    properties: any = {}
-
-    constructor(
-        private tile: TiledTileClass,
-        private tileSet: TileSet
-    ) {
-        super(Tile.getTextures(tile, tileSet));
-        this.animations = tile.animations || []
-        this.properties = tile.properties
-        this.textures = Tile.getTextures(tile, tileSet)
-        this.texture = this.textures[0] as Texture
-        this.flip()
-    }
-
-    get gid() {
-        return this.tile.gid
-    }
-
-    setAnimation(frame: CompositeTilemap) {
-        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)
-            }
-        }
-
-        //if (symmetry) this.texture.rotate = symmetry
-    }
-}

package/src/components/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/components/Tilemap/TileLayer.ts

@@ -1,163 +0,0 @@
-import { CompositeTilemap, POINT_STRUCT_SIZE, Tilemap, settings } from '@pixi/tilemap';
-import { Layer, Tile as TileClass } from '@rpgjs/tiled';
-import { createComponent, registerComponent } from '../../engine/reactive';
-import { DisplayObject } from '../DisplayObject';
-import { Tile } from './Tile';
-import { TileSet } from './TileSet';
-
-settings.use32bitIndex = true
-
-export class CanvasTileLayer extends DisplayObject(CompositeTilemap) {
-    private _tiles: any = {}
-    tiles: (TileClass | null)[]
-    private _layer: Layer
-
-    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
-    }
-
-    /** @internal */
-    changeTile(x: number, y: number) {
-        const { tilewidth, tileheight } = this._layer
-        x = Math.floor(x / tilewidth)
-        y = Math.floor(y / tileheight)
-        const oldTile: Tile = this._tiles[x + ';' + y]
-        const newTile = this.createTile(x, y)
-        if (!oldTile && newTile) {
-            this._addFrame(newTile, x, y)
-        }
-        else {
-            if (newTile) {
-                const bufComposite: CompositeTilemap = new CompositeTilemap()
-                const frame = bufComposite.tile(newTile.texture, newTile.x, newTile.y)
-                newTile.setAnimation(frame)
-                this._tiles[x + ';' + y] = newTile
-                // @ts-ignore
-                const pointsBufComposite = (bufComposite.children[0] as Tilemap).pointsBuf
-                    // Change Texture (=0, 1 and 7, rotate (=4), animX (=5), animY (=6))
-                    ;[0, 1, 4, 6, 7, 8].forEach((i) => {
-                        if (this.pointsBuf) this.pointsBuf[oldTile.pointsBufIndex + i] = pointsBufComposite[i]
-                    })
-                // @ts-ignore
-                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(): number[] | null {
-        const child = this.children[0] as Tilemap
-        if (!child) return null
-        return child['pointsBuf']
-    }
-
-    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
-    }
-
-    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)
-                }
-            }
-        }
-    }
-}
-
-export interface CanvasTileLayer extends CompositeTilemap { }
-
-registerComponent('CompositeTileLayer', CanvasTileLayer)
-
-export function CompositeTileLayer(props) {
-    return createComponent('CompositeTileLayer', props)
-}

package/src/components/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;
-  }
-}