bpmn-js-copy-as-image 0.2.0 → 0.4.0

package/dist/index.es.js

@@ -0,0 +1,353 @@
+import { Canvg } from 'canvg';
+
+/**
+ * Flatten array, one level deep.
+ *
+ * @template T
+ *
+ * @param {T[][] | T[] | null} [arr]
+ *
+ * @return {T[]}
+ */
+
+const nativeToString = Object.prototype.toString;
+const nativeHasOwnProperty = Object.prototype.hasOwnProperty;
+
+function isUndefined(obj) {
+  return obj === undefined;
+}
+
+function isNil(obj) {
+  return obj == null;
+}
+
+function isArray(obj) {
+  return nativeToString.call(obj) === '[object Array]';
+}
+
+/**
+ * Return true, if target owns a property with the given key.
+ *
+ * @param {Object} target
+ * @param {String} key
+ *
+ * @return {Boolean}
+ */
+function has(target, key) {
+  return !isNil(target) && nativeHasOwnProperty.call(target, key);
+}
+
+
+/**
+ * Iterate over collection; returning something
+ * (non-undefined) will stop iteration.
+ *
+ * @template T
+ * @param {Collection<T>} collection
+ * @param { ((item: T, idx: number) => (boolean|void)) | ((item: T, key: string) => (boolean|void)) } iterator
+ *
+ * @return {T} return result that stopped the iteration
+ */
+function forEach(collection, iterator) {
+
+  let val,
+      result;
+
+  if (isUndefined(collection)) {
+    return;
+  }
+
+  const convertKey = isArray(collection) ? toNum : identity;
+
+  for (let key in collection) {
+
+    if (has(collection, key)) {
+      val = collection[key];
+
+      result = iterator(val, convertKey(key));
+
+      if (result === false) {
+        return val;
+      }
+    }
+  }
+}
+
+
+function identity(arg) {
+  return arg;
+}
+
+function toNum(arg) {
+  return Number(arg);
+}
+
+/**
+ * Returns the surrounding bbox for all elements in
+ * the array or the element primitive.
+ *
+ * @param {Element|Element[]} elements
+ * @param {boolean} [stopRecursion=false]
+ *
+ * @return {Rect}
+ */
+function getBBox(elements, stopRecursion) {
+
+  stopRecursion = !!stopRecursion;
+  if (!isArray(elements)) {
+    elements = [ elements ];
+  }
+
+  var minX,
+      minY,
+      maxX,
+      maxY;
+
+  forEach(elements, function(element) {
+
+    // If element is a connection the bbox must be computed first
+    var bbox = element;
+    if (element.waypoints && !stopRecursion) {
+      bbox = getBBox(element.waypoints, true);
+    }
+
+    var x = bbox.x,
+        y = bbox.y,
+        height = bbox.height || 0,
+        width = bbox.width || 0;
+
+    if (x < minX || minX === undefined) {
+      minX = x;
+    }
+    if (y < minY || minY === undefined) {
+      minY = y;
+    }
+
+    if ((x + width) > maxX || maxX === undefined) {
+      maxX = x + width;
+    }
+    if ((y + height) > maxY || maxY === undefined) {
+      maxY = y + height;
+    }
+  });
+
+  return {
+    x: minX,
+    y: minY,
+    height: maxY - minY,
+    width: maxX - minX
+  };
+}
+
+const PADDING = {
+  x: 6,
+  y: 6
+};
+
+class ElementsRenderer {
+  constructor(bpmnjs, elementRegistry, selection, copyPaste) {
+    this._bpmnjs = bpmnjs;
+    this._elementRegistry = elementRegistry;
+    this._selection = selection;
+    this._copyPaste = copyPaste;
+  }
+
+  /**
+   * Render current selection as PNG.
+   *
+   * @returns {Promise<Blob|null>}
+   */
+  async renderSelectionAsPNG() {
+    const elements = this._selection.get();
+
+    if (!elements || !elements.length) {
+      return null;
+    }
+
+    const tree = this._copyPaste.createTree(elements);
+    const ids = new Set();
+
+    Object.values(tree || {}).forEach(branch => {
+      branch.forEach(descriptor => ids.add(descriptor.id));
+    });
+
+    if (!ids.size) {
+      return null;
+    }
+
+    return this.renderAsPNG([ ...ids ]);
+  }
+
+  /**
+   * 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', 'elementRegistry', 'selection', 'copyPaste' ];
+
+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' ];
+
+const HIGH_PRIORITY = 1500;
+
+const KEY_C = [ 'c', 'C', 'KeyC' ];
+
+class CopyAsImageKeyboard {
+  constructor(keyboard, elementsRenderer) {
+    this._elementsRenderer = elementsRenderer;
+
+    keyboard.addListener(HIGH_PRIORITY, event => {
+      const keyEvent = event.keyEvent;
+
+      if (keyboard.isCmd(keyEvent) && keyboard.isShift(keyEvent) && keyboard.isKey(KEY_C, keyEvent)) {
+        this._copySelectionAsImage().catch(() => {});
+        return true;
+      }
+    });
+  }
+
+  async _copySelectionAsImage() {
+    const png = await this._elementsRenderer.renderSelectionAsPNG();
+
+    if (!png) {
+      return;
+    }
+
+    await navigator.clipboard.write([
+      new window.ClipboardItem({
+        'image/png': png
+      })
+    ]);
+  }
+}
+
+CopyAsImageKeyboard.$inject = [ 'keyboard', 'elementsRenderer' ];
+
+const ElementsRendererModule = {
+  elementsRenderer: [ 'type', ElementsRenderer ]
+};
+
+const CopyAsImageModule = {
+  __depends__: [ ElementsRendererModule ],
+  __init__: [ 'copyAsImageKeyboard' ],
+  copyAsImageKeyboard: [ 'type', CopyAsImageKeyboard ]
+};
+
+const CopyAsImageContextPad = {
+  __depends__: [ ElementsRendererModule ],
+  __init__: [ 'copyAsImageContextPadProvider' ],
+  copyAsImageContextPadProvider: [ 'type', CopyAsImageContextPadProvider ],
+};
+
+export { CopyAsImageContextPad, CopyAsImageModule, ElementsRendererModule };

package/dist/index.js

@@ -1,4 +1,4 @@
-import { Canvg } from 'canvg';
+import { svgToImage } from '@bpmn-io/svg-to-image';
 
 /**
  * Flatten array, one level deep.
@@ -191,22 +191,7 @@ class ElementsRenderer {
    */
   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;
+    return svgToImage(svg, { imageType: 'png', outputFormat: 'blob' });
   }
 
   async renderAsSVG(elements) {
@@ -237,8 +222,13 @@ class ElementsRenderer {
 
     // adjust svg viewbox with padding to account for arrow markers
     const bbox = this._getBBox(elements);
+    const paddedWidth = bbox.width + PADDING.x * 2;
+    const paddedHeight = bbox.height + PADDING.y * 2;
+
     svgDoc.documentElement.setAttribute('viewBox',
-      `${bbox.x - PADDING.x} ${bbox.y - PADDING.y} ${bbox.width + PADDING.x * 2} ${bbox.height + PADDING.y * 2}`);
+      `${bbox.x - PADDING.x} ${bbox.y - PADDING.y} ${paddedWidth} ${paddedHeight}`);
+    svgDoc.documentElement.setAttribute('width', `${Math.max(1, Math.ceil(paddedWidth))}`);
+    svgDoc.documentElement.setAttribute('height', `${Math.max(1, Math.ceil(paddedHeight))}`);
 
     const serialized = new XMLSerializer().serializeToString(svgDoc);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpmn-js-copy-as-image",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "A bpmn-js extension which allows to render selected elements as images",
   "type": "module",
   "main": "dist/index.js",
@@ -79,6 +79,7 @@
     "webpack": "^5.105.0"
   },
   "dependencies": {
+    "@bpmn-io/svg-to-image": "^1.0.0",
     "canvg": "^4.0.3"
   }
 }