canvasbridge 0.1.0

package/README.md

@@ -0,0 +1,56 @@
+<div align="center">
+
+# Canvasbridge
+
+### Small adapters for rendering Artboards visual documents with Canvas 2D.
+
+[![TypeScript](https://img.shields.io/badge/TypeScript-5.9-3178c6?logo=typescript&logoColor=white)](https://www.typescriptlang.org/) [![Module](https://img.shields.io/badge/module-ESM-f7df1e?logo=javascript&logoColor=111827)](package.json) [![Status](https://img.shields.io/badge/status-pre--alpha-f5a623)](https://artboards.dev)
+
+[artboards.dev](https://artboards.dev)
+
+</div>
+
+`canvasbridge` is a small, framework-neutral Canvas 2D target for the portable
+visual document primitives exported by `artboards`. The same document can be
+sent to another renderer such as `svgbridge`.
+
+## Install
+
+```sh
+npm i artboards canvasbridge
+```
+
+```ts
+import { renderCanvas } from "canvasbridge";
+
+renderCanvas(ctx, {
+  width: 320,
+  height: 180,
+  children: [
+    { type: "rect", x: 10, y: 10, width: 100, height: 80, fill: "#09f" },
+  ],
+});
+```
+
+## Architecture
+
+```text
+                 artboards.dev
+                      │
+                      ▼
+                   artboards
+              portable visual model
+                      │
+                      ▼
+                canvasbridge
+                      │
+                      ▼
+                  Canvas 2D
+```
+
+Supported basics are groups, rectangles, ellipses, lines, portable path
+commands, text, image references, transforms, fill/stroke, opacity, and
+document sizing. Canvas state is scoped per node, so transforms and styles do
+not leak between siblings. Advanced text shaping, gradients, clipping, masks,
+asset fetching, layout, and application UI are out of scope until Artboards
+defines portable equivalents.

package/dist/index.d.ts

@@ -0,0 +1,29 @@
+import type { PathCommand, Transform, VisualDocument, VisualNode } from "artboards";
+export type CanvasNode = VisualNode;
+export type CanvasDocument = VisualDocument;
+export interface CanvasRenderOptions {
+    readonly clear?: boolean;
+    /** Resolves caller-owned image data; this bridge never loads network assets. */
+    readonly resolveImage?: (href: string, node: CanvasNode) => CanvasImageSource | undefined;
+}
+/** Applies the portable transform in the same order used by SVG output. */
+export declare function applyTransform(ctx: CanvasRenderingContext2D, transform: Transform | undefined): void;
+/** Draws the shared portable path commands on the current Canvas path. */
+export declare function drawPath(ctx: CanvasRenderingContext2D, commands?: readonly PathCommand[]): void;
+/** Draws one node with a state scope that cannot leak into siblings. */
+export declare function drawNode(ctx: CanvasRenderingContext2D, node: CanvasNode, options?: CanvasRenderOptions): void;
+/** Renders a document and keeps all bridge-owned Canvas state scoped. */
+export declare function renderCanvas(ctx: CanvasRenderingContext2D, document: CanvasDocument, options?: CanvasRenderOptions): void;
+/** Sizes a canvas backing store without taking responsibility for page layout. */
+export declare function setupCanvas(canvas: {
+    width: number;
+    height: number;
+    style?: {
+        width: string;
+        height: string;
+    };
+}, options: {
+    readonly width: number;
+    readonly height: number;
+    readonly pixelRatio?: number;
+}): number;

package/dist/index.js

@@ -0,0 +1 @@
+function h(i,e){e&&(e.matrix&&i.transform(...e.matrix),e.translate&&i.translate(e.translate.x,e.translate.y),e.origin&&i.translate(e.origin.x,e.origin.y),e.rotate!==void 0&&i.rotate(e.rotate),e.scale&&i.scale(e.scale.x,e.scale.y),e.origin&&i.translate(-e.origin.x,-e.origin.y))}function f(i,e=[]){for(const a of e)switch(a.type){case"moveTo":i.moveTo(a.x,a.y);break;case"lineTo":i.lineTo(a.x,a.y);break;case"quadraticCurveTo":i.quadraticCurveTo(a.cpx,a.cpy,a.x,a.y);break;case"bezierCurveTo":i.bezierCurveTo(a.cp1x,a.cp1y,a.cp2x,a.cp2y,a.x,a.y);break;case"arc":i.arc(a.x,a.y,a.radius,a.startAngle,a.endAngle,a.counterclockwise);break;case"closePath":i.closePath();break}}function s(i,e){e.fill!==void 0&&(i.fillStyle=e.fill),e.stroke!==void 0&&(i.strokeStyle=e.stroke),e.strokeWidth!==void 0&&(i.lineWidth=e.strokeWidth)}function l(i,e){e.fill!==void 0&&i.fill(),e.stroke!==void 0&&i.stroke()}function t(i,e,a={}){switch(i.save(),h(i,e.transform),e.opacity!==void 0&&(i.globalAlpha*=e.opacity),s(i,e),e.type){case"group":for(const r of e.children??[])t(i,r,a);break;case"rect":i.beginPath(),i.rect(e.x??0,e.y??0,e.width??0,e.height??0),l(i,e);break;case"ellipse":i.beginPath(),i.ellipse(e.cx??0,e.cy??0,e.rx??0,e.ry??0,0,0,Math.PI*2),l(i,e);break;case"line":i.beginPath(),i.moveTo(e.x1??0,e.y1??0),i.lineTo(e.x2??0,e.y2??0),e.stroke!==void 0&&i.stroke();break;case"path":i.beginPath(),f(i,e.path),l(i,e);break;case"text":e.fill!==void 0&&i.fillText(e.text??"",e.x??0,e.y??0),e.stroke!==void 0&&i.strokeText(e.text??"",e.x??0,e.y??0);break;case"image":{const r=e.href&&a.resolveImage?.(e.href,e);r&&i.drawImage(r,e.x??0,e.y??0,e.width??0,e.height??0);break}}i.restore()}function y(i,e,a={}){a.clear!==!1&&i.clearRect(0,0,e.width,e.height),i.save(),e.background!==void 0&&(i.fillStyle=e.background,i.fillRect(0,0,e.width,e.height));for(const r of e.children??[])t(i,r,a);i.restore()}function g(i,e){const a=e.pixelRatio??1;return i.width=Math.round(e.width*a),i.height=Math.round(e.height*a),i.style&&(i.style.width=`${e.width}px`,i.style.height=`${e.height}px`),a}export{h as applyTransform,t as drawNode,f as drawPath,y as renderCanvas,g as setupCanvas};

package/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "canvasbridge",
+  "version": "0.1.0",
+  "description": "Small adapters for rendering Artboards visual documents with Canvas 2D.",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": { ".": { "types": "./dist/index.d.ts", "import": "./dist/index.js", "default": "./dist/index.js" } },
+  "files": ["dist", "README.md"],
+  "sideEffects": false,
+  "scripts": { "build": "tsc --project tsconfig.json", "postbuild": "npm run dist --prefix \"$npm_config_local_prefix\" -- \"$PWD\"", "prepack": "npm run build", "prepublishOnly": "npm run build", "pretest": "npm run build", "test": "node --test test/*.test.mjs" },
+  "keywords": ["artboards", "canvas", "canvas2d", "renderer"],
+  "homepage": "https://artboards.dev",
+  "repository": { "type": "git", "url": "git+https://github.com/mosanic/mosa-platform.git", "directory": "packages/canvasbridge" },
+  "license": "MIT",
+  "engines": { "node": ">=20" },
+  "publishConfig": { "access": "public" },
+  "dependencies": { "artboards": "^0.0.1" },
+  "devDependencies": { "typescript": "^5.9.3" }
+}