@flighthq/displayobject 0.1.0

package/src/displayContainer.test.ts

@@ -0,0 +1,37 @@
+import type { DisplayContainer } from '@flighthq/types';
+import { DisplayObjectKind } from '@flighthq/types';
+
+import { createDisplayContainer, createDisplayContainerRuntime, getDisplayContainerRuntime } from './displayContainer';
+
+describe('createDisplayContainer', () => {
+  let displayContainer: DisplayContainer;
+
+  beforeEach(() => {
+    displayContainer = createDisplayContainer();
+  });
+
+  it('initializes default values', () => {
+    expect(displayContainer.kind).toStrictEqual(DisplayObjectKind);
+  });
+
+  it('returns a new object for better hidden-class performance', () => {
+    const base = {};
+    const obj = createDisplayContainer(base);
+    expect(obj).not.toStrictEqual(base);
+  });
+});
+
+describe('createDisplayContainerRuntime', () => {
+  it('returns a non-null runtime', () => {
+    const runtime = createDisplayContainerRuntime();
+    expect(runtime).not.toBeNull();
+  });
+});
+
+describe('getDisplayContainerRuntime', () => {
+  it('returns the runtime for a DisplayContainer', () => {
+    const container = createDisplayContainer();
+    const runtime = getDisplayContainerRuntime(container);
+    expect(runtime).not.toBeNull();
+  });
+});

package/src/displayObject.test.ts

@@ -0,0 +1,174 @@
+import { getEntityRuntime } from '@flighthq/entity';
+import type {
+  BoundsNode,
+  DisplayObject,
+  DisplayObjectData,
+  DisplayObjectRuntime,
+  PartialNode,
+  Rectangle,
+} from '@flighthq/types';
+import { BlendMode, DisplayObjectKind, DisplayObjectTraitsKey } from '@flighthq/types';
+
+import {
+  createDisplayObject,
+  createDisplayObjectGeneric,
+  createDisplayObjectRuntime,
+  getDisplayObjectRuntime,
+  isDisplayObject,
+  setDisplayObjectClip,
+} from './displayObject';
+
+function getRuntime_(obj: DisplayObject): DisplayObjectRuntime {
+  return getEntityRuntime(obj) as DisplayObjectRuntime;
+}
+
+describe('createDisplayObject', () => {
+  let displayObject: DisplayObject;
+
+  beforeEach(() => {
+    displayObject = createDisplayObject();
+  });
+
+  it('initializes default values', () => {
+    expect(displayObject.alpha).toBe(1);
+    expect(displayObject.blendMode).toBeNull();
+    expect(displayObject.name).toBeNull();
+    expect(displayObject.visible).toBe(true);
+    expect(displayObject.kind).toBe(DisplayObjectKind);
+  });
+
+  it('allows pre-defined values', () => {
+    const base = {
+      alpha: 2,
+      blendMode: BlendMode.Darken,
+      name: 'foo',
+      rotation: 45,
+      scaleX: 2,
+      scaleY: 3,
+      visible: false,
+      x: 100,
+      y: 200,
+    };
+    const obj = createDisplayObject(base);
+    expect(obj.alpha).toStrictEqual(base.alpha);
+    expect(obj.blendMode).toStrictEqual(base.blendMode);
+    expect(obj.name).toStrictEqual(base.name);
+    expect(obj.rotation).toStrictEqual(base.rotation);
+    expect(obj.scaleX).toStrictEqual(base.scaleX);
+    expect(obj.scaleY).toStrictEqual(base.scaleY);
+    expect(obj.visible).toStrictEqual(base.visible);
+    expect(obj.x).toStrictEqual(base.x);
+    expect(obj.y).toStrictEqual(base.y);
+  });
+
+  it('returns a new object for better hidden-class performance', () => {
+    const base = {};
+    const obj = createDisplayObject(base);
+    expect(obj).not.toStrictEqual(base);
+  });
+});
+
+describe('createDisplayObjectGeneric', () => {
+  it('allows creation of a type without a data field', () => {
+    const displayObject = createDisplayObjectGeneric(DisplayObjectKind);
+    expect(displayObject).not.toBeNull();
+  });
+
+  it('allows a custom type', () => {
+    const data: PartialNode<DisplayObjectTest> = {
+      x: 100,
+    };
+    const displayObject = createDisplayObjectGeneric(DisplayObjectKind, data);
+    expect(displayObject.x).toBe(data.x);
+  });
+
+  it('returns a new object', () => {
+    const data: PartialNode<DisplayObjectTest> = {};
+    const displayObject = createDisplayObjectGeneric(DisplayObjectKind, data);
+    expect(displayObject).not.toStrictEqual(data);
+  });
+
+  it('allows use of a data initializer', () => {
+    const data: PartialNode<DisplayObjectTest> = {};
+    const displayObject = createDisplayObjectGeneric(DisplayObjectKind, data, createDisplayObjectTestData);
+    expect((displayObject.data as DisplayObjectTestData).foo).toBe('bar');
+  });
+});
+
+describe('createDisplayObjectRuntime', () => {
+  it('returns a graph runtime object', () => {
+    const runtime = createDisplayObjectRuntime();
+    expect(runtime).not.toBeNull();
+  });
+
+  it('sets traits to DisplayObjectTraitsKey', () => {
+    const runtime = createDisplayObjectRuntime();
+    expect(runtime.traits).toBe(DisplayObjectTraitsKey);
+  });
+
+  it('allows a custom bounds calculation', () => {
+    const func = (_out: Rectangle, _source: Readonly<BoundsNode<any>>) => {};
+    const runtime = createDisplayObjectRuntime({ computeLocalBoundsRectangle: func });
+    expect(runtime.computeLocalBoundsRectangle).toStrictEqual(func);
+  });
+});
+
+describe('getDisplayObjectRuntime', () => {
+  it('returns the runtime for a DisplayObject', () => {
+    const obj = createDisplayObject();
+    const runtime = getDisplayObjectRuntime(obj);
+    expect(runtime).not.toBeNull();
+  });
+});
+
+describe('isDisplayObject', () => {
+  it('returns true for display objects', () => {
+    expect(isDisplayObject(createDisplayObject())).toBe(true);
+  });
+});
+
+describe('setDisplayObjectClip', () => {
+  let obj: DisplayObject;
+  beforeEach(() => {
+    obj = createDisplayObject();
+  });
+
+  it('sets clip', () => {
+    const clip = {
+      contours: null,
+      rect: { x: 0, y: 0, width: 100, height: 50 } as Rectangle,
+      winding: 'nonZero' as const,
+      version: 0,
+    };
+    setDisplayObjectClip(obj, clip);
+    expect(obj.clip).toBe(clip);
+  });
+
+  it('accepts null', () => {
+    setDisplayObjectClip(obj, null);
+    expect(obj.clip).toBeNull();
+  });
+
+  it('invalidates appearance', () => {
+    const idBefore = getRuntime_(obj).appearanceId;
+    setDisplayObjectClip(obj, {
+      contours: null,
+      rect: { x: 0, y: 0, width: 10, height: 10 } as Rectangle,
+      winding: 'nonZero',
+      version: 0,
+    });
+    expect(getRuntime_(obj).appearanceId).not.toBe(idBefore);
+  });
+});
+
+interface DisplayObjectTest extends DisplayObject {}
+
+interface DisplayObjectTestData extends DisplayObjectData {
+  foo: string;
+}
+
+function createDisplayObjectTestData(data?: Partial<DisplayObjectTestData>): DisplayObjectTestData {
+  return {
+    foo: data?.foo ?? 'bar',
+  };
+}

package/src/htmlView.test.ts

@@ -0,0 +1,111 @@
+import { createRectangle } from '@flighthq/geometry';
+import type { HtmlView, Node } from '@flighthq/types';
+import { HtmlViewKind } from '@flighthq/types';
+
+import {
+  computeHtmlViewLocalBoundsRectangle,
+  createHtmlView,
+  createHtmlViewData,
+  createHtmlViewRuntime,
+  getHtmlViewRuntime,
+  setHtmlViewSize,
+} from './htmlView';
+
+describe('computeHtmlViewLocalBoundsRectangle', () => {
+  it('sets out dimensions from data width and height', () => {
+    const htmlView = createHtmlView({ data: { width: 320, height: 240 } });
+    const out = createRectangle();
+    computeHtmlViewLocalBoundsRectangle(out, htmlView as unknown as Node);
+    expect(out.width).toBe(320);
+    expect(out.height).toBe(240);
+  });
+});
+
+describe('createHtmlView', () => {
+  let htmlView: HtmlView;
+
+  beforeEach(() => {
+    htmlView = createHtmlView();
+  });
+
+  it('initializes default values', () => {
+    expect(htmlView.data.element).toBeNull();
+    expect(htmlView.data.width).toBe(100);
+    expect(htmlView.data.height).toBe(100);
+    expect(htmlView.kind).toStrictEqual(HtmlViewKind);
+  });
+
+  it('allows pre-defined values', () => {
+    const element = {} as HTMLImageElement;
+    const base = {
+      data: {
+        element: element,
+        width: 640,
+        height: 480,
+      },
+    };
+    const obj = createHtmlView(base);
+    expect(obj.data.element).toStrictEqual(element);
+    expect(obj.data.width).toBe(640);
+    expect(obj.data.height).toBe(480);
+  });
+
+  it('returns a new object for better hidden-class performance', () => {
+    const base = {};
+    const obj = createHtmlView(base);
+    expect(obj).not.toStrictEqual(base);
+  });
+});
+
+describe('createHtmlViewData', () => {
+  it('returns default values', () => {
+    const data = createHtmlViewData();
+    expect(data.element).toBeNull();
+    expect(data.width).toBe(100);
+    expect(data.height).toBe(100);
+  });
+
+  it('allows pre-defined values', () => {
+    const element = {} as HTMLImageElement;
+    const data = createHtmlViewData({ element, width: 200, height: 150 });
+    expect(data.element).toBe(element);
+    expect(data.width).toBe(200);
+    expect(data.height).toBe(150);
+  });
+});
+
+describe('createHtmlViewRuntime', () => {
+  it('returns a non-null runtime', () => {
+    const runtime = createHtmlViewRuntime();
+    expect(runtime).not.toBeNull();
+  });
+
+  it('uses computeHtmlViewLocalBoundsRectangle', () => {
+    const runtime = createHtmlViewRuntime();
+    expect(runtime.computeLocalBoundsRectangle).toStrictEqual(computeHtmlViewLocalBoundsRectangle);
+  });
+});
+
+describe('getHtmlViewRuntime', () => {
+  it('returns the runtime for an HtmlView', () => {
+    const htmlView = createHtmlView();
+    const runtime = getHtmlViewRuntime(htmlView);
+    expect(runtime).not.toBeNull();
+  });
+});
+
+describe('setHtmlViewSize', () => {
+  it('updates width and height', () => {
+    const htmlView = createHtmlView();
+    setHtmlViewSize(htmlView, 320, 240);
+    expect(htmlView.data.width).toBe(320);
+    expect(htmlView.data.height).toBe(240);
+  });
+
+  it('is a no-op when dimensions are unchanged', () => {
+    const htmlView = createHtmlView({ data: { width: 200, height: 150 } });
+    setHtmlViewSize(htmlView, 200, 150);
+    expect(htmlView.data.width).toBe(200);
+    expect(htmlView.data.height).toBe(150);
+  });
+});

package/src/renderView.test.ts

@@ -0,0 +1,104 @@
+import { createRectangle } from '@flighthq/geometry';
+import type { Node, RenderView, RenderViewRenderer } from '@flighthq/types';
+import { RenderViewKind } from '@flighthq/types';
+
+import {
+  computeRenderViewLocalBoundsRectangle,
+  createRenderView,
+  createRenderViewData,
+  createRenderViewRuntime,
+  getRenderViewRuntime,
+  setRenderViewSize,
+} from './renderView';
+
+function makeRenderer(): RenderViewRenderer {
+  const canvas = document.createElement('canvas');
+  canvas.width = 100;
+  canvas.height = 100;
+  return { canvas, render: () => {} };
+}
+
+describe('computeRenderViewLocalBoundsRectangle', () => {
+  it('writes width and height from data', () => {
+    const view = createRenderView({ data: { width: 400, height: 300 } });
+    const out = createRectangle(0, 0, 0, 0);
+    computeRenderViewLocalBoundsRectangle(out, view as unknown as Node);
+    expect(out.width).toBe(400);
+    expect(out.height).toBe(300);
+  });
+});
+
+describe('createRenderView', () => {
+  let view: RenderView;
+
+  beforeEach(() => {
+    view = createRenderView();
+  });
+
+  it('initializes default values', () => {
+    expect(view.data.renderer).toBeNull();
+    expect(view.data.width).toBe(0);
+    expect(view.data.height).toBe(0);
+    expect(view.kind).toStrictEqual(RenderViewKind);
+  });
+
+  it('allows pre-defined values', () => {
+    const renderer = makeRenderer();
+    const obj = createRenderView({ data: { renderer, width: 320, height: 240 } });
+    expect(obj.data.renderer).toStrictEqual(renderer);
+    expect(obj.data.width).toBe(320);
+    expect(obj.data.height).toBe(240);
+  });
+
+  it('returns a new object for better hidden-class performance', () => {
+    const base = {};
+    const obj = createRenderView(base);
+    expect(obj).not.toStrictEqual(base);
+  });
+});
+
+describe('createRenderViewData', () => {
+  it('returns default values', () => {
+    const data = createRenderViewData();
+    expect(data.renderer).toBeNull();
+    expect(data.width).toBe(0);
+    expect(data.height).toBe(0);
+  });
+
+  it('allows pre-defined values', () => {
+    const renderer = makeRenderer();
+    const data = createRenderViewData({ renderer, width: 800, height: 600 });
+    expect(data.renderer).toStrictEqual(renderer);
+    expect(data.width).toBe(800);
+    expect(data.height).toBe(600);
+  });
+});
+
+describe('createRenderViewRuntime', () => {
+  it('returns a non-null runtime', () => {
+    expect(createRenderViewRuntime()).not.toBeNull();
+  });
+});
+
+describe('getRenderViewRuntime', () => {
+  it('returns the runtime for a RenderView', () => {
+    const view = createRenderView();
+    expect(getRenderViewRuntime(view)).not.toBeNull();
+  });
+});
+
+describe('setRenderViewSize', () => {
+  it('updates width and height', () => {
+    const view = createRenderView();
+    setRenderViewSize(view, 640, 480);
+    expect(view.data.width).toBe(640);
+    expect(view.data.height).toBe(480);
+  });
+
+  it('is a no-op when size is unchanged', () => {
+    const view = createRenderView({ data: { width: 100, height: 100 } });
+    const before = view.data.width;
+    setRenderViewSize(view, 100, 100);
+    expect(view.data.width).toBe(before);
+  });
+});

package/src/stage.test.ts

@@ -0,0 +1,211 @@
+import { createRectangle } from '@flighthq/geometry';
+import { addNodeChild } from '@flighthq/node';
+import { connectSignal } from '@flighthq/signals';
+import type { Node, PartialNode, Stage } from '@flighthq/types';
+import { StageKind } from '@flighthq/types';
+
+import { createDisplayObject } from './displayObject';
+import {
+  computeStageLocalBoundsRectangle,
+  createStage,
+  createStageData,
+  createStageRuntime,
+  createStageSignals,
+  enableStageSignals,
+  getDisplayObjectStage,
+  getStageRuntime,
+  getStageSignals,
+  setStageSize,
+} from './stage';
+
+describe('computeStageLocalBoundsRectangle', () => {
+  it('sets out dimensions from stageWidth and stageHeight', () => {
+    const stage = createStage({ data: { stageWidth: 800, stageHeight: 600 } });
+    const out = createRectangle();
+    computeStageLocalBoundsRectangle(out, stage as unknown as Node);
+    expect(out.width).toBe(800);
+    expect(out.height).toBe(600);
+  });
+});
+
+describe('createStage', () => {
+  let stage: Stage;
+
+  beforeEach(() => {
+    stage = createStage();
+  });
+
+  it('initializes default values', () => {
+    expect(stage.data.color).toBe(null);
+    expect(stage.data.stageHeight).toBe(550);
+    expect(stage.data.stageWidth).toBe(400);
+    expect(stage.kind).toStrictEqual(StageKind);
+  });
+
+  it('allows pre-defined values', () => {
+    const base: PartialNode<Stage> = {
+      data: {
+        color: 0xff0000ff,
+        stageHeight: 1000,
+        stageWidth: 2000,
+      },
+    };
+    const obj = createStage(base);
+    const data = base.data!;
+    expect(obj.data.color).toStrictEqual(data.color);
+    expect(obj.data.stageHeight).toStrictEqual(data.stageHeight);
+    expect(obj.data.stageWidth).toStrictEqual(data.stageWidth);
+  });
+
+  it('returns a new object for better hidden-class performance', () => {
+    const base = {};
+    const obj = createStage(base);
+    expect(obj).not.toStrictEqual(base);
+  });
+});
+
+describe('createStageData', () => {
+  it('returns default values', () => {
+    const data = createStageData();
+    expect(data.stageWidth).toBe(400);
+    expect(data.stageHeight).toBe(550);
+    expect(data.color).toBe(null);
+  });
+
+  it('allows pre-defined values', () => {
+    const data = createStageData({ stageWidth: 1920, stageHeight: 1080 });
+    expect(data.stageWidth).toBe(1920);
+    expect(data.stageHeight).toBe(1080);
+  });
+});
+
+describe('createStageRuntime', () => {
+  it('returns a non-null runtime', () => {
+    const runtime = createStageRuntime();
+    expect(runtime).not.toBeNull();
+  });
+
+  it('uses computeStageLocalBoundsRectangle', () => {
+    const runtime = createStageRuntime();
+    expect(runtime.computeLocalBoundsRectangle).toStrictEqual(computeStageLocalBoundsRectangle);
+  });
+});
+
+describe('createStageSignals', () => {
+  it('returns an object with all signal properties', () => {
+    const signals = createStageSignals();
+    expect(signals.onResize).toBeDefined();
+    expect(signals.onFullscreenChanged).toBeDefined();
+    expect(signals.onOrientationChanged).toBeDefined();
+  });
+});
+
+describe('enableStageSignals', () => {
+  it('creates and returns signals on first call', () => {
+    const stage = createStage();
+    const signals = enableStageSignals(stage);
+    expect(signals).toBeDefined();
+    expect(signals.onResize).toBeDefined();
+  });
+
+  it('returns the same object on subsequent calls', () => {
+    const stage = createStage();
+    expect(enableStageSignals(stage)).toBe(enableStageSignals(stage));
+  });
+
+  it('makes getStageSignals return the enabled object', () => {
+    const stage = createStage();
+    const signals = enableStageSignals(stage);
+    expect(getStageSignals(stage)).toBe(signals);
+  });
+});
+
+describe('getDisplayObjectStage', () => {
+  it('returns null when the node has no parent', () => {
+    const obj = createDisplayObject();
+    expect(getDisplayObjectStage(obj)).toBeNull();
+  });
+
+  it('returns null when the root is not a Stage', () => {
+    const root = createDisplayObject();
+    const child = createDisplayObject();
+    addNodeChild(root, child);
+    expect(getDisplayObjectStage(child)).toBeNull();
+  });
+
+  it('returns the Stage when it is the root', () => {
+    const stage = createStage();
+    const child = createDisplayObject();
+    addNodeChild(stage, child);
+    expect(getDisplayObjectStage(child)).toBe(stage);
+  });
+
+  it('returns the Stage from a deeply nested node', () => {
+    const stage = createStage();
+    const mid = createDisplayObject();
+    const leaf = createDisplayObject();
+    addNodeChild(stage, mid);
+    addNodeChild(mid, leaf);
+    expect(getDisplayObjectStage(leaf)).toBe(stage);
+  });
+});
+
+describe('getStageRuntime', () => {
+  it('returns the runtime for a Stage', () => {
+    const stage = createStage();
+    const runtime = getStageRuntime(stage);
+    expect(runtime).not.toBeNull();
+  });
+
+  it('initializes stageSignals to null', () => {
+    const runtime = createStageRuntime();
+    expect(runtime.stageSignals).toBeNull();
+  });
+});
+
+describe('getStageSignals', () => {
+  it('returns null before signals are enabled', () => {
+    const stage = createStage();
+    expect(getStageSignals(stage)).toBeNull();
+  });
+
+  it('returns the signals after enableStageSignals', () => {
+    const stage = createStage();
+    const signals = enableStageSignals(stage);
+    expect(getStageSignals(stage)).toBe(signals);
+  });
+});
+
+describe('setStageSize', () => {
+  it('updates stageWidth and stageHeight', () => {
+    const stage = createStage();
+    setStageSize(stage, 1920, 1080);
+    expect(stage.data.stageWidth).toBe(1920);
+    expect(stage.data.stageHeight).toBe(1080);
+  });
+
+  it('emits onResize when dimensions change', () => {
+    const stage = createStage();
+    let called = false;
+    connectSignal(enableStageSignals(stage).onResize, () => {
+      called = true;
+    });
+    setStageSize(stage, 1280, 720);
+    expect(called).toBe(true);
+  });
+
+  it('does not emit onResize when dimensions are unchanged', () => {
+    const stage = createStage({ data: { stageWidth: 400, stageHeight: 300 } });
+    let called = false;
+    connectSignal(enableStageSignals(stage).onResize, () => {
+      called = true;
+    });
+    setStageSize(stage, 400, 300);
+    expect(called).toBe(false);
+  });
+
+  it('does not emit onResize when no one has subscribed', () => {
+    const stage = createStage();
+    expect(() => setStageSize(stage, 1280, 720)).not.toThrow();
+  });
+});