изменить размер ячейки в ячейке в JointJS

У меня есть демонстрационный код JointJS, в котором есть основные фигуры на бумаге, я хочу увеличить размер фигуры или выделить фигуру при щелчке указателя или перемещении курсора по фигуре,
образец демонстрационного кода находится здесь

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.com/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);    
}

);

Я новичок в JointJS.

я пытался изменить размер формы, но это не работает

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);

}

выделение происходит по щелчку на ячейке:

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);

}

Но я хочу изменить размер ячейки. когда я нажимаю на ячейку, я должен иметь возможность изменить размер ячейки

пожалуйста, помогите мне решить эту проблему.


person geek    schedule 11.12.2014    source источник


Ответы (1)


Вы почти правы, но вы вызываете метод resize() для идентификатора элемента, который является строкой. Ты должен сделать:

cellView.model.resize (ширина + 10, высота);

Я также не вижу в вашем примере, где определены ваши переменные width и height? Вообще в JointJS есть модели и представления. Например, highlight() — это метод представления (http://jointjs.com/api#joint.dia.ElementView:highlight), а resize() — это метод модели элемента (http://jointjs.com/api#joint.dia.Element:resize). Из представлений вы всегда можете перейти к моделям, обратившись к свойству view.model.

person dave    schedule 11.12.2014
comment
Привет, Дэйв, спасибо за ответ. ваше решение, которое помогло мне, я опубликовал полный пример того, что я хочу, когда я нажимаю на ячейку, я должен иметь возможность перетаскивать ячейку и изменять ее размер. что происходит, так это изменение размера до определенной высоты и ширины. я не могу изменить его размер. я хочу перетащить угол ячейки и изменить размер ячейки. - person geek; 12.12.2014
comment
@dave, как я могу расширить основную версию, чтобы пользователь мог изменять размер с любой стороны представления элемента? Я понимаю, что это особенность вашего коммерческого продукта, но как я могу добиться этого через ядро? - person Siddharth Pandey; 09.02.2016
comment
@SiddharthPandey, с новой версией JointJS теперь это должно быть довольно легко сделать с помощью метода dia.Element.resize(). Этот метод был расширен многочисленными вариантами изменения размера со всех сторон. См. раздел jointjs.com/api#joint.dia.Element:resize. - person dave; 14.02.2016