canvasengine 2.0.0-beta.49 → 2.0.0-beta.50

package/package.json

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

package/src/components/DOMContainer.ts

@@ -268,26 +268,72 @@ export class CanvasDOMContainer extends DisplayObject(PixiDOMContainer) {
     // Handle internal _scopeClass prop for scoped CSS
     const scopeClass = props._scopeClass;
     let divProps: any = { element: "div" };
+    const divAttrs = { ...(props.attrs || {}) };
 
-    if (scopeClass) {
-      // Merge scope class with existing attrs.class
-      divProps.attrs = { ...props.attrs };
-      if (divProps.attrs.class) {
-        // If class exists, merge it with scope class
-        if (typeof divProps.attrs.class === 'string') {
-          divProps.attrs.class = `${scopeClass} ${divProps.attrs.class}`;
-        } else if (Array.isArray(divProps.attrs.class)) {
-          divProps.attrs.class = [scopeClass, ...divProps.attrs.class];
-        } else if (typeof divProps.attrs.class === 'object') {
-          // For object format, add scope class as true
-          divProps.attrs.class = { [scopeClass]: true, ...divProps.attrs.class };
+    const mergeScopeClass = (classValue: any) => {
+      if (!scopeClass) return classValue;
+      if (classValue == null) return scopeClass;
+      if (typeof classValue === "string") {
+        return `${scopeClass} ${classValue}`;
+      }
+      if (Array.isArray(classValue)) {
+        return [scopeClass, ...classValue];
+      }
+      if (typeof classValue === "object") {
+        if ("items" in classValue) {
+          const itemsValue = (classValue as any).items;
+          return { ...classValue, items: [scopeClass, itemsValue] };
+        }
+        if ("value" in classValue) {
+          const valueValue = (classValue as any).value;
+          return { ...classValue, value: [scopeClass, valueValue] };
         }
+        return { [scopeClass]: true, ...classValue };
+      }
+      return [scopeClass, classValue];
+    };
+
+    if (props.class !== undefined) {
+      if (divAttrs.class) {
+        divAttrs.class = [props.class, divAttrs.class];
+      } else {
+        divAttrs.class = props.class;
+      }
+    }
+
+    if (props.style !== undefined) {
+      if (
+        typeof divAttrs.style === "object"
+        && divAttrs.style !== null
+        && typeof props.style === "object"
+        && props.style !== null
+      ) {
+        divAttrs.style = { ...divAttrs.style, ...props.style };
+      } else if (divAttrs.style === undefined) {
+        divAttrs.style = props.style;
+      } else if (typeof divAttrs.style === "string" && typeof props.style === "string") {
+        divAttrs.style = `${divAttrs.style}; ${props.style}`;
+      } else {
+        divAttrs.style = props.style;
+      }
+    }
+
+    if (props.zIndex !== undefined) {
+      if (typeof divAttrs.style === "object" && divAttrs.style !== null) {
+        divAttrs.style = { ...divAttrs.style, zIndex: props.zIndex };
+      } else if (typeof divAttrs.style === "string") {
+        divAttrs.style = `${divAttrs.style}; z-index: ${props.zIndex}`;
       } else {
-        // No existing class, just add scope class
-        divProps.attrs.class = scopeClass;
+        divAttrs.style = { zIndex: props.zIndex };
       }
-    } else if (props.attrs) {
-      divProps.attrs = props.attrs;
+    }
+
+    if (scopeClass) {
+      // Merge scope class with existing attrs.class
+      divProps.attrs = { ...divAttrs };
+      divProps.attrs.class = mergeScopeClass(divProps.attrs.class);
+    } else if (Object.keys(divAttrs).length > 0) {
+      divProps.attrs = divAttrs;
     }
 
     const routedChildren = this.routeDomChildren(props.children);

package/src/components/DOMSprite.ts

@@ -40,6 +40,8 @@ export interface DOMSpriteProps extends DOMElementProps {
     onFinish?: () => void;
   };
   element?: "div" | "img";
+  class?: any;
+  style?: any;
   attrs?: Record<string, any> & {
     class?:
     | string
@@ -144,18 +146,36 @@ export class CanvasDOMSprite extends CanvasDOMElement {
   private rafId?: number;
   private lastRafTimestamp?: number;
   private lastTickTimestamp?: number;
-  private elementType: "div" | "img" = "div";
+  private renderElementType: "div" | "img" = "div";
+  private wrapperElementType: "div" | "img" = "div";
   private isAnimating = false;
   private playingSubscription?: Subscription;
   private playingSignal?: Signal<boolean>;
+  private explicitWidth?: string;
+  private explicitHeight?: string;
+  private frameWidth = 0;
+  private frameHeight = 0;
+  private fitMode?: string;
+  private renderElement?: HTMLElement;
+  private isContained = false;
 
   onInit(props: DOMElementProps) {
     const spriteProps = props as DOMSpriteProps;
-    this.elementType = spriteProps.element ?? "div";
-    const nextProps = this.mergeEventAttrs({ ...spriteProps, element: this.elementType });
+    const hasSheet = spriteProps.sheet !== undefined;
+    const defaultElement: "div" | "img" = !hasSheet && spriteProps.image ? "img" : "div";
+    this.renderElementType = spriteProps.element ?? defaultElement;
+    const resolvedFit = this.resolveValue(spriteProps.objectFit);
+    this.fitMode = resolvedFit ?? undefined;
+    this.wrapperElementType =
+      this.fitMode === "contain" && this.renderElementType === "img"
+        ? "div"
+        : this.renderElementType;
+    const nextProps = this.mergeEventAttrs({ ...spriteProps, element: this.wrapperElementType });
     this.tickSignal = nextProps.context?.tick;
     this.applyProps(nextProps);
     super.onInit(nextProps as any);
+    this.syncRenderElement();
+    this.applyDisplayProps(nextProps);
     this.render();
     this.updateAnimationLoop();
   }
@@ -172,6 +192,8 @@ export class CanvasDOMSprite extends CanvasDOMElement {
     const nextProps = this.mergeEventAttrs(props as DOMSpriteProps);
     super.onUpdate(nextProps as any);
     this.applyProps(nextProps);
+    this.syncRenderElement();
+    this.applyDisplayProps(nextProps);
     this.render();
     this.updateAnimationLoop();
   }
@@ -444,6 +466,31 @@ export class CanvasDOMSprite extends CanvasDOMElement {
         merged[event] = handler;
       }
     }
+    if (props.class !== undefined) {
+      if (!merged) merged = {};
+      if (merged.class) {
+        merged.class = [props.class, merged.class];
+      } else {
+        merged.class = props.class;
+      }
+    }
+    if (props.style !== undefined) {
+      if (!merged) merged = {};
+      if (
+        typeof merged.style === "object"
+        && merged.style !== null
+        && typeof props.style === "object"
+        && props.style !== null
+      ) {
+        merged.style = { ...merged.style, ...props.style };
+      } else if (merged.style === undefined) {
+        merged.style = props.style;
+      } else if (typeof merged.style === "string" && typeof props.style === "string") {
+        merged.style = `${merged.style}; ${props.style}`;
+      } else {
+        merged.style = props.style;
+      }
+    }
     if (!merged) return props;
     return { ...props, attrs: merged };
   }
@@ -517,6 +564,228 @@ export class CanvasDOMSprite extends CanvasDOMElement {
         this.loop = resolvedLoop;
       }
     }
+    if (props.objectFit !== undefined) {
+      const resolvedFit = this.resolveValue(props.objectFit);
+      this.fitMode = resolvedFit ?? undefined;
+    }
+  }
+
+  private resolveValue<T>(value: T | Signal<T> | { value?: T } | undefined): T | undefined {
+    if (value === undefined) return undefined;
+    const resolved = isSignal(value as any) ? (value as any)() : value;
+    if (resolved && typeof resolved === "object" && "value" in (resolved as any)) {
+      return (resolved as any).value as T;
+    }
+    return resolved as T;
+  }
+
+  private resolvePoint(
+    value: DOMSpriteProps["scale"] | DOMSpriteProps["anchor"] | DOMSpriteProps["skew"] | DOMSpriteProps["pivot"]
+  ): { x: number; y: number } | undefined {
+    const resolved = this.resolveValue<any>(value as any);
+    if (resolved === undefined || resolved === null) return undefined;
+    if (typeof resolved === "number") {
+      return { x: resolved, y: resolved };
+    }
+    if (Array.isArray(resolved)) {
+      const [x, y] = resolved;
+      return { x: x ?? 0, y: y ?? x ?? 0 };
+    }
+    if (typeof resolved === "object") {
+      return { x: resolved.x ?? 0, y: resolved.y ?? 0 };
+    }
+    return undefined;
+  }
+
+  private resolveSize(value: DOMSpriteProps["width"] | DOMSpriteProps["height"]): string | undefined {
+    const resolved = this.resolveValue<any>(value as any);
+    if (resolved === undefined || resolved === null) return undefined;
+    if (typeof resolved === "number") return `${resolved}px`;
+    if (typeof resolved === "string") return resolved;
+    return undefined;
+  }
+
+  private resolvePixelSize(value?: string): number | undefined {
+    if (!value) return undefined;
+    if (value.endsWith("px")) {
+      const parsed = parseFloat(value);
+      return Number.isNaN(parsed) ? undefined : parsed;
+    }
+    if (/^\d+(\.\d+)?$/.test(value)) {
+      const parsed = parseFloat(value);
+      return Number.isNaN(parsed) ? undefined : parsed;
+    }
+    return undefined;
+  }
+
+  private toCssColor(tint: number): string {
+    const clamped = Math.max(0, Math.min(0xffffff, tint));
+    return `#${clamped.toString(16).padStart(6, "0")}`;
+  }
+
+  private applyDisplayProps(props: DOMSpriteProps) {
+    if (!this.element) return;
+
+    if (props.width !== undefined) {
+      this.explicitWidth = this.resolveSize(props.width);
+    } else {
+      this.explicitWidth = undefined;
+    }
+    if (props.height !== undefined) {
+      this.explicitHeight = this.resolveSize(props.height);
+    } else {
+      this.explicitHeight = undefined;
+    }
+    if (this.explicitWidth !== undefined) {
+      this.element.style.width = this.explicitWidth;
+    }
+    if (this.explicitHeight !== undefined) {
+      this.element.style.height = this.explicitHeight;
+    }
+
+    if (props.alpha !== undefined) {
+      const alpha = this.resolveValue(props.alpha);
+      if (alpha !== undefined) {
+        this.element.style.opacity = String(alpha);
+      }
+    }
+
+    if (props.visible !== undefined) {
+      const visible = this.resolveValue(props.visible);
+      this.element.style.display = visible === false ? "none" : "";
+    }
+
+    if (props.zIndex !== undefined) {
+      const zIndex = this.resolveValue(props.zIndex);
+      if (zIndex !== undefined) {
+        this.element.style.zIndex = String(zIndex);
+      }
+    }
+
+    if (props.cursor !== undefined) {
+      const cursor = this.resolveValue(props.cursor);
+      if (cursor !== undefined) {
+        this.element.style.cursor = String(cursor);
+      }
+    }
+
+    if (props.tint !== undefined) {
+      const tint = this.resolveValue(props.tint);
+      if (typeof tint === "number") {
+        this.element.style.filter = `drop-shadow(0 0 0 ${this.toCssColor(tint)})`;
+      }
+    }
+
+    const hasTransformProps = [
+      props.x,
+      props.y,
+      props.scale,
+      props.rotation,
+      props.angle,
+      props.skew,
+      props.roundPixels,
+    ].some((value) => value !== undefined);
+
+    if (hasTransformProps) {
+      let x = this.resolveValue(props.x) ?? 0;
+      let y = this.resolveValue(props.y) ?? 0;
+      const roundPixels = this.resolveValue(props.roundPixels);
+      if (roundPixels) {
+        x = Math.round(x);
+        y = Math.round(y);
+      }
+
+      const scale = this.resolvePoint(props.scale) ?? { x: 1, y: 1 };
+      const skew = this.resolvePoint(props.skew);
+
+      const angle = this.resolveValue(props.angle);
+      const rotation = this.resolveValue(props.rotation);
+      const rotationDeg = angle !== undefined
+        ? angle
+        : rotation !== undefined
+          ? (rotation * 180) / Math.PI
+          : 0;
+
+      const transformParts = [
+        `translate3d(${x}px, ${y}px, 0)`,
+      ];
+
+      if (rotationDeg !== 0) {
+        transformParts.push(`rotate(${rotationDeg}deg)`);
+      }
+
+      if (skew) {
+        const skewX = (skew.x * 180) / Math.PI;
+        const skewY = (skew.y * 180) / Math.PI;
+        if (skewX !== 0 || skewY !== 0) {
+          transformParts.push(`skew(${skewX}deg, ${skewY}deg)`);
+        }
+      }
+
+      if (scale.x !== 1 || scale.y !== 1) {
+        transformParts.push(`scale(${scale.x}, ${scale.y})`);
+      }
+
+      this.element.style.transform = transformParts.join(" ");
+
+    }
+
+    const pivot = this.resolvePoint(props.pivot);
+    const anchor = this.resolvePoint(props.anchor);
+    if (pivot) {
+      this.element.style.transformOrigin = `${pivot.x}px ${pivot.y}px`;
+    } else if (anchor) {
+      this.element.style.transformOrigin = `${anchor.x * 100}% ${anchor.y * 100}%`;
+    }
+  }
+
+  private syncRenderElement() {
+    if (!this.element) return;
+    if (this.fitMode === "contain" && !(this.element instanceof HTMLImageElement)) {
+      if (!this.isContained) {
+        const inner = document.createElement(this.renderElementType);
+        this.element.style.position = "relative";
+        this.element.style.overflow = "hidden";
+        inner.style.position = "absolute";
+        inner.style.left = "0";
+        inner.style.top = "0";
+        inner.style.transformOrigin = "0 0";
+        this.element.appendChild(inner);
+        this.renderElement = inner;
+        this.isContained = true;
+      }
+      return;
+    }
+
+    if (this.isContained) {
+      if (this.renderElement && this.renderElement !== this.element) {
+        this.renderElement.remove();
+      }
+      this.renderElement = undefined;
+      this.isContained = false;
+    }
+  }
+
+  private getRenderElement() {
+    return this.renderElement ?? this.element;
+  }
+
+  private applyContainScale() {
+    if (!this.isContained) return;
+    const target = this.getRenderElement();
+    if (!target || !this.element) return;
+    if (this.frameWidth <= 0 || this.frameHeight <= 0) return;
+
+    const containerWidth =
+      this.resolvePixelSize(this.explicitWidth) ?? this.element.clientWidth;
+    const containerHeight =
+      this.resolvePixelSize(this.explicitHeight) ?? this.element.clientHeight;
+
+    if (!containerWidth || !containerHeight) return;
+
+    const scale = Math.min(containerWidth / this.frameWidth, containerHeight / this.frameHeight);
+    if (!Number.isFinite(scale) || scale <= 0) return;
+    target.style.transform = `scale(${scale})`;
   }
 
   private bindPlayingSignal(context: Element<CanvasDOMElement>) {
@@ -577,6 +846,7 @@ export class CanvasDOMSprite extends CanvasDOMElement {
 
   private render() {
     if (!this.element) return;
+    const target = this.getRenderElement();
     const sheetFrame = this.getCurrentSheetFrame();
     if (sheetFrame) {
       this.applyFrame(sheetFrame);
@@ -584,10 +854,10 @@ export class CanvasDOMSprite extends CanvasDOMElement {
     }
     const frames = this.getFrames();
     if (frames.length === 0) {
-      if (this.elementType === "img" && this.image) {
-        (this.element as HTMLImageElement).src = this.image;
+      if (this.renderElementType === "img" && this.image && target) {
+        (target as HTMLImageElement).src = this.image;
       } else if (this.image) {
-        this.element.style.backgroundImage = `url("${this.image}")`;
+        target.style.backgroundImage = `url("${this.image}")`;
       }
       return;
     }
@@ -603,27 +873,38 @@ export class CanvasDOMSprite extends CanvasDOMElement {
 
   private applyFrame(frame: DOMSpriteFrame) {
     if (!this.element) return;
-    this.element.style.width = `${frame.width}px`;
-    this.element.style.height = `${frame.height}px`;
+    const target = this.getRenderElement();
+    if (!target) return;
+    this.frameWidth = frame.width;
+    this.frameHeight = frame.height;
+    if (this.fitMode === "contain") {
+      target.style.width = `${frame.width}px`;
+      target.style.height = `${frame.height}px`;
+    } else {
+      target.style.width = this.explicitWidth ?? `${frame.width}px`;
+      target.style.height = this.explicitHeight ?? `${frame.height}px`;
+    }
 
     const x = frame.x ?? 0;
     const y = frame.y ?? 0;
 
-    if (this.elementType === "img") {
-      const img = this.element as HTMLImageElement;
+    if (this.renderElementType === "img") {
+      const img = target as HTMLImageElement;
       if (this.image) {
         img.src = this.image;
       }
       img.style.objectFit = "none";
       img.style.objectPosition = `-${x}px -${y}px`;
+      this.applyContainScale();
       return;
     }
 
     if (this.image) {
-      this.element.style.backgroundImage = `url("${this.image}")`;
+      target.style.backgroundImage = `url("${this.image}")`;
     }
-    this.element.style.backgroundRepeat = "no-repeat";
-    this.element.style.backgroundPosition = `-${x}px -${y}px`;
+    target.style.backgroundRepeat = "no-repeat";
+    target.style.backgroundPosition = `-${x}px -${y}px`;
+    this.applyContainScale();
   }
 
   private updateAnimationLoop() {

package/testing/index.ts

@@ -30,8 +30,10 @@ export class TestBed {
         const comp = () => h(Canvas, {
             tickStart: false
         }, h(component, props, children))
+        const enableLayout = options.enableLayout ?? true;
         const { canvasElement, app } = await bootstrapCanvas(root, comp, {
-            enableLayout: options.enableLayout ?? true
+            enableLayout,
+            ...(enableLayout ? { layout: { throttle: 0 } } : {})
         })
         app.render()
         TestBed.lastApp = app as Application;