I tried to use MindFusion.Drawing.Text in onUpdateVisuals. but facing the problem that text in every container node i.e. heading text is same for all container node present in that diagram. As per my requirement Heading text will be changed accordingly for every custom container. To avoid this problem I have created a separate shape Node and assign text to that then adding it to container node using attachNode api.
the below code is for Container node UpdateVisuals.
MindFusion.Diagramming.ContainerNode.prototype.onUpdateVisuals = (item: MindFusion.Diagramming.DiagramItem) => {
var rect = item.bounds;
//rect.height = 40;
rect.width = this._conatinerAtt.width
item.setBounds(rect);
item.setFoldable(true);
item.setFoldIconSize(10);
var rectPath = new MindFusion.Drawing.Path();
let tempWidth = this._conatinerAtt.height - 4;
rectPath.addRect(rect.x + 2, rect.y + 2, 4, tempWidth);
rectPath.setPen(this._conatinerAtt.headingColor);
rectPath.setBrush(this._conatinerAtt.headingColor);
item.getGraphicsContent().push(rectPath);
//var nodeText = new MindFusion.Drawing.Text(this._conatinerAtt.headingText, new MindFusion.Drawing.Rect(rect.x + 30, rect.y + 2, rect.width / 2, rect.width/2));
//nodeText.setFont(new MindFusion.Drawing.Font("sans-serif", 4, false, true, false));
//item.getGraphicsContent().push(nodeText);
var image = new MindFusion.Drawing.Image(new Rect(rect.x + 10, rect.y + 5, 15, 15));
image.image.src = this._conatinerAtt.imageUrl;
image.image.width = 10;
image.image.height = 10;
image.loaded = true;
item.getGraphicsContent().push(image);
image = new MindFusion.Drawing.Image(new Rect(rect.x + 20, rect.y + 20, 8, 8));
image.image.src = this._conatinerAtt.incomingLnkImg;
image.image.width = 10;
image.image.height = 10;
image.loaded = true;
item.getGraphicsContent().push(image);
image = new MindFusion.Drawing.Image(new Rect(rect.x + 35, rect.y + 20, 8, 8));
image.image.src = this._conatinerAtt.outgoingLnkImg;
image.image.width = 10;
image.image.height = 10;
image.loaded = true;
item.getGraphicsContent().push(image);
};
Code for adding heading text
private addHeaderLabel(x, y){
let l1 = this._factory.createShapeNode(x + 30, y - 8, this._conatinerAtt.height, this._conatinerAtt.height);
l1.setFont(new Font(this._conatinerAtt.fontName, this._conatinerAtt.fontSize, false, false, false));
l1.setTextColor(this._conatinerAtt.headingColor);
l1.setText(this._conatinerAtt.headingText);
l1.setTransparent(true);
l1.setLocked(true);
this.attachNode(l1);
}
Code For adding Nodes child nodes in container node
addNode(x, y, columnText, columnTextColor, columnImageSrcUrl) {
let row = this._factory.createShapeNode(x, y + this._conatinerAtt.height + this._i, this._conatinerAtt.width, 10);
let image = this._factory.createShapeNode(x + 4, y + this._conatinerAtt.height + 2 + this._i, 5, 5);
image.setBrush(this._conatinerAtt.brushColor);
image.setPen(this._conatinerAtt.penColor);
//image.setShape(shape.fromId("Circle"));
image.setImageLocation(columnImageSrcUrl);
image.setLocked(true);
this._ctr.add(image);
//this.attachNode(image);
row.setText(columnText);
row.setBrush("White");
this._i += 10;
row.setTextColor(columnTextColor);
this._ctr.add(row);
}
For your Ref. i am adding custom-conatiner.component.ts file