Slavcho wrote on Nov 14
th, 2016 at 1:19pm:
Here's code for creating that group of items both from startup handler and from NodeCreatedScript called after drag and drop -
<ndiag:DiagramView
runat="server"
id="diagramView"
AppletStartedScript="onDiagramLoaded"
NodeCreatedScript="onNodeCreated"
....
<script type="text/javascript">
var Point = MindFusion.Drawing.Point;
function onDiagramLoaded(sender)
{
var diagram = sender;
diagram.setLinkHeadShape("Triangle");
diagram.setLinkShape(MindFusion.Diagramming.LinkShape.Cascading);
var node1 = diagram.getFactory().createShapeNode(20, 20, 30, 10);
node1.setShape("RoundRect");
node1.setBrush("Cyan");
node1.setText("Patvirtinti");
var node2 = diagram.getFactory().createShapeNode(60, 20, 10, 10);
node2.setShape("BpmnInclusive");
node2.setBrush("White");
var link1 = diagram.getFactory().createDiagramLink(node1, node2);
var bounds = node2.getBounds();
var link2 = diagram.getFactory().createDiagramLink(
node2, new Point(bounds.x + bounds.width / 2, bounds.y - bounds.height));
link2.points.push(
new Point(bounds.x + bounds.width * 2, bounds.y - bounds.height));
link2.updateFromPoints();
var link3 = diagram.getFactory().createDiagramLink(
node2, new Point(bounds.x + bounds.width / 2, bounds.y + bounds.height * 2));
link3.points.push(
new Point(bounds.x + bounds.width * 2, bounds.y + bounds.height * 2));
link3.updateFromPoints();
}
function onNodeCreated(sender, args)
{
var diagram = sender;
diagram.setLinkHeadShape("Triangle");
diagram.setLinkShape(MindFusion.Diagramming.LinkShape.Cascading);
var node1 = args.getNode();
node1.setShape("RoundRect");
node1.setBrush("Cyan");
node1.setText("Patvirtinti");
var node2 = diagram.getFactory().createShapeNode(node1.bounds.right() + 10, node1.bounds.center().y - 5, 10, 10);
node2.setShape("BpmnInclusive");
node2.setBrush("White");
var link1 = diagram.getFactory().createDiagramLink(node1, node2);
var bounds = node2.getBounds();
var link2 = diagram.getFactory().createDiagramLink(
node2, new Point(bounds.x + bounds.width / 2, bounds.y - bounds.height));
link2.points.push(
new Point(bounds.x + bounds.width * 2, bounds.y - bounds.height));
link2.updateFromPoints();
var link3 = diagram.getFactory().createDiagramLink(
node2, new Point(bounds.x + bounds.width / 2, bounds.y + bounds.height * 2));
link3.points.push(
new Point(bounds.x + bounds.width * 2, bounds.y + bounds.height * 2));
link3.updateFromPoints();
}
</script>
Can I create my custom type shape nodes?, because now it's not working.
I created my custom ShapeNode and added item to the diagram, when I run the app, I get no visual of the Node.
I created pic of my console log, I did output of the diagram items array, in there we can see that the custom node is added to the array (second item), the first item is the dropped node from NodeListView.
Why there is no visual of the node?
My code:function onNodeCreated(sender, args) {
var node = args.getNode();
if (node == null)
return;
var diagram = sender;
var node2 = new MyShapeNode();
node2.setParent(diagram);
node2.bounds = new MindFusion.Drawing.Rect(node.bounds.right() + 20, node.bounds.center().y - 20, 40, 40);
node2.setShapeType(ShapeTypes.InclusiveGateway);
diagram.addItem(node2);
console.log(diagram);
}