Hello. I'd like to add to shape node an icon and additional text. How do I start? Maybe is there any sample?

Do you need to use any shapes other than rounded rectangle? If not, you can get this out of the box using TableNode. Set the table's Shape property to SimpleShape.RoundedRectangle and CellFrameStyle to CellFrameStyle.None. The Review text from your image could be assigned to node's Text, and any additional icons and texts to respective properties of table cells.

edit: check the spanning cells sample from this page, it's an improved version of the one distributed with the library - http://mindfusion.eu/products/javascript/diagramming/samples

Regards,
Slavcho

Here's how you could custom-draw extra text -

var Alignment = MindFusion.Diagramming.Alignment;
var Text = MindFusion.Drawing.Text;

ShapeNode.prototype.onUpdateVisuals = function ()
{
	var content = this.graphicsContainer.content;

	var extraText = new Text(
		"User B",	// replace with this.yourFieldName
		this.getBounds().clone());
	extraText.textAlignment = Alignment.Center;
	extraText.lineAlignment = Alignment.Far;
	extraText.fitInBounds = true;
	extraText.font = this.getEffectiveFont();
	content.push(extraText);
}; 

If the icon includes some empty padding space, you could assign it to standard Image property and set ImageAlign to BottomLeft. Alternatively you can adjust image position from same onUpdateVisuals function as shown here -
http://mindfusion.eu/Forum/YaBB.pl?num=1439580359/1#1

If you need to add more images to same node -

var imageObj = new Image();
imageObj.src = "icon1.png";

// in onUpdateVisuals
var image2 = new MindFusion.Drawing.Image(
	new MindFusion.Drawing.Rect(this.bounds.x + 2, this.bounds.bottom() - 7, 5, 5));
image2.image = imageObj;
image2.loaded = imageObj.complete;
content.push(image2); 

Instead of custom drawing, you could add extra images and texts by showing them in Transparent ShapeNodes attached to main node using attachTo method. That will let your users adjust their positions if desired, or you could set node.Locked to prevent that.

Regards,
Slavcho
Mindfusion

You can specify text bounding rectangles as second argument of Text constructor, e.g.

ShapeNode.prototype.onUpdateVisuals = function ()
{
	var content = this.graphicsContainer.content;

	for (var i = 0; i < 3; i++)
	{
		// assume primary text is top-aligned
		var index = i + 1;
		var rect = this.getBounds().clone();
		rect.height = 2 * this.getEffectiveFontSize();
		rect.y += index * rect.height;
		var extraText = new Text(
			"User B", // replace with this.yourFieldName
			rect);
		extraText.textAlignment = Alignment.Center;
		extraText.lineAlignment = Alignment.Far;
		extraText.fitInBounds = true;
		extraText.font = this.getEffectiveFont();
		content.push(extraText);
	}
}; 

Or is it possible to hide part of text?

Thanks a lot. The only thing left is to hide node's primary text (in my case "Review")

Is it possible for additional text to have different font than main text?

I set extraText.font.style.bold = false and extraText.font.style.size = 7

But "Review" text also became non-bold and with changed size.

Hi. Is it possible somehow get "icon1.png" original width and height?

var imageObj = new Image();
imageObj.src = "icon1.png";

// in onUpdateVisuals
var image2 = new MindFusion.Drawing.Image(
	new MindFusion.Drawing.Rect(this.bounds.x + 2, this.bounds.bottom() - 7, 5, 5));
image2.image = imageObj;
image2.loaded = imageObj.complete;
content.push(image2);