Add BPMN editor extension#484
Conversation
New web-app-bpmn extension using bpmn-js with properties panel for editing and viewing .bpmn process diagrams in OpenCloud Web.
|
Mind to add a few screenshots to the PR? Havent looked in detail, but it looks pretty solid from afar! One nitpick: would you mind porting the vue component to the script setup syntax? |
New web-app-bpmn extension using bpmn-js for editing and viewing .bpmn process diagrams in OpenCloud Web. Features: - bpmn-js Modeler with full palette and toolbar for editing - Properties panel for element attributes (names, conditions, etc.) - Properties panel toggle to maximize canvas space - Read-only Viewer mode - SVG export - Minimap for navigation on large diagrams - Fit-to-viewport button - Ctrl+S / Cmd+S keyboard shortcut to save - New file menu integration with empty BPMN template - German translations - Podman pod dev setup (dev/podman/) without Traefik dependency
|
some low hanging fruits added to the bpmn app, feel free to squash them into one commit, if you want it as one commit. Also find a screenshot below (added a podman dev setup as well as a bonus for it). 
|
|
The screenshot looks nice, thanks! I'm not so convinced that we need or want the podman script in this repo. That's what we have the docker compose stack for. AFAIK you can also start compose projects with podman, right? Anyhow that seems to be a separate concern from this PR. Apart from that it would be nice to have at least some simple e2e smoke tests that verify that a simple file can be loaded/created/saved. |
JammingBen
left a comment
JammingBen
left a comment
There was a problem hiding this comment.
Thanks for the addition! I have a few nitpicks, but overall this looks really good. We have some issues with missing app- and file-type icons, but that's actually an issue in the main app. I will have a look.
Please remove the podman setup though. All our dev-setups work with Docker and we'd like to keep this streamlined for simplicity.
| <div id="bpmn-app" class="bpmn-app"> | ||
| <div class="bpmn-toolbar"> | ||
| <button :title="$gettext('Fit diagram to viewport')" @click="fitViewport"> | ||
| <span aria-hidden="true">⊞</span> |
There was a problem hiding this comment.
I'd rather have real svg icons here to match with the overall design. E.g.
<oc-icon name="download" size="small" />
You can check out https://remixicon.com/ for a list of available icons.
| const canvasEl = ref<HTMLElement>() | ||
| const propertiesEl = ref<HTMLElement>() |
There was a problem hiding this comment.
| const canvasEl = ref<HTMLElement>() | |
| const propertiesEl = ref<HTMLElement>() | |
| const canvasEl = useTemplateRef<HTMLElement>('canvasEl') | |
| const propertiesEl = useTemplateRef<HTMLElement>('canvasEl') |
| }) | ||
| </script> | ||
|
|
||
| <style> |
There was a problem hiding this comment.
| <style> | |
| <style scope> |
Scoping should be possible here, no?
3 participants
Adds a new web-app-bpmn extension that enables creating, opening and editing BPMN 2.0 process diagrams (.bpmn files) directly in OpenCloud Web.
The extension embeds https://bpmn.io/toolkit/bpmn-js/ as a native Vue component (no iframe) and includes:
Architecture follows the same pattern as the existing web-app-draw-io extension.
Related Issue
How Has This Been Tested?
Types of changes