@flighthq/displayobject-dom 0.1.0

package/src/domShape.test.ts

@@ -0,0 +1,85 @@
+import { defaultCanvasShapeCommands, registerCanvasShapeCommands } from '@flighthq/displayobject-canvas';
+import { registerRenderer } from '@flighthq/render';
+import { getOrCreateRenderProxy2D } from '@flighthq/render';
+import { appendShapeBeginFill, appendShapeEndFill, appendShapeRectangle, createShape } from '@flighthq/shape';
+import { ShapeKind } from '@flighthq/types';
+
+import { createDomRenderState, getDomRenderStateRuntime } from './domRenderState';
+import { defaultDomShapeRenderer, drawDomShape } from './domShape';
+
+beforeAll(() => {
+  registerCanvasShapeCommands(defaultCanvasShapeCommands);
+});
+
+function makeState() {
+  const container = document.createElement('div');
+  const state = createDomRenderState(container);
+  registerRenderer(state, ShapeKind, defaultDomShapeRenderer);
+  return state;
+}
+
+function drawGetEl(state: ReturnType<typeof makeState>, drawFn: () => void): HTMLElement | null {
+  getDomRenderStateRuntime(state).domCurrentElement = null;
+  drawFn();
+  return getDomRenderStateRuntime(state).domCurrentElement;
+}
+
+describe('defaultDomShapeRenderer', () => {
+  it('has submit, and createData', () => {
+    expect(typeof defaultDomShapeRenderer.submit).toBe('function');
+    expect(typeof defaultDomShapeRenderer.createData).toBe('function');
+  });
+});
+
+describe('drawDomShape', () => {
+  it('does not produce an element when commands array is empty', () => {
+    const state = makeState();
+    const shape = createShape();
+    const renderProxy = getOrCreateRenderProxy2D(state, shape);
+
+    const el = drawGetEl(state, () => drawDomShape(state, renderProxy));
+
+    expect(el).toBeNull();
+  });
+
+  it('produces a canvas element when the shape has draw commands', () => {
+    const state = makeState();
+    const shape = createShape();
+    appendShapeBeginFill(shape, 0xff0000);
+    appendShapeRectangle(shape, 0, 0, 50, 50);
+    appendShapeEndFill(shape);
+    const renderProxy = getOrCreateRenderProxy2D(state, shape);
+
+    const el = drawGetEl(state, () => drawDomShape(state, renderProxy));
+
+    expect(el).not.toBeNull();
+    expect(el!.tagName).toBe('CANVAS');
+  });
+
+  it('sets canvas size to at least 1x1 for zero-size shapes', () => {
+    const state = makeState();
+    const shape = createShape();
+    appendShapeBeginFill(shape, 0xff0000);
+    appendShapeRectangle(shape, 0, 0, 0, 0);
+    appendShapeEndFill(shape);
+    const renderProxy = getOrCreateRenderProxy2D(state, shape);
+
+    const canvas = drawGetEl(state, () => drawDomShape(state, renderProxy)) as HTMLCanvasElement;
+    expect(canvas.width).toBeGreaterThanOrEqual(1);
+    expect(canvas.height).toBeGreaterThanOrEqual(1);
+  });
+
+  it('reuses the same canvas element across multiple draws', () => {
+    const state = makeState();
+    const shape = createShape();
+    appendShapeBeginFill(shape, 0xff0000);
+    appendShapeRectangle(shape, 0, 0, 40, 40);
+    appendShapeEndFill(shape);
+    const renderProxy = getOrCreateRenderProxy2D(state, shape);
+
+    const firstCanvas = drawGetEl(state, () => drawDomShape(state, renderProxy));
+    const secondCanvas = drawGetEl(state, () => drawDomShape(state, renderProxy));
+
+    expect(firstCanvas).toBe(secondCanvas);
+  });
+});

package/src/domStyle.test.ts

@@ -0,0 +1,130 @@
+import { createDisplayObject } from '@flighthq/displayobject';
+import { setMatrix } from '@flighthq/geometry';
+import { getOrCreateRenderProxy2D } from '@flighthq/render';
+import { BlendMode } from '@flighthq/types';
+
+import { enableDomCssFilterSupport, setDomCssFilter } from './domCSSFilterBinding';
+import { enableDomBlendModeSupport } from './domMaterials';
+import { createDomRenderState, getDomRenderStateRuntime } from './domRenderState';
+import { applyDomStyle, prepareDomElement, setDomRendererElement } from './domStyle';
+
+function makeState() {
+  const container = document.createElement('div');
+  return createDomRenderState(container);
+}
+
+describe('applyDomStyle', () => {
+  it('applies the world transform as a CSS matrix', () => {
+    const state = makeState();
+    const el = document.createElement('div');
+    const obj = createDisplayObject();
+    const node = getOrCreateRenderProxy2D(state, obj);
+    setMatrix(node.transform2D, 1, 0, 0, 1, 10, 20);
+
+    applyDomStyle(state, el, node);
+
+    expect(el.style.transform).toContain('matrix(1,0,0,1,10,20)');
+  });
+
+  it('sets opacity when alpha is less than 1', () => {
+    const state = makeState();
+    const el = document.createElement('div');
+    const obj = createDisplayObject();
+    const node = getOrCreateRenderProxy2D(state, obj);
+    node.alpha = 0.5;
+
+    applyDomStyle(state, el, node);
+
+    expect(el.style.opacity).toBe('0.5');
+  });
+
+  it('clears opacity when alpha is 1', () => {
+    const state = makeState();
+    const el = document.createElement('div');
+    el.style.opacity = '0.5';
+    const obj = createDisplayObject();
+    const node = getOrCreateRenderProxy2D(state, obj);
+    node.alpha = 1;
+
+    applyDomStyle(state, el, node);
+
+    expect(el.style.opacity).toBe('');
+  });
+
+  it('sets mixBlendMode for non-default blend mode when blend support is enabled', () => {
+    const state = makeState();
+    enableDomBlendModeSupport(state);
+    const el = document.createElement('div');
+    const obj = createDisplayObject();
+    const node = getOrCreateRenderProxy2D(state, obj);
+    node.blendMode = BlendMode.Multiply;
+
+    applyDomStyle(state, el, node);
+
+    expect(el.style.mixBlendMode).toBe('multiply');
+  });
+
+  it('leaves mixBlendMode untouched when blend support is not enabled', () => {
+    const state = makeState();
+    const el = document.createElement('div');
+    const obj = createDisplayObject();
+    const node = getOrCreateRenderProxy2D(state, obj);
+    node.blendMode = BlendMode.Multiply;
+
+    applyDomStyle(state, el, node);
+
+    expect(el.style.mixBlendMode).toBe('');
+  });
+
+  it('applies a bound CSS filter to the element', () => {
+    const state = makeState();
+    const el = document.createElement('div');
+    const obj = createDisplayObject();
+    enableDomCssFilterSupport(state);
+    setDomCssFilter(state, obj, 'blur(3px)');
+    const node = getOrCreateRenderProxy2D(state, obj);
+
+    applyDomStyle(state, el, node);
+
+    expect(el.style.filter).toBe('blur(3px)');
+  });
+});
+
+describe('prepareDomElement', () => {
+  it('sets position to absolute', () => {
+    const el = document.createElement('div');
+    prepareDomElement(el);
+    expect(el.style.position).toBe('absolute');
+  });
+
+  it('sets left and top to 0', () => {
+    const el = document.createElement('div');
+    prepareDomElement(el);
+    expect(el.style.left).toBe('0px');
+    expect(el.style.top).toBe('0px');
+  });
+
+  it('sets transformOrigin to "0 0"', () => {
+    const el = document.createElement('div');
+    prepareDomElement(el);
+    expect(el.style.transformOrigin).toBe('0 0');
+  });
+
+  it('sets pointerEvents to none', () => {
+    const el = document.createElement('div');
+    prepareDomElement(el);
+    expect(el.style.pointerEvents).toBe('none');
+  });
+});
+
+describe('setDomRendererElement', () => {
+  it('writes the element to domCurrentElement on the internal state', () => {
+    const container = document.createElement('div');
+    const state = createDomRenderState(container);
+    const el = document.createElement('canvas');
+
+    setDomRendererElement(state, el);
+
+    expect(getDomRenderStateRuntime(state).domCurrentElement).toBe(el);
+  });
+});

package/src/domSvgFilter.test.ts

@@ -0,0 +1,116 @@
+import { getDomSvgColorMatrixFilter, releaseDomSvgColorMatrixFilter } from './domSvgFilter';
+
+// A simple identity color matrix (Flash 0–255 offset convention).
+const IDENTITY_MATRIX = [
+  1,
+  0,
+  0,
+  0,
+  0, // R row
+  0,
+  1,
+  0,
+  0,
+  0, // G row
+  0,
+  0,
+  1,
+  0,
+  0, // B row
+  0,
+  0,
+  0,
+  1,
+  0, // A row
+];
+
+describe('getDomSvgColorMatrixFilter', () => {
+  it('returns a css url(#id) reference string', () => {
+    const filter = { kind: 'ColorMatrixFilter' as const, matrix: IDENTITY_MATRIX };
+    const css = getDomSvgColorMatrixFilter(filter);
+    expect(css).toMatch(/^url\(#flighthq-cm-\d+\)$/);
+  });
+
+  it('injects a <filter> element into the document', () => {
+    const filter = { kind: 'ColorMatrixFilter' as const, matrix: IDENTITY_MATRIX };
+    const css = getDomSvgColorMatrixFilter(filter)!;
+    const id = css.slice('url(#'.length, -1);
+    const el = document.getElementById(id);
+    expect(el).not.toBeNull();
+    expect(el!.tagName.toLowerCase()).toBe('filter');
+  });
+
+  it('injects a feColorMatrix child with type=matrix', () => {
+    const filter = { kind: 'ColorMatrixFilter' as const, matrix: IDENTITY_MATRIX };
+    const css = getDomSvgColorMatrixFilter(filter)!;
+    const id = css.slice('url(#'.length, -1);
+    const filterEl = document.getElementById(id)!;
+    const feEl = filterEl.querySelector('feColorMatrix');
+    expect(feEl).not.toBeNull();
+    expect(feEl!.getAttribute('type')).toBe('matrix');
+  });
+
+  it('divides offset column by 255 in the feColorMatrix values', () => {
+    // Matrix with offset 255 in the red channel (index 4), which should become 1.0 in SVG.
+    const matrix = [
+      1,
+      0,
+      0,
+      0,
+      255, // R: offset 255 → should map to 1 in SVG
+      0,
+      1,
+      0,
+      0,
+      0,
+      0,
+      0,
+      1,
+      0,
+      0,
+      0,
+      0,
+      0,
+      1,
+      0,
+    ];
+    const filter = { kind: 'ColorMatrixFilter' as const, matrix };
+    const css = getDomSvgColorMatrixFilter(filter)!;
+    const id = css.slice('url(#'.length, -1);
+    const filterEl = document.getElementById(id)!;
+    const feEl = filterEl.querySelector('feColorMatrix')!;
+    const values = feEl.getAttribute('values')!.split(' ').map(Number);
+    // Index 4 is the R-row offset; should be 255/255 = 1
+    expect(values[4]).toBeCloseTo(1, 5);
+  });
+
+  it('each call produces a unique id', () => {
+    const filter = { kind: 'ColorMatrixFilter' as const, matrix: IDENTITY_MATRIX };
+    const css1 = getDomSvgColorMatrixFilter(filter);
+    const css2 = getDomSvgColorMatrixFilter(filter);
+    expect(css1).not.toBe(css2);
+  });
+
+  it('sets color-interpolation-filters to sRGB on the filter element', () => {
+    const filter = { kind: 'ColorMatrixFilter' as const, matrix: IDENTITY_MATRIX };
+    const css = getDomSvgColorMatrixFilter(filter)!;
+    const id = css.slice('url(#'.length, -1);
+    const filterEl = document.getElementById(id)!;
+    expect(filterEl.getAttribute('color-interpolation-filters')).toBe('sRGB');
+  });
+});
+
+describe('releaseDomSvgColorMatrixFilter', () => {
+  it('removes the injected filter element from the document', () => {
+    const filter = { kind: 'ColorMatrixFilter' as const, matrix: IDENTITY_MATRIX };
+    const css = getDomSvgColorMatrixFilter(filter)!;
+    const id = css.slice('url(#'.length, -1);
+    expect(document.getElementById(id)).not.toBeNull();
+    releaseDomSvgColorMatrixFilter(id);
+    expect(document.getElementById(id)).toBeNull();
+  });
+
+  it('is a no-op for an unknown id', () => {
+    expect(() => releaseDomSvgColorMatrixFilter('nonexistent-filter-id')).not.toThrow();
+  });
+});

package/src/domTextHelpers.test.ts

@@ -0,0 +1,27 @@
+import { escapeDomHtmlString } from './domTextHelpers';
+
+describe('escapeDomHtmlString', () => {
+  it('escapes ampersands', () => {
+    expect(escapeDomHtmlString('a&b')).toBe('a&b');
+  });
+
+  it('escapes greater-than signs', () => {
+    expect(escapeDomHtmlString('a>b')).toBe('a>b');
+  });
+
+  it('escapes less-than signs', () => {
+    expect(escapeDomHtmlString('a<b')).toBe('a&lt;b');
+  });
+
+  it('escapes multiple special characters in sequence', () => {
+    expect(escapeDomHtmlString('<a & b>')).toBe('&lt;a&nbsp;&amp;&nbsp;b&gt;');
+  });
+
+  it('escapes spaces to &nbsp;', () => {
+    expect(escapeDomHtmlString('a b')).toBe('a&nbsp;b');
+  });
+
+  it('returns unchanged string when no special characters', () => {
+    expect(escapeDomHtmlString('hello')).toBe('hello');
+  });
+});

package/src/domTextInput.test.ts

@@ -0,0 +1,61 @@
+import { getOrCreateRenderProxy2D, registerRenderer } from '@flighthq/render';
+import { createRichText } from '@flighthq/text';
+import { enableTextInput, setTextInputSelection } from '@flighthq/textinput';
+import type { RichText } from '@flighthq/types';
+import { RichTextKind } from '@flighthq/types';
+
+import { createDomRenderState, getDomRenderStateRuntime } from './domRenderState';
+import { defaultDomRichTextRenderer, drawDomRichText } from './domRichText';
+import { drawDomTextInputOverlay, enableDomTextInput } from './domTextInput';
+
+function makeState() {
+  const state = createDomRenderState(document.createElement('div'));
+  registerRenderer(state, RichTextKind, defaultDomRichTextRenderer);
+  return state;
+}
+
+function makeFocusedInput(text: string): RichText {
+  const node = createRichText({ data: { text, width: 100, height: 40 } });
+  enableTextInput(node).focused = true;
+  return node;
+}
+
+function drawGetEl(state: ReturnType<typeof makeState>, drawFn: () => void): HTMLElement | null {
+  getDomRenderStateRuntime(state).domCurrentElement = null;
+  drawFn();
+  return getDomRenderStateRuntime(state).domCurrentElement;
+}
+
+describe('drawDomTextInputOverlay', () => {
+  it('is the installed overlay function', () => {
+    expect(typeof drawDomTextInputOverlay).toBe('function');
+  });
+
+  it('appends a caret for the focused collapsed selection', () => {
+    enableDomTextInput();
+    const state = makeState();
+    const node = makeFocusedInput('hello');
+    setTextInputSelection(node, 2, 2);
+    const renderProxy = getOrCreateRenderProxy2D(state, node);
+
+    const div = drawGetEl(state, () => drawDomRichText(state, renderProxy));
+    expect(div!.innerHTML).toContain('background:#000000');
+  });
+
+  it('appends selection rectangles for the focused expanded selection', () => {
+    enableDomTextInput();
+    const state = makeState();
+    const node = makeFocusedInput('hello');
+    setTextInputSelection(node, 1, 4);
+    const renderProxy = getOrCreateRenderProxy2D(state, node);
+
+    const div = drawGetEl(state, () => drawDomRichText(state, renderProxy));
+    expect(div!.innerHTML).toContain('background:#0078d7');
+  });
+});
+
+describe('enableDomTextInput', () => {
+  it('installs the overlay without throwing', () => {
+    expect(() => enableDomTextInput()).not.toThrow();
+  });
+});

package/src/domTextLabel.test.ts

@@ -0,0 +1,92 @@
+import { registerRenderer } from '@flighthq/render';
+import { getOrCreateRenderProxy2D } from '@flighthq/render';
+import { createTextLabel } from '@flighthq/text';
+import { TextLabelKind } from '@flighthq/types';
+
+import { createDomRenderState, getDomRenderStateRuntime } from './domRenderState';
+import { defaultDomTextLabelRenderer, drawDomTextLabel } from './domTextLabel';
+
+function makeState() {
+  const container = document.createElement('div');
+  const state = createDomRenderState(container);
+  registerRenderer(state, TextLabelKind, defaultDomTextLabelRenderer);
+  return state;
+}
+
+function drawGetEl(state: ReturnType<typeof makeState>, drawFn: () => void): HTMLElement | null {
+  getDomRenderStateRuntime(state).domCurrentElement = null;
+  drawFn();
+  return getDomRenderStateRuntime(state).domCurrentElement;
+}
+
+describe('defaultDomTextLabelRenderer', () => {
+  it('has submit, and createData', () => {
+    expect(typeof defaultDomTextLabelRenderer.submit).toBe('function');
+    expect(typeof defaultDomTextLabelRenderer.createData).toBe('function');
+  });
+});
+
+describe('drawDomTextLabel', () => {
+  it('does not throw when text is empty', () => {
+    const state = makeState();
+    const node = createTextLabel();
+    node.data.text = '';
+    const renderProxy = getOrCreateRenderProxy2D(state, node);
+    expect(() => drawDomTextLabel(state, renderProxy)).not.toThrow();
+  });
+
+  it('produces no element when text is empty', () => {
+    const state = makeState();
+    const node = createTextLabel();
+    node.data.text = '';
+    const renderProxy = getOrCreateRenderProxy2D(state, node);
+
+    const el = drawGetEl(state, () => drawDomTextLabel(state, renderProxy));
+
+    expect(el).toBeNull();
+  });
+
+  it('produces a div when text is non-empty', () => {
+    const state = makeState();
+    const node = createTextLabel();
+    node.data.text = 'hello';
+    const renderProxy = getOrCreateRenderProxy2D(state, node);
+
+    const el = drawGetEl(state, () => drawDomTextLabel(state, renderProxy));
+
+    expect(el).not.toBeNull();
+    expect(el!.tagName).toBe('DIV');
+  });
+
+  it('sets overflow:hidden on the div', () => {
+    const state = makeState();
+    const node = createTextLabel();
+    node.data.text = 'hello';
+    const renderProxy = getOrCreateRenderProxy2D(state, node);
+
+    const div = drawGetEl(state, () => drawDomTextLabel(state, renderProxy))!;
+    expect(div.style.overflow).toBe('hidden');
+  });
+
+  it('includes the text content in innerHtml', () => {
+    const state = makeState();
+    const node = createTextLabel();
+    node.data.text = 'world';
+    const renderProxy = getOrCreateRenderProxy2D(state, node);
+
+    const div = drawGetEl(state, () => drawDomTextLabel(state, renderProxy))!;
+    expect(div.innerHTML).toContain('world');
+  });
+
+  it('reuses the same div across multiple draws', () => {
+    const state = makeState();
+    const node = createTextLabel();
+    node.data.text = 'hello';
+    const renderProxy = getOrCreateRenderProxy2D(state, node);
+
+    const firstDiv = drawGetEl(state, () => drawDomTextLabel(state, renderProxy));
+    const secondDiv = drawGetEl(state, () => drawDomTextLabel(state, renderProxy));
+
+    expect(firstDiv).toBe(secondDiv);
+  });
+});

package/src/domTransform.test.ts

@@ -0,0 +1,68 @@
+import { createMatrix } from '@flighthq/geometry';
+
+import { setDomTransform, setDomTransformWithOffset } from './domTransform';
+
+describe('setDomTransform', () => {
+  it('sets the CSS transform to the matrix values', () => {
+    const el = document.createElement('div');
+    const t = createMatrix(1, 2, 3, 4, 5, 6);
+
+    setDomTransform(el, t, false);
+
+    expect(el.style.transform).toBe('matrix(1,2,3,4,5,6)');
+  });
+
+  it('passes tx and ty through without rounding when roundPixels is false', () => {
+    const el = document.createElement('div');
+    const t = createMatrix(1, 0, 0, 1, 1.7, 2.3);
+
+    setDomTransform(el, t, false);
+
+    expect(el.style.transform).toBe('matrix(1,0,0,1,1.7,2.3)');
+  });
+
+  it('frounds tx and ty when roundPixels is true', () => {
+    const el = document.createElement('div');
+    const t = createMatrix(1, 0, 0, 1, 5.6789, 9.1011);
+
+    setDomTransform(el, t, true);
+
+    const expectedTx = Math.fround(5.6789);
+    const expectedTy = Math.fround(9.1011);
+    expect(el.style.transform).toBe(`matrix(1,0,0,1,${expectedTx},${expectedTy})`);
+  });
+});
+
+describe('setDomTransformWithOffset', () => {
+  it('applies offset through the transform before setting CSS matrix', () => {
+    const el = document.createElement('div');
+    const t = createMatrix(1, 0, 0, 1, 10, 20);
+
+    setDomTransformWithOffset(el, t, 5, 8, false);
+
+    // tx = 1*5 + 0*8 + 10 = 15, ty = 0*5 + 1*8 + 20 = 28
+    expect(el.style.transform).toBe('matrix(1,0,0,1,15,28)');
+  });
+
+  it('applies offset through a rotated transform', () => {
+    const el = document.createElement('div');
+    // 90-degree rotation: a=0, b=1, c=-1, d=0
+    const t = createMatrix(0, 1, -1, 0, 0, 0);
+
+    setDomTransformWithOffset(el, t, 10, 20, false);
+
+    // tx = 0*10 + (-1)*20 + 0 = -20, ty = 1*10 + 0*20 + 0 = 10
+    expect(el.style.transform).toBe('matrix(0,1,-1,0,-20,10)');
+  });
+
+  it('frounds the adjusted tx/ty when roundPixels is true', () => {
+    const el = document.createElement('div');
+    const t = createMatrix(1, 0, 0, 1, 0.5, 0.5);
+
+    setDomTransformWithOffset(el, t, 0.1, 0.1, true);
+
+    const expectedTx = Math.fround(0.6);
+    const expectedTy = Math.fround(0.6);
+    expect(el.style.transform).toBe(`matrix(1,0,0,1,${expectedTx},${expectedTy})`);
+  });
+});

package/src/domVideo.test.ts

@@ -0,0 +1,30 @@
+import { createVideo } from '@flighthq/displayobject';
+import { registerRenderer } from '@flighthq/render';
+import { getOrCreateRenderProxy2D } from '@flighthq/render';
+import { VideoKind } from '@flighthq/types';
+
+import { createDomRenderState } from './domRenderState';
+import { defaultDomVideoRenderer, drawDomVideo } from './domVideo';
+
+function makeState() {
+  const container = document.createElement('div');
+  const state = createDomRenderState(container);
+  registerRenderer(state, VideoKind, defaultDomVideoRenderer);
+  return state;
+}
+
+describe('defaultDomVideoRenderer', () => {
+  it('has submit, and createData functions', () => {
+    expect(typeof defaultDomVideoRenderer.submit).toBe('function');
+    expect(typeof defaultDomVideoRenderer.createData).toBe('function');
+  });
+});
+
+describe('drawDomVideo', () => {
+  it('does not throw when source element is null', () => {
+    const state = makeState();
+    const video = createVideo();
+    const renderProxy = getOrCreateRenderProxy2D(state, video);
+    expect(() => drawDomVideo(state, renderProxy)).not.toThrow();
+  });
+});