like2d 2.8.0 → 2.10.0

package/dist/graphics/canvas.js

@@ -0,0 +1,224 @@
+import { Rect } from "../math/rect";
+import { Vec2 } from "../math/vector2";
+export class Canvas {
+    constructor(
+    /** The ultimately visible canvas in the browser */
+    displayCanvas, dispatch, abort) {
+        Object.defineProperty(this, "displayCanvas", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: displayCanvas
+        });
+        Object.defineProperty(this, "dispatch", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: dispatch
+        });
+        Object.defineProperty(this, "abort", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: abort
+        });
+        /** The canvas that we're drawing to with `like.gfx` functions.
+         * If it's the same as displayCanvas, we're in native mode.
+         * Otherwise, we're in pixelart mode, consisting of nearest -> linear scaling.
+        */
+        Object.defineProperty(this, "renderCanvas", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "resizeTimeoutId", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 0
+        });
+        displayCanvas.tabIndex = 0;
+        displayCanvas.style.width = '100%';
+        displayCanvas.style.height = '100%';
+        this.renderCanvas = this.displayCanvas;
+        this.setMode('native');
+        /** Only the canvas can really transform the mouse to the game size.
+         * This hack sends an event for the mouse module to listen to.
+         */
+        this.displayCanvas.addEventListener('mousemove', (ev) => {
+            let pos;
+            let delta;
+            const rawPos = [ev.offsetX, ev.offsetY];
+            const rawDelta = [ev.movementX, ev.movementY];
+            if (this.renderCanvas == this.displayCanvas) {
+                /* Native mode. */
+                pos = Vec2.mul(rawPos, window.devicePixelRatio ?? 1);
+                delta = Vec2.mul(rawDelta, window.devicePixelRatio ?? 1);
+            }
+            else {
+                /* Pixelart mode. This math simulates object-fit: contain,
+                * which preserves aspect ratio.
+                */
+                const csize = [
+                    this.displayCanvas.clientWidth,
+                    this.displayCanvas.clientHeight
+                ];
+                /* Scale of both dimensions */
+                const scale = calcAspectFriendlyScale(this.getSize(), csize);
+                /* Upper-left corner */
+                const offset = Vec2.div(Vec2.sub(csize, Vec2.mul(this.getSize(), scale)), 2);
+                pos = Vec2.div(Vec2.sub(rawPos, offset), scale);
+                delta = Vec2.div(rawDelta, scale);
+                /* Only handle mousemove events that are in bounds. */
+                if (!Rect.containsPoint(this.getRect(), pos)) {
+                    return;
+                }
+            }
+            this.displayCanvas.dispatchEvent(new CustomEvent('like:mousemoved', {
+                detail: {
+                    pos,
+                    delta,
+                }
+            }));
+        }, { signal: this.abort });
+        this.displayCanvas.addEventListener("like:preDraw", this.preDraw.bind(this), { signal: this.abort });
+        this.displayCanvas.addEventListener("like:postDraw", this.postDraw.bind(this), { signal: this.abort });
+    }
+    /** Get a unified canvas info object. */
+    getMode() {
+        return {
+            size: this.getSize(),
+            flags: {
+                fullscreen: this.getFullscreen(),
+            }
+        };
+    }
+    /** Set the game's apparent resolution, fullscreen, etc.
+     *
+     * ### `'native'` mode
+     * Keeps the canvas pixel resolution
+     * the same as the physical pixel resolution of the
+     * device.
+     *
+     * ### Pixel art mode `[width, height]`
+     * The canvas will use prescaling to keep your pixel
+     * games looking sharp, but without the uneven pixels
+     * caused by the naive approach.
+     *
+     * @param size 'native' for native mode, otherwise [width, height]
+     * @param flags optional options.
+     */
+    setMode(size, flags = {}) {
+        // set up sizing / render target
+        const prevRenderCanvas = this.renderCanvas;
+        if (size == 'native') {
+            this.displayCanvas.style.objectFit = 'fill';
+            this.renderCanvas = this.displayCanvas;
+        }
+        else {
+            this.displayCanvas.style.objectFit = 'contain';
+            this.renderCanvas = document.createElement('canvas');
+            const changed = Canvas.setCanvasElemSize(this.renderCanvas, size);
+            if (changed) {
+                this.dispatchResize(size);
+            }
+        }
+        if (prevRenderCanvas != this.renderCanvas) {
+            this.displayCanvas.dispatchEvent(new CustomEvent("like:updateRenderTarget", {
+                detail: {
+                    target: this.renderCanvas,
+                },
+            }));
+        }
+        if ('fullscreen' in flags) {
+            this.setFullscreen(flags.fullscreen);
+        }
+    }
+    /** Get the apparent (in-game) canvas size. */
+    getSize() {
+        return [this.renderCanvas.width, this.renderCanvas.height];
+    }
+    dispatchResize(size) {
+        this.displayCanvas.dispatchEvent(new CustomEvent("like:resizeCanvas", {
+            detail: {
+                size,
+            },
+        }));
+        this.dispatch("resize", [size]);
+    }
+    /** Sometimes you want a screen rect! */
+    getRect() {
+        return [0, 0, ...this.getSize()];
+    }
+    /** Get the actual (physical) canvas size on screen. */
+    getDisplayPixelSize() {
+        return Vec2.round(Vec2.mul([this.displayCanvas.clientWidth, this.displayCanvas.clientHeight], window.devicePixelRatio ?? 1));
+    }
+    /** Are we fullscreen? */
+    getFullscreen() {
+        return this.displayCanvas === document.fullscreenElement;
+    }
+    /** Set fullscreen. */
+    setFullscreen(fullscreen) {
+        if (fullscreen) {
+            this.displayCanvas.requestFullscreen();
+            this.displayCanvas.focus();
+        }
+        else {
+            if (this.getFullscreen()) {
+                document.exitFullscreen();
+            }
+        }
+    }
+    /**
+     * Called internally by the engine before
+     * rendering a frame.
+     */
+    preDraw() {
+        if (this.renderCanvas == this.displayCanvas) {
+            const realSize = this.getDisplayPixelSize();
+            if ((realSize[0] != this.displayCanvas.width ||
+                realSize[1] != this.displayCanvas.height) &&
+                !this.resizeTimeoutId) {
+                /** In native scaling mode, zooming and resizing the window cause us
+                 * to set canvas width and height every frame, which could cause
+                 * tons of canvas bitmap reallocations. So wait 1/4 second..
+                 */
+                Canvas.setCanvasElemSize(this.displayCanvas, realSize);
+                this.dispatchResize(realSize);
+                this.resizeTimeoutId = setTimeout(() => { this.resizeTimeoutId = 0; }, 250);
+            }
+        }
+        this.renderCanvas.getContext('2d').resetTransform();
+    }
+    /** Called every frame by the engine after drawing */
+    postDraw() {
+        if (this.renderCanvas != this.displayCanvas) {
+            /* We're in pixelart mode,
+             * so set output canvas size to an ideal integer scale.
+             * No debounce: changes to integer ratio are infrequent.
+             */
+            Canvas.setCanvasElemSize(this.displayCanvas, Vec2.mul(this.getSize(), Math.round(calcAspectFriendlyScale(this.getSize(), this.getDisplayPixelSize()))));
+            // Copy the internal canvas to the visible one.
+            const ctx = this.displayCanvas.getContext('2d');
+            ctx.imageSmoothingEnabled = false;
+            ctx.drawImage(this.renderCanvas, 0, 0, this.renderCanvas.width, this.renderCanvas.height, 0, 0, this.displayCanvas.width, this.displayCanvas.height);
+        }
+    }
+    /** @returns if size was changed.  */
+    static setCanvasElemSize(canvas, newSize) {
+        if (canvas.width != newSize[0] || canvas.height != newSize[1]) {
+            [canvas.width, canvas.height] = newSize;
+            return true;
+        }
+        return false;
+    }
+    static getCanvasElemSize(canvas) {
+        return [canvas.width, canvas.height];
+    }
+}
+/** How much could this image be scaled, preserving aspect? */
+function calcAspectFriendlyScale(imageSize, containerSize) {
+    return Math.min(...Vec2.div(containerSize, imageSize));
+}

package/dist/graphics/drawing.d.ts

@@ -0,0 +1,203 @@
+/**
+ * @module graphics
+ * @description a reduced-state, Love2D-like wrapper around browser canvas
+ *
+ * # Graphics Module
+ *
+ * A wrapper around browser Canvas.
+ * In standard usage `like.gfx` gives a {@link BoundGraphics} object with a canvas already on it.
+ * So, you can for example call `like.gfx.rectangle('fill', 'green', [10, 10, 30, 30])`
+ *
+ * ## State Isolation
+ * Each drawing operation resets relevant canvas state before executing:
+ * - Stroke properties (`lineWidth`, `lineCap`, `lineJoin`, `miterLimit`) are always set to defaults first
+ * - No state leakage between drawing calls
+ *
+ * ## Predicable Parameter Ordering
+ * - No clunky argument overrides that could affect positionality.
+ * - **Required arguments** come first as positional parameters
+ * - **Optional arguments** are grouped in a trailing `props` object
+ * - **Mode** `'fill' | 'line'` is the first arg if relevent.
+ * - **Color** then {@link Color}, if relevant -- there is no `setColor`.
+ *
+ * ## Note: Coordinate System is unchanged from native Canvas.
+ * - Origin (0, 0) at top-left
+ * - X increases right
+ * - Y increases down
+ * - Angles in radians, 0 is right, positive is clockwise
+ */
+import { type Vector2 } from "../math/vector2";
+import type { Rectangle } from "../math/rect";
+export type DrawMode = "fill" | "line";
+/**
+ * - RGBA array with values 0-1: `[r, g, b, a]`
+ * - Alpha defaults to 1 if omitted
+ * - CSS color strings also accepted: `"red"`, `"#ff0000"`, `"rgb(255,0,0)"`
+ */
+export type Color = [number, number, number, number?] | string;
+export type ShapeProps = {
+    lineWidth?: number;
+    lineCap?: CanvasLineCap;
+    lineJoin?: CanvasLineJoin;
+    miterLimit?: number;
+};
+export type DrawProps = ShapeProps & {
+    quad?: Rectangle;
+    r?: number;
+    scale?: number | Vector2;
+    origin?: number | Vector2;
+};
+export type PrintProps = {
+    font?: string;
+    width?: number;
+    align?: CanvasTextAlign;
+};
+export declare class ImageHandle {
+    readonly path: string;
+    private element;
+    private loadPromise;
+    private isLoaded;
+    constructor(path: string);
+    isReady(): boolean;
+    ready(): Promise<void>;
+    get size(): Vector2;
+    getElement(): HTMLImageElement | null;
+}
+/**
+ * All of these methods exist on `like.gfx`, but with `ctx`
+ * bound to the first arg.
+ *
+ * Acts as the core of the graphics system, but can be used separately.
+ *
+ * ```ts
+ * import { draw } from "like/graphics"
+ * draw.clear(my2dContext, "red");
+ * ```
+ *
+ */
+export declare const draw: {
+    /**
+     * Clears the canvas with a solid color.
+     * @param ctx Canvas context.
+     * @param color Fill color.
+     */
+    clear(ctx: CanvasRenderingContext2D, color?: Color): void;
+    /**
+     * Draws a rectangle.
+     * @param ctx Canvas context.
+     * @param mode Fill or line.
+     * @param color Fill or stroke color.
+     * @param rect Rectangle [x, y, w, h].
+     * @param props Optional stroke properties.
+     */
+    rectangle(ctx: CanvasRenderingContext2D, mode: DrawMode, color: Color, rect: Rectangle, props?: ShapeProps): void;
+    /**
+     * Draws a circle or ellipse.
+     * @param ctx Canvas context.
+     * @param mode Fill or line.
+     * @param color Fill or stroke color.
+     * @param position Center position.
+     * @param radii Radius (number) or [rx, ry] for ellipse.
+     * @param props Optional arc, center, and stroke properties. Center is true by default.
+     */
+    circle(ctx: CanvasRenderingContext2D, mode: DrawMode, color: Color, position: Vector2, radii: number | Vector2, props?: ShapeProps & {
+        arc?: [number, number];
+        center?: boolean;
+    }): void;
+    /**
+     * Draws connected line segments.
+     * @param ctx Canvas context.
+     * @param color Stroke color.
+     * @param points Array of [x, y] positions.
+     * @param props Optional stroke properties.
+     */
+    line(ctx: CanvasRenderingContext2D, color: Color, points: Vector2[], props?: ShapeProps): void;
+    /**
+     * Draws text at a position.
+     *
+     * Keep in mind: if you set `align` without `width` in your props,
+     * nothing will happen -- you'll get left-aligned text.
+     *
+     * Align works browser-style: if you align center, your text draws
+     * to the left and right of its position. If you align right, your position
+     * becomes the upper-right corner of the text.
+     *
+     * @param ctx Canvas context.
+     * @param color Fill color.
+     * @param text Text string.
+     * @param position Top-left position.
+     * @param props {@link PrintProps} Optional font, text limit, or alignment.
+     */
+    print(ctx: CanvasRenderingContext2D, color: Color, text: string, position: Vector2, props?: PrintProps): void;
+    /**
+     * Draws an image.
+     *
+     * @remarks named "draw" because it draws anything _drawable_
+     * in the long run.
+     *
+     * @param ctx Canvas context.
+     * @param handle Image handle from newImage.
+     * @param position Draw position.
+     * @param props Optional rotation, scale, origin, or quad.
+     */
+    draw(ctx: CanvasRenderingContext2D, handle: ImageHandle, position: Vector2, props?: DrawProps): void;
+    /**
+     * Loads an image from a path.
+     * Unlike built-in loading, this pretends to be synchronous.
+     * @param ctx Canvas context.
+     * @param path Image file path.
+     * @returns ImageHandle for use with draw.
+     */
+    newImage(_ctx: CanvasRenderingContext2D, path: string): ImageHandle;
+    /**
+     * Sets the clipping region.
+     * @param ctx Canvas context.
+     * @param rect Clipping rectangle, or full canvas if omitted.
+     */
+    clip(ctx: CanvasRenderingContext2D, rect?: Rectangle): void;
+    /**
+     * Draws a polygon.
+     * @param ctx Canvas context.
+     * @param mode Fill or line.
+     * @param color Fill or stroke color.
+     * @param points Array of [x, y] vertices.
+     * @param props Optional stroke properties.
+     */
+    polygon(ctx: CanvasRenderingContext2D, mode: DrawMode, color: Color, points: Vector2[], props?: ShapeProps): void;
+    /**
+     * Draws individual pixels.
+     * @param ctx Canvas context.
+     * @param color Fill color.
+     * @param pts Array of [x, y] positions.
+     */
+    points(ctx: CanvasRenderingContext2D, color: Color, pts: Vector2[]): void;
+    /**
+     * Saves canvas state.
+     * @param ctx Canvas context.
+     */
+    push(ctx: CanvasRenderingContext2D): void;
+    /**
+     * Restores canvas state.
+     * @param ctx Canvas context.
+     */
+    pop(ctx: CanvasRenderingContext2D): void;
+    /**
+     * Applies a translation.
+     * @param ctx Canvas context.
+     * @param offset [x, y] offset.
+     */
+    translate(ctx: CanvasRenderingContext2D, offset: Vector2): void;
+    /**
+     * Applies a rotation.
+     * @param ctx Canvas context.
+     * @param angle Rotation in radians.
+     */
+    rotate(ctx: CanvasRenderingContext2D, angle: number): void;
+    /**
+     * Applies a scale.
+     * @param ctx Canvas context.
+     * @param factor Scale factor (number or [x, y]).
+     */
+    scale(ctx: CanvasRenderingContext2D, factor: number | Vector2): void;
+};
+//# sourceMappingURL=drawing.d.ts.map

package/dist/graphics/drawing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawing.d.ts","sourceRoot":"","sources":["../../src/graphics/drawing.ts"],"names":[],"mappings":"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"}