bpmn-js-copy-as-image 0.1.0

package/README.md

@@ -0,0 +1,78 @@
+# bpmn-js-copy-as-image
+
+[![CI](https://github.com/barmac/bpmn-js-copy-as-image/actions/workflows/CI.yml/badge.svg)](https://github.com/barmac/bpmn-js-copy-as-image/actions/workflows/CI.yml)
+
+This project allows to capture elements as PNG or SVG programmatically, and to copy rendered PNG to the clipboard via context pad.
+
+![pasted screenshot](./resources/screenshot.png)
+
+## Features
+
+* copy selected elements as PNG via the context pad
+* render elements as PNG
+* render elements as SVG
+
+## Usage
+
+The project exposes 2 modules which can be used with [bpmn-js](https://github.com/bpmn-io/bpmn-js).
+
+### Context pad extension
+
+To use the context pad extension, import the `CopyAsImageModule`:
+
+```javascript
+import BpmnModeler from 'bpmn-js/lib/Modeler';
+import { CopyAsImageModule } from 'bpmn-js-copy-as-image';
+
+const modeler = new BpmnModeler({
+  container: '#container',
+  additionalModules: [
+    CopyAsImageModule
+  ]
+});
+
+await modeler.importXML(/* ... */);
+```
+
+### Programmatic API only
+
+The programmatic API is included in the context pad extension. If you want to use only the former,
+import only the `ElementsRendererModule`:
+
+
+```javascript
+import BpmnModeler from 'bpmn-js/lib/Modeler';
+import { ElementsRendererModule } from 'bpmn-js-copy-as-image';
+
+const modeler = new BpmnModeler({
+  container: '#container',
+  additionalModules: [
+    ElementsRendererModule
+  ]
+});
+
+await modeler.importXML(/* ... */);
+
+const elementsRenderer = modeler.get('elementsRenderer');
+const png = await elementsRenderer.renderAsPNG([ 'Task_1' ]);
+```
+
+## Demo
+
+```
+# install dependencies
+npm install
+
+# run in browser
+npm start
+```
+
+Go to http://localhost:9876/debug.html.
+
+## Credits
+
+The project was built on top of @nikku's [native copy and paste example](https://github.com/nikku/bpmn-js-native-copy-paste).
+
+## License
+
+MIT

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "bpmn-js-copy-as-image",
+  "version": "0.1.0",
+  "description": "A bpmn-js extension which allows to render selected elements as images",
+  "main": "src/index.js",
+  "files": [
+    "src"
+  ],
+  "scripts": {
+    "all": "npm test",
+    "start": "crosse-env TEST_BROWSERS=Debug npm run dev",
+    "dev": "karma start",
+    "test": "karma start --single-run --no-auto-watch"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/barmac/bpmn-js-copy-as-image.git"
+  },
+  "keywords": [
+    "bpmn-js"
+  ],
+  "author": "Maciej Barelkowski <maciej.barelkowski@camunda.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/barmac/bpmn-js-copy-as-image/issues"
+  },
+  "homepage": "https://github.com/barmac/bpmn-js-copy-as-image#readme",
+  "devDependencies": {
+    "bpmn-js": "^9.4.0",
+    "chai": "^4.3.6",
+    "cross-env": "^7.0.3",
+    "downloadjs": "^1.4.7",
+    "file-drops": "^0.4.0",
+    "file-open": "^0.1.1",
+    "karma": "^6.4.0",
+    "karma-chrome-launcher": "^3.1.1",
+    "karma-debug-launcher": "0.0.5",
+    "karma-mocha": "^2.0.1",
+    "karma-sinon-chai": "^2.0.2",
+    "karma-webpack": "^5.0.0",
+    "mocha": "^10.0.0",
+    "puppeteer": "^16.2.0",
+    "sinon": "^14.0.0",
+    "sinon-chai": "^3.7.0",
+    "webpack": "^5.74.0"
+  },
+  "dependencies": {
+    "canvg": "^4.0.1",
+    "diagram-js": "^8.9.0"
+  }
+}

package/src/CopyAsImageContextPadProvider.js

@@ -0,0 +1,43 @@
+export class CopyAsImageContextPadProvider {
+  constructor(elementsRenderer, contextPad) {
+    this._elementsRenderer = elementsRenderer;
+    this._contextPad = contextPad;
+
+    contextPad.registerProvider(this);
+  }
+
+  getContextPadEntries(element) {
+    return this._getEntries(element);
+  }
+
+  getMultiElementContextPadEntries(elements) {
+    return this._getEntries(elements);
+  }
+
+  _getEntries(elementOrElements) {
+    const elementsRenderer = this._elementsRenderer;
+    const contextPad = this._contextPad;
+
+    return {
+      'copy-as-png': {
+        title: 'Copy as PNG',
+        imageUrl: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='30' width='30'%3E%3Ctext x='0' y='15'%3EPNG%3C/text%3E%3C/svg%3E",
+        action: {
+          async click() {
+            const png = await elementsRenderer.renderAsPNG(elementOrElements);
+
+            await navigator.clipboard.write([
+              new ClipboardItem({
+                'image/png': png
+              })
+            ]);
+
+            contextPad.close();
+          }
+        }
+      }
+    };
+  }
+}
+
+CopyAsImageContextPadProvider.$inject = [ 'elementsRenderer', 'contextPad' ];

package/src/ElementsRenderer.js

@@ -0,0 +1,89 @@
+import { Canvg } from 'canvg'
+import { getBBox } from 'diagram-js/lib/util/Elements';
+
+const PADDING = {
+  x: 6,
+  y: 6
+}
+
+export class ElementsRenderer {
+  constructor(bpmnjs, elementRegistry) {
+    this._bpmnjs = bpmnjs;
+  }
+
+  /**
+   * Render passed elements as PNG.
+   *
+   * @param {Array<string|object>} elements - elements to render
+   * @returns {Promise<Blob>}
+   */
+  async renderAsPNG(elements) {
+    const svg = await this.renderAsSVG(elements);
+
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+    const canvg = Canvg.fromString(ctx, svg);
+
+    await canvg.render();
+
+    ctx.globalCompositeOperation = 'destination-over';
+    ctx.fillStyle = 'white';
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+    const png = await new Promise(resolve => {
+      canvas.toBlob(blob => resolve(blob), 'image/png');
+    });
+
+    return png;
+  }
+
+  async renderAsSVG(elements) {
+    if (!Array.isArray(elements)) {
+      elements = [ elements ];
+    }
+
+    // gather elements ids
+    const ids = elements.map(element => {
+      if (typeof element !== 'string') {
+        return element.id;
+      }
+
+      return element;
+    });
+
+    // save the diagram as svg and parse document
+    const { svg } = await this._bpmnjs.saveSVG();
+    const svgDoc = new DOMParser().parseFromString(svg, 'image/svg+xml');
+
+    // remove visuals of elements we don't want to render
+    const gfx = svgDoc.querySelectorAll('svg > .djs-group [data-element-id]')
+    gfx.forEach(element => {
+      if (!ids.includes(element.dataset.elementId)) {
+        element.querySelector('.djs-visual').remove();
+      }
+    });
+
+    // adjust svg viewbox with padding to account for arrow markers
+    const bbox = this._getBBox(elements);
+    svgDoc.documentElement.setAttribute('viewBox',
+      `${bbox.x - PADDING.x} ${bbox.y - PADDING.y} ${bbox.width + PADDING.x * 2} ${bbox.height + PADDING.y * 2}`);
+
+    const serialized = new XMLSerializer().serializeToString(svgDoc);
+
+    return serialized;
+  }
+
+  _getBBox(elementsOrIds) {
+    const elements = elementsOrIds.map(elementOrId => {
+      if (typeof elementOrId !== 'string') {
+        return elementOrId;
+      }
+
+      return this._elementRegistry.get(elementOrId);
+    });
+
+    return getBBox(elements);
+  }
+}
+
+ElementsRenderer.$inject = [ 'bpmnjs' ];

package/src/index.js

@@ -0,0 +1,13 @@
+import { ElementsRenderer } from './ElementsRenderer';
+import { CopyAsImageContextPadProvider } from './CopyAsImageContextPadProvider';
+
+
+export const ElementsRendererModule = {
+  elementsRenderer: [ 'type', ElementsRenderer ]
+};
+
+export const CopyAsImageModule = {
+  __depends__: [ ElementsRendererModule ],
+  __init__: [ 'copyAsImageContextPadProvider' ],
+  copyAsImageContextPadProvider: [ 'type', CopyAsImageContextPadProvider ],
+};