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

package/src/domNode2D.test.ts

@@ -0,0 +1,236 @@
+import { createRectangle } from '@flighthq/geometry';
+import { addNodeChild, invalidateNodeLocalTransform } from '@flighthq/node';
+import { getOrCreateRenderProxy2D, prepareScene2DRender, registerRenderer } from '@flighthq/render';
+import { createDisplayObject, setNode2DClip } from '@flighthq/scene2d';
+import type { ClipRegion, Rectangle } from '@flighthq/types';
+import { DisplayObjectKind } from '@flighthq/types';
+
+import { enableDomClipSupport } from './domClip';
+import { defaultDomScene2DRenderer, drawDomScene2D, renderDomScene2D } from './domNode2D';
+import { createDomRenderState, getDomRenderStateRuntime } from './domRenderState';
+
+function makeRectangleClip(rect: Rectangle): ClipRegion {
+  return { contours: null, rect, version: 0, winding: 'nonZero' };
+}
+
+function makeState() {
+  const container = document.createElement('div');
+  return createDomRenderState(container);
+}
+
+// Sets up a node with a mock renderer that registers a specific element without going
+// through registerRenderer (which would change rendererMapId and overwrite other nodes).
+function setupRenderedNode(
+  state: ReturnType<typeof makeState>,
+  obj: ReturnType<typeof createDisplayObject>,
+  el: HTMLElement,
+) {
+  const data = getOrCreateRenderProxy2D(state, obj);
+  data.visible = true;
+  data.alpha = 1;
+  data.transform2D.a = 1;
+  data.transform2D.d = 1;
+  data.renderer = {
+    createData: vi.fn(),
+    submit: vi.fn().mockImplementation(() => {
+      getDomRenderStateRuntime(state).domCurrentElement = el;
+    }),
+  };
+  data.rendererMapId = getDomRenderStateRuntime(state).rendererMapId;
+  return data;
+}
+
+describe('defaultDomScene2DRenderer', () => {
+  it('exposes a createData and submit function', () => {
+    expect(typeof defaultDomScene2DRenderer.createData).toBe('function');
+    expect(typeof defaultDomScene2DRenderer.submit).toBe('function');
+  });
+});
+
+describe('drawDomScene2D', () => {
+  it('does not throw for any render proxy', () => {
+    const state = makeState();
+    const proxy = getOrCreateRenderProxy2D(state, createDisplayObject());
+    expect(() => drawDomScene2D(state, proxy)).not.toThrow();
+  });
+});
+
+describe('renderDomScene2D', () => {
+  it('does not throw for a simple visible object', () => {
+    const state = makeState();
+    const obj = createDisplayObject();
+    expect(() => renderDomScene2D(state, obj)).not.toThrow();
+  });
+
+  it('removes foreign elements from the container on first render', () => {
+    const state = makeState();
+    const foreign = document.createElement('span');
+    state.element.appendChild(foreign);
+
+    const obj = createDisplayObject();
+    renderDomScene2D(state, obj);
+
+    expect(state.element.contains(foreign)).toBe(false);
+  });
+
+  it('skips rendering when the object has zero scale', () => {
+    const state = makeState();
+    const obj = createDisplayObject();
+    obj.scaleX = 0;
+    obj.scaleY = 0;
+    invalidateNodeLocalTransform(obj);
+
+    const renderer = { createData: vi.fn(), submit: vi.fn() };
+    registerRenderer(state, DisplayObjectKind, renderer);
+    prepareScene2DRender(state, obj);
+    renderDomScene2D(state, obj);
+
+    expect(renderer.submit).not.toHaveBeenCalled();
+  });
+
+  it('skips rendering invisible objects', () => {
+    const state = makeState();
+    const obj = createDisplayObject();
+    obj.visible = false;
+
+    const renderer = { createData: vi.fn(), submit: vi.fn() };
+    registerRenderer(state, DisplayObjectKind, renderer);
+    prepareScene2DRender(state, obj);
+    renderDomScene2D(state, obj);
+
+    expect(renderer.submit).not.toHaveBeenCalled();
+  });
+
+  it('skips objects with zero alpha', () => {
+    const state = makeState();
+    const obj = createDisplayObject();
+    obj.alpha = 0;
+
+    const renderer = { createData: vi.fn(), submit: vi.fn() };
+    registerRenderer(state, DisplayObjectKind, renderer);
+    prepareScene2DRender(state, obj);
+    renderDomScene2D(state, obj);
+
+    expect(renderer.submit).not.toHaveBeenCalled();
+  });
+
+  it('calls draw when the object is visible and has a renderer', () => {
+    const state = makeState();
+    const obj = createDisplayObject();
+    const el = document.createElement('div');
+    const data = setupRenderedNode(state, obj, el);
+
+    renderDomScene2D(state, obj);
+
+    expect(data.renderer!.submit).toHaveBeenCalledOnce();
+  });
+
+  it('traverses children', () => {
+    const state = makeState();
+    const parent = createDisplayObject();
+    const child = createDisplayObject();
+    addNodeChild(parent, child);
+
+    const childEl = document.createElement('div');
+    const childData = setupRenderedNode(state, child, childEl);
+
+    prepareScene2DRender(state, parent);
+    renderDomScene2D(state, parent);
+
+    expect(childData.renderer!.submit).toHaveBeenCalled();
+  });
+
+  it('skips draw on fully static nodes after first render', () => {
+    const state = makeState();
+    const obj = createDisplayObject();
+    const el = document.createElement('div');
+    const data = setupRenderedNode(state, obj, el);
+
+    // First render: node is new, draw must be called.
+    renderDomScene2D(state, obj);
+    expect(data.renderer!.submit).toHaveBeenCalledTimes(1);
+
+    // Second render: nothing changed, draw should be skipped.
+    renderDomScene2D(state, obj);
+    expect(data.renderer!.submit).toHaveBeenCalledTimes(1);
+  });
+
+  it('places rendered elements in scene-graph order', () => {
+    const state = makeState();
+    const parent = createDisplayObject();
+    const childA = createDisplayObject();
+    const childB = createDisplayObject();
+    addNodeChild(parent, childA);
+    addNodeChild(parent, childB);
+
+    const elA = document.createElement('div');
+    const elB = document.createElement('span');
+    setupRenderedNode(state, childA, elA);
+    setupRenderedNode(state, childB, elB);
+
+    prepareScene2DRender(state, parent);
+    renderDomScene2D(state, parent);
+
+    const children = Array.from(state.element.children);
+    expect(children.indexOf(elA)).toBeLessThan(children.indexOf(elB));
+  });
+
+  it('reconciles DOM when a child is removed', () => {
+    const state = makeState();
+    const parent = createDisplayObject();
+    const childA = createDisplayObject();
+    const childB = createDisplayObject();
+    addNodeChild(parent, childA);
+    addNodeChild(parent, childB);
+
+    const elA = document.createElement('div');
+    const elB = document.createElement('span');
+    setupRenderedNode(state, childA, elA);
+    const dataB = setupRenderedNode(state, childB, elB);
+
+    prepareScene2DRender(state, parent);
+    renderDomScene2D(state, parent);
+    expect(state.element.children.length).toBe(2);
+
+    dataB.visible = false;
+
+    renderDomScene2D(state, parent);
+
+    expect(state.element.contains(elA)).toBe(true);
+    expect(state.element.contains(elB)).toBe(false);
+  });
+
+  it('applies an inherited rectangle clip to child elements', () => {
+    const state = makeState();
+    enableDomClipSupport(state);
+    const parent = createDisplayObject();
+    setNode2DClip(parent, makeRectangleClip(createRectangle(10, 20, 30, 40)));
+    const child = createDisplayObject();
+    addNodeChild(parent, child);
+
+    prepareScene2DRender(state, parent);
+    const el = document.createElement('div');
+    setupRenderedNode(state, child, el);
+
+    renderDomScene2D(state, parent);
+
+    expect(el.style.clipPath).toBe('polygon(10px 20px, 40px 20px, 40px 60px, 10px 60px)');
+  });
+
+  it('applies a rectangle clip set directly on the clipping node to its content', () => {
+    const state = makeState();
+    enableDomClipSupport(state);
+    const parent = createDisplayObject();
+    setNode2DClip(parent, makeRectangleClip(createRectangle(5, 6, 20, 30)));
+    const content = createDisplayObject();
+    addNodeChild(parent, content);
+
+    const el = document.createElement('div');
+    setupRenderedNode(state, content, el);
+
+    prepareScene2DRender(state, parent);
+    renderDomScene2D(state, parent);
+
+    expect(el.style.clipPath).toBe('polygon(5px 6px, 25px 6px, 25px 36px, 5px 36px)');
+  });
+});

package/src/domReconcile.test.ts

@@ -0,0 +1,158 @@
+import type { DomRenderStateRuntime } from '@flighthq/types';
+
+import { hasDomStructureChanged, processDomNode, reconcileDomContainer, swapDomOrderLists } from './domReconcile';
+import { createDomRenderState, getDomRenderStateRuntime } from './domRenderState';
+
+function makeRuntime(): DomRenderStateRuntime {
+  const container = document.createElement('div');
+  return getDomRenderStateRuntime(createDomRenderState(container));
+}
+
+describe('hasDomStructureChanged', () => {
+  it('returns true when needsReconcile is already set', () => {
+    const runtime = makeRuntime();
+    expect(hasDomStructureChanged(runtime, 0, true)).toBe(true);
+  });
+
+  it('returns true when lengths differ', () => {
+    const runtime = makeRuntime();
+    runtime.domOrderLength = 2;
+    expect(hasDomStructureChanged(runtime, 1, false)).toBe(true);
+  });
+
+  it('returns false when order lists are identical', () => {
+    const runtime = makeRuntime();
+    const node = {} as any;
+    runtime.domOrderLength = 1;
+    runtime.domOrderList[0] = node;
+    runtime.domNextOrderList[0] = node;
+    expect(hasDomStructureChanged(runtime, 1, false)).toBe(false);
+  });
+
+  it('returns true when a node differs at any position', () => {
+    const runtime = makeRuntime();
+    runtime.domOrderLength = 1;
+    runtime.domOrderList[0] = {} as any;
+    runtime.domNextOrderList[0] = {} as any;
+    expect(hasDomStructureChanged(runtime, 1, false)).toBe(true);
+  });
+});
+
+describe('processDomNode', () => {
+  it('calls drawFn and registers the element for a new node', () => {
+    const runtime = makeRuntime();
+    const node = {} as any;
+    const el = document.createElement('div');
+
+    const result = processDomNode(
+      runtime,
+      node,
+      0,
+      () => {
+        runtime.domCurrentElement = el;
+      },
+      0,
+    );
+
+    expect(result.newLength).toBe(1);
+    expect(result.needsReconcile).toBe(true);
+    expect(runtime.domElementMap.get(node)).toBe(el);
+    expect(runtime.domNextOrderList[0]).toBe(node);
+  });
+
+  it('skips drawFn for a known node with no dirty frames', () => {
+    const runtime = makeRuntime();
+    const node = { appearanceFrameId: -1, transformFrameId: -1 } as any;
+    const el = document.createElement('div');
+    runtime.domElementMap.set(node, el);
+
+    let called = false;
+    const result = processDomNode(
+      runtime,
+      node,
+      0,
+      () => {
+        called = true;
+      },
+      0,
+    );
+
+    expect(called).toBe(false);
+    expect(result.needsReconcile).toBe(false);
+    expect(result.newLength).toBe(1);
+  });
+
+  it('sets needsReconcile when the element changes for a known node', () => {
+    const runtime = makeRuntime();
+    const node = { appearanceFrameId: 1, transformFrameId: -1 } as any;
+    const oldEl = document.createElement('div');
+    const newEl = document.createElement('canvas');
+    runtime.domElementMap.set(node, oldEl);
+
+    const result = processDomNode(
+      runtime,
+      node,
+      1,
+      () => {
+        runtime.domCurrentElement = newEl;
+      },
+      0,
+    );
+
+    expect(result.needsReconcile).toBe(true);
+    expect(runtime.domElementMap.get(node)).toBe(newEl);
+  });
+});
+
+describe('reconcileDomContainer', () => {
+  it('removes foreign elements not in the new element set', () => {
+    const runtime = makeRuntime();
+    const container = document.createElement('div');
+    const foreign = document.createElement('span');
+    container.appendChild(foreign);
+
+    reconcileDomContainer(container, runtime, 0);
+
+    expect(container.contains(foreign)).toBe(false);
+  });
+
+  it('places tracked elements in correct order', () => {
+    const runtime = makeRuntime();
+    const container = document.createElement('div');
+    const elA = document.createElement('div');
+    const elB = document.createElement('span');
+    const nodeA = {} as any;
+    const nodeB = {} as any;
+    runtime.domElementMap.set(nodeA, elA);
+    runtime.domElementMap.set(nodeB, elB);
+    runtime.domNextOrderList[0] = nodeA;
+    runtime.domNextOrderList[1] = nodeB;
+
+    reconcileDomContainer(container, runtime, 2);
+
+    const children = Array.from(container.children);
+    expect(children.indexOf(elA)).toBeLessThan(children.indexOf(elB));
+  });
+});
+
+describe('swapDomOrderLists', () => {
+  it('promotes the next list to the current list', () => {
+    const runtime = makeRuntime();
+    const node = {} as any;
+    runtime.domNextOrderList[0] = node;
+
+    swapDomOrderLists(runtime, 1);
+
+    expect(runtime.domOrderList[0]).toBe(node);
+    expect(runtime.domOrderLength).toBe(1);
+  });
+
+  it('recycles the old current list as the next scratch buffer', () => {
+    const runtime = makeRuntime();
+    const prevList = runtime.domOrderList;
+
+    swapDomOrderLists(runtime, 0);
+
+    expect(runtime.domNextOrderList).toBe(prevList);
+  });
+});

package/src/domRenderState.test.ts

@@ -0,0 +1,87 @@
+import { EntityRuntimeKey } from '@flighthq/types';
+
+import { createDomRenderState, createDomRenderStateRuntime, getDomRenderStateRuntime } from './domRenderState';
+
+describe('createDomRenderState', () => {
+  it('returns a state with the provided element', () => {
+    const div = document.createElement('div');
+    const state = createDomRenderState(div);
+    expect(state.element).toBe(div);
+  });
+
+  it('sets position:relative and overflow:hidden on the element', () => {
+    const div = document.createElement('div');
+    createDomRenderState(div);
+    expect(div.style.position).toBe('relative');
+    expect(div.style.overflow).toBe('hidden');
+  });
+
+  it('defaults roundPixels to false', () => {
+    const div = document.createElement('div');
+    const state = createDomRenderState(div);
+    expect(state.roundPixels).toBe(false);
+  });
+
+  it('sets roundPixels from options', () => {
+    const div = document.createElement('div');
+    const state = createDomRenderState(div, { roundPixels: true });
+    expect(state.roundPixels).toBe(true);
+  });
+
+  it('defaults the runtime currentBlendMode to null', () => {
+    const div = document.createElement('div');
+    const state = createDomRenderState(div);
+    expect(getDomRenderStateRuntime(state).currentBlendMode).toBeNull();
+  });
+
+  it('attaches a populated runtime under EntityRuntimeKey', () => {
+    const div = document.createElement('div');
+    const state = createDomRenderState(div);
+    const runtime = getDomRenderStateRuntime(state);
+    expect(runtime.domClipHooks).toBeNull();
+    expect(runtime.domCurrentElement).toBeNull();
+    expect(runtime.domOrderLength).toBe(-1);
+    expect(runtime.domClipStack).toEqual([]);
+    expect(runtime.domOrderList).toEqual([]);
+    expect(runtime.domNextOrderList).toEqual([]);
+  });
+
+  it('defaults backgroundColor to 0', () => {
+    const div = document.createElement('div');
+    const state = createDomRenderState(div);
+    expect(state.backgroundColor).toBe(0);
+  });
+
+  it('sets backgroundColor from options', () => {
+    const div = document.createElement('div');
+    const state = createDomRenderState(div, { backgroundColor: 0xff0000ff });
+    expect(state.backgroundColor).toBe(0xff0000ff);
+  });
+
+  it('sets pixelRatio from options', () => {
+    const div = document.createElement('div');
+    const state = createDomRenderState(div, { pixelRatio: 3 });
+    expect(state.pixelRatio).toBe(3);
+  });
+
+  it('defaults pixelRatio to 1', () => {
+    const div = document.createElement('div');
+    const state = createDomRenderState(div);
+    expect(state.pixelRatio).toBe(1);
+  });
+});
+
+describe('createDomRenderStateRuntime', () => {
+  it('allocates an entity runtime with a null binding', () => {
+    const runtime = createDomRenderStateRuntime();
+    expect(runtime.binding).toBeNull();
+  });
+});
+
+describe('getDomRenderStateRuntime', () => {
+  it('returns the runtime attached under EntityRuntimeKey', () => {
+    const div = document.createElement('div');
+    const state = createDomRenderState(div);
+    expect(getDomRenderStateRuntime(state)).toBe(state[EntityRuntimeKey]);
+  });
+});

package/src/domRenderView.test.ts

@@ -0,0 +1,69 @@
+import { getOrCreateRenderProxy2D, registerRenderer } from '@flighthq/render';
+import { createRenderView } from '@flighthq/scene2d';
+import type { RenderViewRenderer } from '@flighthq/types';
+import { RenderViewKind } from '@flighthq/types';
+
+import { createDomRenderState, getDomRenderStateRuntime } from './domRenderState';
+import { defaultDomRenderViewRenderer, drawDomRenderView } from './domRenderView';
+
+function makeState() {
+  const container = document.createElement('div');
+  const state = createDomRenderState(container);
+  registerRenderer(state, RenderViewKind, defaultDomRenderViewRenderer);
+  return state;
+}
+
+function makeRenderer(width = 100, height = 100): RenderViewRenderer {
+  const canvas = document.createElement('canvas');
+  canvas.style.width = `${width}px`;
+  canvas.style.height = `${height}px`;
+  canvas.width = width;
+  canvas.height = height;
+  return { canvas, render: () => {} };
+}
+
+function getElement(state: ReturnType<typeof makeState>, drawFn: () => void): HTMLElement | null {
+  getDomRenderStateRuntime(state).domCurrentElement = null;
+  drawFn();
+  return getDomRenderStateRuntime(state).domCurrentElement;
+}
+
+describe('drawDomRenderView', () => {
+  it('returns no element when renderer is null', () => {
+    const state = makeState();
+    const view = createRenderView();
+    const renderProxy = getOrCreateRenderProxy2D(state, view);
+    const el = getElement(state, () => drawDomRenderView(state, renderProxy));
+    expect(el).toBeNull();
+  });
+
+  it('calls render() on the renderer', () => {
+    const state = makeState();
+    const renderer = makeRenderer();
+    const renderSpy = vi.spyOn(renderer, 'render');
+    const view = createRenderView({ data: { renderer, width: 100, height: 100 } });
+    const renderProxy = getOrCreateRenderProxy2D(state, view);
+    drawDomRenderView(state, renderProxy);
+    expect(renderSpy).toHaveBeenCalledOnce();
+  });
+
+  it('returns the renderer canvas as the DOM element', () => {
+    const state = makeState();
+    const renderer = makeRenderer();
+    const view = createRenderView({ data: { renderer, width: 100, height: 100 } });
+    const renderProxy = getOrCreateRenderProxy2D(state, view);
+    const el = getElement(state, () => drawDomRenderView(state, renderProxy));
+    expect(el).toBe(renderer.canvas);
+  });
+
+  it('initializes canvas positioning on first draw', () => {
+    const state = makeState();
+    const renderer = makeRenderer();
+    const view = createRenderView({ data: { renderer, width: 100, height: 100 } });
+    const renderProxy = getOrCreateRenderProxy2D(state, view);
+    drawDomRenderView(state, renderProxy);
+    expect(renderer.canvas.style.position).toBe('absolute');
+    expect(renderer.canvas.style.transformOrigin).toBe('0 0');
+    expect(renderer.canvas.style.pointerEvents).toBe('none');
+  });
+});