How to define a resizeable node

[rsoika]

I have a strange situation in my implementation. I want to make an specific GNode element resizeable. But it always snaps back to a computed minimum size based on the label width:

My GNode builder looks quite simple :

public class TaskNodeBuilder extends AbstractGNodeBuilder<TaskNode, TaskNodeBuilder> {
    private final String name;
    public TaskNodeBuilder(final String type, final String name) {
        super(type);
        this.name = name;
        this.addCssClass("task");
        this.addCssClass(type);
        this.addArguments(GArguments.cornerRadius(5));
    }

    @Override
    protected TaskNode instantiate() {
        return BpmnFactory.eINSTANCE.createTaskNode();
    }

    @Override
    protected TaskNodeBuilder self() {
        return this;
    }

    @Override
    public void setProperties(final TaskNode node) {
        super.setProperties(node);
        node.setName(name);

        node.setLayout(GConstants.Layout.HBOX);
        // Set min width/height
        node.getLayoutOptions().put("minWidth", BPMNActivity.DEFAULT_WIDTH);
        node.getLayoutOptions().put("minHeight", BPMNActivity.DEFAULT_HEIGHT);
        node.getLayoutOptions().put("hGap", 10);
        node.getLayoutOptions().put("vAlign", "center");
        node.getChildren().add(BPMNBuilderHelper.createCompartmentIcon(node));
        node.getChildren().add(BPMNBuilderHelper.createCompartmentHeader(node));
    }
}

And also my client implementation has no special settings:

export class TaskNode extends RectangularNode implements Nameable, WithEditableLabel {
	static override readonly DEFAULT_FEATURES = [
		connectableFeature,
		deletableFeature,
		selectFeature,
		boundsFeature,
		moveFeature,
		layoutContainerFeature,
		fadeFeature,
		hoverFeedbackFeature,
		popupFeature,
		nameFeature,
		withEditLabelFeature
	];
	get editableLabel(): (SChildElement & EditableLabel) | undefined {
		const label = this.children.find(element => element.type === 'label:heading');
		if (label && isEditableLabel(label)) {
			return label;
		}
		return undefined;
	}
	get name(): string {
		const labelText = this.editableLabel?.text;
		return labelText ? labelText : '<unknown>';
	}
}

I guess there is a feature missing that allows resizing the element on the client side?

Is there a example somewhere how a resizeable node has to be defined?

Thanks for any hints.

[CamilleLetavernier]

Hi Ralph,

The fact that the node provides resize handles suggests that it is already defined as "resizable". What you need to check first is:

• Which layout do you use, for the resizable node?
• How is the new size set, on the server side, by the ChangeBoundsOperationHandler?

With the updated layouts, I would expect:

• Layout: HBox or VBox
• Size: persisted via the "prefWidth", "prefHeight" attributes (as well as width, height optionally).

[rsoika]

ok, setting prevWidth and prevHeight in the setProperties method I can change the default size.

public class PoolNodeBuilder extends AbstractGNodeBuilder<Pool, PoolNodeBuilder> {
.....
  @Override
    public void setProperties(final Pool node) {
        super.setProperties(node);
        .....
        node.getLayoutOptions().put("prefWidth", 300);
        node.getLayoutOptions().put("prefHeight", 100);
        .....
    }

But I also already set the size when creating the GNode with my builder method:

                TaskNodeBuilder builder = new TaskNodeBuilder(activity.getType(), activity.getName());
                TaskNode taskNode = builder //
                        .id(activity.getId()) //
                        .position(point) //
                        .size(dimension) //
                        .build();

But calling the size method seems not to have any effect.

Anyway, I have also implemented an AbstractOperationHandler<ChangeBoundsOperation> which I use to receive the new dimensions from the client to update my BPMN model. I guess here is something wrong:

public class BPMNChangeBoundsOperationHandler extends AbstractOperationHandler<ChangeBoundsOperation> {

    @Inject
    protected BPMNGModelState modelState;

    @Override
    public void executeOperation(final ChangeBoundsOperation operation) {

        BPMNProcess context = modelState.getBpmnModel().getContext();
        // iterate over all new Bounds...
        try {
            List<ElementAndBounds> elementBounds = operation.getNewBounds();
            for (ElementAndBounds elementBound : elementBounds) {
                String id = elementBound.getElementId();
                GPoint newPoint = elementBound.getNewPosition();
                GDimension newSize = elementBound.getNewSize();
                // find the corresponding BPMN element
                BPMNFlowElement bpmnElement = context.findBPMNFlowElementById(id);
                if (bpmnElement != null) {
                    BPMNBounds bpmnBounds = bpmnElement.getBounds();
                    // for Task Elements update position and size
                    if (bpmnElement instanceof BPMNActivity) {
                        bpmnBounds.updateLocation(newPoint.getX(), newPoint.getY());
                        bpmnBounds.updateDimension(newSize.getWidth(), newSize.getHeight());
                    } else {
                        // for all other elements update the position only
                        BPMNDimension dimension = bpmnBounds.getDimension();
                        bpmnBounds.updateLocation(newPoint.getX(), newPoint.getY());
                        bpmnBounds.updateDimension(dimension.getWidth(), dimension.getHeight());
                    }
                    // Finally we update the Gmodel to avoid a new initialization.
                    Optional<GNode> _node = modelState.getIndex().findElementByClass(id, GNode.class);
                    if (_node.isPresent()) {
                        GNode node = _node.get();
                        node.setPosition(newPoint);
                        node.setSize(newSize);
                    }
                } 

            }
        } catch (BPMNMissingElementException e) {
            e.printStackTrace();
        }
        // no more action - the GModel is now up to date
    }

}

As you can see, I also update the dimensions for the GModel element with node.setSize(newSize). Moving the element works, but resize did not. Is there something missing in my implementation of the OperationHandler ?

[CamilleLetavernier]

Hi,

The "prefWidth/height" layout options are not to be defined in the Node Builder; they are the variable that you manipulate when resizing the node via the resize handle. They shouldn't be hardcoded. They need to be set by the (BPMN)ChangeBoundsOperationHandler. Here's how it's done for the default GLSP implementation:

public class ChangeBoundsOperationHandler extends AbstractOperationHandler<ChangeBoundsOperation> {

     [...]

     protected void changeElementBounds(final String elementId, final GPoint newPosition, final GDimension newSize) {

           [...]

           if (nodeToUpdate.getLayout() != null) {
              nodeToUpdate.getLayoutOptions().put(GLayoutOptions.KEY_PREF_WIDTH, newSize.getWidth());
              nodeToUpdate.getLayoutOptions().put(GLayoutOptions.KEY_PREF_HEIGHT, newSize.getHeight());
           }

           nodeToUpdate.setSize(newSize);
           nodeToUpdate.setPosition(positionToSet);
     }
}

[rsoika]

Yes now it works! Thanks!

I am setting now the GLayoutOptions.KEY_PREF_WIDTH and GLayoutOptions.KEY_PREF_HEIGHT in the ChangeBoundsOperation as you suggested.

But then what is the functionality of the nodeToUpdate.setSize(newSize) method? If I uncomment this method it works in the same way.

[CamilleLetavernier]

We recently changed the layouts in GLSP (VBox and HBox), and they no longer rely on the node's size. However, default Sprotty layouts still do. So, it depends on which layouts you use.

The problem we had with this size attribute is that it is used both as an input and as an output of the Layout, which causes a lot of confusion (It is partly manually defined by the Node Builder/ChangeBounds handler, and partly derived by the Layout algorithm). The GLSP VBox/HBox layouts now clearly separate prefWidth/height (layout input) and size.width/height (layout output, actual visual bounds). So, for VBox/HBox layouts, it will indeed be fully ignored (whatever value is set here, will be overridden by the layout itself, in the ComputedBoundsAction). For other layouts, we still use the default Sprotty behavior; so it might still be required (But I don't think it's usually a good idea to manually resize nodes that aren't VBox/HBox).

These layout changes have been implemented in the context of #392, #694

[rsoika]

Ok, everything is now working and I just want to provide a complete code example here (if someone finds this discussion helpful)

The Builder Class

In the Builder Class the method setProperties is used to set the prevWidth/height for the node given by the size object:

public class TaskNodeBuilder extends AbstractGNodeBuilder<TaskNode, TaskNodeBuilder> {

    private final String name;

    public TaskNodeBuilder(final String type, final String name) {
        super(type);
        this.name = name;
    }
    .....

    @Override
    public void setProperties(final TaskNode node) {
        super.setProperties(node);
        node.setName(name);
        node.setLayout(GConstants.Layout.HBOX);
        // Set min width/height defaults
        node.getLayoutOptions().put(GLayoutOptions.KEY_MIN_WIDTH, BPMNActivity.DEFAULT_WIDTH);
        node.getLayoutOptions().put(GLayoutOptions.KEY_MIN_HEIGHT, BPMNActivity.DEFAULT_HEIGHT);
        // Set actual width/height 
        node.getLayoutOptions().put(GLayoutOptions.KEY_PREF_WIDTH, size.getWidth());
        node.getLayoutOptions().put(GLayoutOptions.KEY_PREF_HEIGHT, size.getHeight());
        ...
    }
    ....
}

The Model Factory

In the GModelFactory we use the builder class to create a element with a specific size given from the source model

public class BPMNGModelFactory implements GModelFactory {
    private static Logger logger = Logger.getLogger(BPMNGModelFactory.class.getName());

    @Inject
    protected BPMNGModelState modelState;

    @Override
    public void createGModel() {
        ...
        // compute position....
        BPMNPoint bpmnPoint = activity.getBounds().getPosition();
        GPoint point = GraphUtil.point(bpmnPoint.getX(), bpmnPoint.getY());
        // compute the dimension...
        GDimension dimension = GraphUtil.dimension(activity.getBounds().getDimension().getWidth(),
                        activity.getBounds().getDimension().getHeight());
        // call the builder..        
        TaskNodeBuilder builder = new TaskNodeBuilder(activity.getType(), activity.getName());
        // Build the GLSP Node....
        TaskNode taskNode = builder //
                    .id(activity.getId()) //
                    .position(point) //
                    .size(dimension) // the size is used by the builder to adjust prevWidth/height 
                    .build();
        .....
    }

The BPMNChangeBoundsOperationHandler

And finally we use a BoundsOperationHandler to adjust the source model when the user changes the size of an element in the diagram

public class BPMNChangeBoundsOperationHandler extends AbstractOperationHandler<ChangeBoundsOperation> {

    @Inject
    protected BPMNGModelState modelState;

    @Override
    public void executeOperation(final ChangeBoundsOperation operation) {

        BPMNProcess context = modelState.getBpmnModel().getContext();
        // iterate over all new Bounds...
        try {
            List<ElementAndBounds> elementBounds = operation.getNewBounds();
            for (ElementAndBounds elementBound : elementBounds) {
                String id = elementBound.getElementId();
                GPoint newPoint = elementBound.getNewPosition();
                GDimension newSize = elementBound.getNewSize();
                // find the corresponding BPMN source element and GNode element
                BPMNFlowElement bpmnFlowElement = context.findBPMNFlowElementById(id);
                if (bpmnFlowElement != null) {
                    GNode gNode = null;
                    Optional<GNode> _node = modelState.getIndex().findElementByClass(id, GNode.class);
                    if (_node.isPresent()) {
                        gNode = _node.get();
                    } else {
                        // this case should not happen!
                        logger.warning("Node Element '" + id + "' not found in current modelState!");
                        continue;
                    }

                    // update BPMNElement position....
                    BPMNBounds bpmnBounds = bpmnFlowElement.getBounds();
                    bpmnBounds.updateLocation(newPoint.getX(), newPoint.getY());
                    // update GNode position....
                    gNode.setPosition(newPoint);

                    // update BPMNElement dimension....
                    bpmnBounds.updateDimension(newSize.getWidth(), newSize.getHeight());
                    // Update GNode dimension....
                    gNode.getLayoutOptions().put(GLayoutOptions.KEY_PREF_WIDTH, newSize.getWidth());
                    gNode.getLayoutOptions().put(GLayoutOptions.KEY_PREF_HEIGHT, newSize.getHeight());
                    gNode.setSize(newSize); // has no effect for VBox/HBox
                }
            }
        } catch (BPMNMissingElementException e) {
            e.printStackTrace();
        }
        // no more action - the GModel is now up to date
    }
}