canvasengine 1.3.0 → 2.0.0-beta.2

package/src/components/DrawMap/index.ts

@@ -0,0 +1,65 @@
+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/Graphic.ts

@@ -0,0 +1,147 @@
+import { effect, Signal } from "@signe/reactive";
+import { Graphics as PixiGraphics } from "pixi.js";
+import { createComponent, registerComponent } from "../engine/reactive";
+import { DisplayObject } from "./DisplayObject";
+import { DisplayObjectProps } from "./types/DisplayObject";
+import { useProps } from "../hooks/useProps";
+
+interface GraphicsProps extends DisplayObjectProps {
+  draw?: (graphics: PixiGraphics) => void;
+}
+
+interface RectProps extends DisplayObjectProps {
+  width: number;
+  height: number;
+  color: string;
+}
+
+interface CircleProps extends DisplayObjectProps {
+  radius: number;
+  color: string;
+}
+
+interface EllipseProps extends DisplayObjectProps {
+  width: number;
+  height: number;
+  color: string;
+}
+
+interface TriangleProps extends DisplayObjectProps {
+  base: number;
+  height: number;
+  color: string;
+}
+
+interface SvgProps extends DisplayObjectProps {
+  svg: string;
+}
+
+class CanvasGraphics extends DisplayObject(PixiGraphics) {
+  onInit(props: GraphicsProps) {
+    super.onInit(props);
+    if (props.draw) {
+      effect(() => {
+        this.clear();
+        props.draw?.(this);
+      });
+    }
+  }
+}
+
+interface CanvasGraphics extends PixiGraphics {}
+
+registerComponent("Graphics", CanvasGraphics);
+
+export function Graphics(props: GraphicsProps) {
+  return createComponent("Graphics", props);
+}
+
+export function Rect(props: RectProps) {
+  const { width, height, color, borderRadius, border } = useProps(props, {
+    borderRadius: null,
+    border: null
+  })
+  return Graphics({
+    draw: (g) => {
+      if (borderRadius()) {
+        g.roundRect(0, 0, width(), height(), borderRadius());
+      } else {
+        g.rect(0, 0, width(), height());
+      }
+      if (border) {
+        g.stroke(border);
+      }
+      g.fill(color());
+    },
+    ...props
+  })
+}
+
+function drawShape(g: PixiGraphics, shape: 'circle' | 'ellipse', props: {
+  radius: Signal<number>;
+  color: Signal<string>;
+  border: Signal<number>;
+} | {
+  width: Signal<number>;
+  height: Signal<number>;
+  color: Signal<string>;
+  border: Signal<number>;
+}) {
+  const { color, border } = props;
+  if ('radius' in props) {
+    g.circle(0, 0, props.radius());
+  } else {
+    g.ellipse(0, 0, props.width() / 2, props.height() / 2);
+  }
+  if (border()) {
+    g.stroke(border());
+  }
+  g.fill(color());
+}
+
+export function Circle(props: CircleProps) {  
+  const { radius, color, border } = useProps(props, {
+    border: null
+  })
+  return Graphics({
+    draw: (g) => drawShape(g, 'circle', { radius, color, border }),
+    ...props
+  })
+}
+
+export function Ellipse(props: EllipseProps) {
+  const { width, height, color, border } = useProps(props, {
+    border: null
+  })
+  return Graphics({
+    draw: (g) => drawShape(g, 'ellipse', { width, height, color, border }),
+    ...props
+  })
+}
+
+export function Triangle(props: TriangleProps) {
+  const { width, height, color, border } = useProps(props, {
+    border: null,
+    color: '#000'
+  })
+  return Graphics({
+    draw: (g) => {
+      g.moveTo(0, height());
+      g.lineTo(width() / 2, 0);
+      g.lineTo(width(), height());
+      g.lineTo(0, height());
+      g.fill(color());
+      if (border) {
+        g.stroke(border);
+      }
+    },
+    ...props
+  })
+}
+
+export function Svg(props: SvgProps) {
+  return Graphics({
+    draw: (g) => g.svg(props.svg),
+    ...props
+  })
+}

package/src/components/NineSliceSprite.ts

@@ -0,0 +1,46 @@
+import { Assets, NineSliceSprite as PixiNineSliceSprite, Texture } from "pixi.js";
+import { createComponent, registerComponent } from "../engine/reactive";
+import { DisplayObject } from "./DisplayObject";
+import { DisplayObjectProps } from "./types/DisplayObject";
+
+interface NineSliceSpriteProps extends DisplayObjectProps {
+    image?: string;
+    texture?: Texture;
+    width?: number;
+    height?: number;
+    leftWidth?: number;
+    rightWidth?: number;
+    topHeight?: number;
+    bottomHeight?: number;
+    roundPixels?: boolean;
+}
+
+class CanvasNineSliceSprite extends DisplayObject(PixiNineSliceSprite) {
+  constructor() {
+    // @ts-ignore
+    super({
+        width: 0,
+        height: 0
+    });
+  }
+
+  async onUpdate(props: NineSliceSpriteProps) {
+    for (const [key, value] of Object.entries(props)) {
+      if (value !== undefined) {
+        if (key === 'image') {
+          this.texture = await Assets.load(value);
+        } else if (key in this) {
+          (this as any)[key] = value;
+        }
+      }
+    }
+  }
+}
+
+interface CanvasNineSliceSprite extends PixiNineSliceSprite {}
+
+registerComponent("NineSliceSprite", CanvasNineSliceSprite);
+
+export function NineSliceSprite(props: NineSliceSpriteProps) {
+  return createComponent("NineSliceSprite", props);
+}

package/src/components/ParticleEmitter.ts

@@ -0,0 +1,39 @@
+import * as particles from "@barvynkoa/particle-emitter";
+import { createComponent, registerComponent } from "../engine/reactive";
+import { CanvasContainer } from "./Container";
+import { Signal } from "@signe/reactive";
+
+class CanvasParticlesEmitter extends CanvasContainer {
+  private emitter: particles.Emitter | null;
+  private elapsed: number = Date.now();
+
+  onMount(params) {
+    super.onMount(params);
+    const { props } = params;
+    const tick: Signal = props.context.tick;
+    this.emitter = new particles.Emitter(this as any, props.config);
+    //this.emitter.emit = true
+
+    this.subscriptionTick = tick.observable.subscribe((value) => {
+      if (!this.emitter) return;
+      const now = Date.now();
+      this.emitter.update((now - this.elapsed) * 0.001);
+      this.elapsed = now;
+    });
+  }
+
+  onUpdate(props) {}
+
+  onDestroy(): void {
+    super.onDestroy();
+    this.emitter?.destroy();
+    this.emitter = null;
+    this.subscriptionTick.unsubscribe();
+  }
+}
+
+registerComponent("ParticlesEmitter", CanvasParticlesEmitter);
+
+export function ParticlesEmitter(props) {
+  return createComponent("ParticlesEmitter", props);
+}

package/src/components/Scene.ts

@@ -0,0 +1,6 @@
+import { h } from "../engine/signal";
+import { Container } from "./Container";
+
+export function Scene(props) {
+    return h(Container)
+}