- Welcome, Guest. Please Login or Register
MindFusion  
  We have released initial version of MindFusion.Scheduling library for HTML5 & JavaScript.  
  HomeHelpSearchLoginRegister   
     
     
   
 
Pages: 1 2 3  Send Topic Print  
Html Node in Diagram !
Read 968 times

Kannan Thirumal   Offline
YaBB Newbies
*
Posts: 37
I Love MindFusion!


   
     
 
Html Node in Diagram !
Feb 26th, 2019 at 1:26pm
 
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
 
 
 
IP Logged    
 
     

Slavcho   Offline
God Member
*****
Posts: 1677
Gender: male
tech.support


   
     
 
Re: Html Node in Diagram !
Reply #1 - Feb 26th, 2019 at 2:17pm
 
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
 
 
 
IP Logged    
 
     

Kannan Thirumal   Offline
YaBB Newbies
*
Posts: 37
I Love MindFusion!


   
     
 
Re: Html Node in Diagram !
Reply #2 - Mar 12th, 2019 at 9: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 5:26am by Kannan Thirumal »

Node.png (6 KB | 2 )
Node.png
 
IP Logged    
 
     

Kannan Thirumal   Offline
YaBB Newbies
*
Posts: 37
I Love MindFusion!


   
     
 
Re: Html Node in Diagram !
Reply #3 - Mar 14th, 2019 at 4:25am
 
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 9: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 5:26am by Kannan Thirumal »
 
IP Logged    
 
     

Lyubo   Offline
Senior Member
****
Posts: 264
Gender: male
MindFusion team


   
     
 
Re: Html Node in Diagram !
Reply #4 - Mar 14th, 2019 at 1:27pm
 
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
 
 
 
IP Logged    
 
     

Kannan Thirumal   Offline
YaBB Newbies
*
Posts: 37
I Love MindFusion!


   
     
 
Re: Html Node in Diagram !
Reply #5 - Mar 14th, 2019 at 1:39pm
 
Hi Lyubo,

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

Regards,
Kannan
 
 
 
IP Logged    
 
     

Lyubo   Offline
Senior Member
****
Posts: 264
Gender: male
MindFusion team


   
     
 
Re: Html Node in Diagram !
Reply #6 - Mar 14th, 2019 at 1: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):
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
 
 
 
IP Logged    
 
     

Kannan Thirumal   Offline
YaBB Newbies
*
Posts: 37
I Love MindFusion!


   
     
 
Re: Html Node in Diagram !
Reply #7 - Mar 14th, 2019 at 2:05pm
 
Hi Lyubo,

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

Regards,
Kannan
 
 
 
IP Logged    
 
     

Lyubo   Offline
Senior Member
****
Posts: 264
Gender: male
MindFusion team


   
     
 
Re: Html Node in Diagram !
Reply #8 - Mar 14th, 2019 at 2:25pm
 
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.
 
 
 
IP Logged    
 
     

Kannan Thirumal   Offline
YaBB Newbies
*
Posts: 37
I Love MindFusion!


   
     
 
Re: Html Node in Diagram !
Reply #9 - Mar 15th, 2019 at 9:36am
 
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 1: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):
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

 
 
 
IP Logged    
 
     

Lyubo   Offline
Senior Member
****
Posts: 264
Gender: male
MindFusion team


   
     
 
Re: Html Node in Diagram !https://mindfusion.eu/yabbfiles/Templates/Forum/default/code.gif
Reply #10 - Mar 15th, 2019 at 1:31pm
 
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
 
 
 
IP Logged    
 
     

Kannan Thirumal   Offline
YaBB Newbies
*
Posts: 37
I Love MindFusion!


   
     
 
Re: Html Node in Diagram !
Reply #11 - Mar 15th, 2019 at 1:45pm
 
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
 
 
 
IP Logged    
 
     

Lyubo   Offline
Senior Member
****
Posts: 264
Gender: male
MindFusion team


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

Regards,
Lyubo
 
 
 
IP Logged    
 
     

Kannan Thirumal   Offline
YaBB Newbies
*
Posts: 37
I Love MindFusion!


   
     
 
Re: Html Node in Diagram !
Reply #13 - Mar 15th, 2019 at 2:02pm
 
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
 
 
 
IP Logged    
 
     

Lyubo   Offline
Senior Member
****
Posts: 264
Gender: male
MindFusion team


   
     
 
Re: Html Node in Diagram !
Reply #14 - Mar 15th, 2019 at 2:48pm
 
Hi,

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

Code (Javascript):
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
 
 
 
IP Logged    
 
     
Pages: 1 2 3  Send Topic Print