feat(embedding): feature shared clipboard

Allows to try out keyboard shortcuts in a more advanced scenario.

Author: nikku

embedding/src/app.js

@@ -9,28 +9,53 @@ import BpmnModeler from 'bpmn-js/lib/Modeler';
 import BpmnViewer from 'bpmn-js/lib/Viewer';
 import BpmnNavigatedViewer from 'bpmn-js/lib/NavigatedViewer';
 
+import Clipboard from 'diagram-js/lib/features/clipboard/Clipboard';
+
 const editorMap = {
   'editor': BpmnModeler,
   'viewer': BpmnViewer,
-  'navigated-viewer': BpmnNavigatedViewer,
-  'default': BpmnModeler
+  'navigated-viewer': BpmnNavigatedViewer
+};
+
+const sharedClipboard = {
+  'clipboard': [ 'value', new Clipboard() ]
+};
+
+const additionalModulesMap = {
+  'first-modeler': [
+    sharedClipboard
+  ],
+  'second-modeler': [
+    sharedClipboard
+  ]
 };
 
 const modelers = new Map();
 
+function createModeler(viewerType, config, id) {
+
+  const BpmnJS = editorMap[viewerType] || BpmnModeler;
+
+  const additionalModules = additionalModulesMap[id] || [];
+
+  return new BpmnJS({
+    ...config,
+    additionalModules
+  });
+}
+
 async function openDiagram(element) {
 
   const diagramURL = element.dataset.diagram;
   const viewerType = element.dataset.editor;
+  const id = element.id || '__default';
 
-  const BpmnJS = editorMap[viewerType] || editorMap.default;
-
-  const diagramXML = await fetch(diagramURL).then(response => response.text());
-
-  const modeler = new BpmnJS({ container: element });
+  const modeler = createModeler(viewerType, { container: element }, id);
 
   modelers.set(element, modeler);
 
+  const diagramXML = await fetch(diagramURL).then(response => response.text());
+
   await modeler.importXML(diagramXML);
 }
 

embedding/src/index.html

@@ -17,8 +17,8 @@ <h1>Embedding example</h1>
 
     <div class="diagram-grid single">
       <figure>
-        <div class="canvas" data-diagram="./diagrams/overview.bpmn"></div>
-        <figcaption>BPMN Modeler</figcaption>
+        <div class="canvas" data-diagram="./diagrams/second.bpmn" data-editor="navigated-viewer"></div>
+        <figcaption>BPMN Navigated Viewer</figcaption>
       </figure>
     </div>
 
@@ -30,19 +30,27 @@ <h1>Embedding example</h1>
       Orci vestibulum turpis quis vehicula risus porttitor ornare. Facilisis aenean vivamus turpis quisque elementum condimentum tempus. Nisi orci sem potenti congue; malesuada himenaeos parturient. Primis sagittis mollis nascetur metus est inceptos platea. Quisque faucibus maximus eget lacinia sit sapien. Ex molestie suspendisse suscipit vehicula nunc. Augue sem facilisis mollis in torquent venenatis sem. Neque natoque phasellus diam habitant turpis pulvinar convallis euismod. Sociosqu bibendum facilisi praesent vitae ornare vehicula ut dapibus lacus.
     </p>
 
+    <div class="diagram-grid">
+      <figure>
+        <div id="second-modeler" class="canvas" data-diagram="./diagrams/overview.bpmn"></div>
+        <figcaption>A BPMN Modeler</figcaption>
+      </figure>
+
+      <figure>
+        <div id="first-modeler" class="canvas" data-diagram="./diagrams/first.bpmn"></div>
+        <figcaption>Another BPMN Modeler</figcaption>
+      </figure>
+    </div>
+
     <p>
       Pretium rhoncus sem metus imperdiet vel hendrerit fusce habitant. Nec elit dictum vitae nam mattis nostra. Fermentum aenean sollicitudin molestie platea nulla risus et at. Et ligula convallis, duis per facilisis et sagittis sollicitudin porta. Cursus bibendum curae porttitor vivamus torquent elementum tempor. Fermentum elementum aliquam lacus praesent eleifend bibendum.
     </p>
 
-    <div class="diagram-grid">
+    <div class="diagram-grid single">
       <figure>
         <div class="canvas" data-diagram="./diagrams/first.bpmn" data-editor="viewer"></div>
         <figcaption>BPMN Viewer</figcaption>
       </figure>
-      <figure>
-        <div class="canvas" data-diagram="./diagrams/second.bpmn" data-editor="navigated-viewer"></div>
-        <figcaption>BPMN Navigated Viewer</figcaption>
-      </figure>
     </div>
 
     <p>