I have a jointjs demo code, which has basic shapes on paper, i want to increase the size of the shape, or highlight the shape on pointer click or cursor moved on the shape,
sample demo code goes here

var graph = new joint.dia.Graph;

var paper = new joint.dia.Paper({

el: $('#paper'),
width: 650,
height: 400,
gridSize: 20,
model: graph
});

var rb = new joint.shapes.basic.Rect({
position: { x: 50, y: 50 },
size: { width: 100, height: 40 },
attrs: { text: { text: 'basic.Rect' } }
});
graph.addCell(rb);

var tb = new joint.shapes.basic.Text({
position: { x: 170, y: 50 },
size: { width: 100, height: 30 },
attrs: { text: { text: 'basic.Text' } }
});
graph.addCell(tb);

 var cb = new joint.shapes.basic.Circle({
position: { x: 300, y: 70 },
size: { width: 100, height: 40 },
attrs: { text: { text: 'basic.Circle' } }
});
graph.addCell(cb);

var ib = new joint.shapes.basic.Image({
position: { x: 450, y: 50 },
size: { width: 40, height: 40 },
attrs: {
    text: { text: 'basic.Image' },
    image: { 'xlink:href': '.png', width: 48, height: 48 }
}
});
graph.addCell(ib);

var pb = new joint.shapes.basic.Path({
position: { x: 50, y: 150 },
size: { width: 40, height: 40 },
attrs: {
    path: { d: 'M25.979,12.896 19.312,12.896 19.312,6.229 12.647,6.229 12.647,12.896 5.979,12.896 5.979,19.562 12.647,19.562 12.647,26.229 19.312,26.229 19.312,19.562 25.979,19.562z' },
    text: { text: 'basic.Path' }
}
});
graph.addCell(pb);

var rh = new joint.shapes.basic.Rhombus({
position: { x: 50, y: 250 },
size: { width: 70, height: 70 },
attrs: { text: { text: 'basic.Rhombus', 'font-size': 8 } }
});
graph.addCell(rh);

var tbl = new joint.shapes.basic.TextBlock({
position: { x: 400, y: 180 },
size: { width: 180, height: 100 },
content: "Lorem ipsum dolor sit amet,\n consectetur adipiscing elit. Nulla vel porttitor est."
});
graph.addCell(tbl);


// An example of a custom element.
// -------------------------------

var MyElementWithPorts = joint.shapes.basic.Generic.extend({

  defaults: joint.util.deepSupplement({

   markup: [
       '<g class="rotatable">',
       '<g class="scalable">',
       '<rect/>',
       '</g>',
       '<g class="inPorts">',
       '<g class="port1"><circle/><text/></g>',
       '<g class="port2"><circle/><text/></g>',
       '</g>',
       '<g class="outPorts">',
       '<g class="port3"><circle/><text/></g>',
       '<g class="port4"><circle/><text/></g>',
       '</g>',
       '</g>'
   ].join(''),

   type: 'basic.Generic',
   attrs: {
       '.': { magnet: false },
       rect: {
           width: 150, height: 250,
           stroke: 'black'
       },
       circle: {
           r: 5,
           magnet: true,
           stroke: 'black'
       },
       text: {
           fill: 'black',
           'pointer-events': 'none'
       },
       '.label': { text: 'Model', dx: 5, dy: 5 },
       '.inPorts text': { dx:-15, 'text-anchor': 'end' },
       '.outPorts text':{ dx: 15 },
       '.inPorts circle': { fill: 'PaleGreen' },
       '.outPorts circle': { fill: 'Tomato' }
   }

 }, joint.shapes.basic.Generic.prototype.defaults)
});

var d = new MyElementWithPorts({
position: { x: 250, y: 150 },
size: { width: 80, height: 80 },
attrs: {
    '.port1 text': { text: 'port1' },
    '.port2 text': { text: 'port2' },
    '.port3 text': { text: 'port3' },
    '.port4 text': { text: 'port4' },
    '.port1': { ref: 'rect', 'ref-y': .2 },
    '.port2': { ref: 'rect', 'ref-y': .4 },
    '.port3': { ref: 'rect', 'ref-y': .2, 'ref-dx': 0 },
    '.port4': { ref: 'rect', 'ref-y': .4, 'ref-dx': 0 }        
}
});

graph.addCell(d);


// An example showing auto-resize of the joint.shapes.basic.Rect element based on the size of the text in it:

rb.on('change:attrs', function(element) {

var text = rb.attr(' /text');
var fontSize = parseInt(rb.attr('text/font-size'), 10);

var svgDocument = V('svg').node;
var textElement = V('<text><tspan></tspan></text>').node;
var textSpan = textElement.firstChild;
var textNode = document.createTextNode('');

textSpan.appendChild(textNode);
svgDocument.appendChild(textElement);
document.body.appendChild(svgDocument);

var lines = text.split('\n');
var width = 0;

// Find the longest line width.
_.each(lines, function(line) {

    textNode.data = line;
    var lineWidth = textSpan.getComputedTextLength();

    width = Math.max(width, lineWidth);
});

var height = lines.length * (fontSize * 1.2);

V(svgDocument).remove();

element.resize(width + 10, height);
});

paper.on('cell:pointerdown', 
function(cellView, evt, x, y) { 
//cellView.model.resize(cellView.model.height+2, cellView.model.width+2);
    cellView.model.resize(width + 10, height);  
    //rb.scale(rb.x+10,rb.y+10);        
    cellView.highlight(cellView.model.id);


}

);
paper.on('cell:pointerup', 
function(cellView, evt, x, y) {  
                //element.resize(width + 10, height);
    //          cellView.model.resize(cellView.model.width-2, cellView.model.height-2);
    cellView.unhighlight(cellView.model.id);    
}

);

I am new bee to jointjs.

i tried to resize the shape but it is not working

paper.on('cell:pointerdown', 
function(cellView, evt, x, y) { 
    alert('cell view ' + cellView.model.id + ' was clicked'); 
        var bbox = cellView.getBBox();
var strokeWidth = cellView.model.attr('rect/stroke-width') || 1;
console.log(isBorderClicked(bbox, x, y, strokeWidth))
    //cellView.model.id.resize(width + 10, height);

}

highlighting is happening by the click on the cell:

paper.on('cell:pointerdown', 
function(cellView, evt, x, y) { 
   // alert('cell view ' + cellView.model.id + ' was clicked' ); 
    cellView.highlight(cellView.model.id)    
        //element.resize(width + 10, height);

}

);
paper.on('cell:pointerup', 
function(cellView, evt, x, y) { 
    //alert('cell view ' + cellView.model.id + ' was released' ); 
    cellView.unhighlight(cellView.model.id)    
        //element.resize(width + 10, height);

}

But i want to resize the cell. when i click on the cell i should be able to resize the cell

please help me out solving this problem.

I have a jointjs demo code, which has basic shapes on paper, i want to increase the size of the shape, or highlight the shape on pointer click or cursor moved on the shape,
sample demo code goes here

var graph = new joint.dia.Graph;

var paper = new joint.dia.Paper({

el: $('#paper'),
width: 650,
height: 400,
gridSize: 20,
model: graph
});

var rb = new joint.shapes.basic.Rect({
position: { x: 50, y: 50 },
size: { width: 100, height: 40 },
attrs: { text: { text: 'basic.Rect' } }
});
graph.addCell(rb);

var tb = new joint.shapes.basic.Text({
position: { x: 170, y: 50 },
size: { width: 100, height: 30 },
attrs: { text: { text: 'basic.Text' } }
});
graph.addCell(tb);

 var cb = new joint.shapes.basic.Circle({
position: { x: 300, y: 70 },
size: { width: 100, height: 40 },
attrs: { text: { text: 'basic.Circle' } }
});
graph.addCell(cb);

var ib = new joint.shapes.basic.Image({
position: { x: 450, y: 50 },
size: { width: 40, height: 40 },
attrs: {
    text: { text: 'basic.Image' },
    image: { 'xlink:href': 'https://cdn3.iconfinder./data/icons/betelgeuse/96/224386-folder-image-48.png', width: 48, height: 48 }
}
});
graph.addCell(ib);

var pb = new joint.shapes.basic.Path({
position: { x: 50, y: 150 },
size: { width: 40, height: 40 },
attrs: {
    path: { d: 'M25.979,12.896 19.312,12.896 19.312,6.229 12.647,6.229 12.647,12.896 5.979,12.896 5.979,19.562 12.647,19.562 12.647,26.229 19.312,26.229 19.312,19.562 25.979,19.562z' },
    text: { text: 'basic.Path' }
}
});
graph.addCell(pb);

var rh = new joint.shapes.basic.Rhombus({
position: { x: 50, y: 250 },
size: { width: 70, height: 70 },
attrs: { text: { text: 'basic.Rhombus', 'font-size': 8 } }
});
graph.addCell(rh);

var tbl = new joint.shapes.basic.TextBlock({
position: { x: 400, y: 180 },
size: { width: 180, height: 100 },
content: "Lorem ipsum dolor sit amet,\n consectetur adipiscing elit. Nulla vel porttitor est."
});
graph.addCell(tbl);


// An example of a custom element.
// -------------------------------

var MyElementWithPorts = joint.shapes.basic.Generic.extend({

  defaults: joint.util.deepSupplement({

   markup: [
       '<g class="rotatable">',
       '<g class="scalable">',
       '<rect/>',
       '</g>',
       '<g class="inPorts">',
       '<g class="port1"><circle/><text/></g>',
       '<g class="port2"><circle/><text/></g>',
       '</g>',
       '<g class="outPorts">',
       '<g class="port3"><circle/><text/></g>',
       '<g class="port4"><circle/><text/></g>',
       '</g>',
       '</g>'
   ].join(''),

   type: 'basic.Generic',
   attrs: {
       '.': { magnet: false },
       rect: {
           width: 150, height: 250,
           stroke: 'black'
       },
       circle: {
           r: 5,
           magnet: true,
           stroke: 'black'
       },
       text: {
           fill: 'black',
           'pointer-events': 'none'
       },
       '.label': { text: 'Model', dx: 5, dy: 5 },
       '.inPorts text': { dx:-15, 'text-anchor': 'end' },
       '.outPorts text':{ dx: 15 },
       '.inPorts circle': { fill: 'PaleGreen' },
       '.outPorts circle': { fill: 'Tomato' }
   }

 }, joint.shapes.basic.Generic.prototype.defaults)
});

var d = new MyElementWithPorts({
position: { x: 250, y: 150 },
size: { width: 80, height: 80 },
attrs: {
    '.port1 text': { text: 'port1' },
    '.port2 text': { text: 'port2' },
    '.port3 text': { text: 'port3' },
    '.port4 text': { text: 'port4' },
    '.port1': { ref: 'rect', 'ref-y': .2 },
    '.port2': { ref: 'rect', 'ref-y': .4 },
    '.port3': { ref: 'rect', 'ref-y': .2, 'ref-dx': 0 },
    '.port4': { ref: 'rect', 'ref-y': .4, 'ref-dx': 0 }        
}
});

graph.addCell(d);


// An example showing auto-resize of the joint.shapes.basic.Rect element based on the size of the text in it:

rb.on('change:attrs', function(element) {

var text = rb.attr(' /text');
var fontSize = parseInt(rb.attr('text/font-size'), 10);

var svgDocument = V('svg').node;
var textElement = V('<text><tspan></tspan></text>').node;
var textSpan = textElement.firstChild;
var textNode = document.createTextNode('');

textSpan.appendChild(textNode);
svgDocument.appendChild(textElement);
document.body.appendChild(svgDocument);

var lines = text.split('\n');
var width = 0;

// Find the longest line width.
_.each(lines, function(line) {

    textNode.data = line;
    var lineWidth = textSpan.getComputedTextLength();

    width = Math.max(width, lineWidth);
});

var height = lines.length * (fontSize * 1.2);

V(svgDocument).remove();

element.resize(width + 10, height);
});

paper.on('cell:pointerdown', 
function(cellView, evt, x, y) { 
//cellView.model.resize(cellView.model.height+2, cellView.model.width+2);
    cellView.model.resize(width + 10, height);  
    //rb.scale(rb.x+10,rb.y+10);        
    cellView.highlight(cellView.model.id);


}

);
paper.on('cell:pointerup', 
function(cellView, evt, x, y) {  
                //element.resize(width + 10, height);
    //          cellView.model.resize(cellView.model.width-2, cellView.model.height-2);
    cellView.unhighlight(cellView.model.id);    
}

);

I am new bee to jointjs.

i tried to resize the shape but it is not working

paper.on('cell:pointerdown', 
function(cellView, evt, x, y) { 
    alert('cell view ' + cellView.model.id + ' was clicked'); 
        var bbox = cellView.getBBox();
var strokeWidth = cellView.model.attr('rect/stroke-width') || 1;
console.log(isBorderClicked(bbox, x, y, strokeWidth))
    //cellView.model.id.resize(width + 10, height);

}

highlighting is happening by the click on the cell:

paper.on('cell:pointerdown', 
function(cellView, evt, x, y) { 
   // alert('cell view ' + cellView.model.id + ' was clicked' ); 
    cellView.highlight(cellView.model.id)    
        //element.resize(width + 10, height);

}

);
paper.on('cell:pointerup', 
function(cellView, evt, x, y) { 
    //alert('cell view ' + cellView.model.id + ' was released' ); 
    cellView.unhighlight(cellView.model.id)    
        //element.resize(width + 10, height);

}

But i want to resize the cell. when i click on the cell i should be able to resize the cell

please help me out solving this problem.

• javascript
• jointjs

1 Answer 1

You have it almost right but you're calling the resize() method on the ID of the element which is a string. You should do:

cellView.model.resize(width + 10, height);

I also don't see in your example where are your width and height variables defined? In general, in JointJS there are models and views. For example, the highlight() is a method of a view (http://jointjs./api#joint.dia.ElementView:highlight) and the resize() is a method of the element model (http://jointjs./api#joint.dia.Element:resize). From views, you can always get to models by accessing the view.model property.