canvasengine 2.0.1-beta.1 → 2.0.1

package/src/presets/NightAmbiant.ts

@@ -1,122 +0,0 @@
-import { Container, Graphics } from "../components";
-import { h, mount } from "../engine/signal";
-import { animatedSignal } from "../engine/animation";
-import { RadialGradient } from "../utils/RadialGradient";
-import { effect, isSignal, signal } from "@signe/reactive";
-import { useProps } from "../hooks/useProps";
-import { isObservable } from "rxjs";
-
-export function LightSpot(opts) {
-  const { radius } = useProps(opts);
-  const scale = animatedSignal(1);
-
-  const minScale = 1;
-  const maxScale = 2; // Reduced max scale for subtler effect
-  const scintillationSpeed = 0.001; // Significantly reduced for slower scintillation
-
-  const animate = () => {
-    // Use time-based animation for smoother, slower scintillation
-    const time = Date.now() * scintillationSpeed;
-
-    // Combine multiple sine waves for a more natural, less predictable effect
-    const scintillationFactor =
-      (Math.sin(time) + Math.sin(time * 1.3) + Math.sin(time * 0.7)) / 3;
-
-    // Map the scintillation factor to the scale range
-    const newScale =
-      minScale + (maxScale - minScale) * (scintillationFactor * 0.5 + 0.5);
-
-    scale.update(() => newScale);
-
-    requestAnimationFrame(animate);
-  };
-
-  animate();
-
-  const draw = (g) => {
-    const size = radius() * 2;
-    const gradient = new RadialGradient(size, size, 0, size, size, 0);
-    gradient.addColorStop(0, "rgba(255, 255, 0, 1)");
-    gradient.addColorStop(0.5, "rgba(255, 255, 0, 0.3)");
-    gradient.addColorStop(0.8, "rgba(255, 255, 0, 0)");
-
-    const translate = size / 2;
-
-    g.rect(-translate, -translate, size, size).fill(
-      gradient.render({ translate: { x: translate, y: translate } })
-    );
-  };
-
-  return h(Graphics, {
-    draw,
-    ...opts,
-    scale,
-  });
-}
-
-export function NightAmbiant(props) {
-  const { children } = props;
-  let el
-  const width = signal(0);
-  const height = signal(0);
-  let subscription
-  const draw = (rectAndHole) => {
-    const margin = 80
-    rectAndHole.rect(-margin, -margin, width() + margin*2, height() + margin*2);
-    rectAndHole.fill(0x000000);
-    const applyChildren = (child) => {
-      const x = isSignal(child.propObservables.x)
-        ? child.propObservables.x()
-        : child.props.x;
-      const y = isSignal(child.propObservables.y)
-        ? child.propObservables.y()
-        : child.props.y;
-      const radius = isSignal(child.propObservables.radius)
-        ? child.propObservables.radius()
-        : child.props.radius;
-      rectAndHole.circle(x, y, radius);
-      rectAndHole.cut();
-    }
-    for (let child of children) {
-      if (isObservable(child)) {
-        if (subscription) {
-          subscription.unsubscribe()
-        }
-        subscription = child.subscribe((event) => {
-           for (let child of event.fullElements) {
-            applyChildren(child)
-           }
-        })
-        return
-      }
-      applyChildren(child)
-    }
-  };
-
-  mount((el) => {
-    effect(() => {
-      const { displayWidth, displayHeight } = el.componentInstance
-      const w = +displayWidth()
-      const h = +displayHeight()
-      setTimeout(() => {
-        width.update(() => w)
-        height.update(() => h)
-      }, 0) // hack
-    });
-  });
-
-  return h(
-    Container,
-    {
-      width: "100%",
-      height: "100%",
-      ...props,
-    },
-    h(Graphics, {
-      draw,
-      alpha: 0.8,
-      blur: 80,
-    }),
-    ...children
-  );
-}

package/src/presets/Particle.ts

@@ -1,53 +0,0 @@
-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/starter/components/app.ce

@@ -1,18 +0,0 @@
-<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

@@ -1,35 +0,0 @@
-<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

@@ -1,21 +0,0 @@
-<!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

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

package/starter/package.json

@@ -1,20 +0,0 @@
-{
-  "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

@@ -1,32 +0,0 @@
-{
-  "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

@@ -1,12 +0,0 @@
-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.node.json

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

package/tsup.config.ts

@@ -1,28 +0,0 @@
-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

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