Resize all cells (rect) at once in jointjs diagram

788 views Asked by At

After the jointjs diagram is loaded I want to resize all the cells (rect) so that they have the same height as the one with the bigger text.

I managed to resize all elements at once, like this:

_.each(paper.model.getElements(), function(el) {
    el.set({ size: { width: 170 , height: newHeight} })         
 })

Among my elements, there are elements like "Rect" and some shapes that I created with "path". When I set the new size, elements created with "path" not only resize, but also changes their position on Y axis.

Any idea why my "path" elements reposition?

My "path" shape looks like this:

joint.shapes.basic.CustomShape = joint.shapes.basic.Generic.extend({

markup: '<g class="rotatable"><g class="scalable"><path/></g><text><tspan class="word1"></tspan> <tspan class="word2"></tspan></text></g>',

defaults: joint.util.deepSupplement({

    type: 'my.CustomShape',
    attrs: {
        path : {d: 'M 0 20 L 17 50 0 80 100 80  100 20  z',  fill: '#ffffd9', stroke: '#4d4d4d', width: 100, height: 60,  'stroke-width':'0.03em'},
        text: { ref: 'path' , 'line-height': 24 },
        '.word1': { 'font-size': 12, fill: '#58ab00', 'font-weight': 'bold', 'font-family': 'Arial, helvetica, sans-serif', 'x':'4em' , 'y' : '5em'},
        '.word2': { 'font-size': 11, fill: '#000000', 'font-family': 'Arial, helvetica, sans-serif', 'x':'37', 'y' : '7.5em'}
    }      
}, joint.shapes.basic.Generic.prototype.defaults)
});
1

There are 1 answers

0
elas On

i managed to resize all elements at once, like this:

_.each(paper.model.getElements(), function(el) {
    el.set({ size: { width: 170 , height: newHeight} })         
 })

Among my elements, there are elements like "Rect" and some shapes that i created with "path". When i set the new size, elements created with "path" not only resize, but also changes their position on Y axis.

Any idea why my "path" elements reposition?

My "path" shape looks like this:

joint.shapes.basic.CustomShape = joint.shapes.basic.Generic.extend({

 markup: '<g class="rotatable"><g class="scalable"><path/></g><text><tspan class="word1"></tspan> <tspan class="word2"></tspan></text></g>',

defaults: joint.util.deepSupplement({

    type: 'my.CustomShape',
    attrs: {
        path : {d: 'M 0 20 L 17 50 0 80 100 80  100 20  z',  fill: '#ffffd9', stroke: '#4d4d4d', width: 100, height: 60,  'stroke-width':'0.03em'},
        text: { ref: 'path' , 'line-height': 24 },
        '.word1': { 'font-size': 12, fill: '#58ab00', 'font-weight': 'bold', 'font-family': 'Arial, helvetica, sans-serif', 'x':'4em' , 'y' : '5em'},
        '.word2': { 'font-size': 11, fill: '#000000', 'font-family': 'Arial, helvetica, sans-serif', 'x':'37', 'y' : '7.5em'}
    }      
}, joint.shapes.basic.Generic.prototype.defaults)
});

Thank you!