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


I Love Mind Fusion Diagram
:-)

Posts: 270
Location: Bangalore, India
Joined: Jan 18th, 2019
Html Node in Diagram !
Feb 26th, 2019 at 1:26pm
Print Post  
Hi,

     My diagram node have multiple elements like images, text boxes etc. Also some of these elements inside can be hidden at runtime. May I know which is the best way to do that?

Thanks & Regards,
Kannan
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: Html Node in Diagram !
Reply #1 - Feb 26th, 2019 at 2:17pm
Print Post  
Edit: Since this is the most viewed topic on our JS forum, note that hosting HTML content in nodes is now possible using ControlNode objects (since v3.5 of the library).

Hi,

There's no support for showing Html inside nodes. You can display multiple images and texts using either TableNode objects (see SpanningCells.html example) or CompositeNode (Tutorial3.html example).

Regards,
Slavcho
Mindfusion
« Last Edit: Nov 24th, 2020 at 8:37am by Slavcho »  
Back to top
 
IP Logged
 
Kannan Thirumal
Senior Member
****
Offline


I Love Mind Fusion Diagram
:-)

Posts: 270
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: Html Node in Diagram !
Reply #2 - Mar 12th, 2019 at 8:22am
Print Post  
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
« Last Edit: Mar 14th, 2019 at 4:26am by Kannan Thirumal »  

Node.png ( 6 KB | 166 Downloads )
Node.png
Back to top
 
IP Logged
 
Kannan Thirumal
Senior Member
****
Offline


I Love Mind Fusion Diagram
:-)

Posts: 270
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: Html Node in Diagram !
Reply #3 - Mar 14th, 2019 at 3:25am
Print Post  
Hi,

I can set only image location for Image component or text for Text component dynamically. I couldn't set any other properties of the component like visibility, text font, position etc. Any clue for this? Is there any reference for jsontemplate?

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

« Last Edit: Mar 14th, 2019 at 4:26am by Kannan Thirumal »  
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: Html Node in Diagram !
Reply #4 - Mar 14th, 2019 at 12:27pm
Print Post  
Hi,

The properties from your example below apply correctly in my test - font, margin, imageAlign, etc. You can set visibility to either "Visible", "Hidden" or "Collapsed". For reference, here are the documentation topic on the components generated for the composite node: Image, Text.

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


I Love Mind Fusion Diagram
:-)

Posts: 270
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: Html Node in Diagram !
Reply #5 - Mar 14th, 2019 at 12:39pm
Print Post  
Hi Lyubo,

     But I want to set visibility, size, position during runtime not inside the OrgChartNode because it differs for each node.

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


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: Html Node in Diagram !
Reply #6 - Mar 14th, 2019 at 12:50pm
Print Post  
Hi,

Use the compositeNode.getComponent(name) method at runtime to get the component you wish to modify. When you're done with your changes, call the invalidate method on the node to repaint it:

Code (Javascript)
Select All
var textComponent = myNode.getComponent("NoOfElementsText");
if (textComponent)
{
    textComponent.visibility = MindFusion.Drawing.Visibility.Visible;
    textComponent.font = new MindFusion.Drawing.Font("Arial", 6);
}

// other modifications...

myNode.invalidate(); 



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


I Love Mind Fusion Diagram
:-)

Posts: 270
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: Html Node in Diagram !
Reply #7 - Mar 14th, 2019 at 1:05pm
Print Post  
Hi Lyubo,

Looks good. But Visibility is not in MindFusion.Drawing. Any idea?

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


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: Html Node in Diagram !
Reply #8 - Mar 14th, 2019 at 1:25pm
Print Post  
Do you mean in the type definitions file? We'll add it in the next release. As a workaround you can use the numerical values Hidden: 0, Collapsed: 1, Visible: 2.
  
Back to top
 
IP Logged
 
Kannan Thirumal
Senior Member
****
Offline


I Love Mind Fusion Diagram
:-)

Posts: 270
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: Html Node in Diagram !
Reply #9 - Mar 15th, 2019 at 8:36am
Print Post  
Hi,

But this gives the following compiler error,

error TS2339: Property 'visibility' does not exist on type 'Component'.

Regards,
Kannan

Lyubo wrote on Mar 14th, 2019 at 12:50pm:
Hi,

Use the compositeNode.getComponent(name) method at runtime to get the component you wish to modify. When you're done with your changes, call the invalidate method on the node to repaint it:

Code (Javascript)
Select All
var textComponent = myNode.getComponent("NoOfElementsText");
if (textComponent)
{
    textComponent.visibility = MindFusion.Drawing.Visibility.Visible;
    textComponent.font = new MindFusion.Drawing.Font("Arial", 6);
}

// other modifications...

myNode.invalidate(); 



Regards,
Lyubo

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


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: Html Node in Diagram !https://mindfusion.eu/yabbfiles/Templates/Forum/default/code.gif
Reply #10 - Mar 15th, 2019 at 12:31pm
Print Post  
Hi,

Cast textComponent to <any> in TypeScript as a workaround, until we add the missing properties in the definitions file, or use declaration merging to add them from your side.

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


I Love Mind Fusion Diagram
:-)

Posts: 270
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: Html Node in Diagram !
Reply #11 - Mar 15th, 2019 at 12:45pm
Print Post  
Hi Lyubo,

It works by using "any". Thanks ! But need help to set x and y for image component,

var imageComponent = myNode.getComponent("FirstImage");
if (imageComponent)
{
    // imageComponent.image.x = 30;
    // imageComponent.image.y = 60;
    imageComponent.image.style.x = 30;
    imageComponent.image.style.y = 60;
}

The above didn't work.

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


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: Html Node in Diagram !
Reply #12 - Mar 15th, 2019 at 12:52pm
Print Post  
Try setting the imageComponent.bounds property to a new MindFusion.Drawing.Rect with the desired location and dimensions.

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


I Love Mind Fusion Diagram
:-)

Posts: 270
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: Html Node in Diagram !
Reply #13 - Mar 15th, 2019 at 1:02pm
Print Post  
Hi Lyubo,

Tried this, but no luck Sad

var imageComponent = myNode.getComponent("FirstImage");
if (imageComponent)
{
     imageComponent.bounds = new MindFusion.Drawing.Rect(50, 50, 20, 20);
}

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


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: Html Node in Diagram !
Reply #14 - Mar 15th, 2019 at 1:48pm
Print Post  
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
 
Page Index Toggle Pages: [1] 2 3 ... 10
Send TopicPrint