canvasengine 1.0.8 → 2.0.0-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,34 @@
+<Container flexDirection="column" width="500px">
+    <Sprite 
+        image="/assets/logo.png" 
+        anchor="0.5" 
+        rotation
+        scale
+        @pointerenter={onEnter} 
+        @pointerleave={onLeave}
+    />
+    <Text text size="70" fontFamily="Helvetica" x="90" y="-30" />
+</Container>
+
+<script>
+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,4 @@
+import App from './components/app.ce'
+import { bootstrapCanvas } from 'canvasengine';
+
+await bootstrapCanvas(document.getElementById("root"), App);

package/starter/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "template",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "dev": "vite"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "type": "module",
+  "devDependencies": {
+    "vite": "^6.0.3"
+  }
+}

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": false,
+    "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/core/ModelServer.js

@@ -1,251 +0,0 @@
-exports.Class = function(Class, CE) {
-	var io = CE.io;
-	/**
-		@doc server
-		@class ModelServer Model used for the server. Socket.io resumes with a notion of class
-			1. Import CanvasEngine
-			2. Listen a port
-			3. Initialize the model with a main class
-			<code>
-				var CE = require("canvasengine").listen(8336);
-
-				CE.Model.init("Main", {
-
-					initialize: function() {
-						// Code
-					}
-				});
-			</code>
-	*/
-	Class.create("ModelServer", {
-		/**
-			@doc server/
-			@property socket The socket user (socket.io)
-			@type Object
-			@default null
-		*/
-		socket: null,
-		_models: {},
-		/**
-			@doc server/
-			@method init Initializes the connection and call the class
-			@params {String} name Class name
-			@params {Array} name (optional) Name of the methods that can be called by the client
-			@params {Object} model (optional) Properties and methods of this class
-				- the "initialize" method is called automatically when the connection
-				- the "disconnect" method is called when the user logs out
-			@example
-				<code>
-					var CE = require("canvasengine").listen(8336);
-
-					CE.Model.init("Main", {
-
-						initialize: function() {
-							// Code
-						}
-					});
-				</code>
-			@return {ModelServer}
-		*/
-		init: function(name, events, model) {
-			if (!(events instanceof Array)) {
-				model = events;
-				events = false;
-			}
-			if (!events) {
-				events = [];
-			}
-			var self = this;
-			events.push("disconnect");
-			this.create(name, events, model);
-			io.sockets.on('connection', function (socket) {
-				self.socket = socket;
-				self.new(name);
-			});
-			return this;
-		},
-		/**
-			@doc server/
-			@method create Create a model
-			@params {String} name Class name
-			@params {Array} name (optional) Name of the methods that can be called by the client
-			@params {Object} model (optional) Properties and methods of this class
-			@example
-				Module in "/mods/myclass.js" :
-				<code>
-					exports.Class = function(CE) {
-						return CE.Model.create("MyClass", {
-
-							initialize: function() {
-								// Code
-							}
-							
-						});
-					}	
-				</code>
-				In main JS file :
-				<code>
-					var CE = require("canvasengine").listen(8336);
-					CE.Model.init("Main", {
-
-						initialize: function() {
-							var Class = require('./mods/myclass').Class(CE),
-								myclass = Class.new("MyClass");
-						}
-					});
-				</code>
-			@return {Class}
-		*/
-		create: function(name, events, model) {
-			if (!(events instanceof Array)) {
-				model = events;
-				events = false;
-			}
-			var self = this;
-			this._models[name] = events;
-			return Class.create(name, model).extend({
-				/**
-					@doc server/
-					@property scene Sends data to the scene
-					@type Object
-					@example
-						Server :
-						<code>
-							var CE = require("canvasengine").listen(8336);
-							CE.Model.init("Main", {
-								initialize: function() {
-									 this.scene.emit("foo", "Hello");
-								}
-							});
-						</code>
-						Client :
-						var Model = io.connect('http://127.0.0.1:8333');
-
-						var canvas = CE.defines("canvas").
-							ready(function() {
-								canvas.Scene.call("MyScene");
-							});
-
-						canvas.Scene.new({
-						  name: "MyScene",
-						  model: Model,
-						  events: ["foo"], 
-						  ready: function(stage) {
-							
-						  },
-						  foo: function(text) {
-							 console.log(text);
-						  }
-						});
-				*/
-				scene: {
-					/**
-						@doc server/
-						@method scene.emit (View Socket.io)
-					*/
-					emit: function(name, value) {
-						self.socket.emit(name, value);
-					},
-					/**
-						@doc server/
-						@method scene.broadcast.emit (View Socket.io)
-					*/
-					/**
-						@doc server/
-						@method scene.broadcast.to (View Socket.io)
-					*/
-					broadcast: {
-						emit: function(name, value) {
-							self.socket.broadcast.emit(name, value);
-						},
-						to: function(room, name, value) {
-							self.socket.broadcast.to(room).emit(name, value);
-						}
-					},
-					/**
-						@doc server/
-						@method scene.join (View Socket.io)
-					*/
-					join: function(room) {
-						self.socket.join(room);
-					},
-					/**
-						@doc server/
-						@method scene.leave (View Socket.io)
-					*/
-					leave: function(room) {
-						self.socket.leave(room);
-					},
-					/**
-						@doc server/
-						@method scene.disconnect (View Socket.io)
-					*/
-					disconnect: function(data) {
-						io.sockets.emit(data);
-					}
-				}
-			});
-			
-		},
-		/**
-			@doc server/
-			@method new Instantiating a model
-			@params {String} name Class name
-			@example
-				Module in "/mods/myclass.js" :
-				<code>
-					exports.Class = function(CE) {
-						var Class = CE.Model.create("MyClass", {
-
-							initialize: function() {
-								// Code
-							},
-							
-							foo: function() {
-								console.log("Hello World");
-							}
-							
-						});
-						return Class.new("MyClass");
-					}	
-				</code>
-				In main JS file :
-				<code>
-					var CE = require("canvasengine").listen(8336);
-					CE.Model.init("Main", {
-
-						initialize: function() {
-							var myclass = require('./mods/myclass').Class(CE);
-							myclass.foo();
-						}
-					});
-				</code>
-			@return {Class}
-		*/
-		new: function(name) {
-			var self = this;
-			var _class = Class.new(name);
-			var events = this._models[name];
-			if (events) {
-				for (var key in events) {
-					obj = _class[events[key]];
-					if (obj) {
-						setEvent.call(this, _class, key, obj);
-					}
-				}
-			}
-			
-			function setEvent(_class, key, obj) {
-				this.socket.on(events[key], function(data) {
-					if (!data) {
-						data = {};
-					}
-					if (obj) obj.call(_class, data);
-				});
-			}
-			
-			return _class;
-		}
-	});
-	return Class.new("ModelServer");
-}