1. Home
  2. Forum
  3. Vue
  4. Overview panel is not displaying HTML nodes

Overview panel is not displaying HTML nodes

Hi

I use HTML nodes(grey) and native (green) ones in diagram.

Method getHtmlContent is called from getNodeDefaults method.

node.shape = { type: 'HTML', content: this.getHtmlContent(node) }

#####

  getHtmlContent(node: NodeModel) {
    // @ts-ignore
    let annotation = node.annotations[0].content;
    // @ts-ignore
    let style = node.style.fill;
    // @ts-ignore
    let textColor = node.annotations[0].style.color;

    this.setNodeIcon(node)

    let htmlContent = `<div style="background:${style};display:flex;height:100%;width:100%;">
                        <div style="width:90%;height:100%;display:table;"> 
                          <p style="padding-left:2em;text-align:center;color:white;vertical-align: middle;display: table-cell;">${annotation}</p>
                        </div>
                        <div style="display: table; height: 100%;">
                          <i class="${this.nodeIcon}" aria-hidden style="color: ${textColor}; height: 100%; vertical-align: middle; display: table-cell;">
                          </i>
                        </div>
                       </div>`
    return htmlContent;
  }

And the overview panel is not displaying HTML nodes, only native.



14 Replies 1 reply marked as answer
AR Aravind Ravi Syncfusion Team July 21, 2020 08:19 AM UTC

Hi Alex, 
 
We are unable to reproduce the reported issue at our end. We have created a sample using the HTML nodes and Native nodes. In the sample we have used the HTML content for node as you shared in the last update. When we used both HTML nodes and native node in the diagram, both nodes gets visible in the Overview and diagram. Please refer below screenshot 
 
 
 
HTML content used for node 
 
function getHtmlContent(node) { 
       
    // @ts-ignore 
    let annotation = node.annotations[0].content; 
    // @ts-ignore 
    let style = node.style.fill; 
    // @ts-ignore 
    let textColor = node.annotations[0].style.color; 
 
 
    let htmlContent = `<div style="background:${style};display:flex;height:100%;width:100%;"> 
                        <div style="width:90%;height:100%;display:table;">  
                          <p style="padding-left:2em;text-align:center;color:white;vertical-align: middle;display: table-cell;">${annotation}</p> 
                        </div> 
                        <div style="display: table; height: 50%;"> 
                          <i aria-hidden style="color: ${textColor}; height: 50%; vertical-align: middle; display: table-cell;"> 
                          </i> 
                        </div> 
                       </div>` 
    return htmlContent; 
  } 
 
So please share us an simple sample illustrating issue or modify the above sample replicating issue which would help us to serve you better. 
 
Regards 
Aravind Ravi 


AB Alex B replied to Aravind Ravi July 21, 2020 09:31 AM UTC

Hi Alex, 
 
We are unable to reproduce the reported issue at our end. We have created a sample using the HTML nodes and Native nodes. In the sample we have used the HTML content for node as you shared in the last update. When we used both HTML nodes and native node in the diagram, both nodes gets visible in the Overview and diagram. Please refer below screenshot 
 
 
 
HTML content used for node 
 
function getHtmlContent(node) { 
       
    // @ts-ignore 
    let annotation = node.annotations[0].content; 
    // @ts-ignore 
    let style = node.style.fill; 
    // @ts-ignore 
    let textColor = node.annotations[0].style.color; 
 
 
    let htmlContent = `<div style="background:${style};display:flex;height:100%;width:100%;"> 
                        <div style="width:90%;height:100%;display:table;">  
                          <p style="padding-left:2em;text-align:center;color:white;vertical-align: middle;display: table-cell;">${annotation}</p> 
                        </div> 
                        <div style="display: table; height: 50%;"> 
                          <i aria-hidden style="color: ${textColor}; height: 50%; vertical-align: middle; display: table-cell;"> 
                          </i> 
                        </div> 
                       </div>` 
    return htmlContent; 
  } 
 
So please share us an simple sample illustrating issue or modify the above sample replicating issue which would help us to serve you better. 
 
Regards 
Aravind Ravi 


Hi Aravind

I've created the sample by reproducing the issue.
I've attached the diagram JSON, generated, and saved in our database by your component.

AR Aravind Ravi Syncfusion Team July 23, 2020 03:41 AM UTC

Hi Alex, 
 
We are validating your requirements and update you within two business days on July 27th 2020. 
 
Regards 
Aravind Ravi 


AR Aravind Ravi Syncfusion Team July 28, 2020 03:52 AM UTC

Hi Alex, 

On initial rendering of HTML nodes, nodes are gets properly visible in the overview. Could you please confirm us whether the HTML nodes does not gets visible in the overview when save and load diagram or at initial rendering of diagram and nodes, HTML nodes does not gets visible in the overview at your end. This will help us to provide solution at earliest. 

Regards 
Aravind Ravi 


AB Alex B replied to Aravind Ravi July 28, 2020 09:17 AM UTC

Hi Alex, 

On initial rendering of HTML nodes, nodes are gets properly visible in the overview. Could you please confirm us whether the HTML nodes does not gets visible in the overview when save and load diagram or at initial rendering of diagram and nodes, HTML nodes does not gets visible in the overview at your end. This will help us to provide solution at earliest. 

Regards 
Aravind Ravi 


Hi Aravind

In getNodeDefaults I added "node.visible = true" after HTML content generated.
Now when I drop, I can see html node in overview. but when I save json and reload, I can't see it.
Seems the issue when I save and load.

AB Alex B July 28, 2020 12:37 PM UTC

Hi again, 

Some remarks to my previous message.
When I drag, but haven't dropped yet, I can see node in overview, but after getNodeDefaults method is executed and node is initialized, I can't see it. 
At this moment diagram is not saved yet. So the problem lies somewhere at initial rendering of the node.

AR Aravind Ravi Syncfusion Team July 29, 2020 12:01 PM UTC

Hi Alex, 

We are unable to reproduce the reported issue at our end. When we drag and drop the nodes from symbol palette to diagram , the HTML nodes gets visible in the diagram and in the overview. After node gets dropped in the diagram nodeDefaults method gets executed. In that method we have set the HTML content for the node. We have attached a video demonstration of the issue. Please find the video in below link 


Please upgrade to our latest version package (18.2.46) and try whether issue gets replicated or not. So please confirm us whether we try to reproduce the issue in same way that you tried at your end. If not, then please share us a video demonstration of your issue and simple sample illustrating issue. This will help us to serve you better. 

Regards 
Aravind Ravi 


AB Alex B replied to Aravind Ravi January 11, 2021 05:52 PM UTC

Hi Alex, 

We are unable to reproduce the reported issue at our end. When we drag and drop the nodes from symbol palette to diagram , the HTML nodes gets visible in the diagram and in the overview. After node gets dropped in the diagram nodeDefaults method gets executed. In that method we have set the HTML content for the node. We have attached a video demonstration of the issue. Please find the video in below link 


Please upgrade to our latest version package (18.2.46) and try whether issue gets replicated or not. So please confirm us whether we try to reproduce the issue in same way that you tried at your end. If not, then please share us a video demonstration of your issue and simple sample illustrating issue. This will help us to serve you better. 

Regards 
Aravind Ravi 


Hi Aravind

I've updated diagram packages to 18.2.46. that did not solve my issue.
I've created a sample Sample diagram and noticed, If I remove in mounted section these rows

    var diagram = this.$refs.diagram.ej2Instances;
    diagram.loadDiagram(JSON.stringify(this.dataSource));

And then drop HTML nodes they have correct behavior
Seems there is something wrong in Diagram json, which is generated by diagram.

Can you take a look at those JSON? It has some diagram extra info which is not needed, that can be a key.
Can I set not to include them in json? All I need is info about nodes, their positions and connectors



AR Aravind Ravi Syncfusion Team January 12, 2021 11:19 AM UTC

Hi Alex, 
 
We have modified a sample to show HTML nodes in the overview. On analyzing the provided sample, you have tried to load the diagram json in the mounted function, so that diagram instance does not set and nodes are not loaded. So instead of load the json in the mounted function, load the json in the created event. After diagram gets created, created event gets triggered. In that event load the json, so that nodes are get visible in the diagram. Please refer to below code snippet and sample 
 
created: (args) => { 
        var diagram = this.$refs.diagram.ej2Instances; 
        diagram.loadDiagram(JSON.stringify(this.dataSource)); 
      }, 
 
 
Regards 
Aravind Ravi 


Marked as answer
AB Alex B replied to Aravind Ravi January 12, 2021 03:44 PM UTC

Hi Alex, 
 
We have modified a sample to show HTML nodes in the overview. On analyzing the provided sample, you have tried to load the diagram json in the mounted function, so that diagram instance does not set and nodes are not loaded. So instead of load the json in the mounted function, load the json in the created event. After diagram gets created, created event gets triggered. In that event load the json, so that nodes are get visible in the diagram. Please refer to below code snippet and sample 
 
created: (args) => { 
        var diagram = this.$refs.diagram.ej2Instances; 
        diagram.loadDiagram(JSON.stringify(this.dataSource)); 
      }, 
 
 
Regards 
Aravind Ravi 


HI Aravind

Thanks a lot, that helped me.

I have nested diagrams and I used loadDiagram function, to display different schemas in same diagram component.
This way I need to trigger diagram recreation.
Can I update json schema at runtime? Similiar like dataBind function in other components?

AR Aravind Ravi Syncfusion Team January 14, 2021 09:13 AM UTC

Hi Alex, 

Could you please confirm us that whether you want to load the diagram json in any event at any time. If yes, then it is possible to load the diagram json at anytime after diagram gets rendered. After diagram gets created, we can able to get the diagram instance. Through diagram’s loadDiagram method, we can able to load JSON in the diagram. 

Regards 
Aravind Ravi 


AB Alex B replied to Aravind Ravi January 15, 2021 10:45 AM UTC

Hi Alex, 

Could you please confirm us that whether you want to load the diagram json in any event at any time. If yes, then it is possible to load the diagram json at anytime after diagram gets rendered. After diagram gets created, we can able to get the diagram instance. Through diagram’s loadDiagram method, we can able to load JSON in the diagram. 

Regards 
Aravind Ravi 


Hi Aravind

Yes, in node I attached userhandle action, which returns sub diagram Json, this json will be loaded in current instance of diagram,.
But if I load it after user handle click, the issue with overview returns.

AB Alex B January 15, 2021 11:06 AM UTC

HI Aravind

I managed to resolve this issue using v-if directive for regenerating diagram, thanks for help.

GG Gowtham Gunashekar Syncfusion Team January 18, 2021 01:50 PM UTC

Hi Alex, 
 
Thanks for your update, please contact us if you have any query . 
 
 
Regards, 
Gowtham  
 


Loader.
Up arrow icon