feat: allow copy/paste between browser windows

lib/features/copy-paste/BpmnCrossWindowCopyPaste.js

@@ -0,0 +1,86 @@
+/**
+ * @typedef {import('diagram-js/lib/core/EventBus').default} EventBus
+ * @typedef {import('../../model/Types').Moddle} Moddle
+ * @typedef {import('diagram-js/lib/features/clipboard/Clipboard').default} Clipboard
+ */
+
+import { isObject } from 'min-dash';
+
+/**
+ * Cross-window copy-paste
+ *
+ * @param {EventBus} eventBus
+ * @param {Moddle} moddle
+ * @param {Clipboard} clipboard
+ */
+export default function BpmnCrossWindowCopyPaste(eventBus, moddle, clipboard) {
+  function createReviver(moddle) {
+    var elCache = {};
+
+    /**
+     * The actual reviewer that creates model instances
+     * for elements with a $type attribute.
+     *
+     * Elements with ids will be re-used, if already
+     * created.
+     *
+     * @param  {String} key
+     * @param  {Object} object
+     *
+     * @return {Object} actual element
+     */
+    return function(key, object) {
+      if (typeof object === 'object' && typeof object.$type === 'string') {
+        var objectId = object.id;
+
+        if (objectId && elCache[objectId]) {
+          return elCache[objectId];
+        }
+
+        var type = object.$type;
+        var attrs = Object.assign({}, object);
+
+        delete attrs.$type;
+
+        var newEl = moddle.create(type, attrs);
+
+        if (objectId) {
+          elCache[objectId] = newEl;
+        }
+
+        return newEl;
+      }
+
+      return object;
+    };
+  }
+
+  eventBus.on('copyPaste.elementsCopied', (event) => {
+    const { tree } = event;
+    navigator.clipboard.writeText(JSON.stringify(tree));
+  });
+
+  eventBus.on('canvas.focus.changed', (event) => {
+    const { focused } = event;
+    if (focused) {
+      navigator.clipboard
+        .readText()
+        .then((text) => {
+          try {
+            const parsedCopy = JSON.parse(text, createReviver(moddle));
+
+            if (isObject(parsedCopy)) {
+              clipboard.set(parsedCopy);
+            }
+          } catch (error) {
+            console.error('Failed to parse clipboard contents: ', error.message);
+          }
+        })
+        .catch((err) => {
+          console.error('Failed to read clipboard contents: ', err.message);
+        });
+    }
+  });
+}
+
+BpmnCrossWindowCopyPaste.$inject = [ 'eventBus', 'moddle', 'clipboard' ];

lib/features/copy-paste/index.js

@@ -2,12 +2,14 @@ import CopyPasteModule from 'diagram-js/lib/features/copy-paste';
 
 import BpmnCopyPaste from './BpmnCopyPaste';
 import ModdleCopy from './ModdleCopy';
+import BpmnCrossWindowCopyPaste from './BpmnCrossWindowCopyPaste';
 
 export default {
   __depends__: [
     CopyPasteModule
   ],
-  __init__: [ 'bpmnCopyPaste', 'moddleCopy' ],
+  __init__: [ 'bpmnCopyPaste', 'moddleCopy', 'bpmnCrossWindowCopyPaste' ],
   bpmnCopyPaste: [ 'type', BpmnCopyPaste ],
-  moddleCopy: [ 'type', ModdleCopy ]
+  moddleCopy: [ 'type', ModdleCopy ],
+  bpmnCrossWindowCopyPaste: [ 'type', BpmnCrossWindowCopyPaste ]
 };

test/spec/features/copy-paste/BpmnCrossWindowCopyPasteSpec.js

@@ -0,0 +1,102 @@
+import { inject, bootstrapModeler } from 'test/TestHelper';
+
+import bpmnCrossWindowCopyPasteModule from 'lib/features/copy-paste/';
+import bpmnCopyPasteModule from 'lib/features/copy-paste';
+import copyPasteModule from 'diagram-js/lib/features/copy-paste';
+import coreModule from 'lib/core';
+import modelingModule from 'lib/features/modeling';
+
+describe('features/window-copy-paste', function() {
+  var testModules = [
+    bpmnCrossWindowCopyPasteModule,
+    bpmnCopyPasteModule,
+    copyPasteModule,
+    coreModule,
+    modelingModule,
+  ];
+
+  var basicXML = require('./basic.bpmn');
+
+  beforeEach(
+    bootstrapModeler(basicXML, {
+      modules: testModules,
+    })
+  );
+
+  this.beforeAll(function() {
+    if (!navigator.clipboard) {
+      navigator.clipboard = {};
+    }
+    var content = '';
+    navigator.clipboard.writeText = (text) => {
+      content = text;
+      return Promise.resolve();
+    };
+    navigator.clipboard.readText = () => Promise.resolve(content);
+  });
+
+  describe('revive string', function() {
+    it('should pass with valid JSON', inject(async function(
+        elementRegistry,
+        copyPaste,
+        clipboard,
+        eventBus
+    ) {
+
+      var startEvent = elementRegistry.get('StartEvent_1');
+      copyPaste.copy(startEvent);
+
+      // get tree from clipboard
+      var tree = clipboard.get();
+
+      await new Promise((resolve) => setTimeout(resolve, 100));
+      eventBus.fire('canvas.focus.changed', { focused: true });
+
+      // get revived tree from system clipboard
+      await new Promise((resolve) => setTimeout(resolve, 100));
+      var revived_tree = clipboard.get();
+
+      // strip di properties
+      tree['0'].forEach((element) => delete element.di);
+      revived_tree['0'].forEach((element) => delete element.di);
+
+      // check that revived tree is identical to the original tree
+      expect(revived_tree).to.jsonEqual(tree);
+    }));
+
+    it('should fail with invalid JSON', inject(async function(eventBus, clipboard) {
+      navigator.clipboard.writeText('invalid JSON string');
+
+      await new Promise((resolve) => setTimeout(resolve, 100));
+      eventBus.fire('canvas.focus.changed', { focused: true });
+
+      await new Promise((resolve) => setTimeout(resolve, 100));
+      var revived_tree = clipboard.get();
+
+      // check that revived tree is empty
+      expect(revived_tree).to.be.undefined;
+    }
+    ));
+  });
+
+  // Test copy/paste into system cliboard
+  describe('copy/paste into system clipboard', function() {
+    it('should copy into system clipboard', inject(function(
+        elementRegistry,
+        copyPaste
+    ) {
+
+      // create mock JSON string
+      var startEvent = elementRegistry.get('StartEvent_1'),
+          mockString = JSON.stringify(startEvent);
+
+      // triggers copy event, which triggers system copy.
+      copyPaste.copy(startEvent);
+
+      // checks that system copy is identical to the input string.
+      navigator.clipboard.readText().then((text) => {
+        expect(text).to.equal(mockString);
+      });
+    }));
+  });
+});