CODEWITHSUNDEEP
javascriptjointjs
SMJoe
SMJoe

Reputation: 111

JointJS Models - Text attr is not assigned

I am creating a simple joint.shapes.devs.Model and assigning a text attribute, but the text doesn't come up, it is labeled "Model" instead. 

function makeEditableElement(label) {

        var maxLineLength = _.max(label.split('\n'), function(l) { return l.length; }).length;

        // Compute width/height of the rectangle based on the number 
        // of lines in the label and the letter size. 0.6 * letterSize is
        // an approximation of the monospace font letter width.
        var letterSize = 15;
        var width = 2 * (letterSize * (0.3 * maxLineLength + 1));
        var height = 2 * ((label.split('\n').length + 1) * letterSize);

        return new joint.shapes.devs.Model({
            '.label': label,
            size: { width: width, height: height },
            inPorts: [''],
            outPorts: [''],
            attrs: {  '.inPorts circle': { r: 3 ,fill: 'gray', type: 'input',magnet: 'passive'},
                    '.outPorts circle': { r: 3 ,fill: 'gray', type: 'output',magnet:'true' },
                    rect: { width: width, height: height, fill: '#FFF' ,rx: 5,ry: 5, 'stroke-width':1.5,  'stroke': '#555' }, 
                    text: { text: label, fill: '#555' , 'font-size': 13, magnet: true,'font-weight': 'normal'} 
                }
        });
    }  
graph.addCell(makeEditableElement("foo"));
joint.layout.DirectedGraph.layout(graph, { setLinkVertices: false });

Please point out if I am missing something, as I am new to JointJS. Thanks in advance.

Upvotes: 0

Views: 369

Answers (2)

SMJoe
SMJoe

Reputation: 111

I got it working by changing the position of '.label' inside the attrs as:

function makeEditableElement(label,x,y) {

        var maxLineLength = _.max(label.split('\n'), function(l) { return l.length; }).length;

        // Compute width/height of the rectangle based on the number 
        // of lines in the label and the letter size. 0.6 * letterSize is
        // an approximation of the monospace font letter width.
        var letterSize = 15;
        var width = 2 * (letterSize * (0.3 * maxLineLength + 1));
        var height = 2 * ((label.split('\n').length + 1) * letterSize);

        return new joint.shapes.devs.Model({
            id: label,
            position: {x:x, y:y},
            size: { width: width, height: height, fill: 'transparent' ,rx: 5,ry: 5, 'stroke-width':1.5,  'stroke': '#31d0c6' },
            inPorts: [''],
            outPorts: [''],
            attrs: {  '.label': {text: label},
                    '.inPorts circle': { r: 3 ,fill: 'gray', type: 'input',magnet: 'passive'},
                    '.outPorts circle': { r: 3 ,fill: 'gray', type: 'output',magnet:'true' },
                    rect: { width: width, height: height, fill: 'transparent' ,rx: 5,ry: 5, 'stroke-width':1.5,  'stroke': '#31d0c6' },
                    text: { text: label, magnet: true, 'font-size': letterSize, 'font-family': 'monospace' }
                }
        });
    }

Upvotes: 1

Pat
Pat

Reputation: 2750

'.label' needs to be assigned an object that contains a text property -- you are assigning it only the string "foo"

Try the following instead:

...

'.label': { text: label },

...

Upvotes: 0

Related Questions