bpmn-js-copy-as-image 0.3.0 → 0.4.1

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.
@@ -139,120 +139,6 @@ function getBBox(elements, stopRecursion) {
   };
 }
 
-/**
- * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH
- * under one or more contributor license agreements. See the NOTICE file
- * distributed with this work for additional information regarding copyright
- * ownership.
- *
- * Camunda licenses this file to you under the MIT; you may not use this file
- * except in compliance with the MIT License.
- */
-
-
-// list of defined encodings
-const ENCODINGS = [
-  'image/png',
-  'image/jpeg'
-];
-
-const OUTPUT_FORMATS = [
-  'dataUrl',
-  'blob'
-];
-
-const INITIAL_SCALE = 3;
-const FINAL_SCALE = 1;
-const SCALE_STEP = 1;
-
-const DATA_URL_REGEX = /^data:((?:\w+\/(?:(?!;).)+)?)((?:;[\w\W]*?[^;])*),(.+)$/;
-
-/**
- * Generate an image from SVG markup.
- *
- * @param {string} svg
- * @param {{ imageType?: 'png'|'jpeg', outputFormat?: 'dataUrl'|'blob' }} [options]
- *
- * @returns {Promise<string|Blob>}
- */
-async function generateImageFromSvg(svg, options = {}) {
-  const { imageType = 'png', outputFormat = 'dataUrl' } = options;
-  const encoding = 'image/' + imageType;
-
-  if (OUTPUT_FORMATS.indexOf(outputFormat) === -1) {
-    throw new Error('<' + outputFormat + '> is not supported output format for converting svg to image');
-  }
-
-  if (ENCODINGS.indexOf(encoding) === -1) {
-    throw new Error('<' + imageType + '> is not supported type for converting svg to image');
-  }
-
-  const initialSVG = svg;
-
-  for (let scale = INITIAL_SCALE; scale >= FINAL_SCALE; scale -= SCALE_STEP) {
-    try {
-      let canvas = document.createElement('canvas');
-
-      svg = scaleSvg(initialSVG, scale);
-
-      const context = canvas.getContext('2d');
-
-      const canvg = Canvg.fromString(context, svg);
-      await canvg.render();
-
-      // make the background white for every format
-      context.globalCompositeOperation = 'destination-over';
-      context.fillStyle = 'white';
-
-      context.fillRect(0, 0, canvas.width, canvas.height);
-
-      if (outputFormat === 'dataUrl') {
-        const dataUrl = canvas.toDataURL(encoding);
-
-        if (DATA_URL_REGEX.test(dataUrl)) {
-          return dataUrl;
-        }
-      } else {
-        const blob = await new Promise(resolve => {
-          canvas.toBlob(result => resolve(result), encoding);
-        });
-
-        if (blob) {
-          return blob;
-        }
-      }
-    } catch (error) {
-
-      // If rendering or export fails for this scale, try again with a smaller scale.
-      continue;
-    }
-  }
-
-  throw new Error('Error happened generating image. Diagram size is too big.');
-}
-
-function scaleSvg(svg, scale) {
-  return svg
-    .replace(/width="([^"]+)"/, function(match, widthStr) {
-      const width = parseFloat(widthStr);
-
-      if (Number.isNaN(width)) {
-        return match;
-      }
-
-      return `width="${width * scale}"`;
-    })
-    .replace(/height="([^"]+)"/, function(match, heightStr) {
-      const height = parseFloat(heightStr);
-
-      if (Number.isNaN(height)) {
-        return match;
-      }
-
-      return `height="${height * scale}"`;
-    });
-}
-
 const PADDING = {
   x: 6,
   y: 6
@@ -305,7 +191,7 @@ class ElementsRenderer {
    */
   async renderAsPNG(elements) {
     const svg = await this.renderAsSVG(elements);
-    return generateImageFromSvg(svg, { imageType: 'png', outputFormat: 'blob' });
+    return svgToImage(svg, { imageType: 'png', outputFormat: 'blob' });
   }
 
   async renderAsSVG(elements) {
@@ -481,4 +367,4 @@ const CopyAsImageEditorActionsModule = {
   copyAsImageEditorActions: [ 'type', CopyAsImageEditorActions ]
 };
 
-export { CopyAsImageContextPadModule, CopyAsImageEditorActionsModule, CopyAsImageModule, ElementsRendererModule, generateImageFromSvg };
+export { CopyAsImageContextPadModule, CopyAsImageEditorActionsModule, CopyAsImageModule, ElementsRendererModule };

package/package.json

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

package/dist/index.es.js

@@ -1,353 +0,0 @@
-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 };