Skip to content

Bendpoints module introduces an "unexpected" side-effect #965

@AdamBanham

Description

@AdamBanham

While building out an modeller for myself, I came across the following side-effect. Is it intended or can it be avoid via a custom interaction service, i.e. 'bendpoints.mousemove'?

Describe the Bug

Including the 'Bendpoints' Module prevents interaction events being used by other services, such as interaction services consuming 'element.mousemove' as suggested by the 'InteractionEvents' module.

'Bendpoints' module's likely lines related to issue:

function bindInteractionEvents(node, eventName, element) {
domEvent.bind(node, eventName, function(event) {
interactionEvents.triggerMouseEvent(eventName, event, element);
event.stopPropagation();
});
}

UPDATE: another line that likely needs to checked is the element.out event handler that removes interaction events; it seems like it should only remove interactions if the element is a connection.
eventBus.on('element.out', function(event) {
interactionEvents.unregisterEvent(event.gfx, 'mousemove', 'element.mousemove');
});

'InteractionsEvents' module contract:

/**
* A plugin that provides interaction events for diagram elements.
*
* It emits the following events:
*
* * element.click
* * element.contextmenu
* * element.dblclick
* * element.hover
* * element.mousedown
* * element.mousemove
* * element.mouseup
* * element.out
*
* Each event is a tuple { element, gfx, originalEvent }.
*
* Canceling the event via Event#preventDefault()
* prevents the original DOM operation.
*
* @param {EventBus} eventBus
* @param {ElementRegistry} elementRegistry
* @param {Styles} styles
*/
export default function InteractionEvents(eventBus, elementRegistry, styles) {

It feels like the 'Bendpoint' module is intended to consume element.mousemove on connections, which is fine, but has a side-effect of consuming all mousemove for all shape types. In making my modeler, I made connections below the shapes so they will overlap with shape bounding boxes and seems like the common approach to handle connections, albeit a bit lazy. It would be nice if mousemove events could be propagated to shapes. Within my modeller, I consume both 'element.mousemove' and 'connect.move', its seem that only 'element.mousemove' are being consumed.

Steps to Reproduce

Steps to reproduce the behavior:

  1. Add an interaction service, which does some foobar function on element.hover, e.g. changing state for rendering.
  2. Include the 'Bendpoints' module within the modules for the diagram.
  3. Attempt to trigger element.mousemove and notice that the state has not changed.

I have reconstructed the issue in a codepen: https://codepen.io/AdamBanham/pen/JojmJyz

Demonstrative Evidence

In the modeler I am building, I can see the following behaviour between an interaction service and the addition of the Bendpoints module.

Reported Behavior Before Bendpoints

On 'element.hover' and 'element.mousemove', the role within the fact type changes colour to show if the role is available or connected.
(This foobar flips state on the shape for a fact type, then when rendering a opacity overlay is added).
https://github.com/user-attachments/assets/b17cadd3-af9c-46f8-806c-0f2d0d5c40a0

Reported Behavior After Bendpoints

When bendpoints is added the hover and mousemove events seem to be not triggered.
https://github.com/user-attachments/assets/25d68f84-437e-4659-bf89-4560e9994a05

Expected Behaviour

I expected that the interaction services would still get their events propagated down the dom tree to my custom service. It seems that 'element.hover' is propagated but 'element.mousemove' is not.

Environment

Please complete the following information:

  • Browser: vscode-extension inside a webview using node 18
  • OS: Windows 11
  • Library version: 15.2.4

Metadata

Metadata

Assignees

Labels

backlogQueued in backlogbugSomething isn't working

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions