canvasengine 2.0.1-beta.1 → 2.0.1

package/src/compiler/grammar.pegjs

@@ -1,180 +0,0 @@
-{
-  function generateError(message, location) {
-    const { start, end } = location;
-    const errorMessage = `${message}\n` +
-      `at line ${start.line}, column ${start.column} to line ${end.line}, column ${end.column}`;
-    throw new Error(errorMessage);
-  }
-}
-
-start
-  = _ elements:(element)* _ {
-    if (elements.length === 1) {
-      return elements[0];
-    }
-    return `[${elements.join(',')}]`;
-  }
-
-element
-  = forLoop
-  / ifCondition
-  / selfClosingElement
-  / openCloseElement
-  / comment 
-
-selfClosingElement
-  = _ "<" _ tagName:tagName _ attributes:attributes _ "/>" _ {
-      const attrs = attributes.length > 0 ? `{ ${attributes.join(', ')} }` : null;
-      return attrs ? `h(${tagName}, ${attrs})` : `h(${tagName})`;
-    }
-
-openCloseElement
-  = "<" _ tagName:tagName _ attributes:attributes _ ">" _ content:content _ "</" _ closingTagName:tagName _ ">" {
-      if (tagName !== closingTagName) {
-        error("Mismatched opening and closing tags");
-      }
-      const attrs = attributes.length > 0 ? `{ ${attributes.join(', ')} }` : null;
-      const children = content ? content : null;
-      if (attrs && children) {
-        return `h(${tagName}, ${attrs}, ${children})`;
-      } else if (attrs) {
-        return `h(${tagName}, ${attrs})`;
-      } else if (children) {
-        return `h(${tagName}, null, ${children})`;
-      } else {
-        return `h(${tagName})`;
-      }
-    }
-
-  / "<" _ tagName:tagName _ attributes:attributes _ {
-      generateError("Syntaxe d'élément invalide", location());
-    }
-
-attributes
-  = attrs:(attribute (_ attribute)*)? {
-      return attrs
-        ? [attrs[0]].concat(attrs[1].map(a => a[1]))
-        : [];
-    }
-
-attribute
-  = staticAttribute
-  / dynamicAttribute
-  / eventHandler
-
-eventHandler
-  = "@" eventName:identifier _ "=" _ "{" _ handlerName:attributeValue _ "}" {
-      return `${eventName}: ${handlerName}`;
-    }
-     / "@" eventName:attributeName _ {
-      return eventName;
-    }
-
-dynamicAttribute
-  = attributeName:attributeName _ "=" _ "{" _ attributeValue:attributeValue _ "}" {
-      if (attributeValue.trim().match(/^[a-zA-Z_]\w*$/)) {
-        return `${attributeName}: ${attributeValue}`;
-      } else {
-        return `${attributeName}: computed(() => ${attributeValue.replace(/@?[a-zA-Z_][a-zA-Z0-9_]*(?!:)/g, (match) => {
-          if (match.startsWith('@')) {
-            return match.substring(1);
-          }
-          return `${match}()`;
-        })})`;
-      }
-    }
-  / attributeName:attributeName _ {
-      return attributeName;
-    }
-
-attributeValue
-  = $([^{}]* ("{" [^{}]* "}" [^{}]*)*) {
-    const t = text().trim()
-    if (t.startsWith("{") && t.endsWith("}")) {
-      return `(${t})`;
-    }
-    return t
-  }
-
-staticAttribute
-  = attributeName:attributeName _ "=" _ "\"" attributeValue:staticValue "\"" {
-      return `${attributeName}: ${attributeValue}`;
-    }
-
-eventAttribute
-  = "(" _ eventName:eventName _ ")" _ "=" _ "\"" eventAction:eventAction "\"" {
-      return `${eventName}: () => { ${eventAction} }`;
-    }
-
-staticValue
-  = [^"]+ {
-      var val = text();
-      return isNaN(val) ? `'${val}'` : val;
-    }
-
-content
-  = elements:(element)* {
-      const filteredElements = elements.filter(el => el !== null);
-      if (filteredElements.length === 0) return null;
-      if (filteredElements.length === 1) return filteredElements[0];
-      return `[${filteredElements.join(', ')}]`;
-    }
-
-textNode
-  = text:$([^<]+) {
-      const trimmed = text.trim();
-      return trimmed ? `'${trimmed}'` : null;
-    }
-
-textElement
-  = text:[^<>]+ {
-      const trimmed = text.join('').trim();
-      return trimmed ? JSON.stringify(trimmed) : null;
-    }
-
-forLoop
-  = _ "@for" _ "(" _ variableName:identifier _ "of" _ iterable:identifier _ ")" _ "{" _ content:content _ "}" _ {
-      return `loop(${iterable}, (${variableName}) => ${content})`;
-    }
-
-ifCondition
-  = _ "@if" _ "(" _ condition:condition _ ")" _ "{" _ content:content _ "}" _ {
-      return `cond(${condition}, () => ${content})`;
-    }
-
-tagName
-  = [a-zA-Z][a-zA-Z0-9]* { return text(); }
-
-attributeName
-  = [a-zA-Z][a-zA-Z0-9-]* { return text(); }
-
-eventName
-  = [a-zA-Z][a-zA-Z0-9-]* { return text(); }
-
-variableName
-  = [a-zA-Z_][a-zA-Z0-9_]* { return text(); }
-
-iterable
-  = [a-zA-Z_][a-zA-Z0-9_]* { return text(); }
-
-condition
-  = $([^)]*) { return text().trim(); }
-
-eventAction
-  = [^"]* { return text(); }
-
-_ 'whitespace'
-  = [ \t\n\r]* 
-
-identifier
-  = [a-zA-Z_][a-zA-Z0-9_]* { return text(); }
-
-comment
-  = singleComment+ {
-    return null
-  }
-
-singleComment
-  = "<!--" _ content:((!("-->") .)* "-->") _ {
-      return null;
-    }

package/src/compiler/vite.ts

@@ -1,166 +0,0 @@
-import { createFilter } from "vite";
-import { parse } from "acorn";
-import fs from "fs";
-import pkg from "peggy";
-import path from "path";
-import * as ts from "typescript"; // Import TypeScript package
-import { fileURLToPath } from 'url';
-
-const { generate } = pkg;
-
-const DEV_SRC = "../../src"
-
-export default function canvasengine() {
-  const filter = createFilter("**/*.ce");
-
-  // Convert import.meta.url to a file path
-  const __filename = fileURLToPath(import.meta.url);
-  const __dirname = path.dirname(__filename);
-
-  const grammar = fs.readFileSync(
-    path.join(__dirname, "grammar.pegjs").replace("dist/compiler/grammar.pegjs", "src/compiler/grammar.pegjs"), 
-  "utf8");
-  const parser = generate(grammar);
-  const isDev = process.env.NODE_ENV === "development";
-  const FLAG_COMMENT = "/*--[TPL]--*/";
-
-  const PRIMITIVE_COMPONENTS = [
-    "Canvas",
-    "Sprite",
-    "Text",
-    "Joystick",
-    "Viewport",
-    "Graphics",
-    "Container",
-    "ImageMap",
-    "NineSliceSprite",
-    "Rect",
-    "Circle",
-    "svg"
-  ];
-
-  return {
-    name: "vite-plugin-ce",
-    transform(code: string, id: string) {
-      if (!filter(id)) return;
-
-      // Extract the script content
-      const scriptMatch = code.match(/<script>([\s\S]*?)<\/script>/);
-      let scriptContent = scriptMatch ? scriptMatch[1].trim() : "";
-      
-      // Transform SVG tags to Svg components
-      let template = code.replace(/<script>[\s\S]*?<\/script>/, "")
-        .replace(/^\s+|\s+$/g, '');
-      
-      // Add SVG transformation
-      template = template.replace(/<svg>([\s\S]*?)<\/svg>/g, (match, content) => {
-        return `<Svg content="${content.trim()}" />`;
-      });
-      
-      const parsedTemplate = parser.parse(template);
-
-      // trick to avoid typescript remove imports in scriptContent
-      scriptContent += FLAG_COMMENT + parsedTemplate
-
-      let transpiledCode = ts.transpileModule(scriptContent, {
-        compilerOptions: {
-          module: ts.ModuleKind.Preserve,
-        },
-      }).outputText;
-
-      // remove code after /*---*/
-      transpiledCode = transpiledCode.split(FLAG_COMMENT)[0]
-
-      // Use Acorn to parse the script content
-      const parsed = parse(transpiledCode, {
-        sourceType: "module",
-        ecmaVersion: 2020,
-      });
-
-      // Extract imports
-      const imports = parsed.body.filter(
-        (node) => node.type === "ImportDeclaration"
-      );
-
-      // Extract non-import statements from scriptContent
-      const nonImportCode = parsed.body
-        .filter((node) => node.type !== "ImportDeclaration")
-        .map((node) => transpiledCode.slice(node.start, node.end))
-        .join("\n");
-
-      let importsCode = imports
-        .map((imp) => {
-          let importCode = transpiledCode.slice(imp.start, imp.end);
-          if (isDev && importCode.includes("from 'canvasengine'")) {
-            importCode = importCode.replace(
-              "from 'canvasengine'",
-              `from '${DEV_SRC}'`
-            );
-          }
-          return importCode;
-        })
-        .join("\n");
-
-      // Define an array for required imports
-      const requiredImports = ["h", "computed", "cond", "loop"];
-
-      // Check for missing imports
-      const missingImports = requiredImports.filter(
-        (importName) =>
-          !imports.some(
-            (imp) =>
-              imp.specifiers &&
-              imp.specifiers.some(
-                (spec) =>
-                  spec.type === "ImportSpecifier" &&
-                  spec.imported && 
-                  'name' in spec.imported &&
-                  spec.imported.name === importName
-              )
-          )
-      );
-
-      // Add missing imports
-      if (missingImports.length > 0) {
-        const additionalImportCode = `import { ${missingImports.join(
-          ", "
-        )} } from ${isDev ? `'${DEV_SRC}'` : "'canvasengine'"};`;
-        importsCode = `${additionalImportCode}\n${importsCode}`;
-      }
-
-      // Check for primitive components in parsedTemplate
-      const primitiveImports = PRIMITIVE_COMPONENTS.filter((component) =>
-        parsedTemplate.includes(`h(${component}`)
-      );
-
-      // Add missing imports for primitive components
-      primitiveImports.forEach((component) => {
-        const importStatement = `import { ${component} } from ${
-          isDev ? `'${DEV_SRC}'` : "'canvasengine'"
-        };`;
-        if (!importsCode.includes(importStatement)) {
-          importsCode = `${importStatement}\n${importsCode}`;
-        }
-      });
-
-      // Generate the output
-      const output = String.raw`
-      ${importsCode}
-      import { useProps, useDefineProps } from ${isDev ? `'${DEV_SRC}'` : "'canvasengine'"}
-
-      export default function component($$props) {
-        const $props = useProps($$props)
-        const defineProps = useDefineProps($$props)
-        ${nonImportCode}
-        let $this = ${parsedTemplate}
-        return $this
-      }
-      `;
-
-      return {
-        code: output,
-        map: null,
-      };
-    },
-  };
-}

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)
-    }
-}