Also side question, i have loaded an svg file into a dict and was wondering how can i set the width and height of the shape and also make the background transparent so that i can load a shape using svg files without the rectangle background

this is my code to load it in, and they came into a default width and height of 24 when i drag and drop it, i want to change it to something like 42 when the shape is dropped because the circle was supposed to be an oval shape in the svg file, and make the rectangle around the circle dissapear, because i have a custom rounded rectangle shape that also has the rectangle background

Object.values(nodeDict).forEach((dict) => {
      const node = new mf.Diagramming.SvgNode(diagram);
      node.setContent(dict.content);
      node.brush = "white";
      shapeNodes.push(node);
      shapeIds.push(dict.name);
      console.log(node);
    }); 

below is the svg file loaded

Hi,

There's no support for branching links. You could use a small node to represent the fork, having two incoming links and one outgoing link connecting to it. Alternatively keep just the two links but add an extra segment to them and make sure the middle control point coordinates coincide. E.g. this will automatically insert a fork node if user tries to connect link to another link -

diagram.allowUnconnectedLinks = true;
diagram.autoSnapDistance = 2;

diagram.addEventListener(Events.linkCreated, onLinkCreated);
diagram.addEventListener(Events.linkCreating, onLinkCreating);

function onLinkCreating(diagram, args)
{
	if (args.link.targetConnection.node instanceof MindFusion.Diagramming.DummyNode)
		args.cancel = diagram.getItemAt(args.mousePosition) == null;
}

function onLinkCreated(diagram, args)
{
	if (args.link.destination instanceof MindFusion.Diagramming.DummyNode)
	{
		var links = diagram.getLinksAt(args.mousePosition);
		for (var targetLink of links)
		{
			if (targetLink == args.link)
				continue;
			var pos = args.mousePosition;
			var fork = diagram.factory.createShapeNode(pos.x - 4, pos.y - 4, 8, 8);
			fork.shape = "Ellipse";
			diagram.factory.createDiagramLink(targetLink.origin, fork);
			targetLink.origin = fork;
			args.link.destination = fork;
			break;
		}
	}
} 

Regards,
Slavcho

Hi,

Assign a Rect instance to node.bounds property to change node's size.

Regards,
Slavcho
Mindfusion

Hi,

V3 API was using getProperty / setProperty method calls instead of property assignments. Change that line to node.setTransparent(true);

Regards,
Slavcho
Mindfusion

Hi,

Try setting the NodeListView.defaultNodeSize property to the size you need.

Regards,
Slavcho

Try calling this from nodeCreated event handler, making the imageAlign property inherited from base ShapeNode apply to SVG content too:

node.setImageAlign(ImageAlign.Fit);

node.image.svg = false;
node.image.image.width = node.image.image.naturalWidth;
node.image.image.height = node.image.image.naturalHeight; 

We'll add built-in support for upcoming release.

Regards,
Slavcho

Hi,

Event handlers' signature should look like onEvent(diagram, event_args):

onNodeCreated={(diagram, args) => {
    var node = args.getNode(); //v3
    ... 

Regards,
Slavcho