FOUR-25261: Add a way to extend the Modeler node Type Menu for Start Events

README.md

@@ -74,6 +74,49 @@ For more information on Cypress, visit [https://cli.vuejs.org/config/#cypress](h
 
 For more information on Jest, visit [https://jestjs.io](https://jestjs.io).
 
+
+## Extending the Modeler with `modeler-init`
+
+The `modeler-init` event is the main entry point for plugins and extensions to customize the modeler at runtime. It provides several extension points, including:
+- Registering custom nodes
+- Registering BPMN extensions
+- Registering inspector extensions
+- Registering custom dropdown items for nodes
+
+### Unified Example
+
+Below is a unified example that demonstrates how to use `modeler-init` to register a custom node and, after the process is loaded, inject a custom dropdown item for a Start Event node.
+
+```js
+import MyCustomNodeConfig from './MyCustomNodeConfig';
+
+// Listen for modeler-init to register nodes and extensions
+window.ProcessMaker.EventBus.$on('modeler-init', ({ registerNode, registerCustomDropdownData }) => {
+  // Register a custom node (if needed)
+  registerNode(MyCustomNodeConfig);
+
+  // Wait for the process to load before injecting dropdown items
+  window.ProcessMaker.EventBus.$on('modeler-start', ({ modeler }) => {
+    // Find the first Start Event node (or your custom node)
+    const startEventNode = modeler.$store.getters.nodes.find(
+      node => node.type === 'processmaker-modeler-start-event'
+    );
+    if (startEventNode) {
+      // Inject a custom dropdown item
+      modeler.registerCustomDropdownData(startEventNode, {
+        label: 'Custom Start Option',
+        id: 'custom-start-option',
+        dataTest: 'switch-to-custom-start-option',
+      });
+    }
+  });
+});
+```
+
+- Use `registerNode` to add custom nodes.
+- Use `registerCustomDropdownData` to add dropdown items, but only after the process and nodes are loaded (in `modeler-start`).
+- You can also use other extension points provided in the `modeler-init` payload as needed.
+
 ## Architecture
 
 The [entry point](https://webpack.js.org/configuration/entry-context/#entry) for the application is `src/main.js`; this is the "starting point" which is used when running `npm run serve` or `npm run build`.

src/components/modeler/Modeler.vue

@@ -148,6 +148,7 @@
         :is-completed="requestCompletedNodes.includes(node.definition.id)"
         :is-in-progress="requestInProgressNodes.includes(node.definition.id)"
         :is-idle="requestIdleNodes.includes(node.definition.id)"
+        :custom-dropdown-data="customDropdownData"
         @add-node="addNode"
         @remove-node="removeNode"
         @previewNode="[handlePreview($event), setInspectorButtonPosition($event)]"
@@ -451,6 +452,7 @@
       ],
       validPreviewElements,
       centered: false,
+      customDropdownData: [],
     };
   },
   watch: {
@@ -624,7 +626,7 @@
                   fill:  '#1572C2',
                   strokeWidth: 0,
                 },
                 text: { text: event.number , fill: 'white', fontSize: 20, fontWeight: 'bold'},
               },
             });
 
@@ -855,6 +857,20 @@
     registerPreview(config) {
       this.previewConfigs.push(config);
     },
+    registerCustomDropdownData(node, config) {
+      console.log('node', node);
+      console.log('config', config);
+      node.items.push(config);
+
+      this.customDropdownData.push(this.prepareCustomDropdownData(config));
+    },
+    prepareCustomDropdownData(config) {
+      return {
+        label: config.label,
+        nodeType: config.id,
+        dataTest: config.dataTest,
+      };
+    },
     handleToolbarAction(action) {
       if (action.handler instanceof Function) {
         action.handler(this);
@@ -1153,7 +1169,7 @@
       }
     },
     registerStatusBar(component) {
       this.owner.validationBar.push(component);
     },
     /**
      * Register a mixin into a node component.
@@ -2563,6 +2579,7 @@
       registerStatusBar: this.registerStatusBar,
       registerPmBlock: this.registerPmBlock,
       registerPreview: this.registerPreview,
+      registerCustomDropdownData: this.registerCustomDropdownData,
     });
 
     this.moddle = new BpmnModdle(this.extensions);

src/components/nodes/baseStartEvent/baseStartEvent.vue

@@ -45,13 +45,14 @@ export default {
     'processNode',
     'planeElements',
     'isRendering',
+    'customDropdownData',
   ],
   mixins: [highlightConfig, portsConfig, hasMarkers, hideLabelOnDrag, updateIconColor, documentingIcons],
   data() {
     return {
       shape: getEventShape(store.getters.isForDocumenting),
       definition: null,
-      dropdownData: [
+      defaultDropdownData: [
         {
           label: defaultNames['processmaker-modeler-start-event'],
           nodeType: 'processmaker-modeler-start-event',
@@ -80,6 +81,11 @@ export default {
       ],
     };
   },
+  computed: {
+    dropdownData() {
+      return [...this.defaultDropdownData, ...this.customDropdownData];
+    },
+  },
   watch: {
     'node.definition.name'(name) {
       this.shape.attr('label/text', name);