Dinamik JointJS öğe boyutu

Question

Kendi özel HTML öğelerinizi oluşturmaktan başka, öğelerin boyutunun (örneğin, bir dikdörtgen) içinde sakladığınız öğelere bağımlı olmasının bir yolu var mıdır. Örneğin, Foo görüntülemek istiyorsam, öğe küçüktür, ancak This is a really long string için öğe çok daha büyük olacaktır. Bu özel öğeler oluşturmadan mümkün mü?

Answer 1

Özel bir öğe modeli ile bunu nasıl yaparsınız. aşağıya Eleman modelse

,

joint.shapes.custom.CustomElement = joint.shapes.devs.Model.extend({ 
defaults: joint.util.deepSupplement({ 
    type: 'custom.CustomElement', 
    position: { x: 300, y: 50 }, 
    size: { width: 90, height: 90 }, 
}, joint.shapes.devs.Model.prototype.defaults) }); 

Ve örneğini sefer, yaklaşımı aşağıda takip edebilirsiniz zaman elemanın etiketi ayarlarken varsayarak (o genişlik ve yükseklik sabit aldığına dikkat edin)

var label = "My Element Label"; 
var elem = new joint.shapes.custom.CustomElement({ 
    size: { width: label.length*12, height: 80 }, 
    attrs: { 
     '.label': {text: label} 
    } 
}); 

graph.addCell(elem); 

Burada genişlik length of label * (font size of label in pixel) ve yüksekliği sabittir.

Ancak, özel bir model oluşturmak istemediğinizden, öğeyi oluşturduktan sonra (modelin örneği), aşağıdaki özellikleri grafiğe eklemeden önce ayarlayabilirsiniz.

var label = "my custom label"; 
var elem = // create your element 
elem.attributes.size.width = label.lenght*12 
graph.adddCell(elem)