How to draw HelperLines into the diagram?

[rsoika]

I want to implement a HelperLine UIExtension that displays helper lines when the user is moving a node element in the diagram. The goal is to give visual feedback for aliment several elements in line.

My first question was how to get a event listener reacting on a mouse-move event. I think I solved this by registering a MouseListener and injecting a SelectionService. So I am now able to calculate helper lines based on the surrounding elements. (I'm a bit proud that I was able to solve this).

But now I need some help how to draw some lines into the diagram out from my MouseMove event. I have the selected Element (SModelElement) and the root element (SRootElement)

I think the Helper Line Feature can be in some way similar to the marquee tool. So I tried to implement a HelpLIneNode and a HelpLineView......

export class HelpLineNode extends SShapeElement {
   ....
}

@injectable()
export class HelpLineView extends ShapeView {
    
    render(element: HelpLineNode, context: RenderingContext): VNode | undefined {
        // render lines...
       .....
   }
....
}

In the render method I can render some SVG lines or rectangle showing the alignment hints. That's my idea so far.....

But is this the right approach? What I did not figure out is how to add or remove an instance of my HelpLineNode to the Diagram Root as a reaction to the current mouseMove event.

Is this possible or is it an idiotic idea? I had already thought about of simply painting lines into the diagram within my UIExtension, but that feels kind of wrong.

[rsoika]

I think I found a simple solution.

In the mouseMove event you can select the 'closest' svg element, which is the diagram panel. And this svgParentElement can be used to draw lines directly into the diagram using SVG:;

	override mouseMove(target: SModelElement, event: MouseEvent): Action[] {
		// fetch the SVG element from the diagram panel...
		const targetElement = event.target instanceof SVGElement ? event.target : undefined;
		const svgParentElement = targetElement?.closest('svg');
		if (svgParentElement) {
			// draw a line...
			const newLine = document.createElementNS('http://www.w3.org/2000/svg','line');
			newLine.setAttribute('id','line2');
			newLine.setAttribute('x1','0');
			newLine.setAttribute('y1','0');
			newLine.setAttribute('x2','200');
			newLine.setAttribute('y2','200');
			newLine.setAttribute("stroke", "green");
			svgParentElement.appendChild(newLine);
		}
		return [];
	}

[planger]

Hi,

You are making already great progress and are diving into the pretty advanced stuff in GLSP! Great!

However, I'm not sure I'd recommend to create elements directly in the DOM from your mouse tool to draw something on the diagram as you suggest in your answer.
Instead, the best approach is to return actions from your mouse event methods (such as mouseMove(...)), which trigger commands creating or modifying the GModel. In fact, this why mouse event methods can return actions: to trigger actions and potentially commands that manipulate the GModel.

A good example could be the Marquee feature:
Once the marquee tool is enabled, it registers the MarqueeMouseListener. This mouse listener returns an action -- the DrawMarqueeAction in particular, which is registered to trigger the DrawMarqueeCommand, which in turn adds a marquee GModel element to the GModel. This GModel element is then translated into SVG by the registered MarqueeView.

As you can see, this way, we benefit from the whole Sprotty approach, because

• we can natively return actions that
• trigger commands that
• modify the GModel by adding GModel elements to
• render an SVG view
  This is pretty flexible, as it can be easily customized downstream later, e.g. by replacing the command, replacing the view, etc.

As mentioned in my answer to your other question, this sounds like a very interesting generic feature for GLSP, in case you'd be interested to contribute that. Thanks!

[rsoika]

@planger I followed all your advice and finally completed the feature.

You can check the implementation here:
https://github.com/imixs/open-bpmn/blob/imixs-bpmn.glsp-0.0.9-draft-01/open-bpmn.glsp-client/open-bpmn-glsp/src/bpmn-helperlines.tsx

To integrate the module, the following bindings are needed:

    // bpmn helper lines
    bind(TYPES.MouseListener).to(HelperLineListener);
    configureCommand({ bind, isBound }, DrawHelperLinesCommand);
    configureCommand({ bind, isBound }, RemoveHelperLinesCommand);
    configureView({ bind, isBound }, 'helpline', HelperLineView);

I will contribute this to your project if you like to reuse it or to customize it.

For my BPMN elements I need to customize this solution now anyway. This is because the BPMN elements (Symbol and text underneath) is still a challenge to compute the correct center-point for the alignment.

For the routing I solved this with a Port (same dimensions as the symbol) , but the uncommon layout requires again some tweeks for the helper lines.

A SModelElement has only 'bounds', but what I always do missing is something additional like 'drawingBounds' or 'symbolBounds' providing the inner-bounds of an element responsible for routing and helper lines... But this is a different topic I think.

[planger]

Very nice! 👍 We'll look into it and get back to you how to integrate this. I've created an issue to track that. Thanks!