@flighthq/displayobject-canvas 0.1.0

package/src/canvasMaterials.test.ts

@@ -0,0 +1,85 @@
+import type { CanvasRenderState } from '@flighthq/types';
+import { BlendMode } from '@flighthq/types';
+
+import { applyCanvasBlendMode, enableCanvasBlendMode } from './canvasMaterials';
+import { createCanvasRenderState, getCanvasRenderStateRuntime } from './canvasRenderState';
+
+describe('applyCanvasBlendMode', () => {
+  let canvas: HTMLCanvasElement;
+  let state: CanvasRenderState;
+
+  beforeEach(() => {
+    canvas = document.createElement('canvas');
+    state = createCanvasRenderState(canvas);
+  });
+
+  it('should not change globalCompositeOperation if blend mode is the same', () => {
+    getCanvasRenderStateRuntime(state).currentBlendMode = BlendMode.Lighten;
+    state.context.globalCompositeOperation = 'lighter'; // Pre-set value
+    applyCanvasBlendMode(state, BlendMode.Add);
+    expect(state.context.globalCompositeOperation).toBe('lighter');
+  });
+
+  it('should set globalCompositeOperation to "lighter" for BlendMode.Add', () => {
+    applyCanvasBlendMode(state, BlendMode.Add);
+    expect(state.context.globalCompositeOperation).toBe('lighter');
+  });
+
+  it('should set globalCompositeOperation to "darken" for BlendMode.Darken', () => {
+    applyCanvasBlendMode(state, BlendMode.Darken);
+    expect(state.context.globalCompositeOperation).toBe('darken');
+  });
+
+  it('should set globalCompositeOperation to "difference" for BlendMode.Difference', () => {
+    applyCanvasBlendMode(state, BlendMode.Difference);
+    expect(state.context.globalCompositeOperation).toBe('difference');
+  });
+
+  it('should set globalCompositeOperation to "hard-light" for BlendMode.Hardlight', () => {
+    applyCanvasBlendMode(state, BlendMode.Hardlight);
+    expect(state.context.globalCompositeOperation).toBe('hard-light');
+  });
+
+  it('should set globalCompositeOperation to "lighten" for BlendMode.Lighten', () => {
+    applyCanvasBlendMode(state, BlendMode.Lighten);
+    expect(state.context.globalCompositeOperation).toBe('lighten');
+  });
+
+  it('should set globalCompositeOperation to "multiply" for BlendMode.Multiply', () => {
+    applyCanvasBlendMode(state, BlendMode.Multiply);
+    expect(state.context.globalCompositeOperation).toBe('multiply');
+  });
+
+  it('should set globalCompositeOperation to "overlay" for BlendMode.Overlay', () => {
+    applyCanvasBlendMode(state, BlendMode.Overlay);
+    expect(state.context.globalCompositeOperation).toBe('overlay');
+  });
+
+  it('should set globalCompositeOperation to "screen" for BlendMode.Screen', () => {
+    applyCanvasBlendMode(state, BlendMode.Screen);
+    expect(state.context.globalCompositeOperation).toBe('screen');
+  });
+
+  it('should set globalCompositeOperation to "source-over" for default case', () => {
+    applyCanvasBlendMode(state, null);
+    expect(state.context.globalCompositeOperation).toBe('source-over');
+  });
+});
+
+describe('enableCanvasBlendMode', () => {
+  it('wires applyBlendMode onto the state', () => {
+    const canvas = document.createElement('canvas');
+    const s = createCanvasRenderState(canvas);
+    expect(s.applyBlendMode).toBeNull();
+    enableCanvasBlendMode(s);
+    expect(s.applyBlendMode).not.toBeNull();
+  });
+
+  it('causes blend modes to be applied to the canvas context', () => {
+    const canvas = document.createElement('canvas');
+    const s = createCanvasRenderState(canvas);
+    enableCanvasBlendMode(s);
+    s.applyBlendMode!(s, BlendMode.Multiply);
+    expect(s.context.globalCompositeOperation).toBe('multiply');
+  });
+});

package/src/canvasParticleEmitter.test.ts

@@ -0,0 +1,105 @@
+import type { RenderProxy2D } from '@flighthq/types';
+
+import { drawCanvasParticleEmitter } from './canvasParticleEmitter';
+import { createCanvasRenderState } from './canvasRenderState';
+
+function makeAtlas() {
+  const img = document.createElement('img') as HTMLImageElement;
+  return {
+    image: { source: img, width: 64, height: 64 },
+    regions: [{ id: 0, x: 0, y: 0, width: 32, height: 32 }],
+  };
+}
+
+function makeState() {
+  const canvas = document.createElement('canvas');
+  canvas.width = 800;
+  canvas.height = 400;
+  return createCanvasRenderState(canvas, {});
+}
+
+function makeRenderProxy(data: Record<string, unknown> = {}): RenderProxy2D {
+  return {
+    source: {
+      data: {
+        atlas: makeAtlas(),
+        particleCount: 1,
+        ids: new Uint16Array([0]),
+        transforms: new Float32Array([0, 0, 0, 1]),
+        alphas: new Float32Array([1]),
+        colors: new Float32Array([1, 1, 1]),
+        ...data,
+      },
+    },
+    blendMode: null,
+    alpha: 1,
+    transform2D: { a: 1, b: 0, c: 0, d: 1, tx: 0, ty: 0 },
+  } as unknown as RenderProxy2D;
+}
+
+describe('drawCanvasParticleEmitter', () => {
+  it('calls drawImage once for a single live particle', () => {
+    const state = makeState();
+    const spy = vi.spyOn(state.context, 'drawImage');
+    drawCanvasParticleEmitter(state, makeRenderProxy());
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+
+  it('calls drawImage once per live particle', () => {
+    const state = makeState();
+    const spy = vi.spyOn(state.context, 'drawImage');
+    drawCanvasParticleEmitter(
+      state,
+      makeRenderProxy({
+        particleCount: 3,
+        ids: new Uint16Array([0, 0, 0]),
+        transforms: new Float32Array([0, 0, 0, 1, 10, 10, 0, 1, 20, 20, 0, 1]),
+        alphas: new Float32Array([1, 0.5, 0.25]),
+        colors: new Float32Array([1, 1, 1, 1, 1, 1, 1, 1, 1]),
+      }),
+    );
+    expect(spy).toHaveBeenCalledTimes(3);
+  });
+
+  it('skips drawing when atlas is null', () => {
+    const state = makeState();
+    const spy = vi.spyOn(state.context, 'drawImage');
+    drawCanvasParticleEmitter(state, makeRenderProxy({ atlas: null }));
+    expect(spy).not.toHaveBeenCalled();
+  });
+
+  it('skips drawing when particleCount is 0', () => {
+    const state = makeState();
+    const spy = vi.spyOn(state.context, 'drawImage');
+    drawCanvasParticleEmitter(state, makeRenderProxy({ particleCount: 0 }));
+    expect(spy).not.toHaveBeenCalled();
+  });
+
+  it('does not throw on NaN particle transforms', () => {
+    const state = makeState();
+    expect(() =>
+      drawCanvasParticleEmitter(
+        state,
+        makeRenderProxy({
+          transforms: new Float32Array([Number.NaN, Number.NaN, Number.NaN, Number.NaN]),
+        }),
+      ),
+    ).not.toThrow();
+  });
+
+  it('skips particles with out-of-range region ids', () => {
+    const state = makeState();
+    const spy = vi.spyOn(state.context, 'drawImage');
+    drawCanvasParticleEmitter(
+      state,
+      makeRenderProxy({
+        particleCount: 3,
+        ids: new Uint16Array([0, 99, 0]),
+        transforms: new Float32Array([0, 0, 0, 1, 10, 10, 0, 1, 20, 20, 0, 1]),
+        alphas: new Float32Array([1, 1, 1]),
+        colors: new Float32Array([1, 1, 1, 1, 1, 1, 1, 1, 1]),
+      }),
+    );
+    expect(spy).toHaveBeenCalledTimes(2);
+  });
+});

package/src/canvasQuadBatch.test.ts

@@ -0,0 +1,119 @@
+import { createImageResource } from '@flighthq/image';
+import { getOrCreateRenderProxy2D, prepareDisplayObjectRender, registerRenderer } from '@flighthq/render';
+import { createQuadBatch, reserveQuadBatch } from '@flighthq/sprite';
+import { addTextureAtlasRegion, createTextureAtlas } from '@flighthq/textureatlas';
+import { QuadBatchKind } from '@flighthq/types';
+
+import { defaultCanvasQuadBatchRenderer, drawCanvasQuadBatch } from './canvasQuadBatch';
+import { createCanvasRenderState } from './canvasRenderState';
+
+function makeAtlas(regionCount = 1) {
+  const img = document.createElement('img') as HTMLImageElement;
+  const source = createImageResource(img);
+  source.width = 128;
+  source.height = 128;
+  const atlas = createTextureAtlas({ image: source });
+  for (let i = 0; i < regionCount; i++) {
+    addTextureAtlasRegion(atlas, i * 32, 0, 32, 32);
+  }
+  return atlas;
+}
+
+function makeState() {
+  const canvas = document.createElement('canvas');
+  canvas.width = 400;
+  canvas.height = 400;
+  const state = createCanvasRenderState(canvas);
+  registerRenderer(state, QuadBatchKind, defaultCanvasQuadBatchRenderer);
+  return state;
+}
+
+describe('defaultCanvasQuadBatchRenderer', () => {
+  it('has submit and createData', () => {
+    expect(typeof defaultCanvasQuadBatchRenderer.submit).toBe('function');
+    expect(typeof defaultCanvasQuadBatchRenderer.createData).toBe('function');
+  });
+});
+
+describe('drawCanvasQuadBatch', () => {
+  it('skips draw when atlas is null', () => {
+    const state = makeState();
+    const qb = createQuadBatch();
+    reserveQuadBatch(qb, 1);
+    qb.data.instanceCount = 1;
+    qb.data.atlas = null;
+
+    prepareDisplayObjectRender(state, qb);
+    const renderProxy = getOrCreateRenderProxy2D(state, qb);
+    const spy = vi.spyOn(state.context, 'drawImage');
+
+    drawCanvasQuadBatch(state, renderProxy);
+
+    expect(spy).not.toHaveBeenCalled();
+  });
+
+  it('draws each instance with correct region', () => {
+    const state = makeState();
+    const atlas = makeAtlas(2);
+    const qb = createQuadBatch();
+    qb.data.atlas = atlas;
+    reserveQuadBatch(qb, 2);
+    qb.data.instanceCount = 2;
+    qb.data.ids[0] = 0;
+    qb.data.ids[1] = 1;
+    qb.data.transforms[0] = 10;
+    qb.data.transforms[1] = 20;
+    qb.data.transforms[2] = 30;
+    qb.data.transforms[3] = 40;
+
+    prepareDisplayObjectRender(state, qb);
+    const renderProxy = getOrCreateRenderProxy2D(state, qb);
+    const spy = vi.spyOn(state.context, 'drawImage');
+
+    drawCanvasQuadBatch(state, renderProxy);
+
+    expect(spy).toHaveBeenCalledTimes(2);
+  });
+
+  it('skips instances with out-of-range id', () => {
+    const state = makeState();
+    const atlas = makeAtlas(1);
+    const qb = createQuadBatch();
+    qb.data.atlas = atlas;
+    reserveQuadBatch(qb, 1);
+    qb.data.instanceCount = 1;
+    qb.data.ids[0] = 99; // out of range
+
+    prepareDisplayObjectRender(state, qb);
+    const renderProxy = getOrCreateRenderProxy2D(state, qb);
+    const spy = vi.spyOn(state.context, 'drawImage');
+
+    drawCanvasQuadBatch(state, renderProxy);
+
+    expect(spy).not.toHaveBeenCalled();
+  });
+
+  it('skips instances with zero-size region', () => {
+    const state = makeState();
+    const img = document.createElement('img') as HTMLImageElement;
+    const source = createImageResource(img);
+    source.width = 128;
+    source.height = 128;
+    const atlas = createTextureAtlas({ image: source });
+    addTextureAtlasRegion(atlas, 0, 0, 0, 0); // zero size
+
+    const qb = createQuadBatch();
+    qb.data.atlas = atlas;
+    reserveQuadBatch(qb, 1);
+    qb.data.instanceCount = 1;
+    qb.data.ids[0] = 0;
+
+    prepareDisplayObjectRender(state, qb);
+    const renderProxy = getOrCreateRenderProxy2D(state, qb);
+    const spy = vi.spyOn(state.context, 'drawImage');
+
+    drawCanvasQuadBatch(state, renderProxy);
+
+    expect(spy).not.toHaveBeenCalled();
+  });
+});

package/src/canvasRegistration.test.ts

@@ -0,0 +1,57 @@
+import {
+  BitmapKind,
+  DisplayObjectKind,
+  ParticleEmitterKind,
+  QuadBatchKind,
+  RichTextKind,
+  Scale9ShapeKind,
+  ShapeKind,
+  SpriteKind,
+  TextLabelKind,
+  TilemapKind,
+  VideoKind,
+} from '@flighthq/types';
+
+import { canvasDisplayObjectRendererEntries, registerCanvasDisplayObjectRenderers } from './canvasRegistration';
+import { createCanvasRenderState, getCanvasRenderStateRuntime } from './canvasRenderState';
+
+describe('canvasDisplayObjectRendererEntries', () => {
+  it('contains all expected display-object kinds', () => {
+    const kinds = canvasDisplayObjectRendererEntries.map(([kind]) => kind);
+    expect(kinds).toContain(BitmapKind);
+    expect(kinds).toContain(DisplayObjectKind);
+    expect(kinds).toContain(ParticleEmitterKind);
+    expect(kinds).toContain(QuadBatchKind);
+    expect(kinds).toContain(RichTextKind);
+    expect(kinds).toContain(Scale9ShapeKind);
+    expect(kinds).toContain(ShapeKind);
+    expect(kinds).toContain(SpriteKind);
+    expect(kinds).toContain(TextLabelKind);
+    expect(kinds).toContain(TilemapKind);
+    expect(kinds).toContain(VideoKind);
+  });
+
+  it('has a renderer for every entry', () => {
+    for (const [, renderer] of canvasDisplayObjectRendererEntries) {
+      expect(typeof renderer.submit).toBe('function');
+    }
+  });
+});
+
+describe('registerCanvasDisplayObjectRenderers', () => {
+  it('registers all default renderers into the state', () => {
+    const state = createCanvasRenderState(document.createElement('canvas'));
+    registerCanvasDisplayObjectRenderers(state);
+    const rendererMap = getCanvasRenderStateRuntime(state).rendererMap;
+    for (const [kind, renderer] of canvasDisplayObjectRendererEntries) {
+      expect(rendererMap.get(kind)).toBe(renderer);
+    }
+  });
+
+  it('registers exactly the same number of kinds as the entries array', () => {
+    const state = createCanvasRenderState(document.createElement('canvas'));
+    registerCanvasDisplayObjectRenderers(state);
+    const rendererMap = getCanvasRenderStateRuntime(state).rendererMap;
+    expect(rendererMap.size).toBe(canvasDisplayObjectRendererEntries.length);
+  });
+});

package/src/canvasRenderState.test.ts

@@ -0,0 +1,186 @@
+import { createMatrix } from '@flighthq/geometry';
+import type { CanvasRenderOptions } from '@flighthq/types';
+import { EntityRuntimeKey } from '@flighthq/types';
+
+import {
+  createCanvasRenderState,
+  createCanvasRenderStateRuntime,
+  getCanvasRenderStateRuntime,
+} from './canvasRenderState';
+
+describe('createCanvasRenderState', () => {
+  it('creates state with a valid context and canvas', () => {
+    const c = document.createElement('canvas');
+    const state = createCanvasRenderState(c);
+    expect(state).not.toBeNull();
+    expect(state.canvas).toBe(c);
+  });
+
+  it('attaches a runtime under EntityRuntimeKey', () => {
+    const state = createCanvasRenderState(document.createElement('canvas'));
+    expect(state[EntityRuntimeKey]).not.toBeUndefined();
+    expect(getCanvasRenderStateRuntime(state)).toBe(state[EntityRuntimeKey]);
+  });
+});
+
+describe('createCanvasRenderStateRuntime', () => {
+  it('allocates an entity runtime', () => {
+    const runtime = createCanvasRenderStateRuntime();
+    expect(runtime).not.toBeNull();
+    expect(runtime.binding).toBeNull();
+  });
+});
+
+describe('getCanvasRenderStateRuntime', () => {
+  it('returns the mutable runtime attached to the state', () => {
+    const state = createCanvasRenderState(document.createElement('canvas'));
+    const runtime = getCanvasRenderStateRuntime(state);
+    runtime.currentBlendMode = null;
+    expect(getCanvasRenderStateRuntime(state).currentBlendMode).toBeNull();
+  });
+});
+
+let canvas: HTMLCanvasElement;
+
+beforeEach(() => {
+  // Mock canvas and context for testing
+  canvas = document.createElement('canvas');
+  const mockContext = {
+    getContextAttributes: vi.fn().mockReturnValue({
+      alpha: true,
+      desynchronized: false,
+    }),
+    imageSmoothingEnabled: true,
+    imageSmoothingQuality: 'high',
+  } as unknown as CanvasRenderingContext2D;
+  canvas.getContext = vi.fn().mockReturnValue(mockContext);
+});
+
+it('should be instantiated with default options', () => {
+  const renderer = createCanvasRenderState(canvas);
+
+  expect(renderer).not.toBeNull();
+  expect(renderer.canvas).toBe(canvas);
+  expect(renderer.context.imageSmoothingEnabled).toBe(true);
+  expect(renderer.context.imageSmoothingQuality).toBe('high');
+  expect(renderer.contextAttributes).toEqual({
+    alpha: true,
+    desynchronized: false,
+  });
+  expect(renderer.backgroundColor).toBe(0);
+  expect(renderer.pixelRatio).toBe(1);
+  expect(renderer.roundPixels).toBe(false);
+  expect(renderer.renderTransform2D).not.toBeNull();
+});
+
+it('should use provided options', () => {
+  const options: CanvasRenderOptions = {
+    backgroundColor: 0xffffff,
+    pixelRatio: 2,
+    roundPixels: true,
+    renderTransform: createMatrix(),
+    imageSmoothingEnabled: false,
+    imageSmoothingQuality: 'low',
+  };
+
+  const renderer = createCanvasRenderState(canvas, options);
+
+  expect(renderer.backgroundColor).toBe(0xffffff);
+  expect(renderer.pixelRatio).toBe(2);
+  expect(renderer.roundPixels).toBe(true);
+  expect(renderer.renderTransform2D).not.toBeNull();
+  expect(renderer.context.imageSmoothingEnabled).toBe(false);
+  expect(renderer.context.imageSmoothingQuality).toBe('low');
+});
+
+it('should throw an error if context is not available', () => {
+  canvas.getContext = vi.fn().mockReturnValue(null); // Simulate failure to get context
+
+  expect(() => createCanvasRenderState(canvas)).toThrowError('Failed to get context for canvas.');
+});
+
+it('should default imageSmoothingEnabled to true', () => {
+  const renderer = createCanvasRenderState(canvas);
+
+  expect(renderer.context.imageSmoothingEnabled).toBe(true);
+});
+
+it('should default imageSmoothingQuality to "high"', () => {
+  const renderer = createCanvasRenderState(canvas);
+
+  expect(renderer.context.imageSmoothingQuality).toBe('high');
+});
+
+it('should correctly handle backgroundColor option', () => {
+  const options: CanvasRenderOptions = {
+    backgroundColor: 0xff0000, // Red
+  };
+
+  const renderer = createCanvasRenderState(canvas, options);
+  expect(renderer.backgroundColor).toBe(0xff0000);
+});
+
+it('should use default pixelRatio if not provided', () => {
+  const renderer = createCanvasRenderState(canvas);
+  expect(renderer.pixelRatio).toBe(1);
+});
+
+it('should handle custom pixelRatio correctly', () => {
+  const options: CanvasRenderOptions = {
+    pixelRatio: 2,
+  };
+
+  const renderer = createCanvasRenderState(canvas, options);
+  expect(renderer.pixelRatio).toBe(2);
+});
+
+it('should default roundPixels to false', () => {
+  const renderer = createCanvasRenderState(canvas);
+  expect(renderer.roundPixels).toBe(false);
+});
+
+it('should correctly handle roundPixels option', () => {
+  const options: CanvasRenderOptions = {
+    roundPixels: true,
+  };
+
+  const renderer = createCanvasRenderState(canvas, options);
+  expect(renderer.roundPixels).toBe(true);
+});
+
+it('should handle worldTransform option correctly', () => {
+  const customTransform = createMatrix();
+  const options: CanvasRenderOptions = {
+    renderTransform: customTransform,
+  };
+
+  const renderer = createCanvasRenderState(canvas, options);
+  expect(renderer.renderTransform2D).toBe(customTransform);
+});
+
+it('should fall back to default Matrix if worldTransform is not provided', () => {
+  const renderer = createCanvasRenderState(canvas);
+  expect(renderer.renderTransform2D).not.toBeNull();
+});
+
+// Check if contextAttributes are passed and correctly retrieved
+it('should retrieve contextAttributes from the context', () => {
+  const renderer = createCanvasRenderState(canvas);
+
+  expect(renderer.contextAttributes).toEqual({
+    alpha: true,
+    desynchronized: false,
+  });
+});
+
+// Ensure options with missing properties are handled gracefully
+it('should handle missing imageSmoothingQuality and imageSmoothingEnabled in options', () => {
+  const options: CanvasRenderOptions = {
+    imageSmoothingEnabled: undefined,
+    imageSmoothingQuality: undefined,
+  };
+
+  const renderer = createCanvasRenderState(canvas, options);
+  expect(renderer.context.imageSmoothingEnabled).toBe(true);
+  expect(renderer.context.imageSmoothingQuality).toBe('high');
+});