@flighthq/scene2d-dom 0.2.1-next.840.857425c

package/src/domClipRectangle.test.ts

@@ -0,0 +1,81 @@
+import { createMatrix, createRectangle } from '@flighthq/geometry';
+import { getOrCreateRenderProxy2D } from '@flighthq/render';
+import { createDisplayObject } from '@flighthq/scene2d';
+import type { DomRenderState, DomScene2DRectangle } from '@flighthq/types';
+
+import {
+  applyDomClipRectangles,
+  createDomScene2DRectangle,
+  pushDomClipRectangle,
+  setDomClipHooks,
+} from './domClipRectangle';
+import { createDomRenderState, getDomRenderStateRuntime } from './domRenderState';
+
+function makeState(): DomRenderState {
+  return createDomRenderState(document.createElement('div'));
+}
+
+describe('applyDomClipRectangles', () => {
+  it('clears clip styles when no rectangles are active', () => {
+    const state = makeState();
+    const source = createDisplayObject();
+    const data = getOrCreateRenderProxy2D(state, source);
+    const element = document.createElement('div');
+    element.style.clipPath = 'inset(0)';
+    getDomRenderStateRuntime(state).domElementMap.set(data, element);
+
+    applyDomClipRectangles(state, data, []);
+
+    expect(element.style.clipPath).toBe('');
+  });
+
+  it('sets a local polygon clip path from intersected scene2d rectangles', () => {
+    const state = makeState();
+    const source = createDisplayObject();
+    const data = getOrCreateRenderProxy2D(state, source);
+    const element = document.createElement('div');
+    element.style.transform = 'matrix(1,0,0,1,10,20)';
+    getDomRenderStateRuntime(state).domElementMap.set(data, element);
+
+    applyDomClipRectangles(state, data, [
+      { bottom: 100, left: 0, right: 100, top: 0 },
+      { bottom: 90, left: 20, right: 80, top: 30 },
+    ]);
+
+    expect(element.style.clipPath).toBe('polygon(10px 10px, 70px 10px, 70px 70px, 10px 70px)');
+  });
+});
+
+describe('createDomScene2DRectangle', () => {
+  it('transforms a local rectangle into a scene2d-space AABB', () => {
+    const rect = createDomScene2DRectangle(createRectangle(10, 20, 30, 40), createMatrix(1, 0, 0, 1, 5, 6));
+
+    expect(rect).toEqual({ bottom: 66, left: 15, right: 45, top: 26 });
+  });
+});
+
+describe('pushDomClipRectangle', () => {
+  it('pushes a transformed scene2d rectangle', () => {
+    const rectangles: DomScene2DRectangle[] = [];
+
+    pushDomClipRectangle(rectangles, createRectangle(0, 0, 10, 20), createMatrix(1, 0, 0, 1, 2, 3));
+
+    expect(rectangles).toEqual([{ bottom: 23, left: 2, right: 12, top: 3 }]);
+  });
+});
+
+describe('setDomClipHooks', () => {
+  it('sets DOM clip hooks on the render state', () => {
+    const state = makeState();
+    setDomClipHooks(state);
+    expect(getDomRenderStateRuntime(state).domClipHooks).not.toBeNull();
+  });
+
+  it('is idempotent', () => {
+    const state = makeState();
+    setDomClipHooks(state);
+    const first = getDomRenderStateRuntime(state).domClipHooks;
+    setDomClipHooks(state);
+    expect(getDomRenderStateRuntime(state).domClipHooks).toBe(first);
+  });
+});

package/src/domFontSource.test.ts

@@ -0,0 +1,30 @@
+import { getDomFontAscentCached, invalidateDomFontResource, setDomFontAscentCached } from './domFontSource';
+
+describe('getDomFontAscentCached', () => {
+  it('returns undefined for an unknown font key', () => {
+    expect(getDomFontAscentCached('12px "UnknownFont-x9z"')).toBeUndefined();
+  });
+});
+
+describe('invalidateDomFontResource', () => {
+  it('removes cache entries that match the font family', () => {
+    setDomFontAscentCached("16px 'MyFont'", 14);
+    setDomFontAscentCached('16px "MyFont"', 14);
+    invalidateDomFontResource({ family: 'MyFont', face: null });
+    expect(getDomFontAscentCached("16px 'MyFont'")).toBeUndefined();
+    expect(getDomFontAscentCached('16px "MyFont"')).toBeUndefined();
+  });
+
+  it('does not remove cache entries for other families', () => {
+    setDomFontAscentCached("16px 'OtherFont'", 13);
+    invalidateDomFontResource({ family: 'MyFont', face: null });
+    expect(getDomFontAscentCached("16px 'OtherFont'")).toBe(13);
+  });
+});
+
+describe('setDomFontAscentCached', () => {
+  it('stores and retrieves an ascent value', () => {
+    setDomFontAscentCached('12px "CacheTestFont"', 10);
+    expect(getDomFontAscentCached('12px "CacheTestFont"')).toBe(10);
+  });
+});

package/src/domHtmlView.test.ts

@@ -0,0 +1,117 @@
+import { registerRenderer } from '@flighthq/render';
+import { getOrCreateRenderProxy2D } from '@flighthq/render';
+import { createHtmlView } from '@flighthq/scene2d';
+import { HtmlViewKind } from '@flighthq/types';
+
+import { defaultHtmlViewRenderer, drawDomHtmlView } from './domHtmlView';
+import { createDomRenderState, getDomRenderStateRuntime } from './domRenderState';
+
+function makeState() {
+  const container = document.createElement('div');
+  const state = createDomRenderState(container);
+  registerRenderer(state, HtmlViewKind, defaultHtmlViewRenderer);
+  return state;
+}
+
+function drawGetEl(state: ReturnType<typeof makeState>, drawFn: () => void): HTMLElement | null {
+  getDomRenderStateRuntime(state).domCurrentElement = null;
+  drawFn();
+  return getDomRenderStateRuntime(state).domCurrentElement;
+}
+
+describe('defaultHtmlViewRenderer', () => {
+  it('has submit, and createData', () => {
+    expect(typeof defaultHtmlViewRenderer.submit).toBe('function');
+    expect(typeof defaultHtmlViewRenderer.createData).toBe('function');
+  });
+});
+
+describe('drawDomHtmlView', () => {
+  it('produces no element when source element is null', () => {
+    const state = makeState();
+    const node = createHtmlView();
+    node.data.element = null;
+    const renderProxy = getOrCreateRenderProxy2D(state, node);
+
+    const el = drawGetEl(state, () => drawDomHtmlView(state, renderProxy));
+
+    expect(el).toBeNull();
+  });
+
+  it('produces the source element', () => {
+    const state = makeState();
+    const inner = document.createElement('span');
+    const node = createHtmlView({ data: { element: inner } });
+    const renderProxy = getOrCreateRenderProxy2D(state, node);
+
+    const el = drawGetEl(state, () => drawDomHtmlView(state, renderProxy));
+
+    expect(el).toBe(inner);
+  });
+
+  it('initializes position and overflow styles on first draw', () => {
+    const state = makeState();
+    const inner = document.createElement('div');
+    const node = createHtmlView({ data: { element: inner } });
+    const renderProxy = getOrCreateRenderProxy2D(state, node);
+
+    drawDomHtmlView(state, renderProxy);
+
+    expect(inner.style.position).toBe('absolute');
+    expect(inner.style.left).toBe('0px');
+    expect(inner.style.top).toBe('0px');
+    expect(inner.style.transformOrigin).toBe('0 0');
+    expect(inner.style.overflow).toBe('hidden');
+  });
+
+  it('does not reset position styles on subsequent draws when already absolute', () => {
+    const state = makeState();
+    const inner = document.createElement('div');
+    inner.style.position = 'absolute';
+    inner.style.left = '50px';
+    const node = createHtmlView({ data: { element: inner } });
+    const renderProxy = getOrCreateRenderProxy2D(state, node);
+
+    drawDomHtmlView(state, renderProxy);
+
+    expect(inner.style.left).toBe('50px');
+  });
+
+  it('applies width and height from data', () => {
+    const state = makeState();
+    const inner = document.createElement('div');
+    const node = createHtmlView({ data: { element: inner, width: 320, height: 240 } });
+    const renderProxy = getOrCreateRenderProxy2D(state, node);
+
+    drawDomHtmlView(state, renderProxy);
+
+    expect(inner.style.width).toBe('320px');
+    expect(inner.style.height).toBe('240px');
+  });
+
+  it('updates width and height when data changes between draws', () => {
+    const state = makeState();
+    const inner = document.createElement('div');
+    const node = createHtmlView({ data: { element: inner, width: 100, height: 100 } });
+    const renderProxy = getOrCreateRenderProxy2D(state, node);
+
+    drawDomHtmlView(state, renderProxy);
+    node.data.width = 640;
+    node.data.height = 480;
+    drawDomHtmlView(state, renderProxy);
+
+    expect(inner.style.width).toBe('640px');
+    expect(inner.style.height).toBe('480px');
+  });
+
+  it('applies transform from the render node', () => {
+    const state = makeState();
+    const inner = document.createElement('div');
+    const node = createHtmlView({ data: { element: inner } });
+    const renderProxy = getOrCreateRenderProxy2D(state, node);
+
+    drawDomHtmlView(state, renderProxy);
+
+    expect(inner.style.transform).toMatch(/^matrix\(/);
+  });
+});

package/src/domImageSource.test.ts

@@ -0,0 +1,47 @@
+import { createImageResource, invalidateImageResource } from '@flighthq/image';
+import type { ImageResource } from '@flighthq/types';
+
+import { explainDomImageSource, resolveDomImageSource } from './domImageSource';
+import { createDomRenderState } from './domRenderState';
+
+function makeState() {
+  return createDomRenderState(document.createElement('div'));
+}
+
+function makeDataOnlyResource(width = 4, height = 4): ImageResource {
+  const resource = createImageResource();
+  resource.width = width;
+  resource.height = height;
+  resource.data = new Uint8ClampedArray(width * height * 4).fill(255);
+  return resource;
+}
+
+describe('explainDomImageSource', () => {
+  it('reports element, data, and none for the three representations', () => {
+    expect(explainDomImageSource(createImageResource(document.createElement('img')))).toBe('element');
+    expect(explainDomImageSource(makeDataOnlyResource())).toBe('data');
+    expect(explainDomImageSource(createImageResource())).toBe('none');
+  });
+});
+
+describe('resolveDomImageSource', () => {
+  it('returns the host source element directly', () => {
+    const state = makeState();
+    const img = document.createElement('img');
+    expect(resolveDomImageSource(state, createImageResource(img))).toBe(img);
+  });
+
+  it('materializes and caches a canvas for a data-only resource, rebuilding on version bump', () => {
+    const state = makeState();
+    const resource = makeDataOnlyResource();
+    const first = resolveDomImageSource(state, resource);
+    expect(first).toBeInstanceOf(HTMLCanvasElement);
+    expect(resolveDomImageSource(state, resource)).toBe(first);
+    invalidateImageResource(resource);
+    expect(resolveDomImageSource(state, resource)).not.toBe(first);
+  });
+
+  it('returns null when the resource carries neither pixels form', () => {
+    expect(resolveDomImageSource(makeState(), createImageResource())).toBeNull();
+  });
+});

package/src/domMaterials.test.ts

@@ -0,0 +1,100 @@
+import { AdvancedBlendMode, BlendMode } from '@flighthq/types';
+
+import { applyDomBlendMode, enableDomBlendModeSupport, getDomBlendModeFidelity } from './domMaterials';
+import { createDomRenderState } from './domRenderState';
+
+describe('applyDomBlendMode', () => {
+  let el: HTMLElement;
+
+  beforeEach(() => {
+    el = document.createElement('div');
+  });
+
+  it('sets mixBlendMode to "screen" for BlendMode.Add', () => {
+    applyDomBlendMode(el, BlendMode.Add);
+    expect(el.style.mixBlendMode).toBe('screen');
+  });
+
+  it('sets mixBlendMode to "darken" for BlendMode.Darken', () => {
+    applyDomBlendMode(el, BlendMode.Darken);
+    expect(el.style.mixBlendMode).toBe('darken');
+  });
+
+  it('sets mixBlendMode to "difference" for AdvancedBlendMode.Difference', () => {
+    applyDomBlendMode(el, AdvancedBlendMode.Difference);
+    expect(el.style.mixBlendMode).toBe('difference');
+  });
+
+  it('sets mixBlendMode to "hard-light" for AdvancedBlendMode.HardLight', () => {
+    applyDomBlendMode(el, AdvancedBlendMode.HardLight);
+    expect(el.style.mixBlendMode).toBe('hard-light');
+  });
+
+  it('sets mixBlendMode to "lighten" for BlendMode.Lighten', () => {
+    applyDomBlendMode(el, BlendMode.Lighten);
+    expect(el.style.mixBlendMode).toBe('lighten');
+  });
+
+  it('sets mixBlendMode to "multiply" for BlendMode.Multiply', () => {
+    applyDomBlendMode(el, BlendMode.Multiply);
+    expect(el.style.mixBlendMode).toBe('multiply');
+  });
+
+  it('sets mixBlendMode to "overlay" for AdvancedBlendMode.Overlay', () => {
+    applyDomBlendMode(el, AdvancedBlendMode.Overlay);
+    expect(el.style.mixBlendMode).toBe('overlay');
+  });
+
+  it('sets mixBlendMode to "screen" for BlendMode.Screen', () => {
+    applyDomBlendMode(el, BlendMode.Screen);
+    expect(el.style.mixBlendMode).toBe('screen');
+  });
+
+  it('clears mixBlendMode for null (default)', () => {
+    el.style.mixBlendMode = 'multiply';
+    applyDomBlendMode(el, null);
+    expect(el.style.mixBlendMode).toBe('');
+  });
+
+  it('clears mixBlendMode for BlendMode.Normal', () => {
+    el.style.mixBlendMode = 'multiply';
+    applyDomBlendMode(el, BlendMode.Normal);
+    expect(el.style.mixBlendMode).toBe('');
+  });
+});
+
+describe('enableDomBlendModeSupport', () => {
+  it('wires applyBlendMode onto the state', () => {
+    const state = createDomRenderState(document.createElement('div'));
+    expect(state.applyBlendMode).toBeNull();
+    enableDomBlendModeSupport(state);
+    expect(state.applyBlendMode).not.toBeNull();
+  });
+
+  it('causes blend modes to be applied to elements', () => {
+    const state = createDomRenderState(document.createElement('div'));
+    enableDomBlendModeSupport(state);
+    const el = document.createElement('div');
+    state.applyBlendMode!(el, BlendMode.Multiply);
+    expect(el.style.mixBlendMode).toBe('multiply');
+  });
+});
+
+describe('getDomBlendModeFidelity', () => {
+  it('returns "approximate" for BlendMode.Add', () => {
+    expect(getDomBlendModeFidelity(BlendMode.Add)).toBe('approximate');
+  });
+
+  it('returns "exact" for BlendMode.Multiply', () => {
+    expect(getDomBlendModeFidelity(BlendMode.Multiply)).toBe('exact');
+  });
+
+  it('returns "exact" for BlendMode.Normal', () => {
+    expect(getDomBlendModeFidelity(BlendMode.Normal)).toBe('exact');
+  });
+
+  it('returns "exact" for the advanced modes CSS realizes natively', () => {
+    expect(getDomBlendModeFidelity(AdvancedBlendMode.Overlay)).toBe('exact');
+    expect(getDomBlendModeFidelity(AdvancedBlendMode.SoftLight)).toBe('exact');
+  });
+});

package/src/domNativeText.test.ts

@@ -0,0 +1,102 @@
+import { getOrCreateRenderProxy2D, registerRenderer } from '@flighthq/render';
+import { createNativeText } from '@flighthq/text';
+import { NativeTextKind } from '@flighthq/types';
+
+import { defaultDomNativeTextRenderer, drawDomNativeText, drawDomNativeTextMask } from './domNativeText';
+import { createDomRenderState, getDomRenderStateRuntime } from './domRenderState';
+
+function makeState() {
+  const container = document.createElement('div');
+  const state = createDomRenderState(container);
+  registerRenderer(state, NativeTextKind, defaultDomNativeTextRenderer);
+  return state;
+}
+
+function drawGetEl(state: ReturnType<typeof makeState>, drawFn: () => void): HTMLElement | null {
+  getDomRenderStateRuntime(state).domCurrentElement = null;
+  drawFn();
+  return getDomRenderStateRuntime(state).domCurrentElement;
+}
+
+describe('defaultDomNativeTextRenderer', () => {
+  it('has submit and createData', () => {
+    expect(typeof defaultDomNativeTextRenderer.submit).toBe('function');
+    expect(typeof defaultDomNativeTextRenderer.createData).toBe('function');
+  });
+});
+
+describe('drawDomNativeText', () => {
+  it('produces a div carrying the text content', () => {
+    const state = makeState();
+    const node = createNativeText({ data: { text: 'hello' } });
+    const renderProxy = getOrCreateRenderProxy2D(state, node);
+
+    const el = drawGetEl(state, () => drawDomNativeText(state, renderProxy));
+
+    expect(el).not.toBeNull();
+    expect(el!.tagName).toBe('DIV');
+    expect(el!.textContent).toBe('hello');
+  });
+
+  it('reuses the same element across multiple draws', () => {
+    const state = makeState();
+    const node = createNativeText({ data: { text: 'hello' } });
+    const renderProxy = getOrCreateRenderProxy2D(state, node);
+
+    const first = drawGetEl(state, () => drawDomNativeText(state, renderProxy));
+    const second = drawGetEl(state, () => drawDomNativeText(state, renderProxy));
+
+    expect(first).toBe(second);
+  });
+
+  it('sets a fixed box under autoSize none', () => {
+    const state = makeState();
+    const node = createNativeText({ data: { text: 'hi', width: 120, height: 40 } });
+    const renderProxy = getOrCreateRenderProxy2D(state, node);
+
+    const div = drawGetEl(state, () => drawDomNativeText(state, renderProxy))!;
+    expect(div.style.width).toBe('120px');
+    expect(div.style.height).toBe('40px');
+    expect(div.style.overflow).toBe('hidden');
+  });
+
+  it('positions the block vertically via the flexbox on a fixed box', () => {
+    const state = makeState();
+    const node = createNativeText({ data: { text: 'hi', verticalAlign: 'middle' } });
+    const renderProxy = getOrCreateRenderProxy2D(state, node);
+
+    const div = drawGetEl(state, () => drawDomNativeText(state, renderProxy))!;
+    expect(div.style.display).toBe('flex');
+    expect(div.style.flexDirection).toBe('column');
+    expect(div.style.justifyContent).toBe('center');
+  });
+
+  it('maps top and bottom to the box ends', () => {
+    const state = makeState();
+    const top = createNativeText({ data: { text: 'hi', verticalAlign: 'top' } });
+    const bottom = createNativeText({ data: { text: 'hi', verticalAlign: 'bottom' } });
+    const topDiv = drawGetEl(state, () => drawDomNativeText(state, getOrCreateRenderProxy2D(state, top)))!;
+    const bottomDiv = drawGetEl(state, () => drawDomNativeText(state, getOrCreateRenderProxy2D(state, bottom)))!;
+    expect(topDiv.style.justifyContent).toBe('flex-start');
+    expect(bottomDiv.style.justifyContent).toBe('flex-end');
+  });
+
+  it('drops the flexbox framing under autoSize (no slack to align within)', () => {
+    const state = makeState();
+    const node = createNativeText({ data: { text: 'hi', autoSize: 'left', verticalAlign: 'middle' } });
+    const renderProxy = getOrCreateRenderProxy2D(state, node);
+
+    const div = drawGetEl(state, () => drawDomNativeText(state, renderProxy))!;
+    expect(div.style.display).toBe('');
+    expect(div.style.justifyContent).toBe('');
+  });
+});
+
+describe('drawDomNativeTextMask', () => {
+  it('does not throw', () => {
+    const state = makeState();
+    const node = createNativeText({ data: { text: 'hi' } });
+    const renderProxy = getOrCreateRenderProxy2D(state, node);
+    expect(() => drawDomNativeTextMask(state, renderProxy)).not.toThrow();
+  });
+});