javascriptmxgraphjgraphdraw.io

Draw line in mxGraph with XML?


I use this example of mxGraph Editor

I'm trying to use the library to make ladder diagramming editor, so I want to draw start and end lines, but I need them all as a boundary for the diagramming area from left and right all time ( start with the editor every time ), how can I do that and how can I make them connectable to the elements?

can anyone help, please?

explaining image : what I want to do in a pic

Edit:

this code draws a line, then I positioned it with geometry property.

var xml = "<root>"+
                "<MyObject id=\"2\">"+
                "<mxCell style=\"strokeColor=black;fillColor=black\" parent=\"1\" vertex=\"1\" type = 'startLine'>"+
                "<mxGeometry x=\"0\" y=\"0\" width=\"2\" height=\"119\" as=\"geometry\"/>"+
                "</mxCell></MyObject></root>";
        doc = mxUtils.parseXml(xml),
        codec = new mxCodec(doc),
        elt = doc.documentElement.firstChild,
        cells = [];

        while (elt != null){                
            cells.push(codec.decodeCell(elt));
            elt.setAttribute('attribute1', 'value1');
            $this.editor.graph.refresh();
            elt = elt.nextSibling;
        }
        $this.editor.graph.addCells(cells);

Solution

  • for the sake of the question being marked as "answered" and so that others can see it :

    do this :

    var xml = "<root>"+
                    "<MyObject id=\"2\">"+
                    "<mxCell style=\"strokeColor=black;fillColor=black\" parent=\"1\" vertex=\"1\" type = 'startLine'>"+
                    "<mxGeometry x=\"0\" y=\"0\" width=\"2\" height=\"119\" as=\"geometry\"/>"+
                    "</mxCell></MyObject></root>";
            doc = mxUtils.parseXml(xml),
            codec = new mxCodec(doc),
            elt = doc.documentElement.firstChild,
            cells = [];
    
            while (elt != null){                
                cells.push(codec.decodeCell(elt));
                elt.setAttribute('attribute1', 'value1');
                $this.editor.graph.refresh();
                elt = elt.nextSibling;
            }
            $this.editor.graph.addCells(cells);