search

bpmn-io / bpmn-js

A BPMN 2.0 rendering toolkit and web modeler.
https://bpmn.io/toolkit/bpmn-js/
Other
8.69k stars 1.34k forks source link

Support create/append anything #1627

Closed nikku closed 1 year ago

nikku commented 2 years ago

Is your feature request related to a problem? Please describe.

Currently our modeling experience is geared towards quickly building end to end BPMN diagrams. We're a little bit reluctant on modeling for execution use-cases; each and every task has to be manually upgraded when modeling for execution. At the same time we've received feedback in the past that people don't know how to model X, where X is any element (parallel gateway, service task) that people do not see in the palette / context pad. The replace menu, the one thing they need to understand is hard to spot, at times.

Describe the solution you'd like

A way to to create/append any element from the palette (create) and context pad (append):

Breakdown:

Step 1: New replace menu + reworked popup menu foundations: ✅

Step 2: Create/append anything:

Follow-ups to consider:

Describe alternatives you've considered

Keep our two step approach to model anything.

Additional context

See element template chooser UX for a working simple UI component.

A prototype that sketches how this feature could look like:

capture IWCm2c_optimized

Related to forum post.

Cf. also discovery board.

Cf. connectors solution architecture.

nikku commented 2 years ago

Announced via forum and pushed a running version to our BPMN modeling demo.

gvlx commented 2 years ago

[copy from reply in forum]

Hi,

Choose next object menu:

It is nice but still a little bit cumbersome => interaction sequence (click, click, type/scroll, click, place, release).

suggestion

Would you consider the following: hovering an object (from the diagram or from the sidebar) [target] over a compatible object [source] creates a link source->target immediately. => interaction sequence (click, hover to source, wait 300/600 ms, place, release).

Enclose in pool

The pool works on all flows. So even if you have two flows, both of them will be in the same pool.

suggestion

It should only create a poll on:

Best regards,

smbea commented 2 years ago

Working on adding UI for replace anything: https://github.com/bpmn-io/bpmn-js/compare/develop...add-replce-anything

Untitled

Before going forward with this approach and adding some tests, I want to present to team and have some feedback.

barmac commented 2 years ago

I am wondering what happens to the plain old PopupMenu after we implement this. If I understand it correctly, the diagram-js infra is too inflexible for us to have create/append anything based on this.

smbea commented 2 years ago

Currently I am still using PopupMenu logic of having the providers and using it to feed the entries. Of course this can be re-implemented on the new search PopupMenu. But I think maybe we should keep the original PopupMenu at least for now, for backwards compatibility.

barmac commented 2 years ago

But I think maybe we should keep the original PopupMenu at least for now, for backwards compatibility.

For sure, as we use it now also for the alignment/distribution buttons :)

However, if I am not missing anything, the search menu does not use the popupMenu to gather entries, does it?

smbea commented 2 years ago

Technically correct, the replace anything menu. This is where the "searchPopupMenu.open" is called.

Now that I'm seeing this again, this part could be generalised and we could simple have a ReplaceMenuProvider (already exists), AppendMenuProvider, CreateAnythingProvider to have the specific entries. And replace replaceMenu.open(...) with searchPopupMenu.open(element, provider, ...). But in any case, we will still be using the popUpMenu providers logic.

barmac commented 2 years ago

The problem with the diagram-js popupMenu I wanted to signal with:

If I understand it correctly, the diagram-js infra is too inflexible for us to have create/append anything based on this.

is that the popupMenu does not allow the application to freely decide on the structure of the menu. The popupMenu gathers the entries and has a strict way to construct the HTML based on this.

In the case of append/create anything, the structure is totally different:

Untitled-2022-07-20-1054

So instead of entries providers as we have with the popup menu, we will in fact have menu providers, or plainly different menus, as you noticed. Then, to support for example the connectors use case, append menu should also be able to be enriched so that it contains not only plain BPMN elements, but also custom elements.

I hope this helps, and I am happy to discuss this if you want to.

smbea commented 2 years ago

With this the popupMenu UI would stop being used yes, if thats what you are trying to get at. Because of the exact reasons you mentioned. That is why I am only using the original popupMenu for this._popupMenu._getEntries (feature which can be easily migrated to the new one later if hypothetically we chose to remove the original popupMenu)

smbea commented 2 years ago

Some other thoughts:

smbea commented 2 years ago

After a chat with Nico, we decided that it makes sense that the popupMenu be completely replaced by the new UI. For this, we talked about having the UI portion in a separate library (like "diagram-js-ui") that exposes it's own preact version, similarly to properties panel, in order to try to avoid preact version conflicts.

So far, I have:

Next steps:

smbea commented 2 years ago

Current status (22.11.2022): While integrating diagram-js we noticed a few more small issues with the new popup menu, tracked in https://github.com/bpmn-io/diagram-js/issues/686 (currently one 1 issue left to fix).

Next steps:

nikku commented 2 years ago

I believe all remaining (diagram-js) items will be closed via https://github.com/bpmn-io/diagram-js/pull/710 + linked pull requests.

smbea commented 2 years ago

The first part of the epic - new popup menu - has been implemented and released with bpmn-js@11.0.0.

Therefore, will move on to allowing "replace with templates" in camunda-bpmn-js(https://github.com/camunda/camunda-bpmn-js/issues/204)

smbea commented 2 years ago

With Modeler v5.6.0, we are releasing the new popup menu. But we are leaving "replace with templates" out for now because we need to ensure usage of camunda-bpmn-js together with the connectors extension works properly (issue https://github.com/camunda/camunda-bpmn-js/issues/211)

The shortcuts for the the replace menu will be added in a later release too.

berghall commented 1 year ago

+1 waiting for this!

smbea commented 1 year ago

Replace everything has been fully integrated into desktop modeler with v5.7.0.

Currently working on adding append to the context pad #1801. There are some things that need to be added/fixed first to support the append behaviour we defined:

smbea commented 1 year ago

With https://github.com/bpmn-io/bpmn-js/pull/1811, we made the decision to encapsulate the create/append feature within a module. This way users can opt out of this if not wanted. This will be done fully after https://github.com/bpmn-io/bpmn-js/pull/1815.

smbea commented 1 year ago

There are two more items that are defined and easily implemented regarding the append menu:

I would argue that after those are done, we have a good solid base to integrate in camunda-bpmn-js and add the template entries. There are remaining follow ups linked on this issue description which can be tackled in a following iteration.

Feel free to point out if you think any of those should be handled in this iteration.

cc @nikku

nikku commented 1 year ago

Makes sense.

In terms of impact, I'd love to see https://github.com/bpmn-io/bpmn-js/issues/1621 addressed, because it makes non-keyboard discovery substantially simpler.

smbea commented 1 year ago

That would be my next priority. I completely agree with the potential that feature has 🙂

smbea commented 1 year ago

Append/create anything have been included in Modeler 5.8. The missing features (Append/create templates + modeler shortcuts) are likely to be included in the next release

smbea commented 1 year ago

The implementation for this topic has been concluded. There are of course some improvements and bugs reported but I think they can be picked up overtime and we can close this issue.

Some of the issues I gathered:

Improvements:

Bugs:

I will move on to work on documentation and etc, tracked on the parent issue.

SanderBreivik commented 1 year ago

Hi! I do not know if this is the right place. But is it possible to remove the append menu from the pallete? I have tried to create my own provider with my own getPalleteEntries where i delete the 'append' menu, but it still shows.

smbea commented 1 year ago

@SanderBreivik Please have a look at our forum, here is a post regarding that topic: https://forum.bpmn.io/t/custom-appen-element-popmenu/8807/2. If you still have trouble with this, please create a forum post and feel free to share you current implementation

SanderBreivik commented 1 year ago

Thanks @smbea! I found the problem: I forgot to add what I assume is a priority number (the 500 in this): this._contextPad.registerProvider(500,this);

Ken-Scofield commented 7 months ago

Help, how to add "create element" to palette?

nikku commented 7 months ago

Provided nowadays as an extension.