Add SVG and PNG rendering capabilities to projects

src/engine/src/backend.ts

@@ -61,6 +61,7 @@ export interface EngineBackend {
   projectSerializeJson(handle: ProjectHandle, format: SimlinJsonFormat): MaybePromise<Uint8Array>;
   projectSerializeXmile(handle: ProjectHandle): MaybePromise<Uint8Array>;
   projectRenderSvg(handle: ProjectHandle, modelName: string): MaybePromise<Uint8Array>;
+  projectRenderPng(handle: ProjectHandle, modelName: string, width: number, height: number): MaybePromise<Uint8Array>;
   projectGetErrors(handle: ProjectHandle): MaybePromise<ErrorDetail[]>;
   projectApplyPatch(
     handle: ProjectHandle,

src/engine/src/direct-backend.ts

@@ -28,6 +28,7 @@ import {
   simlin_project_open_vensim,
   simlin_project_serialize_xmile,
   simlin_project_render_svg,
+  simlin_project_render_png,
 } from './internal/import-export';
 import {
   simlin_model_unref,
@@ -276,6 +277,10 @@ export class DirectBackend implements EngineBackend {
     return simlin_project_render_svg(this.getProjectPtr(handle), modelName);
   }
 
+  projectRenderPng(handle: ProjectHandle, modelName: string, width: number, height: number): Uint8Array {
+    return simlin_project_render_png(this.getProjectPtr(handle), modelName, width, height);
+  }
+
   projectGetErrors(handle: ProjectHandle): ErrorDetail[] {
     const errPtr = simlin_project_get_errors(this.getProjectPtr(handle));
     if (errPtr === 0) {

src/engine/src/internal/import-export.ts

@@ -172,3 +172,58 @@ export function simlin_project_render_svg(project: SimlinProjectPtr, modelName:
     free(outErrPtr);
   }
 }
+
+/**
+ * Render a project model's diagram as a PNG image.
+ * @param project Project pointer
+ * @param modelName Model name
+ * @param width Target width in pixels (0 for intrinsic)
+ * @param height Target height in pixels (0 for intrinsic)
+ * @returns PNG image data
+ */
+export function simlin_project_render_png(
+  project: SimlinProjectPtr,
+  modelName: string,
+  width: number,
+  height: number,
+): Uint8Array {
+  const exports = getExports();
+  const renderFn = exports.simlin_project_render_png as (
+    proj: number,
+    name: number,
+    width: number,
+    height: number,
+    outBuf: number,
+    outLen: number,
+    outErr: number,
+  ) => void;
+
+  const namePtr = stringToWasm(modelName);
+  const outBufPtr = allocOutPtr();
+  const outLenPtr = allocOutUsize();
+  const outErrPtr = allocOutPtr();
+
+  try {
+    renderFn(project, namePtr, width, height, outBufPtr, outLenPtr, outErrPtr);
+    const errPtr = readOutPtr(outErrPtr);
+
+    if (errPtr !== 0) {
+      const code = simlin_error_get_code(errPtr);
+      const message = simlin_error_get_message(errPtr) ?? 'Unknown error';
+      const details = readAllErrorDetails(errPtr);
+      simlin_error_free(errPtr);
+      throw new SimlinError(message, code, details);
+    }
+
+    const bufPtr = readOutPtr(outBufPtr);
+    const len = readOutUsize(outLenPtr);
+    const data = copyFromWasm(bufPtr, len);
+    free(bufPtr);
+    return data;
+  } finally {
+    free(namePtr);
+    free(outBufPtr);
+    free(outLenPtr);
+    free(outErrPtr);
+  }
+}

src/engine/src/project.ts

@@ -268,6 +268,24 @@ export class Project {
     return new TextDecoder().decode(await this.renderSvg(modelName));
   }
 
+  /**
+   * Render a model's stock-and-flow diagram as a PNG image.
+   *
+   * Pass `width = 0` and `height = 0` (or omit them) to use the SVG's
+   * intrinsic dimensions. When only one dimension is non-zero the other
+   * is derived from the aspect ratio. When both are non-zero, `width`
+   * takes precedence.
+   *
+   * @param modelName Model name
+   * @param width Target width in pixels (0 for intrinsic)
+   * @param height Target height in pixels (0 for intrinsic)
+   * @returns PNG image data
+   */
+  async renderPng(modelName: string, width: number = 0, height: number = 0): Promise<Uint8Array> {
+    this.checkDisposed();
+    return await this._backend.projectRenderPng(this._handle, modelName, width, height);
+  }
+
   /**
    * Get all errors in this project.
    * @returns Array of ErrorDetail objects

src/engine/src/worker-backend.ts

@@ -392,6 +392,17 @@ export class WorkerBackend implements EngineBackend {
     }));
   }
 
+  projectRenderPng(handle: ProjectHandle, modelName: string, width: number, height: number): Promise<Uint8Array> {
+    return this.sendRequest<Uint8Array>((requestId) => ({
+      type: 'projectRenderPng',
+      requestId,
+      handle,
+      modelName,
+      width,
+      height,
+    }));
+  }
+
   projectGetErrors(handle: ProjectHandle): Promise<ErrorDetail[]> {
     return this.sendRequest<ErrorDetail[]>((requestId) => ({
       type: 'projectGetErrors',

src/engine/src/worker-protocol.ts

@@ -52,6 +52,14 @@ export type WorkerRequest =
   | { type: 'projectSerializeJson'; requestId: number; handle: WorkerProjectHandle; format: number }
   | { type: 'projectSerializeXmile'; requestId: number; handle: WorkerProjectHandle }
   | { type: 'projectRenderSvg'; requestId: number; handle: WorkerProjectHandle; modelName: string }
+  | {
+      type: 'projectRenderPng';
+      requestId: number;
+      handle: WorkerProjectHandle;
+      modelName: string;
+      width: number;
+      height: number;
+    }
   | { type: 'projectGetErrors'; requestId: number; handle: WorkerProjectHandle }
   | {
       type: 'projectApplyPatch';
@@ -166,6 +174,7 @@ export const VALID_REQUEST_TYPES: ReadonlySet<string> = new Set([
   'projectSerializeJson',
   'projectSerializeXmile',
   'projectRenderSvg',
+  'projectRenderPng',
   'projectGetErrors',
   'projectApplyPatch',
   'modelGetName',

src/engine/src/worker-server.ts

@@ -294,6 +294,12 @@ export class WorkerServer {
         this.sendBytesWithTransfer(requestId, result);
         return;
       }
+      case 'projectRenderPng': {
+        const handle = this.getProjectHandle(request.handle);
+        const result = this.backend.projectRenderPng(handle, request.modelName, request.width, request.height);
+        this.sendBytesWithTransfer(requestId, result);
+        return;
+      }
       case 'projectGetErrors': {
         const handle = this.getProjectHandle(request.handle);
         this.sendSuccess(requestId, this.backend.projectGetErrors(handle));

src/engine/tests/api.test.ts

@@ -154,6 +154,64 @@ describe('High-Level API', () => {
       await project.dispose();
     });
 
+    it('should render SVG', async () => {
+      const project = await openTestProject();
+
+      const svg = await project.renderSvg('main');
+      expect(svg).toBeInstanceOf(Uint8Array);
+      expect(svg.length).toBeGreaterThan(0);
+
+      const svgString = new TextDecoder().decode(svg);
+      expect(svgString).toContain('<svg');
+
+      await project.dispose();
+    });
+
+    it('should render SVG string', async () => {
+      const project = await openTestProject();
+
+      const svgString = await project.renderSvgString('main');
+      expect(typeof svgString).toBe('string');
+      expect(svgString).toContain('<svg');
+
+      await project.dispose();
+    });
+
+    it('should render PNG at intrinsic size', async () => {
+      const project = await openTestProject();
+
+      const png = await project.renderPng('main');
+      expect(png).toBeInstanceOf(Uint8Array);
+      expect(png.length).toBeGreaterThan(8);
+
+      // Verify PNG signature
+      expect(png[0]).toBe(137);
+      expect(png[1]).toBe(80); // P
+      expect(png[2]).toBe(78); // N
+      expect(png[3]).toBe(71); // G
+
+      await project.dispose();
+    });
+
+    it('should render PNG with explicit width', async () => {
+      const project = await openTestProject();
+
+      const png = await project.renderPng('main', 800);
+      expect(png).toBeInstanceOf(Uint8Array);
+      expect(png.length).toBeGreaterThan(8);
+      expect(png[0]).toBe(137);
+
+      await project.dispose();
+    });
+
+    it('should throw for PNG render of nonexistent model', async () => {
+      const project = await openTestProject();
+
+      await expect(project.renderPng('nonexistent_model_xyz')).rejects.toThrow();
+
+      await project.dispose();
+    });
+
     it('should get loops via model', async () => {
       const project = await openTestProject();
 

src/engine/tests/direct-backend.test.ts

@@ -105,6 +105,43 @@ describe('DirectBackend', () => {
       expect(xmile.length).toBeGreaterThan(0);
     });
 
+    it('should render SVG', () => {
+      const svg = backend.projectRenderSvg(projectHandle, 'main');
+      expect(svg).toBeInstanceOf(Uint8Array);
+      expect(svg.length).toBeGreaterThan(0);
+      const svgString = new TextDecoder().decode(svg);
+      expect(svgString).toContain('<svg');
+    });
+
+    it('should render PNG at intrinsic size', () => {
+      const png = backend.projectRenderPng(projectHandle, 'main', 0, 0);
+      expect(png).toBeInstanceOf(Uint8Array);
+      expect(png.length).toBeGreaterThan(8);
+      // PNG signature: 137 80 78 71 13 10 26 10
+      expect(png[0]).toBe(137);
+      expect(png[1]).toBe(80);
+      expect(png[2]).toBe(78);
+      expect(png[3]).toBe(71);
+    });
+
+    it('should render PNG with explicit width', () => {
+      const png = backend.projectRenderPng(projectHandle, 'main', 400, 0);
+      expect(png).toBeInstanceOf(Uint8Array);
+      expect(png.length).toBeGreaterThan(8);
+      expect(png[0]).toBe(137);
+    });
+
+    it('should render PNG with explicit height', () => {
+      const png = backend.projectRenderPng(projectHandle, 'main', 0, 300);
+      expect(png).toBeInstanceOf(Uint8Array);
+      expect(png.length).toBeGreaterThan(8);
+      expect(png[0]).toBe(137);
+    });
+
+    it('should throw when rendering PNG for nonexistent model', () => {
+      expect(() => backend.projectRenderPng(projectHandle, 'nonexistent_xyz', 0, 0)).toThrow();
+    });
+
     it('should get loops', () => {
       const modelHandle = backend.projectGetModel(projectHandle, null);
       const loops = backend.modelGetLoops(modelHandle);