canvasengine 2.0.0-beta.53 → 2.0.0-beta.56

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "canvasengine",
-  "version": "2.0.0-beta.53",
+  "version": "2.0.0-beta.56",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/DisplayObject.ts

@@ -320,6 +320,33 @@ export function DisplayObject(extendClass) {
           props.maskOf.componentInstance.mask = this as any;
         }
       }
+      if (props.shadowCaster !== undefined) {
+        const shadowCasterValue = (props.shadowCaster as any)?.value ?? props.shadowCaster;
+        if (
+          shadowCasterValue &&
+          typeof shadowCasterValue === "object" &&
+          !Array.isArray(shadowCasterValue)
+        ) {
+          const current = ((this as any).shadowCaster ?? {}) as Record<string, unknown>;
+          (this as any).shadowCaster = { ...current, ...shadowCasterValue };
+        } else {
+          (this as any).shadowCaster = shadowCasterValue;
+        }
+      }
+      if (props.footprintCaster !== undefined) {
+        const footprintCasterValue =
+          (props.footprintCaster as any)?.value ?? props.footprintCaster;
+        if (
+          footprintCasterValue &&
+          typeof footprintCasterValue === "object" &&
+          !Array.isArray(footprintCasterValue)
+        ) {
+          const current = ((this as any).footprintCaster ?? {}) as Record<string, unknown>;
+          (this as any).footprintCaster = { ...current, ...footprintCasterValue };
+        } else {
+          (this as any).footprintCaster = footprintCasterValue;
+        }
+      }
       if (props.blendMode) this.blendMode = props.blendMode;
       if (props.filterArea) this.filterArea = props.filterArea;
       const currentFilters = this.filters || [];

package/src/components/Sprite.ts

@@ -58,13 +58,21 @@ type AnimationDataFrames = {
   data: TextureOptionsMerging;
 };
 
+export type HitboxAnchorMode = "top-left" | "center" | "foot";
+
+export type Hitbox = {
+  w: number;
+  h: number;
+  anchorMode?: HitboxAnchorMode;
+};
+
 export enum StandardAnimation {
   Stand = "stand",
   Walk = "walk",
 }
 
 export class CanvasSprite extends DisplayObject(PixiSprite) {
-  public hitbox: { w: number; h: number };
+  public hitbox: Hitbox | null = null;
   public applyTransform: (
     frame: FrameOptionsMerging,
     data: TextureOptionsMerging,
@@ -442,7 +450,9 @@ export class CanvasSprite extends DisplayObject(PixiSprite) {
       this.play(this.sheetCurrentAnimation, [this.sheetParams]);
     }
 
-    if (props.hitbox) this.hitbox = props.hitbox.value ?? props.hitbox;
+    if (props.hitbox !== undefined) {
+      this.hitbox = this.normalizeHitbox(props.hitbox);
+    }
 
     if (props.scaleMode) this.baseTexture.scaleMode = props.scaleMode;
     else if (props.image && this.fullProps.rectangle === undefined) {
@@ -470,6 +480,10 @@ export class CanvasSprite extends DisplayObject(PixiSprite) {
         });
       }
     }
+
+    if (this.hitbox && !this.spritesheet) {
+      this.applyHitboxAnchor(this.texture.width, this.texture.height);
+    }
   }
 
   async onDestroy(parent: Element, afterDestroy: () => void): Promise<void> {
@@ -669,27 +683,12 @@ export class CanvasSprite extends DisplayObject(PixiSprite) {
       }
 
       const realSize = getVal<"spriteRealSize">("spriteRealSize");
-      const heightOfSprite =
-        typeof realSize == "number" ? realSize : realSize?.height;
-      const widthOfSprite =
-        typeof realSize == "number" ? realSize : realSize?.width;
-
-
-      const applyAnchorBySize = () => {
-        if (heightOfSprite && this.hitbox) {
-          const { spriteWidth, spriteHeight } = data;
-          const w = (spriteWidth - this.hitbox.w) / 2 / spriteWidth;
-          const gap = (spriteHeight - heightOfSprite) / 2;
-          const h = (spriteHeight - this.hitbox.h - gap) / spriteHeight;
-          this.anchor.set(w, h);
-        }
-      };
 
       if (frame.sound) {
         //RpgSound.get(frame.sound).play()
       }
 
-      applyAnchorBySize();
+      this.applyHitboxAnchor(data.spriteWidth, data.spriteHeight, realSize);
 
       applyTransform("anchor");
       applyTransform("scale");
@@ -717,6 +716,75 @@ export class CanvasSprite extends DisplayObject(PixiSprite) {
       this.frameIndex++;
     }
   }
+
+  private applyHitboxAnchor(
+    spriteWidth: number,
+    spriteHeight: number,
+    realSize?: TextureOptionsMerging["spriteRealSize"]
+  ) {
+    if (!this.hitbox || !spriteWidth || !spriteHeight) {
+      return;
+    }
+
+    const heightOfSprite =
+      typeof realSize === "number" ? realSize : realSize?.height;
+    const resolvedHeight = heightOfSprite ?? spriteHeight;
+    const gap = Math.max(0, (spriteHeight - resolvedHeight) / 2);
+    const hitboxTopLeftX = this.clamp(
+      (spriteWidth - this.hitbox.w) / 2 / spriteWidth
+    );
+    const hitboxTopLeftY = this.clamp(
+      (spriteHeight - this.hitbox.h - gap) / spriteHeight
+    );
+    const hitboxCenterX = this.clamp(
+      hitboxTopLeftX + this.hitbox.w / 2 / spriteWidth
+    );
+    const hitboxCenterY = this.clamp(
+      hitboxTopLeftY + this.hitbox.h / 2 / spriteHeight
+    );
+    const footY = this.clamp((spriteHeight - gap) / spriteHeight);
+
+    let anchorX = hitboxTopLeftX;
+    let anchorY = hitboxTopLeftY;
+
+    switch (this.hitbox.anchorMode ?? "top-left") {
+      case "center":
+        anchorX = hitboxCenterX;
+        anchorY = hitboxCenterY;
+        break;
+      case "foot":
+        anchorX = hitboxCenterX;
+        anchorY = footY;
+        break;
+      case "top-left":
+      default:
+        break;
+    }
+
+    this.anchor.set(anchorX, anchorY);
+  }
+
+  private normalizeHitbox(hitbox: unknown): Hitbox | null {
+    const resolvedHitbox = (hitbox as any)?.value ?? hitbox;
+    if (!resolvedHitbox || typeof resolvedHitbox !== "object") {
+      return null;
+    }
+
+    const { w, h, anchorMode } = resolvedHitbox as Partial<Hitbox>;
+    if (typeof w !== "number" || typeof h !== "number") {
+      return null;
+    }
+
+    return {
+      w,
+      h,
+      anchorMode,
+    };
+  }
+
+  private clamp(value: number) {
+    return Math.min(1, Math.max(0, value));
+  }
 }
 
 export interface CanvasSprite extends PixiSprite {
@@ -733,6 +801,7 @@ export interface SpriteProps extends DisplayObjectProps {
     params?: any;
     onFinish?: () => void;
   };
+  hitbox?: Hitbox;
   scaleMode?: number;
   image?: string;
   rectangle?: {

package/src/components/types/DisplayObject.ts

@@ -65,6 +65,16 @@ export interface DisplayObjectProps {
     filters?: any[];
     blendMode?: SignalOrPrimitive<PIXI.BLEND_MODES>;
     blur?: SignalOrPrimitive<number>;
+    /**
+     * Optional metadata used by presets (for example `SpriteShadows`)
+     * to mark this display object as a shadow caster.
+     */
+    shadowCaster?: any;
+    /**
+     * Optional metadata used by presets (for example `Footprints`)
+     * to mark this display object as a footprint caster.
+     */
+    footprintCaster?: any;
 
     // Directives
     drag?: DragProps;

package/src/engine/reactive.ts

@@ -653,6 +653,54 @@ export function createComponent(tag: string, props?: Props): Element {
       child = await child;
     }
     if (child instanceof Observable) {
+      const mountedFlowElements = new Map<Element, Element>();
+
+      const mountFlowElement = (element: Element, index?: number) => {
+        if (mountedFlowElements.has(element)) {
+          return;
+        }
+
+        const routed = routeDomComponent(parent, element);
+        mountedFlowElements.set(element, routed);
+        onMount(parent, routed, index);
+        propagateContext(routed);
+      };
+
+      const syncFlowElements = (nextElements: Set<Element>) => {
+        mountedFlowElements.forEach((mounted, source) => {
+          if (nextElements.has(source)) {
+            return;
+          }
+          mountedFlowElements.delete(source);
+          if (mounted !== source) {
+            destroyElement(mounted);
+          }
+        });
+      };
+
+      const processFlowComponent = (
+        component: any,
+        nextElements: Set<Element>,
+        index?: number
+      ) => {
+        if (component instanceof Observable) {
+          void createElement(parent, component);
+          return;
+        }
+        if (Array.isArray(component)) {
+          component.forEach((comp) =>
+            processFlowComponent(comp, nextElements, index)
+          );
+          return;
+        }
+        if (!isElement(component)) {
+          return;
+        }
+
+        nextElements.add(component);
+        mountFlowElement(component, index);
+      };
+
       // Subscribe to the observable and handle the emitted values
       const subscription = child.subscribe(
         (value: any) => {
@@ -668,43 +716,19 @@ export function createComponent(tag: string, props?: Props): Element {
             } = value;
 
             const components = comp.filter((c) => c !== null);
+            const nextElements = new Set<Element>();
             if (prev) {
-              components.forEach(async (c) => {
+              components.forEach((c) => {
                 const index = parent.props.children.indexOf(prev.props.key);
-                if (c instanceof Observable) {
-                  // Handle observable component recursively
-                  await createElement(parent, c);
-                } else if (isElement(c)) {
-                  const routed = routeDomComponent(parent, c);
-                  onMount(parent, routed, index + 1);
-                  propagateContext(routed);
-                }
+                processFlowComponent(c, nextElements, index + 1);
               });
+              syncFlowElements(nextElements);
               return;
             }
-            components.forEach(async (component) => {
-              if (!Array.isArray(component)) {
-                if (component instanceof Observable) {
-                  // Handle observable component recursively
-                  await createElement(parent, component);
-                } else if (isElement(component)) {
-                  const routed = routeDomComponent(parent, component);
-                  onMount(parent, routed);
-                  propagateContext(routed);
-                }
-              } else {
-                component.forEach(async (comp) => {
-                  if (comp instanceof Observable) {
-                    // Handle observable component recursively
-                    await createElement(parent, comp);
-                  } else if (isElement(comp)) {
-                    const routed = routeDomComponent(parent, comp);
-                    onMount(parent, routed);
-                    propagateContext(routed);
-                  }
-                });
-              }
+            components.forEach((component, index) => {
+              processFlowComponent(component, nextElements, index);
             });
+            syncFlowElements(nextElements);
           } else if (isElement(value)) {
             // Handle direct Element emission
             const routed = routeDomComponent(parent, value);