Page Index Toggle Pages: [1] 2  Send TopicPrint
Hot Topic (More than 10 Replies) Can please Provide me an example onUpdateVisuals? (Read 8290 times)
Ankur shah
Junior Member
**
Offline


I Love MindFusion!

Posts: 63
Joined: Mar 16th, 2017
Can please Provide me an example onUpdateVisuals?
Apr 3rd, 2017 at 7:51am
Print Post  
I need to customize the current TableNode component provided by Mindfusion as i need to use the current functionality of table node as well as mine custom made properties. As i am using Angular 2. If possible please provide me an example in same.
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: Can please Provide me an example onUpdateVisuals?
Reply #1 - Apr 3rd, 2017 at 11:10am
Print Post  
See last post from our previous discussion here -
http://mindfusion.eu/Forum/YaBB.pl?num=1489662828/15#15

You'll also need to use the updated scripts and d.ts from attachment there.
  
Back to top
 
IP Logged
 
Ankur shah
Junior Member
**
Offline


I Love MindFusion!

Posts: 63
Joined: Mar 16th, 2017
Re: Can please Provide me an example onUpdateVisuals?
Reply #2 - Apr 4th, 2017 at 10:31am
Print Post  
Problem 1:
I am able to achieve this functionality by using UpdateVisual but facing linking problem. As you can see in attached pic.

Problem 2:
Whenever i Collapsed the container attached links move in wrong direction. You can see the second pic which is in collapsed state
« Last Edit: Jun 1st, 2017 at 5:01am by Ankur shah »  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: Can please Provide me an example onUpdateVisuals?
Reply #3 - Apr 4th, 2017 at 11:13am
Print Post  
The link keeps relatively the same position to folded container as to the child node it connects to. I'm guessing its end point does not lie exactly on boundary of child table, so it also doesn't lie on boundary of the container when it gets folded. If you are calling setBounds on nodes to resize them, try also setting its updateLinks argument to true to also update the links.
  
Back to top
 
IP Logged
 
Ankur shah
Junior Member
**
Offline


I Love MindFusion!

Posts: 63
Joined: Mar 16th, 2017
Re: Can please Provide me an example onUpdateVisuals?
Reply #4 - Apr 5th, 2017 at 9:56am
Print Post  
There is one undesired behavior.
Upon collapse, the link stretches to point to the node below and the node below do not change position to “adapt” to the collapse behavior. Ideally, the length of the link should not change and all the “child” nodes should come closer (i.e. change position upon collapse).

Can you please let me know how can we achieve this?
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: Can please Provide me an example onUpdateVisuals?
Reply #5 - Apr 5th, 2017 at 5:56pm
Print Post  
You could offset nodes under the container recursively from containerFolded event -

Code
Select All
function onContainerFolded(sender, args)
{
	var ctr = args.getNode();
	offsetChildNodes(ctr,
		ctr.unfoldedSize.height - ctr.captionHeight);
}

function offsetChildNodes(node, offset)
{
	var links = node.getOutgoingLinks();
	for (var l = 0; l < links.length; l++)
	{
		var link = links[l];
		var child = link.getDestination();
		var rect = child.getBounds().clone();
		rect.y -= offset;
		child.setBounds(rect, true);
		offsetChildNodes(child, offset);
	}
} 



A few things of notice -

1. This will overflow the JS stack if there are loops in the graph. If you allow loops, you'll have to add some guard conditions to check if a node has been already moved.

2. Above code works nice for single segment polyline links. If you have more control points in links, you'll also have to offset the y coordinate of the points by same amount for all intermediate points. Don't touch the end points - they move together with nodes.

3. We keep original size of container in unfoldedSize field, considered private at this time. We'll define it as property for upcoming release. If you need to access it from TypeScript, either add it as a MindFusion.Drawing.Size field in the d.ts file, or declare it using an interface.

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


I Love MindFusion!

Posts: 63
Joined: Mar 16th, 2017
Re: Can please Provide me an example onUpdateVisuals?
Reply #6 - Apr 13th, 2017 at 6:05am
Print Post  
Can you please let me know how can we add image in UpdateVisuals method?

i have used like the below but it is not working

var imageObj = new MindFusion.Drawing.Image();
            imageObj.src = "../../../assets/img/reference-orange.png";

            var img = new MindFusion.Drawing.Image(
                new MindFusion.Drawing.Rect(rect.x + 30, rect.y - 8, rect.width / 2, rect.width / 2));
            img.image = imageObj;

            item.graphicsContainer.content.push(img);
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: Can please Provide me an example onUpdateVisuals?
Reply #7 - Apr 13th, 2017 at 9:38am
Print Post  
Hi,

There are two types of image objects involved if you want to custom-draw, the DOM Image on which you can set src property, and MindFusion.Drawing.Image which wraps DOM image as element in the diagram's visual tree. For creating MindFusion.Drawing.Image from TypeScript, please use updated definition file attached here. Adding an image to the onUpdatevisuals method from http://mindfusion.eu/Forum/YaBB.pl?num=1489662828/15#15 looks like this -

Code
Select All
 var image = new MindFusion.Drawing.Image(new Rect(rect.x + 10, rect.y + 2, 10, 10));
 image.image.src = "icon3.png";
 image.image.width = 10;
 image.image.height = 10;
 image.loaded = true;
 item.getGraphicsContent().push(image); 



Regards,
Slavcho
Mindfusion
  

jsdiag_d.zip ( 28 KB | 135 Downloads )
Back to top
 
IP Logged
 
Ankur shah
Junior Member
**
Offline


I Love MindFusion!

Posts: 63
Joined: Mar 16th, 2017
Re: Can please Provide me an example onUpdateVisuals?
Reply #8 - Apr 13th, 2017 at 12:50pm
Print Post  
Thanks It works
I need to show text dynamically in Updatevisuals is this possible if not please let me know the best way to do it?
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: Can please Provide me an example onUpdateVisuals?
Reply #9 - Apr 13th, 2017 at 1:23pm
Print Post  
What do you mean by "show text dynamically"?
  
Back to top
 
IP Logged
 
Ankur shah
Junior Member
**
Offline


I Love MindFusion!

Posts: 63
Joined: Mar 16th, 2017
Re: Can please Provide me an example onUpdateVisuals?
Reply #10 - Apr 13th, 2017 at 1:53pm
Print Post  
As you can see the attached pic highlighted is dynamic text.

I mean to say that whenever we create new container node it should show the new text for that container node.
« Last Edit: Jun 1st, 2017 at 5:01am by Ankur shah »  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: Can please Provide me an example onUpdateVisuals?
Reply #11 - Apr 13th, 2017 at 2:21pm
Print Post  
If you mean it has different values for different nodes

- store the text in a custom field in your node objects
- assign the field value to MindFusion.Drawing.Text object instead of the fixed string shown in http://mindfusion.eu/Forum/YaBB.pl?num=1489662828/15#15
- call node.invalidate() whenever you change the field value and need the node repainted. Attached file adds TypeScript definition for invalidate.

Regards,
Slavcho
« Last Edit: Apr 13th, 2017 at 5:06pm by Slavcho »  

jsdiag_d_001.zip ( 28 KB | 234 Downloads )
Back to top
 
IP Logged
 
Ankur shah
Junior Member
**
Offline


I Love MindFusion!

Posts: 63
Joined: Mar 16th, 2017
Re: Can please Provide me an example onUpdateVisuals?
Reply #12 - Apr 14th, 2017 at 7:01am
Print Post  
let me explain you what i am doing ? I have created customcontainer class in which i am having UpdateVisual method. Now i need to create the container nodes for that i need to created the object for customcontainer class.

Now my problem is that when ever i create a new object of customconatiner it creates a new container with same text which was specified first time at the time of creation.  No matter how many object i have created.
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: Can please Provide me an example onUpdateVisuals?
Reply #13 - Apr 14th, 2017 at 7:19am
Print Post  
Are you sure you aren't setting a node.prototype field to store the text? - that would be shared among all instances. E.g. if you do something like this from a setter or constructor -

Code
Select All
setMyText: function(value)
{
    this.prototype.myText = value;
}
node.setMyText("node 5"); 



then accessing node.myText would return "node 5" for all instances. This should set it only for the specific instance
Code
Select All
setMyText: function(value)
{
    this.myText = value;
}
node.setMyText("node 5"); 



  
Back to top
 
IP Logged
 
Ankur shah
Junior Member
**
Offline


I Love MindFusion!

Posts: 63
Joined: Mar 16th, 2017
Re: Can please Provide me an example onUpdateVisuals?
Reply #14 - Apr 14th, 2017 at 7:52am
Print Post  
Code (Javascript)
Select All
    private createCustomTableTableNode() {

        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);
        };
    }
 



As you can see in the above code variable
nodeText i am setting a dynamic text using this._conatinerAtt.headingText.
But every time i got the same text.
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: [1] 2 
Send TopicPrint