Hi,

You have couple of options.

1. Customize SvgNode rendering code to add an extra MindFusion.Drawing.Text instance as shown in following threads. In your case change SvgNode.prototype instead of ShapeNode.prototype -

https://mindfusion.eu/Forum/YaBB.pl?num=1488530760/4#4
https://mindfusion.eu/Forum/YaBB.pl?num=1435322031/0#0

2. Attach a small helper ShapeNode to the SvgNode and display the id text there. Set helper's Transparent property to hide the geometry and leave only text visible. Set Locked property to prevent users from selecting it.

Regards,
Slavcho
Mindfusion

You could keep the cloned bounds but change extraText's alignments to Near/Near for top/left. Otherwise change clonedRect.width/height values.

If you need instance-specific override, set node.onUpdateVisuals without the prototype part. Otherwise assign the function to "SvgNode.prototype" using static access, and move it outside the loop.

You'll have hard time centering your main text if you display id through it too, especially if you let users resize nodes.

You've edited out question about editing extraText in place, that could look like this -

var originalGetObjectToEdit = SvgNode.prototype.getObjectToEdit;
SvgNode.prototype.getObjectToEdit = function(point, element) {
	if (point.x < this.bounds.x + 20 && point.y < this.bounds.y + 20)
		return new IdEditor(this);
	return originalGetObjectToEdit.apply(this, [point, element]);
}

class IdEditor {

	constructor(node) {
		this.node = node;
	}

	getTextToEdit() {
		return this.node.idText;
	}

	getEditRect(point) {
		var rect = this.node.bounds.clone();
		rect.width = 20;
		rect.height = 20;
		return rect;
	}

	createEditArgs(oldText, newText) {
		return new NodeEventArgs({ node: this.node, oldText: oldText, newText: newText });
	}

	setEditedText(newText) {
		this.node.idText = newText;
		this.node.invalidate();
	}

	getDiagramItem() {
		return this.node;
	}
} 

assuming idText custom field stores the text displayed by extraText object.

You can add some padding around extraText by setting extraText.padding.left and extraText.padding.top.

Regards,
Slavcho

i was thinking of using the text field because it's much easier to translate since i can just replace the string id from c to g using string.replace() while keeping the rest of the text and also the main text will begin where the id begin so it has the same allignment so i just need to set the text to begin at a certain x bound, this will be much faster because i need to present the functionality of my app first then give it a final tweak after it's approved, but if you're suggesting that way then where should i put it?

this is where i put the previous code:

diagramId(diagram, args) {
      // var idNum = 1;
      var node = args.getNode();

      node.onUpdateVisuals = function () {
        var Alignment = mf.Diagramming.Alignment;
        var Text = mf.Drawing.Text;
        var content = this.graphicsContainer.content;
        var rect = this.getBounds().clone();

        if (node.content.fileName == "/static/media/Claim.0d97347d.svg") {
          rect.width = this.getEffectiveFontSize();
          rect.x += rect.width * 3.1;
          var extraText = new Text(
            "C" + Nomer, // replace with this.yourFieldName
            rect // this.getBounds().clone()
          );
        } else {
          rect.width = this.getEffectiveFontSize();
          rect.x += rect.width * 3.1;
          var extraText = new Text(
            "C", // replace with this.yourFieldName.1
            rect // this.getBounds().clone()
          );
        }

        extraText.textAlignment = Alignment.Center;
        extraText.lineAlignment = Alignment.Near;
        extraText.fitInBounds = true;
        extraText.font = this.getEffectiveFont();
        content.push(extraText);
        // idNum += 1;
      };
      Nomer += 1;
    }
 

that method is called when a node a created. i am fairly new in using react so i get confused a lot while learning new things

thank you for your answer, i will apply that first then move on to your previous solution.

but i do have a question about removing nodes from the diagram

        var nodes = [...this.state.diagram.nodes];
        var links = [...this.state.diagram.links];
        nodes.forEach((node) => {
          // var al = node.getText();
          this.state.diagram.removeItem(node);
          // console.log(node.getBounds());
          // console.log(node.content.fileName);
        });
        console.log(nodes);
 

the code above are used to remove the node from the diagram, while the node is removed from the diagram i can still log the previously deleted nodes wich hinder some funtionality, i don't know how i did it but i once managed to delete all of the nodes array without passing anything back when i log it but that code was lost and i haven't back it up yet, what can i do to achieve that again, thank you in advance

it's still logging the deleted node,

so the previous code that i send was for graph validation and if the graph is invalid then all of it will be deleted. now when i press a button, i want to initiate the validation and then the tranformation process. but since the nodes array still contain the invalid graph node then the invalid graph will be translated. if the validation and translation are on different button then it works fine but i want to automate it to make it simpler.

the code that i tried :

const validation = () => {


        var nodes = [...this.state.diagram.nodes];
        var links = [...this.state.diagram.links];

        //Tried this

        // this.state.diagram.clearAll();

        // And this

        for (var i = nodes.length - 1; i >= 0; i--) {
           this.state.diagram.removeItem(nodes[i]);
           console.log('node deleted'
         }
        console.log(nodes);
        links.forEach((link) => {});
        // console.log(nodes.content.fileName);
      };
 

const CAEToGSN = () => {
 const nodes = [...this.state.diagram.nodes];
 const links = [...this.state.diagram.links];
 nodes.forEach((node) => {
 validation()

}
 nodes.forEach((node) => {
 //....Transformation Process

}
}

 

but they still log the deleted node, i think it might be bacause of the state? but i can't really figure out how to work around it.

so below is a couple image for reference, the first is the validation log, the second is the nodes before i translate and the third one is after i translate, when a node is deleted the link got deleted but not the node, i'm confused