Why did a GPort blocking movement of an element?

[rsoika]

I have a strange behaviour with my BPMN Base NodeElements. The challenge is that these elements have a symbol (diamond, circle) and a label underneath.

Using a Sprotty ManhattanRouter leads to the problem, that the Router was unable to compute the correct anchorPoint at the Symbol as the complete element is larger then the Symbol (because oft label underneath).

First I thought that I can implement a custom IAnchorComputer to solve this problem. But this did not work because the Sprotty Router implementations need the elements width/height to compute the best route. So I had still an offset in the routing, even if the Custom IAnchorComputer was able to connect the edge correctly to my Symbol.

So I changed my strategy and come back again using a Port. This seemed like the most obvious and simple solution. I simply added a GPort at the same position and with the same dimensions as the symbol.

public class EventNodeBuilder extends AbstractGNodeBuilder<EventNode, EventNodeBuilder> {
    ....
    @Override
    public void setProperties(final EventNode node) {
        super.setProperties(node);
        node.setName(name);
    
 	node.getChildren().add(BPMNBuilderHelper.createCompartmentHeader(node));
        node.getChildren().add(BPMNBuilderHelper.createPort(node, -20.0, -20.0, "_north"));
    }

    private GPort createPort(final BaseElement node, final Double x, final Double y, final String subId) {
        return new GPortBuilder(ModelTypes.PORT) //
                .id(node.getId() + subId) //
                .position(x, y) //
                .size(40.0, 40.0) //
                .addCssClass("bpmn-port").build();
    }
    .....
}

From the Routing this worked perfectly and there is no more need for custom AnchorComputers as the edges are now connected exactly on my Symbol. And also the routes are computed perfectly.

But the strange behaviour I have now is, that the Element can no longer be moved with the mouse. The Port seems to cover the symbol, making the symbol unreachable. I can still move the complete element when pointing to the label underneath but not when I point to the Symbol with the Port on the same position.

The Implementation of the ShapeView looks like this:

			vnode = (
				// render circle with a event symbol and the label:heading
				<g class-sprotty-node={true} class-mouseover={element.hoverFeedback}>
					<circle r='20' cx='0' cy='0' ></circle>
					<g class-bpmn-symbol={true}>
						<path
							d={eventSymbol} />
					</g>
					{context.renderChildren(element)}
				</g>
			);

the resulting HTML element looks like this:

<g transform="scale(1) translate(0,0)">
   <g class="start sprotty-node event selected" id="bpmn-diagram_0_...." transform="translate(190, 60)">
        <circle r="20" cx="0" cy="0"></circle>
        <g class="bpmn-symbol">
              <path d="M14 7v1H8v6H7V8H1V7h6V1h1v6h6z"></path>
        </g>
        <text class="heading sprotty-label selected" id="bpmn-diagram_0_...." transform="translate(0, 40)">StartEvent0</text>
        <!-- THE PORT --->
        <g id="bpmn-diagram_0_...." transform="translate(-20, -20)" class="bpmn-port">
           <circle r="20" cx="20" cy="20" class="sprotty-port"></circle>
        </g>
   </g>
</g>

I wonder what I did wrong or what I missed here. And I don't think that's a Sprotty problem. Does anyone have an idea what could be the problem?

[tortmayr]

Without having a look at your actual code it's kind of hard to say and I can only make some educated guesses.

The ChangeBoundsTool (i.e. user driven resize or move) is tightly coupled with the element selection.
The selection tool always tries to select the topmost element at the current mouse position. If this element is not selectable it navigates up the parent hierarchy and looks for selectable elements there.
I'd assume that your port is selectable and rendered on top of your symbol. Hence when you point to the symbol area you actually select the port and the port itself is not movable.
How do you configure your port model element? There is the possibility to disable certain model features during configuration:

    configureModelElement(context, 'myPort', SPort, RoundedCornerNodeView, { disable: [selectFeature] });

Once the selectFeature is disabled, the port itself is no longer selectable and the selection tool should actually select the entire element (same as for the label).

[rsoika]

hm..., ok this sounds promising,

my latest strategy goes in a similar direction: I define a new Model Element (BPMNPort) which extends the SPort and adds the 'moveFeature'

export class BPMNPort extends SPort  {
    static readonly DEFAULT_FEATURES = [connectableFeature,boundsFeature,hoverFeedbackFeature, moveFeature];
}

Than I register the custom port with a custom view:

    configureModelElement(context, 'port', BPMNPort, SymbolPortView);

... this seems to work (but at the moment I have a mess of try-and-error-code, which I need to clean up first). I will try both approaches ....

I was not aware of the possibilities of the configureModelElement method. Also which features a available and how they behave. Maybe this variant to configure Model elements is valuable to become part of the existing documentation.

[rsoika]

Thanks again! Disabling the selectFeature did the trick. Puh this was a long long journey.... As it is hard to guess, I have now updated my Anchors and Ports tutorial:

https://github.com/imixs/open-bpmn/blob/master/doc/SPROTTY_ANCHORS_AND_PORTS.md

Maybe you can take this for your documentation. Or when I get old, I might start writing a book about it ;-)