canvasengine 1.3.0 → 2.0.0-beta.2

package/package.json

@@ -1,18 +1,52 @@
-{
-    "name": "canvasengine",
-    "version": "1.3.0",
-    "description": "Use a model for handling server-side events and develop a multiplayer game.",
-    "main": "index.js",
-    "bin": { "canvasengine": "index.js" },
-    "author": "WebCreative5",
-    "keywords": ["html5", "canvas", "game", "model"],
-    "repository" : {
-        "type": "git",
-        "url": "https://github.com/RSamaium/CanvasEngine.git"
-    },
-    "license": "MIT",
-    "dependencies": {
-        "socket.io": "0.9.16"
-    },
-    "engines": { "node": "*" }
+{
+  "name": "canvasengine",
+  "version": "2.0.0-beta.2",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "dependencies": {
+    "@barvynkoa/particle-emitter": "^0.0.1",
+    "@pixi/tilemap": "^5.0.1",
+    "@rpgjs/tiled": "^4.3.0",
+    "@signe/reactive": "^1.0.1",
+    "howler": "^2.2.4",
+    "package.json": "^2.0.1",
+    "pixi-filters": "^6.0.5",
+    "pixi-viewport": "^6.0.3",
+    "pixi.js": "^8.6.4",
+    "popmotion": "^11.0.5",
+    "rxjs": "^7.8.1",
+    "yoga-layout": "^2.0.1"
+  },
+  "devDependencies": {
+    "@types/howler": "^2.2.11"
+  },
+  "author": "Samuel Ronce",
+  "license": "MIT",
+  "homepage": "https://canvasengine.net",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/RSamaium/CanvasEngine.git"
+  },
+  "bugs": {
+    "url": "https://github.com/RSamaium/CanvasEngine/issues"
+  },
+  "keywords": [
+    "canvas",
+    "pixijs",
+    "reactive",
+    "html5"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "overrides": {
+    "revolt-fx": {
+      "pixi.js": "^8.6.4"
+    }
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch"
+  }
 }

package/src/components/Canvas.ts

@@ -0,0 +1,134 @@
+import { effect, Signal, signal } from "@signe/reactive";
+import { Container, autoDetectRenderer } from "pixi.js";
+import { loadYoga } from "yoga-layout";
+import { Props, createComponent, registerComponent, Element } from "../engine/reactive";
+import { useProps } from "../hooks/useProps";
+import { ComponentInstance, DisplayObject } from "./DisplayObject";
+import { ComponentFunction } from "../engine/signal";
+import { SignalOrPrimitive } from "./types";
+import { Size } from "./types/DisplayObject";
+import { Scheduler, Tick } from "../directives/Scheduler";
+
+interface CanvasElement extends Element<ComponentInstance> {
+  render: (rootElement: HTMLElement) => void;
+  directives: {
+    tick: Scheduler
+  };
+  propObservables: {
+    tick: Signal<Tick>
+  };
+}
+
+registerComponent("Canvas", class Canvas extends DisplayObject(Container) {});
+
+export interface CanvasProps extends Props {
+  cursorStyles?: () => any;
+  width?: SignalOrPrimitive<Size>;
+  height?: SignalOrPrimitive<Size>;
+  canvasEl?: HTMLElement;
+  selector?: string;
+  isRoot?: boolean;
+  tick?: any;
+  class?: SignalOrPrimitive<string>;
+}
+
+export const Canvas: ComponentFunction<CanvasProps> = async (props = {}) => {
+  let { cursorStyles, width, height, class: className } = useProps(props);
+  const Yoga = await loadYoga();
+
+  if (!props.width) width = signal<Size>(800)
+  if (!props.height) height = signal<Size>(600)
+
+  const renderer = await autoDetectRenderer({
+    ...props,
+    width: width?.(),
+    height: height?.(),
+  });
+
+  const canvasSize = signal({
+    width: renderer.width,
+    height: renderer.height,
+  });
+
+  props.isRoot = true;
+  const options: CanvasProps = {
+    ...props,
+    context: {
+      Yoga,
+      renderer,
+      canvasSize,
+    },
+    width: width?.(),
+    height: height?.(),
+  };
+
+  if (!props.tick) {
+    options.context!.tick = options.tick = signal({
+      timestamp: 0,
+      deltaTime: 0,
+      frame: 0,
+      deltaRatio: 1,
+    });
+  }
+  const canvasElement = createComponent("Canvas", options) as CanvasElement;
+
+  canvasElement.render = (rootElement: HTMLElement) => {
+    const canvasEl = renderer.view.canvas as HTMLCanvasElement;
+
+    (globalThis as any).__PIXI_STAGE__ = canvasElement.componentInstance;
+    (globalThis as any).__PIXI_RENDERER__ = renderer;
+
+    if (props.tickStart !== false) canvasElement.directives.tick.start()
+
+    effect(() => {
+      canvasElement.propObservables!.tick();
+      renderer.render(canvasElement.componentInstance as any);
+    });
+
+    if (cursorStyles) {
+      effect(() => {
+        renderer.events.cursorStyles = cursorStyles();
+      });
+    }
+
+    if (className) {
+      effect(() => {
+        canvasEl.classList.add(className());
+      });
+    }
+
+    const resizeCanvas = async () => {
+      let w, h;
+      if (width?.() === "100%" && height?.() === "100%") {
+        const parent = canvasEl.parentElement;
+        w = parent ? parent.clientWidth : window.innerWidth;
+        h = parent ? parent.clientHeight : window.innerHeight;
+      } else {
+        w = width?.() ?? canvasEl.offsetWidth;
+        h = height?.() ?? canvasEl.offsetHeight;
+      }
+      renderer.resize(w, h);
+      canvasSize.set({ width: w, height: h });
+      canvasElement.componentInstance.setWidth(w)
+      canvasElement.componentInstance.setHeight(h)
+    };
+
+    // Listen for window resize events
+    window.addEventListener("resize", resizeCanvas);
+
+    // Check if a canvas already exists in the rootElement
+    const existingCanvas = rootElement.querySelector('canvas');
+    if (existingCanvas) {
+      // If it exists, replace it with the new canvas
+      rootElement.replaceChild(canvasEl, existingCanvas);
+    } else {
+      // If it doesn't exist, append the new canvas
+      rootElement.appendChild(canvasEl);
+    }
+
+     // Initial resize
+     resizeCanvas();
+  };
+
+  return canvasElement;
+};

package/src/components/Container.ts

@@ -0,0 +1,46 @@
+import { Container as PixiContainer } from "pixi.js";
+import { createComponent, registerComponent } from "../engine/reactive";
+import { DisplayObject } from "./DisplayObject";
+import { ComponentFunction } from "../engine/signal";
+import { DisplayObjectProps } from "./types/DisplayObject";
+import { setObservablePoint } from "../engine/utils";
+
+interface ContainerProps extends DisplayObjectProps {
+  sortableChildren?: boolean;
+}
+
+export class CanvasContainer extends DisplayObject(PixiContainer) {
+  isCustomAnchor = true;
+  
+  onUpdate(props) {
+    if (props.anchor) {
+      setObservablePoint(this._anchorPoints, props.anchor);
+      props.pivot = [
+        this.getWidth() * this._anchorPoints.x,
+        this.getHeight() * this._anchorPoints.y
+      ]
+    }
+    super.onUpdate(props);
+    if (props.sortableChildren != undefined) {
+      this.sortableChildren = props.sortableChildren;
+    }
+  }
+  onMount(args) {
+    super.onMount(args);
+    const { componentInstance, props } = args;
+    const { pixiChildren } = props;
+    if (pixiChildren) {
+      pixiChildren.forEach((child) => {
+        componentInstance.addChild(child);
+      });
+    }
+  }
+}
+
+export interface CanvasContainer extends DisplayObjectProps {}
+
+registerComponent("Container", CanvasContainer);
+
+export const Container: ComponentFunction<ContainerProps> = (props) => {
+  return createComponent("Container", props);
+};

package/src/components/DisplayObject.ts

@@ -0,0 +1,458 @@
+import { Node } from "yoga-layout";
+import { Element, isElement, Props } from "../engine/reactive";
+import { setObservablePoint } from "../engine/utils";
+import type {
+  AlignContent,
+  EdgeSize,
+  FlexDirection,
+  Size,
+} from "./types/DisplayObject";
+import { effect, Signal, signal } from "@signe/reactive";
+import { DropShadowFilter } from "pixi-filters";
+import { BlurFilter, ObservablePoint } from "pixi.js";
+
+export interface ComponentInstance extends PixiMixins.ContainerOptions {
+  id?: string;
+  children?: ComponentInstance[];
+  onInit?(props: Props): void;
+  onUpdate?(props: Props): void;
+  onDestroy?(parent: Element): void;
+  onMount?(context: Element, index?: number): void;
+  setWidth(width: number): void;
+  setHeight(height: number): void;
+}
+
+export const EVENTS = [
+  "added",
+  "childAdded",
+  "childRemoved",
+  "click",
+  "clickcapture",
+  "destroyed",
+  "globalmousemove",
+  "globalpointermove",
+  "globaltouchmove",
+  "mousedown",
+  "mousedowncapture",
+  "mouseenter",
+  "mouseentercapture",
+  "mouseleave",
+  "mouseleavecapture",
+  "mousemove",
+  "mousemovecapture",
+  "mouseout",
+  "mouseoutcapture",
+  "mouseover",
+  "mouseovercapture",
+  "mouseup",
+  "mouseupcapture",
+  "mouseupoutside",
+  "mouseupoutsidecapture",
+  "pointercancel",
+  "pointercancelcapture",
+  "pointerdown",
+  "pointerdowncapture",
+  "pointerenter",
+  "pointerentercapture",
+  "pointerleave",
+  "pointerleavecapture",
+  "pointermove",
+  "pointermovecapture",
+  "pointerout",
+  "pointeroutcapture",
+  "pointerover",
+  "pointerovercapture",
+  "pointertap",
+  "pointertapcapture",
+  "pointerup",
+  "pointerupcapture",
+  "pointerupoutside",
+  "pointerupoutsidecapture",
+  "removed",
+  "rightclick",
+  "rightclickcapture",
+  "rightdown",
+  "rightdowncapture",
+  "rightup",
+  "rightupcapture",
+  "rightupoutside",
+  "rightupoutsidecapture",
+  "tap",
+  "tapcapture",
+  "touchcancel",
+  "touchcancelcapture",
+  "touchend",
+  "touchendcapture",
+  "touchendoutside",
+  "touchendoutsidecapture",
+  "touchmove",
+  "touchmovecapture",
+  "touchstart",
+  "touchstartcapture",
+  "wheel",
+  "wheelcapture",
+];
+
+export function DisplayObject(extendClass) {
+  return class DisplayObject extends extendClass {
+    #canvasContext: {
+      [key: string]: any;
+    } | null = null;
+    isFlex: boolean = false;
+    fullProps: Props = {};
+    isMounted: boolean = false;
+    _anchorPoints = new ObservablePoint(
+      { _onUpdate: () => {} },
+      0,
+      0
+    );
+    isCustomAnchor: boolean = false;
+    displayWidth = signal(0);
+    displayHeight = signal(0);
+    overrideProps: string[] = [];
+    node: Node;
+
+    get yoga() {
+      return this.#canvasContext?.Yoga;
+    }
+
+    get deltaRatio() {
+      return this.#canvasContext?.scheduler?.tick.value.deltaRatio;
+    }
+
+    onInit(props) {
+      this._id = props.id;
+      for (let event of EVENTS) {
+        if (props[event] && !this.overrideProps.includes(event)) {
+          this.eventMode = "static";
+          this.on(event, props[event]);
+        }
+      }
+    }
+
+    onMount({ parent, props }: Element<DisplayObject>, index?: number) {
+      this.#canvasContext = props.context;
+      this.node = this.yoga.Node.create();
+      if (parent) {
+        const instance = parent.componentInstance as DisplayObject;
+        if (index === undefined) {
+          instance.addChild(this);
+        } else {
+          instance.addChildAt(this, index);
+        }
+        if (instance.layer) this.parentLayer = instance.layer;
+        this.isMounted = true;
+        this.effectSize(props.width, props.height);
+        this.onUpdate(props);
+        this.parent.node.insertChild(
+          this.node,
+          this.parent.node.getChildCount()
+        );
+        if (parent.props.flexDirection) {
+          this.parent.node.calculateLayout();
+          for (let child of this.parent.children) {
+            const { left, top } = child.getComputedLayout();
+            child.x = left;
+            child.y = top;
+          }
+        }
+      
+      }
+    }
+
+    effectSize(width: Size, height: Size) {
+      const handleSize = (
+        size: Size,
+        setter: (value: number) => void,
+        parentSize: Signal<number>
+      ) => {
+        if (typeof size === "string" && size.endsWith("%")) {
+          effect(() => {
+            setter(parentSize() * (parseInt(size) / 100));
+            if (this.isFlex) {
+              this.#applyFlexLayout();
+            }
+          });
+        } else {
+          setter(+size);
+        }
+      };
+
+      if (width != undefined)
+        handleSize(width, this.setWidth.bind(this), this.parent.displayWidth);
+      if (height != undefined)
+        handleSize(
+          height,
+          this.setHeight.bind(this),
+          this.parent.displayHeight
+        );
+    }
+
+    #applyFlexLayout() {
+      this.calculateLayout();
+      for (let child of this.children) {
+        const { left, top } = child.node.getComputedLayout();
+        child.x = left;
+        child.y = top;
+      }
+    }
+
+    #flexRender(props) {
+      if (!this.parent) return;
+      if (props.flexDirection || props.justifyContent) {
+        this.isFlex = true;
+        this.#applyFlexLayout();
+      }
+    }
+
+    onUpdate(props) {
+      this.fullProps = {
+        ...this.fullProps,
+        ...props,
+      };
+
+      if (!this.#canvasContext || !this.parent) return;
+      if (props.x !== undefined) this.setX(props.x);
+      if (props.y !== undefined) this.setY(props.y);
+      if (props.scale !== undefined)
+        setObservablePoint(this.scale, props.scale);
+      if (props.anchor !== undefined && !this.isCustomAnchor) {
+        setObservablePoint(this.anchor, props.anchor);
+      }
+      if (props.skew !== undefined) setObservablePoint(this.skew, props.skew);
+      if (props.tint) this.tint = props.tint;
+      if (props.rotation !== undefined) this.rotation = props.rotation;
+      if (props.angle !== undefined) this.angle = props.angle;
+      if (props.zIndex !== undefined) this.zIndex = props.zIndex;
+      if (props.roundPixels !== undefined) this.roundPixels = props.roundPixels;
+      if (props.cursor) this.cursor = props.cursor;
+      if (props.visible !== undefined) this.visible = props.visible;
+      if (props.alpha !== undefined) this.alpha = props.alpha;
+      if (props.pivot) setObservablePoint(this.pivot, props.pivot);
+      if (props.flexDirection) this.setFlexDirection(props.flexDirection);
+      if (props.flexWrap) this.setFlexWrap(props.flexWrap);
+      if (props.justifyContent) this.setJustifyContent(props.justifyContent);
+      if (props.alignItems) this.setAlignItems(props.alignItems);
+      if (props.alignContent) this.setAlignContent(props.alignContent);
+      if (props.alignSelf) this.setAlignSelf(props.alignSelf);
+      if (props.margin) this.setMargin(props.margin);
+      if (props.padding) this.setPadding(props.padding);
+      if (props.gap) this.setGap(props.gap);
+      if (props.border) this.setBorder(props.border);
+      if (props.positionType) this.setPositionType(props.positionType);
+      if (props.filters) this.filters = props.filters;
+      if (props.maskOf) {
+        if (isElement(props.maskOf)) {
+          props.maskOf.componentInstance.mask = this;
+        }
+      }
+      if (props.blendMode) this.blendMode = props.blendMode;
+      if (props.filterArea) this.filterArea = props.filterArea;
+      const currentFilters = this.filters || [];
+
+      if (props.shadow) {
+        let dropShadowFilter = currentFilters.find(
+          (filter) => filter instanceof DropShadowFilter
+        );
+        if (!dropShadowFilter) {
+          dropShadowFilter = new DropShadowFilter();
+          currentFilters.push(dropShadowFilter);
+        }
+        Object.assign(dropShadowFilter, props.shadow);
+      }
+
+      if (props.blur) {
+        let blurFilter = currentFilters.find(
+          (filter) => filter instanceof BlurFilter
+        );
+        if (!blurFilter) {
+          const options =
+            typeof props.blur === "number"
+              ? {
+                  strength: props.blur,
+                }
+              : props.blur;
+          blurFilter = new BlurFilter(options);
+          currentFilters.push(blurFilter);
+        }
+        Object.assign(blurFilter, props.blur);
+      }
+
+      this.filters = currentFilters;
+
+      this.#flexRender(props);
+    }
+
+    onDestroy() {
+      super.destroy();
+      this.node?.freeRecursive();
+    }
+
+    getComputedLayout() {
+      return this.node.getComputedLayout();
+    }
+
+    applyComputedLayout() {
+      const layout = this.getComputedLayout();
+      this.x = layout.left;
+      this.y = layout.top;
+    }
+
+    calculateLayout() {
+      this.node.calculateLayout();
+    }
+
+    setFlexDirection(direction: FlexDirection) {
+      const mapping = {
+        row: this.yoga.FLEX_DIRECTION_ROW,
+        column: this.yoga.FLEX_DIRECTION_COLUMN,
+        "row-reverse": this.yoga.FLEX_DIRECTION_ROW_REVERSE,
+        "column-reverse": this.yoga.FLEX_DIRECTION_COLUMN_REVERSE,
+      };
+      this.node.setFlexDirection(mapping[direction]);
+    }
+
+    setFlexWrap(wrap: "wrap" | "nowrap" | "wrap-reverse") {
+      const mapping = {
+        wrap: this.yoga.WRAP_WRAP,
+        nowrap: this.yoga.WRAP_NO_WRAP,
+        "wrap-reverse": this.yoga.WRAP_WRAP_REVERSE,
+      };
+      this.node.setFlexWrap(mapping[wrap]);
+    }
+
+    #setAlign(methodName: string, align: AlignContent) {
+      const mapping = {
+        auto: this.yoga.ALIGN_AUTO,
+        "flex-start": this.yoga.ALIGN_FLEX_START,
+        "flex-end": this.yoga.ALIGN_FLEX_END,
+        center: this.yoga.ALIGN_CENTER,
+        stretch: this.yoga.ALIGN_STRETCH,
+        baseline: this.yoga.ALIGN_BASELINE,
+        "space-between": this.yoga.ALIGN_SPACE_BETWEEN,
+        "space-around": this.yoga.ALIGN_SPACE_AROUND,
+      };
+      const method = (this.node as any)[methodName].bind(this.node);
+      method(mapping[align]);
+    }
+
+    setAlignContent(align: AlignContent) {
+      this.#setAlign("setAlignContent", align);
+    }
+
+    setAlignSelf(align: AlignContent) {
+      this.#setAlign("setAlignSelf", align);
+    }
+
+    setAlignItems(align: AlignContent) {
+      this.#setAlign("setAlignItems", align);
+    }
+
+    setJustifyContent(
+      justifyContent:
+        | "flex-start"
+        | "flex-end"
+        | "center"
+        | "space-between"
+        | "space-around"
+    ) {
+      const mapping = {
+        "flex-start": this.yoga.JUSTIFY_FLEX_START,
+        "flex-end": this.yoga.JUSTIFY_FLEX_END,
+        center: this.yoga.JUSTIFY_CENTER,
+        "space-between": this.yoga.JUSTIFY_SPACE_BETWEEN,
+        "space-around": this.yoga.JUSTIFY_SPACE_AROUND,
+      };
+      this.node.setJustifyContent(mapping[justifyContent]);
+    }
+
+    #setEdgeSize(methodName: string, size: EdgeSize) {
+      const method = (this.node as any)[methodName].bind(this.node);
+      if (size instanceof Array) {
+        if (size.length === 2) {
+          method(this.yoga.EDGE_VERTICAL, size[0]);
+          method(this.yoga.EDGE_HORIZONTAL, size[1]);
+        } else if (size.length === 4) {
+          method(this.yoga.EDGE_TOP, size[0]);
+          method(this.yoga.EDGE_RIGHT, size[1]);
+          method(this.yoga.EDGE_BOTTOM, size[2]);
+          method(this.yoga.EDGE_LEFT, size[3]);
+        }
+      } else {
+        method(this.yoga.EDGE_ALL, size);
+      }
+    }
+
+    setPosition(position: EdgeSize) {
+      this.#setEdgeSize("setPosition", position);
+    }
+
+    setX(x: number) {
+      x = x + this.getWidth() * this._anchorPoints.x;
+      if (!this.parent.isFlex) {
+        this.x = x;
+      }
+      this.node.setPosition(this.yoga.EDGE_LEFT, x);
+    }
+
+    setY(y: number) {
+      y = y + this.getHeight() * this._anchorPoints.y;
+      if (!this.parent.isFlex) {
+        this.y = y;
+      }
+      this.node.setPosition(this.yoga.EDGE_TOP, y);
+    }
+
+    setPadding(padding: EdgeSize) {
+      this.#setEdgeSize("setPadding", padding);
+    }
+
+    setMargin(margin: EdgeSize) {
+      this.#setEdgeSize("setMargin", margin);
+    }
+
+    setGap(gap: EdgeSize) {
+      this.node.setGap(this.yoga.GAP_ALL, +gap);
+    }
+
+    setBorder(border: EdgeSize) {
+      this.#setEdgeSize("setBorder", border);
+    }
+
+    setPositionType(positionType: "relative" | "absolute") {
+      const mapping = {
+        relative: this.yoga.POSITION_TYPE_RELATIVE,
+        absolute: this.yoga.POSITION_TYPE_ABSOLUTE,
+      };
+      this.node.setPositionType(mapping[positionType]);
+    }
+
+    calculateBounds() {
+      super.calculateBounds();
+      if (!this._geometry) return;
+      const bounds = this._geometry.bounds;
+      const width = Math.abs(bounds.minX - bounds.maxX);
+      const height = Math.abs(bounds.minY - bounds.maxY);
+      // this.node.setWidth(width);
+      // this.node.setHeight(height);
+    }
+
+    setWidth(width: number) {
+      this.displayWidth.set(width);
+      this.node?.setWidth(width);
+    }
+
+    setHeight(height: number) {
+      this.displayHeight.set(height);
+      this.node?.setHeight(height);
+    }
+
+    getWidth() {
+      return this.displayWidth();
+    }
+
+    getHeight() {
+      return this.displayHeight();
+    }
+  };
+}