@flighthq/displayobject-canvas 0.1.0

package/src/canvasTilemap.test.ts

@@ -0,0 +1,69 @@
+import { createImageResource } from '@flighthq/image';
+import { getOrCreateRenderProxy2D, prepareDisplayObjectRender } from '@flighthq/render';
+import { createTilemap, setTilemapTile } from '@flighthq/sprite';
+import { addTextureAtlasRegion, createTextureAtlas } from '@flighthq/textureatlas';
+import { buildTilesetRegions, createTileset } from '@flighthq/tileset';
+
+import { createCanvasRenderState } from './canvasRenderState';
+import { drawCanvasTilemap } from './canvasTilemap';
+
+function makeState() {
+  const canvas = document.createElement('canvas');
+  canvas.width = 400;
+  canvas.height = 400;
+  return createCanvasRenderState(canvas);
+}
+
+function makeTilesetAtlas(tileWidth = 32, tileHeight = 32, cols = 2, rows = 1) {
+  const img = document.createElement('img') as HTMLImageElement;
+  const source = createImageResource(img);
+  source.width = tileWidth * cols;
+  source.height = tileHeight * rows;
+  const atlas = createTextureAtlas({ image: source });
+  for (let r = 0; r < rows; r++) {
+    for (let c = 0; c < cols; c++) {
+      addTextureAtlasRegion(atlas, c * tileWidth, r * tileHeight, tileWidth, tileHeight);
+    }
+  }
+  const tileset = createTileset({ atlas, tileWidth, tileHeight, columns: cols, rows });
+  buildTilesetRegions(tileset);
+  return tileset;
+}
+
+describe('drawCanvasTilemap', () => {
+  it('does not draw when tileset is null', () => {
+    const state = makeState();
+    const tilemap = createTilemap();
+    prepareDisplayObjectRender(state, tilemap);
+    const renderProxy = getOrCreateRenderProxy2D(state, tilemap);
+    const spy = vi.spyOn(state.context, 'drawImage');
+    drawCanvasTilemap(state, renderProxy);
+    expect(spy).not.toHaveBeenCalled();
+  });
+
+  it('draws each non-empty tile with drawImage', () => {
+    const state = makeState();
+    const tileset = makeTilesetAtlas(32, 32, 2, 1);
+    const tilemap = createTilemap({ data: { columns: 2, rows: 1, tileset } });
+    setTilemapTile(tilemap, 0, 0, 0);
+    setTilemapTile(tilemap, 1, 0, 1);
+    prepareDisplayObjectRender(state, tilemap);
+    const renderProxy = getOrCreateRenderProxy2D(state, tilemap);
+    const spy = vi.spyOn(state.context, 'drawImage');
+    drawCanvasTilemap(state, renderProxy);
+    expect(spy).toHaveBeenCalledTimes(2);
+  });
+
+  it('skips cells with id -1', () => {
+    const state = makeState();
+    const tileset = makeTilesetAtlas(32, 32, 2, 1);
+    const tilemap = createTilemap({ data: { columns: 2, rows: 1, tileset } });
+    setTilemapTile(tilemap, 0, 0, 0);
+    // cell (1,0) remains -1
+    prepareDisplayObjectRender(state, tilemap);
+    const renderProxy = getOrCreateRenderProxy2D(state, tilemap);
+    const spy = vi.spyOn(state.context, 'drawImage');
+    drawCanvasTilemap(state, renderProxy);
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+});

package/src/canvasTransform.test.ts

@@ -0,0 +1,42 @@
+import { createMatrix } from '@flighthq/geometry';
+import type { CanvasRenderState, Matrix } from '@flighthq/types';
+
+import { createCanvasRenderState } from './canvasRenderState';
+import { setCanvasTransform } from './canvasTransform';
+
+describe('setCanvasTransform', () => {
+  let canvas: HTMLCanvasElement;
+  let state: CanvasRenderState;
+  let transform: Matrix;
+
+  beforeEach(() => {
+    canvas = document.createElement('canvas');
+    state = createCanvasRenderState(canvas);
+    transform = createMatrix(1, 2, 3, 4, 5.6789, 9.1011);
+  });
+
+  it('should call setTransform with correct values when roundPixels is false', () => {
+    setCanvasTransform(state, state.context, transform);
+    expect(state.context.setTransform).toHaveBeenCalledWith(
+      transform.a,
+      transform.b,
+      transform.c,
+      transform.d,
+      transform.tx,
+      transform.ty,
+    );
+  });
+
+  it('should call setTransform with frounded tx and ty when roundPixels is true', () => {
+    state.roundPixels = true;
+    setCanvasTransform(state, state.context, transform);
+    expect(state.context.setTransform).toHaveBeenCalledWith(
+      transform.a,
+      transform.b,
+      transform.c,
+      transform.d,
+      Math.fround(transform.tx),
+      Math.fround(transform.ty),
+    );
+  });
+});

package/src/canvasVideo.test.ts

@@ -0,0 +1,43 @@
+import { createVideo } from '@flighthq/displayobject';
+import { registerRenderer } from '@flighthq/render';
+import { getOrCreateRenderProxy2D } from '@flighthq/render';
+import { VideoKind } from '@flighthq/types';
+
+import { createCanvasRenderState } from './canvasRenderState';
+import { defaultCanvasVideoRenderer, drawCanvasVideo } from './canvasVideo';
+
+function makeState() {
+  const canvas = document.createElement('canvas');
+  canvas.width = 200;
+  canvas.height = 200;
+  const state = createCanvasRenderState(canvas);
+  registerRenderer(state, VideoKind, defaultCanvasVideoRenderer);
+  return state;
+}
+
+describe('defaultCanvasVideoRenderer', () => {
+  it('has submit, and createData functions', () => {
+    expect(typeof defaultCanvasVideoRenderer.submit).toBe('function');
+    expect(typeof defaultCanvasVideoRenderer.createData).toBe('function');
+  });
+});
+
+describe('drawCanvasVideo', () => {
+  it('does not throw when source is null', () => {
+    const state = makeState();
+    const video = createVideo();
+    const renderProxy = getOrCreateRenderProxy2D(state, video);
+    expect(() => drawCanvasVideo(state, renderProxy)).not.toThrow();
+  });
+
+  it('skips drawImage when element has not loaded', () => {
+    const state = makeState();
+    const video = createVideo();
+    const el = document.createElement('video');
+    video.data.source = { element: el } as never;
+    const renderProxy = getOrCreateRenderProxy2D(state, video);
+    const spy = vi.spyOn(state.context, 'drawImage');
+    drawCanvasVideo(state, renderProxy);
+    expect(spy).not.toHaveBeenCalled();
+  });
+});