@flighthq/displayobject-canvas 0.1.0

package/src/canvasRenderTarget.test.ts

@@ -0,0 +1,154 @@
+import { createMatrix } from '@flighthq/geometry';
+
+import { createCanvasRenderState } from './canvasRenderState';
+import {
+  beginCanvasRenderTarget,
+  createCanvasRenderTarget,
+  destroyCanvasRenderTarget,
+  endCanvasRenderTarget,
+  resizeCanvasRenderTarget,
+} from './canvasRenderTarget';
+
+function makeState() {
+  return createCanvasRenderState(document.createElement('canvas'));
+}
+
+describe('beginCanvasRenderTarget', () => {
+  it('switches the state canvas to the target canvas', () => {
+    const state = makeState();
+    const target = createCanvasRenderTarget(64, 48);
+    const renderTransform = createMatrix();
+
+    beginCanvasRenderTarget(state, target, renderTransform);
+
+    expect(state.canvas).toBe(target.canvas);
+  });
+
+  it('sets renderTransform2D to the provided transform', () => {
+    const state = makeState();
+    const target = createCanvasRenderTarget(64, 48);
+    const renderTransform = createMatrix();
+    renderTransform.tx = 10;
+    renderTransform.ty = 20;
+
+    beginCanvasRenderTarget(state, target, renderTransform);
+
+    expect(state.renderTransform2D!.tx).toBe(10);
+    expect(state.renderTransform2D!.ty).toBe(20);
+  });
+
+  it('supports nested pairs', () => {
+    const state = makeState();
+    const outerCanvas = state.canvas;
+    const targetA = createCanvasRenderTarget(64, 48);
+    const targetB = createCanvasRenderTarget(32, 32);
+
+    beginCanvasRenderTarget(state, targetA, createMatrix());
+    expect(state.canvas).toBe(targetA.canvas);
+
+    beginCanvasRenderTarget(state, targetB, createMatrix());
+    expect(state.canvas).toBe(targetB.canvas);
+
+    endCanvasRenderTarget(state);
+    expect(state.canvas).toBe(targetA.canvas);
+
+    endCanvasRenderTarget(state);
+    expect(state.canvas).toBe(outerCanvas);
+  });
+});
+
+describe('createCanvasRenderTarget', () => {
+  it('creates a canvas with the requested dimensions', () => {
+    const target = createCanvasRenderTarget(128, 64);
+    expect(target.canvas.width).toBe(128);
+    expect(target.canvas.height).toBe(64);
+    expect(target.width).toBe(128);
+    expect(target.height).toBe(64);
+  });
+
+  it('enforces a minimum size of 1', () => {
+    const target = createCanvasRenderTarget(0, 0);
+    expect(target.canvas.width).toBe(1);
+    expect(target.canvas.height).toBe(1);
+  });
+
+  it('ceils fractional dimensions', () => {
+    const target = createCanvasRenderTarget(10.3, 20.9);
+    expect(target.canvas.width).toBe(11);
+    expect(target.canvas.height).toBe(21);
+  });
+});
+
+describe('destroyCanvasRenderTarget', () => {
+  it('collapses the canvas to zero size', () => {
+    const target = createCanvasRenderTarget(64, 32);
+    destroyCanvasRenderTarget(target);
+    expect(target.canvas.width).toBe(0);
+    expect(target.canvas.height).toBe(0);
+  });
+
+  it('sets target width and height to zero', () => {
+    const target = createCanvasRenderTarget(128, 64);
+    destroyCanvasRenderTarget(target);
+    expect(target.width).toBe(0);
+    expect(target.height).toBe(0);
+  });
+});
+
+describe('endCanvasRenderTarget', () => {
+  it('restores the original canvas', () => {
+    const state = makeState();
+    const originalCanvas = state.canvas;
+    const target = createCanvasRenderTarget(64, 48);
+
+    beginCanvasRenderTarget(state, target, createMatrix());
+    endCanvasRenderTarget(state);
+
+    expect(state.canvas).toBe(originalCanvas);
+  });
+
+  it('restores the original renderTransform2D', () => {
+    const state = makeState();
+    const originalTx = state.renderTransform2D?.tx ?? 0;
+    const target = createCanvasRenderTarget(64, 48);
+    const renderTransform = createMatrix();
+    renderTransform.tx = 99;
+
+    beginCanvasRenderTarget(state, target, renderTransform);
+    endCanvasRenderTarget(state);
+
+    expect(state.renderTransform2D?.tx).toBe(originalTx);
+  });
+
+  it('does not mutate the outer renderTransform2D matrix', () => {
+    const state = makeState();
+    const outerTransform = state.renderTransform2D!;
+    const target = createCanvasRenderTarget(64, 48);
+    const renderTransform = createMatrix();
+    renderTransform.tx = 50;
+
+    beginCanvasRenderTarget(state, target, renderTransform);
+    endCanvasRenderTarget(state);
+
+    expect(state.renderTransform2D).toBe(outerTransform);
+    expect(outerTransform.tx).not.toBe(50);
+  });
+
+  it('without a matching begin is a no-op', () => {
+    const state = makeState();
+    const original = state.canvas;
+    expect(() => endCanvasRenderTarget(state)).not.toThrow();
+    expect(state.canvas).toBe(original);
+  });
+});
+
+describe('resizeCanvasRenderTarget', () => {
+  it('updates the canvas and target dimensions', () => {
+    const target = createCanvasRenderTarget(64, 64);
+    resizeCanvasRenderTarget(target, 256, 128);
+    expect(target.canvas.width).toBe(256);
+    expect(target.canvas.height).toBe(128);
+    expect(target.width).toBe(256);
+    expect(target.height).toBe(128);
+  });
+});

package/src/canvasRichText.test.ts

@@ -0,0 +1,89 @@
+import { getOrCreateRenderProxy2D } from '@flighthq/render';
+import { createRichText } from '@flighthq/text';
+import { enableTextInput } from '@flighthq/textinput';
+
+import { createCanvasRenderState } from './canvasRenderState';
+import {
+  defaultCanvasRichTextRenderer,
+  drawCanvasRichText,
+  drawCanvasRichTextMask,
+  registerCanvasTextInputOverlay,
+} from './canvasRichText';
+
+function makeState() {
+  const canvas = document.createElement('canvas');
+  canvas.width = 200;
+  canvas.height = 200;
+  return createCanvasRenderState(canvas);
+}
+
+describe('defaultCanvasRichTextRenderer', () => {
+  it('has noopRendererData as createData', () => {
+    expect(typeof defaultCanvasRichTextRenderer.createData).toBe('function');
+  });
+
+  it('has drawCanvasRichText as submit', () => {
+    expect(defaultCanvasRichTextRenderer.submit).toBe(drawCanvasRichText);
+  });
+});
+
+describe('drawCanvasRichText', () => {
+  it('does not throw when text is empty', () => {
+    const state = makeState();
+    const node = createRichText();
+    node.data.text = '';
+    const renderProxy = getOrCreateRenderProxy2D(state, node);
+    expect(() => drawCanvasRichText(state, renderProxy)).not.toThrow();
+  });
+
+  it('calls fillText when the text field is non-empty', () => {
+    const state = makeState();
+    const node = createRichText();
+    node.data.text = 'hello';
+    const renderProxy = getOrCreateRenderProxy2D(state, node);
+    const spy = vi.spyOn(state.context, 'fillText');
+    drawCanvasRichText(state, renderProxy);
+    expect(spy).toHaveBeenCalled();
+  });
+
+  it('renders resolved htmlText spans', () => {
+    const state = makeState();
+    const node = createRichText();
+    node.data.htmlText = '<font color="#ff0000">red</font><b>bold</b>';
+    const renderProxy = getOrCreateRenderProxy2D(state, node);
+    const spy = vi.spyOn(state.context, 'fillText');
+
+    drawCanvasRichText(state, renderProxy);
+
+    expect(spy).toHaveBeenCalledWith('red', expect.any(Number), expect.any(Number));
+    expect(spy).toHaveBeenCalledWith('bold', expect.any(Number), expect.any(Number));
+  });
+});
+
+describe('drawCanvasRichTextMask', () => {
+  // The mask path is a no-op stub on the Canvas backend — masking is handled uniformly
+  // through pushCanvasClipContours (the clip hooks), not through per-kind draw-mask functions.
+  it('does not throw', () => {
+    const state = makeState();
+    const node = createRichText({ data: { text: 'hello' } });
+    const renderProxy = getOrCreateRenderProxy2D(state, node);
+    expect(() => drawCanvasRichTextMask(state, renderProxy)).not.toThrow();
+  });
+});
+
+describe('registerCanvasTextInputOverlay', () => {
+  it('invokes the registered overlay only for a RichText with an input slot', () => {
+    const overlay = vi.fn();
+    registerCanvasTextInputOverlay(overlay);
+    const state = makeState();
+
+    const plain = createRichText({ data: { text: 'x' } });
+    drawCanvasRichText(state, getOrCreateRenderProxy2D(state, plain));
+    expect(overlay).not.toHaveBeenCalled();
+
+    const editable = createRichText({ data: { text: 'x' } });
+    enableTextInput(editable);
+    drawCanvasRichText(state, getOrCreateRenderProxy2D(state, editable));
+    expect(overlay).toHaveBeenCalled();
+  });
+});

package/src/canvasScale9Mapper.test.ts

@@ -0,0 +1,53 @@
+import { appendShapeRectangle, createShape } from '@flighthq/shape';
+
+import { buildScale9Mapper } from './canvasScale9Mapper';
+
+function makeGrid(x: number, y: number, width: number, height: number) {
+  return { x, y, width, height } as never;
+}
+
+describe('buildScale9Mapper', () => {
+  it('returns null when scaleX is zero', () => {
+    const shape = createShape();
+    appendShapeRectangle(shape, 0, 0, 100, 100);
+    expect(buildScale9Mapper(shape.data.commands, makeGrid(10, 10, 80, 80), 0, 1)).toBeNull();
+  });
+
+  it('returns null when scaleY is negative', () => {
+    const shape = createShape();
+    appendShapeRectangle(shape, 0, 0, 100, 100);
+    expect(buildScale9Mapper(shape.data.commands, makeGrid(10, 10, 80, 80), 1, -1)).toBeNull();
+  });
+
+  it('returns null when commands have no drawable points', () => {
+    const shape = createShape();
+    expect(buildScale9Mapper(shape.data.commands, makeGrid(10, 10, 80, 80), 2, 2)).toBeNull();
+  });
+
+  it('maps corner coordinates unchanged (start region)', () => {
+    const shape = createShape();
+    appendShapeRectangle(shape, 0, 0, 100, 100);
+    const mapper = buildScale9Mapper(shape.data.commands, makeGrid(10, 10, 80, 80), 2, 2)!;
+    expect(mapper).not.toBeNull();
+    // x=5 is in the start (corner) region — should not move
+    expect(mapper.mapX(5)).toBeCloseTo(5);
+    expect(mapper.mapY(5)).toBeCloseTo(5);
+  });
+
+  it('maps end-region coordinates by adding scaled center size', () => {
+    const shape = createShape();
+    appendShapeRectangle(shape, 0, 0, 100, 100);
+    const mapper = buildScale9Mapper(shape.data.commands, makeGrid(10, 10, 80, 80), 2, 2)!;
+    // With scaleX=2, boundsWidth=100: size=200, corner=10, end=10, center=180
+    // pos=95 is in end region (>= 10+80=90): should be 10 + 180 + (95-90) = 195
+    expect(mapper.mapX(95)).toBeCloseTo(195);
+  });
+
+  it('stretches center-region coordinates proportionally', () => {
+    const shape = createShape();
+    appendShapeRectangle(shape, 0, 0, 100, 100);
+    const mapper = buildScale9Mapper(shape.data.commands, makeGrid(10, 10, 80, 80), 2, 2)!;
+    // pos=50 is center (between 10 and 90): 10 + 180*(50-10)/80 = 10 + 90 = 100
+    expect(mapper.mapX(50)).toBeCloseTo(100);
+  });
+});

package/src/canvasScale9Shape.test.ts

@@ -0,0 +1,89 @@
+import { registerRenderer } from '@flighthq/render';
+import { getOrCreateRenderProxy2D } from '@flighthq/render';
+import { appendShapeBeginFill, appendShapeRectangle, createScale9Shape } from '@flighthq/shape';
+import { Scale9ShapeKind } from '@flighthq/types';
+
+import { createCanvasRenderState } from './canvasRenderState';
+import { buildScale9Mapper } from './canvasScale9Mapper';
+import {
+  defaultCanvasScale9ShapeRenderer,
+  drawCanvasScale9Shape,
+  mapCanvasScale9ShapeCommands,
+} from './canvasScale9Shape';
+import { defaultCanvasShapeCommands } from './canvasShapeCommands';
+import { registerCanvasShapeCommands } from './canvasShapeRegistry';
+
+beforeAll(() => {
+  registerCanvasShapeCommands(defaultCanvasShapeCommands);
+});
+
+const grid = { x: 10, y: 10, width: 80, height: 80 };
+
+describe('drawCanvasScale9Shape', () => {
+  it('does not throw when commands list is empty', () => {
+    const canvas = document.createElement('canvas');
+    canvas.width = 200;
+    canvas.height = 200;
+    const state = createCanvasRenderState(canvas);
+    registerRenderer(state, Scale9ShapeKind, defaultCanvasScale9ShapeRenderer);
+    const shape = createScale9Shape(grid);
+    const data = getOrCreateRenderProxy2D(state, shape);
+    expect(() => drawCanvasScale9Shape(state, data)).not.toThrow();
+  });
+});
+
+describe('mapCanvasScale9ShapeCommands', () => {
+  const out: unknown[] = [];
+
+  it('passes style commands through unchanged', () => {
+    const mapper = { mapX: (x: number) => x, mapY: (y: number) => y };
+    mapCanvasScale9ShapeCommands(out, ['beginFill', 2, 0xff0000, 1], mapper);
+    expect(out).toEqual(['beginFill', 2, 0xff0000, 1]);
+  });
+
+  it('remaps moveTo coordinates', () => {
+    const mapper = { mapX: (x: number) => x * 2, mapY: (y: number) => y * 3 };
+    mapCanvasScale9ShapeCommands(out, ['moveTo', 2, 10, 20], mapper);
+    expect(out).toEqual(['moveTo', 2, 20, 60]);
+  });
+
+  it('remaps lineTo coordinates', () => {
+    const mapper = { mapX: (x: number) => x + 5, mapY: (y: number) => y + 10 };
+    mapCanvasScale9ShapeCommands(out, ['lineTo', 2, 100, 50], mapper);
+    expect(out).toEqual(['lineTo', 2, 105, 60]);
+  });
+
+  it('remaps drawRectangle corners and recomputes size', () => {
+    const mapper = { mapX: (x: number) => x * 2, mapY: (y: number) => y * 2 };
+    mapCanvasScale9ShapeCommands(out, ['drawRectangle', 4, 10, 20, 50, 30], mapper);
+    // x=10→20, y=20→40, x+w=60→120 (w=100), y+h=50→100 (h=60)
+    expect(out).toEqual(['drawRectangle', 4, 20, 40, 100, 60]);
+  });
+
+  it('remaps drawRoundRectangle corners but leaves ellipse radii unchanged', () => {
+    const mapper = { mapX: (x: number) => x * 2, mapY: (y: number) => y * 2 };
+    mapCanvasScale9ShapeCommands(out, ['drawRoundRectangle', 6, 10, 20, 50, 30, 8, 8], mapper);
+    expect(out).toEqual(['drawRoundRectangle', 6, 20, 40, 100, 60, 8, 8]);
+  });
+
+  it('remaps drawCircle center but leaves radius unchanged', () => {
+    const mapper = { mapX: (x: number) => x + 5, mapY: (y: number) => y + 10 };
+    mapCanvasScale9ShapeCommands(out, ['drawCircle', 3, 50, 50, 25], mapper);
+    expect(out).toEqual(['drawCircle', 3, 55, 60, 25]);
+  });
+
+  it('remaps drawEllipse corners and recomputes size', () => {
+    const mapper = { mapX: (x: number) => x * 2, mapY: (y: number) => y * 2 };
+    mapCanvasScale9ShapeCommands(out, ['drawEllipse', 4, 0, 0, 100, 50], mapper);
+    expect(out).toEqual(['drawEllipse', 4, 0, 0, 200, 100]);
+  });
+
+  it('returns a buffer with the same element count as the input', () => {
+    const shape = createScale9Shape(grid);
+    appendShapeBeginFill(shape, 0xff0000);
+    appendShapeRectangle(shape, 0, 0, 100, 100);
+    const mapper = buildScale9Mapper(shape.data.commands, grid, 2, 2)!;
+    mapCanvasScale9ShapeCommands(out, shape.data.commands, mapper);
+    expect(out).toHaveLength(shape.data.commands.length);
+  });
+});

package/src/canvasShape.test.ts

@@ -0,0 +1,183 @@
+import { createMatrix } from '@flighthq/geometry';
+import { registerRenderer } from '@flighthq/render';
+import { getOrCreateRenderProxy2D } from '@flighthq/render';
+import {
+  appendShapeBeginBitmapFill,
+  appendShapeBeginFill,
+  appendShapeEndFill,
+  appendShapeLineStyle,
+  appendShapeLineTo,
+  appendShapeMoveTo,
+  appendShapeRectangle,
+  createShape,
+} from '@flighthq/shape';
+import { ShapeKind } from '@flighthq/types';
+
+import { createCanvasRenderState } from './canvasRenderState';
+import { defaultCanvasShapeRenderer, drawCanvasShape, renderCanvasShapeCommands } from './canvasShape';
+import { defaultCanvasShapeCommands } from './canvasShapeCommands';
+import { registerCanvasShapeCommands } from './canvasShapeRegistry';
+
+beforeAll(() => {
+  registerCanvasShapeCommands(defaultCanvasShapeCommands);
+});
+
+function makeContext(): CanvasRenderingContext2D {
+  const canvas = document.createElement('canvas');
+  canvas.width = 200;
+  canvas.height = 200;
+  return canvas.getContext('2d') as CanvasRenderingContext2D;
+}
+
+describe('drawCanvasShape', () => {
+  it('does not throw for a shape with no commands', () => {
+    const canvas = document.createElement('canvas');
+    canvas.width = 200;
+    canvas.height = 200;
+    const state = createCanvasRenderState(canvas);
+    registerRenderer(state, ShapeKind, defaultCanvasShapeRenderer);
+    const shape = createShape();
+    const data = getOrCreateRenderProxy2D(state, shape);
+    expect(() => drawCanvasShape(state, data)).not.toThrow();
+  });
+
+  it('calls fill when shape has beginFill and drawRectangle commands', () => {
+    const canvas = document.createElement('canvas');
+    canvas.width = 200;
+    canvas.height = 200;
+    const state = createCanvasRenderState(canvas);
+    registerRenderer(state, ShapeKind, defaultCanvasShapeRenderer);
+    const shape = createShape();
+    appendShapeBeginFill(shape, 0xff0000);
+    appendShapeRectangle(shape, 0, 0, 50, 50);
+    appendShapeEndFill(shape);
+    const data = getOrCreateRenderProxy2D(state, shape);
+    const spy = vi.spyOn(state.context, 'fill');
+    drawCanvasShape(state, data);
+    expect(spy).toHaveBeenCalled();
+  });
+});
+
+describe('renderCanvasShapeCommands', () => {
+  it('does nothing when the command list is empty', () => {
+    const context = makeContext();
+    const spy = vi.spyOn(context, 'fill');
+    renderCanvasShapeCommands(context, createShape().data.commands);
+    expect(spy).not.toHaveBeenCalled();
+  });
+
+  it('calls fill after beginFill + drawRectangle + endFill', () => {
+    const context = makeContext();
+    const spy = vi.spyOn(context, 'fill');
+    const shape = createShape();
+    appendShapeBeginFill(shape, 0xff0000);
+    appendShapeRectangle(shape, 0, 0, 100, 50);
+    appendShapeEndFill(shape);
+    renderCanvasShapeCommands(context, shape.data.commands);
+    expect(spy).toHaveBeenCalledOnce();
+  });
+
+  it('calls stroke once when lineStyle is set', () => {
+    const context = makeContext();
+    const spy = vi.spyOn(context, 'stroke');
+    const shape = createShape();
+    appendShapeLineStyle(shape, 2, 0x000000);
+    appendShapeRectangle(shape, 0, 0, 100, 50);
+    appendShapeEndFill(shape);
+    renderCanvasShapeCommands(context, shape.data.commands);
+    expect(spy).toHaveBeenCalledOnce();
+  });
+
+  it('draws fill before stroke so strokes render on top', () => {
+    const context = makeContext();
+    const order: string[] = [];
+    vi.spyOn(context, 'fill').mockImplementation(() => {
+      order.push('fill');
+    });
+    vi.spyOn(context, 'stroke').mockImplementation(() => {
+      order.push('stroke');
+    });
+    const shape = createShape();
+    appendShapeLineStyle(shape, 2, 0x000000);
+    appendShapeBeginFill(shape, 0xff0000);
+    appendShapeRectangle(shape, 0, 0, 100, 50);
+    appendShapeEndFill(shape);
+    renderCanvasShapeCommands(context, shape.data.commands);
+    expect(order).toEqual(['fill', 'stroke']);
+  });
+
+  it('calls fill with evenodd winding rule by default', () => {
+    const context = makeContext();
+    const spy = vi.spyOn(context, 'fill');
+    const shape = createShape();
+    appendShapeBeginFill(shape, 0xff0000, 1);
+    appendShapeRectangle(shape, 0, 0, 10, 10);
+    appendShapeEndFill(shape);
+    renderCanvasShapeCommands(context, shape.data.commands);
+    expect(spy).toHaveBeenCalledWith('evenodd');
+  });
+
+  it('does not throw on a zero-size rectangle', () => {
+    const context = makeContext();
+    const shape = createShape();
+    appendShapeBeginFill(shape, 0xff0000, 1);
+    appendShapeRectangle(shape, 10, 10, 0, 0);
+    appendShapeEndFill(shape);
+    expect(() => renderCanvasShapeCommands(context, shape.data.commands)).not.toThrow();
+  });
+
+  it('does not throw on NaN coordinates', () => {
+    const context = makeContext();
+    const shape = createShape();
+    appendShapeBeginFill(shape, 0xff0000, 1);
+    appendShapeMoveTo(shape, Number.NaN, Number.NaN);
+    appendShapeLineTo(shape, Number.NaN, 10);
+    appendShapeRectangle(shape, Number.NaN, 0, Number.NaN, 10);
+    appendShapeEndFill(shape);
+    expect(() => renderCanvasShapeCommands(context, shape.data.commands)).not.toThrow();
+  });
+
+  it('does not throw on Infinity coordinates', () => {
+    const context = makeContext();
+    const shape = createShape();
+    appendShapeBeginFill(shape, 0xff0000, 1);
+    appendShapeMoveTo(shape, Number.POSITIVE_INFINITY, Number.NEGATIVE_INFINITY);
+    appendShapeLineTo(shape, Number.POSITIVE_INFINITY, 0);
+    appendShapeEndFill(shape);
+    expect(() => renderCanvasShapeCommands(context, shape.data.commands)).not.toThrow();
+  });
+
+  it('does not throw on very large coordinates', () => {
+    const context = makeContext();
+    const shape = createShape();
+    appendShapeBeginFill(shape, 0xff0000, 1);
+    appendShapeRectangle(shape, -1e20, -1e20, 2e20, 2e20);
+    appendShapeEndFill(shape);
+    expect(() => renderCanvasShapeCommands(context, shape.data.commands)).not.toThrow();
+  });
+
+  it('does not throw on a singular bitmap-fill matrix', () => {
+    const context = makeContext();
+    const bitmapSource = document.createElement('canvas');
+    bitmapSource.width = 50;
+    bitmapSource.height = 50;
+    const bitmap = { source: bitmapSource, width: 50, height: 50 } as never;
+    const singular = createMatrix(0, 0, 0, 0, 0, 0);
+    const shape = createShape();
+    appendShapeBeginBitmapFill(shape, bitmap, singular);
+    appendShapeRectangle(shape, 0, 0, 100, 100);
+    appendShapeEndFill(shape);
+    expect(() => renderCanvasShapeCommands(context, shape.data.commands)).not.toThrow();
+  });
+
+  it('skips an unknown command key without throwing', () => {
+    const context = makeContext();
+    const fillSpy = vi.spyOn(context, 'fill');
+    // Raw buffer: [key, argCount, ...args]. The unknown key has no registered
+    // handler, so getCanvasShapeCommand returns the undefined sentinel and the
+    // walk advances past it rather than throwing.
+    const commands: unknown[] = ['acme.unknownCommand', 2, 1, 2];
+    expect(() => renderCanvasShapeCommands(context, commands)).not.toThrow();
+    expect(fillSpy).not.toHaveBeenCalled();
+  });
+});