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

package/dist/canvasTextInput.js

@@ -0,0 +1,67 @@
+import { computeRgbHexString } from '@flighthq/color';
+import { getRichTextRuntime } from '@flighthq/text';
+import { getTextInputCaretRectangle, getTextInputSelectionBeginIndex, getTextInputSelectionEndIndex, getTextInputSelectionRectangles, getTextInputState, } from '@flighthq/textinput';
+import { computeTextBoundsHeight, computeTextBoundsWidth, getRichTextScrollYOffset } from '@flighthq/textlayout';
+import { registerCanvasTextInputOverlay } from './canvasRichText';
+import { setCanvasTransform } from './canvasTransform';
+// Draws the editable-field overlay (selection highlight + blinking caret) over a RichText whose input
+// slot is present. Invoked by the Canvas RichText renderer after the field, keyed off the input slot.
+export function drawCanvasTextInputOverlay(state, renderProxy) {
+    const source = renderProxy.source;
+    const input = getTextInputState(source);
+    if (input === null)
+        return;
+    const layout = getRichTextRuntime(source).textLayout;
+    if ((!input.focused && !input.alwaysShowSelection) || layout === null)
+        return;
+    const fieldW = computeTextBoundsWidth(source.data, layout);
+    const fieldH = computeTextBoundsHeight(source.data, layout);
+    const firstVisibleLine = source.data.scrollV - 1;
+    const scrollYOffset = firstVisibleLine > 0 ? getRichTextScrollYOffset(layout.lineHeights, firstVisibleLine) : 0;
+    const scrollXOffset = source.data.scrollH;
+    const context = state.context;
+    context.save();
+    setCanvasTransform(state, context, renderProxy.transform2D);
+    context.beginPath();
+    context.rect(0, 0, fieldW, fieldH);
+    context.clip();
+    getTextInputSelectionRectangles(selectionRectangles, source, layout);
+    if (selectionRectangles.length > 0) {
+        context.fillStyle = computeRgbHexString(input.selectionColor);
+        context.globalAlpha = Math.min(1, renderProxy.alpha * input.selectionAlpha);
+        for (const rect of selectionRectangles) {
+            context.fillRect(rect.x - scrollXOffset, rect.y - scrollYOffset, rect.width, rect.height);
+        }
+    }
+    if (input.focused && getTextInputSelectionBeginIndex(source) === getTextInputSelectionEndIndex(source)) {
+        if (getCaretVisible(source, input.focused)) {
+            getTextInputCaretRectangle(caretRectangle, source, layout);
+            context.fillStyle = CARET_COLOR;
+            context.globalAlpha = renderProxy.alpha;
+            context.fillRect(caretRectangle.x - scrollXOffset, caretRectangle.y - scrollYOffset, CARET_WIDTH, caretRectangle.height);
+        }
+    }
+    context.restore();
+}
+// Installs the caret/selection overlay onto the Canvas RichText renderer. Importing this is what opts an
+// app into text-input rendering; a RichText that never enables input draws nothing extra and the
+// renderer stays free of this module's text-input dependency.
+export function enableCanvasTextInput() {
+    registerCanvasTextInputOverlay(drawCanvasTextInputOverlay);
+}
+const CARET_BLINK_MS = 530;
+const CARET_COLOR = '#000000';
+const _blinkStart = new WeakMap();
+const _prevFocused = new WeakMap();
+function getCaretVisible(source, focused) {
+    const wasFocused = _prevFocused.get(source) ?? false;
+    if (!wasFocused && focused)
+        _blinkStart.set(source, performance.now());
+    _prevFocused.set(source, focused);
+    const elapsed = performance.now() - (_blinkStart.get(source) ?? performance.now());
+    return elapsed % (CARET_BLINK_MS * 2) < CARET_BLINK_MS;
+}
+const CARET_WIDTH = 1;
+const caretRectangle = { height: 0, lineIndex: 0, width: 0, x: 0, y: 0 };
+const selectionRectangles = [];
+//# sourceMappingURL=canvasTextInput.js.map

package/dist/canvasTextInput.js.map

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

package/dist/canvasTextLabel.d.ts

@@ -0,0 +1,4 @@
+import type { CanvasRenderState, Scene2DRenderer, RenderProxy2D } from '@flighthq/types';
+export declare function drawCanvasTextLabel(state: CanvasRenderState, renderProxy: RenderProxy2D): void;
+export declare const defaultCanvasTextLabelRenderer: Scene2DRenderer;
+//# sourceMappingURL=canvasTextLabel.d.ts.map

package/dist/canvasTextLabel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvasTextLabel.d.ts","sourceRoot":"","sources":["../src/canvasTextLabel.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EACV,iBAAiB,EACjB,eAAe,EACf,aAAa,EAId,MAAM,iBAAiB,CAAC;AAKzB,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,aAAa,GAAG,IAAI,CAkD9F;AAED,eAAO,MAAM,8BAA8B,EAAE,eAG5C,CAAC"}

package/dist/canvasTextLabel.js

@@ -0,0 +1,56 @@
+import { computeRgbHexString } from '@flighthq/color';
+import { noopRendererData } from '@flighthq/render';
+import { computeTextFormatFontString, getTextLabelRuntime } from '@flighthq/text';
+import { computeTextLayout, createTextFormatRange, getTextLayoutResult } from '@flighthq/textlayout';
+import { drawCanvasScene2D } from './canvasNode2D';
+import { setCanvasTransform } from './canvasTransform';
+export function drawCanvasTextLabel(state, renderProxy) {
+    drawCanvasScene2D(state, renderProxy);
+    const source = renderProxy.source;
+    const { text, textFormat } = source.data;
+    if (text.length === 0)
+        return;
+    const context = state.context;
+    state.applyBlendMode?.(state, renderProxy.blendMode);
+    context.globalAlpha = renderProxy.alpha;
+    setCanvasTransform(state, context, renderProxy.transform2D);
+    const measure = (t, format) => {
+        context.font = computeTextFormatFontString(format);
+        return context.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,
+        verticalAlign: source.data.autoSize === 'none' ? source.data.verticalAlign : 'top',
+    });
+    context.textBaseline = 'alphabetic';
+    context.textAlign = 'start';
+    for (const group of result.groups) {
+        context.font = computeTextFormatFontString(group.format);
+        context.fillStyle = computeRgbHexString(group.format.color ?? 0);
+        const slice = text.substring(group.startIndex, group.endIndex);
+        const x = group.offsetX;
+        // group.ascent = font-size; CSS places the alphabetic baseline at ~80% of the em-size.
+        // Subtract 20% so the canvas baseline aligns with the DOM renderer's natural baseline.
+        const y = group.offsetY + group.ascent * 0.815;
+        context.fillText(slice, x, y);
+        if (group.format.underline) {
+            const lineY = y + group.descent;
+            context.strokeStyle = computeRgbHexString(group.format.color ?? 0);
+            context.lineWidth = Math.max(1, (group.format.size ?? 12) / 16);
+            context.beginPath();
+            context.moveTo(x, lineY);
+            context.lineTo(x + group.width, lineY);
+            context.stroke();
+        }
+    }
+}
+export const defaultCanvasTextLabelRenderer = {
+    createData: noopRendererData,
+    submit: drawCanvasTextLabel,
+};
+//# sourceMappingURL=canvasTextLabel.js.map

package/dist/canvasTextLabel.js.map

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

package/dist/canvasTextMeasure.d.ts

@@ -0,0 +1,3 @@
+import type { TextMeasureFunction } from '@flighthq/types';
+export declare function createCanvasTextMeasure(): TextMeasureFunction;
+//# sourceMappingURL=canvasTextMeasure.d.ts.map

package/dist/canvasTextMeasure.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvasTextMeasure.d.ts","sourceRoot":"","sources":["../src/canvasTextMeasure.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAc,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAOvE,wBAAgB,uBAAuB,IAAI,mBAAmB,CAO7D"}

package/dist/canvasTextMeasure.js

@@ -0,0 +1,15 @@
+import { computeTextFormatFontString } from '@flighthq/text';
+// Builds a TextMeasureFunction backed by a private offscreen 2D canvas — the measurement battery for
+// setTextLayoutMeasureProvider. Register it once during setup
+// (setTextLayoutMeasureProvider(createCanvasTextMeasure())) so ensureRichTextLayout can measure text
+// for metrics and autoSize bounds outside the render pass. Same canvas measureText the renderers use,
+// so the ensured layout matches what gets rasterized.
+export function createCanvasTextMeasure() {
+    const canvas = document.createElement('canvas');
+    const context = canvas.getContext('2d');
+    return (text, format) => {
+        context.font = computeTextFormatFontString(format);
+        return context.measureText(text).width;
+    };
+}
+//# sourceMappingURL=canvasTextMeasure.js.map

package/dist/canvasTextMeasure.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvasTextMeasure.js","sourceRoot":"","sources":["../src/canvasTextMeasure.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,2BAA2B,EAAE,MAAM,gBAAgB,CAAC;AAG7D,qGAAqG;AACrG,8DAA8D;AAC9D,qGAAqG;AACrG,sGAAsG;AACtG,sDAAsD;AACtD,MAAM,UAAU,uBAAuB;IACrC,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IAChD,MAAM,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,IAAI,CAAE,CAAC;IACzC,OAAO,CAAC,IAAY,EAAE,MAAkB,EAAU,EAAE;QAClD,OAAO,CAAC,IAAI,GAAG,2BAA2B,CAAC,MAAM,CAAC,CAAC;QACnD,OAAO,OAAO,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC;IACzC,CAAC,CAAC;AACJ,CAAC"}

package/dist/canvasTilemap.d.ts

@@ -0,0 +1,4 @@
+import type { CanvasRenderState, RenderProxy2D, SpriteRenderer } from '@flighthq/types';
+export declare function drawCanvasTilemap(state: CanvasRenderState, tilemapNode: RenderProxy2D): void;
+export declare const defaultCanvasTilemapRenderer: SpriteRenderer;
+//# sourceMappingURL=canvasTilemap.d.ts.map

package/dist/canvasTilemap.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvasTilemap.d.ts","sourceRoot":"","sources":["../src/canvasTilemap.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,aAAa,EAAE,cAAc,EAAW,MAAM,iBAAiB,CAAC;AAIjG,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,aAAa,GAAG,IAAI,CAwD5F;AAED,eAAO,MAAM,4BAA4B,EAAE,cAG1C,CAAC"}

package/dist/canvasTilemap.js

@@ -0,0 +1,50 @@
+import { noopRendererData } from '@flighthq/render';
+import { applyCanvasMaterial } from './canvasMaterialRegistry';
+export function drawCanvasTilemap(state, tilemapNode) {
+    const source = tilemapNode.source;
+    const { tileset, columns, rows, tiles } = source.data;
+    if (tileset === null)
+        return;
+    const atlas = tileset.atlas;
+    if (atlas === null || atlas.image === null || atlas.image.source === null)
+        return;
+    if (columns === 0 || rows === 0)
+        return;
+    state.applyBlendMode?.(state, tilemapNode.blendMode);
+    const context = state.context;
+    const image = atlas.image.source;
+    const regions = atlas.regions;
+    const numRegions = regions.length;
+    const transform = tilemapNode.transform2D;
+    const roundPixels = state.roundPixels;
+    const { tileWidth, tileHeight } = tileset;
+    context.globalAlpha = tilemapNode.alpha;
+    if (!state.allowSmoothing)
+        context.imageSmoothingEnabled = false;
+    const restoreMaterial = applyCanvasMaterial(state, tilemapNode.material);
+    // Apply the node's world transform once — tile positions are local offsets within it.
+    context.setTransform(transform.a, transform.b, transform.c, transform.d, transform.tx, transform.ty);
+    for (let row = 0; row < rows; row++) {
+        for (let col = 0; col < columns; col++) {
+            const id = tiles[row * columns + col];
+            if (id < 0 || id >= numRegions)
+                continue;
+            const region = regions[id];
+            if (region.width <= 0 || region.height <= 0)
+                continue;
+            const dx = col * tileWidth;
+            const dy = row * tileHeight;
+            context.drawImage(image, region.x, region.y, region.width, region.height, roundPixels ? dx | 0 : dx, roundPixels ? dy | 0 : dy, region.width, region.height);
+        }
+    }
+    if (restoreMaterial)
+        context.restore();
+    context.setTransform(1, 0, 0, 1, 0, 0);
+    if (!state.allowSmoothing)
+        context.imageSmoothingEnabled = true;
+}
+export const defaultCanvasTilemapRenderer = {
+    createData: noopRendererData,
+    submit: drawCanvasTilemap,
+};
+//# sourceMappingURL=canvasTilemap.js.map

package/dist/canvasTilemap.js.map

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

package/dist/canvasTransform.d.ts

@@ -0,0 +1,3 @@
+import type { CanvasRenderState, Matrix } from '@flighthq/types';
+export declare function setCanvasTransform(state: CanvasRenderState, context: CanvasRenderingContext2D, transform: Readonly<Matrix>): void;
+//# sourceMappingURL=canvasTransform.d.ts.map

package/dist/canvasTransform.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvasTransform.d.ts","sourceRoot":"","sources":["../src/canvasTransform.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEjE,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,iBAAiB,EACxB,OAAO,EAAE,wBAAwB,EACjC,SAAS,EAAE,QAAQ,CAAC,MAAM,CAAC,GAC1B,IAAI,CAaN"}

package/dist/canvasTransform.js

@@ -0,0 +1,9 @@
+export function setCanvasTransform(state, context, transform) {
+    if (state.roundPixels) {
+        context.setTransform(transform.a, transform.b, transform.c, transform.d, Math.fround(transform.tx), Math.fround(transform.ty));
+    }
+    else {
+        context.setTransform(transform.a, transform.b, transform.c, transform.d, transform.tx, transform.ty);
+    }
+}
+//# sourceMappingURL=canvasTransform.js.map

package/dist/canvasTransform.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvasTransform.js","sourceRoot":"","sources":["../src/canvasTransform.ts"],"names":[],"mappings":"AAEA,MAAM,UAAU,kBAAkB,CAChC,KAAwB,EACxB,OAAiC,EACjC,SAA2B;IAE3B,IAAI,KAAK,CAAC,WAAW,EAAE,CAAC;QACtB,OAAO,CAAC,YAAY,CAClB,SAAS,CAAC,CAAC,EACX,SAAS,CAAC,CAAC,EACX,SAAS,CAAC,CAAC,EACX,SAAS,CAAC,CAAC,EACX,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,CAAC,EACzB,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,CAAC,CAC1B,CAAC;IACJ,CAAC;SAAM,CAAC;QACN,OAAO,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC,EAAE,SAAS,CAAC,EAAE,EAAE,SAAS,CAAC,EAAE,CAAC,CAAC;IACvG,CAAC;AACH,CAAC"}

package/dist/canvasVideo.d.ts

@@ -0,0 +1,4 @@
+import type { CanvasRenderState, Scene2DRenderer, RenderProxy2D } from '@flighthq/types';
+export declare function drawCanvasVideo(state: CanvasRenderState, renderProxy: RenderProxy2D): void;
+export declare const defaultCanvasVideoRenderer: Scene2DRenderer;
+//# sourceMappingURL=canvasVideo.d.ts.map

package/dist/canvasVideo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvasVideo.d.ts","sourceRoot":"","sources":["../src/canvasVideo.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,eAAe,EAAE,aAAa,EAAS,MAAM,iBAAiB,CAAC;AAKhG,wBAAgB,eAAe,CAAC,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,aAAa,GAAG,IAAI,CAiB1F;AAED,eAAO,MAAM,0BAA0B,EAAE,eAGxC,CAAC"}

package/dist/canvasVideo.js

@@ -0,0 +1,26 @@
+import { noopRendererData } from '@flighthq/render';
+import { drawCanvasScene2D } from './canvasNode2D';
+import { setCanvasTransform } from './canvasTransform';
+export function drawCanvasVideo(state, renderProxy) {
+    drawCanvasScene2D(state, renderProxy);
+    const source = renderProxy.source;
+    const element = source.data.source?.element;
+    if (element !== undefined && element !== null && element.readyState >= 2) {
+        const context = state.context;
+        state.applyBlendMode?.(state, renderProxy.blendMode);
+        context.globalAlpha = renderProxy.alpha;
+        setCanvasTransform(state, context, renderProxy.transform2D);
+        if (!state.allowSmoothing || !source.data.smoothing) {
+            context.imageSmoothingEnabled = false;
+        }
+        context.drawImage(element, 0, 0, element.videoWidth, element.videoHeight);
+        if (!state.allowSmoothing || !source.data.smoothing) {
+            context.imageSmoothingEnabled = true;
+        }
+    }
+}
+export const defaultCanvasVideoRenderer = {
+    createData: noopRendererData,
+    submit: drawCanvasVideo,
+};
+//# sourceMappingURL=canvasVideo.js.map

package/dist/canvasVideo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvasVideo.js","sourceRoot":"","sources":["../src/canvasVideo.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAGpD,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAEvD,MAAM,UAAU,eAAe,CAAC,KAAwB,EAAE,WAA0B;IAClF,iBAAiB,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC;IACtC,MAAM,MAAM,GAAG,WAAW,CAAC,MAAe,CAAC;IAC3C,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,MAAM,EAAE,OAAO,CAAC;IAC5C,IAAI,OAAO,KAAK,SAAS,IAAI,OAAO,KAAK,IAAI,IAAI,OAAO,CAAC,UAAU,IAAI,CAAC,EAAE,CAAC;QACzE,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC;QAC9B,KAAK,CAAC,cAAc,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;QACrD,OAAO,CAAC,WAAW,GAAG,WAAW,CAAC,KAAK,CAAC;QACxC,kBAAkB,CAAC,KAAK,EAAE,OAAO,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;QAC5D,IAAI,CAAC,KAAK,CAAC,cAAc,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC;YACpD,OAAO,CAAC,qBAAqB,GAAG,KAAK,CAAC;QACxC,CAAC;QACD,OAAO,CAAC,SAAS,CAAC,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,OAAO,CAAC,UAAU,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;QAC1E,IAAI,CAAC,KAAK,CAAC,cAAc,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC;YACpD,OAAO,CAAC,qBAAqB,GAAG,IAAI,CAAC;QACvC,CAAC;IACH,CAAC;AACH,CAAC;AAED,MAAM,CAAC,MAAM,0BAA0B,GAAoB;IACzD,UAAU,EAAE,gBAAgB;IAC5B,MAAM,EAAE,eAAe;CACxB,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,31 @@
+export * from './canvasBackground';
+export * from './canvasBitmap';
+export * from './canvasCache';
+export * from './canvasClip';
+export * from './canvasClipRectangle';
+export * from './canvasCSSFilterBinding';
+export * from './canvasNode2D';
+export * from './canvasElement';
+export * from './canvasFillPattern';
+export * from './canvasImageSource';
+export * from './canvasMaterialRegistry';
+export * from './canvasMaterials';
+export * from './canvasParticleEmitter2D';
+export * from './canvasQuadBatch';
+export * from './canvasRegistration';
+export * from './canvasRenderState';
+export * from './canvasRenderTarget';
+export * from './canvasRichText';
+export * from './canvasScale9Mapper';
+export * from './canvasScale9Shape';
+export * from './canvasShape';
+export * from './canvasShapeCommands';
+export * from './canvasShapeRegistry';
+export * from './canvasSprite';
+export * from './canvasTextInput';
+export * from './canvasTextLabel';
+export * from './canvasTextMeasure';
+export * from './canvasTilemap';
+export * from './canvasTransform';
+export * from './canvasVideo';
+//# 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,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,mBAAmB,CAAC;AAClC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,eAAe,CAAC;AAC9B,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC"}

package/dist/index.js

@@ -0,0 +1,31 @@
+export * from './canvasBackground';
+export * from './canvasBitmap';
+export * from './canvasCache';
+export * from './canvasClip';
+export * from './canvasClipRectangle';
+export * from './canvasCSSFilterBinding';
+export * from './canvasNode2D';
+export * from './canvasElement';
+export * from './canvasFillPattern';
+export * from './canvasImageSource';
+export * from './canvasMaterialRegistry';
+export * from './canvasMaterials';
+export * from './canvasParticleEmitter2D';
+export * from './canvasQuadBatch';
+export * from './canvasRegistration';
+export * from './canvasRenderState';
+export * from './canvasRenderTarget';
+export * from './canvasRichText';
+export * from './canvasScale9Mapper';
+export * from './canvasScale9Shape';
+export * from './canvasShape';
+export * from './canvasShapeCommands';
+export * from './canvasShapeRegistry';
+export * from './canvasSprite';
+export * from './canvasTextInput';
+export * from './canvasTextLabel';
+export * from './canvasTextMeasure';
+export * from './canvasTilemap';
+export * from './canvasTransform';
+export * from './canvasVideo';
+//# 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,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,mBAAmB,CAAC;AAClC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,eAAe,CAAC;AAC9B,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC"}

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@flighthq/scene2d-canvas",
+  "version": "0.2.1-next.840.857425c",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/flighthq/flight.git",
+    "directory": "packages/scene2d-canvas"
+  },
+  "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/color": "0.2.1-next.840.857425c",
+    "@flighthq/scene2d": "0.2.1-next.840.857425c",
+    "@flighthq/geometry": "0.2.1-next.840.857425c",
+    "@flighthq/image": "0.2.1-next.840.857425c",
+    "@flighthq/node": "0.2.1-next.840.857425c",
+    "@flighthq/render": "0.2.1-next.840.857425c",
+    "@flighthq/shape": "0.2.1-next.840.857425c",
+    "@flighthq/text": "0.2.1-next.840.857425c",
+    "@flighthq/textinput": "0.2.1-next.840.857425c",
+    "@flighthq/textlayout": "0.2.1-next.840.857425c",
+    "@flighthq/textureatlas": "0.2.1-next.840.857425c",
+    "@flighthq/tileset": "0.2.1-next.840.857425c",
+    "@flighthq/types": "0.2.1-next.840.857425c"
+  },
+  "devDependencies": {
+    "@flighthq/sprite": "*",
+    "typescript": "^5.3.0"
+  },
+  "description": "Canvas 2D renderer implementation",
+  "sideEffects": false
+}

package/src/canvasBackground.test.ts

@@ -0,0 +1,65 @@
+import { setRenderStateBackgroundColor } from '@flighthq/render';
+import type { CanvasRenderState } from '@flighthq/types';
+import { BlendMode } from '@flighthq/types';
+
+import { renderCanvasBackground } from './canvasBackground';
+import { createCanvasRenderState, getCanvasRenderStateRuntime } from './canvasRenderState';
+
+function makeState(): { canvas: HTMLCanvasElement; state: CanvasRenderState } {
+  const canvas = document.createElement('canvas');
+  canvas.width = 200;
+  canvas.height = 100;
+  const state = createCanvasRenderState(canvas);
+  return { canvas, state };
+}
+
+describe('renderCanvasBackground', () => {
+  it('calls clearRect when background alpha is 0', () => {
+    const { state } = makeState();
+    setRenderStateBackgroundColor(state, 0x00000000); // alpha = 0
+    const clearSpy = vi.spyOn(state.context, 'clearRect');
+
+    renderCanvasBackground(state);
+
+    expect(clearSpy).toHaveBeenCalledWith(0, 0, state.canvas.width, state.canvas.height);
+  });
+
+  it('calls fillRect when background has non-zero alpha', () => {
+    const { state } = makeState();
+    setRenderStateBackgroundColor(state, 0xff0000ff); // alpha = 0xff
+    const fillSpy = vi.spyOn(state.context, 'fillRect');
+
+    renderCanvasBackground(state);
+
+    expect(fillSpy).toHaveBeenCalledWith(0, 0, state.canvas.width, state.canvas.height);
+  });
+
+  it('resets transform to identity before drawing', () => {
+    const { state } = makeState();
+    const setTransformSpy = vi.spyOn(state.context, 'setTransform');
+
+    renderCanvasBackground(state);
+
+    expect(setTransformSpy).toHaveBeenCalledWith(1, 0, 0, 1, 0, 0);
+  });
+
+  it('sets globalAlpha to 1 before drawing', () => {
+    const { state } = makeState();
+    state.context.globalAlpha = 0.5;
+
+    renderCanvasBackground(state);
+
+    expect(state.context.globalAlpha).toBe(1);
+  });
+
+  it('resets to normal compositing directly, without using the blend-mode map', () => {
+    const { state } = makeState();
+    getCanvasRenderStateRuntime(state).currentBlendMode = BlendMode.Multiply;
+    state.context.globalCompositeOperation = 'multiply';
+
+    renderCanvasBackground(state);
+
+    expect(getCanvasRenderStateRuntime(state).currentBlendMode).toBe(BlendMode.Normal);
+    expect(state.context.globalCompositeOperation).toBe('source-over');
+  });
+});

package/src/canvasBitmap.test.ts

@@ -0,0 +1,92 @@
+import { createRectangle } from '@flighthq/geometry';
+import { createImageResource } from '@flighthq/image';
+import { registerRenderer } from '@flighthq/render';
+import { getOrCreateRenderProxy2D } from '@flighthq/render';
+import { createBitmap } from '@flighthq/scene2d';
+import { BitmapKind } from '@flighthq/types';
+
+import { defaultCanvasBitmapRenderer, drawCanvasBitmap } from './canvasBitmap';
+import { createCanvasRenderState } from './canvasRenderState';
+
+function makeState() {
+  const canvas = document.createElement('canvas');
+  canvas.width = 200;
+  canvas.height = 200;
+  const state = createCanvasRenderState(canvas);
+  registerRenderer(state, BitmapKind, defaultCanvasBitmapRenderer);
+  return state;
+}
+
+function makeImageSource() {
+  const img = document.createElement('img') as HTMLImageElement;
+  const source = createImageResource(img);
+  source.width = 64;
+  source.height = 64;
+  return source;
+}
+
+describe('defaultCanvasBitmapRenderer', () => {
+  it('has submit and createData', () => {
+    expect(typeof defaultCanvasBitmapRenderer.submit).toBe('function');
+    expect(typeof defaultCanvasBitmapRenderer.createData).toBe('function');
+  });
+});
+
+describe('drawCanvasBitmap', () => {
+  it('calls drawImage when bitmap has a valid image source', () => {
+    const state = makeState();
+    const bitmap = createBitmap();
+    bitmap.data.image = makeImageSource();
+    const data = getOrCreateRenderProxy2D(state, bitmap);
+    const spy = vi.spyOn(state.context, 'drawImage');
+
+    drawCanvasBitmap(state, data);
+
+    expect(spy).toHaveBeenCalledOnce();
+  });
+
+  it('skips drawImage when image source is null', () => {
+    const state = makeState();
+    const bitmap = createBitmap();
+    bitmap.data.image = null;
+    const data = getOrCreateRenderProxy2D(state, bitmap);
+    const spy = vi.spyOn(state.context, 'drawImage');
+
+    drawCanvasBitmap(state, data);
+
+    expect(spy).not.toHaveBeenCalled();
+  });
+
+  it('crops to sourceRectangle when set', () => {
+    const state = makeState();
+    const bitmap = createBitmap();
+    bitmap.data.image = makeImageSource();
+    bitmap.data.sourceRectangle = createRectangle(10, 20, 32, 32);
+    const data = getOrCreateRenderProxy2D(state, bitmap);
+    const spy = vi.spyOn(state.context, 'drawImage');
+
+    drawCanvasBitmap(state, data);
+
+    expect(spy).toHaveBeenCalledOnce();
+    const args = spy.mock.calls[0] as number[];
+    expect(args[1]).toBe(10); // sx
+    expect(args[2]).toBe(20); // sy
+    expect(args[3]).toBe(32); // sw
+    expect(args[4]).toBe(32); // sh
+    expect(args[5]).toBe(0); // dx
+    expect(args[6]).toBe(0); // dy
+  });
+
+  it('disables imageSmoothingEnabled when smoothing is false', () => {
+    const state = makeState();
+    state.allowSmoothing = true;
+    const bitmap = createBitmap();
+    bitmap.data.image = makeImageSource();
+    bitmap.data.smoothing = false;
+    const data = getOrCreateRenderProxy2D(state, bitmap);
+
+    drawCanvasBitmap(state, data);
+
+    expect(state.context.imageSmoothingEnabled).toBe(true); // restored after draw
+  });
+});