ForeignObject inside HBOX behaves weird

[arcanefoam]

I have a Compartment that holds a label and a foreign object:

new GCompartmentBuilder(DefaultTypes.COMPARTMENT)
			.layout(GConstants.Layout.HBOX)
			.layoutOptions(compLayout)
			.add(new GLabelBuilder(DefaultTypes.LABEL)
					.text(label)
					.build())
			.add(new GForeignObjectBuilder(DefaultTypes.FOREIGN_OBJECT + ":multi")
				.id(nodeId + "_"  + ea.getName())
				.addCssClass("wfp-multiline")
				.size(50, 50)
				.addArgument("text", value != null ? value.toString() : EMPTY_VALUE)
				.build())

And I have created a ForeignObject in the client following the example in the GLSP documentation. I have been playing with the bounds operation to try to figure out what is going on:

export class EditableForeignObjectElement extends GForeignObjectElement implements EditableLabel {
	static override readonly DEFAULT_FEATURES = [boundsFeature, selectFeature, alignFeature];
	static readonly FONT = 'normal 10pt sans-serif';
	readonly isMultiLine = true;
	readonly args: Args;
	text = "";

	override hasFeature(feature: symbol): boolean {
			return feature === editLabelFeature 
					|| feature === layoutableChildFeature 
					|| super.hasFeature(feature);
	}

	// We want the multiline editor to be a bit thiner that then text width
	get editControlDimension() {
			return { width: this.bounds.width * 0.95, height: this.bounds.height };
	}

	get editControlPositionCorrection() {
		return { x: 3, y: 3 };
	}

	override set bounds(bounds: Bounds) {
    /* ignore set bounds, always use the parent's bounds */
  }

  // @ts-expect-error Arguments are set in the element
  override get code(): string {
    
    return `<pre style="white-space: pre-wrap; margin: 0;">${this._text()}</pre>`;
  }

	_text() {
		if (this.text === "") {
			const textArg = this.args["text"];
			if (typeof textArg === "string") {
				this.text = textArg;
			}
		}
		return this.text;
	}

  override namespace = "http://www.w3.org/1999/xhtml";

	// get text(): string {
	// 		let doc = new DOMParser().parseFromString(this.code, 'text/html');
	// 		return doc.body.textContent || '';
	// }
	// set text(newText: string) {
	// 		this.code = `<p>${newText.replace('\n', '<br/>')}</p>`;
	// }

	// override set bounds(newBounds: Bounds) {
	//     // Ignore as bounds are derived
	// }

	/**
	 * Models must provide valid bounds if the bounds depend on their content.
	 */
	override get bounds(): Bounds {
		let parent: SModelElementImpl | null = this.parent;
		while (parent && isBoundsAware(parent)) {
			if ((parent instanceof SCompartmentImpl)) {
				// On the first rendering, the compartment bounds are not yet computed
				if (Dimension.isValid(parent.bounds)) {
					// My width can be the parent width, minus my sibling width (label)
					const label = parent.children[parent.children.indexOf(this) - 1];
					if (isBoundsAware(label)) {
						const oldWidth = this.size.width || 0;	
						const newWidth = parent.bounds.width - label.bounds.width - 25;
						const delta = Math.abs(newWidth - oldWidth);
						if (newWidth != oldWidth) {
							this.size = { height: this.size.height, width: newWidth };
						}
						const finalWidth = delta > 5 ? newWidth : oldWidth;
						const textHeight = this.getTextHeight(finalWidth);
						console.log("Widths", {
							parent: parent.bounds.width,
							label: label.bounds.width,
							oldWidth,
							newWidth,
							delta,
							textHeight,
							finalWidth
						});
						return {
							x: this.position.x,
							y: this.position.y,
							width: finalWidth,
							height: textHeight,
						};
					}
				}
				if (parent instanceof SChildElementImpl) {
					parent = parent.parent;
				} else {
					parent = null;
				}
			}
			else if( parent instanceof SParentElementImpl) {
				return {
							x: this.position.x,
							y: this.position.y,
							width: parent.bounds.width-15,
							height: this.getTextHeight(parent.bounds.width-15)
						};
			}
			else {
				if (parent instanceof SChildElementImpl) {
					parent = parent.parent;
				} else {
					parent = null;
				}
			}
		}
		return Bounds.EMPTY;
	}



	/**
	 * Uses canvas.measureText to compute and return the width of the given text of given font in pixels.
	 *
	 * @see https://stackoverflow.com/questions/118241/calculate-text-width-with-javascript/21015393#21015393
	 */
	getTextSize() {
		this.canvas.textContent = this._text();
		this.canvas.style.position = 'absolute';
		this.canvas.style.float = 'left';
		this.canvas.style.whiteSpace = 'pre-wrap';
		this.canvas.style.visibility = 'hidden';
		this.canvas.style.font = EditableForeignObjectElement.FONT;
		document.body.appendChild(this.canvas);
		const width = this.canvas.clientWidth;
		const height = this.canvas.clientHeight;
		document.body.removeChild(this.canvas);
		return { width, height };
			// const context = this.canvas.getContext('2d');
			// if (!context) {
			//     return 0;
			// }
			// context.font = EditableForeignObjectElement.FONT;
			// const metrics = context.measureText(this.text);
			// return metrics.width;
	}

	getTextHeight(width: number) {
		this.canvas.textContent = this._text();
		this.canvas.style.position = 'absolute';
		this.canvas.style.float = 'left';
		this.canvas.style.whiteSpace = 'pre-wrap';
		this.canvas.style.visibility = 'hidden';
		this.canvas.style.font = EditableForeignObjectElement.FONT;
		this.canvas.style.width = width + 'px';
		document.body.appendChild(this.canvas);
		const height = this.canvas.clientHeight;
		document.body.removeChild(this.canvas);
		return height;
			// const context = this.canvas.getContext('2d');
			// if (!context) {
			//     return 0;
			// }
			// context.font = EditableForeignObjectElement.FONT;
			// const metrics = context.measureText(this.text);
			// return metrics.width;
	}

	// re-use canvas object for better performance
	// private readonly canvas = document.createElement('canvas');
	private readonly canvas = document.createElement('pre');
}

ForeignObject.mp4

In the attached video you can see that the node width shrinks, it happens every time I click on the node. My intuition tells me that it has something to do with the selection circles changing the effective width and that in turn affects my calculations. But you can also notice that when I change the size, the width of the foreign object changes a lot compared to the node width.

What I am trying to do is just get the label and the foreing object to be side by side, and the foreing object to fill the available space.
I am using version 2.5.0

[tortmayr]

Hi @arcanefoam ,

thanks for reaching out and providing lots of details about your problem.

What I am trying to do is just get the label and the foreign object to be side by side, and the foreign object to fill the available space.

I see, achieving this behavior with a multi-line text field might be a bit tricky. I have to look into this and will come back to you.