camunda / improved-canvas Goto Github PK

View Code? Open in Web Editor NEW

0.0 4.0 0.0 2.33 MB

License: MIT License

CSS 4.67% JavaScript 95.33%

improved-canvas's Introduction

@camunda/improved-canvas

Improvements or reworks of the bpmn-js canvas.

Installation

Install via npm.

npm install @camunda/improved-canvas

Usage

For the BPMN modeler use the BpmnImprovedCanvasModule.

import { BpmnImprovedCanvasModule } from '@camunda/improved-canvas';

const modeler = new Modeler({
  additionalModules: [
    BpmnImprovedCanvasModule
  ]
});

For the BPMN viewer use the HighContrastCanvasModule.

import { HighContrastCanvasModule } from '@camunda/improved-canvas';

const viewer = new NavigatedViewer({
  additionalModules: [
    HighContrastCanvasModule
  ]
});

License

MIT

improved-canvas's People

Contributors

Watchers

improved-canvas's Issues

Selection lines follow element shape

What should we do?

Selection lines follow element shape instead of always being square.

Screen.Recording.2023-10-17.at.22.06.23.mov

See Prototype: https://philippfrom.me/hackdays-2023/

Why should we do it?

Part of canvas rework effort, see https://github.com/camunda/product-hub/issues/1653

Bump diagram-js-grid to 1.0.0

diagram-js-grid 0.2.0 does not enable the grid by default and requires the gridSnapping module to be present to actually show the grid.
This prevents the grid from showing up in Play which uses a NavigatedViewer (Can be worked around by appending the Grid module from Play).
It should be fixed in 1.0

Create/append shortcuts don't work

Describe the Problem

As a power user I want to use the known c and a shortcuts to create and append respectively.

Expected Behavior

c and a (without a node selected) trigger create
a (with a node selected) triggers append

Append menu should only show elements that can be appended

The append menu shows every single option regardless of whether it can actually truly be appended (created and connected). While this is in line with the idea of never blocking the users and letting them model while we make sure the diagram is valid at all times, it begs the question: Does it always make sense to offer every single option?

Example: Event-based gateway

Very few elements can be appended, but they're buried among all the other elements.

Example: Compensation boundary event

Compensation activities are the only appendable elements, but they're buried among all the other elements.

Remove plus from comments icon

The plus inside the comments icon is misleading and should be removed.

Tooltips Not Visible

Since context pad has overflow: hidden tooltips are not visible.

Implement context pad for DMN

What should we do?

Implemented new and updated context pad + high contrast canvas for DMN:

Context pad for DMN

Why should we do it?

As part of the intuitive modeling initiative, see https://github.com/camunda/product-hub/issues/1948

Change order of context pad entries to account for left to right modeling

The current order of the context pad entries is opposite to the modeling direction. Modeling is left to right, while the most commonly used context pad icons are on the left. We should change the order to account for left to right modeling and to minimize cursor movement.

Error When Selecting Label

When selecting a label, there is an error because the delete entry does not exist but ShowCommentsContextPadProvider still attempts to move it. As a result the context pad doesn't open.

Slack discussion: https://camunda.slack.com/archives/C032H77434N/p1709752551324989

Call-to-action entry produces accessibility issue

The new call-to-action entry is a <div> element but has a aria-label attribute and no role attribute which produces an accessibility error.

Improve New Append Feature

Feedback indicates that the new append feature is hard to discover and that quick appending of common elements (tasks, gateways, and end events) is missing.

Tasks

Beta Give feedback

Make feature easy to discover
Reintroduce quick appending of tasks, gateways and end events
Options

Boundary event can be attached to a receive task after event based gateway

Describe the Bug

User should not be able to attach a boundary event to a receive task connected to an event-based gateway.

Screen.Recording.2024-08-13.at.17.22.42.mov

Steps to Reproduce

See above.

Expected Behavior

No button.

Environment

Browser: [e.g. IE 11, Chrome 69]
OS: [e.g. Windows 7]
Library version: [e.g. 2.0.0]

Reported via https://camunda.slack.com/archives/C0693F1NFK5/p1723550421987049

Use properties panel tooltips for context pad

What should we do?

Use properties panel tooltips in context pad:

Requirements for tooltip integration:

Export Tooltip component in @bpmn-io/properties-panel (bpmn-io/properties-panel#321)
Support configuration of tooltip orientation (#20)

Why should we do it?

As part of #5

Implement high contrast canvas

What should we do?

Update canvas colors in order to improve contrast while modeling:

background to grey
palette, properties panel header and web modeler framing to white
other minor adjustments

Why should we do it?

Part of canvas rework effort, see https://github.com/camunda/product-hub/issues/1648

Append node should be positioned relative to boundary event's position

The append node is always shown on the right. When a boundary event attached at the bottom of a task (standard) is selected, the append node looks like it's for the task, not the boundary event. The append node should be placed at the bottom. Likewise, if the boundary event is attached at the top, the append node should be placed at the top.

Embedded Forms not Recognized by Call-to-Action

The call-to-action stays active when an embedded form exists.

It should be inactive for both embedded and linked forms.

Add Feedback Button

Figma: https://www.figma.com/file/IgSje32PvhUfRFcE79rgka/Simplify-BPMN-Modeling-on-the-Canvas?type=design&node-id=1013-4714&mode=design&t=ehZ6I1YhJV3TpbQy-0

Support "call to action" entry in context pad

What should we do?

Support a highlighted context pad entry (which will be used for resource linking in bpmn):

Why should we do it?

As part of the intuitive modeling initiative, see https://github.com/camunda/product-hub/issues/1917

Append Node Shown When Connection Selected

The append node can be shown when a connection is selected since the check whether the popup menu would be empty returns false if there are any regular or header entries (web modeler adds a header entry for market place). We cannot rely on that check. We should never show the append node for connections and never show it if there are only header entries.

brave_LhbXa2gGjq.mp4

Connect arrow doesn't support drag

Describe the Problem

Nothing happens on dragging connection icon.

Expected Behavior

User should be able to "drag start" arrow to connect to other elements.

Context pad in front of create and attach pads

Since the context pad can now be below the element we have to ensure the create and attach pads are always in front of it.

Remove button is not displayed for external labels

Implement updated context pad + append

What should we do?

Implemented new and updated context pad:

#8
#9
#11
- #13
- ~~append only append-able items~~
- #12
#18

Related issues:

Related improvements/bugs:

See figma

Why should we do it?

As part of the intuitive modeling initiative, see https://github.com/camunda/product-hub/issues/1505

Resize handle covered at default zoom level

Describe the Bug

For resizable elements that also allow appending like subprocesses the right resize handle is covered by the append button at the default zoom level. You have to zoom in to be able to use it.

Expected Behavior

At default zoom level you should be able to use all resizers.

Environment

Library version: 1.7.1

Context Pad and Popup Menu Behind Other Elements

Elements like the context pad, the tooltips and the popup menus are hidden behind other elements like the palette and the surrounding application.

Context Pad

Popup Menu

Resource linking should not be shown for blank start events in event subprocesses

Resource linking should not be available for blank start events in event subprocesses.

Importing individual modules does not work

When trying to import HighContrastCanvasModule with import {HighContrastCanvasModule} from '@camunda/improved-canvas'; I get ModuleDependencyError: export 'HighContrastCanvasModule' (imported as 'HighContrastCanvasModule') was not found in '@camunda/improved-canvas' (possible exports: BpmnImprovedCanvasModule, DmnImprovedCanvasModule)

To me, it looks like the respective modules would need to be exported here, too. Or Rollup would have to be configured differently.

But I am no rollup expert, so this whole thing might also be my fault ;)
Happy to provide a PR if that helps.

Popup Menu Position Off

The position of the popup menu isn't always correct.

In bpmn-js it's correct:

In dmn-js it's off:

This seems to be an issue in the core.

Text annotation cannot be appended when participant selected

Describe the Bug

Since the text annotation was removed from the context pad and the append feature is not available for participants it's not possible anymore to append a text annotation to a participant directly.

Expected Behavior

A text annotation can be appended to a participant without workarounds.

Environment

Library version: 1.7.1

Position context pad always on canvas

Describe the issue

As a user I want to have my context pad always accessible. At this time, however, it is easy for the menu to move out of the canvas:

Describe the solution you like

Position the menu relative to the element, but in a smart manner. When there is no place left (or top), position it to the bottom.

If popup menus open, ensure these are positioned in a proper way (away from the element, not hidden if possible, too).

Context

Came up in a user test.

Boundary events can be attached to receive tasks

Describe the Bug

The quick attach feature allows attaching a boundary event to a receive task when the rules wouldn't allow it.

Steps to Reproduce

Create a receive task
Attach a boundary event using the quick attach feature

Expected Behavior

Quick attach is not available for receive tasks.

Environment

Browser: [e.g. IE 11, Chrome 69]
OS: [e.g. Windows 7]
Library version: [e.g. 2.0.0]

camunda / improved-canvas Goto Github PK

improved-canvas's Introduction

@camunda/improved-canvas

Installation

Usage

License

improved-canvas's People

Contributors

Watchers

improved-canvas's Issues

What should we do?

Why should we do it?

Describe the Problem

Expected Behavior

What should we do?

Why should we do it?

Tasks

Describe the Bug

Steps to Reproduce

Expected Behavior

Environment

What should we do?

Why should we do it?

What should we do?

Why should we do it?

What should we do?

Why should we do it?

Describe the Problem

Expected Behavior

What should we do?

Why should we do it?

Describe the Bug

Expected Behavior

Environment

Context Pad

Popup Menu

Describe the Bug

Expected Behavior

Environment

Describe the issue

Describe the solution you like

Context

Describe the Bug

Steps to Reproduce

Expected Behavior

Environment

Recommend Projects

Recommend Topics

Recommend Org