Creating a CustomNode is quite easy. There are no gotchas, extending CustomNode and adding some children is enough.
But of course that node is not resizable…

So this post shows what is necessary to create a CustomNode that extends Resizable. We follow the same setting: The custom node is placed within a Stack.

Step 1: Extending Resizable

Resizable enforces us to implement the getPrefWidth/Height methods. We just return some hard coded values and try to find out what happens:
The width/height of the CustomNode are set to the values returned by getPrefWidth/Height. But the boundsInLocal and layoutBounds don’t respect that. They still just depend on the children.

Step 2: Requesting Layout

The doc of Resizable tells us that we have to call requestLayout() every time the width/height of the node is changed. Doing this doesn’t make any difference in this context (within a Stack). But when placed in other layouts this is necessary!

1
2
 override var width on replace { requestLayout() }
  override var height on replace { requestLayout() }

Step 3: Connecting layoutBounds to width/height

As we have learned when looking at CustomControls it is a very good idea to bind the layoutBounds to the width/height. This is necessary to avoid difficult layout bugs that will only occur in some situations and are very hard to track down.

1
2
3
4
5
6
 override var layoutBounds = bind BoundingBox {
         minX: 0
         minY: 0
         width: this.width
         height: this.height
     }

Now the layoutBounds fit to the width/height of the Node. But of course the sizes of the rectangle(s) are still independent. And the boundInLocal don’t fit them neither.

Step 4: Children depend on width/height

Now we connect the width/height of the children to the width/height of our CustomNode.
Now the three values (width/height, layoutBounds, boundsInLocal) correspond correctly with each other.

Important: As mentioned before it is necessary that width/height always correspond with the layoutBounds. Always! But the boundsInLocal may be different from them (larger or smaller) but have to be influenced by them.