Diagram JS error

Forum rules
Please note that response time for technical support is within 3-5 business days.
Post Reply
heldergayer
Posts: 1
Joined: 20 Mar 2016, 00:46

04 Apr 2018, 22:43

Hi, I'm migrating my old template to Barcelona, but when I try to use the Diagram component in a simple page, the following error happens:

TypeError: Cannot read property 'length' of undefined
at c.initEndPoints (diagram.js.xhtml?ln=primefaces&v=6.1:1)
at diagram.js.xhtml?ln=primefaces&v=6.1:1
at I.jsPlumbInstance.batch (diagram.js.xhtml?ln=primefaces&v=6.1:1)
at diagram.js.xhtml?ln=primefaces&v=6.1:1
at I.jsPlumbInstance.bind (diagram.js.xhtml?ln=primefaces&v=6.1:1)
at I.jsPlumbInstance.ready (diagram.js.xhtml?ln=primefaces&v=6.1:1)
at c._render (diagram.js.xhtml?ln=primefaces&v=6.1:1)
at c.renderDeferred (core.js.xhtml?ln=primefaces&v=6.1:5)
at c.init (diagram.js.xhtml?ln=primefaces&v=6.1:1)


Image

Code: Select all

<div class="ui-g">
                <div class="ui-g-12">
                    <div class="card">
                        <!-- Comprimento da área de desenho do gráfico unifilar. -->
                        <h:inputHidden id="screenWidth" value="#{ypmUnifilarMBean.screenWidth}" />
                        <!-- Altura da área de desenho do gráfico unifilar. -->
                        <h:inputHidden id="screenHeight" value="#{ypmUnifilarMBean.screenHeight}" />
                        <h:panelGroup id="unifilarDrag">
                            <div id="unifilarArea" style="width: 100%; height: 400px; position: relative;">
                                <p:diagram
                                    id="unifilarDiagram"
                                    value="#{ypmSessionMBean.model}"
                                    style="
                                    width: #{ypmUnifilarMBean.screenWidth}px;
                                    height: #{ypmUnifilarMBean.screenHeight}px;">
                                </p:diagram>
                            </div>
                        </h:panelGroup>
                    </div>
                </div>
            </div>
  

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

10 Apr 2018, 13:43

Thanks a lot for the screenshot and sample codes. But, I couldn't replicate it. Could you please check your bean.java? Also, do you have addEndPoint elements?

My Test code;

Code: Select all

package org.primefaces.barcelona.view.data;

import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
import org.primefaces.model.diagram.DefaultDiagramModel;
import org.primefaces.model.diagram.DiagramModel;
import org.primefaces.model.diagram.Element;
import org.primefaces.model.diagram.Connection;
import org.primefaces.model.diagram.endpoint.DotEndPoint;
import org.primefaces.model.diagram.endpoint.EndPointAnchor;
 
@ManagedBean(name = "diagramBasicView")
@RequestScoped
public class BasicView {
     
    private DefaultDiagramModel model;
 
    @PostConstruct
    public void init() {
        model = new DefaultDiagramModel();
        model.setMaxConnections(-1);
         
        Element elementA = new Element("A", "20em", "6em");
        elementA.addEndPoint(new DotEndPoint(EndPointAnchor.BOTTOM));
         
        Element elementB = new Element("B", "10em", "18em");
        elementB.addEndPoint(new DotEndPoint(EndPointAnchor.TOP));
         
        Element elementC = new Element("C", "40em", "18em");
        elementC.addEndPoint(new DotEndPoint(EndPointAnchor.TOP));
                         
        model.addElement(elementA);
        model.addElement(elementB);
        model.addElement(elementC);
         
        model.connect(new Connection(elementA.getEndPoints().get(0), elementB.getEndPoints().get(0)));        
        model.connect(new Connection(elementA.getEndPoints().get(0), elementC.getEndPoints().get(0)));
    }
     
    public DiagramModel getModel() {
        return model;
    }
}

Code: Select all

<p:diagram value="#{diagramBasicView.model}" style="height:400px" styleClass="ui-widget-content" />

Post Reply

Return to “Barcelona - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 5 guests