Dynamic JointJS Elementgröße

Question

Abgesehen von der Erstellung eigener HTML-Elemente gibt es eine Möglichkeit, die Größe der Elemente (z. B. ein Rechteck) davon abhängig zu machen, was Sie darin speichern. Zum Beispiel, wenn ich Foo anzeigen möchte, dann ist das Element klein, aber für This is a really long string wird das Element viel größer sein. Ist das möglich, ohne benutzerdefinierte Elemente zu erstellen?

Answer 1

Dies ist, wie Sie es mit einem benutzerdefinierten Elementmodell tun.

unten Wenn Ihr Element-Modell, (Beachten Sie hat feste Breite und Höhe)

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

Und davon aus, dass Sie das Label des Elements setzen, wenn instantiate Zeit, Sie unten Ansatz folgen,

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

Hier ist die Breite length of label * (font size of label in pixel) und die Höhe ist fest.

Da Sie jedoch kein benutzerdefiniertes Modell erstellen möchten, können Sie nach dem Erstellen des Elements (Instanz des Modells) die folgenden Attribute festlegen, bevor Sie es zum Diagramm hinzufügen.

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