Fixing Loading Issue and Enhancing Parsing for PM Blocks in Process Reloading and Importing

src/components/modeler/Modeler.vue

@@ -637,7 +637,6 @@ export default {
       this.translateConfig(nodeType.inspectorConfig[0]);
       addLoopCharacteristics(nodeType);
       this.nodeRegistry[nodeType.id] = nodeType;
-
       Vue.component(nodeType.id, nodeType.component);
       this.nodeTypes.push(nodeType);
 
@@ -678,6 +677,10 @@ export default {
         : [pmBlockNode.bpmnType];
 
       types.forEach(bpmnType => {
+        if (!this.parsers[bpmnType]) {
+          this.parsers[bpmnType] = { custom: [], implementation: [], default: []};
+        }
+
         if (customParser) {
           this.parsers[bpmnType].custom.push(customParser);
           return;
@@ -835,7 +838,7 @@ export default {
         pull(flowElements, outgoingFlows);
       }
     },
-    setNode(definition, flowElements, artifacts) {
+    async setNode(definition, flowElements, artifacts) {
       const diagram = this.planeElements.find(diagram => diagram.bpmnElement.id === definition.id);
       const bpmnType = definition.$type;
       const parser = this.getCustomParser(definition);
@@ -846,19 +849,20 @@ export default {
       }
 
       this.removeUnsupportedElementAttributes(definition);
-      const type = parser(definition, this.moddle);
 
+      const config = definition.config ? JSON.parse(definition.config) : {};
+      const type = config?.processKey || parser(definition, this.moddle);
+
       const unnamedElements = ['bpmn:TextAnnotation', 'bpmn:Association', 'bpmn:DataOutputAssociation', 'bpmn:DataInputAssociation'];
       const requireName = unnamedElements.indexOf(bpmnType) === -1;
       if (requireName && !definition.get('name')) {
         definition.set('name', '');
       }
 
-      const node = this.createNode(type, definition, diagram);
-
+      const node = await this.createNode(type, definition, diagram);
       store.commit('addNode', node);
     },
-    createNode(type, definition, diagram) {
+    async createNode(type, definition, diagram) {
       if (Node.isTimerType(type)) {
         return new TimerEventNode(type, definition, diagram);
       }
@@ -963,8 +967,7 @@ export default {
       const { x, y } = this.paperManager.clientToGridPoint(clientX, clientY);
       diagram.bounds.x = x;
       diagram.bounds.y = y;
-
-      const newNode = this.createNode(control.type, definition, diagram);
+      const newNode = await this.createNode(control.type, definition, diagram);
 
       if (newNode.isBpmnType('bpmn:BoundaryEvent')) {
         this.setShapeCenterUnderCursor(diagram);

src/setup/registerPmBlock.js

@@ -0,0 +1,9 @@
+import bpmnExtension from '@processmaker/processmaker-bpmn-moddle/resources/processmaker';
+
+const nodeTypes = window.ProcessMaker.pmBlockNodes;
+
+export default function registerPmBlock({ registerPmBlock, registerBpmnExtension }) {
+  nodeTypes.forEach(config => registerPmBlock(config));
+
+  registerBpmnExtension('pm', bpmnExtension);
+}

tests/e2e/specs/CopyElements.cy.js

@@ -84,10 +84,10 @@ describe('Copy element', { scrollBehavior: false }, () => {
     waitToRenderAllShapes();
 
     cy.get('[data-test=copy-button]').click();
-
+    
     cy.get('.paper-container').click('center', { force: true });
     cy.get('body').type('{ctrl}v');
-
+    
     waitToRenderAllShapes();
 
     const process = `

tests/e2e/specs/UndoRedo.cy.js

@@ -216,7 +216,7 @@ describe('Undo/redo', { scrollBehavior: false }, () => {
     clickAndDropElement(nodeTypes.sendTweet, sendTweetPosition);
 
     const testConnector = '<bpmn:serviceTask id="node_2" name="Test Connector" pm:config="{&#34;testMessage&#34;:&#34;&#34;}" implementation="test-message" />';
-    const sendTweet = '<bpmn:serviceTask id="node_5" name="Send Tweet" pm:config="{&#34;tweet&#34;:&#34;&#34;}" implementation="processmaker-social-twitter-send" />';
+    const sendTweet = '<bpmn:serviceTask id="node_6" name="Send Tweet" pm:config="{&#34;tweet&#34;:&#34;&#34;}" implementation="processmaker-social-twitter-send" />';
 
     assertDownloadedXmlContainsExpected(testConnector, sendTweet);
 

tests/e2e/support/utils.js

@@ -388,7 +388,6 @@ export function assertBoundaryEventIsCloseToTask() {
 export function addNodeTypeToPaper(nodePosition, genericNode, nodeToSwitchTo) {
   clickAndDropElement(genericNode, nodePosition);
   waitToRenderAllShapes();
-  cy.get('[data-test=select-type-dropdown]').click();
   cy.get(`[data-test=${nodeToSwitchTo}]`).click();
 
   cy.get('body').then($body => {
@@ -447,7 +446,6 @@ export function getIframeDocumentation() {
  */
 export function selectComponentType(component, type) {
   cy.get(component).first().click({ force:true });
-  cy.get('[data-test="select-type-dropdown"]').click();
   cy.get('[data-test="'+type+'"]').click();
   cy.get('[class="btn btn-primary"]').should('be.visible').click();
 }