Page Index Toggle Pages: 1 [2] 3 4 ... 8 Send TopicPrint
Very Hot Topic (More than 25 Replies) Html Node in Diagram ! (Read 11060 times)
Kannan Thirumal
Full Member
***
Offline


I Love Mind Fusion Diagram
:-)

Posts: 209
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: Html Node in Diagram !
Reply #15 - Mar 16th, 2019 at 3:29am
Print Post  
Hi Lyubo,

I already tried this by setting image.x, but it was giving the following error,

ERROR TypeError: Cannot assign to read only property 'x' of object '[object HTMLImageElement]'

     But image.width is working fine.

Regards,
Kannan

Lyubo wrote on Mar 15th, 2019 at 1:48pm:
Hi,

Try setting the dimensions on the underlying Image DOM element directly then:

Code (Javascript)
Select All
var imageComponent = myNode.getComponent("FirstImage");
if (imageComponent && imageComponent.image)
{
     imageComponent.image.x = 50;
     imageComponent.image.y = 50;
     imageComponent.image.width = 20;
     imageComponent.image.height = 20;
} 



Additionally, you can control the position/size by configuring margin and imageAlign properties, considering also the parent panel size.

Regards,
Lyubo

  
Back to top
 
IP Logged
 
Kannan Thirumal
Full Member
***
Offline


I Love Mind Fusion Diagram
:-)

Posts: 209
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: Html Node in Diagram !
Reply #16 - Mar 18th, 2019 at 11:39am
Print Post  
Hi Lyubo,

    Setting position and size using margin seems confusing. Could you please tell me how to set position and size using component's x/y and width/height? Thank you !

Regards,
Kannan

Lyubo wrote on Mar 15th, 2019 at 1:48pm:
Hi,

Try setting the dimensions on the underlying Image DOM element directly then:

Code (Javascript)
Select All
var imageComponent = myNode.getComponent("FirstImage");
if (imageComponent && imageComponent.image)
{
     imageComponent.image.x = 50;
     imageComponent.image.y = 50;
     imageComponent.image.width = 20;
     imageComponent.image.height = 20;
} 



Additionally, you can control the position/size by configuring margin and imageAlign properties, considering also the parent panel size.

Regards,
Lyubo

  
Back to top
 
IP Logged
 
Lyubo
Senior Member
****
Offline


MindFusion team

Posts: 484
Joined: Jun 17th, 2010
Re: Html Node in Diagram !
Reply #17 - Mar 19th, 2019 at 11:41am
Print Post  
Hi,

When you use GridPanel in your template (as is in your code), you can position its children by setting their margin, gridColumn, gridRow, columnSpan, rowSpan properties. For the Image component, when you set the imageAlign property to Fit or Stretch, the image will size itself in respect to the provided size by it's parent (GridPanel for example); if you use other values for imageAlign, the real image size will be used instead - so in this case you can use the technique from the above post to change the DOM Image element size.

Regards,
Lyubo
  
Back to top
 
IP Logged
 
Kannan Thirumal
Full Member
***
Offline


I Love Mind Fusion Diagram
:-)

Posts: 209
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: Html Node in Diagram !
Reply #18 - Mar 27th, 2019 at 7:43am
Print Post  
Hi,

Is there any way to define the json template in a separate file and load here dynamically? Thanks !

Regards,
Kannan

Kannan Thirumal wrote on Mar 12th, 2019 at 8:22am:
Hi,

I've attached a sample layout image of my application node.

It has main image at the center and first image at the top-left corner and second image at the top-right corner and third image below the second image and fourth image at the bottom-right corner and a text box in the left-bottom corner.

I've defined a CompositeNode like below. But the node displayed in the diagram is NOT like the attached sample image layout.

OrgChartNode2 = CompositeNode.classFromTemplate("OrgChartNode2",
{
component: "GridPanel",
id: "id",
rowDefinitions: ["*"],
columnDefinitions: ["22"],
children:
[
{
component: "GridPanel",
rowDefinitions: ["18", "5"],
columnDefinitions: ["18", "5"],
children:
[
{
gridColumn: 0,
component: "Image",
name: "MainImage",
autoProperty: true,
location: "MainImage.png",
margin: "3",
imageAlign: "TopLeft"
},
{
gridColumn: 0,
component: "Image",
name: "FirstImage",
autoProperty: true,
location: "FirstImage.png",
margin: "3, 3, 0, 0",
imageAlign: "TopLeft"
},
{
gridColumn: 1,
component: "Image",
name: "SecondImage",
autoProperty: true,
location: "SecondImage.png",
margin: "3, 3, -50, 5",
imageAlign: "TopRight"
},
{
gridColumn: 1,
component: "Image",
name: "ThirdImage",
autoProperty: true,
location: "ThirdImage.png",
margin: "3, 30, -50, 3",
imageAlign: "TopRight",
width: "3"
},
{
gridColumn: 1,
component: "Image",
name: "FourthImage",
autoProperty: true,
location: "FourthImage.png",
margin: "3, 50, -50, 3",
imageAlign: "BottomRight",
width: "3"
},
{
gridColumn: 0,
component: "Text",
name: "NoOfElementsText",
autoProperty: true,
text: "title",
margin: "3, 40, 0, 0",
font: "Verdana 12px",
textAlign: "BottomLeft"
},
]
},
});

I've set the images and text like this,

var node = new this.OrgChartNode2();
node.setMainImage("./../../../../images/MainImage.png");
node.setFirstImage("./../../../../images/First.png");
node.setSecondImage("./../../../../images/Second.png");
node.setThirdImage("./../../../../images/Third.png");
node.setFourthImage("./../../../../images/Fourth.png");
node.setNoOfElementsText("8");

this.diagram.addItem(node);

My requirement is, all the small images should be shown within the main image as described above. But the images are not properly placed using the above code.

Also I need the following,
* Image/Text are dynamically set visible
* Image/Text position also set dynamically
* Image/Text size also set dynamically

May I know how to solve this issue? Thank you !

Regards,
Kannan

  
Back to top
 
IP Logged
 
Lyubo
Senior Member
****
Offline


MindFusion team

Posts: 484
Joined: Jun 17th, 2010
Re: Html Node in Diagram !
Reply #19 - Mar 27th, 2019 at 9:42am
Print Post  
Hi,

Yes, you can load the template from a file as you would any other JSON content. For example:

Code (Javascript)
Select All
var url = encodeURI("template.txt");

var xhr = new XMLHttpRequest();
if (xhr.overrideMimeType)
	xhr.overrideMimeType("text/ plain");

xhr.open("GET", url);
xhr.onload = function (e)
{
	if (xhr.status === 200)
	{
		var content = xhr.responseText;
		var template = JSON.parse(content);
		OrgChartNode = MindFusion.Diagramming.CompositeNode.classFromTemplate("OrgChartNode", template);
	}
	else
		console.log('Request failed status: ' + xhr.status);
};
xhr.onerror = function (e)
{
	console.log('Request failed error: ' + xhr.status + ';' + e.toString());
};

xhr.send(); 



Regards,
Lyubo
  
Back to top
 
IP Logged
 
Kannan Thirumal
Full Member
***
Offline


I Love Mind Fusion Diagram
:-)

Posts: 209
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: Html Node in Diagram !
Reply #20 - Mar 27th, 2019 at 12:17pm
Print Post  
Hi Lyubo,

Thank you ! I'm doing like below but getting error. May I know how to fix this?

OrgChartNode: any;

ngAfterViewInit() {

this.loadJsonTemplate();
}

private loadJsonTemplate() {

var url = encodeURI("diagram-node.template.txt");
var xhr = new XMLHttpRequest();
if (xhr.overrideMimeType)
xhr.overrideMimeType("text/ plain");
xhr.open("GET", url);
xhr.onload = function (e) {
if (xhr.status === 200) {
var content = xhr.responseText;
var template = JSON.parse(content);
OrgChartNode = MindFusion.Diagramming.CompositeNode.classFromTemplate("OrgChartNode", template);
}
else
console.log('Request failed status: ' + xhr.status);
};
xhr.onerror = function (e) {
console.log('Request failed error: ' + xhr.status + ';' + e.toString());
};
xhr.send();
}

private createCompositeNode(diagramElement: any) {

var node = new this.OrgChartNode();

}

Regards,
Kannan
  
Back to top
 
IP Logged
 
Lyubo
Senior Member
****
Offline


MindFusion team

Posts: 484
Joined: Jun 17th, 2010
Re: Html Node in Diagram !
Reply #21 - Mar 27th, 2019 at 12:43pm
Print Post  
And what is that error? As fetching the file contents is a asynchronous operation, make sure, you've actually loaded the template before trying to initialize the node. Also, is the file path correct? Is the file content a valid JSON string? Do you receive response from the request or it fails before that?

Regards,
Lyubo
  
Back to top
 
IP Logged
 
Kannan Thirumal
Full Member
***
Offline


I Love Mind Fusion Diagram
:-)

Posts: 209
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: Html Node in Diagram !
Reply #22 - Mar 27th, 2019 at 12:50pm
Print Post  
Hi,

It is giving build error,

error TS2304: Cannot find name 'OrgChartNode'.

In the below line of code,

OrgChartNode = MindFusion.Diagramming.CompositeNode.classFromTemplate("OrgChartNode", template);

Regards,
Kannan
  
Back to top
 
IP Logged
 
Lyubo
Senior Member
****
Offline


MindFusion team

Posts: 484
Joined: Jun 17th, 2010
Re: Html Node in Diagram !
Reply #23 - Mar 27th, 2019 at 1:29pm
Print Post  
The code is just a snippet that creates and sends the template file request. It assumes you've declared the variable before calling it. You need to add OrgChartNode as a variable or field, somewhere in your class.

Code (Javascript)
Select All
private OrgChartNode: any;
//...
this.OrgChartNode = ...

// or

var OrgChartNode = ... 



Regards,
Lyubo
  
Back to top
 
IP Logged
 
Kannan Thirumal
Full Member
***
Offline


I Love Mind Fusion Diagram
:-)

Posts: 209
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: Html Node in Diagram !
Reply #24 - Mar 27th, 2019 at 2:40pm
Print Post  
Hi Lyubo,

That is because of the following line of code,

xhr.onload = function (e) {

I changed it to,

xhr.onload = (e) => {

Now it works.

But now at runtime, it throws the below exception,

vendor.js:40489 ERROR SyntaxError: Unexpected token c in JSON at position 9
at JSON.parse (<anonymous>)

May I know why? I've attached the json template file.

Regards,
Kannan
  

diagram-node_template.txt ( 4 KB | 37 Downloads )
Back to top
 
IP Logged
 
Lyubo
Senior Member
****
Offline


MindFusion team

Posts: 484
Joined: Jun 17th, 2010
Re: Html Node in Diagram !
Reply #25 - Mar 27th, 2019 at 5:19pm
Print Post  
Hi,

The error means your json string is not formatted properly. You need to enclose attribute names in quotes. A properly formatted json should look like:
Code (Javascript)
Select All
//...
{
  "component": "GridPanel",
  "id": "id",
  "children":
  [
      {
          "component": "GridPanel",
          "stroke": "red",
      }
  ]
}
//... 



Regards,
Lyubo
  
Back to top
 
IP Logged
 
Kannan Thirumal
Full Member
***
Offline


I Love Mind Fusion Diagram
:-)

Posts: 209
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: Html Node in Diagram !
Reply #26 - Mar 28th, 2019 at 5:38am
Print Post  
Hi Lyubo,

Thank you. It works ! Is there any tool/plugin to edit/view the output of this template? I'm using visual studio.

Regards,
Kannan
  
Back to top
 
IP Logged
 
Lyubo
Senior Member
****
Offline


MindFusion team

Posts: 484
Joined: Jun 17th, 2010
Re: Html Node in Diagram !
Reply #27 - Mar 28th, 2019 at 10:53am
Print Post  
Hi,

The CompositeNode template format is just the JSON standard data format, so you can use any tool/plugin available for it to edit and customize your templates.

Regards,
Lyubo
  
Back to top
 
IP Logged
 
Kannan Thirumal
Full Member
***
Offline


I Love Mind Fusion Diagram
:-)

Posts: 209
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: Html Node in Diagram !
Reply #28 - May 14th, 2019 at 2:45pm
Print Post  
Hi,

I've a diagram like this,

private diagram: Diagram;

I've created composite node (as described in my previous posts) and adding to the diagram like this,

diagram.addItem(node);

Like this added few more nodes.

After this I want to draw different set of nodes. So first I cleared the diagram like this,

this.diagram.clearAll();

And added next set of composite nodes as described before.

Now the previous set of nodes should vanish and the new set of nodes should display.

This is working fine till "diagram-library": "3.3.0"

But after that, even in the latest version "3.3.5" this is not working.

That means both the set of nodes are displayed in the same diagram.

If I do other operation like diagram zoom, then the previous set of nodes vanishes and only the new nodes displays.

May I know what happened in the new releases? Please help me to fix this issue.

Thanks & Regards,
Kannan
  
Back to top
 
IP Logged
 
Lyubo
Senior Member
****
Offline


MindFusion team

Posts: 484
Joined: Jun 17th, 2010
Re: Html Node in Diagram !
Reply #29 - May 15th, 2019 at 10:19am
Print Post  
Hi,

I'm not able to reproduce the issue, but you could try calling this.diagram.invalidate(); before adding the new set of nodes - this should resolve it.

Regards,
Lyubo
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1 [2] 3 4 ... 8
Send TopicPrint