Page Index Toggle Pages: 1 Send TopicPrint
Hot Topic (More than 10 Replies) How to draw complex shapes? (Canvas mode) (Read 9636 times)
CrushJelly
Junior Member
**
Offline


I Love MindFusion!

Posts: 59
Joined: Oct 20th, 2016
How to draw complex shapes? (Canvas mode)
Nov 7th, 2016 at 2:00pm
Print Post  
I have my nodeListView, from there I am dropping my shapeNode.
The shapeNode that I am dropping is supposed to be more complex than nodeListView shows to the user (see pic.).

I was unable to create such complex shapeNode.

I tried creating a new shape node in Javascript when NodeCreated event fires, but new shapeNodes appears as a RoundRect shape and I can't change the shape of it to my custom shape. And the bounds are set to default, even if I set to my custom bounds, it just appears in the corner.

ComplexShapes.png shows the result I need to acomplish and ComplexShapesCanvas.png shows the result I am getting.

PS. Shape nodes in the nodeListView are created on the server side.

JS code:

Code
Select All
function onNodeCreated(sender, args) {
    var node = args.getNode();
    if (node != null)
    {
        setDlxShapeNodeSize(node);

        if (node.getShapeType() == WorkflowShapeTypes.UserActionApprove ||
               node.getShapeType() == WorkflowShapeTypes.UserActionHandleResolution ||
               node.getShapeType() == WorkflowShapeTypes.UserActionEndorse) {

            node.AllowOutgoingLink = false;

            var newBounds = new MindFusion.Drawing.Rect(node.bounds.x + 20, node.bounds.y, 40, 40);
            var gatewayNode = new DLXShapeNode();
            gatewayNode.setShapeType(WorkflowShapeTypes.InclusiveGateway);
            gatewayNode.Bounds = newBounds;

            var diagram = $find("diagramView");
            if (diagram != null)
                diagram.addItem(gatewayNode);
        }
    }
}

function setDlxShapeNodeSize(shapeNode) {
    var shapeType = shapeNode.getShapeType();
    if (shapeType != null)
    {
        switch (shapeType) {
            case WorkflowShapeTypes.UserAction:
            case WorkflowShapeTypes.UserActionApprove:
            case WorkflowShapeTypes.UserActionHandleResolution:
            case WorkflowShapeTypes.UserActionEndorse:
            case WorkflowShapeTypes.SystemAction:
                shapeNode.bounds.width = 80;
                shapeNode.bounds.height = 40;
                break;
            default:
                break;
        }
    }
}
 


  

ComplexShapes.png ( 19 KB | 274 Downloads )
ComplexShapes.png
ComplexShapesCanvas.PNG ( 17 KB | 201 Downloads )
ComplexShapesCanvas.PNG
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Online


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: How to draw complex shapes? (Canvas mode)
Reply #1 - Nov 8th, 2016 at 1:55pm
Print Post  
Check this project, using the 5.7 build of NetDiagram which also lets you enable variable-size nodes from server side -
https://mindfusion.eu/_samples/netdiag_NodeListView.zip

Also note this line is loaded script -
Code
Select All
sender.setMeasureUnit(MindFusion.Drawing.GraphicsUnit.Millimeter); 



It makes the NodeListView use same unit as the DiagramView to make sizes of the node-list and diagram nodes the same. Otherwise the default unit of NodeListView is pixel which would make its nodes appear smaller than ones on the canvas.

The sample also contains the custom layout function from earlier post to draw node labels below the node icons.

Regards,
Slavcho
  
Back to top
 
IP Logged
 
CrushJelly
Junior Member
**
Offline


I Love MindFusion!

Posts: 59
Joined: Oct 20th, 2016
Re: How to draw complex shapes? (Canvas mode)
Reply #2 - Nov 9th, 2016 at 11:29am
Print Post  
Slavcho wrote on Nov 8th, 2016 at 1:55pm:
Check this project, using the 5.7 build of NetDiagram which also lets you enable variable-size nodes from server side -
https://mindfusion.eu/_samples/netdiag_NodeListView.zip

Also note this line is loaded script -
Code
Select All
sender.setMeasureUnit(MindFusion.Drawing.GraphicsUnit.Millimeter); 



It makes the NodeListView use same unit as the DiagramView to make sizes of the node-list and diagram nodes the same. Otherwise the default unit of NodeListView is pixel which would make its nodes appear smaller than ones on the canvas.

The sample also contains the custom layout function from earlier post to draw node labels below the node icons.

Regards,
Slavcho



Ok, will this new updated library draw correctly another shape, like complex shape?,
because I need to show for the user simple shape node in the nodeListView and when they drops the shape node, I need to start drawing other shapes and connect them together.
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Online


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: How to draw complex shapes? (Canvas mode)
Reply #3 - Nov 10th, 2016 at 7:47am
Print Post  
The example above just shows that you can use varying node sizes in the NodeListView. The list can contain any kind of nodes, including instances of custom types if that's what you mean by complex shapes. Note that you must implement clone method in JavaScript code of custom types if you need to create them with drag and drop from NodeListView.

Regards,
Slavcho
  
Back to top
 
IP Logged
 
CrushJelly
Junior Member
**
Offline


I Love MindFusion!

Posts: 59
Joined: Oct 20th, 2016
Re: How to draw complex shapes? (Canvas mode)
Reply #4 - Nov 10th, 2016 at 1:06pm
Print Post  
Slavcho wrote on Nov 10th, 2016 at 7:47am:
The example above just shows that you can use varying node sizes in the NodeListView. The list can contain any kind of nodes, including instances of custom types if that's what you mean by complex shapes. Note that you must implement clone method in JavaScript code of custom types if you need to create them with drag and drop from NodeListView.

Regards,
Slavcho


I implmented clone. I have shape node like in the pic. (NodeListView) and then I drag and drop that shape node, the shape node is more complex (composed of several shapes), than node list view shows (see first pic, where arrow is pointing), so onNodeCreated event I start drawing more shapes and try to connect them together, but it's not working (see second pic), I include the piece of code that is executed during the event.

Do I need do this stuff in clone?

Code
Select All
function onNodeCreated(sender, args) {
    var node = args.getNode();
    if (node != null)
    {

if (node.getShapeType() == WorkflowShapeTypes.UserActionApprove ||
               node.getShapeType() == WorkflowShapeTypes.UserActionHandleResolution ||
               node.getShapeType() == WorkflowShapeTypes.UserActionEndorse) {

            node.AllowOutgoingLink = false;

            var newBounds = new MindFusion.Drawing.Rect(node.bounds.x + 20, node.bounds.y, 40, 40);
            var gatewayNode = new MyShapeNode();
            gatewayNode.setShapeType(WorkflowShapeTypes.InclusiveGateway);
            gatewayNode.Bounds = newBounds;

            var diagram = $find('diagramView');
            if (diagram != null) {
                diagram.addItem(gatewayNode);
   }
}
 


  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Online


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: How to draw complex shapes? (Canvas mode)
Reply #5 - Nov 10th, 2016 at 2:38pm
Print Post  
Do you mean your custom node draws the round rectangle + arrows + diamond shape shown on right side, but only shows left part in the node list? I'm guessing that would happen if the custom code draws outside the bounding rectangle dedicated to the node; NodeListView will clip it in that case while the canvas will still show everything. So you will have to modify your drawing code to keep graphics elements inside Bounds.

Regards,
Slavcho
  
Back to top
 
IP Logged
 
CrushJelly
Junior Member
**
Offline


I Love MindFusion!

Posts: 59
Joined: Oct 20th, 2016
Re: How to draw complex shapes? (Canvas mode)
Reply #6 - Nov 11th, 2016 at 10:16am
Print Post  
Slavcho wrote on Nov 10th, 2016 at 2:38pm:
Do you mean your custom node draws the round rectangle + arrows + diamond shape shown on right side, but only shows left part in the node list? I'm guessing that would happen if the custom code draws outside the bounding rectangle dedicated to the node; NodeListView will clip it in that case while the canvas will still show everything. So you will have to modify your drawing code to keep graphics elements inside Bounds.

Regards,
Slavcho


I mean when I drop that node, I draw other nodes and connect them. The node that is in the node list view is the separate shape and I want to fire an event on drop, and draw other shapes, but they all separate (just connected with links) and I cant manipulate them separately. So the bounding rectangle is not even in the picture, because they are all separate ShapeNodes / Links.

"Like I said earlier I tried to draw other shapes, but the shape and bounds is not correct and shape was drawn in the left side somewhere."
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Online


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: How to draw complex shapes? (Canvas mode)
Reply #7 - Nov 11th, 2016 at 11:21am
Print Post  
Hi,

So you are asking for a way to show a group of nodes and links as a single NodeListView item? We'll have it in mind for next release - not current version in beta. For now, you could add a ShapeNode whose Image property shows the groups of diagram items that will be created. The Image could be generated dynamically by building the group in a temporary diagram and calling CreateImage.

Regards,
Slavcho
  
Back to top
 
IP Logged
 
CrushJelly
Junior Member
**
Offline


I Love MindFusion!

Posts: 59
Joined: Oct 20th, 2016
Re: How to draw complex shapes? (Canvas mode)
Reply #8 - Nov 14th, 2016 at 8:56am
Print Post  
Slavcho wrote on Nov 11th, 2016 at 11:21am:
Hi,

So you are asking for a way to show a group of nodes and links as a single NodeListView item? We'll have it in mind for next release - not current version in beta. For now, you could add a ShapeNode whose Image property shows the groups of diagram items that will be created. The Image could be generated dynamically by building the group in a temporary diagram and calling CreateImage.

Regards,
Slavcho


No. The NodeListView will be like in the picture (ComplexShapes.png), if you will look into my code I am creating other shape node on NodeCreatedSrcipt event (see my result in ComplexShapesCanvas.png), but I dont clip them together and the new node doesn't appear correctly in the diagram(view my provided code in prev. post).

The result that I want to get (see pic. NodePresent.png).

Keep the NodeListView out of the question, we can think that I want to draw the piece of the diagram, just through code on application start.
  

ComplexShapes_001.png ( 19 KB | 169 Downloads )
ComplexShapes_001.png
ComplexShapesCanvas_001.PNG ( 17 KB | 165 Downloads )
ComplexShapesCanvas_001.PNG
NodePresent.png ( 16 KB | 174 Downloads )
NodePresent.png
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Online


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: How to draw complex shapes? (Canvas mode)
Reply #9 - Nov 14th, 2016 at 9:41am
Print Post  
I can't understand much from the pictures. Are you asking how to create one extra node and three links from NodeClickedScript, or you've already done that, but something's not working as you'd liked to?

If the code you posted is a client-side handler, replace gatewayNode.Bounds = newBounds assignment with a setter call:

gatewayNode.setBounds(newBounds);
  
Back to top
 
IP Logged
 
CrushJelly
Junior Member
**
Offline


I Love MindFusion!

Posts: 59
Joined: Oct 20th, 2016
Re: How to draw complex shapes? (Canvas mode)
Reply #10 - Nov 14th, 2016 at 11:02am
Print Post  
Slavcho wrote on Nov 14th, 2016 at 9:41am:
I can't understand much from the pictures. Are you asking how to create one extra node and three links from NodeClickedScript, or you've already done that, but something's not working as you'd liked to?

If the code you posted is a client-side handler, replace gatewayNode.Bounds = newBounds assignment with a setter call:

gatewayNode.setBounds(newBounds);


I see we are going nowhere.

I show in the pictures that there is separate nodes.
I want to draw piece of the diagram through code (Javascript) on app start, how to do that?, the piece must be same as in the pic. (NodePresent.png).

  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Online


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: How to draw complex shapes? (Canvas mode)
Reply #11 - Nov 14th, 2016 at 1:19pm
Print Post  
Here's code for creating that group of items both from startup handler and from NodeCreatedScript called after drag and drop -

Code
Select All
<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> 

  
Back to top
 
IP Logged
 
CrushJelly
Junior Member
**
Offline


I Love MindFusion!

Posts: 59
Joined: Oct 20th, 2016
Re: How to draw complex shapes? (Canvas mode)
Reply #12 - Nov 21st, 2016 at 12:23pm
Print Post  
Slavcho wrote on Nov 14th, 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 -

Code
Select All
<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:

Code (Javascript)
Select All
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);
}
 

  

Items.PNG ( 15 KB | 186 Downloads )
Items.PNG
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Online


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: How to draw complex shapes? (Canvas mode)
Reply #13 - Nov 21st, 2016 at 1:20pm
Print Post  
Maybe try calling node2.setBounds(...) instead of assigning to the field directly. If that doesn't help, please post your updateCanvasElements / onUpdateVisuals methods if you have implemented any custom rendering.
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1
Send TopicPrint