@antha/graphics-2d 0.15.1 → 0.17.0

package/dist/antha-virtual-viewport.mod.d.ts

@@ -1,3 +1,4 @@
+import { type PartialWithUndefined, type RequireAtLeastOne } from '@augment-vir/common';
 import { type AnthaGraphics2dModState } from './antha-graphics-2d.mod.js';
 /**
  * The logical dimensions and scale of a virtual viewport.
@@ -15,6 +16,15 @@ export type VirtualViewport = {
  * @category Internal
  */
 export type VirtualViewportSize = Pick<VirtualViewport, 'height' | 'width'>;
+/**
+ * Options for {@link createAnthaVirtualViewportMod}.
+ *
+ * @category Pre-Built Mods
+ */
+export type AnthaVirtualViewportOptions = RequireAtLeastOne<{
+    virtualHeight: number;
+    virtualWidth: number;
+}>;
 /**
  * State added by {@link createAnthaVirtualViewportMod}.
  *
@@ -28,9 +38,8 @@ export type AnthaVirtualViewportModState = AnthaGraphics2dModState & {
  *
  * @category Util
  */
-export declare function calculateVirtualViewport({ screenSize, virtualWidth, }: Readonly<{
+export declare function calculateVirtualViewport({ screenSize, virtualHeight, virtualWidth, }: Readonly<PartialWithUndefined<AnthaVirtualViewportOptions> & {
     screenSize: Readonly<VirtualViewportSize>;
-    virtualWidth: number;
 }>): {
     height: number;
     scale: number;
@@ -67,14 +76,8 @@ export declare function createVirtualViewportPixiOptions(): {
     resolution: number;
 };
 /**
- * A pre-built mod that scales an Antha UI and Pixi canvas to a logical viewport width.
+ * A pre-built mod that scales an Antha UI and Pixi canvas to a logical viewport.
  *
  * @category Pre-Built Mods
  */
-export declare function createAnthaVirtualViewportMod({ virtualWidth, }: Readonly<{
-    /**
-     * The reference width for your game screen. Any browser window wider or skinnier than this will
-     * be scaled.
-     */
-    virtualWidth: number;
-}>): import("@antha/engine").AnthaMod<NoInfer<AnthaVirtualViewportModState>>;
+export declare function createAnthaVirtualViewportMod({ virtualHeight, virtualWidth, }: Readonly<AnthaVirtualViewportOptions>): import("@antha/engine").AnthaMod<NoInfer<AnthaVirtualViewportModState>>;

package/dist/antha-virtual-viewport.mod.js

@@ -1,19 +1,43 @@
 import { defineAnthaMod } from '@antha/engine';
+import { assertWrap } from '@augment-vir/assert';
 /**
  * Calculates the logical viewport for a physical screen size.
  *
  * @category Util
  */
-export function calculateVirtualViewport({ screenSize, virtualWidth, }) {
-    if (!screenSize.width || !virtualWidth) {
+export function calculateVirtualViewport({ screenSize, virtualHeight, virtualWidth, }) {
+    if (!screenSize.height ||
+        !screenSize.width ||
+        virtualHeight === 0 ||
+        virtualWidth === 0 ||
+        (virtualHeight == undefined && virtualWidth == undefined)) {
         return undefined;
     }
-    const scale = screenSize.width / virtualWidth;
-    return {
-        height: screenSize.height / scale,
-        scale,
-        width: virtualWidth,
-    };
+    else if (virtualHeight == undefined) {
+        const definedVirtualWidth = assertWrap.isDefined(virtualWidth);
+        const scale = screenSize.width / definedVirtualWidth;
+        return {
+            height: screenSize.height / scale,
+            scale,
+            width: definedVirtualWidth,
+        };
+    }
+    else if (virtualWidth == undefined) {
+        const scale = screenSize.height / virtualHeight;
+        return {
+            height: virtualHeight,
+            scale,
+            width: screenSize.width / scale,
+        };
+    }
+    else {
+        const scale = Math.min(screenSize.height / virtualHeight, screenSize.width / virtualWidth);
+        return {
+            height: virtualHeight,
+            scale,
+            width: virtualWidth,
+        };
+    }
 }
 /**
  * Maps a pointer position from canvas coordinates into a virtual viewport.
@@ -46,11 +70,38 @@ function hasSameVirtualViewport({ previousVirtualViewport, virtualViewport, }) {
         Math.abs(previousVirtualViewport.scale - virtualViewport.scale) < 0.0001 &&
         previousVirtualViewport.width === virtualViewport.width);
 }
-function updateVirtualViewportHostElement({ hostElement, virtualViewport, }) {
-    hostElement.style.height = `${100 / virtualViewport.scale}%`;
-    hostElement.style.transform = `scale(${virtualViewport.scale})`;
+function updateVirtualViewportHostElement({ hostElement, isFixedViewport, screenSize, virtualViewport, }) {
+    hostElement.style.height = isFixedViewport
+        ? `${virtualViewport.height}px`
+        : `${100 / virtualViewport.scale}%`;
+    hostElement.style.transform = getVirtualViewportHostTransform({
+        isFixedViewport,
+        screenSize,
+        virtualViewport,
+    });
     hostElement.style.transformOrigin = 'top left';
-    hostElement.style.width = `${100 / virtualViewport.scale}%`;
+    hostElement.style.width = isFixedViewport
+        ? `${virtualViewport.width}px`
+        : `${100 / virtualViewport.scale}%`;
+}
+function getVirtualViewportHostTransform({ isFixedViewport, screenSize, virtualViewport, }) {
+    const horizontalOffset = isFixedViewport
+        ? (screenSize.width - virtualViewport.width * virtualViewport.scale) / 2
+        : 0;
+    const verticalOffset = isFixedViewport
+        ? (screenSize.height - virtualViewport.height * virtualViewport.scale) / 2
+        : 0;
+    return isFixedViewport
+        ? `translate(${horizontalOffset}px, ${verticalOffset}px) scale(${virtualViewport.scale})`
+        : `scale(${virtualViewport.scale})`;
+}
+function getVirtualViewportScreenSize({ hostElement, isFixedViewport, }) {
+    if (!isFixedViewport) {
+        return hostElement.getBoundingClientRect();
+    }
+    const rootNode = hostElement.getRootNode();
+    const viewportContainer = rootNode instanceof ShadowRoot ? rootNode.host : hostElement.parentElement || hostElement;
+    return viewportContainer.getBoundingClientRect();
 }
 function resetVirtualViewportHostElement({ hostElement, }) {
     hostElement.style.removeProperty('height');
@@ -59,11 +110,12 @@ function resetVirtualViewportHostElement({ hostElement, }) {
     hostElement.style.removeProperty('width');
 }
 /**
- * A pre-built mod that scales an Antha UI and Pixi canvas to a logical viewport width.
+ * A pre-built mod that scales an Antha UI and Pixi canvas to a logical viewport.
  *
  * @category Pre-Built Mods
  */
-export function createAnthaVirtualViewportMod({ virtualWidth, }) {
+export function createAnthaVirtualViewportMod({ virtualHeight, virtualWidth, }) {
+    const isFixedViewport = !!virtualHeight && !!virtualWidth;
     return defineAnthaMod({
         modName: 'antha-virtual-viewport',
         cleanup({ hostElement, state }) {
@@ -73,8 +125,13 @@ export function createAnthaVirtualViewportMod({ virtualWidth, }) {
             state.virtualViewport = undefined;
         },
         execute({ hostElement, state }) {
+            const screenSize = getVirtualViewportScreenSize({
+                hostElement,
+                isFixedViewport,
+            });
             const virtualViewport = calculateVirtualViewport({
-                screenSize: hostElement.getBoundingClientRect(),
+                screenSize,
+                virtualHeight,
                 virtualWidth,
             });
             if (!virtualViewport) {
@@ -83,10 +140,18 @@ export function createAnthaVirtualViewportMod({ virtualWidth, }) {
             const hasViewportChanged = !hasSameVirtualViewport({
                 previousVirtualViewport: state.virtualViewport,
                 virtualViewport,
-            }) || hostElement.style.transform !== `scale(${virtualViewport.scale})`;
+            }) ||
+                hostElement.style.transform !==
+                    getVirtualViewportHostTransform({
+                        isFixedViewport,
+                        screenSize,
+                        virtualViewport,
+                    });
             if (hasViewportChanged) {
                 updateVirtualViewportHostElement({
                     hostElement,
+                    isFixedViewport,
+                    screenSize,
                     virtualViewport,
                 });
                 state.virtualViewport = virtualViewport;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@antha/graphics-2d",
-    "version": "0.15.1",
+    "version": "0.17.0",
     "description": "An Antha mod for rendering 2D graphics to a canvas.",
     "keywords": [
         "vir",
@@ -31,8 +31,8 @@
     "scripts": {
         "compile": "virmator compile",
         "docs": "virmator docs",
-        "test": "virmator test web",
-        "test:coverage": "NODE_OPTIONS=--import=tsx npm test coverage",
+        "test": "NODE_OPTIONS=--import=tsx virmator test web",
+        "test:coverage": "npm test coverage",
         "test:docs": "virmator docs check"
     },
     "dependencies": {
@@ -40,8 +40,8 @@
         "@augment-vir/common": "^32.3.0"
     },
     "devDependencies": {
-        "@antha/engine": "^0.15.1",
-        "@antha/web-test-runner-plugin-pixi": "^0.15.1",
+        "@antha/engine": "^0.17.0",
+        "@antha/web-test-runner-plugin-pixi": "^0.17.0",
         "@augment-vir/test": "^32.3.0",
         "@electrovir/color": "^2.0.0",
         "@web/dev-server-esbuild": "^2.0.0",
@@ -52,7 +52,7 @@
         "vira": "32.0.0"
     },
     "peerDependencies": {
-        "@antha/engine": "^0.15.1",
+        "@antha/engine": "^0.17.0",
         "@electrovir/color": "^2",
         "element-vir": "^27",
         "pixi.js": "^8",