like2d 2.9.0 → 2.10.0

package/dist/{core → graphics}/canvas.d.ts

@@ -1,22 +1,24 @@
-import { EngineDispatch } from "../engine";
+import { type Dispatcher } from "../events";
 import { Rectangle } from "../math/rect";
 import { type Vector2 } from "../math/vector2";
 export type CanvasModeOptions = {
     fullscreen: boolean;
 };
 export type CanvasSize = Vector2 | 'native';
-export declare class CanvasInternal {
-    dispatch: EngineDispatch;
+export declare class Canvas {
     /** The ultimately visible canvas in the browser */
-    _displayCanvas: HTMLCanvasElement;
+    private displayCanvas;
+    private dispatch;
+    private abort;
     /** The canvas that we're drawing to with `like.gfx` functions.
-     * If it's the same as _displayCanvas, we're in native mode.
+     * If it's the same as displayCanvas, we're in native mode.
      * Otherwise, we're in pixelart mode, consisting of nearest -> linear scaling.
     */
-    _renderCanvas: HTMLCanvasElement;
+    private renderCanvas;
     private resizeTimeoutId;
-    private abort;
-    constructor(dispatch: EngineDispatch);
+    constructor(
+    /** The ultimately visible canvas in the browser */
+    displayCanvas: HTMLCanvasElement, dispatch: Dispatcher<'resize'>, abort: AbortSignal);
     /** Get a unified canvas info object. */
     getMode(): {
         size: Vector2;
@@ -40,19 +42,24 @@ export declare class CanvasInternal {
     setMode(size: CanvasSize, flags?: Partial<CanvasModeOptions>): void;
     /** Get the apparent (in-game) canvas size. */
     getSize(): Vector2;
+    private dispatchResize;
     /** Sometimes you want a screen rect! */
     getRect(): Rectangle;
     /** Get the actual (physical) canvas size on screen. */
-    _getDisplayPixelSize(): Vector2;
+    private getDisplayPixelSize;
     /** Are we fullscreen? */
     getFullscreen(): boolean;
     /** Set fullscreen. */
     setFullscreen(fullscreen: boolean): void;
+    /**
+     * Called internally by the engine before
+     * rendering a frame.
+     */
+    private preDraw;
     /** Called every frame by the engine after drawing */
-    _present(): void;
+    private postDraw;
     /** @returns if size was changed.  */
     static setCanvasElemSize(canvas: HTMLCanvasElement, newSize: Vector2): boolean;
     static getCanvasElemSize(canvas: HTMLCanvasElement): Vector2;
-    _dispose(): void;
 }
 //# sourceMappingURL=canvas.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"canvas.d.ts","sourceRoot":"","sources":["../../src/graphics/canvas.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,WAAW,CAAC;AAC5C,OAAO,EAAQ,SAAS,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,EAAQ,KAAK,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAErD,MAAM,MAAM,iBAAiB,GAAG;IAAE,UAAU,EAAE,OAAO,CAAA;CAAE,CAAC;AACxD,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,CAAC;AAE5C,qBAAa,MAAM;IAUX,mDAAmD;IACnD,OAAO,CAAC,aAAa;IACrB,OAAO,CAAC,QAAQ;IAChB,OAAO,CAAC,KAAK;IAZjB;;;MAGE;IACF,OAAO,CAAC,YAAY,CAAoB;IAExC,OAAO,CAAC,eAAe,CAAU;;IAG7B,mDAAmD;IAC3C,aAAa,EAAE,iBAAiB,EAChC,QAAQ,EAAE,UAAU,CAAC,QAAQ,CAAC,EAC9B,KAAK,EAAE,WAAW;IAoE9B,wCAAwC;IACxC,OAAO,IAAI;QAAE,IAAI,EAAE,OAAO,CAAC;QAAC,KAAK,EAAE,iBAAiB,CAAA;KAAE;IAStD;;;;;;;;;;;;;;OAcG;IACH,OAAO,CAAC,IAAI,EAAE,UAAU,EAAE,KAAK,GAAE,OAAO,CAAC,iBAAiB,CAAM;IA6BhE,8CAA8C;IAC9C,OAAO,IAAI,OAAO;IAIlB,OAAO,CAAC,cAAc;IAWtB,wCAAwC;IACxC,OAAO,IAAI,SAAS;IAIpB,uDAAuD;IACvD,OAAO,CAAC,mBAAmB;IAO3B,yBAAyB;IACzB,aAAa,IAAI,OAAO;IAIxB,sBAAsB;IACtB,aAAa,CAAC,UAAU,EAAE,OAAO;IAWjC;;;OAGG;IACH,OAAO,CAAC,OAAO;IAmBf,qDAAqD;IACrD,OAAO,CAAC,QAAQ;IA2BhB,qCAAqC;IACrC,MAAM,CAAC,iBAAiB,CAAC,MAAM,EAAE,iBAAiB,EAAE,OAAO,EAAE,OAAO,GAAG,OAAO;IAO9E,MAAM,CAAC,iBAAiB,CAAC,MAAM,EAAE,iBAAiB,GAAG,OAAO;CAG/D"}

package/dist/{core → graphics}/canvas.js

@@ -1,25 +1,32 @@
 import { Rect } from "../math/rect";
 import { Vec2 } from "../math/vector2";
-export class CanvasInternal {
-    constructor(dispatch) {
+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
         });
-        /** The ultimately visible canvas in the browser */
-        Object.defineProperty(this, "_displayCanvas", {
+        Object.defineProperty(this, "abort", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: void 0
+            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.
+         * 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", {
+        Object.defineProperty(this, "renderCanvas", {
             enumerable: true,
             configurable: true,
             writable: true,
@@ -31,27 +38,20 @@ export class CanvasInternal {
             writable: true,
             value: 0
         });
-        Object.defineProperty(this, "abort", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: new AbortController()
-        });
-        this._displayCanvas = document.createElement('canvas');
-        this._displayCanvas.tabIndex = 0;
-        this._displayCanvas.style.width = '100%';
-        this._displayCanvas.style.height = '100%';
-        this._renderCanvas = this._displayCanvas;
+        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) => {
+        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) {
+            if (this.renderCanvas == this.displayCanvas) {
                 /* Native mode. */
                 pos = Vec2.mul(rawPos, window.devicePixelRatio ?? 1);
                 delta = Vec2.mul(rawDelta, window.devicePixelRatio ?? 1);
@@ -61,8 +61,8 @@ export class CanvasInternal {
                 * which preserves aspect ratio.
                 */
                 const csize = [
-                    this._displayCanvas.clientWidth,
-                    this._displayCanvas.clientHeight
+                    this.displayCanvas.clientWidth,
+                    this.displayCanvas.clientHeight
                 ];
                 /* Scale of both dimensions */
                 const scale = calcAspectFriendlyScale(this.getSize(), csize);
@@ -75,14 +75,15 @@ export class CanvasInternal {
                     return;
                 }
             }
-            this._displayCanvas.dispatchEvent(new CustomEvent('like:mousemoved', {
+            this.displayCanvas.dispatchEvent(new CustomEvent('like:mousemoved', {
                 detail: {
                     pos,
                     delta,
-                    renderSize: this.getSize(),
                 }
             }));
-        }, { signal: this.abort.signal });
+        }, { 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() {
@@ -110,24 +111,24 @@ export class CanvasInternal {
      */
     setMode(size, flags = {}) {
         // set up sizing / render target
-        const prevRenderCanvas = this._renderCanvas;
+        const prevRenderCanvas = this.renderCanvas;
         if (size == 'native') {
-            this._displayCanvas.style.objectFit = 'fill';
-            this._renderCanvas = this._displayCanvas;
+            this.displayCanvas.style.objectFit = 'fill';
+            this.renderCanvas = this.displayCanvas;
         }
         else {
-            this._displayCanvas.style.objectFit = 'contain';
-            this._renderCanvas = document.createElement('canvas');
-            const changed = CanvasInternal.setCanvasElemSize(this._renderCanvas, size);
+            this.displayCanvas.style.objectFit = 'contain';
+            this.renderCanvas = document.createElement('canvas');
+            const changed = Canvas.setCanvasElemSize(this.renderCanvas, size);
             if (changed) {
-                this.dispatch('resize', [size]);
+                this.dispatchResize(size);
             }
         }
-        if (prevRenderCanvas != this._renderCanvas) {
-            this._displayCanvas.dispatchEvent(new CustomEvent('like:updateRenderTarget', {
+        if (prevRenderCanvas != this.renderCanvas) {
+            this.displayCanvas.dispatchEvent(new CustomEvent("like:updateRenderTarget", {
                 detail: {
-                    target: this._renderCanvas,
-                }
+                    target: this.renderCanvas,
+                },
             }));
         }
         if ('fullscreen' in flags) {
@@ -136,56 +137,73 @@ export class CanvasInternal {
     }
     /** Get the apparent (in-game) canvas size. */
     getSize() {
-        return [this._renderCanvas.width, this._renderCanvas.height];
+        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));
+    getDisplayPixelSize() {
+        return Vec2.round(Vec2.mul([this.displayCanvas.clientWidth, this.displayCanvas.clientHeight], window.devicePixelRatio ?? 1));
     }
     /** Are we fullscreen? */
     getFullscreen() {
-        return this._displayCanvas === document.fullscreenElement;
+        return this.displayCanvas === document.fullscreenElement;
     }
     /** Set fullscreen. */
     setFullscreen(fullscreen) {
         if (fullscreen) {
-            this._displayCanvas.requestFullscreen();
-            this._displayCanvas.focus();
+            this.displayCanvas.requestFullscreen();
+            this.displayCanvas.focus();
         }
         else {
-            document.exitFullscreen();
+            if (this.getFullscreen()) {
+                document.exitFullscreen();
+            }
         }
     }
-    /** Called every frame by the engine after drawing */
-    _present() {
-        if (this._renderCanvas == this._displayCanvas) {
-            const realSize = this._getDisplayPixelSize();
-            if ((realSize[0] != this._displayCanvas.width ||
-                realSize[1] != this._displayCanvas.height) &&
+    /**
+     * 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..
                  */
-                CanvasInternal.setCanvasElemSize(this._displayCanvas, realSize);
-                this.dispatch('resize', [realSize]);
+                Canvas.setCanvasElemSize(this.displayCanvas, realSize);
+                this.dispatchResize(realSize);
                 this.resizeTimeoutId = setTimeout(() => { this.resizeTimeoutId = 0; }, 250);
             }
         }
-        else if (this._renderCanvas != this._displayCanvas) {
+        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.
              */
-            CanvasInternal.setCanvasElemSize(this._displayCanvas, Vec2.mul(this.getSize(), Math.round(calcAspectFriendlyScale(this.getSize(), this._getDisplayPixelSize()))));
+            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');
+            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);
+            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.  */
@@ -199,9 +217,6 @@ export class CanvasInternal {
     static getCanvasElemSize(canvas) {
         return [canvas.width, canvas.height];
     }
-    _dispose() {
-        this.abort.abort();
-    }
 }
 /** How much could this image be scaled, preserving aspect? */
 function calcAspectFriendlyScale(imageSize, containerSize) {

package/dist/{core/graphics.d.ts → graphics/drawing.d.ts}

@@ -26,9 +26,9 @@
  * - Y increases down
  * - Angles in radians, 0 is right, positive is clockwise
  */
-import type { Vector2 } from "../math/vector2";
+import { type Vector2 } from "../math/vector2";
 import type { Rectangle } from "../math/rect";
-type DrawMode = "fill" | "line";
+export type DrawMode = "fill" | "line";
 /**
  * - RGBA array with values 0-1: `[r, g, b, a]`
  * - Alpha defaults to 1 if omitted
@@ -49,7 +49,7 @@ export type DrawProps = ShapeProps & {
 };
 export type PrintProps = {
     font?: string;
-    limit?: number;
+    width?: number;
     align?: CanvasTextAlign;
 };
 export declare class ImageHandle {
@@ -64,14 +64,18 @@ export declare class ImageHandle {
     getElement(): HTMLImageElement | null;
 }
 /**
- * A ready-made pure module for drawing to non-LIKE canvases.
+ * All of these methods exist on `like.gfx`, but with `ctx`
+ * bound to the first arg.
  *
- * Acts as the core of the graphics system.
+ * Acts as the core of the graphics system, but can be used separately.
+ *
+ * ```ts
+ * import { draw } from "like/graphics"
+ * draw.clear(my2dContext, "red");
+ * ```
  *
- * import { pure as gfx } from "like/internal/graphics"
- * gfx.clear(my2dContext, "red");
  */
-export declare const pure: {
+export declare const draw: {
     /**
      * Clears the canvas with a solid color.
      * @param ctx Canvas context.
@@ -94,12 +98,11 @@ export declare const pure: {
      * @param color Fill or stroke color.
      * @param position Center position.
      * @param radii Radius (number) or [rx, ry] for ellipse.
-     * @param props Optional angle, arc, or stroke properties.
+     * @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 & {
-        angle?: number;
         arc?: [number, number];
-        center: boolean;
+        center?: boolean;
     }): void;
     /**
      * Draws connected line segments.
@@ -110,12 +113,20 @@ export declare const pure: {
      */
     line(ctx: CanvasRenderingContext2D, color: Color, points: Vector2[], props?: ShapeProps): void;
     /**
-     * Draws text at position.
+     * 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 Optional font, text limit, or alignment.
+     * @param props {@link PrintProps} Optional font, text limit, or alignment.
      */
     print(ctx: CanvasRenderingContext2D, color: Color, text: string, position: Vector2, props?: PrintProps): void;
     /**
@@ -189,15 +200,4 @@ export declare const pure: {
      */
     scale(ctx: CanvasRenderingContext2D, factor: number | Vector2): void;
 };
-type Bind<F> = F extends (ctx: CanvasRenderingContext2D, ...args: infer A) => infer R ? (...args: A) => R : never;
-/**
- * A graphics object with a canvas already attatched to it.
- * Calling its methods will draw to the render canvas.
- * See {@link graphics} for more info.
- */
-export type BoundGraphics = {
-    [K in keyof typeof pure]: Bind<(typeof pure)[K]>;
-};
-export declare function bindGraphics(ctx: CanvasRenderingContext2D): BoundGraphics;
-export {};
-//# sourceMappingURL=graphics.d.ts.map
+//# 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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"}

package/dist/{core/graphics.js → graphics/drawing.js}

@@ -26,6 +26,7 @@
  * - Y increases down
  * - Angles in radians, 0 is right, positive is clockwise
  */
+import { Vec2 } from "../math/vector2";
 export class ImageHandle {
     constructor(path) {
         Object.defineProperty(this, "path", {
@@ -94,15 +95,40 @@ function setStrokeProps(ctx, props) {
     ctx.lineJoin = props?.lineJoin ?? "miter";
     ctx.miterLimit = props?.miterLimit ?? 10;
 }
+function wrapText(ctx, text, maxWidth) {
+    const words = text.split(" ");
+    const [first, ...rest] = words;
+    const lines = [];
+    let current = first ?? "";
+    rest.forEach((word) => {
+        if (ctx.measureText(current + " " + word).width < maxWidth) {
+            current += " " + word;
+        }
+        else {
+            lines.push(current);
+            current = word;
+        }
+    });
+    lines.push(current);
+    return lines;
+}
+function getFontHeight(ctx) {
+    const match = ctx.font.match(/(\d+)px/);
+    return match ? parseInt(match[1]) : 16;
+}
 /**
- * A ready-made pure module for drawing to non-LIKE canvases.
+ * 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.
  *
- * Acts as the core of the graphics system.
+ * ```ts
+ * import { draw } from "like/graphics"
+ * draw.clear(my2dContext, "red");
+ * ```
  *
- * import { pure as gfx } from "like/internal/graphics"
- * gfx.clear(my2dContext, "red");
  */
-export const pure = {
+export const draw = {
     /**
      * Clears the canvas with a solid color.
      * @param ctx Canvas context.
@@ -139,20 +165,23 @@ export const pure = {
      * @param color Fill or stroke color.
      * @param position Center position.
      * @param radii Radius (number) or [rx, ry] for ellipse.
-     * @param props Optional angle, arc, or stroke properties.
+     * @param props Optional arc, center, and stroke properties. Center is true by default.
      */
     circle(ctx, mode, color, position, radii, props) {
-        const [x, y] = position;
+        const center = (props && 'center' in props) ? props.center : true;
         const c = applyColor(color);
-        const [rx, ry] = typeof radii === "number" ? [radii, radii] : radii;
+        const size = typeof radii === "number" ? [radii, radii] : radii;
         const [startAngle, endAngle] = props?.arc ?? [0, Math.PI * 2];
-        const rotation = props?.angle ?? 0;
+        if (!center) {
+            position = Vec2.add(position, size);
+        }
         ctx.save();
-        ctx.translate(x, y);
-        ctx.scale(rx, ry);
-        ctx.rotate(rotation);
+        ctx.translate(...position);
+        ctx.scale(...size);
         ctx.beginPath();
         ctx.arc(0, 0, 1, startAngle, endAngle);
+        if (mode == 'fill')
+            ctx.lineTo(0, 0);
         ctx.closePath();
         ctx.restore();
         if (mode === "fill") {
@@ -184,30 +213,36 @@ export const pure = {
         ctx.stroke();
     },
     /**
-     * Draws text at position.
+     * 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 Optional font, text limit, or alignment.
+     * @param props {@link PrintProps} Optional font, text limit, or alignment.
      */
     print(ctx, color, text, position, props) {
         const [x, y] = position;
-        const { font = "16px sans-serif", limit, align = "left" } = props ?? {};
+        const { font = "16px sans-serif" } = props ?? {};
         ctx.fillStyle = parseColor(color);
         ctx.font = font;
-        if (limit !== undefined) {
-            const lines = wrapText(ctx, text, limit);
+        ctx.textAlign = props?.align ?? "left";
+        if (props && 'width' in props) {
+            const { width } = props;
+            const lines = wrapText(ctx, text, width);
             const lineHeight = getFontHeight(ctx);
+            ctx.textBaseline = "top";
             lines.forEach((line, i) => {
-                const lineWidth = ctx.measureText(line).width;
-                const drawX = align === "center"
-                    ? x + (limit - lineWidth) / 2
-                    : align === "right"
-                        ? x + limit - lineWidth
-                        : x;
-                ctx.fillText(line, drawX, y + i * lineHeight);
+                ctx.fillText(line, x, y + i * lineHeight, width);
             });
+            ctx.textBaseline = "alphabetic";
         }
         else {
             ctx.fillText(text, x, y);
@@ -351,31 +386,3 @@ export const pure = {
         ctx.scale(sx, sy);
     },
 };
-function wrapText(ctx, text, maxWidth) {
-    const words = text.split(" ");
-    const [first, ...rest] = words;
-    const lines = [];
-    let current = first ?? "";
-    rest.forEach((word) => {
-        if (ctx.measureText(current + " " + word).width < maxWidth) {
-            current += " " + word;
-        }
-        else {
-            lines.push(current);
-            current = word;
-        }
-    });
-    lines.push(current);
-    return lines;
-}
-function getFontHeight(ctx) {
-    const match = ctx.font.match(/(\d+)px/);
-    return match ? parseInt(match[1]) : 16;
-}
-export function bindGraphics(ctx) {
-    const bound = {};
-    for (const [name, fn] of Object.entries(pure)) {
-        bound[name] = (...args) => fn(ctx, ...args);
-    }
-    return bound;
-}

package/dist/graphics/index.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @module graphics
+ * @description a reduced-state, Love2D-like wrapper around browser canvas
+ */
+import { draw } from "./drawing";
+export type { Color, DrawMode, ShapeProps, DrawProps, PrintProps, ImageHandle, } from "./drawing";
+export { draw } from "./drawing";
+export type { CanvasModeOptions, CanvasSize, Canvas, } from "./canvas";
+type Bind<F> = F extends (ctx: CanvasRenderingContext2D, ...args: infer A) => infer R ? (...args: A) => R : never;
+/**
+ * A graphics object with a canvas already attatched to it.
+ * Calling its methods will draw to the render canvas.
+ * See {@link graphics} for more info.
+ */
+export type BoundGraphics = {
+    [K in keyof typeof draw]: Bind<(typeof draw)[K]>;
+};
+export declare function bindGraphics(ctx: CanvasRenderingContext2D): BoundGraphics;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/graphics/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAEjC,YAAY,EACV,KAAK,EACL,QAAQ,EACR,UAAU,EACV,SAAS,EACT,UAAU,EACV,WAAW,GACZ,MAAM,WAAW,CAAC;AAEnB,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAEjC,YAAY,EACV,iBAAiB,EACjB,UAAU,EACV,MAAM,GACP,MAAM,UAAU,CAAC;AAElB,KAAK,IAAI,CAAC,CAAC,IAAI,CAAC,SAAS,CACvB,GAAG,EAAE,wBAAwB,EAC7B,GAAG,IAAI,EAAE,MAAM,CAAC,KACb,MAAM,CAAC,GACR,CAAC,GAAG,IAAI,EAAE,CAAC,KAAK,CAAC,GACjB,KAAK,CAAC;AAEV;;;;GAIG;AACH,MAAM,MAAM,aAAa,GAAG;KACzB,CAAC,IAAI,MAAM,OAAO,IAAI,GAAG,IAAI,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;CACjD,CAAC;AAEF,wBAAgB,YAAY,CAAC,GAAG,EAAE,wBAAwB,GAAG,aAAa,CAMzE"}

package/dist/graphics/index.js

@@ -0,0 +1,13 @@
+/**
+ * @module graphics
+ * @description a reduced-state, Love2D-like wrapper around browser canvas
+ */
+import { draw } from "./drawing";
+export { draw } from "./drawing";
+export function bindGraphics(ctx) {
+    const bound = {};
+    for (const [name, fn] of Object.entries(draw)) {
+        bound[name] = (...args) => fn(ctx, ...args);
+    }
+    return bound;
+}

package/dist/index.d.ts

@@ -1,19 +1,10 @@
 /**
  * @module like2d
  * @description A cozy web-native 2D game framework.
- *
- * See main like/README.md file an for overview of Like2D.
  */
-import type { LikeEvent } from './core/events';
-import type { Like } from './core/like';
-export type { Like } from './core/like';
-export type { LikeEvent, EventType, EventMap } from './core/events';
-export type { CanvasSize, CanvasModeOptions as CanvasModeFlags } from './core/canvas';
-export type { Color, ShapeProps, DrawProps, PrintProps } from './core/graphics';
-export { ImageHandle } from './core/graphics';
-export type { AudioSource, AudioSourceOptions } from './core/audio';
-export { type LikeButton } from './core/gamepad';
-export type TopLevelEventHandler = (event: LikeEvent) => void;
+import type { Like } from './like';
+export type { Like, TopLevelEventHandler } from './like';
+export type { LikeEvent, EventType, EventMap } from './events';
 /**
  * Create a new Like2D game instance attached to a DOM container.
  *
@@ -21,26 +12,8 @@ export type TopLevelEventHandler = (event: LikeEvent) => void;
  * initializes all subsystems (graphics, audio, input), and returns an object
  * where you can assign game callbacks.
  *
- * ### How to bind callbacks
- *
- * ```ts
- * export const like = createLike();
- *
- * like.start();
- *
- * like.draw = () => { like.gfx.clear('yellow') }
- *
- * like.update = function (dt: number) {
- *   if (dt === Math.random()) {
- *     console.log("You just won the Powerball!")
- *   }
- * }
- * ```
- *
  * @param container - The HTML element to attach the game canvas to.
- *                    Must be in the DOM.
  * @returns A {@link Like} instance ready for callback assignment
- *
  */
 export declare function createLike(container: HTMLElement): Like;
 //# sourceMappingURL=index.d.ts.map