canvasengine 2.0.0-beta.2 → 2.0.0-beta.20

package/index.d.ts

@@ -0,0 +1,4 @@
+declare module '*.ce' {
+    const content: import("./dist/index").ComponentFunction;
+    export default content;
+}

package/package.json

@@ -1,22 +1,20 @@
 {
   "name": "canvasengine",
-  "version": "2.0.0-beta.2",
+  "version": "2.0.0-beta.20",
   "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",
+    "@pixi/layout": "^3.0.2",
+    "@signe/reactive": "^2.3.3",
     "howler": "^2.2.4",
-    "package.json": "^2.0.1",
     "pixi-filters": "^6.0.5",
     "pixi-viewport": "^6.0.3",
-    "pixi.js": "^8.6.4",
+    "pixi.js": "^8.9.2",
     "popmotion": "^11.0.5",
     "rxjs": "^7.8.1",
-    "yoga-layout": "^2.0.1"
+    "yoga-layout": "^3.2.1"
   },
   "devDependencies": {
     "@types/howler": "^2.2.11"
@@ -40,11 +38,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "overrides": {
-    "revolt-fx": {
-      "pixi.js": "^8.6.4"
-    }
-  },
   "scripts": {
     "build": "tsup",
     "dev": "tsup --watch"

package/src/components/Canvas.ts

@@ -1,7 +1,11 @@
 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 { Application, Container } from "pixi.js";
+import {
+  Props,
+  createComponent,
+  registerComponent,
+  Element,
+} from "../engine/reactive";
 import { useProps } from "../hooks/useProps";
 import { ComponentInstance, DisplayObject } from "./DisplayObject";
 import { ComponentFunction } from "../engine/signal";
@@ -10,12 +14,12 @@ import { Size } from "./types/DisplayObject";
 import { Scheduler, Tick } from "../directives/Scheduler";
 
 interface CanvasElement extends Element<ComponentInstance> {
-  render: (rootElement: HTMLElement) => void;
+  render: (rootElement: HTMLElement, app?: Application) => void;
   directives: {
-    tick: Scheduler
+    tick: Scheduler;
   };
   propObservables: {
-    tick: Signal<Tick>
+    tick: Signal<Tick>;
   };
 }
 
@@ -30,33 +34,26 @@ export interface CanvasProps extends Props {
   isRoot?: boolean;
   tick?: any;
   class?: SignalOrPrimitive<string>;
+  background?: 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?.(),
-  });
+  if (!props.width) width = signal<Size>(800);
+  if (!props.height) height = signal<Size>(600);
 
   const canvasSize = signal({
-    width: renderer.width,
-    height: renderer.height,
+    width: 0,
+    height: 0,
   });
 
   props.isRoot = true;
   const options: CanvasProps = {
     ...props,
     context: {
-      Yoga,
-      renderer,
       canvasSize,
+      app: signal(null),
     },
     width: width?.(),
     height: height?.(),
@@ -70,9 +67,15 @@ export const Canvas: ComponentFunction<CanvasProps> = async (props = {}) => {
       deltaRatio: 1,
     });
   }
+
   const canvasElement = createComponent("Canvas", options) as CanvasElement;
 
-  canvasElement.render = (rootElement: HTMLElement) => {
+  canvasElement.render = (rootElement: HTMLElement, app?: Application) => {
+    if (!app) {
+      return;
+    }
+
+    const renderer = app.renderer;
     const canvasEl = renderer.view.canvas as HTMLCanvasElement;
 
     (globalThis as any).__PIXI_STAGE__ = canvasElement.componentInstance;
@@ -85,6 +88,34 @@ export const Canvas: ComponentFunction<CanvasProps> = async (props = {}) => {
       renderer.render(canvasElement.componentInstance as any);
     });
 
+    app.stage = canvasElement.componentInstance as any;
+
+    app.stage.layout = {
+      width: app.screen.width,
+      height: app.screen.height,
+      justifyContent: props.justifyContent,
+      alignItems: props.alignItems,
+    };
+
+    canvasSize.set({ width: app.screen.width, height: app.screen.height })
+
+    app.renderer.on('resize', (width: number, height: number) => {
+      canvasSize.set({ width, height });
+
+      if (app.stage.layout) {
+        app.stage.layout = {
+          width,
+          height
+        }
+      }
+    });
+
+    if (props.tickStart !== false) canvasElement.directives.tick.start();
+
+    app.ticker.add(() => {
+      canvasElement.propObservables!.tick();
+    });
+
     if (cursorStyles) {
       effect(() => {
         renderer.events.cursorStyles = cursorStyles();
@@ -97,37 +128,14 @@ export const Canvas: ComponentFunction<CanvasProps> = async (props = {}) => {
       });
     }
 
-    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');
+    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();
+    options.context!.app.set(app)
   };
 
   return canvasElement;

package/src/components/Container.ts

@@ -25,8 +25,8 @@ export class CanvasContainer extends DisplayObject(PixiContainer) {
       this.sortableChildren = props.sortableChildren;
     }
   }
-  onMount(args) {
-    super.onMount(args);
+  async onMount(args) {
+    await super.onMount(args);
     const { componentInstance, props } = args;
     const { pixiChildren } = props;
     if (pixiChildren) {

package/src/components/DOMContainer.ts

@@ -0,0 +1,229 @@
+import { DOMContainer as PixiDOMContainer } from "pixi.js";
+import {
+  createComponent,
+  Element,
+  registerComponent,
+} from "../engine/reactive";
+import { ComponentInstance, DisplayObject } from "./DisplayObject";
+import { ComponentFunction } from "../engine/signal";
+import { DisplayObjectProps } from "./types/DisplayObject";
+
+interface DOMContainerProps extends DisplayObjectProps {
+  element:
+    | string
+    | {
+        value: HTMLElement;
+      };
+  textContent?: string;
+  attrs?: Record<string, any> & {
+    class?:
+      | string
+      | string[]
+      | Record<string, boolean>
+      | { items?: string[] }
+      | { value?: string | string[] | Record<string, boolean> };
+    style?:
+      | string
+      | Record<string, string | number>
+      | { value?: string | Record<string, string | number> };
+  };
+  sortableChildren?: boolean;
+}
+
+/**
+ * DOMContainer class for managing DOM elements within the canvas engine
+ *
+ * This class extends the DisplayObject functionality to handle DOM elements using
+ * PixiJS's native DOMContainer. It provides a bridge between the canvas rendering
+ * system and traditional DOM manipulation with proper transform hierarchy and visibility.
+ *
+ * The DOMContainer is especially useful for rendering standard DOM elements that handle
+ * user input, such as `<input>` or `<textarea>`. This is often simpler and more flexible
+ * than trying to implement text input directly in PixiJS.
+ *
+ * @example
+ * ```typescript
+ * // Basic usage with input element
+ * const element = document.createElement('input');
+ * element.type = 'text';
+ * element.placeholder = 'Enter text...';
+ *
+ * const domContainer = new DOMContainer({
+ *   element,
+ *   x: 100,
+ *   y: 50,
+ *   anchor: { x: 0.5, y: 0.5 }
+ * });
+ *
+ * // Using different class and style formats
+ * const containerWithClasses = new DOMContainer({
+ *   element: 'div',
+ *   attrs: {
+ *     // String format: space-separated classes
+ *     class: 'container primary-theme',
+ *
+ *     // Array format: array of class names
+ *     // class: ['container', 'primary-theme'],
+ *
+ *     // Object format: conditional classes
+ *     // class: {
+ *     //   'container': true,
+ *     //   'primary-theme': true,
+ *     //   'disabled': false
+ *     // }
+ *
+ *     // String format: CSS style string
+ *     style: 'background-color: red; padding: 10px;',
+ *
+ *     // Object format: style properties
+ *     // style: {
+ *     //   backgroundColor: 'red',
+ *     //   padding: '10px',
+ *     //   fontSize: 16
+ *     // }
+ *   }
+ * });
+ * ```
+ */
+const EVENTS = [
+  "click",
+  "mouseover",
+  "mouseout",
+  "mouseenter",
+  "mouseleave",
+  "mousemove",
+  "mouseup",
+  "mousedown",
+  "touchstart",
+  "touchend",
+  "touchmove",
+  "touchcancel",
+  "wheel",
+  "scroll",
+  "resize",
+  "focus",
+  "blur",
+  "change",
+  "input",
+  "submit",
+  "reset",
+  "keydown",
+  "keyup",
+  "keypress",
+  "contextmenu",
+  "drag",
+  "dragend",
+  "dragenter",
+  "dragleave",
+  "dragover",
+  "drop",
+  "dragstart",
+  "select",
+  "selectstart",
+  "selectend",
+  "selectall",
+  "selectnone",
+];
+
+export class CanvasDOMContainer extends DisplayObject(PixiDOMContainer) {
+  disableLayout = true;
+  private eventListeners: Map<string, (e: Event) => void> = new Map();
+
+  onInit(props: DOMContainerProps) {
+    super.onInit(props);
+    if (props.element === undefined) {
+      throw new Error("DOMContainer: element is required");
+    }
+    if (typeof props.element === "string") {
+      this.element = document.createElement(props.element);
+    } else {
+      this.element = props.element.value;
+    }
+    for (const event of EVENTS) {
+      if (props.attrs?.[event]) {
+        const eventHandler = (e: Event) => {
+          props.attrs[event]?.(e);
+        };
+        this.eventListeners.set(event, eventHandler);
+        this.element.addEventListener(event, eventHandler, false);
+      }
+    }
+  }
+
+  onUpdate(props: DOMContainerProps) {
+    super.onUpdate(props);
+
+    for (const [key, value] of Object.entries(props.attrs || {})) {
+      if (key === "class") {
+        const classList = value.items || value.value || value;
+
+        // Clear existing classes first
+        this.element.className = "";
+
+        if (typeof classList === "string") {
+          // String: space-separated class names
+          this.element.className = classList;
+        } else if (Array.isArray(classList)) {
+          // Array: array of class names
+          this.element.classList.add(...classList);
+        } else if (typeof classList === "object" && classList !== null) {
+          // Object: { className: boolean }
+          for (const [className, shouldAdd] of Object.entries(classList)) {
+            if (shouldAdd) {
+              this.element.classList.add(className);
+            }
+          }
+        }
+      } else if (key === "style") {
+        const styleValue = value.items || value.value || value;
+
+        if (typeof styleValue === "string") {
+          // String: CSS style string
+          this.element.setAttribute("style", styleValue);
+        } else if (typeof styleValue === "object" && styleValue !== null) {
+          // Object: { property: value }
+          for (const [styleProp, styleVal] of Object.entries(styleValue)) {
+            if (styleVal !== null && styleVal !== undefined) {
+              (this.element.style as any)[styleProp] = styleVal;
+            }
+          }
+        }
+      } else if (!EVENTS.includes(key)) {
+        this.element.setAttribute(key, value);
+      }
+    }
+    if (props.textContent) {
+      this.element.textContent = props.textContent;
+    }
+
+    if (props.sortableChildren !== undefined) {
+      this.sortableChildren = props.sortableChildren;
+    }
+  }
+
+  async onDestroy(
+    parent: Element<ComponentInstance>,
+    afterDestroy: () => void
+  ): Promise<void> {
+    // Remove all event listeners from the DOM element
+    if (this.element) {
+      for (const [event, handler] of this.eventListeners) {
+        this.element.removeEventListener(event, handler, false);
+      }
+      this.eventListeners.clear();
+    }
+
+    const _afterDestroyCallback = async () => {
+      afterDestroy();
+    };
+    await super.onDestroy(parent, _afterDestroyCallback);
+  }
+}
+
+export interface CanvasDOMContainer extends DisplayObjectProps {}
+
+registerComponent("DOMContainer", CanvasDOMContainer);
+
+export const DOMContainer: ComponentFunction<DOMContainerProps> = (props) => {
+  return createComponent("DOMContainer", props);
+};