Svg headless export

.vscode/launch.json

@@ -5,9 +5,17 @@
             "name": "Vitest: Run All",
             "type": "node",
             "request": "launch",
-            "skipFiles": ["<node_internals>/**", "**/node_modules/**"],
+            "skipFiles": [
+                "<node_internals>/**",
+                "**/node_modules/**"
+            ],
             "program": "${workspaceRoot}/node_modules/vitest/vitest.mjs",
-            "args": ["run", "--no-color", "--no-coverage", "--no-watch"],
+            "args": [
+                "run",
+                "--no-color",
+                "--no-coverage",
+                "--no-watch"
+            ],
             "smartStep": true,
             "console": "integratedTerminal",
         },
@@ -16,9 +24,15 @@
             "type": "node",
             "request": "launch",
             "autoAttachChildProcesses": true,
-            "skipFiles": ["<node_internals>/**", "**/node_modules/**"],
+            "skipFiles": [
+                "<node_internals>/**",
+                "**/node_modules/**"
+            ],
             "program": "${workspaceRoot}/node_modules/vitest/vitest.mjs",
-            "args": ["run", "${relativeFile}"],
+            "args": [
+                "run",
+                "${relativeFile}"
+            ],
             "smartStep": true,
             "console": "integratedTerminal",
         },
@@ -41,6 +55,17 @@
                 "${workspaceFolder}/packages/sprotty-protocol/lib/**/*.js",
                 "${workspaceFolder}/packages/sprotty-elk/lib/**/*.js"
             ]
+        },
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "Trigger export command",
+            "runtimeExecutable": "${workspaceFolder}/packages/sprotty/bin/sprotty",
+            "args": [
+                "export",
+                "http://localhost:8080/jsxample/jsxample.html"
+            ],
+            "cwd": "${workspaceFolder}"
         }
     ]
 }

examples/jsxample/src/standalone.ts

@@ -14,13 +14,17 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 
-import { LocalModelSource, TYPES } from 'sprotty';
+import { LocalModelSource, RequestExportSvgAction, TYPES } from 'sprotty';
 import createContainer from './di.config';
 
 export default async function runJsxample() {
     const container = createContainer('sprotty');
     const modelSource = container.get<LocalModelSource>(TYPES.ModelSource);
 
+    document.addEventListener('export', (event: CustomEvent) => {
+        modelSource.actionDispatcher.dispatch(RequestExportSvgAction.create(event.detail.fileName));
+    });
+
     const graph = {
         id: 'root',
         type: 'graph',

packages/sprotty-cli/.gitignore

@@ -0,0 +1 @@
+/lib/

packages/sprotty-cli/bin/sprotty

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+require('../lib/sprotty')

packages/sprotty-cli/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "sprotty-cli",
+  "version": "1.1.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/eclipse-sprotty/sprotty-cli",
+    "directory": "packages/sprotty-cli"
+  },
+  "volta": {
+    "node": "18.19.0",
+    "yarn": "1.22.21"
+  },
+  "author": "Eclipse Sprotty",
+  "license": "(EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0)",
+  "dependencies": {
+    "commander": "^12.0.0",
+    "puppeteer": "^22.3.0"
+  },
+  "files":[
+    "bin",
+    "lib",
+    "src"
+  ],
+  "bin": {
+    "sprotty": "bin/sprotty"
+  }
+}

packages/sprotty-cli/src/sprotty.ts

@@ -0,0 +1,58 @@
+/********************************************************************************
+ * Copyright (c) 2024 TypeFox and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+
+import { Command } from 'commander';
+import puppeteer from 'puppeteer';
+
+interface ExportOptions {
+    output?: string
+    directory?: string
+}
+
+export function sprottyCli(argv: string[]): void {
+    const program = new Command();
+
+    program.command('export')
+        .argument('<url>', 'The url of the Sprotty page')
+        .option('-o, --output <outputFile>', 'The output file', 'diagram.svg')
+        .option('-d, --directory <outputDirectory>', 'The output directory', undefined)
+        .action(async (url: string, options: ExportOptions) => {
+            const browser = await puppeteer.launch();
+            const page = await browser.newPage();
+            if (options.directory) {
+                const client = await page.createCDPSession();
+                await client.send('Page.setDownloadBehavior', {
+                    behavior: 'allow',
+                    downloadPath: options.directory
+                });
+            }
+            await page.goto(url);
+            await page.evaluate((evalOptions) => {
+                // trigger the export
+                document.dispatchEvent(new CustomEvent('export', {detail: {fileName: evalOptions.output}}));
+            }, options);
+
+            // wait for the download to finish before closing the browser
+            await page.waitForNetworkIdle();
+            await browser.close();
+        });
+
+    program.parse(argv);
+
+}
+
+// run the command
+sprottyCli(process.argv);

packages/sprotty-cli/tsconfig.json

@@ -0,0 +1,15 @@
+// this file is required for VSCode to work properly
+{
+  "extends": "./tsconfig.src.json",
+  "compilerOptions": {
+    "noEmit": true,
+    "rootDir": "."
+  },
+  "include": [
+    "src/**/*"
+  ],
+  "exclude": [
+    "lib",
+    "node_modules"
+  ]
+}

packages/sprotty-cli/tsconfig.src.json

@@ -0,0 +1,16 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "lib"
+  },
+  "include": [
+    "**/*.ts",
+  ],
+  "exclude": [
+    "**/*.spec.ts",
+    "**/*.spec.tsx",
+    "lib",
+    "node_modules"
+  ]
+}

packages/sprotty/src/features/export/export.ts

@@ -41,14 +41,16 @@ export class ExportSvgKeyListener extends KeyListener {
 
 export interface RequestExportSvgAction extends RequestAction<ExportSvgAction> {
     kind: typeof RequestExportSvgAction.KIND
+    fileName: string
 }
 export namespace RequestExportSvgAction {
     export const KIND = 'requestExportSvg';
 
-    export function create(): RequestExportSvgAction {
+    export function create(fileName: string = 'diagram'): RequestExportSvgAction {
         return {
             kind: KIND,
-            requestId: generateRequestId()
+            requestId: generateRequestId(),
+            fileName: fileName
         };
     }
 }
@@ -83,7 +85,8 @@ export class ExportSvgCommand extends HiddenCommand {
         }
         return {
             model: context.root,
-            modelChanged: false
+            modelChanged: false,
+            cause: this.action
         };
     }
 }

packages/sprotty/src/features/export/svg-exporter.ts

@@ -15,28 +15,31 @@
  ********************************************************************************/
 
 import { injectable, inject } from "inversify";
-import { RequestAction, ResponseAction } from 'sprotty-protocol/lib/actions';
+import { ResponseAction } from 'sprotty-protocol/lib/actions';
 import { Bounds } from 'sprotty-protocol/lib/utils/geometry';
 import { ViewerOptions } from '../../base/views/viewer-options';
 import { isBoundsAware } from '../bounds/model';
 import { ActionDispatcher } from '../../base/actions/action-dispatcher';
 import { TYPES } from '../../base/types';
 import { SModelRootImpl } from '../../base/model/smodel';
 import { ILogger } from '../../utils/logging';
+import { RequestExportSvgAction } from "./export";
 
 export interface ExportSvgAction extends ResponseAction {
     kind: typeof ExportSvgAction.KIND;
     svg: string
     responseId: string
+    fileName: string
 }
 export namespace ExportSvgAction {
     export const KIND = 'exportSvg';
 
-    export function create(svg: string, requestId: string): ExportSvgAction {
+    export function create(svg: string, requestId: string, fileName: string): ExportSvgAction {
         return {
             kind: KIND,
             svg,
-            responseId: requestId
+            responseId: requestId,
+            fileName: fileName
         };
     }
 }
@@ -48,7 +51,7 @@ export class SvgExporter {
     @inject(TYPES.IActionDispatcher) protected actionDispatcher: ActionDispatcher;
     @inject(TYPES.ILogger) protected log: ILogger;
 
-    export(root: SModelRootImpl, request?: RequestAction<ExportSvgAction>): void {
+    export(root: SModelRootImpl, request?: RequestExportSvgAction): void {
         if (typeof document !== 'undefined') {
             const hiddenDiv = document.getElementById(this.options.hiddenDiv);
             if (hiddenDiv === null) {
@@ -63,7 +66,7 @@ export class SvgExporter {
                 return;
             }
             const svg = this.createSvg(svgElement, root);
-            this.actionDispatcher.dispatch(ExportSvgAction.create(svg, request ? request.requestId : ''));
+            this.actionDispatcher.dispatch(ExportSvgAction.create(svg, request ? request.requestId : '', request ? request.fileName : 'diagram'));
         }
     }
 

packages/sprotty/src/model-source/diagram-server.ts

@@ -199,7 +199,7 @@ export abstract class DiagramServerProxy extends ModelSource {
 
     protected handleExportSvgAction(action: ExportSvgAction): boolean {
         const blob = new Blob([action.svg], { type: 'text/plain;charset=utf-8' });
-        saveAs(blob, 'diagram.svg');
+        saveAs(blob, action.fileName.endsWith('.svg') ? action.fileName : action.fileName + '.svg');
         return false;
     }
 

packages/sprotty/src/model-source/local-model-source.ts

@@ -278,6 +278,6 @@ export class LocalModelSource extends ModelSource {
 
     protected handleExportSvgAction(action: ExportSvgAction): void {
         const blob = new Blob([action.svg], { type: 'text/plain;charset=utf-8' });
-        saveAs(blob, 'diagram.svg');
+        saveAs(blob, action.fileName.endsWith('.svg') ? action.fileName : action.fileName + '.svg');
     }
 }

tsconfig.build.json

@@ -8,6 +8,7 @@
         { "path": "./packages/sprotty-elk/tsconfig.src.json" },
         { "path": "./packages/sprotty-elk/tsconfig.test.json" },
         { "path": "./packages/generator-sprotty/tsconfig.json" },
+        { "path": "./packages/sprotty-cli/tsconfig.src.json" },
         { "path": "./examples/tsconfig.json" }
     ]
 }