@flighthq/displayobject-dom 0.1.0

package/dist/domTextInput.js

@@ -0,0 +1,60 @@
+import { computeRgbHexString } from '@flighthq/materials';
+import { getRichTextRuntime } from '@flighthq/text';
+import { getTextInputCaretRectangle, getTextInputSelectionBeginIndex, getTextInputSelectionEndIndex, getTextInputSelectionRectangles, getTextInputState, } from '@flighthq/textinput';
+import { getRichTextScrollYOffset } from '@flighthq/textlayout';
+import { registerDomTextInputOverlay } from './domRichText';
+let _keyframesInjected = false;
+// Appends the editable-field overlay (selection highlight + blinking caret) into the field div of a
+// RichText whose input slot is present. Invoked by the DOM RichText renderer after the field.
+export function drawDomTextInputOverlay(_state, renderProxy) {
+    if (!_keyframesInjected) {
+        injectCaretBlinkKeyframes();
+        _keyframesInjected = true;
+    }
+    const source = renderProxy.source;
+    const input = getTextInputState(source);
+    if (input === null)
+        return;
+    const layout = getRichTextRuntime(source).textLayout;
+    const data = renderProxy.rendererData;
+    if ((!input.focused && !input.alwaysShowSelection) || layout === null || data?.div == null)
+        return;
+    const firstVisibleLine = source.data.scrollV - 1;
+    const scrollYOffset = firstVisibleLine > 0 ? getRichTextScrollYOffset(layout.lineHeights, firstVisibleLine) : 0;
+    const scrollXOffset = source.data.scrollH;
+    const selColor = computeRgbHexString(input.selectionColor);
+    const selAlpha = input.selectionAlpha;
+    let html = '';
+    getTextInputSelectionRectangles(selectionRectangles, source, layout);
+    for (const rect of selectionRectangles) {
+        html += `<div data-input-overlay style="position:absolute;left:${rect.x - scrollXOffset}px;top:${rect.y - scrollYOffset}px;width:${rect.width}px;height:${rect.height}px;background:${selColor};opacity:${selAlpha};pointer-events:none;"></div>`;
+    }
+    if (input.focused && getTextInputSelectionBeginIndex(source) === getTextInputSelectionEndIndex(source)) {
+        getTextInputCaretRectangle(caretRectangle, source, layout);
+        html += `<div data-input-overlay style="position:absolute;left:${caretRectangle.x - scrollXOffset}px;top:${caretRectangle.y - scrollYOffset}px;width:${input.caretWidth}px;height:${caretRectangle.height}px;background:${computeRgbHexString(input.caretColor)};animation:flight-caret-blink 1s step-end infinite;pointer-events:none;"></div>`;
+    }
+    for (const el of data.div.querySelectorAll('[data-input-overlay]'))
+        el.remove();
+    if (html.length > 0) {
+        data.div.insertAdjacentHTML('beforeend', html);
+    }
+}
+// Installs the caret/selection overlay onto the DOM RichText renderer. Importing this opts an app into
+// text-input rendering; a static RichText leaves the slot null and pulls none of this module.
+export function enableDomTextInput() {
+    registerDomTextInputOverlay(drawDomTextInputOverlay);
+}
+function injectCaretBlinkKeyframes() {
+    if (typeof document === 'undefined')
+        return;
+    const id = 'flight-caret-blink-style';
+    if (document.getElementById(id))
+        return;
+    const style = document.createElement('style');
+    style.id = id;
+    style.textContent = '@keyframes flight-caret-blink{0%,100%{opacity:1}50%{opacity:0}}';
+    document.head.appendChild(style);
+}
+const caretRectangle = { height: 0, lineIndex: 0, width: 0, x: 0, y: 0 };
+const selectionRectangles = [];
+//# sourceMappingURL=domTextInput.js.map

package/dist/domTextInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"domTextInput.js","sourceRoot":"","sources":["../src/domTextInput.ts"],"names":[],"mappings":"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"}

package/dist/domTextLabel.d.ts

@@ -0,0 +1,4 @@
+import type { DisplayObjectRenderer, DomRenderState, RenderProxy2D } from '@flighthq/types';
+export declare function drawDomTextLabel(state: DomRenderState, renderProxy: RenderProxy2D): void;
+export declare const defaultDomTextLabelRenderer: DisplayObjectRenderer;
+//# sourceMappingURL=domTextLabel.d.ts.map

package/dist/domTextLabel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"domTextLabel.d.ts","sourceRoot":"","sources":["../src/domTextLabel.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EACV,qBAAqB,EACrB,cAAc,EAGd,aAAa,EAKd,MAAM,iBAAiB,CAAC;AAsBzB,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,aAAa,GAAG,IAAI,CAyDxF;AAED,eAAO,MAAM,2BAA2B,EAAE,qBAGzC,CAAC"}

package/dist/domTextLabel.js

@@ -0,0 +1,74 @@
+import { createEntity } from '@flighthq/entity';
+import { computeRgbHexString } from '@flighthq/materials';
+import { computeTextFormatFontString } from '@flighthq/text';
+import { getTextLabelRuntime } from '@flighthq/text';
+import { computeTextLayout, createTextFormatRange, getTextLayoutResult } from '@flighthq/textlayout';
+import { applyDomStyle, prepareDomElement, setDomRendererElement } from './domStyle';
+import { escapeDomHtmlString } from './domTextHelpers';
+function createDomTextData(_state, _source) {
+    return createEntity({ div: null });
+}
+let _measureCtx = null;
+function getMeasureCtx() {
+    if (_measureCtx === null) {
+        _measureCtx = document.createElement('canvas').getContext('2d');
+    }
+    return _measureCtx;
+}
+export function drawDomTextLabel(state, renderProxy) {
+    const data = renderProxy.rendererData;
+    if (data === null)
+        return;
+    const source = renderProxy.source;
+    const { text, textFormat } = source.data;
+    if (text.length === 0)
+        return;
+    const ctx = getMeasureCtx();
+    if (ctx === null)
+        return;
+    if (data.div === null) {
+        data.div = document.createElement('div');
+        prepareDomElement(data.div);
+        data.div.style.overflow = 'hidden';
+    }
+    const measure = (t, format) => {
+        ctx.font = computeTextFormatFontString(format);
+        return ctx.measureText(t).width;
+    };
+    const result = getTextLayoutResult(getTextLabelRuntime(source));
+    computeTextLayout(result, {
+        text,
+        formatRanges: [createTextFormatRange(textFormat, 0, text.length)],
+        width: source.data.width,
+        height: source.data.height,
+        measure,
+    });
+    let divWidth = 0;
+    for (const group of result.groups) {
+        const right = group.offsetX + group.width;
+        if (right > divWidth)
+            divWidth = right;
+    }
+    data.div.style.width = `${divWidth}px`;
+    data.div.style.height = `${result.textHeight}px`;
+    let html = '';
+    for (const group of result.groups) {
+        const fmt = group.format;
+        const slice = escapeDomHtmlString(text.substring(group.startIndex, group.endIndex));
+        const x = group.offsetX;
+        const y = group.offsetY;
+        let style = `position:absolute;left:${x}px;top:${y}px;font:${computeTextFormatFontString(fmt)};`;
+        style += `color:${computeRgbHexString(fmt.color ?? 0)};white-space:nowrap;`;
+        if (fmt.underline)
+            style += 'text-decoration:underline;';
+        html += `<div style="${style}">${slice}</div>`;
+    }
+    data.div.innerHTML = html;
+    applyDomStyle(state, data.div, renderProxy);
+    setDomRendererElement(state, data.div);
+}
+export const defaultDomTextLabelRenderer = {
+    createData: createDomTextData,
+    submit: drawDomTextLabel,
+};
+//# sourceMappingURL=domTextLabel.js.map

package/dist/domTextLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"domTextLabel.js","sourceRoot":"","sources":["../src/domTextLabel.ts"],"names":[],"mappings":"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"}

package/dist/domTransform.d.ts

@@ -0,0 +1,4 @@
+import type { Matrix } from '@flighthq/types';
+export declare function setDomTransform(element: HTMLElement, transform: Readonly<Matrix>, roundPixels: boolean): void;
+export declare function setDomTransformWithOffset(element: HTMLElement, transform: Readonly<Matrix>, offsetX: number, offsetY: number, roundPixels: boolean): void;
+//# sourceMappingURL=domTransform.d.ts.map

package/dist/domTransform.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"domTransform.d.ts","sourceRoot":"","sources":["../src/domTransform.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAE9C,wBAAgB,eAAe,CAAC,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,CAAC,MAAM,CAAC,EAAE,WAAW,EAAE,OAAO,GAAG,IAAI,CAI7G;AAED,wBAAgB,yBAAyB,CACvC,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,QAAQ,CAAC,MAAM,CAAC,EAC3B,OAAO,EAAE,MAAM,EACf,OAAO,EAAE,MAAM,EACf,WAAW,EAAE,OAAO,GACnB,IAAI,CASN"}

package/dist/domTransform.js

@@ -0,0 +1,16 @@
+export function setDomTransform(element, transform, roundPixels) {
+    const tx = roundPixels ? Math.fround(transform.tx) : transform.tx;
+    const ty = roundPixels ? Math.fround(transform.ty) : transform.ty;
+    element.style.transform = `matrix(${transform.a},${transform.b},${transform.c},${transform.d},${tx},${ty})`;
+}
+export function setDomTransformWithOffset(element, transform, offsetX, offsetY, roundPixels) {
+    const { a, b, c, d } = transform;
+    let tx = a * offsetX + c * offsetY + transform.tx;
+    let ty = b * offsetX + d * offsetY + transform.ty;
+    if (roundPixels) {
+        tx = Math.fround(tx);
+        ty = Math.fround(ty);
+    }
+    element.style.transform = `matrix(${a},${b},${c},${d},${tx},${ty})`;
+}
+//# sourceMappingURL=domTransform.js.map

package/dist/domTransform.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"domTransform.js","sourceRoot":"","sources":["../src/domTransform.ts"],"names":[],"mappings":"AAEA,MAAM,UAAU,eAAe,CAAC,OAAoB,EAAE,SAA2B,EAAE,WAAoB;IACrG,MAAM,EAAE,GAAG,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,EAAE,CAAC;IAClE,MAAM,EAAE,GAAG,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,EAAE,CAAC;IAClE,OAAO,CAAC,KAAK,CAAC,SAAS,GAAG,UAAU,SAAS,CAAC,CAAC,IAAI,SAAS,CAAC,CAAC,IAAI,SAAS,CAAC,CAAC,IAAI,SAAS,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,GAAG,CAAC;AAC9G,CAAC;AAED,MAAM,UAAU,yBAAyB,CACvC,OAAoB,EACpB,SAA2B,EAC3B,OAAe,EACf,OAAe,EACf,WAAoB;IAEpB,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,SAAS,CAAC;IACjC,IAAI,EAAE,GAAG,CAAC,GAAG,OAAO,GAAG,CAAC,GAAG,OAAO,GAAG,SAAS,CAAC,EAAE,CAAC;IAClD,IAAI,EAAE,GAAG,CAAC,GAAG,OAAO,GAAG,CAAC,GAAG,OAAO,GAAG,SAAS,CAAC,EAAE,CAAC;IAClD,IAAI,WAAW,EAAE,CAAC;QAChB,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;QACrB,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;IACvB,CAAC;IACD,OAAO,CAAC,KAAK,CAAC,SAAS,GAAG,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,GAAG,CAAC;AACtE,CAAC"}

package/dist/domVideo.d.ts

@@ -0,0 +1,4 @@
+import type { DisplayObjectRenderer, DomRenderState, RenderProxy2D } from '@flighthq/types';
+export declare function drawDomVideo(state: DomRenderState, renderProxy: RenderProxy2D): void;
+export declare const defaultDomVideoRenderer: DisplayObjectRenderer;
+//# sourceMappingURL=domVideo.d.ts.map

package/dist/domVideo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"domVideo.d.ts","sourceRoot":"","sources":["../src/domVideo.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,qBAAqB,EACrB,cAAc,EAGd,aAAa,EAGd,MAAM,iBAAiB,CAAC;AAYzB,wBAAgB,YAAY,CAAC,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,aAAa,GAAG,IAAI,CAkBpF;AAED,eAAO,MAAM,uBAAuB,EAAE,qBAGrC,CAAC"}

package/dist/domVideo.js

@@ -0,0 +1,27 @@
+import { createEntity } from '@flighthq/entity';
+import { applyDomStyle, prepareDomElement, setDomRendererElement } from './domStyle';
+function createDomVideoData(_state, _source) {
+    return createEntity({ element: null });
+}
+export function drawDomVideo(state, renderProxy) {
+    const data = renderProxy.rendererData;
+    if (data === null)
+        return;
+    const source = renderProxy.source;
+    const element = source.data.source?.element ?? null;
+    if (element === null || element.videoWidth === 0 || element.videoHeight === 0)
+        return;
+    if (data.element !== element) {
+        data.element = element;
+        prepareDomElement(element);
+    }
+    element.style.width = `${element.videoWidth}px`;
+    element.style.height = `${element.videoHeight}px`;
+    applyDomStyle(state, element, renderProxy);
+    setDomRendererElement(state, element);
+}
+export const defaultDomVideoRenderer = {
+    createData: createDomVideoData,
+    submit: drawDomVideo,
+};
+//# sourceMappingURL=domVideo.js.map

package/dist/domVideo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"domVideo.js","sourceRoot":"","sources":["../src/domVideo.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAWhD,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAMrF,SAAS,kBAAkB,CAAC,MAAmB,EAAE,OAAmB;IAClE,OAAO,YAAY,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;AACzC,CAAC;AAED,MAAM,UAAU,YAAY,CAAC,KAAqB,EAAE,WAA0B;IAC5E,MAAM,IAAI,GAAG,WAAW,CAAC,YAAmC,CAAC;IAC7D,IAAI,IAAI,KAAK,IAAI;QAAE,OAAO;IAE1B,MAAM,MAAM,GAAG,WAAW,CAAC,MAAe,CAAC;IAC3C,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,MAAM,EAAE,OAAO,IAAI,IAAI,CAAC;IACpD,IAAI,OAAO,KAAK,IAAI,IAAI,OAAO,CAAC,UAAU,KAAK,CAAC,IAAI,OAAO,CAAC,WAAW,KAAK,CAAC;QAAE,OAAO;IAEtF,IAAI,IAAI,CAAC,OAAO,KAAK,OAAO,EAAE,CAAC;QAC7B,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;QACvB,iBAAiB,CAAC,OAAO,CAAC,CAAC;IAC7B,CAAC;IAED,OAAO,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,OAAO,CAAC,UAAU,IAAI,CAAC;IAChD,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,OAAO,CAAC,WAAW,IAAI,CAAC;IAElD,aAAa,CAAC,KAAK,EAAE,OAAO,EAAE,WAAW,CAAC,CAAC;IAC3C,qBAAqB,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;AACxC,CAAC;AAED,MAAM,CAAC,MAAM,uBAAuB,GAA0B;IAC5D,UAAU,EAAE,kBAAkB;IAC9B,MAAM,EAAE,YAAY;CACrB,CAAC"}

package/dist/htmlView.d.ts

@@ -0,0 +1,4 @@
+import type { DisplayObjectRenderer, DomRenderState, RenderProxy2D } from '@flighthq/types';
+export declare function drawDomHtmlView(state: DomRenderState, renderProxy: RenderProxy2D): void;
+export declare const defaultHtmlViewRenderer: DisplayObjectRenderer;
+//# sourceMappingURL=htmlView.d.ts.map

package/dist/htmlView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"htmlView.d.ts","sourceRoot":"","sources":["../src/htmlView.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,qBAAqB,EAAE,cAAc,EAAY,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAKtG,wBAAgB,eAAe,CAAC,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,aAAa,GAAG,IAAI,CAqBvF;AAED,eAAO,MAAM,uBAAuB,EAAE,qBAGrC,CAAC"}

package/dist/htmlView.js

@@ -0,0 +1,28 @@
+import { noopRendererData } from '@flighthq/render';
+import { setDomRendererElement } from './domStyle';
+import { setDomTransform } from './domTransform';
+export function drawDomHtmlView(state, renderProxy) {
+    const source = renderProxy.source;
+    const data = source.data;
+    const element = data.element;
+    if (element === null)
+        return;
+    if (element.style.position !== 'absolute') {
+        element.style.left = '0';
+        element.style.overflow = 'hidden';
+        element.style.position = 'absolute';
+        element.style.top = '0';
+        element.style.transformOrigin = '0 0';
+    }
+    element.style.width = `${data.width}px`;
+    element.style.height = `${data.height}px`;
+    setDomTransform(element, renderProxy.transform2D, state.roundPixels);
+    element.style.opacity = renderProxy.alpha < 1 ? String(renderProxy.alpha) : '';
+    state.applyBlendMode?.(element, renderProxy.blendMode);
+    setDomRendererElement(state, element);
+}
+export const defaultHtmlViewRenderer = {
+    createData: noopRendererData,
+    submit: drawDomHtmlView,
+};
+//# sourceMappingURL=htmlView.js.map

package/dist/htmlView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"htmlView.js","sourceRoot":"","sources":["../src/htmlView.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAGpD,OAAO,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;AACnD,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAEjD,MAAM,UAAU,eAAe,CAAC,KAAqB,EAAE,WAA0B;IAC/E,MAAM,MAAM,GAAG,WAAW,CAAC,MAAkB,CAAC;IAC9C,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC;IACzB,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;IAC7B,IAAI,OAAO,KAAK,IAAI;QAAE,OAAO;IAE7B,IAAI,OAAO,CAAC,KAAK,CAAC,QAAQ,KAAK,UAAU,EAAE,CAAC;QAC1C,OAAO,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,CAAC;QACzB,OAAO,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;QAClC,OAAO,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAC;QACpC,OAAO,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,CAAC;QACxB,OAAO,CAAC,KAAK,CAAC,eAAe,GAAG,KAAK,CAAC;IACxC,CAAC;IAED,OAAO,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,IAAI,CAAC,KAAK,IAAI,CAAC;IACxC,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,IAAI,CAAC,MAAM,IAAI,CAAC;IAC1C,eAAe,CAAC,OAAO,EAAE,WAAW,CAAC,WAAW,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC;IACrE,OAAO,CAAC,KAAK,CAAC,OAAO,GAAG,WAAW,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAC/E,KAAK,CAAC,cAAc,EAAE,CAAC,OAAO,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IAEvD,qBAAqB,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;AACxC,CAAC;AAED,MAAM,CAAC,MAAM,uBAAuB,GAA0B;IAC5D,UAAU,EAAE,gBAAgB;IAC5B,MAAM,EAAE,eAAe;CACxB,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,24 @@
+export * from './domBackground';
+export * from './domBitmap';
+export * from './domCache';
+export * from './domClip';
+export * from './domClipRectangle';
+export * from './domCSSFilterBinding';
+export * from './domDisplayObject';
+export { invalidateDomFontResource } from './domFontSource';
+export * from './domMaterials';
+export * from './domNativeText';
+export * from './domRenderState';
+export * from './domRenderView';
+export * from './domRichText';
+export * from './domScale9Shape';
+export * from './domShape';
+export * from './domStyle';
+export * from './domSvgFilter';
+export { escapeDomHtmlString } from './domTextHelpers';
+export * from './domTextInput';
+export * from './domTextLabel';
+export * from './domTransform';
+export * from './domVideo';
+export * from './htmlView';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,OAAO,EAAE,yBAAyB,EAAE,MAAM,iBAAiB,CAAC;AAC5D,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AACvD,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC"}

package/dist/index.js

@@ -0,0 +1,24 @@
+export * from './domBackground';
+export * from './domBitmap';
+export * from './domCache';
+export * from './domClip';
+export * from './domClipRectangle';
+export * from './domCSSFilterBinding';
+export * from './domDisplayObject';
+export { invalidateDomFontResource } from './domFontSource';
+export * from './domMaterials';
+export * from './domNativeText';
+export * from './domRenderState';
+export * from './domRenderView';
+export * from './domRichText';
+export * from './domScale9Shape';
+export * from './domShape';
+export * from './domStyle';
+export * from './domSvgFilter';
+export { escapeDomHtmlString } from './domTextHelpers';
+export * from './domTextInput';
+export * from './domTextLabel';
+export * from './domTransform';
+export * from './domVideo';
+export * from './htmlView';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,OAAO,EAAE,yBAAyB,EAAE,MAAM,iBAAiB,CAAC;AAC5D,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AACvD,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC"}

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@flighthq/displayobject-dom",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src/**/*.test.ts",
+    "!dist/**/*.test.js",
+    "!dist/**/*.test.d.ts",
+    "!dist/**/*.test.js.map",
+    "!dist/**/*.test.d.ts.map"
+  ],
+  "scripts": {
+    "build": "tsc -b",
+    "clean": "tsc -b --clean",
+    "test": "vitest run --config vitest.config.ts",
+    "test:watch": "vitest --watch --config vitest.config.ts",
+    "prepack": "npm run clean && npm run clean:dist && npm run build",
+    "clean:dist": "tsx ../../scripts/clean-package-dist.ts"
+  },
+  "dependencies": {
+    "@flighthq/displayobject": "0.1.0",
+    "@flighthq/entity": "0.1.0",
+    "@flighthq/geometry": "0.1.0",
+    "@flighthq/materials": "0.1.0",
+    "@flighthq/node": "0.1.0",
+    "@flighthq/render": "0.1.0",
+    "@flighthq/displayobject-canvas": "0.1.0",
+    "@flighthq/shape": "0.1.0",
+    "@flighthq/text": "0.1.0",
+    "@flighthq/textinput": "0.1.0",
+    "@flighthq/textlayout": "0.1.0",
+    "@flighthq/types": "0.1.0"
+  },
+  "devDependencies": {
+    "@flighthq/image": "*",
+    "typescript": "^5.3.0"
+  },
+  "description": "DOM renderer implementation",
+  "sideEffects": false
+}

package/src/domBackground.test.ts

@@ -0,0 +1,35 @@
+import { setRenderStateBackgroundColor } from '@flighthq/render';
+
+import { renderDomBackground } from './domBackground';
+import { createDomRenderState } from './domRenderState';
+
+function makeState() {
+  const div = document.createElement('div');
+  return { div, state: createDomRenderState(div) };
+}
+
+describe('renderDomBackground', () => {
+  it('sets element backgroundColor when background alpha is non-zero', () => {
+    const { div, state } = makeState();
+    setRenderStateBackgroundColor(state, 0xff0000ff); // opaque red
+
+    renderDomBackground(state);
+
+    expect(div.style.backgroundColor).not.toBe('');
+  });
+
+  it('clears element backgroundColor when background alpha is 0', () => {
+    const { div, state } = makeState();
+    div.style.backgroundColor = 'red';
+    setRenderStateBackgroundColor(state, 0xff000000); // alpha = 0
+
+    renderDomBackground(state);
+
+    expect(div.style.backgroundColor).toBe('');
+  });
+
+  it('does not throw when called with default (transparent) background', () => {
+    const { state } = makeState();
+    expect(() => renderDomBackground(state)).not.toThrow();
+  });
+});

package/src/domBitmap.test.ts

@@ -0,0 +1,117 @@
+import { createBitmap } from '@flighthq/displayobject';
+import { createImageResource, createImageResourceFromCanvas } from '@flighthq/image';
+import { registerRenderer } from '@flighthq/render';
+import { getOrCreateRenderProxy2D } from '@flighthq/render';
+import { BitmapKind } from '@flighthq/types';
+
+import { defaultDomBitmapRenderer, drawDomBitmap } from './domBitmap';
+import { createDomRenderState, getDomRenderStateRuntime } from './domRenderState';
+
+function makeState(pixelRatio = 1) {
+  const container = document.createElement('div');
+  const state = createDomRenderState(container, { pixelRatio });
+  registerRenderer(state, BitmapKind, defaultDomBitmapRenderer);
+  return state;
+}
+
+function drawGetEl(state: ReturnType<typeof makeState>, drawFn: () => void): HTMLElement | null {
+  getDomRenderStateRuntime(state).domCurrentElement = null;
+  drawFn();
+  return getDomRenderStateRuntime(state).domCurrentElement;
+}
+
+function makeHtmlImageSource() {
+  const img = document.createElement('img') as HTMLImageElement;
+  img.src = 'test.png';
+  const source = createImageResource(img);
+  source.width = 64;
+  source.height = 64;
+  return source;
+}
+
+function makeCanvasImageSource() {
+  const canvas = document.createElement('canvas');
+  canvas.width = 64;
+  canvas.height = 64;
+  return createImageResourceFromCanvas(canvas);
+}
+
+describe('defaultDomBitmapRenderer', () => {
+  it('has submit, and createData', () => {
+    expect(typeof defaultDomBitmapRenderer.submit).toBe('function');
+    expect(typeof defaultDomBitmapRenderer.createData).toBe('function');
+  });
+});
+
+describe('drawDomBitmap', () => {
+  it('does nothing when imageSource is null', () => {
+    const state = makeState();
+    const bitmap = createBitmap();
+    bitmap.data.image = null;
+    const renderProxy = getOrCreateRenderProxy2D(state, bitmap);
+
+    const el = drawGetEl(state, () => drawDomBitmap(state, renderProxy));
+
+    expect(el).toBeNull();
+  });
+
+  it('produces an img element when source is HTMLImageElement', () => {
+    const state = makeState();
+    const bitmap = createBitmap();
+    bitmap.data.image = makeHtmlImageSource();
+    const renderProxy = getOrCreateRenderProxy2D(state, bitmap);
+
+    const el = drawGetEl(state, () => drawDomBitmap(state, renderProxy));
+
+    expect(el).not.toBeNull();
+    expect(el!.tagName).toBe('IMG');
+  });
+
+  it('produces a canvas element when source is not HTMLImageElement', () => {
+    const state = makeState();
+    const bitmap = createBitmap();
+    bitmap.data.image = makeCanvasImageSource();
+    const renderProxy = getOrCreateRenderProxy2D(state, bitmap);
+
+    const el = drawGetEl(state, () => drawDomBitmap(state, renderProxy));
+
+    expect(el).not.toBeNull();
+    expect(el!.tagName).toBe('CANVAS');
+  });
+
+  it('reuses the same img element across multiple draws', () => {
+    const state = makeState();
+    const bitmap = createBitmap();
+    bitmap.data.image = makeHtmlImageSource();
+    const renderProxy = getOrCreateRenderProxy2D(state, bitmap);
+
+    const firstImg = drawGetEl(state, () => drawDomBitmap(state, renderProxy));
+    const secondImg = drawGetEl(state, () => drawDomBitmap(state, renderProxy));
+
+    expect(firstImg).toBe(secondImg);
+  });
+
+  it('sets canvas dimensions to match image source', () => {
+    const state = makeState();
+    const bitmap = createBitmap();
+    bitmap.data.image = makeCanvasImageSource();
+    const renderProxy = getOrCreateRenderProxy2D(state, bitmap);
+
+    const canvas = drawGetEl(state, () => drawDomBitmap(state, renderProxy)) as HTMLCanvasElement;
+    expect(canvas.width).toBe(64);
+    expect(canvas.height).toBe(64);
+  });
+
+  it('sizes the backing canvas at physical pixels and constrains layout to logical pixels on HiDPI', () => {
+    const state = makeState(2);
+    const bitmap = createBitmap();
+    bitmap.data.image = makeCanvasImageSource();
+    const renderProxy = getOrCreateRenderProxy2D(state, bitmap);
+
+    const canvas = drawGetEl(state, () => drawDomBitmap(state, renderProxy)) as HTMLCanvasElement;
+    expect(canvas.width).toBe(128);
+    expect(canvas.height).toBe(128);
+    expect(canvas.style.width).toBe('64px');
+    expect(canvas.style.height).toBe('64px');
+  });
+});

package/src/domCSSFilterBinding.test.ts

@@ -0,0 +1,104 @@
+import { getOrCreateRenderProxy2D } from '@flighthq/render';
+import type { BitmapFilter, DisplayObject } from '@flighthq/types';
+
+import {
+  enableDomCssFilterSupport,
+  getDomCssFilter,
+  hasDomCssFilterEquivalent,
+  setDomCssFilter,
+} from './domCSSFilterBinding';
+import { createDomRenderState } from './domRenderState';
+
+function makeState() {
+  return createDomRenderState(document.createElement('div'));
+}
+
+describe('enableDomCssFilterSupport', () => {
+  it('installs the CSS filter resolver', () => {
+    const state = makeState();
+    expect(state.domCssFilterResolver).toBeNull();
+    enableDomCssFilterSupport(state);
+    expect(state.domCssFilterResolver).toBe(getDomCssFilter);
+  });
+});
+
+describe('getDomCssFilter', () => {
+  it('returns the filter bound to a render node', () => {
+    const state = makeState();
+    const node = {} as DisplayObject;
+    setDomCssFilter(state, node, 'blur(4px)');
+    const renderProxy = getOrCreateRenderProxy2D(state, node);
+    expect(getDomCssFilter(renderProxy)).toBe('blur(4px)');
+  });
+
+  it('returns undefined for a render node with no binding', () => {
+    const state = makeState();
+    const renderProxy = getOrCreateRenderProxy2D(state, {} as DisplayObject);
+    expect(getDomCssFilter(renderProxy)).toBeUndefined();
+  });
+});
+
+describe('hasDomCssFilterEquivalent', () => {
+  it('returns true for BlurFilter', () => {
+    const filter = { kind: 'BlurFilter' } as BitmapFilter;
+    expect(hasDomCssFilterEquivalent(filter)).toBe(true);
+  });
+
+  it('returns true for DropShadowFilter', () => {
+    const filter = { kind: 'DropShadowFilter' } as BitmapFilter;
+    expect(hasDomCssFilterEquivalent(filter)).toBe(true);
+  });
+
+  it('returns true for OuterGlowFilter (approximated as drop-shadow with 0 offset)', () => {
+    const filter = { kind: 'OuterGlowFilter' } as BitmapFilter;
+    expect(hasDomCssFilterEquivalent(filter)).toBe(true);
+  });
+
+  it('returns false for ConvolutionFilter', () => {
+    const filter = { kind: 'ConvolutionFilter' } as BitmapFilter;
+    expect(hasDomCssFilterEquivalent(filter)).toBe(false);
+  });
+
+  it('returns false for DisplacementMapFilter', () => {
+    const filter = { kind: 'DisplacementMapFilter' } as BitmapFilter;
+    expect(hasDomCssFilterEquivalent(filter)).toBe(false);
+  });
+
+  it('returns false for ColorMatrixFilter (use getDomSvgColorMatrixFilter for SVG-filter path)', () => {
+    const filter = { kind: 'ColorMatrixFilter' } as BitmapFilter;
+    expect(hasDomCssFilterEquivalent(filter)).toBe(false);
+  });
+
+  it('returns false for an unknown filter kind', () => {
+    const filter = { kind: 'UnknownFilter' } as unknown as BitmapFilter;
+    expect(hasDomCssFilterEquivalent(filter)).toBe(false);
+  });
+});
+
+describe('setDomCssFilter', () => {
+  it('stores a filter keyed by the per-state render node', () => {
+    const state = makeState();
+    const node = {} as DisplayObject;
+    setDomCssFilter(state, node, 'blur(2px)');
+    const renderProxy = getOrCreateRenderProxy2D(state, node);
+    expect(getDomCssFilter(renderProxy)).toBe('blur(2px)');
+  });
+
+  it('clears the binding when passed null', () => {
+    const state = makeState();
+    const node = {} as DisplayObject;
+    setDomCssFilter(state, node, 'blur(2px)');
+    setDomCssFilter(state, node, null);
+    const renderProxy = getOrCreateRenderProxy2D(state, node);
+    expect(getDomCssFilter(renderProxy)).toBeUndefined();
+  });
+
+  it('does not leak a binding across render states', () => {
+    const a = makeState();
+    const b = makeState();
+    const node = {} as DisplayObject;
+    setDomCssFilter(a, node, 'blur(2px)');
+    expect(getDomCssFilter(getOrCreateRenderProxy2D(b, node))).toBeUndefined();
+    expect(getDomCssFilter(getOrCreateRenderProxy2D(a, node))).toBe('blur(2px)');
+  });
+});