canvasengine 1.3.0 → 2.0.1-beta.1

package/src/presets/Particle.ts

@@ -0,0 +1,53 @@
+import * as PIXI from "pixi.js";
+import { FX } from "revolt-fx";
+import { h, mount, tick } from "../engine/signal";
+import { Container } from "../components";
+import { on } from "../engine/trigger";
+import { useProps } from "../hooks/useProps";
+
+export function Particle(options) {
+  const { emit, settings = {} } = options;
+  const { name } = useProps(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 (settings.emitters) {
+      const lastId = 10000;
+      const emittersWithIds = settings.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 h(Container);
+}

package/src/utils/Ease.ts

@@ -0,0 +1,33 @@
+import { 
+    linear,
+    easeIn,
+    easeInOut,
+    easeOut,
+    circIn,
+    circInOut,
+    circOut,
+    backIn,
+    backInOut,
+    backOut,
+    anticipate,
+    bounceIn,
+    bounceInOut,
+    bounceOut
+} from "popmotion"
+
+export const Easing = {
+    linear,
+    easeIn,
+    easeInOut,
+    easeOut,
+    circIn,
+    circInOut,
+    circOut,
+    backIn,
+    backInOut,
+    backOut,
+    anticipate,
+    bounceIn,
+    bounceInOut,
+    bounceOut
+}

package/src/utils/RadialGradient.ts

@@ -0,0 +1,86 @@
+import { Texture, ImageSource, DOMAdapter, Matrix } from "pixi.js";
+
+export class RadialGradient {
+  private canvas: HTMLCanvasElement;
+  private ctx: CanvasRenderingContext2D | null;
+  private gradient: CanvasGradient | null = null;
+  private texture: Texture | null = null;
+  public transform: Matrix;
+
+  public size = 600;
+
+  constructor(
+    private x0: number,
+    private y0: number,
+    private x1: number,
+    private y1: number,
+    private x2: number,
+    private y2: number,
+    private focalPoint: number = 0
+  ) {
+    this.size = x0;
+    const halfSize = this.size * 0.5;
+
+    this.canvas = DOMAdapter.get().createCanvas() as any;
+    this.canvas.width = this.size;
+    this.canvas.height = this.size;
+    this.ctx = this.canvas.getContext("2d");
+
+    if (this.ctx) {
+      this.gradient = this.ctx.createRadialGradient(
+        halfSize * (1 - focalPoint),
+        halfSize,
+        0,
+        halfSize,
+        halfSize,
+        halfSize - 0.5
+      );
+    }
+  }
+
+  addColorStop(offset: number, color: string) {
+    if (this.gradient) {
+      this.gradient.addColorStop(offset, color);
+    }
+  }
+
+  render({ translate }: { translate?: { x: number; y: number } } = {}) {
+    const { x0, y0, x1, y1, x2, y2, focalPoint } = this;
+    const defaultSize = this.size;
+    if (this.ctx && this.gradient) {
+      this.ctx.fillStyle = this.gradient;
+      this.ctx.fillRect(0, 0, defaultSize, defaultSize);
+
+      this.texture = new Texture({
+        source: new ImageSource({
+          resource: this.canvas,
+          addressModeU: "clamp-to-edge",
+          addressModeV: "clamp-to-edge",
+        }),
+      });
+
+      const m = new Matrix();
+      const dx = Math.sqrt((x1 - x0) * (x1 - x0) + (y1 - y0) * (y1 - y0));
+      const dy = Math.sqrt((x2 - x0) * (x2 - x0) + (y2 - y0) * (y2 - y0));
+      const angle = Math.atan2(y1 - y0, x1 - x0);
+
+      // Calculate the scale factors correctly
+      const scaleX = dx / defaultSize;
+      const scaleY = dy / defaultSize;
+
+      // Apply transformations in the correct order
+      m.rotate(-angle);
+      m.scale(scaleX, scaleY);
+      if (translate) {
+        m.translate(translate.x, translate.y);
+      }
+
+      this.transform = m;
+    }
+
+    return {
+      texture: this.texture,
+      matrix: this.transform,
+    };
+  }
+}

package/starter/components/app.ce

@@ -0,0 +1,18 @@
+<Canvas 
+    backgroundColor="#fff" 
+    width="100%" 
+    height="100%" 
+    antialias="true"
+    >
+    <Container
+        width="100%" 
+        height="100%" 
+        justifyContent="center"
+        alignItems="center">
+        <HelloWorld text="CanvasEngine" />
+    </Container>
+</Canvas>
+
+<script>
+    import HelloWorld from "./hello.ce";
+</script>

package/starter/components/hello.ce

@@ -0,0 +1,35 @@
+<Container flexDirection="column" width="500px">
+    <Sprite 
+        image={imgUrl} 
+        anchor="0.5" 
+        rotation
+        scale
+        @pointerenter={onEnter} 
+        @pointerleave={onLeave}
+    />
+    <Text text size="70" fontFamily="Helvetica" x="90" y="-30" />
+</Container>
+
+<script>
+import imgUrl from '../assets/logo.png'
+import { signal, tick, animatedSignal, Easing } from "canvasengine";
+
+const { text } = defineProps();
+const rotation = signal(0);
+const scale = animatedSignal(1, {
+    duration: 300,
+    ease: Easing.easeInOut,
+});
+
+tick(() => {
+    rotation.update(rotation => rotation + 0.01);
+});
+
+const onEnter = () => {
+    scale.set(1.5);
+};
+
+const onLeave = () => {
+    scale.set(1);
+};
+</script>

package/starter/index.html

@@ -0,0 +1,21 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Canvas Engine</title>
+    <style>
+      body, html, #root {
+        margin: 0;
+        padding: 0;
+        height: 100vh;
+        width: 100vw;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/main.ts"></script>
+  </body>
+</html>

package/starter/main.ts

@@ -0,0 +1,6 @@
+import App from './components/app.ce'
+import { bootstrapCanvas } from 'canvasengine';
+
+bootstrapCanvas(document.getElementById("root"), App).then(() => {
+    console.log("CanvasEngine initialized");
+});

package/starter/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "canvasengine-starter",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "type": "module",
+  "dependencies": {
+    "canvasengine": "2.0.1-beta.1"
+  },
+  "devDependencies": {
+    "vite": "^6.0.3"
+  }
+}

package/starter/tsconfig.json

@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "target": "es2020",
+    "module": "esnext",
+    "outDir": "dist",
+    "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": false,
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+    "types": [
+      "node",
+      "vite/client"
+    ],
+    "resolveJsonModule": true
+  },
+  "include": [
+    ".",
+    "index.d.ts",
+    "node_modules/canvasengine/index.d.ts"
+  ]
+}

package/starter/vite.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from 'vite'
+import vitePluginCe from 'canvasengine/compiler'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vitePluginCe()],
+  resolve: {
+    alias: {
+      path: 'rollup-plugin-node-polyfills/polyfills/path',
+    }
+  }
+});

package/tsconfig.json

@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["dom", "esnext"],
+    "module": "ES2020",
+    "outDir": "./lib",
+    "rootDir": "src",
+    "strict": true,
+    "sourceMap": true,
+    "strictNullChecks": true,
+    "strictPropertyInitialization": false,
+    "moduleResolution": "Bundler",
+    "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": [
+      "src",
+      "sample"
+  ],
+  
+}

package/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/tsup.config.ts

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

package/vitest.config.ts

@@ -0,0 +1,12 @@
+/// <reference types="vitest" />
+import { defineConfig } from 'vite'
+
+export default defineConfig(async () => {
+    return {
+        test: {
+            environment: 'jsdom',
+            pool: 'forks',
+            setupFiles: ['./tests/setup/canvas.ts']
+        }
+    }
+})

package/.gitattributes

@@ -1,22 +0,0 @@
-# Auto detect text files and perform LF normalization
-* text=auto
-
-# Custom for Visual Studio
-*.cs     diff=csharp
-*.sln    merge=union
-*.csproj merge=union
-*.vbproj merge=union
-*.fsproj merge=union
-*.dbproj merge=union
-
-# Standard to msysgit
-*.doc	 diff=astextplain
-*.DOC	 diff=astextplain
-*.docx diff=astextplain
-*.DOCX diff=astextplain
-*.dot  diff=astextplain
-*.DOT  diff=astextplain
-*.pdf  diff=astextplain
-*.PDF	 diff=astextplain
-*.rtf	 diff=astextplain
-*.RTF	 diff=astextplain

package/.npmignore

@@ -1,163 +0,0 @@
-#################
-## Eclipse
-#################
-
-*.pydevproject
-.project
-.metadata
-bin/
-tmp/
-*.tmp
-*.bak
-*.swp
-*~.nib
-local.properties
-.classpath
-.settings/
-.loadpath
-
-# External tool builders
-.externalToolBuilders/
-
-# Locally stored "Eclipse launch configurations"
-*.launch
-
-# CDT-specific
-.cproject
-
-# PDT-specific
-.buildpath
-
-
-#################
-## Visual Studio
-#################
-
-## Ignore Visual Studio temporary files, build results, and
-## files generated by popular Visual Studio add-ons.
-
-# User-specific files
-*.suo
-*.user
-*.sln.docstates
-
-# Build results
-[Dd]ebug/
-[Rr]elease/
-*_i.c
-*_p.c
-*.ilk
-*.meta
-*.obj
-*.pch
-*.pdb
-*.pgc
-*.pgd
-*.rsp
-*.sbr
-*.tlb
-*.tli
-*.tlh
-*.tmp
-*.vspscc
-.builds
-*.dotCover
-
-## TODO: If you have NuGet Package Restore enabled, uncomment this
-#packages/
-
-# Visual C++ cache files
-ipch/
-*.aps
-*.ncb
-*.opensdf
-*.sdf
-
-# Visual Studio profiler
-*.psess
-*.vsp
-
-# ReSharper is a .NET coding add-in
-_ReSharper*
-
-# Installshield output folder
-[Ee]xpress
-
-# DocProject is a documentation generator add-in
-DocProject/buildhelp/
-DocProject/Help/*.HxT
-DocProject/Help/*.HxC
-DocProject/Help/*.hhc
-DocProject/Help/*.hhk
-DocProject/Help/*.hhp
-DocProject/Help/Html2
-DocProject/Help/html
-
-# Click-Once directory
-publish
-
-# Others
-[Bb]in
-[Oo]bj
-sql
-TestResults
-*.Cache
-ClientBin
-stylecop.*
-~$*
-*.dbmdl
-Generated_Code #added for RIA/Silverlight projects
-
-# Backup & report files from converting an old project file to a newer
-# Visual Studio version. Backup files are not needed, because we have git ;-)
-_UpgradeReport_Files/
-Backup*/
-UpgradeLog*.XML
-
-
-
-############
-## Windows
-############
-
-# Windows image file caches
-Thumbs.db
-
-# Folder config file
-Desktop.ini
-
-
-#############
-## Python
-#############
-
-*.py[co]
-
-# Packages
-*.egg
-*.egg-info
-dist
-build
-eggs
-parts
-bin
-var
-sdist
-develop-eggs
-.installed.cfg
-
-# Installer logs
-pip-log.txt
-
-# Unit test / coverage reports
-.coverage
-.tox
-
-#Translations
-*.mo
-
-#Mr Developer
-.mr.developer.cfg
-
-# Mac crap
-.DS_Store