Dynamic JointJS要素のサイズ

Question

独自のカスタムHTML要素を作成する以外に、要素のサイズ（四角形など）を格納する方法に依存する方法があります。たとえば、Fooと表示する場合は、要素は小さくなりますが、This is a really long stringの要素はもっと大きくなります。これはカスタム要素を作成せずに可能ですか？

Answer 1

これはカスタム要素モデルを使って行う方法です。下記のお要素モデルである場合

は、

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

そしてインスタンス化時には、あなたがアプローチの下に従うことができたときに要素のラベルを設定していると仮定して（それは幅と高さを固定している注意してください）

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

ここでは、幅はlength of label * (font size of label in pixel)で、高さは固定されています。

カスタムモデルを作成したくないので、要素（モデルのインスタンス）を作成した後で、グラフに追加する前に以下の属性を設定することができます。

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