From d67529816ab7ea6ec58c654ea4519931853d3ae2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julio=20Cesar=20Laura=20Avenda=C3=B1o?= Date: Mon, 7 Apr 2025 16:18:59 -0400 Subject: [PATCH 1/6] FOUR-22979 Add advanced properties in inspector --- .../nodes/startEvent/startEvent.vue | 20 ++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/src/components/nodes/startEvent/startEvent.vue b/src/components/nodes/startEvent/startEvent.vue index e246d0702..0aade4637 100644 --- a/src/components/nodes/startEvent/startEvent.vue +++ b/src/components/nodes/startEvent/startEvent.vue @@ -1,6 +1,7 @@ + \ No newline at end of file From e34a286c78017de433ce635a2dd8fdf0c6d6c7e9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julio=20Cesar=20Laura=20Avenda=C3=B1o?= Date: Mon, 7 Apr 2025 16:18:59 -0400 Subject: [PATCH 2/6] FOUR-22979 Add advanced properties in inspector --- .../nodes/startEvent/startEvent.vue | 20 ++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/src/components/nodes/startEvent/startEvent.vue b/src/components/nodes/startEvent/startEvent.vue index e246d0702..0aade4637 100644 --- a/src/components/nodes/startEvent/startEvent.vue +++ b/src/components/nodes/startEvent/startEvent.vue @@ -1,6 +1,7 @@ + \ No newline at end of file From 9282c00b082a218e51863cb2aa29ac6771b2591e Mon Sep 17 00:00:00 2001 From: Rodrigo Date: Thu, 10 Jul 2025 08:43:33 -0400 Subject: [PATCH 3/6] FOUR-25261: Add a way to extend the Modeler node Type Menu for Start Events --- README.md | 43 +++++++++++++++++++ src/components/modeler/Modeler.vue | 17 ++++++++ .../nodes/baseStartEvent/baseStartEvent.vue | 8 +++- 3 files changed, 67 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 5fb325deb..d00dedd30 100644 --- a/README.md +++ b/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`. diff --git a/src/components/modeler/Modeler.vue b/src/components/modeler/Modeler.vue index f11dcd2fd..18f1784e6 100644 --- a/src/components/modeler/Modeler.vue +++ b/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 @@ export default { ], validPreviewElements, centered: false, + customDropdownData: [], }; }, watch: { @@ -855,6 +857,20 @@ export default { 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); @@ -2563,6 +2579,7 @@ export default { registerStatusBar: this.registerStatusBar, registerPmBlock: this.registerPmBlock, registerPreview: this.registerPreview, + registerCustomDropdownData: this.registerCustomDropdownData, }); this.moddle = new BpmnModdle(this.extensions); diff --git a/src/components/nodes/baseStartEvent/baseStartEvent.vue b/src/components/nodes/baseStartEvent/baseStartEvent.vue index e16120ab1..e2404b0a9 100644 --- a/src/components/nodes/baseStartEvent/baseStartEvent.vue +++ b/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); From a13bbe8b3f301559e687cf8d7972d8a1dca06a1c Mon Sep 17 00:00:00 2001 From: Rodrigo Date: Tue, 5 Aug 2025 16:00:12 -0400 Subject: [PATCH 4/6] FOUR-22976 Test for normal properties in inspector --- src/components/modeler/Modeler.vue | 4 ++-- src/components/nodes/startEvent/startEvent.vue | 8 +------- 2 files changed, 3 insertions(+), 9 deletions(-) diff --git a/src/components/modeler/Modeler.vue b/src/components/modeler/Modeler.vue index 18f1784e6..64ad43951 100644 --- a/src/components/modeler/Modeler.vue +++ b/src/components/modeler/Modeler.vue @@ -858,8 +858,8 @@ export default { this.previewConfigs.push(config); }, registerCustomDropdownData(node, config) { - console.log('node', node); - console.log('config', config); + // console.log('node', node); + // console.log('config', config); node.items.push(config); this.customDropdownData.push(this.prepareCustomDropdownData(config)); diff --git a/src/components/nodes/startEvent/startEvent.vue b/src/components/nodes/startEvent/startEvent.vue index 0aade4637..d91e59dc9 100644 --- a/src/components/nodes/startEvent/startEvent.vue +++ b/src/components/nodes/startEvent/startEvent.vue @@ -36,14 +36,8 @@ export default { return; } - if (isEmailStartEnabled(config)) { - this.nodeIcon = emailStartIcon; - this.shape.attr('image/xlink:href', coloredIcon(emailStartIcon, this.node)); - return; - } - this.nodeIcon = null; - this.shape.attr('image/xlink:href', ''); + this.shape.attr('image/xlink:href', null); }, }, }, From 23ea3763c2f6694fbed6746e8b5983db46d69080 Mon Sep 17 00:00:00 2001 From: Rodrigo Date: Tue, 5 Aug 2025 16:01:55 -0400 Subject: [PATCH 5/6] fix lint errors --- src/components/nodes/startEvent/startEvent.vue | 11 ----------- 1 file changed, 11 deletions(-) diff --git a/src/components/nodes/startEvent/startEvent.vue b/src/components/nodes/startEvent/startEvent.vue index d91e59dc9..eff408d5c 100644 --- a/src/components/nodes/startEvent/startEvent.vue +++ b/src/components/nodes/startEvent/startEvent.vue @@ -1,7 +1,6 @@