@geometra/renderer-canvas 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { CanvasRenderer } from './renderer.js';
+export type { CanvasRendererOptions } from './renderer.js';
+//# 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,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAC9C,YAAY,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAA"}

package/dist/index.js

@@ -0,0 +1,2 @@
+export { CanvasRenderer } from './renderer.js';
+//# 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,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA"}

package/dist/renderer.d.ts

@@ -0,0 +1,25 @@
+import type { ComputedLayout } from 'textura';
+import type { Renderer, UIElement } from '@geometra/core';
+export interface CanvasRendererOptions {
+    /** Canvas element to render into. */
+    canvas: HTMLCanvasElement;
+    /** Device pixel ratio for crisp rendering. Default: window.devicePixelRatio. */
+    dpr?: number;
+    /** Background color for the canvas. Default: '#ffffff'. */
+    background?: string;
+}
+export declare class CanvasRenderer implements Renderer {
+    private ctx;
+    private canvas;
+    private dpr;
+    private background;
+    constructor(options: CanvasRendererOptions);
+    render(layout: ComputedLayout, tree: UIElement): void;
+    private paintNode;
+    private paintBox;
+    private paintText;
+    private wrapText;
+    private roundRect;
+    destroy(): void;
+}
+//# sourceMappingURL=renderer.d.ts.map

package/dist/renderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderer.d.ts","sourceRoot":"","sources":["../src/renderer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAC7C,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAA2B,MAAM,gBAAgB,CAAA;AAElF,MAAM,WAAW,qBAAqB;IACpC,qCAAqC;IACrC,MAAM,EAAE,iBAAiB,CAAA;IACzB,gFAAgF;IAChF,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,2DAA2D;IAC3D,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AAED,qBAAa,cAAe,YAAW,QAAQ;IAC7C,OAAO,CAAC,GAAG,CAA0B;IACrC,OAAO,CAAC,MAAM,CAAmB;IACjC,OAAO,CAAC,GAAG,CAAQ;IACnB,OAAO,CAAC,UAAU,CAAQ;gBAEd,OAAO,EAAE,qBAAqB;IAU1C,MAAM,CAAC,MAAM,EAAE,cAAc,EAAE,IAAI,EAAE,SAAS,GAAG,IAAI;IAoBrD,OAAO,CAAC,SAAS;IAuBjB,OAAO,CAAC,QAAQ;IAqChB,OAAO,CAAC,SAAS;IA8BjB,OAAO,CAAC,QAAQ;IAwBhB,OAAO,CAAC,SAAS;IAejB,OAAO,IAAI,IAAI;CAGhB"}

package/dist/renderer.js

@@ -0,0 +1,135 @@
+export class CanvasRenderer {
+    ctx;
+    canvas;
+    dpr;
+    background;
+    constructor(options) {
+        this.canvas = options.canvas;
+        this.dpr = options.dpr ?? window.devicePixelRatio;
+        this.background = options.background ?? '#ffffff';
+        const ctx = this.canvas.getContext('2d');
+        if (!ctx)
+            throw new Error('Could not get 2d context');
+        this.ctx = ctx;
+    }
+    render(layout, tree) {
+        const { ctx, canvas, dpr } = this;
+        // Size canvas to layout
+        canvas.width = layout.width * dpr;
+        canvas.height = layout.height * dpr;
+        canvas.style.width = `${layout.width}px`;
+        canvas.style.height = `${layout.height}px`;
+        ctx.scale(dpr, dpr);
+        // Clear
+        ctx.fillStyle = this.background;
+        ctx.fillRect(0, 0, layout.width, layout.height);
+        this.paintNode(tree, layout, 0, 0);
+        // Reset transform for next frame
+        ctx.setTransform(1, 0, 0, 1, 0, 0);
+    }
+    paintNode(element, layout, offsetX, offsetY) {
+        const x = offsetX + layout.x;
+        const y = offsetY + layout.y;
+        const { width, height } = layout;
+        if (element.kind === 'box') {
+            this.paintBox(element, layout, x, y, width, height);
+            for (let i = 0; i < element.children.length; i++) {
+                const childLayout = layout.children[i];
+                if (childLayout) {
+                    this.paintNode(element.children[i], childLayout, x, y);
+                }
+            }
+        }
+        else {
+            this.paintText(element, x, y, width, height);
+        }
+    }
+    paintBox(element, _layout, x, y, width, height) {
+        const { ctx } = this;
+        const { backgroundColor, borderColor, borderRadius, opacity } = element.props;
+        if (opacity !== undefined)
+            ctx.globalAlpha = opacity;
+        if (backgroundColor) {
+            ctx.fillStyle = backgroundColor;
+            if (borderRadius) {
+                this.roundRect(x, y, width, height, borderRadius);
+                ctx.fill();
+            }
+            else {
+                ctx.fillRect(x, y, width, height);
+            }
+        }
+        if (borderColor) {
+            ctx.strokeStyle = borderColor;
+            ctx.lineWidth = 1;
+            if (borderRadius) {
+                this.roundRect(x, y, width, height, borderRadius);
+                ctx.stroke();
+            }
+            else {
+                ctx.strokeRect(x, y, width, height);
+            }
+        }
+        if (opacity !== undefined)
+            ctx.globalAlpha = 1;
+    }
+    paintText(element, x, y, _width, _height) {
+        const { ctx } = this;
+        const { text, font, color, backgroundColor, lineHeight, opacity } = element.props;
+        if (opacity !== undefined)
+            ctx.globalAlpha = opacity;
+        if (backgroundColor) {
+            ctx.fillStyle = backgroundColor;
+            ctx.fillRect(x, y, _width, _height);
+        }
+        ctx.font = font;
+        ctx.fillStyle = color ?? '#000000';
+        ctx.textBaseline = 'top';
+        // Simple multi-line: split on newlines, wrap within width
+        const lines = this.wrapText(text, _width);
+        for (let i = 0; i < lines.length; i++) {
+            ctx.fillText(lines[i], x, y + i * lineHeight);
+        }
+        if (opacity !== undefined)
+            ctx.globalAlpha = 1;
+    }
+    wrapText(text, maxWidth) {
+        const { ctx } = this;
+        const lines = [];
+        const paragraphs = text.split('\n');
+        for (const para of paragraphs) {
+            const words = para.split(' ');
+            let current = '';
+            for (const word of words) {
+                const test = current ? `${current} ${word}` : word;
+                if (ctx.measureText(test).width > maxWidth && current) {
+                    lines.push(current);
+                    current = word;
+                }
+                else {
+                    current = test;
+                }
+            }
+            lines.push(current);
+        }
+        return lines;
+    }
+    roundRect(x, y, w, h, r) {
+        const { ctx } = this;
+        ctx.beginPath();
+        ctx.moveTo(x + r, y);
+        ctx.lineTo(x + w - r, y);
+        ctx.quadraticCurveTo(x + w, y, x + w, y + r);
+        ctx.lineTo(x + w, y + h - r);
+        ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
+        ctx.lineTo(x + r, y + h);
+        ctx.quadraticCurveTo(x, y + h, x, y + h - r);
+        ctx.lineTo(x, y + r);
+        ctx.quadraticCurveTo(x, y, x + r, y);
+        ctx.closePath();
+    }
+    destroy() {
+        // Nothing to clean up for canvas
+    }
+}
+//# sourceMappingURL=renderer.js.map

package/dist/renderer.js.map

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

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@geometra/renderer-canvas",
+  "version": "0.1.0",
+  "description": "Canvas2D renderer for Textura framework",
+  "license": "MIT",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/razroo/textrura-framework",
+    "directory": "packages/renderer-canvas"
+  },
+  "homepage": "https://razroo.github.io/textrura-framework",
+  "keywords": [
+    "textura",
+    "renderer",
+    "canvas",
+    "dom-free"
+  ],
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "rm -rf dist && tsc -p tsconfig.build.json",
+    "check": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@geometra/core": "^0.1.0"
+  }
+}