search

process-analytics / bpmn-visualization-js

A TypeScript library for visualizing process execution data on BPMN diagrams
https://process-analytics.github.io/bpmn-visualization-js/
Apache License 2.0
224 stars 31 forks source link

[BUG] mouse pointer/icon change on label hover #294

Closed tbouffard closed 3 years ago

tbouffard commented 4 years ago

Describe the bug The mouse pointer changes when hovering on label (shape or edge): it displays a text edition pointer whereas labels are not editable.

To Reproduce See screenshots. Can be reproduced at least with versions 0.1.1 to 0.1.5 (master branch 171cbcf)

Expected behavior The mouse icon shouldn't show a text edition icon as labels are not editable, nor selectable. This gives wrong direction to user letting him/her think the label is editable.

Screenshots Portion of the B.2.0.bpmn file from BPMN-MIWG rendered with version 0.1.4 mouse_pointer_edition_icon_on_label_hover .

Desktop

Additional context This may be the default mxGraph behaviour, some configuration is already setup to avoid label edition. Tests on vanilla mxGraph may be conducted to check if configuration can solve the issue.

tbouffard commented 4 years ago

May be fixed by a mxgraph upgrade. See https://github.com/process-analytics/mxgraph2/commit/1364dcda3ad10459e7702704018d395f5ba6f2d1 (not released at the time of writing, latest is 4.2.0 and doesn't contain this change)

tbouffard commented 3 years ago

The issue still exists with mxgraph 4.2.2 See the https://github.com/process-analytics/pa-technical-challenge/tree/0d28347323e1b2cbc797cf3917ef0af9cdc9c3df

cursor_on_text_over

tbouffard commented 3 years ago

https://cdn.statically.io/gh/process-analytics/bpmn-visualization-examples/0.16.0/examples/diagram-navigation/diagram-navigation/index.html

The text cursor is replaced by a pointer cursor after a pan

cursor_after_pan

After zoom, we still see the text cursor

cursor_after_zoom

tbouffard commented 3 years ago

Explanations about the cursor we see after panning

Original code

<div id="bpmn-container" class="bpmn-container">

Before pan

<div id="bpmn-container" class="bpmn-container" style="position: relative; touch-action: none;">

The style elements are set by mxGraph at initialization.

After pan

<div id="bpmn-container" class="bpmn-container"
     style="position: relative; touch-action: none; cursor: default;">

After panning, the default cursor is set by bpmn-visualization, see #815.

tbouffard commented 3 years ago

Possible fix

In the bpmn container html element, we could set the cursor to default at the initialization (as we do after panning). mxGraph examples don't suffer from the issue. Most of them set the cursor to default in the style property of the container holding the graph directly in the html source code.

Other resources shape setting the cursor. We may decide to find a way to force the default cursor on text generated by mxgraph