@antha/graphics-2d 0.6.1 → 0.8.0

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

@@ -0,0 +1,80 @@
+import { type AnthaGraphics2dModState } from './antha-graphics-2d.mod.js';
+/**
+ * The logical dimensions and scale of a virtual viewport.
+ *
+ * @category Internal
+ */
+export type VirtualViewport = {
+    height: number;
+    scale: number;
+    width: number;
+};
+/**
+ * The dimensions of a virtual viewport without its scale.
+ *
+ * @category Internal
+ */
+export type VirtualViewportSize = Pick<VirtualViewport, 'height' | 'width'>;
+/**
+ * State added by {@link createAnthaVirtualViewportMod}.
+ *
+ * @category Internal
+ */
+export type AnthaVirtualViewportModState = AnthaGraphics2dModState & {
+    virtualViewport: VirtualViewport | undefined;
+};
+/**
+ * Calculates the logical viewport for a physical screen size.
+ *
+ * @category Util
+ */
+export declare function calculateVirtualViewport({ screenSize, virtualWidth, }: Readonly<{
+    screenSize: Readonly<VirtualViewportSize>;
+    virtualWidth: number;
+}>): {
+    height: number;
+    scale: number;
+    width: number;
+} | undefined;
+/**
+ * Maps a pointer position from canvas coordinates into a virtual viewport.
+ *
+ * @category Util
+ */
+export declare function calculateVirtualViewportPoint({ canvasBounds, clientPoint, virtualViewport, }: Readonly<{
+    canvasBounds: Readonly<{
+        height: number;
+        left: number;
+        top: number;
+        width: number;
+    }>;
+    clientPoint: Readonly<{
+        x: number;
+        y: number;
+    }>;
+    virtualViewport: Readonly<VirtualViewportSize>;
+}>): {
+    x: number;
+    y: number;
+} | undefined;
+/**
+ * Creates Pixi options that preserve visual density when a virtual viewport is scaled.
+ *
+ * @category Util
+ */
+export declare function createVirtualViewportPixiOptions(): {
+    autoDensity: boolean;
+    resolution: number;
+};
+/**
+ * A pre-built mod that scales an Antha UI and Pixi canvas to a logical viewport width.
+ *
+ * @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>>;

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

@@ -0,0 +1,109 @@
+import { defineAnthaMod } from '@antha/engine';
+/**
+ * Calculates the logical viewport for a physical screen size.
+ *
+ * @category Util
+ */
+export function calculateVirtualViewport({ screenSize, virtualWidth, }) {
+    if (!screenSize.width || !virtualWidth) {
+        return undefined;
+    }
+    const scale = screenSize.width / virtualWidth;
+    return {
+        height: screenSize.height / scale,
+        scale,
+        width: virtualWidth,
+    };
+}
+/**
+ * Maps a pointer position from canvas coordinates into a virtual viewport.
+ *
+ * @category Util
+ */
+export function calculateVirtualViewportPoint({ canvasBounds, clientPoint, virtualViewport, }) {
+    if (!canvasBounds.width || !canvasBounds.height) {
+        return undefined;
+    }
+    return {
+        x: ((clientPoint.x - canvasBounds.left) / canvasBounds.width) * virtualViewport.width,
+        y: ((clientPoint.y - canvasBounds.top) / canvasBounds.height) * virtualViewport.height,
+    };
+}
+/**
+ * Creates Pixi options that preserve visual density when a virtual viewport is scaled.
+ *
+ * @category Util
+ */
+export function createVirtualViewportPixiOptions() {
+    return {
+        autoDensity: true,
+        resolution: globalThis.devicePixelRatio || 1,
+    };
+}
+function hasSameVirtualViewport({ previousVirtualViewport, virtualViewport, }) {
+    return (previousVirtualViewport != undefined &&
+        Math.abs(previousVirtualViewport.height - virtualViewport.height) < 0.01 &&
+        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})`;
+    hostElement.style.transformOrigin = 'top left';
+    hostElement.style.width = `${100 / virtualViewport.scale}%`;
+}
+function resetVirtualViewportHostElement({ hostElement, }) {
+    hostElement.style.removeProperty('height');
+    hostElement.style.removeProperty('transform');
+    hostElement.style.removeProperty('transform-origin');
+    hostElement.style.removeProperty('width');
+}
+/**
+ * A pre-built mod that scales an Antha UI and Pixi canvas to a logical viewport width.
+ *
+ * @category Pre-Built Mods
+ */
+export function createAnthaVirtualViewportMod({ virtualWidth, }) {
+    return defineAnthaMod({
+        modName: 'antha-virtual-viewport',
+        cleanup({ hostElement, state }) {
+            resetVirtualViewportHostElement({
+                hostElement,
+            });
+            state.virtualViewport = undefined;
+        },
+        execute({ hostElement, state }) {
+            const virtualViewport = calculateVirtualViewport({
+                screenSize: hostElement.getBoundingClientRect(),
+                virtualWidth,
+            });
+            if (!virtualViewport) {
+                return;
+            }
+            const hasViewportChanged = !hasSameVirtualViewport({
+                previousVirtualViewport: state.virtualViewport,
+                virtualViewport,
+            }) || hostElement.style.transform !== `scale(${virtualViewport.scale})`;
+            if (hasViewportChanged) {
+                updateVirtualViewportHostElement({
+                    hostElement,
+                    virtualViewport,
+                });
+                state.virtualViewport = virtualViewport;
+            }
+            const pixiApplication = state.pixi?.pixiApplication;
+            if (!pixiApplication ||
+                (!hasViewportChanged &&
+                    pixiApplication.renderer.resolution ===
+                        (globalThis.devicePixelRatio || 1) * virtualViewport.scale &&
+                    pixiApplication.stage.scale.x === 1 &&
+                    pixiApplication.stage.scale.y === 1)) {
+                return;
+            }
+            pixiApplication.renderer.resolution =
+                (globalThis.devicePixelRatio || 1) * virtualViewport.scale;
+            pixiApplication.resize();
+            pixiApplication.stage.scale.set(1);
+        },
+    });
+}

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export * from './antha-graphics-2d.mod.js';
 export * from './antha-mock-pixi.mod.js';
+export * from './antha-virtual-viewport.mod.js';
 export * from './mock-pixi.js';
 export * from 'pixi.js';

package/dist/index.js

@@ -1,4 +1,5 @@
 export * from './antha-graphics-2d.mod.js';
 export * from './antha-mock-pixi.mod.js';
+export * from './antha-virtual-viewport.mod.js';
 export * from './mock-pixi.js';
 export * from 'pixi.js';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@antha/graphics-2d",
-    "version": "0.6.1",
+    "version": "0.8.0",
     "description": "An Antha mod for rendering 2D graphics to a canvas.",
     "keywords": [
         "vir",
@@ -32,7 +32,7 @@
         "compile": "virmator compile",
         "docs": "virmator docs",
         "test": "virmator test web",
-        "test:coverage": "npm test coverage",
+        "test:coverage": "NODE_OPTIONS=--import=tsx npm test coverage",
         "test:docs": "virmator docs check"
     },
     "dependencies": {
@@ -40,19 +40,19 @@
         "@augment-vir/common": "^32.2.3"
     },
     "devDependencies": {
-        "@antha/engine": "^0.6.1",
-        "@antha/web-test-runner-plugin-pixi": "^0.6.1",
+        "@antha/engine": "^0.8.0",
+        "@antha/web-test-runner-plugin-pixi": "^0.8.0",
         "@augment-vir/test": "^32.2.3",
         "@electrovir/color": "^1.7.11",
         "@web/dev-server-esbuild": "^2.0.0",
         "@web/test-runner": "^1.0.0",
         "@web/test-runner-playwright": "^1.0.0",
         "istanbul-smart-text-reporter": "^1.1.5",
-        "pixi.js": "^8.19.0",
-        "vira": "31.31.5"
+        "pixi.js": "^8.20.0",
+        "vira": "31.31.6"
     },
     "peerDependencies": {
-        "@antha/engine": "^0.6.1",
+        "@antha/engine": "^0.8.0",
         "@electrovir/color": ">=1",
         "element-vir": ">=26",
         "pixi.js": ">=8",